63 lines
1.7 KiB
JavaScript
63 lines
1.7 KiB
JavaScript
// @flow
|
|
'use strict';
|
|
|
|
import React, { useState } from 'react';
|
|
import reactCSS from 'reactcss';
|
|
import { SketchPicker } from 'react-color';
|
|
import classNames from 'classnames';
|
|
import { changeColor, getPrimaryColor } from 'util/theme';
|
|
|
|
type Props = {
|
|
disabled?: boolean,
|
|
};
|
|
|
|
function ColorPicker(props: Props) {
|
|
const { disabled } = props;
|
|
const [displayColorPicker, toggleDisplayColorPicker] = useState(false);
|
|
let dynamic = getPrimaryColor();
|
|
var rgb = dynamic.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i);
|
|
var hex = rgb
|
|
? (rgb[1] | (1 << 8)).toString(16).slice(1) +
|
|
(rgb[2] | (1 << 8)).toString(16).slice(1) +
|
|
(rgb[3] | (1 << 8)).toString(16).slice(1)
|
|
: dynamic;
|
|
const [color, setColor] = useState({
|
|
hex: '#' + hex,
|
|
rgb: { r: parseInt(rgb[1]), g: parseInt(rgb[2]), b: parseInt(rgb[3]), a: 1 },
|
|
});
|
|
|
|
const styles = reactCSS({
|
|
default: {
|
|
color: {
|
|
background: `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`,
|
|
},
|
|
},
|
|
});
|
|
|
|
function handleChange(color) {
|
|
console.log('Color: ', color);
|
|
changeColor(color.rgb);
|
|
setColor(color);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={classNames('color-picker', {
|
|
disabled: disabled,
|
|
})}
|
|
>
|
|
<input value={color.hex} />
|
|
<div className="swatch" onClick={() => toggleDisplayColorPicker(!displayColorPicker)}>
|
|
<div className="color" style={styles.color} />
|
|
</div>
|
|
{displayColorPicker ? (
|
|
<div className="popover">
|
|
<div className="cover" onClick={() => toggleDisplayColorPicker(false)} />
|
|
<SketchPicker color={color} onChange={handleChange} disableAlpha />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ColorPicker;
|