1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _react = require('react');
|
8 |
|
9 | var _react2 = _interopRequireDefault(_react);
|
10 |
|
11 | var _reactDom = require('react-dom');
|
12 |
|
13 | var _reactDom2 = _interopRequireDefault(_reactDom);
|
14 |
|
15 | var _propTypes = require('prop-types');
|
16 |
|
17 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
18 |
|
19 | var _addEventListener = require('rc-util/lib/Dom/addEventListener');
|
20 |
|
21 | var _addEventListener2 = _interopRequireDefault(_addEventListener);
|
22 |
|
23 | var _color = require('./helpers/color');
|
24 |
|
25 | var _color2 = _interopRequireDefault(_color);
|
26 |
|
27 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
28 |
|
29 | function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
30 |
|
31 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
32 |
|
33 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
34 |
|
35 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
36 |
|
37 | var WIDTH = 200;
|
38 | var HEIGHT = 150;
|
39 |
|
40 | var Board = function (_React$Component) {
|
41 | _inherits(Board, _React$Component);
|
42 |
|
43 | function Board(props) {
|
44 | _classCallCheck(this, Board);
|
45 |
|
46 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
47 |
|
48 | _this.onBoardMouseDown = function (e) {
|
49 | var x = e.clientX;
|
50 | var y = e.clientY;
|
51 | _this.pointMoveTo({
|
52 | x: x,
|
53 | y: y
|
54 | });
|
55 | _this.dragListener = (0, _addEventListener2["default"])(window, 'mousemove', _this.onBoardDrag);
|
56 | _this.dragUpListener = (0, _addEventListener2["default"])(window, 'mouseup', _this.onBoardDragEnd);
|
57 | };
|
58 |
|
59 | _this.onBoardTouchStart = function (e) {
|
60 | if (e.touches.length !== 1) {
|
61 | return;
|
62 | }
|
63 |
|
64 | var x = e.targetTouches[0].clientX;
|
65 | var y = e.targetTouches[0].clientY;
|
66 | _this.pointMoveTo({
|
67 | x: x,
|
68 | y: y
|
69 | });
|
70 | _this.touchMoveListener = (0, _addEventListener2["default"])(window, 'touchmove', _this.onBoardTouchMove);
|
71 | _this.touchEndListener = (0, _addEventListener2["default"])(window, 'touchend', _this.onBoardTouchEnd);
|
72 | };
|
73 |
|
74 | _this.onBoardTouchMove = function (e) {
|
75 | if (e.preventDefault) {
|
76 | e.preventDefault();
|
77 | }
|
78 |
|
79 | var x = e.targetTouches[0].clientX;
|
80 | var y = e.targetTouches[0].clientY;
|
81 | _this.pointMoveTo({
|
82 | x: x,
|
83 | y: y
|
84 | });
|
85 | };
|
86 |
|
87 | _this.onBoardTouchEnd = function () {
|
88 | _this.removeTouchListeners();
|
89 | };
|
90 |
|
91 | _this.onBoardDrag = function (e) {
|
92 | var x = e.clientX;
|
93 | var y = e.clientY;
|
94 | _this.pointMoveTo({
|
95 | x: x,
|
96 | y: y
|
97 | });
|
98 | };
|
99 |
|
100 | _this.onBoardDragEnd = function (e) {
|
101 | var x = e.clientX;
|
102 | var y = e.clientY;
|
103 | _this.pointMoveTo({
|
104 | x: x,
|
105 | y: y
|
106 | });
|
107 | _this.removeListeners();
|
108 | };
|
109 |
|
110 | _this.getPrefixCls = function () {
|
111 | return _this.props.rootPrefixCls + '-board';
|
112 | };
|
113 |
|
114 | _this.removeTouchListeners = function () {
|
115 | if (_this.touchMoveListener) {
|
116 | _this.touchMoveListener.remove();
|
117 | _this.touchMoveListener = null;
|
118 | }
|
119 | if (_this.touchEndListener) {
|
120 | _this.touchEndListener.remove();
|
121 | _this.touchEndListener = null;
|
122 | }
|
123 | };
|
124 |
|
125 | _this.removeListeners = function () {
|
126 | if (_this.dragListener) {
|
127 | _this.dragListener.remove();
|
128 | _this.dragListener = null;
|
129 | }
|
130 | if (_this.dragUpListener) {
|
131 | _this.dragUpListener.remove();
|
132 | _this.dragUpListener = null;
|
133 | }
|
134 | };
|
135 |
|
136 | _this.pointMoveTo = function (pos) {
|
137 | var rect = _reactDom2["default"].findDOMNode(_this).getBoundingClientRect();
|
138 | var left = pos.x - rect.left;
|
139 | var top = pos.y - rect.top;
|
140 |
|
141 | var rWidth = rect.width || WIDTH;
|
142 | var rHeight = rect.height || HEIGHT;
|
143 |
|
144 | left = Math.max(0, left);
|
145 | left = Math.min(left, rWidth);
|
146 | top = Math.max(0, top);
|
147 | top = Math.min(top, rHeight);
|
148 |
|
149 | var color = _this.props.color;
|
150 |
|
151 |
|
152 | color.saturation = left / rWidth;
|
153 | color.brightness = 1 - top / rHeight;
|
154 |
|
155 | _this.props.onChange(color);
|
156 | };
|
157 |
|
158 | return _this;
|
159 | }
|
160 |
|
161 | Board.prototype.componentWillUnmount = function componentWillUnmount() {
|
162 | this.removeListeners();
|
163 | this.removeTouchListeners();
|
164 | };
|
165 |
|
166 | |
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 | Board.prototype.render = function render() {
|
173 | var prefixCls = this.getPrefixCls();
|
174 | var color = this.props.color;
|
175 |
|
176 | var hueHsv = {
|
177 | h: color.hue,
|
178 | s: 1,
|
179 | v: 1
|
180 | };
|
181 |
|
182 | var hueColor = new _color2["default"](hueHsv).toHexString();
|
183 |
|
184 | var xRel = color.saturation * 100;
|
185 | var yRel = (1 - color.brightness) * 100;
|
186 |
|
187 | return _react2["default"].createElement(
|
188 | 'div',
|
189 | { className: prefixCls },
|
190 | _react2["default"].createElement(
|
191 | 'div',
|
192 | { className: prefixCls + '-hsv', style: { backgroundColor: hueColor } },
|
193 | _react2["default"].createElement('div', { className: prefixCls + '-value' }),
|
194 | _react2["default"].createElement('div', { className: prefixCls + '-saturation' })
|
195 | ),
|
196 | _react2["default"].createElement('span', { style: { left: xRel + '%', top: yRel + '%' } }),
|
197 | _react2["default"].createElement('div', {
|
198 | className: prefixCls + '-handler',
|
199 | onMouseDown: this.onBoardMouseDown,
|
200 | onTouchStart: this.onBoardTouchStart
|
201 | })
|
202 | );
|
203 | };
|
204 |
|
205 | return Board;
|
206 | }(_react2["default"].Component);
|
207 |
|
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 |
|
215 | exports["default"] = Board;
|
216 | Board.propTypes = {
|
217 | color: _propTypes2["default"].object,
|
218 | onChange: _propTypes2["default"].func,
|
219 | rootPrefixCls: _propTypes2["default"].string
|
220 | };
|
221 | module.exports = exports['default']; |
\ | No newline at end of file |