UNPKG

zent

Version:

一套前端设计语言和基于React的实现

86 lines (85 loc) 4.19 kB
import { __assign, __extends } from "tslib"; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { Component, createRef } from 'react'; import { addEventListener } from '../../utils/component/event-handler'; import { runOnceInNextFrame } from '../../utils/nextFrame'; import reactCSS from '../helpers/reactcss'; import * as saturation from '../helpers/saturation'; var Saturation = (function (_super) { __extends(Saturation, _super); function Saturation() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.containerRef = createRef(); _this.eventCancelList = []; _this.handleChange = runOnceInNextFrame(function (e, skip) { _this.props.onChange(saturation.calculateChange(e, skip, _this.props, _this.containerRef.current), e); }); _this.handleTouch = function (e) { e.persist(); _this.handleChange(e); }; _this.handleMouseDown = function (e) { e.persist(); _this.handleChange(e, true); _this.eventCancelList.push(addEventListener(window, 'mousemove', _this.handleChange)); _this.eventCancelList.push(addEventListener(window, 'mouseup', _this.handleMouseUp, { passive: true })); }; _this.handleMouseUp = function () { _this.unbindEventListeners(); }; return _this; } Saturation.prototype.componentWillUnmount = function () { this.unbindEventListeners(); this.handleChange.cancel(); }; Saturation.prototype.unbindEventListeners = function () { this.eventCancelList.forEach(function (cancel) { return cancel(); }); this.eventCancelList = []; }; Saturation.prototype.render = function () { var _a = this.props.style || {}, color = _a.color, white = _a.white, black = _a.black, pointer = _a.pointer, circle = _a.circle; var styles = reactCSS({ default: { color: { absolute: '0px 0px 0px 0px', background: "hsl(" + this.props.hsl.h + ",100%, 50%)", borderRadius: this.props.radius, }, white: { absolute: '0px 0px 0px 0px', background: 'linear-gradient(to right, #fff, rgba(255,255,255,0))', }, black: { absolute: '0px 0px 0px 0px', background: 'linear-gradient(to top, #000, rgba(0,0,0,0))', boxShadow: this.props.shadow, }, pointer: { position: 'absolute', top: -(this.props.hsv.v * 100) + 100 + "%", left: this.props.hsv.s * 100 + "%", cursor: 'default', }, circle: { width: '4px', height: '4px', boxShadow: "0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n 0 0 1px 2px rgba(0,0,0,.4)", borderRadius: '50%', cursor: 'hand', transform: 'translate(-2px, -2px)', }, }, custom: { color: color, white: white, black: black, pointer: pointer, circle: circle, }, }, { custom: !!this.props.style }); return (_jsx("div", __assign({ style: styles.color, ref: this.containerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleTouch, onTouchStart: this.handleTouch, "data-zv": '10.0.17' }, { children: _jsxs("div", __assign({ style: styles.white, "data-zv": '10.0.17' }, { children: [_jsx("div", { style: styles.black, "data-zv": '10.0.17' }, void 0), _jsx("div", __assign({ style: styles.pointer, "data-zv": '10.0.17' }, { children: this.props.pointer ? (_jsx(this.props.pointer, __assign({}, this.props), void 0)) : (_jsx("div", { style: styles.circle, "data-zv": '10.0.17' }, void 0)) }), void 0)] }), void 0) }), void 0)); }; return Saturation; }(Component)); export default Saturation;