zent
Version:
一套前端设计语言和基于React的实现
83 lines (82 loc) • 3.9 kB
JavaScript
import { __assign, __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import reactCSS from '../helpers/reactcss';
import * as hue from '../helpers/hue';
import { addEventListener } from '../../utils/component/event-handler';
import { runOnceInNextFrame } from '../../utils/nextFrame';
var Hue = (function (_super) {
__extends(Hue, _super);
function Hue() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.containerRef = createRef();
_this.eventCancelList = [];
_this.handleChange = runOnceInNextFrame(function (e, skip) {
var change = hue.calculateChange(e, skip, _this.props, _this.containerRef.current);
change && _this.props.onChange(change, 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;
}
Hue.prototype.componentWillUnmount = function () {
this.unbindEventListeners();
};
Hue.prototype.unbindEventListeners = function () {
this.eventCancelList.forEach(function (cancel) { return cancel(); });
this.eventCancelList = [];
};
Hue.prototype.render = function () {
var styles = reactCSS({
default: {
hue: {
absolute: '0px 0px 0px 0px',
background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%,\n #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
borderRadius: this.props.radius,
boxShadow: this.props.shadow,
},
container: {
margin: '0 2px',
position: 'relative',
height: '100%',
},
pointer: {
position: 'absolute',
left: (this.props.hsl.h * 100) / 360 + "%",
},
slider: {
marginTop: '1px',
width: '4px',
borderRadius: '1px',
height: '8px',
boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
background: '#fff',
transform: 'translateX(-2px)',
},
},
vertical: {
hue: {
background: "linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,\n #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
},
pointer: {
left: '0px',
top: -((this.props.hsl.h * 100) / 360) + 100 + "%",
},
},
}, { vertical: this.props.direction === 'vertical' });
return (_jsx("div", __assign({ style: styles.hue, className: "hue-area", "data-zv": '10.0.17' }, { children: _jsx("div", __assign({ className: "hue-bar", style: styles.container, ref: this.containerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleTouch, onTouchStart: this.handleTouch, "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 Hue;
}(Component));
export default Hue;