Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

70 строки
2.4 KiB

  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
  3. import React from 'react';
  4. import invariant from 'invariant';
  5. import { useUncontrolled } from 'uncontrollable';
  6. import chainFunction from './createChainedFunction';
  7. import { map } from './ElementChildren';
  8. import ButtonGroup from './ButtonGroup';
  9. import ToggleButton from './ToggleButton';
  10. var defaultProps = {
  11. type: 'radio'
  12. };
  13. var ToggleButtonGroup = React.forwardRef(function (props, ref) {
  14. var _useUncontrolled = useUncontrolled(props, {
  15. value: 'onChange'
  16. }),
  17. children = _useUncontrolled.children,
  18. type = _useUncontrolled.type,
  19. name = _useUncontrolled.name,
  20. value = _useUncontrolled.value,
  21. onChange = _useUncontrolled.onChange,
  22. controlledProps = _objectWithoutPropertiesLoose(_useUncontrolled, ["children", "type", "name", "value", "onChange"]);
  23. var getValues = function getValues() {
  24. return value == null ? [] : [].concat(value);
  25. };
  26. var handleToggle = function handleToggle(inputVal, event) {
  27. var values = getValues();
  28. var isActive = values.indexOf(inputVal) !== -1;
  29. if (type === 'radio') {
  30. if (!isActive) onChange(inputVal, event);
  31. return;
  32. }
  33. if (isActive) {
  34. onChange(values.filter(function (n) {
  35. return n !== inputVal;
  36. }), event);
  37. } else {
  38. onChange([].concat(values, [inputVal]), event);
  39. }
  40. };
  41. !(type !== 'radio' || !!name) ? process.env.NODE_ENV !== "production" ? invariant(false, 'A `name` is required to group the toggle buttons when the `type` ' + 'is set to "radio"') : invariant(false) : void 0;
  42. return /*#__PURE__*/React.createElement(ButtonGroup, _extends({}, controlledProps, {
  43. ref: ref,
  44. toggle: true
  45. }), map(children, function (child) {
  46. var values = getValues();
  47. var _child$props = child.props,
  48. childVal = _child$props.value,
  49. childOnChange = _child$props.onChange;
  50. var handler = function handler(e) {
  51. return handleToggle(childVal, e);
  52. };
  53. return React.cloneElement(child, {
  54. type: type,
  55. name: child.name || name,
  56. checked: values.indexOf(childVal) !== -1,
  57. onChange: chainFunction(childOnChange, handler)
  58. });
  59. }));
  60. });
  61. ToggleButtonGroup.defaultProps = defaultProps;
  62. ToggleButtonGroup.Button = ToggleButton;
  63. export default ToggleButtonGroup;