import { colors , space } from '@workday/canvas-kit-react/tokens' ; import { checkIcon } from '@workday/canvas-system-icons-web' ; import { ColorInput } from '@workday/canvas-kit-react/color-picker' ; import { IconButton } from '@workday/canvas-kit-react/button' ; import * as React from 'react' ; import FormField from '@workday/canvas-kit-react/form-field' ; import styled from '@emotion/styled' ; import { ResetButton } from './parts/ColorReset' ; import { SwatchBook } from './parts/SwatchBook' ; export interface ColorPickerProps extends React . HTMLAttributes < HTMLDivElement > { /**
     * The function called when the ColorPicker state changes.
     */ onColorChange : ( color : string ) => void ; /**
     * The value of the ColorPicker.
     */ value ? : string ; /**
     * The array of colors to be rendered in the swatchbook.
     */ colorSet ? : string [ ] ; default showCustomHexInput ? : boolean ; default customHexInputLabel ? : string ; default submitLabel ? : string ; /**
     * The function called when the submit icon is clicked.
     */ onSubmitClick ? : ( event : React . FormEvent ) => void ; /**
     * The function called when the color rest button is selected.
     * It is required to be set for the reset button to render.
     */ onColorReset ? : ( color : string ) => void ; /**
     * The color that the reset button resets to.
     * It is required to be set for the reset button to render.
     */ resetColor ? : string ; default resetLabel ? : string ; } const defaultColorSet = [ colors . blueberry600 , colors . grapeSoda600 , colors . pomegranate600 , colors . cinnamon600 , colors . cantaloupe600 , colors . sourLemon600 , colors . greenApple600 , colors . jewel600 , colors . blueberry500 , colors . grapeSoda500 , colors . pomegranate500 , colors . cinnamon500 , colors . cantaloupe500 , colors . sourLemon500 , colors . greenApple500 , colors . jewel500 , colors . blueberry400 , colors . grapeSoda400 , colors . pomegranate400 , colors . cinnamon400 , colors . cantaloupe400 , colors . sourLemon400 , colors . greenApple400 , colors . jewel400 , colors . blueberry300 , colors . grapeSoda300 , colors . pomegranate300 , colors . cinnamon300 , colors . cantaloupe300 , colors . sourLemon300 , colors . greenApple300 , colors . jewel300 , colors . blueberry200 , colors . grapeSoda200 , colors . pomegranate200 , colors . cinnamon200 , colors . cantaloupe200 , colors . sourLemon200 , colors . greenApple200 , colors . jewel200 , colors . blueberry100 , colors . grapeSoda100 , colors . pomegranate100 , colors . cinnamon100 , colors . cantaloupe100 , colors . sourLemon100 , colors . greenApple100 , colors . jewel100 , colors . blackPepper600 , colors . blackPepper400 , colors . blackPepper300 , colors . blackPepper100 , colors . frenchVanilla500 , colors . frenchVanilla400 , colors . frenchVanilla200 , colors . frenchVanilla100 , ] ; const ColorPickerContainer = styled ( 'div' ) ( { width : 216 , } ) ; const ColorInputWrapper = styled ( 'form' ) ( { width : '100%' , marginTop : space . s , display : 'flex' , flexDirection : 'row' , justifyContent : 'space-between' , } ) ; const ColorInputAndLabel = styled ( FormField ) ( { display : 'flex' , flexDirection : 'column' , margin : 0 , } ) ; const CheckButton = styled ( IconButton ) ( { alignSelf : 'flex-end' , } ) ; const HexColorInput = styled ( ColorInput ) ( { width : '168px' , } ) ; const isCustomColor = ( colors , hexCode ? ) => { if ( ! hexCode ) { return false ; } const lowercaseHex = hexCode . toLowerCase ( ) ; return ! colors . includes ( lowercaseHex ) ; } ; const ColorPicker = ( { colorSet = defaultColorSet , customHexInputLabel = 'Custom Hex Color' , submitLabel = 'Submit' , onColorChange , onColorReset , onSubmitClick , resetLabel = 'Reset' , resetColor , value = '' , showCustomHexInput = false , ... elemProps } ) => { const [ validHexValue , setValidHexValue ] = React . useState ( '' ) ; const [ customHexValue , setCustomHexValue ] = React . useState ( isCustomColor ( colorSet , value ) ? value : '' ) ; const onCustomHexChange = ( event ) => { setCustomHexValue ( event . target . value ) ; setValidHexValue ( '' ) ; } ; const onValidCustomHexChange = ( validHexValue ) => setValidHexValue ( validHexValue ) ; const onSubmit = ( event ) => { if ( onSubmitClick ) { onSubmitClick ( event ) ; } onColorChange ( validHexValue ) ; event . preventDefault ( ) ; } ; return ( < ColorPickerContainer { ... elemProps } > { onColorReset && resetColor && ( < ResetButton onClick = { onColorReset } resetColor = { resetColor } label = { resetLabel } / > ) } < SwatchBook colors = { colorSet } onSelect = { onColorChange } value = { value } / > { showCustomHexInput && ( < ColorInputWrapper onSubmit = { onSubmit } > < ColorInputAndLabel label = { customHexInputLabel } > < HexColorInput onChange = { onCustomHexChange } onValidColorChange = { onValidCustomHexChange } value = { customHexValue } showCheck = { value === validHexValue || value === customHexValue } /> < /ColorInputAndLabel> < CheckButton aria - label = { submitLabel } variant = "circleFilled" icon = { checkIcon } / > < /ColorInputWrapper>)} < /ColorPickerContainer>); } ; ColorPicker . defaultColorSet = defaultColorSet ; export default ColorPicker ;