@dnb/eufemia/components/switch/Switch.js

DNB Eufemia Design System UI Library

"use client";

var _AlignmentHelper;
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef } from 'react';
import clsx from 'clsx';
import { validateDOMAttributes, getStatusState, combineDescribedBy, extendPropsWithContext } from "../../shared/component-helper.js";
import { pickFormElementProps } from "../../shared/helpers/filterValidProps.js";
import AlignmentHelper from "../../shared/AlignmentHelper.js";
import { applySpacing } from "../space/SpacingUtils.js";
import { skeletonDOMAttributes, createSkeletonClass } from "../skeleton/SkeletonHelper.js";
import Context from "../../shared/Context.js";
import Suffix from "../../shared/helpers/Suffix.js";
import FormLabel from "../form-label/FormLabel.js";
import FormStatus from "../form-status/FormStatus.js";
import useId from "../../shared/helpers/useId.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const defaultProps = {
  statusState: 'error'
};
function Switch(props) {
  const context = useContext(Context);
  const allProps = extractPropsFromContext();
  const {
    value,
    size,
    status,
    statusState,
    statusProps,
    globalStatus,
    statusNoAnimation,
    suffix,
    label,
    labelPosition,
    labelSrOnly,
    title,
    disabled,
    readOnly,
    skeleton,
    className,
    id: idProp,
    checked: checkedProp,
    onChange,
    onChangeEnd,
    onClick,
    ref: refProp,
    ...rest
  } = allProps;
  const [, forceUpdate] = useReducer(() => ({}), {});
  const id = useId(idProp);
  const isFn = typeof refProp === 'function';
  const refHook = useRef(undefined);
  const inputRef = !isFn && refProp || refHook;
  const preventChangeRef = useRef(false);
  const isCheckedRef = useRef(checkedProp !== null && checkedProp !== void 0 ? checkedProp : false);
  const prevCheckedRef = useRef(checkedProp);
  useEffect(() => {
    if (isFn) {
      refProp === null || refProp === void 0 || refProp(refHook.current);
    }
  }, [refProp, isFn, refHook]);
  useEffect(() => {
    if (checkedProp !== prevCheckedRef.current) {
      isCheckedRef.current = !!checkedProp;
      prevCheckedRef.current = !!checkedProp;
      forceUpdate();
    }
  }, [checkedProp]);
  const callOnChange = useCallback(({
    checked,
    event
  }) => {
    onChange === null || onChange === void 0 || onChange({
      checked,
      event
    });
  }, [onChange]);
  const onChangeHandler = useCallback(event => {
    if (preventChangeRef.current) {
      return;
    }
    const updatedChecked = !isCheckedRef.current;
    isCheckedRef.current = updatedChecked;
    forceUpdate();
    callOnChange({
      checked: updatedChecked,
      event
    });
    if (onChangeEnd) {
      setTimeout(() => onChangeEnd({
        checked: updatedChecked,
        event
      }), 500);
    }
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, [callOnChange, inputRef, onChangeEnd]);
  const onClickHandler = useCallback(event => {
    const preventDefault = () => {
      event.preventDefault();
      if (event.target['checked'] !== isCheckedRef.current) {
        preventChangeRef.current = true;
        isCheckedRef.current = !isCheckedRef.current;
        forceUpdate();
      }
    };
    if (readOnly) {
      return preventDefault();
    }
    onClick === null || onClick === void 0 || onClick({
      checked: isCheckedRef.current,
      preventDefault,
      event,
      ...event
    });
  }, [onClick, readOnly]);
  const onKeyDownHandler = useCallback(event => {
    switch (event.code) {
      case 'Enter':
        onChangeHandler(event);
        break;
    }
  }, [onChangeHandler]);
  const showStatus = useMemo(() => getStatusState(status), [status]);
  const mainParams = applySpacing(props, {
    className: clsx(`dnb-switch dnb-switch--label-position-${labelPosition || 'right'} dnb-form-component`, createSkeletonClass(null, skeleton), className, size && `dnb-switch--${size}`, status && `dnb-switch__status--${statusState}`)
  });
  const inputParams = {
    disabled,
    checked: isCheckedRef.current,
    ...rest
  };
  if (showStatus || suffix) {
    inputParams['aria-describedby'] = combineDescribedBy(inputParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
  }
  if (readOnly) {
    inputParams['aria-readonly'] = readOnly;
  }
  skeletonDOMAttributes(inputParams, skeleton, context);
  validateDOMAttributes(props, inputParams);
  const helperParams = useMemo(() => ({
    onMouseDown: e => e.preventDefault()
  }), []);
  const labelComp = useMemo(() => label && _jsx(FormLabel, {
    id: id + '-label',
    forId: id,
    text: label,
    disabled: disabled,
    skeleton: skeleton,
    srOnly: labelSrOnly,
    vertical: false
  }), [disabled, id, label, labelSrOnly, skeleton]);
  return _jsx("span", {
    ...mainParams,
    children: _jsxs("span", {
      className: "dnb-switch__order",
      children: [labelPosition === 'left' && labelComp, _jsxs("span", {
        className: "dnb-switch__inner",
        children: [_AlignmentHelper || (_AlignmentHelper = _jsx(AlignmentHelper, {})), _jsx(FormStatus, {
          show: showStatus,
          id: id + '-form-status',
          globalStatus: globalStatus,
          label: label,
          widthSelector: id + ', ' + id + '-label',
          text: status,
          state: statusState,
          skeleton: skeleton,
          noAnimation: statusNoAnimation,
          ...statusProps
        }), _jsxs("span", {
          className: "dnb-switch__shell",
          children: [(labelPosition === 'right' || !labelPosition) && labelComp, _jsxs("span", {
            className: "dnb-switch__row",
            children: [_jsx("input", {
              id: id,
              name: id,
              type: "checkbox",
              role: "switch",
              title: title,
              "aria-checked": isCheckedRef.current,
              className: "dnb-switch__input",
              value: isCheckedRef.current ? value || '' : '',
              ref: inputRef,
              ...inputParams,
              onChange: onChangeHandler,
              onClick: onClickHandler,
              onKeyDown: onKeyDownHandler
            }), _jsx("span", {
              draggable: true,
              "aria-hidden": true,
              className: "dnb-switch__background",
              onDragStart: onChangeHandler,
              ...helperParams
            }), _jsx("span", {
              className: clsx('dnb-switch__button', createSkeletonClass('shape', skeleton, context)),
              "aria-hidden": true
            })]
          }), suffix && _jsx(Suffix, {
            className: "dnb-switch__suffix",
            id: id + '-suffix',
            context: props,
            children: suffix
          })]
        })]
      })]
    })
  });
  function extractPropsFromContext() {
    return extendPropsWithContext(props, defaultProps, {
      skeleton: context === null || context === void 0 ? void 0 : context.skeleton
    }, pickFormElementProps(context === null || context === void 0 ? void 0 : context.formElement), context.Switch);
  }
}
withComponentMarkers(Switch, {
  _formElement: true
});
export default Switch;
//# sourceMappingURL=Switch.js.map