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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
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"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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') ? _react.default.createElement(_HelpButtonInline.default, {
    contentId: `${id}-help`,
    help: help
  }) : undefined;
  const hideHelpButton = Boolean(helpButton);
  const preventChangeRef = (0, _react.useRef)(false);
  const onClick = preparedProps === null || preparedProps === void 0 ? void 0 : preparedProps.onClick;
  const handleClick = (0, _react.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 = (0, _react.useCallback)(args => {
    handleChange === null || handleChange === void 0 || handleChange(args.checked ? valueOn : valueOff, args);
  }, [handleChange, valueOn, valueOff]);
  const handleToggleChange = (0, _react.useCallback)(({
    value
  }) => {
    handleChange === null || handleChange === void 0 || handleChange(value === 'on' ? valueOn : valueOff);
  }, [handleChange, valueOn, valueOff]);
  const handleSwitchChange = (0, _react.useCallback)(args => {
    handleChange === null || handleChange === void 0 || handleChange(args.checked ? valueOn : valueOff, args);
  }, [handleChange, valueOn, valueOff]);
  const cn = (0, _classnames.default)('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 _react.default.createElement(_index3.default, _extends({}, fieldBlockProps, {
        label: undefined
      }), _react.default.createElement(_index.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.default.createElement(_index3.default, _extends({}, fieldBlockProps, {
        label: undefined
      }), _react.default.createElement(_index.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.default.createElement(_index3.default, fieldBlockProps, _react.default.createElement(_index.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.default.createElement(_index3.default, _extends({}, fieldBlockProps, {
        asFieldset: Boolean(label),
        fieldsetRole: "radiogroup"
      }), _react.default.createElement(_index2.default, {
        bottom: "x-small"
      }, _react.default.createElement(_index.ToggleButton.Group, null, _react.default.createElement(_ToggleButtonGroupContext.default.Provider, {
        value: {
          value: isOn ? 'on' : isOff ? 'off' : null,
          onChange: handleToggleChange,
          status: hasError ? 'error' : undefined,
          disabled,
          size
        }
      }, _react.default.createElement(_index.ToggleButton, _extends({
        text: textOn !== null && textOn !== void 0 ? textOn : translations.yes,
        value: "on",
        role: "radio"
      }, htmlAttributes)), _react.default.createElement(_index.ToggleButton, _extends({
        text: textOff !== null && textOff !== void 0 ? textOff : translations.no,
        value: "off",
        role: "radio"
      }, htmlAttributes))))));
    case 'radio':
      return _react.default.createElement(_index3.default, _extends({}, fieldBlockProps, {
        asFieldset: Boolean(label),
        fieldsetRole: "radiogroup"
      }), _react.default.createElement(_index.Radio.Group, {
        value: isOn ? 'on' : isOff ? 'off' : null,
        on_change: handleToggleChange,
        status: hasError ? 'error' : undefined,
        disabled: disabled,
        size: size !== 'small' ? size : 'default'
      }, _react.default.createElement(_index.Radio, _extends({
        label: textOn !== null && textOn !== void 0 ? textOn : translations.yes,
        value: "on",
        status: hasError ? 'error' : undefined
      }, htmlAttributes)), _react.default.createElement(_index.Radio, _extends({
        label: textOff !== null && textOff !== void 0 ? textOff : translations.no,
        value: "off",
        status: hasError ? 'error' : undefined
      }, htmlAttributes))));
    case 'checkbox-button':
      return _react.default.createElement(_index3.default, fieldBlockProps, _react.default.createElement(_index.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;
var _default = exports.default = Toggle;
//# sourceMappingURL=Toggle.js.map