mirror of https://github.com/sgoudham/carbon.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
import SketchPicker from 'react-color/lib/Sketch'
|
|
|
|
import { COLORS } from '../lib/constants'
|
|
|
|
const pickerStyle = {
|
|
backgroundColor: COLORS.BLACK,
|
|
padding: '8px 8px 0',
|
|
margin: '0 auto 1px',
|
|
}
|
|
|
|
export default function ColorPicker(props) {
|
|
const [color, setColor] = React.useState(props.color)
|
|
const { onChange = () => {}, presets, style, disableAlpha } = props
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<SketchPicker
|
|
styles={{ picker: style || pickerStyle }}
|
|
onChange={setColor}
|
|
color={color}
|
|
onChangeComplete={onChange}
|
|
presetColors={presets}
|
|
disableAlpha={disableAlpha}
|
|
/>
|
|
<style jsx>
|
|
{`
|
|
/* react-color overrides */
|
|
:global(.sketch-picker > div:nth-child(3) > div > div > span) {
|
|
color: ${COLORS.SECONDARY} !important
|
|
}
|
|
|
|
:global(.sketch-picker > div:nth-child(3) > div > div > input) {
|
|
width: 100% !important
|
|
box-shadow: none
|
|
outline: none
|
|
border-radius: 2px
|
|
background: ${COLORS.DARK_GRAY}
|
|
color: #fff !important
|
|
}
|
|
|
|
:global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) {
|
|
background: #fff
|
|
}
|
|
`}
|
|
</style>
|
|
</React.Fragment>
|
|
)
|
|
}
|