import _extends from 'babel-runtime/helpers/extends'; import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties'; import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; import _inherits from 'babel-runtime/helpers/inherits'; var _class, _temp2; import React, { Component, Children, isValidElement } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import ConfigProvider from '../../config-provider'; import { obj, log } from '../../util'; function mapIconSize(size) { return { large: 'small', medium: 'xs', small: 'xs' }[size]; } /** Button */ var Button = (_temp2 = _class = function (_Component) { _inherits(Button, _Component); function Button() { var _temp, _this, _ret; _classCallCheck(this, Button); for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.onMouseUp = function (e) { _this.button.blur(); if (_this.props.onMouseUp) { _this.props.onMouseUp(e); } }, _this.buttonRefHandler = function (button) { _this.button = button; }, _temp), _possibleConstructorReturn(_this, _ret); } Button.prototype.render = function render() { var _classNames; var _props = this.props, prefix = _props.prefix, className = _props.className, type = _props.type, size = _props.size, htmlType = _props.htmlType, loading = _props.loading, text = _props.text, warning = _props.warning, ghost = _props.ghost, component = _props.component, iconSize = _props.iconSize, disabled = _props.disabled, onClick = _props.onClick, children = _props.children, rtl = _props.rtl, others = _objectWithoutProperties(_props, ['prefix', 'className', 'type', 'size', 'htmlType', 'loading', 'text', 'warning', 'ghost', 'component', 'iconSize', 'disabled', 'onClick', 'children', 'rtl']); var ghostType = ['light', 'dark'].indexOf(ghost) >= 0 ? ghost : 'dark'; var btnCls = classNames((_classNames = {}, _classNames[prefix + 'btn'] = true, _classNames['' + prefix + size] = size, _classNames[prefix + 'btn-' + type] = type && !ghost, _classNames[prefix + 'btn-text'] = text, _classNames[prefix + 'btn-warning'] = warning, _classNames[prefix + 'btn-loading'] = loading, _classNames[prefix + 'btn-ghost'] = ghost, _classNames[prefix + 'btn-' + ghostType] = ghost, _classNames[className] = className, _classNames)); var count = Children.count(children); var clonedChildren = Children.map(children, function (child, index) { if (child && typeof child.type === 'function' && child.type._typeMark === 'icon') { var _classNames2; var iconCls = classNames((_classNames2 = {}, _classNames2[prefix + 'btn-icon'] = !iconSize, _classNames2[prefix + 'icon-first'] = count > 1 && index === 0, _classNames2[prefix + 'icon-last'] = count > 1 && index === count - 1, _classNames2[prefix + 'icon-alone'] = count === 1, _classNames2[child.props.className] = !!child.props.className, _classNames2)); if ('size' in child.props) { log.warning('The size of Icon will not take effect, when Icon is the [direct child element] of Button(), use instead of.'); } return React.cloneElement(child, { className: iconCls, size: iconSize || mapIconSize(size) }); } if (!isValidElement(child)) { return React.createElement( 'span', null, child ); } return child; }); var TagName = component; var tagAttrs = _extends({}, obj.pickOthers(Object.keys(Button.propTypes), others), { type: htmlType, disabled: disabled, onClick: onClick, className: btnCls }); if (TagName !== 'button') { delete tagAttrs.type; if (tagAttrs.disabled) { delete tagAttrs.onClick; // a 标签的 onClick 浏览器默认不会禁用 tagAttrs.href && delete tagAttrs.href; // a 标签在禁用状态下无跳转 } } return React.createElement( TagName, _extends({}, tagAttrs, { dir: rtl ? 'rtl' : undefined, onMouseUp: this.onMouseUp, ref: this.buttonRefHandler }), clonedChildren ); }; return Button; }(Component), _class.propTypes = _extends({}, ConfigProvider.propTypes, { prefix: PropTypes.string, rtl: PropTypes.bool, /** * 按钮的类型 */ type: PropTypes.oneOf(['primary', 'secondary', 'normal']), /** * 按钮的尺寸 */ size: PropTypes.oneOf(['small', 'medium', 'large']), /** * 按钮中 Icon 的尺寸,用于替代 Icon 的默认大小 */ iconSize: PropTypes.oneOf(['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl']), /** * 当 component = 'button' 时,设置 button 标签的 type 值 */ htmlType: PropTypes.oneOf(['submit', 'reset', 'button']), /** * 设置标签类型 */ component: PropTypes.oneOf(['button', 'a', 'div', 'span']), /** * 设置按钮的载入状态 */ loading: PropTypes.bool, /** * 是否为幽灵按钮 */ ghost: PropTypes.oneOf([true, false, 'light', 'dark']), /** * 是否为文本按钮 */ text: PropTypes.bool, /** * 是否为警告按钮 */ warning: PropTypes.bool, /** * 是否禁用 */ disabled: PropTypes.bool, /** * 点击按钮的回调 * @param {Object} e Event Object */ onClick: PropTypes.func, className: PropTypes.string, onMouseUp: PropTypes.func, children: PropTypes.node }), _class.defaultProps = { prefix: 'next-', type: 'normal', size: 'medium', htmlType: 'button', component: 'button', loading: false, ghost: false, text: false, warning: false, disabled: false, onClick: function onClick() {} }, _temp2); Button.displayName = 'Button'; export { Button as default };