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

Bootstrap 3 components built with React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _invariant = _interopRequireDefault(require("invariant"));
var _uncontrollable = require("uncontrollable");
var _createChainedFunction = _interopRequireDefault(require("./utils/createChainedFunction"));
var _ValidComponentChildren = _interopRequireDefault(require("./utils/ValidComponentChildren"));
var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup"));
var _ToggleButton = _interopRequireDefault(require("./ToggleButton"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const propTypes = {
  /**
   * An HTML `<input>` name for each child button.
   *
   * __Required if `type` is set to `'radio'`__
   */
  name: _propTypes.default.string,
  /**
   * The value, or array of values, of the active (pressed) buttons
   *
   * @controllable onChange
   */
  value: _propTypes.default.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.default.func,
  /**
   * The input `type` of the rendered buttons, determines the toggle behavior
   * of the buttons
   */
  type: _propTypes.default.oneOf(['checkbox', 'radio']).isRequired
};
const defaultProps = {
  type: 'radio'
};
class ToggleButtonGroup extends _react.default.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();
    (0, _invariant.default)(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__*/(0, _jsxRuntime.jsx)(_ButtonGroup.default, {
      ...props,
      "data-toggle": "buttons",
      children: _ValidComponentChildren.default.map(children, child => {
        const {
          value,
          onChange
        } = child.props;
        const handler = () => this.handleToggle(value);
        return /*#__PURE__*/_react.default.cloneElement(child, {
          type,
          name: child.name || name,
          checked: values.indexOf(value) !== -1,
          onChange: (0, _createChainedFunction.default)(onChange, handler)
        });
      })
    });
  }
}
ToggleButtonGroup.propTypes = propTypes;
ToggleButtonGroup.defaultProps = defaultProps;
const UncontrolledToggleButtonGroup = (0, _uncontrollable.uncontrollable)(ToggleButtonGroup, {
  value: 'onChange'
});
UncontrolledToggleButtonGroup.Button = _ToggleButton.default;
var _default = exports.default = UncontrolledToggleButtonGroup;
//# sourceMappingURL=ToggleButtonGroup.js.map