@dnb/eufemia/es/components/toggle-button/ToggleButton.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
var _AlignmentHelper;
import React from 'react';
import classnames from 'classnames';
import { warn, isTrue, makeUniqueId, extendPropsWithContextInClassComponent, validateDOMAttributes, getStatusState, combineDescribedBy, dispatchCustomElementEvent, keycode } from "../../shared/component-helper.js";
import AlignmentHelper from "../../shared/AlignmentHelper.js";
import { pickFormElementProps } from "../../shared/helpers/filterValidProps.js";
import { createSpacingClasses } from "../space/SpacingHelper.js";
import Radio from "../radio/Radio.js";
import Checkbox from "../checkbox/Checkbox.js";
import Button from "../button/Button.js";
import FormLabel from "../form-label/FormLabel.js";
import FormStatus from "../form-status/FormStatus.js";
import ToggleButtonGroup from "./ToggleButtonGroup.js";
import ToggleButtonGroupContext from "./ToggleButtonGroupContext.js";
import Context from "../../shared/Context.js";
import Suffix from "../../shared/helpers/Suffix.js";
class ToggleButton extends React.PureComponent {
  static Group = ToggleButtonGroup;
  static contextType = ToggleButtonGroupContext;
  static defaultProps = {
    text: null,
    label: null,
    label_direction: null,
    label_sr_only: null,
    title: null,
    checked: undefined,
    variant: null,
    size: null,
    left_component: null,
    disabled: null,
    skeleton: null,
    id: null,
    status: null,
    status_state: 'error',
    status_props: null,
    status_no_animation: null,
    globalStatus: null,
    suffix: null,
    value: '',
    role: undefined,
    icon: null,
    icon_position: 'right',
    icon_size: null,
    attributes: null,
    readOnly: false,
    className: null,
    children: null,
    on_change: null,
    on_state_update: null
  };
  static parseChecked = state => /true|on/.test(String(state));
  static getDerivedStateFromProps(props, state) {
    if (state._listenForPropChanges) {
      if (props.checked !== state._checked) {
        state.checked = ToggleButton.parseChecked(props.checked);
      }
    }
    state._listenForPropChanges = true;
    if (state.checked !== state.__checked) {
      dispatchCustomElementEvent({
        props
      }, 'on_state_update', {
        checked: state.checked
      });
    }
    state._checked = props.checked;
    state.__checked = state.checked;
    return state;
  }
  constructor(props, context) {
    super(props);
    this._id = props.id || makeUniqueId();
    this._refButton = React.createRef();
    this.state = {
      _listenForPropChanges: true
    };
    if (context.name && typeof props.value !== 'undefined') {
      if (typeof context.value !== 'undefined') {
        this.state.checked = context.value === props.value;
        this.state._listenForPropChanges = false;
      } else if (context.values && Array.isArray(context.values)) {
        this.state.checked = context.values.includes(props.value);
        this.state._listenForPropChanges = false;
      } else if (ToggleButton.parseChecked(props.checked)) {
        if (context.setContext) {
          if (context.multiselect) {
            context.setContext(tmp => {
              return {
                values: tmp && Array.isArray(tmp.values) ? [...tmp.values, props.value] : [props.value]
              };
            });
          } else {
            context.setContext({
              value: props.value
            });
          }
        }
      }
    }
  }
  onKeyDownHandler = event => {
    switch (keycode(event)) {
      case 'enter':
        this.onClickHandler({
          event
        });
        break;
    }
  };
  onKeyUpHandler = event => {
    switch (keycode(event)) {
      case 'enter':
        this.onClickHandler({
          event
        });
        break;
    }
  };
  onClickHandler = ({
    event
  }) => {
    if (isTrue(this.props.readOnly)) {
      return event.preventDefault();
    }
    event.persist();
    if (!isTrue(this.context.multiselect) && this.props.value === this.context.value) {
      return;
    }
    const checked = !this.state.checked;
    this.setState({
      checked,
      _listenForPropChanges: false
    });
    this.callOnChange({
      checked,
      event
    });
    if (this._refButton.current && checked) {
      try {
        this._refButton.current._ref.current.focus();
      } catch (e) {
        warn(e);
      }
    }
  };
  callOnChange = ({
    checked,
    event
  }) => {
    const {
      value
    } = this.props;
    if (this.context.onChange) {
      this.context.onChange({
        value,
        event
      });
    }
    dispatchCustomElementEvent(this, 'on_change', {
      checked,
      value,
      event
    });
  };
  render() {
    return React.createElement(Context.Consumer, null, context => {
      const contextProps = extendPropsWithContextInClassComponent(this.props, ToggleButton.defaultProps, this.context);
      const props = extendPropsWithContextInClassComponent(this.props, ToggleButton.defaultProps, contextProps, context.translation.ToggleButton, pickFormElementProps(context.FormRow), pickFormElementProps(context.formElement), context.ToggleButton);
      const {
        status,
        status_state,
        status_props,
        status_no_animation,
        globalStatus,
        suffix,
        label,
        label_direction,
        label_sr_only,
        text,
        title,
        readOnly,
        className,
        disabled,
        skeleton,
        variant,
        left_component,
        icon,
        icon_size,
        icon_position,
        value: propValue,
        role,
        id: _id,
        checked: _checked,
        children,
        on_change,
        on_state_update,
        ...rest
      } = props;
      let {
        checked
      } = this.state;
      if (!isTrue(this.context.multiselect) && typeof this.context.value !== 'undefined') {
        const contextValue = this.context.value;
        if (typeof propValue === 'string' || typeof propValue === 'number') {
          checked = propValue === contextValue;
        }
      } else if (isTrue(this.context.multiselect) && typeof this.context.values !== 'undefined') {
        const contextValues = this.context.values;
        if (typeof propValue === 'string' || typeof propValue === 'number') {
          checked = contextValues.includes(propValue);
        }
      }
      const id = this._id;
      const showStatus = getStatusState(status);
      const mainParams = {
        className: classnames('dnb-toggle-button', createSpacingClasses(props), className, status && `dnb-toggle-button__status--${status_state}`, checked && `dnb-toggle-button--checked`, label_direction && `dnb-toggle-button--${label_direction}`)
      };
      validateDOMAttributes(this.props, rest);
      const buttonParams = {
        id,
        disabled,
        skeleton,
        text: text || children,
        title,
        icon,
        icon_size,
        icon_position,
        [`aria-${role === 'radio' || role === 'checkbox' ? 'checked' : 'pressed'}`]: String(checked || false),
        role,
        ...rest
      };
      const componentParams = {
        checked,
        disabled,
        element: 'span',
        'data-checked': String(checked || false),
        'aria-checked': undefined,
        role: undefined,
        type: undefined,
        name: null,
        title: null
      };
      if (status) {
        if (status_state === 'info') {
          componentParams.status_state = 'info';
        } else {
          componentParams.status = 'error';
        }
      }
      if (showStatus || suffix) {
        buttonParams['aria-describedby'] = combineDescribedBy(buttonParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
      }
      if (readOnly) {
        buttonParams['aria-readonly'] = buttonParams.readOnly = true;
      }
      let leftComponent = null;
      switch (variant) {
        case 'radio':
          leftComponent = React.createElement(Radio, _extends({
            id: `${id}-radio`
          }, componentParams));
          break;
        case 'checkbox':
          leftComponent = React.createElement(Checkbox, _extends({
            id: `${id}-checkbox`
          }, componentParams));
          break;
        case 'default':
        default:
          leftComponent = left_component;
          break;
      }
      return React.createElement("span", mainParams, label && React.createElement(FormLabel, {
        id: id + '-label',
        forId: id,
        text: label,
        disabled: disabled,
        skeleton: skeleton,
        labelDirection: label_direction,
        srOnly: label_sr_only
      }), React.createElement("span", {
        className: "dnb-toggle-button__inner"
      }, 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__shell"
      }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(Button, _extends({
        variant: "secondary",
        className: "dnb-toggle-button__button",
        custom_content: leftComponent && React.createElement("span", {
          className: "dnb-toggle-button__component"
        }, leftComponent)
      }, buttonParams, {
        ref: this._refButton,
        onClick: this.onClickHandler,
        onKeyDown: this.onKeyDownHandler,
        onKeyUp: this.onKeyUpHandler
      })), suffix && React.createElement(Suffix, {
        className: "dnb-toggle-button__suffix",
        id: id + '-suffix',
        context: props
      }, suffix))));
    });
  }
}
ToggleButton._formElement = true;
ToggleButton._supportsSpacingProps = true;
export default ToggleButton;
//# sourceMappingURL=ToggleButton.js.map