No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.

ToggleButton.js 1.7 KiB

hace 3 años
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  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, { useState, useCallback } from 'react';
  5. import Button from './Button';
  6. var noop = function noop() {};
  7. var ToggleButton = React.forwardRef(function (_ref, ref) {
  8. var children = _ref.children,
  9. name = _ref.name,
  10. className = _ref.className,
  11. checked = _ref.checked,
  12. type = _ref.type,
  13. onChange = _ref.onChange,
  14. value = _ref.value,
  15. disabled = _ref.disabled,
  16. inputRef = _ref.inputRef,
  17. props = _objectWithoutPropertiesLoose(_ref, ["children", "name", "className", "checked", "type", "onChange", "value", "disabled", "inputRef"]);
  18. var _useState = useState(false),
  19. focused = _useState[0],
  20. setFocused = _useState[1];
  21. var handleFocus = useCallback(function (e) {
  22. if (e.target.tagName === 'INPUT') setFocused(true);
  23. }, []);
  24. var handleBlur = useCallback(function (e) {
  25. if (e.target.tagName === 'INPUT') setFocused(false);
  26. }, []);
  27. return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
  28. ref: ref,
  29. className: classNames(className, focused && 'focus', disabled && 'disabled'),
  30. type: null,
  31. active: !!checked,
  32. as: "label"
  33. }), /*#__PURE__*/React.createElement("input", {
  34. name: name,
  35. type: type,
  36. value: value,
  37. ref: inputRef,
  38. autoComplete: "off",
  39. checked: !!checked,
  40. disabled: !!disabled,
  41. onFocus: handleFocus,
  42. onBlur: handleBlur,
  43. onChange: onChange || noop
  44. }), children);
  45. });
  46. ToggleButton.displayName = 'ToggleButton';
  47. export default ToggleButton;