plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
56 lines (55 loc) • 1.96 kB
JavaScript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Popover, Button } from 'antd';
import { SketchPicker } from 'react-color';
class ColorPicker extends Component {
constructor() {
super(...arguments);
this.handlers = {
onChange: (color) => {
const { onChange, valueType } = this.props;
let newColor;
if (valueType === 'string') {
newColor = `rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`;
}
else {
newColor = color.rgb;
}
this.setState({
color: newColor,
}, () => {
onChange(newColor);
});
},
};
this.state = {
color: this.props.value || 'rgba(255, 255, 255, 1)',
};
this.getBackgroundColor = (color) => {
if (typeof color === 'string') {
return color;
}
return `rgba(${color.r},${color.g},${color.b},${color.a})`;
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
color: nextProps.value || this.state.color,
});
}
render() {
const { color } = this.state;
const { onChange } = this.handlers;
return (React.createElement(Popover, { trigger: "click", placement: "bottom", content: React.createElement(SketchPicker, { color: color, onChange: onChange }) },
React.createElement(Button, { style: { background: this.getBackgroundColor(color) }, shape: "circle" })));
}
}
ColorPicker.propTypes = {
valueType: PropTypes.oneOf(['string', 'object']),
onChange: PropTypes.func,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
};
ColorPicker.defaultProps = {
valueType: 'string',
};
export default ColorPicker;