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