1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
|
8 |
|
9 | var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
|
10 |
|
11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
12 |
|
13 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
14 |
|
15 | 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) : subClass.__proto__ = superClass; }
|
16 |
|
17 | var _react = require('react');
|
18 |
|
19 | var _react2 = _interopRequireDefault(_react);
|
20 |
|
21 | var _reactDom = require('react-dom');
|
22 |
|
23 | var _reactDom2 = _interopRequireDefault(_reactDom);
|
24 |
|
25 | var _colr = require('colr');
|
26 |
|
27 | var _colr2 = _interopRequireDefault(_colr);
|
28 |
|
29 | var _rcUtil = require('rc-util');
|
30 |
|
31 | var _rcUtil2 = _interopRequireDefault(_rcUtil);
|
32 |
|
33 | var colr = new _colr2['default']();
|
34 |
|
35 | function rgbaColor(r, g, b, a) {
|
36 | return 'rgba(' + [r, g, b, a / 100].join(',') + ')';
|
37 | }
|
38 |
|
39 | var Alpha = (function (_React$Component) {
|
40 | _inherits(Alpha, _React$Component);
|
41 |
|
42 | function Alpha(props) {
|
43 | var _this = this;
|
44 |
|
45 | _classCallCheck(this, Alpha);
|
46 |
|
47 | _get(Object.getPrototypeOf(Alpha.prototype), 'constructor', this).call(this, props);
|
48 | var events = ['onMouseDown', 'onDrag', 'onDragEnd', 'pointMoveTo', 'getBackground'];
|
49 | events.forEach(function (e) {
|
50 | _this[e] = _this[e].bind(_this);
|
51 | });
|
52 | }
|
53 |
|
54 | _createClass(Alpha, [{
|
55 | key: 'componentWillUnmount',
|
56 | value: function componentWillUnmount() {
|
57 | this.removeListeners();
|
58 | }
|
59 | }, {
|
60 | key: 'onMouseDown',
|
61 | value: function onMouseDown(e) {
|
62 | var x = e.clientX;
|
63 | var y = e.clientY;
|
64 |
|
65 | this.pointMoveTo({
|
66 | x: x, y: y
|
67 | });
|
68 |
|
69 | this.dragListener = _rcUtil2['default'].Dom.addEventListener(window, 'mousemove', this.onDrag);
|
70 | this.dragUpListener = _rcUtil2['default'].Dom.addEventListener(window, 'mouseup', this.onDragEnd);
|
71 | }
|
72 | }, {
|
73 | key: 'onDrag',
|
74 | value: function onDrag(e) {
|
75 | var x = e.clientX;
|
76 | var y = e.clientY;
|
77 | this.pointMoveTo({
|
78 | x: x, y: y
|
79 | });
|
80 | }
|
81 | }, {
|
82 | key: 'onDragEnd',
|
83 | value: function onDragEnd(e) {
|
84 | var x = e.clientX;
|
85 | var y = e.clientY;
|
86 | this.pointMoveTo({
|
87 | x: x, y: y
|
88 | });
|
89 | this.removeListeners();
|
90 | }
|
91 | }, {
|
92 | key: 'getBackground',
|
93 | value: function getBackground() {
|
94 | var _colr$fromHsvObject$toRgbObject = colr.fromHsvObject(this.props.hsv).toRgbObject();
|
95 |
|
96 | var r = _colr$fromHsvObject$toRgbObject.r;
|
97 | var g = _colr$fromHsvObject$toRgbObject.g;
|
98 | var b = _colr$fromHsvObject$toRgbObject.b;
|
99 |
|
100 | var opacityGradient = 'linear-gradient(to right, ' + rgbaColor(r, g, b, 0) + ', ' + rgbaColor(r, g, b, 100) + ')';
|
101 | return opacityGradient;
|
102 | }
|
103 | }, {
|
104 | key: 'getPrefixCls',
|
105 | value: function getPrefixCls() {
|
106 | return this.props.rootPrefixCls + '-alpha';
|
107 | }
|
108 | }, {
|
109 | key: 'pointMoveTo',
|
110 | value: function pointMoveTo(coords) {
|
111 | var rect = _reactDom2['default'].findDOMNode(this).getBoundingClientRect();
|
112 | var width = rect.width;
|
113 | var left = coords.x - rect.left;
|
114 |
|
115 | left = Math.max(0, left);
|
116 | left = Math.min(left, width);
|
117 |
|
118 | var alpha = Math.floor(left / width * 100);
|
119 |
|
120 | this.props.onChange(alpha);
|
121 | }
|
122 | }, {
|
123 | key: 'removeListeners',
|
124 | value: function removeListeners() {
|
125 | if (this.dragListener) {
|
126 | this.dragListener.remove();
|
127 | this.dragListener = null;
|
128 | }
|
129 | if (this.dragUpListener) {
|
130 | this.dragUpListener.remove();
|
131 | this.dragUpListener = null;
|
132 | }
|
133 | }
|
134 | }, {
|
135 | key: 'render',
|
136 | value: function render() {
|
137 | var prefixCls = this.getPrefixCls();
|
138 | return _react2['default'].createElement(
|
139 | 'div',
|
140 | { className: prefixCls },
|
141 | _react2['default'].createElement('div', {
|
142 | ref: 'bg',
|
143 | className: prefixCls + '-' + 'bg',
|
144 | style: { background: this.getBackground() }
|
145 | }),
|
146 | _react2['default'].createElement('span', { style: { left: this.props.alpha + '%' } }),
|
147 | _react2['default'].createElement('div', {
|
148 | className: prefixCls + '-' + 'handler',
|
149 | onMouseDown: this.onMouseDown
|
150 | })
|
151 | );
|
152 | }
|
153 | }]);
|
154 |
|
155 | return Alpha;
|
156 | })(_react2['default'].Component);
|
157 |
|
158 | exports['default'] = Alpha;
|
159 |
|
160 | Alpha.propTypes = {
|
161 | hsv: _react2['default'].PropTypes.object,
|
162 | onChange: _react2['default'].PropTypes.func,
|
163 | rootPrefixCls: _react2['default'].PropTypes.string,
|
164 | alpha: _react2['default'].PropTypes.number
|
165 | };
|
166 | module.exports = exports['default']; |
\ | No newline at end of file |