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 _propTypes = require('prop-types');
|
14 |
|
15 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
16 |
|
17 | var _addEventListener = require('rc-util/lib/Dom/addEventListener');
|
18 |
|
19 | var _addEventListener2 = _interopRequireDefault(_addEventListener);
|
20 |
|
21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
22 |
|
23 | 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; }
|
24 |
|
25 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
26 |
|
27 | 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; }
|
28 |
|
29 | 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); }
|
30 |
|
31 | function rgbaColor(r, g, b, a) {
|
32 | return 'rgba(' + [r, g, b, a / 100].join(',') + ')';
|
33 | }
|
34 |
|
35 | var Alpha = function (_React$Component) {
|
36 | _inherits(Alpha, _React$Component);
|
37 |
|
38 | function Alpha(props) {
|
39 | _classCallCheck(this, Alpha);
|
40 |
|
41 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
42 |
|
43 | _this.onMouseDown = function (e) {
|
44 | var x = e.clientX;
|
45 | var y = e.clientY;
|
46 |
|
47 | _this.pointMoveTo({
|
48 | x: x,
|
49 | y: y
|
50 | });
|
51 |
|
52 | _this.dragListener = (0, _addEventListener2["default"])(window, 'mousemove', _this.onDrag);
|
53 | _this.dragUpListener = (0, _addEventListener2["default"])(window, 'mouseup', _this.onDragEnd);
|
54 | };
|
55 |
|
56 | _this.onDrag = function (e) {
|
57 | var x = e.clientX;
|
58 | var y = e.clientY;
|
59 | _this.pointMoveTo({
|
60 | x: x,
|
61 | y: y
|
62 | });
|
63 | };
|
64 |
|
65 | _this.onDragEnd = function (e) {
|
66 | var x = e.clientX;
|
67 | var y = e.clientY;
|
68 | _this.pointMoveTo({
|
69 | x: x,
|
70 | y: y
|
71 | });
|
72 | _this.removeListeners();
|
73 | };
|
74 |
|
75 | _this.getBackground = function () {
|
76 | var _this$props$color = _this.props.color,
|
77 | red = _this$props$color.red,
|
78 | green = _this$props$color.green,
|
79 | blue = _this$props$color.blue;
|
80 |
|
81 | var opacityGradient = 'linear-gradient(to right, ' + rgbaColor(red, green, blue, 0) + ' , ' + rgbaColor(red, green, blue, 100) + ')';
|
82 | return opacityGradient;
|
83 | };
|
84 |
|
85 | _this.getPrefixCls = function () {
|
86 | return _this.props.rootPrefixCls + '-alpha';
|
87 | };
|
88 |
|
89 | _this.pointMoveTo = function (coords) {
|
90 | var rect = (0, _reactDom.findDOMNode)(_this).getBoundingClientRect();
|
91 | var width = rect.width;
|
92 | var left = coords.x - rect.left;
|
93 |
|
94 | left = Math.max(0, left);
|
95 | left = Math.min(left, width);
|
96 |
|
97 | var alpha = Math.round(left / width * 100);
|
98 |
|
99 | _this.props.onChange(alpha);
|
100 | };
|
101 |
|
102 | _this.removeListeners = function () {
|
103 | if (_this.dragListener) {
|
104 | _this.dragListener.remove();
|
105 | _this.dragListener = null;
|
106 | }
|
107 | if (_this.dragUpListener) {
|
108 | _this.dragUpListener.remove();
|
109 | _this.dragUpListener = null;
|
110 | }
|
111 | };
|
112 |
|
113 | return _this;
|
114 | }
|
115 |
|
116 | Alpha.prototype.componentWillUnmount = function componentWillUnmount() {
|
117 | this.removeListeners();
|
118 | };
|
119 |
|
120 | Alpha.prototype.render = function render() {
|
121 | var prefixCls = this.getPrefixCls();
|
122 | return _react2["default"].createElement(
|
123 | 'div',
|
124 | { className: prefixCls },
|
125 | _react2["default"].createElement('div', { ref: 'bg', className: prefixCls + '-bg', style: { background: this.getBackground() } }),
|
126 | _react2["default"].createElement('span', { style: { left: this.props.alpha + '%' } }),
|
127 | _react2["default"].createElement('div', { className: prefixCls + '-handler', onMouseDown: this.onMouseDown })
|
128 | );
|
129 | };
|
130 |
|
131 | return Alpha;
|
132 | }(_react2["default"].Component);
|
133 |
|
134 | exports["default"] = Alpha;
|
135 |
|
136 |
|
137 | Alpha.propTypes = {
|
138 | color: _propTypes2["default"].object,
|
139 | onChange: _propTypes2["default"].func,
|
140 | rootPrefixCls: _propTypes2["default"].string,
|
141 | alpha: _propTypes2["default"].number
|
142 | };
|
143 | module.exports = exports['default']; |
\ | No newline at end of file |