chowa
Version:
UI component library based on React
109 lines (108 loc) • 4.25 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.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const utils_1 = require("../utils");
const tool_1 = require("./tool");
const icon_1 = require("../icon");
class ColorAlpha extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
left: props.value.a * 100,
startX: 0,
originLeft: 0,
clientWidth: 0,
selectorWidth: 0
};
[
'onMouseDownHandler',
'onMouseMoveHandler',
'onMouseUpHandler',
'onRangeSelectorHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (!utils_1.isEqual(preProps.value, this.props.value)) {
this.setState({ left: this.props.value.a * 100 });
}
}
onMouseDownHandler(e) {
const { left } = this.state;
const { width: clientWidth } = utils_1.doms.rect(this.wrapperEle);
const { width: selectorWidth } = utils_1.doms.rect(this.selectorEle);
this.setState({
startX: e.pageX,
originLeft: left,
clientWidth,
selectorWidth
});
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 { clientWidth, startX, selectorWidth, originLeft } = this.state;
const percentX = Math.round((currentX - startX - selectorWidth / 2) / clientWidth * 100);
let newLeft = originLeft + percentX;
if (newLeft < 0) {
newLeft = 0;
}
else if (newLeft > 100) {
newLeft = 100;
}
this.setState({
left: newLeft
}, () => {
this.triggerChange();
});
}
onMouseUpHandler() {
utils_1.doms.off(document.body, 'mousemove', this.onMouseMoveHandler);
utils_1.doms.off(document.body, 'mouseup', this.onMouseUpHandler);
}
onRangeSelectorHandler(e) {
const { width: clientWidth, left } = utils_1.doms.offset(this.wrapperEle);
const diff = e.pageX - left;
const newLeft = Math.round(diff / clientWidth * 100);
this.setState({
left: newLeft
}, () => {
this.triggerChange();
});
}
triggerChange() {
const { onChange, value } = this.props;
const { left } = this.state;
if (onChange) {
onChange(Object.assign(Object.assign({}, value), { a: left / 100 }));
}
}
render() {
const { value } = this.props;
const { left } = this.state;
return (React.createElement("div", { className: utils_1.preClass('color-alpha-wrapper'), ref: (ele) => {
this.wrapperEle = ele;
} },
React.createElement("div", { className: utils_1.preClass('color-alpha-bg') },
React.createElement("div", { className: utils_1.preClass('color-alpha-range'), style: { background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${tool_1.toStrRgb(value)})` }, onClick: this.onRangeSelectorHandler })),
React.createElement("div", { className: utils_1.preClass('color-alpha-selector'), onMouseDown: this.onMouseDownHandler, style: { left: `${left}%` }, ref: (ele) => {
this.selectorEle = ele;
} },
React.createElement("span", { className: utils_1.preClass('color-alpha-selector-top-arrow') },
React.createElement(icon_1.default, { type: 'arrow-down-insert' })),
React.createElement("span", { className: utils_1.preClass('color-alpha-selector-down-arrow') },
React.createElement(icon_1.default, { type: 'arrow-top-insert' })))));
}
}
exports.default = ColorAlpha;