UNPKG

zent

Version:

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

92 lines (91 loc) 4.46 kB
import { __assign, __extends } from "tslib"; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { Component, createRef } from 'react'; import reactCSS from '../helpers/reactcss'; import * as alpha from '../helpers/alpha'; import Checkboard from './Checkboard'; import { addEventListener } from '../../utils/component/event-handler'; var Alpha = (function (_super) { __extends(Alpha, _super); function Alpha() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.containerRef = createRef(); _this.eventCancelList = []; _this.handleChange = function (e, skip) { var change = alpha.calculateChange(e, skip, _this.props, _this.containerRef.current); change && _this.props.onChange(change, e); }; _this.handleMouseDown = function (e) { _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(); }; _this.unbindEventListeners = function () { _this.eventCancelList.forEach(function (cancel) { return cancel(); }); _this.eventCancelList = []; }; return _this; } Alpha.prototype.componentWillUnmount = function () { this.unbindEventListeners(); }; Alpha.prototype.render = function () { var rgb = this.props.rgb; var styles = reactCSS({ default: { alpha: { absolute: '0px 0px 0px 0px', borderRadius: this.props.radius, }, checkboard: { absolute: '0px 0px 0px 0px', overflow: 'hidden', }, gradient: { absolute: '0px 0px 0px 0px', background: "linear-gradient(to right, rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ", 0) 0%,\n rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ", 1) 100%)", boxShadow: this.props.shadow, borderRadius: this.props.radius, }, container: { position: 'relative', height: '100%', margin: '0 3px', }, pointer: { position: 'absolute', left: rgb.a * 100 + "%", }, slider: { width: '4px', borderRadius: '1px', height: '8px', boxShadow: '0 0 2px rgba(0, 0, 0, .6)', background: '#fff', marginTop: '1px', transform: 'translateX(-2px)', }, }, vertical: { gradient: { background: "linear-gradient(to bottom, rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ", 0) 0%,\n rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ", 1) 100%)", }, pointer: { left: 0, top: rgb.a * 100 + "%", }, }, overwrite: __assign({}, this.props.style), }, { vertical: this.props.direction === 'vertical', overwrite: true, }); return (_jsxs("div", __assign({ style: styles.alpha, "data-zv": '10.0.17' }, { children: [_jsx("div", __assign({ style: styles.checkboard, "data-zv": '10.0.17' }, { children: _jsx(Checkboard, { renderers: this.props.renderers }, void 0) }), void 0), _jsx("div", { style: styles.gradient, "data-zv": '10.0.17' }, void 0), _jsx("div", __assign({ className: "alpha-bar", style: styles.container, ref: this.containerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange, onTouchStart: this.handleChange, "data-zv": '10.0.17' }, { children: _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.slider, "data-zv": '10.0.17' }, void 0)) }), void 0) }), void 0)] }), void 0)); }; return Alpha; }(Component)); export { Alpha }; export default Alpha;