import React , { FC , useState } from 'react' ; import { Switch , message , Tooltip } from 'antd' ; import { QuestionCircleFilled } from '@ant-design/icons' ; import classNames from 'classnames' ; import styles from './Swatch.module.less' ; interface SwatchProps { title : string ; darkmode ? : boolean ; colors ? : string ; colornames ? : string ; grid ? : 'sudoku' ; descriptions ? : string ; } const copyToClipboard = ( str ) => { const el = document . createElement ( 'textarea' ) ; el . value = str ; document . body . appendChild ( el ) ; el . select ( ) ; document . execCommand ( 'copy' ) ; document . body . removeChild ( el ) ; } ; interface ColorsProps { colorStyle : React . CSSProperties ; colors : string [ ] ; names ? : string [ ] ; name ? : string ; description ? : string ; } const Colors = ( { colorStyle = { } , colors = [ ] , names = [ ] , name , description , } ) => { if ( colors . length === 0 ) { return null ; } return ( < div className = { styles . colors } style = { { width : colors . length > 10 ? '100%' : '' } } > < div className = { styles . container } > { description ? ( < div className = { styles . name } > < span style = { { marginRight : '5px' } } > { name } < /span> < Tooltip placement = "bottom" title = { description } > < QuestionCircleFilled /> < /Tooltip> < /div>) : (<span className={styles.name}>{name}</span > ) } { colors . map ( ( color , i ) => ( < div className = { classNames ( styles . color , { [ styles . first ] : i === 0 , [ styles . third ] : i === 2 , [ styles . seventh ] : i === 6 , [ styles . last ] : i === colors . length - 1 , } ) } style = { { ... colorStyle , backgroundColor : color , color , } } key = { i } onClick = { ( ) => { copyToClipboard ( color ) ; message . success ( < span > Copied < span style = { { backgroundColor : color } } className = { styles . block } / > { color } < /span>); } } > < span className = { styles . name } style = { { display : colors . length > 10 ? 'none' : '' } } > { names [ i ] } < /span> < /div>))} < /div> < /div>); } ; const Swatch = ( { title , darkmode = true , colors = '' , colornames = '' , descriptions = '' , grid , } ) => { const [ dark , toggleDark ] = useState ( false ) ; let colorsArray = [ ] as string [ ] ; const colorsSwatchArray = [ ] as string [ ] [ ] ; const des = descriptions . split ( '|' ) ; const colorNamesArray = colornames . split ( ',' ) ; const colorStyle = { } ; if ( colors . includes ( '|' ) ) { colors . split ( '|' ) . forEach ( ( item ) => { colorsSwatchArray . push ( item . split ( ',' ) ) ; } ) ; } else { colorsArray = colors . split ( ',' ) ; if ( colorsArray . length < 5 ) { colorStyle . width = `calc(${ 100 / colorsArray . length }% - 150px)` ; colorStyle . minWidth = 120 ; colorStyle . marginLeft = 12 ; colorStyle . marginRight = 12 ; colorStyle . fontSize = 16 ; } else if ( colorsArray . length > 10 ) { colorStyle . width = 25 ; colorStyle . height = 25 ; colorStyle . marginLeft = 4 ; colorStyle . marginRight = 4 ; } } const isSudoKu = grid === 'sudoku' ; return ( < div className = { classNames ( styles . swatch , { [ styles . dark ] : ! ! dark , [ styles . multiple ] : colors . includes ( '|' ) , [ styles . sudoku ] : isSudoKu , [ styles . less ] : colors . split ( ',' ) . length < 5 , } ) } > { ( title || darkmode ) && ( < div className = { styles . heading } > < h4 > { title } < /h4> { darkmode && ( < div > < span className = { styles . darkmode } > Dark Mode < /span> < Switch checked = { dark } size = "small" onChange = { ( checked ) => toggleDark ( checked ) } /> < /div>)} < /div>)} < div className = { styles . panel } > < div className = { styles . panelContainer } > { colorsSwatchArray . map ( ( swatch , i ) => ( < Colors key = { i } name = { colorNamesArray [ i ] } colorStyle = { { ... colorStyle , maxWidth : isSudoKu ? undefined : `${ 100 / swatch . length }%` , } } colors = { swatch } description = { des [ i ] } / > ) ) } < Colors names = { colorNamesArray } colorStyle = { colorStyle } colors = { colorsArray } / > < /div> < /div> < /div>); } ; export default Swatch ;