antd
Version:
An enterprise-class UI design language and React-based implementation
147 lines (109 loc) • 5.34 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = undefined;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _rcAnimate = require('rc-animate');
var _rcAnimate2 = _interopRequireDefault(_rcAnimate);
var _icon = require('../icon');
var _icon2 = _interopRequireDefault(_icon);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _splitObject3 = require('../_util/splitObject');
var _splitObject4 = _interopRequireDefault(_splitObject3);
var _omit = require('omit.js');
var _omit2 = _interopRequireDefault(_omit);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var Tag = function (_React$Component) {
(0, _inherits3["default"])(Tag, _React$Component);
function Tag(props) {
(0, _classCallCheck3["default"])(this, Tag);
var _this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.call(this, props));
_this.close = function (e) {
var onClose = _this.props.onClose;
if (onClose) {
onClose(e);
}
if (e.defaultPrevented) {
return;
}
var dom = _reactDom2["default"].findDOMNode(_this);
dom.style.width = dom.getBoundingClientRect().width + 'px';
// It's Magic Code, don't know why
dom.style.width = dom.getBoundingClientRect().width + 'px';
_this.setState({
closing: true
});
};
_this.animationEnd = function (_, existed) {
if (!existed && !_this.state.closed) {
_this.setState({
closed: true,
closing: false
});
var afterClose = _this.props.afterClose;
if (afterClose) {
afterClose();
}
}
};
_this.state = {
closing: false,
closed: false
};
return _this;
}
Tag.prototype.render = function render() {
var _classNames;
var _splitObject = (0, _splitObject4["default"])(this.props, ['prefixCls', 'closable', 'color', 'className', 'children']),
_splitObject2 = (0, _slicedToArray3["default"])(_splitObject, 2),
_splitObject2$ = _splitObject2[0],
prefixCls = _splitObject2$.prefixCls,
closable = _splitObject2$.closable,
color = _splitObject2$.color,
className = _splitObject2$.className,
children = _splitObject2$.children,
otherProps = _splitObject2[1];
var closeIcon = closable ? _react2["default"].createElement(_icon2["default"], { type: 'cross', onClick: this.close }) : '';
var classString = (0, _classnames2["default"])((_classNames = {}, (0, _defineProperty3["default"])(_classNames, prefixCls, true), (0, _defineProperty3["default"])(_classNames, prefixCls + '-' + color, !!color), (0, _defineProperty3["default"])(_classNames, prefixCls + '-has-color', !!color), (0, _defineProperty3["default"])(_classNames, prefixCls + '-close', this.state.closing), (0, _defineProperty3["default"])(_classNames, className, !!className), _classNames));
// fix https://fb.me/react-unknown-prop
var divProps = (0, _omit2["default"])(otherProps, ['onClose', 'afterClose']);
return _react2["default"].createElement(
_rcAnimate2["default"],
{ component: '', showProp: 'data-show', transitionName: prefixCls + '-zoom', transitionAppear: true, onEnd: this.animationEnd },
this.state.closed ? null : _react2["default"].createElement(
'div',
(0, _extends3["default"])({ 'data-show': !this.state.closing }, divProps, { className: classString, style: { backgroundColor: /blue|red|green|yellow/.test(color) ? null : color } }),
_react2["default"].createElement(
'span',
{ className: prefixCls + '-text' },
children
),
closeIcon
)
);
};
return Tag;
}(_react2["default"].Component);
exports["default"] = Tag;
Tag.defaultProps = {
prefixCls: 'ant-tag',
closable: false
};
module.exports = exports['default'];
;