1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
6 |
|
7 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
8 |
|
9 | var _extends2 = require('babel-runtime/helpers/extends');
|
10 |
|
11 | var _extends3 = _interopRequireDefault(_extends2);
|
12 |
|
13 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
14 |
|
15 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
16 |
|
17 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
18 |
|
19 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
20 |
|
21 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
22 |
|
23 | var _inherits3 = _interopRequireDefault(_inherits2);
|
24 |
|
25 | var _class, _temp;
|
26 |
|
27 | var _react = require('react');
|
28 |
|
29 | var _react2 = _interopRequireDefault(_react);
|
30 |
|
31 | var _propTypes = require('prop-types');
|
32 |
|
33 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
34 |
|
35 | var _classnames = require('classnames');
|
36 |
|
37 | var _classnames2 = _interopRequireDefault(_classnames);
|
38 |
|
39 | var _animate = require('../animate');
|
40 |
|
41 | var _animate2 = _interopRequireDefault(_animate);
|
42 |
|
43 | var _icon = require('../icon');
|
44 |
|
45 | var _icon2 = _interopRequireDefault(_icon);
|
46 |
|
47 | var _util = require('../util');
|
48 |
|
49 | var _zhCn = require('../locale/zh-cn');
|
50 |
|
51 | var _zhCn2 = _interopRequireDefault(_zhCn);
|
52 |
|
53 | var _configProvider = require('../config-provider');
|
54 |
|
55 | var _configProvider2 = _interopRequireDefault(_configProvider);
|
56 |
|
57 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
58 |
|
59 | var noop = _util.func.noop,
|
60 | bindCtx = _util.func.bindCtx;
|
61 |
|
62 |
|
63 | var PRESET_COLOR_REG = /blue|green|orange|red|turquoise|yellow/;
|
64 |
|
65 |
|
66 |
|
67 |
|
68 | var Tag = (_temp = _class = function (_Component) {
|
69 | (0, _inherits3.default)(Tag, _Component);
|
70 |
|
71 | function Tag(props) {
|
72 | (0, _classCallCheck3.default)(this, Tag);
|
73 |
|
74 | var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
|
75 |
|
76 | _this.onKeyDown = function (e) {
|
77 |
|
78 | var _this$props = _this.props,
|
79 | closable = _this$props.closable,
|
80 | closeArea = _this$props.closeArea,
|
81 | onClick = _this$props.onClick,
|
82 | disabled = _this$props.disabled;
|
83 |
|
84 | if (e.keyCode !== _util.KEYCODE.SPACE || disabled) {
|
85 | return;
|
86 | }
|
87 |
|
88 | e.preventDefault();
|
89 | e.stopPropagation();
|
90 |
|
91 | if (closable) {
|
92 | _this.handleClose(closeArea);
|
93 | } else {
|
94 | typeof onClick === 'function' && onClick(e);
|
95 | }
|
96 | };
|
97 |
|
98 | _this.state = {
|
99 | visible: true
|
100 | };
|
101 |
|
102 | bindCtx(_this, ['handleBodyClick', 'handleTailClick', 'handleAnimationInit', 'handleAnimationEnd', 'renderTailNode']);
|
103 | return _this;
|
104 | }
|
105 |
|
106 | Tag.prototype.componentWillUnmount = function componentWillUnmount() {
|
107 | this.__destroyed = true;
|
108 | };
|
109 |
|
110 | Tag.prototype.handleClose = function handleClose(from) {
|
111 | var _this2 = this;
|
112 |
|
113 | var _props = this.props,
|
114 | animation = _props.animation,
|
115 | onClose = _props.onClose;
|
116 |
|
117 | var hasAnimation = _util.support.animation && animation;
|
118 |
|
119 |
|
120 | var result = onClose(from, this.tagNode);
|
121 |
|
122 |
|
123 | if (result !== false && !this.__destroyed) {
|
124 | this.setState({
|
125 | visible: false
|
126 | }, function () {
|
127 |
|
128 | !hasAnimation && _this2.props.afterClose(_this2.tagNode);
|
129 | });
|
130 | }
|
131 | };
|
132 |
|
133 |
|
134 |
|
135 |
|
136 | Tag.prototype.handleBodyClick = function handleBodyClick(e) {
|
137 | var _props2 = this.props,
|
138 | closable = _props2.closable,
|
139 | closeArea = _props2.closeArea,
|
140 | onClick = _props2.onClick;
|
141 |
|
142 | var node = e.currentTarget;
|
143 |
|
144 | if (node && (node === e.target || node.contains(e.target))) {
|
145 | if (closable && closeArea === 'tag') {
|
146 | this.handleClose('tag');
|
147 | }
|
148 |
|
149 | if (typeof onClick === 'function') {
|
150 | return onClick(e);
|
151 | }
|
152 | }
|
153 | };
|
154 |
|
155 | Tag.prototype.handleTailClick = function handleTailClick(e) {
|
156 | e && e.preventDefault();
|
157 | e && e.stopPropagation();
|
158 |
|
159 | this.handleClose('tail');
|
160 | };
|
161 |
|
162 | Tag.prototype.handleAnimationInit = function handleAnimationInit(node) {
|
163 | this.props.afterAppear(node);
|
164 | };
|
165 |
|
166 | Tag.prototype.handleAnimationEnd = function handleAnimationEnd(node) {
|
167 | this.props.afterClose(node);
|
168 | };
|
169 |
|
170 | Tag.prototype.renderAnimatedTag = function renderAnimatedTag(children, animationName) {
|
171 | return _react2.default.createElement(
|
172 | _animate2.default,
|
173 | {
|
174 | animation: animationName,
|
175 | afterAppear: this.handleAnimationInit,
|
176 | afterLeave: this.handleAnimationEnd
|
177 | },
|
178 | children
|
179 | );
|
180 | };
|
181 |
|
182 | Tag.prototype.renderTailNode = function renderTailNode() {
|
183 | var _props3 = this.props,
|
184 | prefix = _props3.prefix,
|
185 | closable = _props3.closable,
|
186 | locale = _props3.locale;
|
187 |
|
188 |
|
189 | if (!closable) {
|
190 | return null;
|
191 | }
|
192 |
|
193 | return _react2.default.createElement(
|
194 | 'span',
|
195 | {
|
196 | className: prefix + 'tag-close-btn',
|
197 | onClick: this.handleTailClick,
|
198 | role: 'button',
|
199 | 'aria-label': locale.delete
|
200 | },
|
201 | _react2.default.createElement(_icon2.default, { type: 'close' })
|
202 | );
|
203 | };
|
204 |
|
205 | Tag.prototype.isPresetColor = function isPresetColor() {
|
206 | var color = this.props.color;
|
207 |
|
208 |
|
209 | if (!color) {
|
210 | return false;
|
211 | }
|
212 |
|
213 | return PRESET_COLOR_REG.test(color);
|
214 | };
|
215 |
|
216 | Tag.prototype.getTagStyle = function getTagStyle() {
|
217 | var _props4 = this.props,
|
218 | _props4$color = _props4.color,
|
219 | color = _props4$color === undefined ? '' : _props4$color,
|
220 | style = _props4.style;
|
221 |
|
222 | var isPresetColor = this.isPresetColor();
|
223 | var customColorStyle = {
|
224 | backgroundColor: color,
|
225 | borderColor: color,
|
226 | color: '#fff'
|
227 | };
|
228 |
|
229 | return (0, _extends3.default)({}, color && !isPresetColor ? customColorStyle : null, style);
|
230 | };
|
231 |
|
232 | Tag.prototype.render = function render() {
|
233 | var _classNames,
|
234 | _this3 = this;
|
235 |
|
236 | var _props5 = this.props,
|
237 | prefix = _props5.prefix,
|
238 | type = _props5.type,
|
239 | size = _props5.size,
|
240 | color = _props5.color,
|
241 | _shape = _props5._shape,
|
242 | closable = _props5.closable,
|
243 | closeArea = _props5.closeArea,
|
244 | className = _props5.className,
|
245 | children = _props5.children,
|
246 | animation = _props5.animation,
|
247 | disabled = _props5.disabled,
|
248 | rtl = _props5.rtl;
|
249 | var visible = this.state.visible;
|
250 |
|
251 | var isPresetColor = this.isPresetColor();
|
252 | var others = _util.obj.pickOthers(Tag.propTypes, this.props);
|
253 |
|
254 | var style = others.style,
|
255 | otherTagProps = (0, _objectWithoutProperties3.default)(others, ['style']);
|
256 |
|
257 | var shape = closable ? 'closable' : _shape;
|
258 | var bodyClazz = (0, _classnames2.default)([prefix + 'tag', prefix + 'tag-' + shape, prefix + 'tag-' + size], (_classNames = {}, _classNames[prefix + 'tag-level-' + type] = !color, _classNames[prefix + 'tag-closable'] = closable, _classNames[prefix + 'tag-body-pointer'] = closable && closeArea === 'tag', _classNames[prefix + 'tag-' + color] = color && isPresetColor && type === 'primary', _classNames[prefix + 'tag-' + color + '-inverse'] = color && isPresetColor && type === 'normal', _classNames), className);
|
259 |
|
260 |
|
261 | var tailNode = this.renderTailNode();
|
262 |
|
263 | var tagNode = !visible ? null : _react2.default.createElement(
|
264 | 'div',
|
265 | (0, _extends3.default)({
|
266 | className: bodyClazz,
|
267 | onClick: this.handleBodyClick,
|
268 | onKeyDown: this.onKeyDown,
|
269 | tabIndex: disabled ? '' : '0',
|
270 | role: 'button',
|
271 | 'aria-disabled': disabled,
|
272 | disabled: disabled,
|
273 | dir: rtl ? 'rtl' : undefined,
|
274 | ref: function ref(n) {
|
275 | return _this3.tagNode = n;
|
276 | },
|
277 | style: this.getTagStyle()
|
278 | }, otherTagProps),
|
279 | _react2.default.createElement(
|
280 | 'span',
|
281 | { className: prefix + 'tag-body' },
|
282 | children
|
283 | ),
|
284 | tailNode
|
285 | );
|
286 |
|
287 | if (animation && _util.support.animation) {
|
288 | return this.renderAnimatedTag(tagNode, prefix + 'tag-zoom');
|
289 | }
|
290 |
|
291 |
|
292 | return tagNode;
|
293 | };
|
294 |
|
295 | return Tag;
|
296 | }(_react.Component), _class.propTypes = {
|
297 | |
298 |
|
299 |
|
300 |
|
301 | prefix: _propTypes2.default.string,
|
302 | |
303 |
|
304 |
|
305 |
|
306 | type: _propTypes2.default.oneOf(['normal', 'primary']),
|
307 | |
308 |
|
309 |
|
310 |
|
311 | size: _propTypes2.default.oneOf(['small', 'medium', 'large']),
|
312 |
|
313 | |
314 |
|
315 |
|
316 | color: _propTypes2.default.string,
|
317 | |
318 |
|
319 |
|
320 | animation: _propTypes2.default.bool,
|
321 | closeArea: _propTypes2.default.oneOf(['tag', 'tail']),
|
322 | closable: _propTypes2.default.bool,
|
323 | onClose: _propTypes2.default.func,
|
324 | afterClose: _propTypes2.default.func,
|
325 | |
326 |
|
327 |
|
328 | afterAppear: _propTypes2.default.func,
|
329 | className: _propTypes2.default.any,
|
330 | children: _propTypes2.default.node,
|
331 | |
332 |
|
333 |
|
334 | onClick: _propTypes2.default.func,
|
335 | _shape: _propTypes2.default.oneOf(['default', 'closable', 'checkable']),
|
336 | disabled: _propTypes2.default.bool,
|
337 | rtl: _propTypes2.default.bool,
|
338 | locale: _propTypes2.default.object
|
339 | }, _class.defaultProps = {
|
340 | prefix: 'next-',
|
341 | type: 'normal',
|
342 | size: 'medium',
|
343 | closeArea: 'tail',
|
344 | animation: false,
|
345 | onClose: noop,
|
346 | afterClose: noop,
|
347 | afterAppear: noop,
|
348 | onClick: noop,
|
349 | _shape: 'default',
|
350 | disabled: false,
|
351 | rtl: false,
|
352 | locale: _zhCn2.default.Tag
|
353 | }, _temp);
|
354 | Tag.displayName = 'Tag';
|
355 | exports.default = _configProvider2.default.config(Tag);
|
356 | module.exports = exports['default']; |
\ | No newline at end of file |