1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
3 | import classNames from 'classnames';
|
4 | import React, { useCallback, useState } from 'react';
|
5 | import Button from './Button';
|
6 |
|
7 | var noop = function noop() {
|
8 | return undefined;
|
9 | };
|
10 |
|
11 | var ToggleButton = React.forwardRef(function (_ref, ref) {
|
12 | var children = _ref.children,
|
13 | name = _ref.name,
|
14 | className = _ref.className,
|
15 | checked = _ref.checked,
|
16 | type = _ref.type,
|
17 | onChange = _ref.onChange,
|
18 | value = _ref.value,
|
19 | disabled = _ref.disabled,
|
20 | inputRef = _ref.inputRef,
|
21 | props = _objectWithoutPropertiesLoose(_ref, ["children", "name", "className", "checked", "type", "onChange", "value", "disabled", "inputRef"]);
|
22 |
|
23 | var _useState = useState(false),
|
24 | focused = _useState[0],
|
25 | setFocused = _useState[1];
|
26 |
|
27 | var handleFocus = useCallback(function (e) {
|
28 | if (e.target.tagName === 'INPUT') setFocused(true);
|
29 | }, []);
|
30 | var handleBlur = useCallback(function (e) {
|
31 | if (e.target.tagName === 'INPUT') setFocused(false);
|
32 | }, []);
|
33 | return React.createElement(Button, _extends({}, props, {
|
34 | ref: ref,
|
35 | className: classNames(className, focused && 'focus', disabled && 'disabled'),
|
36 | type: undefined,
|
37 | active: !!checked,
|
38 | as: "label"
|
39 | }), React.createElement("input", {
|
40 | name: name,
|
41 | type: type,
|
42 | value: value,
|
43 | ref: inputRef,
|
44 | autoComplete: "off",
|
45 | checked: !!checked,
|
46 | disabled: !!disabled,
|
47 | onFocus: handleFocus,
|
48 | onBlur: handleBlur,
|
49 | onChange: onChange || noop
|
50 | }), children);
|
51 | });
|
52 | ToggleButton.displayName = 'ToggleButton';
|
53 | export default ToggleButton; |
\ | No newline at end of file |