chowa
Version:
UI component library based on React
119 lines (118 loc) • 4.59 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
;
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const utils_1 = require("../utils");
class ColorSaturation extends React.PureComponent {
constructor(props) {
super(props);
this.state = Object.assign(Object.assign({}, this.compileValue(props.value)), { originLeft: 0, originBottom: 0, clientHeight: 0, clientWidth: 0, pointerRadius: 0, startX: 0, startY: 0 });
[
'onMouseDownHandler',
'onMouseMoveHandler',
'onMouseUpHandler',
'onRangeClickHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
compileValue(value) {
return {
bgColor: `hsl(${value.h}, 100%, 50%)`,
left: value.s,
bottom: value.b
};
}
onRangeClickHandler(e) {
const { width: clientWidth, height: clientHeight, top, left } = utils_1.doms.offset(this.wrapperEle);
const newLeft = Math.round((e.pageX - left) / clientWidth * 100);
const newBottom = Math.round((clientHeight + top - e.pageY) / clientHeight * 100);
this.setState({
left: newLeft,
bottom: newBottom
}, () => {
this.triggerChange();
});
}
onMouseDownHandler(e) {
const { width: clientWidth, height: clientHeight } = utils_1.doms.rect(this.wrapperEle);
const { width: pointerWidth } = utils_1.doms.rect(e.target);
const pointerRadius = pointerWidth / 2;
const { left, bottom } = this.state;
this.setState({
clientWidth,
clientHeight,
pointerRadius,
startX: e.pageX,
startY: e.pageY,
originLeft: left,
originBottom: bottom
});
utils_1.doms.on(document.body, 'mousemove', this.onMouseMoveHandler);
utils_1.doms.on(document.body, 'mouseup', this.onMouseUpHandler);
utils_1.stopReactPropagation(e);
}
onMouseMoveHandler(e) {
const currentX = e.pageX;
const curretnY = e.pageY;
const { clientWidth, clientHeight, pointerRadius, originLeft, originBottom, startX, startY } = this.state;
const percentX = Math.round((currentX - startX - pointerRadius) / clientWidth * 100);
const percentY = Math.round((curretnY - startY - pointerRadius) / clientHeight * 100);
let newLeft = originLeft + percentX;
let newBottom = originBottom - percentY;
if (newLeft < 0) {
newLeft = 0;
}
else if (newLeft > 100) {
newLeft = 100;
}
if (newBottom < 0) {
newBottom = 0;
}
else if (newBottom > 100) {
newBottom = 100;
}
this.setState({
left: newLeft,
bottom: newBottom
}, () => {
this.triggerChange();
});
}
triggerChange() {
const { onChange, value } = this.props;
const { left, bottom } = this.state;
if (onChange) {
onChange(Object.assign(Object.assign({}, value), { s: left, b: bottom }));
}
}
onMouseUpHandler() {
utils_1.doms.off(document.body, 'mousemove', this.onMouseMoveHandler);
utils_1.doms.off(document.body, 'mouseup', this.onMouseUpHandler);
}
componentDidUpdate(preProps) {
if (!utils_1.isEqual(preProps.value, this.props.value)) {
this.setState(Object.assign({}, this.compileValue(this.props.value)));
}
}
render() {
const { bgColor, left, bottom } = this.state;
return (React.createElement("div", { className: utils_1.preClass('color-saturation'), style: { background: bgColor }, onClick: this.onRangeClickHandler, ref: (ele) => {
this.wrapperEle = ele;
} },
React.createElement("div", { className: utils_1.preClass('color-saturation-light') }),
React.createElement("div", { className: utils_1.preClass('color-saturation-dark') }),
React.createElement("div", { className: utils_1.preClass('color-saturation-pointer'), onMouseDown: this.onMouseDownHandler, style: {
left: `${left}%`,
bottom: `${bottom}%`
} })));
}
}
exports.default = ColorSaturation;