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

DNB Eufemia Design System UI Library

"use client";

import React, { useCallback, useMemo, useRef } from 'react';
import clsx from 'clsx';
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";
import withComponentMarkers from "../../../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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') ? _jsx(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 = clsx('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 _jsx(FieldBlock, {
        ...fieldBlockProps,
        label: undefined,
        children: _jsx(Checkbox, {
          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 _jsx(FieldBlock, {
        ...fieldBlockProps,
        label: undefined,
        children: _jsx(Switch, {
          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 _jsx(FieldBlock, {
        ...fieldBlockProps,
        children: _jsx(ToggleButton, {
          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,
          onChange: handleCheckboxChange,
          role: "checkbox",
          ...htmlAttributes
        })
      });
    case 'buttons':
      return _jsx(FieldBlock, {
        ...fieldBlockProps,
        asFieldset: Boolean(label),
        fieldsetRole: "radiogroup",
        children: _jsx(ButtonRow, {
          bottom: "x-small",
          children: _jsx(ToggleButton.Group, {
            children: _jsxs(ToggleButtonGroupContext, {
              value: {
                value: isOn ? 'on' : isOff ? 'off' : null,
                onChange: handleToggleChange,
                status: hasError ? 'error' : undefined,
                disabled,
                size
              },
              children: [_jsx(ToggleButton, {
                text: textOn !== null && textOn !== void 0 ? textOn : translations.yes,
                value: "on",
                role: "radio",
                ...htmlAttributes
              }), _jsx(ToggleButton, {
                text: textOff !== null && textOff !== void 0 ? textOff : translations.no,
                value: "off",
                role: "radio",
                ...htmlAttributes
              })]
            })
          })
        })
      });
    case 'radio':
      return _jsx(FieldBlock, {
        ...fieldBlockProps,
        asFieldset: Boolean(label),
        fieldsetRole: "radiogroup",
        children: _jsxs(Radio.Group, {
          value: isOn ? 'on' : isOff ? 'off' : null,
          onChange: handleToggleChange,
          status: hasError ? 'error' : undefined,
          disabled: disabled,
          size: size !== 'small' ? size : 'default',
          children: [_jsx(Radio, {
            label: textOn !== null && textOn !== void 0 ? textOn : translations.yes,
            value: "on",
            status: hasError ? 'error' : undefined,
            ...htmlAttributes
          }), _jsx(Radio, {
            label: textOff !== null && textOff !== void 0 ? textOff : translations.no,
            value: "off",
            status: hasError ? 'error' : undefined,
            ...htmlAttributes
          })]
        })
      });
    case 'checkbox-button':
      return _jsx(FieldBlock, {
        ...fieldBlockProps,
        children: _jsx(ToggleButton, {
          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,
          onChange: handleCheckboxChange,
          role: "checkbox",
          ...htmlAttributes
        })
      });
  }
}
withComponentMarkers(Toggle, {
  _supportsSpacingProps: true
});
export default Toggle;
//# sourceMappingURL=Toggle.js.map