1 | import _extends from "@babel/runtime/helpers/extends";
|
2 | import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3 | import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
4 | import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
5 | import _createClass from "@babel/runtime/helpers/createClass";
|
6 | import _inherits from "@babel/runtime/helpers/inherits";
|
7 | import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
8 | import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
9 |
|
10 | function _createSuper(Derived) {
|
11 | function isNativeReflectConstruct() {
|
12 | if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
13 | if (Reflect.construct.sham) return false;
|
14 | if (typeof Proxy === "function") return true;
|
15 |
|
16 | try {
|
17 | Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
|
18 | return true;
|
19 | } catch (e) {
|
20 | return false;
|
21 | }
|
22 | }
|
23 |
|
24 | return function () {
|
25 | var Super = _getPrototypeOf(Derived),
|
26 | result;
|
27 |
|
28 | if (isNativeReflectConstruct()) {
|
29 | var NewTarget = _getPrototypeOf(this).constructor;
|
30 |
|
31 | result = Reflect.construct(Super, arguments, NewTarget);
|
32 | } else {
|
33 | result = Super.apply(this, arguments);
|
34 | }
|
35 |
|
36 | return _possibleConstructorReturn(this, result);
|
37 | };
|
38 | }
|
39 |
|
40 | import React, { Children, Component } from 'react';
|
41 | import PropTypes from 'prop-types';
|
42 | import classNames from 'classnames';
|
43 | import omit from 'lodash/omit';
|
44 | import Icon from '../icon';
|
45 | import Ripple from '../ripple';
|
46 | import { Size } from '../_util/enum';
|
47 | import { getPrefixCls } from '../configure';
|
48 | import { ProgressType } from '../progress/enum';
|
49 | import Progress from '../progress';
|
50 |
|
51 | var Button =
|
52 |
|
53 | function (_Component) {
|
54 | _inherits(Button, _Component);
|
55 |
|
56 | var _super = _createSuper(Button);
|
57 |
|
58 | function Button(props) {
|
59 | var _this;
|
60 |
|
61 | _classCallCheck(this, Button);
|
62 |
|
63 | _this = _super.call(this, props);
|
64 |
|
65 | _this.handleClick = function (e) {
|
66 | clearTimeout(_this.timeout);
|
67 | _this.timeout = window.setTimeout(function () {
|
68 | return _this.setState({
|
69 | clicked: false
|
70 | });
|
71 | }, 500);
|
72 | var onClick = _this.props.onClick;
|
73 |
|
74 | if (onClick) {
|
75 | onClick(e);
|
76 | }
|
77 | };
|
78 |
|
79 | _this.state = {
|
80 | loading: props.loading,
|
81 | clicked: false
|
82 | };
|
83 | return _this;
|
84 | }
|
85 |
|
86 | _createClass(Button, [{
|
87 | key: "componentWillReceiveProps",
|
88 | value: function componentWillReceiveProps(nextProps) {
|
89 | var _this2 = this;
|
90 |
|
91 | var currentLoading = this.props.loading;
|
92 | var loading = nextProps.loading;
|
93 |
|
94 | if (currentLoading) {
|
95 | clearTimeout(this.delayTimeout);
|
96 | }
|
97 |
|
98 | if (typeof loading !== 'boolean' && loading && loading.delay) {
|
99 | this.delayTimeout = window.setTimeout(function () {
|
100 | return _this2.setState({
|
101 | loading: loading
|
102 | });
|
103 | }, loading.delay);
|
104 | } else {
|
105 | this.setState({
|
106 | loading: loading
|
107 | });
|
108 | }
|
109 | }
|
110 | }, {
|
111 | key: "componentWillUnmount",
|
112 | value: function componentWillUnmount() {
|
113 | if (this.timeout) {
|
114 | clearTimeout(this.timeout);
|
115 | }
|
116 |
|
117 | if (this.delayTimeout) {
|
118 | clearTimeout(this.delayTimeout);
|
119 | }
|
120 | }
|
121 | }, {
|
122 | key: "render",
|
123 | value: function render() {
|
124 | var _classNames;
|
125 |
|
126 | var _this$props = this.props,
|
127 | customizePrefixCls = _this$props.prefixCls,
|
128 | type = _this$props.type,
|
129 | shape = _this$props.shape,
|
130 | size = _this$props.size,
|
131 | className = _this$props.className,
|
132 | htmlType = _this$props.htmlType,
|
133 | children = _this$props.children,
|
134 | icon = _this$props.icon,
|
135 | ghost = _this$props.ghost,
|
136 | funcType = _this$props.funcType,
|
137 | onMouseEnter = _this$props.onMouseEnter,
|
138 | onMouseLeave = _this$props.onMouseLeave,
|
139 | disabled = _this$props.disabled,
|
140 | others = _objectWithoutProperties(_this$props, ["prefixCls", "type", "shape", "size", "className", "htmlType", "children", "icon", "ghost", "funcType", "onMouseEnter", "onMouseLeave", "disabled"]);
|
141 |
|
142 | var _this$state = this.state,
|
143 | loading = _this$state.loading,
|
144 | clicked = _this$state.clicked;
|
145 | var prefixCls = getPrefixCls('btn', customizePrefixCls);
|
146 |
|
147 |
|
148 | var sizeCls = '';
|
149 |
|
150 | switch (size) {
|
151 | case Size.large:
|
152 | sizeCls = 'lg';
|
153 | break;
|
154 |
|
155 | case Size.small:
|
156 | sizeCls = 'sm';
|
157 | break;
|
158 |
|
159 | default:
|
160 | }
|
161 |
|
162 | var ComponentProp = others.href ? 'a' : 'button';
|
163 | var classes = classNames(prefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(type), type), _defineProperty(_classNames, "".concat(prefixCls, "-").concat(shape), shape), _defineProperty(_classNames, "".concat(prefixCls, "-").concat(sizeCls), sizeCls), _defineProperty(_classNames, "".concat(prefixCls, "-icon-only"), !children && icon), _defineProperty(_classNames, "".concat(prefixCls, "-loading"), loading), _defineProperty(_classNames, "".concat(prefixCls, "-clicked"), clicked), _defineProperty(_classNames, "".concat(prefixCls, "-background-ghost"), ghost), _defineProperty(_classNames, "".concat(prefixCls, "-").concat(funcType), funcType), _classNames));
|
164 | var iconNode = icon ? React.createElement(Icon, {
|
165 | type: icon
|
166 | }) : null;
|
167 | iconNode = loading ? React.createElement(Progress, {
|
168 | key: "loading",
|
169 | type: ProgressType.loading,
|
170 | size: Size.small
|
171 | }) : iconNode;
|
172 | var kids = children || children === 0 ? Children.map(children, function (child) {
|
173 | if (typeof child === 'string') {
|
174 | return React.createElement("span", null, child);
|
175 | }
|
176 |
|
177 | return child;
|
178 | }) : null;
|
179 | var useWrapper = disabled && ComponentProp === 'button' && (onMouseEnter || onMouseLeave);
|
180 |
|
181 | var style = others.style,
|
182 | otherProps = _objectWithoutProperties(others, ["style"]);
|
183 |
|
184 | var button = React.createElement(Ripple, {
|
185 | disabled: disabled
|
186 | }, React.createElement(ComponentProp, _extends({
|
187 | disabled: disabled,
|
188 | onMouseEnter: onMouseEnter,
|
189 | onMouseLeave: onMouseLeave
|
190 | }, omit(otherProps, ['loading']), {
|
191 |
|
192 | type: others.href ? undefined : htmlType || 'button',
|
193 | style: useWrapper ? undefined : style,
|
194 | className: useWrapper ? undefined : classes,
|
195 | onClick: this.handleClick
|
196 | }), iconNode, kids));
|
197 | return useWrapper ? React.createElement("span", {
|
198 |
|
199 | disabled: true,
|
200 | style: style,
|
201 | className: classNames(classes, "".concat(prefixCls, "-disabled-wrapper")),
|
202 | onMouseEnter: onMouseEnter,
|
203 | onMouseLeave: onMouseLeave
|
204 | }, button) : button;
|
205 | }
|
206 | }]);
|
207 |
|
208 | return Button;
|
209 | }(Component);
|
210 |
|
211 | export { Button as default };
|
212 | Button.displayName = 'Button';
|
213 | Button.__C7N_BUTTON = true;
|
214 | Button.defaultProps = {
|
215 | loading: false,
|
216 | ghost: false,
|
217 | funcType: 'flat'
|
218 | };
|
219 | Button.propTypes = {
|
220 | type: PropTypes.string,
|
221 | shape: PropTypes.oneOf(['circle', 'circle-outline']),
|
222 | size: PropTypes.oneOf([Size.large, Size["default"], Size.small]),
|
223 | htmlType: PropTypes.oneOf(['submit', 'button', 'reset']),
|
224 | onClick: PropTypes.func,
|
225 | loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
|
226 | className: PropTypes.string,
|
227 | icon: PropTypes.string,
|
228 | ghost: PropTypes.bool,
|
229 | funcType: PropTypes.oneOf(['raised', 'flat'])
|
230 | };
|
231 |
|