chowa/es/color-picker/color-hue.js

UI component library based on React

/**
 * @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 icon_1 = require("../icon");
class ColorHue extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = Object.assign(Object.assign({}, this.compileValue(props.value)), { originBottom: 0, startY: 0, clientHeight: 0, selectorHeight: 0 });
        [
            'onRangeSelectorHandler',
            'onMouseDownHandler',
            'onMouseMoveHandler',
            'onMouseUpHandler'
        ].forEach((fn) => {
            this[fn] = this[fn].bind(this);
        });
    }
    componentDidUpdate(preProps) {
        if (!utils_1.isEqual(preProps.value, this.props.value)) {
            this.setState(Object.assign({}, this.compileValue(this.props.value)));
        }
    }
    compileValue(value) {
        const bottom = value.h / 360 * 100;
        return {
            bottom
        };
    }
    onRangeSelectorHandler(e) {
        const { height: clientHeight, top } = utils_1.doms.offset(this.wrapperEle);
        const diff = clientHeight + top - e.pageY;
        const newBottom = Math.round(diff / clientHeight * 100);
        this.setState({
            bottom: newBottom
        }, () => {
            this.triggerChange();
        });
    }
    triggerChange() {
        const { onChange, value } = this.props;
        const { bottom } = this.state;
        if (onChange) {
            onChange(Object.assign(Object.assign({}, value), { h: bottom / 100 * 360 }));
        }
    }
    onMouseDownHandler(e) {
        const { height: clientHeight } = utils_1.doms.rect(this.wrapperEle);
        const { height: selectorHeight } = utils_1.doms.rect(this.selectorEle);
        const { bottom } = this.state;
        this.setState({
            clientHeight,
            startY: e.pageY,
            originBottom: bottom,
            selectorHeight
        });
        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 curretnY = e.pageY;
        const { clientHeight, startY, selectorHeight, originBottom } = this.state;
        const percentY = Math.round((curretnY - startY - selectorHeight / 2) / clientHeight * 100);
        let newBottom = originBottom - percentY;
        if (newBottom < 0) {
            newBottom = 0;
        }
        else if (newBottom > 100) {
            newBottom = 100;
        }
        this.setState({
            bottom: newBottom
        }, () => {
            this.triggerChange();
        });
    }
    onMouseUpHandler() {
        utils_1.doms.off(document.body, 'mousemove', this.onMouseMoveHandler);
        utils_1.doms.off(document.body, 'mouseup', this.onMouseUpHandler);
    }
    render() {
        const { bottom } = this.state;
        return (React.createElement("div", { className: utils_1.preClass('color-hue'), ref: (ele) => {
                this.wrapperEle = ele;
            } },
            React.createElement("div", { className: utils_1.preClass('color-hue-range'), onClick: this.onRangeSelectorHandler }),
            React.createElement("div", { className: utils_1.preClass('color-hue-selector'), onMouseDown: this.onMouseDownHandler, style: { bottom: `${bottom}%` }, ref: (ele) => {
                    this.selectorEle = ele;
                } },
                React.createElement("span", { className: utils_1.preClass('color-hue-selector-left-arrow') },
                    React.createElement(icon_1.default, { type: 'arrow-right-insert' })),
                React.createElement("span", { className: utils_1.preClass('color-hue-selector-right-arrow') },
                    React.createElement(icon_1.default, { type: 'arrow-left-insert' })))));
    }
}
exports.default = ColorHue;