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

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _clsx = require("clsx");
var _index = require("../../../../components/index.js");
var _index2 = _interopRequireDefault(require("../../Form/ButtonRow/index.js"));
var _index3 = _interopRequireDefault(require("../../FieldBlock/index.js"));
var _index4 = require("../../hooks/index.js");
var _utils = require("../../../../components/flex/utils.js");
var _ToggleButtonGroupContext = _interopRequireDefault(require("../../../../components/toggle-button/ToggleButtonGroupContext.js"));
var _useTranslation = _interopRequireDefault(require("../../hooks/useTranslation.js"));
var _useIterateItemNo = require("../../Iterate/ItemNo/useIterateItemNo.js");
var _HelpButtonInline = _interopRequireDefault(require("../../../../components/help-button/HelpButtonInline.js"));
var _withComponentMarkers = _interopRequireDefault(require("../../../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function Toggle(props) {
  const translations = (0, _useTranslation.default)().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
  } = (0, _index4.useFieldProps)(preparedProps);
  const helpButton = help && (variant === 'checkbox' || variant === 'switch') ? (0, _jsxRuntime.jsx)(_HelpButtonInline.default, {
    contentId: `${id}-help`,
    help: help
  }) : undefined;
  const hideHelpButton = Boolean(helpButton);
  const onClick = preparedProps?.onClick;
  const handleClick = (0, _react.useCallback)(args => {
    const preventDefault = () => {
      args.preventDefault?.();
    };
    const checked = value === valueOn;
    const event = {
      ...args,
      checked,
      preventDefault
    };
    onClick?.(checked ? valueOn : valueOff, event);
  }, [onClick, value, valueOff, valueOn]);
  const handleCheckboxChange = (0, _react.useCallback)(args => {
    handleChange?.(args.checked ? valueOn : valueOff, args);
  }, [handleChange, valueOn, valueOff]);
  const handleToggleChange = (0, _react.useCallback)(({
    value
  }) => {
    handleChange?.(value === 'on' ? valueOn : valueOff);
  }, [handleChange, valueOn, valueOff]);
  const handleSwitchChange = (0, _react.useCallback)(args => {
    handleChange?.(args.checked ? valueOn : valueOff, args);
  }, [handleChange, valueOn, valueOff]);
  const cn = (0, _clsx.clsx)('dnb-forms-field-toggle', className);
  const fieldBlockProps = {
    forId: id,
    className: cn,
    disabled,
    hideHelpButton,
    ...(0, _utils.pickSpacingProps)(props)
  };
  const isOn = value === valueOn;
  const isOff = value === valueOff;
  (0, _react.useMemo)(() => {
    const text = isOn ? textOn : textOff;
    if (text) {
      setDisplayValue(text);
    }
  }, [isOn, setDisplayValue, textOff, textOn]);
  const {
    label,
    labelSuffix,
    required,
    labelSrOnly
  } = props;
  const labelWithItemNo = (0, _useIterateItemNo.useIterateItemNo)({
    label,
    labelSuffix,
    required
  });
  switch (variant) {
    default:
    case 'checkbox':
      return (0, _jsxRuntime.jsx)(_index3.default, {
        ...fieldBlockProps,
        label: undefined,
        children: (0, _jsxRuntime.jsx)(_index.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 (0, _jsxRuntime.jsx)(_index3.default, {
        ...fieldBlockProps,
        label: undefined,
        children: (0, _jsxRuntime.jsx)(_index.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 (0, _jsxRuntime.jsx)(_index3.default, {
        ...fieldBlockProps,
        children: (0, _jsxRuntime.jsx)(_index.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 (0, _jsxRuntime.jsx)(_index3.default, {
        ...fieldBlockProps,
        asFieldset: Boolean(label),
        fieldsetRole: "radiogroup",
        children: (0, _jsxRuntime.jsx)(_index2.default, {
          bottom: "x-small",
          children: (0, _jsxRuntime.jsx)(_index.ToggleButton.Group, {
            children: (0, _jsxRuntime.jsxs)(_ToggleButtonGroupContext.default, {
              value: {
                value: isOn ? 'on' : isOff ? 'off' : null,
                onChange: handleToggleChange,
                status: hasError ? 'error' : undefined,
                disabled,
                size
              },
              children: [(0, _jsxRuntime.jsx)(_index.ToggleButton, {
                text: textOn !== null && textOn !== void 0 ? textOn : translations.yes,
                value: "on",
                role: "radio",
                ...htmlAttributes
              }), (0, _jsxRuntime.jsx)(_index.ToggleButton, {
                text: textOff !== null && textOff !== void 0 ? textOff : translations.no,
                value: "off",
                role: "radio",
                ...htmlAttributes
              })]
            })
          })
        })
      });
    case 'radio':
      return (0, _jsxRuntime.jsx)(_index3.default, {
        ...fieldBlockProps,
        asFieldset: Boolean(label),
        fieldsetRole: "radiogroup",
        children: (0, _jsxRuntime.jsxs)(_index.Radio.Group, {
          value: isOn ? 'on' : isOff ? 'off' : null,
          onChange: handleToggleChange,
          status: hasError ? 'error' : undefined,
          disabled: disabled,
          size: size !== 'small' ? size : 'default',
          children: [(0, _jsxRuntime.jsx)(_index.Radio, {
            label: textOn !== null && textOn !== void 0 ? textOn : translations.yes,
            value: "on",
            status: hasError ? 'error' : undefined,
            ...htmlAttributes
          }), (0, _jsxRuntime.jsx)(_index.Radio, {
            label: textOff !== null && textOff !== void 0 ? textOff : translations.no,
            value: "off",
            status: hasError ? 'error' : undefined,
            ...htmlAttributes
          })]
        })
      });
    case 'checkbox-button':
      return (0, _jsxRuntime.jsx)(_index3.default, {
        ...fieldBlockProps,
        children: (0, _jsxRuntime.jsx)(_index.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
        })
      });
  }
}
(0, _withComponentMarkers.default)(Toggle, {
  _supportsSpacingProps: true
});
var _default = exports.default = Toggle;
//# sourceMappingURL=Toggle.js.map