1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _createClass from 'babel-runtime/helpers/createClass';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 | import React from 'react';
|
7 | import classNames from 'classnames';
|
8 |
|
9 | var TouchFeedback = function (_React$Component) {
|
10 | _inherits(TouchFeedback, _React$Component);
|
11 |
|
12 | function TouchFeedback() {
|
13 | _classCallCheck(this, TouchFeedback);
|
14 |
|
15 | var _this = _possibleConstructorReturn(this, (TouchFeedback.__proto__ || Object.getPrototypeOf(TouchFeedback)).apply(this, arguments));
|
16 |
|
17 | _this.state = {
|
18 | active: false
|
19 | };
|
20 | _this.onTouchStart = function (e) {
|
21 | _this.triggerEvent('TouchStart', true, e);
|
22 | };
|
23 | _this.onTouchMove = function (e) {
|
24 | _this.triggerEvent('TouchMove', false, e);
|
25 | };
|
26 | _this.onTouchEnd = function (e) {
|
27 | _this.triggerEvent('TouchEnd', false, e);
|
28 | };
|
29 | _this.onTouchCancel = function (e) {
|
30 | _this.triggerEvent('TouchCancel', false, e);
|
31 | };
|
32 | _this.onMouseDown = function (e) {
|
33 |
|
34 | _this.triggerEvent('MouseDown', true, e);
|
35 | };
|
36 | _this.onMouseUp = function (e) {
|
37 | _this.triggerEvent('MouseUp', false, e);
|
38 | };
|
39 | _this.onMouseLeave = function (e) {
|
40 | _this.triggerEvent('MouseLeave', false, e);
|
41 | };
|
42 | return _this;
|
43 | }
|
44 |
|
45 | _createClass(TouchFeedback, [{
|
46 | key: 'componentDidUpdate',
|
47 | value: function componentDidUpdate() {
|
48 | if (this.props.disabled && this.state.active) {
|
49 | this.setState({
|
50 | active: false
|
51 | });
|
52 | }
|
53 | }
|
54 | }, {
|
55 | key: 'triggerEvent',
|
56 | value: function triggerEvent(type, isActive, ev) {
|
57 | var eventType = 'on' + type;
|
58 | var children = this.props.children;
|
59 |
|
60 | if (children.props[eventType]) {
|
61 | children.props[eventType](ev);
|
62 | }
|
63 | if (isActive !== this.state.active) {
|
64 | this.setState({
|
65 | active: isActive
|
66 | });
|
67 | }
|
68 | }
|
69 | }, {
|
70 | key: 'render',
|
71 | value: function render() {
|
72 | var _props = this.props,
|
73 | children = _props.children,
|
74 | disabled = _props.disabled,
|
75 | activeClassName = _props.activeClassName,
|
76 | activeStyle = _props.activeStyle;
|
77 |
|
78 | var events = disabled ? undefined : {
|
79 | onTouchStart: this.onTouchStart,
|
80 | onTouchMove: this.onTouchMove,
|
81 | onTouchEnd: this.onTouchEnd,
|
82 | onTouchCancel: this.onTouchCancel,
|
83 | onMouseDown: this.onMouseDown,
|
84 | onMouseUp: this.onMouseUp,
|
85 | onMouseLeave: this.onMouseLeave
|
86 | };
|
87 | var child = React.Children.only(children);
|
88 | if (!disabled && this.state.active) {
|
89 | var _child$props = child.props,
|
90 | style = _child$props.style,
|
91 | className = _child$props.className;
|
92 |
|
93 | if (activeStyle !== false) {
|
94 | if (activeStyle) {
|
95 | style = _extends({}, style, activeStyle);
|
96 | }
|
97 | className = classNames(className, activeClassName);
|
98 | }
|
99 | return React.cloneElement(child, _extends({ className: className,
|
100 | style: style }, events));
|
101 | }
|
102 | return React.cloneElement(child, events);
|
103 | }
|
104 | }]);
|
105 |
|
106 | return TouchFeedback;
|
107 | }(React.Component);
|
108 |
|
109 | export default TouchFeedback;
|
110 |
|
111 | TouchFeedback.defaultProps = {
|
112 | disabled: false
|
113 | }; |
\ | No newline at end of file |