@talend/react-bootstrap/lib-esm/ToggleButtonGroup.js

Bootstrap 3 components built with React

import PropTypes from 'prop-types';
import React from 'react';
import invariant from 'invariant';
import { uncontrollable } from 'uncontrollable';
import chainFunction from './utils/createChainedFunction';
import ValidChildren from './utils/ValidComponentChildren';
import ButtonGroup from './ButtonGroup';
import ToggleButton from './ToggleButton';
import { jsx as _jsx } from "react/jsx-runtime";
const propTypes = {
  /**
   * An HTML `<input>` name for each child button.
   *
   * __Required if `type` is set to `'radio'`__
   */
  name: PropTypes.string,
  /**
   * The value, or array of values, of the active (pressed) buttons
   *
   * @controllable onChange
   */
  value: PropTypes.any,
  /**
   * Callback fired when a button is pressed, depending on whether the `type`
   * is `'radio'` or `'checkbox'`, `onChange` will be called with the value or
   * array of active values
   *
   * @controllable values
   */
  onChange: PropTypes.func,
  /**
   * The input `type` of the rendered buttons, determines the toggle behavior
   * of the buttons
   */
  type: PropTypes.oneOf(['checkbox', 'radio']).isRequired
};
const defaultProps = {
  type: 'radio'
};
class ToggleButtonGroup extends React.Component {
  getValues() {
    const {
      value
    } = this.props;
    return value == null ? [] : [].concat(value);
  }
  handleToggle(value) {
    const {
      type,
      onChange
    } = this.props;
    const values = this.getValues();
    const isActive = values.indexOf(value) !== -1;
    if (type === 'radio') {
      if (!isActive) {
        onChange(value);
      }
      return;
    }
    if (isActive) {
      onChange(values.filter(n => n !== value));
    } else {
      onChange([...values, value]);
    }
  }
  render() {
    const {
      children,
      type,
      name,
      ...props
    } = this.props;
    const values = this.getValues();
    invariant(type !== 'radio' || !!name, 'A `name` is required to group the toggle buttons when the `type` ' + 'is set to "radio"');
    delete props.onChange;
    delete props.value;

    // the data attribute is required b/c twbs css uses it in the selector
    return /*#__PURE__*/_jsx(ButtonGroup, {
      ...props,
      "data-toggle": "buttons",
      children: ValidChildren.map(children, child => {
        const {
          value,
          onChange
        } = child.props;
        const handler = () => this.handleToggle(value);
        return /*#__PURE__*/React.cloneElement(child, {
          type,
          name: child.name || name,
          checked: values.indexOf(value) !== -1,
          onChange: chainFunction(onChange, handler)
        });
      })
    });
  }
}
ToggleButtonGroup.propTypes = propTypes;
ToggleButtonGroup.defaultProps = defaultProps;
const UncontrolledToggleButtonGroup = uncontrollable(ToggleButtonGroup, {
  value: 'onChange'
});
UncontrolledToggleButtonGroup.Button = ToggleButton;
export default UncontrolledToggleButtonGroup;
//# sourceMappingURL=ToggleButtonGroup.js.map