@dnb/eufemia/components/toggle-button/ToggleButtonGroup.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
var _AlignmentHelper;
import _JSON$parse from "core-js-pure/stable/json/parse.js";
import _pushInstanceProperty from "core-js-pure/stable/instance/push.js";
import React from 'react';
import classnames from 'classnames';
import { isTrue, makeUniqueId, extendPropsWithContextInClassComponent, validateDOMAttributes, getStatusState, combineDescribedBy, combineLabelledBy, dispatchCustomElementEvent } from "../../shared/component-helper.js";
import { createSpacingClasses } from "../space/SpacingHelper.js";
import AlignmentHelper from "../../shared/AlignmentHelper.js";
import FormLabel from "../FormLabel.js";
import FormStatus from "../FormStatus.js";
import Flex from "../Flex.js";
import Space from "../Space.js";
import Context from "../../shared/Context.js";
import Suffix from "../../shared/helpers/Suffix.js";
import ToggleButtonGroupContext from "./ToggleButtonGroupContext.js";
import { pickFormElementProps } from "../../shared/helpers/filterValidProps.js";
class ToggleButtonGroup extends React.PureComponent {
  static getDerivedStateFromProps(props, state) {
    if (state._listenForPropChanges) {
      if (typeof props.value !== 'undefined' && props.value !== state.value) {
        state.value = props.value;
      }
      if (typeof props.values !== 'undefined' && props.values !== state.values) {
        state.values = ToggleButtonGroup.getValues(props);
      }
    }
    state._listenForPropChanges = true;
    return state;
  }
  static getValues(props) {
    if (typeof props.values === 'string' && props.values[0] === '[') {
      return _JSON$parse(props.values);
    }
    return props.values;
  }
  constructor(props) {
    super(props);
    _defineProperty(this, "onChangeHandler", ({
      value,
      event
    }) => {
      const {
        multiselect
      } = this.props;
      const values = this.state.values || [];
      if (isTrue(multiselect)) {
        if (!values.includes(value)) {
          _pushInstanceProperty(values).call(values, value);
        } else {
          values.splice(values.indexOf(value), 1);
        }
      }
      this.setState({
        value,
        values,
        _listenForPropChanges: false
      });
      dispatchCustomElementEvent(this, 'on_change', {
        value,
        values,
        event
      });
    });
    this._refInput = React.createRef();
    this._id = props.id || makeUniqueId();
    this._name = props.name || makeUniqueId();
    this.state = {
      _listenForPropChanges: true
    };
  }
  render() {
    var _this$context, _this$context2;
    const props = extendPropsWithContextInClassComponent(this.props, ToggleButtonGroup.defaultProps, this.context.getTranslation(this.props).ToggleButton, pickFormElementProps((_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.FormRow), pickFormElementProps((_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.formElement), this.context.ToggleButtonGroup);
    const {
      status,
      status_state,
      status_props,
      status_no_animation,
      globalStatus,
      suffix,
      label_direction,
      label_sr_only,
      vertical,
      layout_direction,
      label,
      variant,
      left_component,
      size,
      disabled,
      skeleton,
      className,
      multiselect,
      id: _id,
      name: _name,
      value: _value,
      values: _values,
      children,
      on_change,
      ...rest
    } = props;
    const {
      value,
      values
    } = this.state;
    const id = this._id;
    const showStatus = getStatusState(status);
    const classes = classnames(`dnb-toggle-button-group dnb-toggle-button-group--${layout_direction} dnb-form-component`, createSpacingClasses(props), className, status && `dnb-toggle-button-group__status--${status_state}`, !label && 'dnb-toggle-button-group--no-label');
    const params = {
      ...rest
    };
    if (showStatus || suffix) {
      params['aria-describedby'] = combineDescribedBy(params, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
    }
    if (label) {
      params['aria-labelledby'] = combineLabelledBy(params, id + '-label');
    }
    validateDOMAttributes(this.props, params);
    const context = {
      name: this._name,
      value,
      values,
      size,
      multiselect: isTrue(multiselect),
      variant,
      left_component,
      disabled,
      skeleton,
      setContext: context => {
        if (typeof context === 'function') {
          context = context(this._tmp);
        }
        this._tmp = {
          ...this._tmp,
          ...context
        };
        this.setState({
          ...context,
          _listenForPropChanges: false
        });
      },
      onChange: this.onChangeHandler
    };
    const Fieldset = label ? 'fieldset' : 'div';
    return React.createElement(ToggleButtonGroupContext.Provider, {
      value: context
    }, React.createElement("div", {
      className: classes
    }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(Fieldset, {
      className: "dnb-toggle-button-group__fieldset",
      "aria-labelledby": label ? id + '-label' : undefined,
      role: variant === 'radio' ? 'radiogroup' : 'group'
    }, React.createElement(Flex.Container, {
      direction: vertical || label_direction === 'vertical' ? 'vertical' : 'horizontal',
      gap: vertical ? 'x-small' : 'small'
    }, label && React.createElement(FormLabel, {
      element: "legend",
      id: id + '-label',
      srOnly: label_sr_only
    }, label), React.createElement(Space, _extends({
      element: "span",
      id: id,
      className: "dnb-toggle-button-group__shell"
    }, params), React.createElement(FormStatus, _extends({
      show: showStatus,
      id: id + '-form-status',
      globalStatus: globalStatus,
      label: label,
      text_id: id + '-status',
      text: status,
      state: status_state,
      no_animation: status_no_animation,
      skeleton: skeleton
    }, status_props)), React.createElement("span", {
      className: `dnb-toggle-button-group__shell__children dnb-toggle-button-group__shell__children--${layout_direction}`
    }, children, suffix && React.createElement(Suffix, {
      className: "dnb-toggle-button-group__suffix",
      id: id + '-suffix',
      context: props
    }, suffix)))))));
  }
}
_defineProperty(ToggleButtonGroup, "contextType", Context);
_defineProperty(ToggleButtonGroup, "defaultProps", {
  label: null,
  label_direction: null,
  label_sr_only: null,
  title: null,
  multiselect: null,
  variant: null,
  left_component: null,
  disabled: null,
  skeleton: null,
  id: null,
  name: null,
  size: null,
  status: null,
  status_state: 'error',
  status_props: null,
  status_no_animation: null,
  globalStatus: null,
  suffix: null,
  vertical: null,
  layout_direction: 'row',
  value: undefined,
  values: undefined,
  attributes: null,
  className: null,
  children: null,
  on_change: null
});
ToggleButtonGroup._supportsSpacingProps = true;
export default ToggleButtonGroup;
//# sourceMappingURL=ToggleButtonGroup.js.map