import React from 'react' ; import { HsvaColor , ColorResult , color as handleColor , validHex , hexToHsva , hsvaToHex } from '@uiw/color-convert' ; import EditableInput from '@uiw/react-color-editable-input' ; import RGBA from '@uiw/react-color-editable-input-rgba' ; export interface MaterialProps extends Omit < React . HTMLAttributes < HTMLDivElement > , 'onChange' | 'color' > { prefixCls ? : string ; color ? : string | HsvaColor ; onChange ? : ( color : ColorResult ) => void ; } const styleRBG = { boxShadow : 'initial' , borderWidth : '0 0 1px 0' , borderBottomColor : '#eee' , borderBottomStyle : 'solid' , height : 30 , outline : 0 , fontSize : 15 , padding : 0 , } ; const Material = React . forwardRef < HTMLDivElement , MaterialProps > ( ( props , ref ) => { const { prefixCls = 'w-color-material' , className , style , color , onChange , ... other } = props ; const hsva = ( typeof color === 'string' && validHex ( color ) ? hexToHsva ( color ) : color ) as HsvaColor ; const hex = color ? hsvaToHex ( hsva ) . replace ( /^#/ , '' ) : '' ; const handleChange = ( hsv ) => { onChange && onChange ( handleColor ( hsv ) ) ; } ; const handleHex = ( value , evn ) => { if ( typeof value === 'string' && validHex ( value ) && /(3|6)/ . test ( String ( value . length ) ) ) { onChange && onChange ( handleColor ( hexToHsva ( value ) ) ) ; } } ; return ( < div ref = { ref } className = { [ prefixCls , className || '' ] . filter ( Boolean ) . join ( ' ' ) } style = { { padding : 16 , width : 98 , fontFamily : 'Roboto' , backgroundColor : '#fff' , ... style } } { ... other } > < EditableInput label = "Hex" value = { hex . toLocaleUpperCase ( ) } onChange = { ( evn , val ) => handleHex ( val , evn ) } onBlur = { ( evn ) => { const value = evn . target . value ; evn . target . value = value . slice ( 0 , 6 ) ; handleHex ( value . slice ( 0 , 6 ) , evn ) ; } } inputStyle = { { outline : 0 , border : 0 , height : 30 , fontSize : 15 , padding : 0 , boxShadow : 'initial' , borderWidth : '0 0 2px 0' , borderBottomColor : hex ? `#${ hex }` : '#eee' , borderBottomStyle : 'solid' , } } style = { { flexDirection : 'column-reverse' , alignItems : 'flex-start' } } /> < RGBA hsva = { hsva } placement = "top" style = { { marginTop : 11 } } rProps = { { style : { alignItems : 'flex-start' , } , inputStyle : { ... styleRBG } , } } gProps = { { style : { alignItems : 'flex-start' , } , inputStyle : { ... styleRBG } , } } bProps = { { style : { alignItems : 'flex-start' , } , inputStyle : { ... styleRBG } , } } aProps = { false } onChange = { ( result ) => handleChange ( result . hsva ) } /> < /div>); } ) ; Material . displayName = 'Material' ; export default Material ;