@dnb/eufemia/extensions/forms/Field/Toggle/Toggle.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React, { useCallback, useMemo, useRef } from 'react';
import classnames from 'classnames';
import { Checkbox, Switch, ToggleButton, Radio } from "../../../../components/index.js";
import ButtonRow from "../../Form/ButtonRow/index.js";
import FieldBlock from "../../FieldBlock/index.js";
import { useFieldProps } from "../../hooks/index.js";
import { pickSpacingProps } from "../../../../components/flex/utils.js";
import ToggleButtonGroupContext from "../../../../components/toggle-button/ToggleButtonGroupContext.js";
import useTranslation from "../../hooks/useTranslation.js";
import { useIterateItemNo } from "../../Iterate/ItemNo/useIterateItemNo.js";
import HelpButtonInline from "../../../../components/help-button/HelpButtonInline.js";
function Toggle(props) {
  const translations = useTranslation().ToggleField;
  const preparedProps = {
    ...props,
    errorMessages: props.errorMessages
  };
  const {
    help
  } = props;
  const {
    id,
    className,
    valueOn,
    valueOff,
    variant,
    disabled,
    textOn,
    textOff,
    value,
    size,
    hasError,
    htmlAttributes,
    handleChange,
    setDisplayValue
  } = useFieldProps(preparedProps);
  const helpButton = help && (variant === 'checkbox' || variant === 'switch') ? React.createElement(HelpButtonInline, {
    contentId: `${id}-help`,
    help: help
  }) : undefined;
  const hideHelpButton = Boolean(helpButton);
  const preventChangeRef = useRef(false);
  const onClick = preparedProps === null || preparedProps === void 0 ? void 0 : preparedProps.onClick;
  const handleClick = useCallback(args => {
    const preventDefault = () => {
      var _args$preventDefault;
      preventChangeRef.current = true;
      (_args$preventDefault = args.preventDefault) === null || _args$preventDefault === void 0 || _args$preventDefault.call(args);
    };
    if (preventChangeRef.current) {
      args.checked = !args.checked;
      preventChangeRef.current = false;
    }
    const event = {
      ...args,
      preventDefault
    };
    onClick === null || onClick === void 0 || onClick(args.checked ? valueOn : valueOff, event);
  }, [onClick, valueOff, valueOn]);
  const handleCheckboxChange = useCallback(args => {
    handleChange === null || handleChange === void 0 || handleChange(args.checked ? valueOn : valueOff, args);
  }, [handleChange, valueOn, valueOff]);
  const handleToggleChange = useCallback(({
    value
  }) => {
    handleChange === null || handleChange === void 0 || handleChange(value === 'on' ? valueOn : valueOff);
  }, [handleChange, valueOn, valueOff]);
  const handleSwitchChange = useCallback(args => {
    handleChange === null || handleChange === void 0 || handleChange(args.checked ? valueOn : valueOff, args);
  }, [handleChange, valueOn, valueOff]);
  const cn = classnames('dnb-forms-field-toggle', className);
  const fieldBlockProps = {
    forId: id,
    className: cn,
    disabled,
    hideHelpButton,
    ...pickSpacingProps(props)
  };
  const isOn = value === valueOn;
  const isOff = value === valueOff;
  useMemo(() => {
    const text = isOn ? textOn : textOff;
    if (text) {
      setDisplayValue(text);
    }
  }, [isOn, setDisplayValue, textOff, textOn]);
  const {
    label,
    labelSuffix,
    required,
    labelSrOnly
  } = props;
  const labelWithItemNo = useIterateItemNo({
    label,
    labelSuffix,
    required
  });
  switch (variant) {
    default:
    case 'checkbox':
      return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
        label: undefined
      }), React.createElement(Checkbox, _extends({
        id: id,
        className: cn,
        label: labelWithItemNo !== null && labelWithItemNo !== void 0 ? labelWithItemNo : isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
        labelSrOnly: labelSrOnly,
        checked: isOn,
        disabled: disabled,
        size: size !== 'small' ? size : undefined,
        status: hasError ? 'error' : undefined,
        onChange: handleCheckboxChange,
        onClick: handleClick,
        suffix: helpButton
      }, htmlAttributes)));
    case 'switch':
      return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
        label: undefined
      }), React.createElement(Switch, _extends({
        id: id,
        className: cn,
        label: labelWithItemNo !== null && labelWithItemNo !== void 0 ? labelWithItemNo : isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
        labelSrOnly: labelSrOnly,
        checked: isOn,
        disabled: disabled,
        size: size !== 'small' ? size : undefined,
        status: hasError ? 'error' : undefined,
        onChange: handleSwitchChange,
        onClick: handleClick,
        suffix: helpButton
      }, htmlAttributes)));
    case 'button':
      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButton, _extends({
        id: id,
        text: isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
        checked: isOn,
        disabled: disabled,
        status: hasError ? 'error' : undefined,
        value: value ? 'true' : 'false',
        size: size,
        on_change: handleCheckboxChange,
        role: "checkbox"
      }, htmlAttributes)));
    case 'buttons':
      return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
        asFieldset: Boolean(label),
        fieldsetRole: "radiogroup"
      }), React.createElement(ButtonRow, {
        bottom: "x-small"
      }, React.createElement(ToggleButton.Group, null, React.createElement(ToggleButtonGroupContext.Provider, {
        value: {
          value: isOn ? 'on' : isOff ? 'off' : null,
          onChange: handleToggleChange,
          status: hasError ? 'error' : undefined,
          disabled,
          size
        }
      }, React.createElement(ToggleButton, _extends({
        text: textOn !== null && textOn !== void 0 ? textOn : translations.yes,
        value: "on",
        role: "radio"
      }, htmlAttributes)), React.createElement(ToggleButton, _extends({
        text: textOff !== null && textOff !== void 0 ? textOff : translations.no,
        value: "off",
        role: "radio"
      }, htmlAttributes))))));
    case 'radio':
      return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
        asFieldset: Boolean(label),
        fieldsetRole: "radiogroup"
      }), React.createElement(Radio.Group, {
        value: isOn ? 'on' : isOff ? 'off' : null,
        on_change: handleToggleChange,
        status: hasError ? 'error' : undefined,
        disabled: disabled,
        size: size !== 'small' ? size : 'default'
      }, React.createElement(Radio, _extends({
        label: textOn !== null && textOn !== void 0 ? textOn : translations.yes,
        value: "on",
        status: hasError ? 'error' : undefined
      }, htmlAttributes)), React.createElement(Radio, _extends({
        label: textOff !== null && textOff !== void 0 ? textOff : translations.no,
        value: "off",
        status: hasError ? 'error' : undefined
      }, htmlAttributes))));
    case 'checkbox-button':
      return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButton, _extends({
        id: id,
        variant: "checkbox",
        text: isOn ? textOn !== null && textOn !== void 0 ? textOn : translations.yes : textOff !== null && textOff !== void 0 ? textOff : translations.no,
        checked: isOn,
        disabled: disabled,
        status: hasError ? 'error' : undefined,
        value: value ? 'true' : 'false',
        size: size,
        on_change: handleCheckboxChange,
        role: "checkbox"
      }, htmlAttributes)));
  }
}
Toggle._supportsSpacingProps = true;
export default Toggle;
//# sourceMappingURL=Toggle.js.map