import React from "react" ; import { Interactive , Interaction } from "./Interactive" ; import { Pointer } from "./Pointer" ; import { hsvaToHslaString } from "../../utils/convert" ; import { formatClassName } from "../../utils/format" ; import { clamp } from "../../utils/clamp" ; import { round } from "../../utils/round" ; import { HsvaColor } from "../../types" ; interface Props { className ? : string ; hsva : HsvaColor ; onChange : ( newAlpha : { a : number ; } ) => void ; } export const Alpha = ( { className , hsva , onChange } ) : JSX . Element => { const handleMove = ( interaction ) => { onChange ( { a : interaction . left } ) ; } ; const handleKey = ( offset ) => { onChange ( { a : clamp ( hsva . a + offset . left ) } ) ; } ; const colorFrom = hsvaToHslaString ( Object . assign ( { } , hsva , { a : 0 } ) ) ; const colorTo = hsvaToHslaString ( Object . assign ( { } , hsva , { a : 1 } ) ) ; const gradientStyle = { backgroundImage : `linear-gradient(90deg, ${ colorFrom }, ${ colorTo })` , } ; const nodeClassName = formatClassName ( [ "react-colorful__alpha" , className ] ) ; return ( < div className = { nodeClassName } > < div className = "react-colorful__alpha-gradient" style = { gradientStyle } / > < Interactive onMove = { handleMove } onKey = { handleKey } aria - label = "Alpha" aria - valuetext = { `${ round ( hsva . a * 100 ) }%` } > < Pointer className = "react-colorful__alpha-pointer" left = { hsva . a } color = { hsvaToHslaString ( hsva ) } / > < /Interactive> < /div>); } ;