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 _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
7 | import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
8 | import _inherits from "@babel/runtime/helpers/inherits";
|
9 | import React from 'react';
|
10 | import classNames from 'classnames';
|
11 | import './index.css';
|
12 |
|
13 | var Switch =
|
14 |
|
15 | function (_React$Component) {
|
16 | _inherits(Switch, _React$Component);
|
17 |
|
18 | function Switch(props) {
|
19 | var _this;
|
20 |
|
21 | _classCallCheck(this, Switch);
|
22 |
|
23 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Switch).call(this, props));
|
24 | _this.node = void 0;
|
25 |
|
26 | _this.onClick = function (e) {
|
27 | var checked = _this.state.checked;
|
28 | var onClick = _this.props.onClick;
|
29 | var newChecked = !checked;
|
30 |
|
31 | _this.setChecked(newChecked, e);
|
32 |
|
33 | onClick && onClick(newChecked, e);
|
34 | };
|
35 |
|
36 | _this.onKeyDown = function (e) {
|
37 | if (e.keyCode === 37) {
|
38 | _this.setChecked(false, e);
|
39 | } else if (e.keyCode === 39) {
|
40 | _this.setChecked(true, e);
|
41 | }
|
42 | };
|
43 |
|
44 | _this.onMouseUp = function (e) {
|
45 | var onMouseUp = _this.props.onMouseUp;
|
46 |
|
47 | _this.blur();
|
48 |
|
49 | onMouseUp && onMouseUp(e);
|
50 | };
|
51 |
|
52 | var _checked = false;
|
53 |
|
54 | if ('checked' in props) {
|
55 | _checked = !!props.checked;
|
56 | } else {
|
57 | _checked = !!props.defaultChecked;
|
58 | }
|
59 |
|
60 | _this.state = {
|
61 | checked: _checked,
|
62 | isChanged: false
|
63 | };
|
64 | _this.node = React.createRef();
|
65 | return _this;
|
66 | }
|
67 |
|
68 | _createClass(Switch, [{
|
69 | key: "componentDidMount",
|
70 | value: function componentDidMount() {
|
71 | var _this$props = this.props,
|
72 | autoFocus = _this$props.autoFocus,
|
73 | disabled = _this$props.disabled,
|
74 | loading = _this$props.loading;
|
75 |
|
76 | if (autoFocus && !disabled && !loading) {
|
77 | this.focus();
|
78 | }
|
79 | }
|
80 | }, {
|
81 | key: "setChecked",
|
82 | value: function setChecked(checked, e) {
|
83 | var isChanged = this.state.isChanged;
|
84 | var _this$props2 = this.props,
|
85 | disabled = _this$props2.disabled,
|
86 | loading = _this$props2.loading,
|
87 | onChange = _this$props2.onChange;
|
88 |
|
89 | if (disabled || loading) {
|
90 | return;
|
91 | }
|
92 |
|
93 | if (!('checked' in this.props)) {
|
94 | this.setState({
|
95 | checked: checked
|
96 | });
|
97 | }
|
98 |
|
99 | !isChanged && this.setState({
|
100 | isChanged: true
|
101 | });
|
102 | onChange && onChange(checked, e);
|
103 | }
|
104 | }, {
|
105 | key: "focus",
|
106 | value: function focus() {
|
107 | if (this.node.current) {
|
108 | this.node.current.focus();
|
109 | }
|
110 | }
|
111 | }, {
|
112 | key: "blur",
|
113 | value: function blur() {
|
114 | if (this.node.current) {
|
115 | this.node.current.blur();
|
116 | }
|
117 | }
|
118 | }, {
|
119 | key: "render",
|
120 | value: function render() {
|
121 | var _classNames;
|
122 |
|
123 | var _this$props3 = this.props,
|
124 | className = _this$props3.className,
|
125 | size = _this$props3.size,
|
126 | prefixCls = _this$props3.prefixCls,
|
127 | disabled = _this$props3.disabled,
|
128 | loading = _this$props3.loading,
|
129 | checkedChildren = _this$props3.checkedChildren,
|
130 | unCheckedChildren = _this$props3.unCheckedChildren,
|
131 | onChange = _this$props3.onChange,
|
132 | restProps = _objectWithoutProperties(_this$props3, ["className", "size", "prefixCls", "disabled", "loading", "checkedChildren", "unCheckedChildren", "onChange"]);
|
133 |
|
134 | var _this$state = this.state,
|
135 | checked = _this$state.checked,
|
136 | isChanged = _this$state.isChanged;
|
137 | var switchClassName = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, "".concat(prefixCls, "_small"), size === 'small'), _defineProperty(_classNames, "".concat(prefixCls, "_checked"), checked), _defineProperty(_classNames, "".concat(prefixCls, "_disabled"), disabled || loading), _defineProperty(_classNames, className, !!className), _classNames));
|
138 | return React.createElement("button", _extends({}, restProps, {
|
139 | type: "button",
|
140 | disabled: disabled || loading,
|
141 | className: switchClassName,
|
142 | ref: this.node,
|
143 | onKeyDown: this.onKeyDown,
|
144 | onClick: this.onClick,
|
145 | onMouseUp: this.onMouseUp
|
146 | }), React.createElement("span", {
|
147 | className: "".concat(prefixCls, "__child")
|
148 | }, checked ? checkedChildren : unCheckedChildren),
|
149 | isChanged && React.createElement("div", {
|
150 | className: "".concat(prefixCls, "__ani")
|
151 | }), React.createElement("div", {
|
152 | className: "".concat(prefixCls, "__bar")
|
153 | }, loading && React.createElement("div", {
|
154 | className: "".concat(prefixCls, "__loading")
|
155 | })));
|
156 | }
|
157 | }], [{
|
158 | key: "getDerivedStateFromProps",
|
159 | value: function getDerivedStateFromProps(nextProps) {
|
160 | var newState = {};
|
161 |
|
162 | if ('checked' in nextProps) {
|
163 | newState.checked = !!nextProps.checked;
|
164 | }
|
165 |
|
166 | return newState;
|
167 | }
|
168 | }]);
|
169 |
|
170 | return Switch;
|
171 | }(React.Component);
|
172 |
|
173 | Switch.defaultProps = {
|
174 | prefixCls: 'phoenix-switch',
|
175 | checkedChildren: null,
|
176 | unCheckedChildren: null,
|
177 | className: '',
|
178 | defaultChecked: false
|
179 | };
|
180 | export default Switch; |
\ | No newline at end of file |