1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
6 |
|
7 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
8 |
|
9 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
10 |
|
11 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
12 |
|
13 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
14 |
|
15 | var _inherits3 = _interopRequireDefault(_inherits2);
|
16 |
|
17 | var _class, _temp;
|
18 |
|
19 | var _react = require('react');
|
20 |
|
21 | var _react2 = _interopRequireDefault(_react);
|
22 |
|
23 | var _propTypes = require('prop-types');
|
24 |
|
25 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
26 |
|
27 | var _reactLifecyclesCompat = require('react-lifecycles-compat');
|
28 |
|
29 | var _classnames = require('classnames');
|
30 |
|
31 | var _classnames2 = _interopRequireDefault(_classnames);
|
32 |
|
33 | var _animate = require('../animate');
|
34 |
|
35 | var _animate2 = _interopRequireDefault(_animate);
|
36 |
|
37 | var _util = require('../util');
|
38 |
|
39 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 | var getDigitArray = function getDigitArray(num) {
|
47 | return num.toString().split('').reverse().map(function (i) {
|
48 | return parseInt(i, 10);
|
49 | });
|
50 | };
|
51 |
|
52 | var Sup = (_temp = _class = function (_Component) {
|
53 | (0, _inherits3.default)(Sup, _Component);
|
54 |
|
55 |
|
56 | Sup.renderDigit = function renderDigit(prefix, digit, key) {
|
57 | var children = [];
|
58 | for (var i = 0; i < 30; i++) {
|
59 | children.push(_react2.default.createElement(
|
60 | 'span',
|
61 | { key: i },
|
62 | i % 10
|
63 | ));
|
64 | }
|
65 |
|
66 | return _react2.default.createElement(
|
67 | 'span',
|
68 | { className: prefix + 'badge-scroll-number-only', key: key },
|
69 | children
|
70 | );
|
71 | };
|
72 |
|
73 |
|
74 |
|
75 |
|
76 | Sup.renderNumber = function renderNumber(prefix, count) {
|
77 | return getDigitArray(count).map(function (digit, i) {
|
78 | return Sup.renderDigit(prefix, digit, i);
|
79 | }).reverse();
|
80 | };
|
81 |
|
82 | function Sup(props) {
|
83 | (0, _classCallCheck3.default)(this, Sup);
|
84 |
|
85 |
|
86 | var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
|
87 |
|
88 | _this.saveRef = function (ref) {
|
89 | _this.supEl = ref;
|
90 | };
|
91 |
|
92 | _this.state = {
|
93 | lastCount: 0,
|
94 | currentCount: props.count
|
95 | };
|
96 | return _this;
|
97 | }
|
98 |
|
99 | Sup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
|
100 | if ('count' in nextProps) {
|
101 | return {
|
102 | lastCount: prevState.currentCount,
|
103 | currentCount: nextProps.count
|
104 | };
|
105 | }
|
106 |
|
107 | return null;
|
108 | };
|
109 |
|
110 | Sup.prototype.componentDidMount = function componentDidMount() {
|
111 | this.computeStyle(true);
|
112 | };
|
113 |
|
114 | Sup.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
115 | var _this2 = this;
|
116 |
|
117 | if (prevProps.count !== this.props.count) {
|
118 | this.computeStyle(false);
|
119 |
|
120 |
|
121 | setTimeout(function () {
|
122 | _this2.computeStyle(true, true);
|
123 | }, 300);
|
124 | }
|
125 | };
|
126 |
|
127 | Sup.prototype.computeStyle = function computeStyle(removeTransition, revert) {
|
128 | var _this3 = this;
|
129 |
|
130 | var _props = this.props,
|
131 | prefix = _props.prefix,
|
132 | count = _props.count,
|
133 | overflowCount = _props.overflowCount;
|
134 | var lastCount = this.state.lastCount;
|
135 |
|
136 |
|
137 | if (count < 0) {
|
138 | return;
|
139 | }
|
140 | var supNode = this.supEl;
|
141 |
|
142 | if (supNode && _util.dom.hasClass(supNode, prefix + 'badge-count')) {
|
143 | var scrollNums = supNode.querySelectorAll('.' + prefix + 'badge-scroll-number-only');
|
144 |
|
145 | if (scrollNums.length) {
|
146 | var height = window.getComputedStyle(supNode).height;
|
147 |
|
148 | scrollNums = [].slice.call(scrollNums, 0).reverse();
|
149 |
|
150 | getDigitArray(count).forEach(function (digit, i) {
|
151 | var position = _this3.getPositionByDigit(digit, i, revert);
|
152 | var transformTo = -position * parseFloat(height);
|
153 |
|
154 | removeTransition = removeTransition || typeof getDigitArray(lastCount)[i] === 'undefined' || lastCount > overflowCount || lastCount <= 0;
|
155 |
|
156 | var scrollStyle = _util.support.animation ? {
|
157 | transition: removeTransition ? 'none' : 'transform .3s cubic-bezier(.645, .045, .355, 1), -webkit-transform .3s cubic-bezier(.645, .045, .355, 1)',
|
158 | WebkitTransform: 'translateY(' + transformTo + 'px)',
|
159 | transform: 'translateY(' + transformTo + 'px)',
|
160 | height: height,
|
161 | lineHeight: height
|
162 | } : {
|
163 | top: transformTo + 'px',
|
164 | height: height,
|
165 | lineHeight: height
|
166 | };
|
167 |
|
168 | Object.keys(scrollStyle).forEach(function (key) {
|
169 | scrollNums[i].style[key] = scrollStyle[key];
|
170 | });
|
171 | });
|
172 | }
|
173 | }
|
174 | };
|
175 |
|
176 | Sup.prototype.getPositionByDigit = function getPositionByDigit(digit, i, revert) {
|
177 | var lastCount = this.state.lastCount;
|
178 |
|
179 | if (revert) {
|
180 | return 10 + digit;
|
181 | }
|
182 | var lastDigit = getDigitArray(lastCount)[i] || 0;
|
183 |
|
184 | if (this.props.count > lastCount) {
|
185 | return (digit >= lastDigit ? 10 : 20) + digit;
|
186 | }
|
187 |
|
188 | if (digit <= lastDigit) {
|
189 | return 10 + digit;
|
190 | }
|
191 |
|
192 | return digit;
|
193 | };
|
194 |
|
195 | Sup.prototype.render = function render() {
|
196 | var _classNames;
|
197 |
|
198 | var _props2 = this.props,
|
199 | prefix = _props2.prefix,
|
200 | count = _props2.count,
|
201 | showZero = _props2.showZero,
|
202 | overflowCount = _props2.overflowCount,
|
203 | dot = _props2.dot,
|
204 | style = _props2.style,
|
205 | content = _props2.content;
|
206 |
|
207 |
|
208 | var supClasses = (0, _classnames2.default)(prefix + 'badge-scroll-number', (_classNames = {}, _classNames[prefix + 'badge-count'] = !!count || count === 0 && showZero, _classNames[prefix + 'badge-dot'] = dot, _classNames[prefix + 'badge-custom'] = !!content, _classNames));
|
209 |
|
210 | var children = null;
|
211 | var show = dot || count > 0 || count === 0 && showZero || content;
|
212 |
|
213 | if (count > 0 || count === 0 && showZero) {
|
214 | var realCount = overflowCount > 0 && count > overflowCount ? overflowCount + '+' : count;
|
215 |
|
216 | children = isNaN(realCount) ? realCount : Sup.renderNumber(prefix, count);
|
217 | } else if (content) {
|
218 | children = content;
|
219 | }
|
220 |
|
221 | var animation = {
|
222 | appear: 'zoomIn',
|
223 | enter: 'zoomIn',
|
224 | leave: 'zoomOut'
|
225 | };
|
226 |
|
227 | var wrapper = _util.support.animation ? _react2.default.createElement(_animate2.default, { animation: animation }) : _react2.default.createElement('span', null);
|
228 | var element = show ? _react2.default.createElement(
|
229 | 'sup',
|
230 | { ref: this.saveRef, className: supClasses, style: style },
|
231 | children
|
232 | ) : null;
|
233 |
|
234 | return _react2.default.cloneElement(wrapper, {}, element);
|
235 | };
|
236 |
|
237 | return Sup;
|
238 | }(_react.Component), _class.propTypes = {
|
239 | prefix: _propTypes2.default.string,
|
240 | count: _propTypes2.default.number,
|
241 | showZero: _propTypes2.default.bool,
|
242 | overflowCount: _propTypes2.default.number,
|
243 | content: _propTypes2.default.node,
|
244 | dot: _propTypes2.default.bool,
|
245 | style: _propTypes2.default.object
|
246 | }, _class.defaultProps = {
|
247 | prefix: 'next-',
|
248 | count: 0,
|
249 | showZero: false,
|
250 | overflowCount: 99,
|
251 | dot: false
|
252 | }, _temp);
|
253 | Sup.displayName = 'Sup';
|
254 | exports.default = (0, _reactLifecyclesCompat.polyfill)(Sup);
|
255 | module.exports = exports['default']; |
\ | No newline at end of file |