1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
8 |
|
9 | var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
10 |
|
11 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
12 |
|
13 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
14 |
|
15 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
16 |
|
17 | var _createClass3 = _interopRequireDefault(_createClass2);
|
18 |
|
19 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
20 |
|
21 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
22 |
|
23 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
24 |
|
25 | var _inherits3 = _interopRequireDefault(_inherits2);
|
26 |
|
27 | var _simpleAssign = require('simple-assign');
|
28 |
|
29 | var _simpleAssign2 = _interopRequireDefault(_simpleAssign);
|
30 |
|
31 | var _react = require('react');
|
32 |
|
33 | var _react2 = _interopRequireDefault(_react);
|
34 |
|
35 | var _propTypes = require('prop-types');
|
36 |
|
37 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
38 |
|
39 | var _reactDom = require('react-dom');
|
40 |
|
41 | var _reactDom2 = _interopRequireDefault(_reactDom);
|
42 |
|
43 | var _shallowEqual = require('recompose/shallowEqual');
|
44 |
|
45 | var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
|
46 |
|
47 | var _autoPrefix = require('../utils/autoPrefix');
|
48 |
|
49 | var _autoPrefix2 = _interopRequireDefault(_autoPrefix);
|
50 |
|
51 | var _transitions = require('../styles/transitions');
|
52 |
|
53 | var _transitions2 = _interopRequireDefault(_transitions);
|
54 |
|
55 | var _ScaleIn = require('./ScaleIn');
|
56 |
|
57 | var _ScaleIn2 = _interopRequireDefault(_ScaleIn);
|
58 |
|
59 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
60 |
|
61 | var pulsateDuration = 750;
|
62 |
|
63 | var FocusRipple = function (_Component) {
|
64 | (0, _inherits3.default)(FocusRipple, _Component);
|
65 |
|
66 | function FocusRipple() {
|
67 | var _ref;
|
68 |
|
69 | var _temp, _this, _ret;
|
70 |
|
71 | (0, _classCallCheck3.default)(this, FocusRipple);
|
72 |
|
73 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
74 | args[_key] = arguments[_key];
|
75 | }
|
76 |
|
77 | return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = FocusRipple.__proto__ || (0, _getPrototypeOf2.default)(FocusRipple)).call.apply(_ref, [this].concat(args))), _this), _this.pulsate = function () {
|
78 | var innerCircle = _reactDom2.default.findDOMNode(_this.refs.innerCircle);
|
79 | if (!innerCircle) return;
|
80 |
|
81 | var startScale = 'scale(1)';
|
82 | var endScale = 'scale(0.85)';
|
83 | var currentScale = innerCircle.style.transform || startScale;
|
84 | var nextScale = currentScale === startScale ? endScale : startScale;
|
85 |
|
86 | _autoPrefix2.default.set(innerCircle.style, 'transform', nextScale);
|
87 | _this.timeout = setTimeout(_this.pulsate, pulsateDuration);
|
88 | }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
89 | }
|
90 |
|
91 | (0, _createClass3.default)(FocusRipple, [{
|
92 | key: 'componentDidMount',
|
93 | value: function componentDidMount() {
|
94 | if (this.props.show) {
|
95 | this.setRippleSize();
|
96 | this.pulsate();
|
97 | }
|
98 | }
|
99 | }, {
|
100 | key: 'shouldComponentUpdate',
|
101 | value: function shouldComponentUpdate(nextProps, nextState) {
|
102 | return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.state, nextState);
|
103 | }
|
104 | }, {
|
105 | key: 'componentDidUpdate',
|
106 | value: function componentDidUpdate() {
|
107 | if (this.props.show) {
|
108 | this.setRippleSize();
|
109 | this.pulsate();
|
110 | } else {
|
111 | if (this.timeout) clearTimeout(this.timeout);
|
112 | }
|
113 | }
|
114 | }, {
|
115 | key: 'componentWillUnmount',
|
116 | value: function componentWillUnmount() {
|
117 | clearTimeout(this.timeout);
|
118 | }
|
119 | }, {
|
120 | key: 'getRippleElement',
|
121 | value: function getRippleElement(props) {
|
122 | var color = props.color,
|
123 | innerStyle = props.innerStyle,
|
124 | opacity = props.opacity;
|
125 | var _context$muiTheme = this.context.muiTheme,
|
126 | prepareStyles = _context$muiTheme.prepareStyles,
|
127 | ripple = _context$muiTheme.ripple;
|
128 |
|
129 |
|
130 | var innerStyles = (0, _simpleAssign2.default)({
|
131 | position: 'absolute',
|
132 | height: '100%',
|
133 | width: '100%',
|
134 | borderRadius: '50%',
|
135 | opacity: opacity ? opacity : 0.16,
|
136 | backgroundColor: color || ripple.color,
|
137 | transition: _transitions2.default.easeOut(pulsateDuration + 'ms', 'transform', null, _transitions2.default.easeInOutFunction)
|
138 | }, innerStyle);
|
139 |
|
140 | return _react2.default.createElement('div', { ref: 'innerCircle', style: prepareStyles((0, _simpleAssign2.default)({}, innerStyles)) });
|
141 | }
|
142 | }, {
|
143 | key: 'setRippleSize',
|
144 | value: function setRippleSize() {
|
145 | var el = _reactDom2.default.findDOMNode(this.refs.innerCircle);
|
146 | var height = el.offsetHeight;
|
147 | var width = el.offsetWidth;
|
148 | var size = Math.max(height, width);
|
149 |
|
150 | var oldTop = 0;
|
151 |
|
152 | if (el.style.top.indexOf('px', el.style.top.length - 2) !== -1) {
|
153 | oldTop = parseInt(el.style.top);
|
154 | }
|
155 | el.style.height = size + 'px';
|
156 | el.style.top = height / 2 - size / 2 + oldTop + 'px';
|
157 | }
|
158 | }, {
|
159 | key: 'render',
|
160 | value: function render() {
|
161 | var _props = this.props,
|
162 | show = _props.show,
|
163 | style = _props.style;
|
164 |
|
165 |
|
166 | var mergedRootStyles = (0, _simpleAssign2.default)({
|
167 | height: '100%',
|
168 | width: '100%',
|
169 | position: 'absolute',
|
170 | top: 0,
|
171 | left: 0
|
172 | }, style);
|
173 |
|
174 | var ripple = show ? this.getRippleElement(this.props) : null;
|
175 |
|
176 | return _react2.default.createElement(
|
177 | _ScaleIn2.default,
|
178 | {
|
179 | maxScale: 0.85,
|
180 | style: mergedRootStyles
|
181 | },
|
182 | ripple
|
183 | );
|
184 | }
|
185 | }]);
|
186 | return FocusRipple;
|
187 | }(_react.Component);
|
188 |
|
189 | FocusRipple.contextTypes = {
|
190 | muiTheme: _propTypes2.default.object.isRequired
|
191 | };
|
192 | FocusRipple.propTypes = process.env.NODE_ENV !== "production" ? {
|
193 | color: _propTypes2.default.string,
|
194 | innerStyle: _propTypes2.default.object,
|
195 | opacity: _propTypes2.default.number,
|
196 | show: _propTypes2.default.bool,
|
197 | style: _propTypes2.default.object
|
198 | } : {};
|
199 | exports.default = FocusRipple; |
\ | No newline at end of file |