@dnb/eufemia/cjs/components/slider/SliderInstance.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SliderInstance = SliderInstance;
var _react = _interopRequireDefault(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHelper.js"));
var _SpacingUtils = require("../space/SpacingUtils.js");
var _SkeletonHelper = require("../skeleton/SkeletonHelper.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix.js"));
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel.js"));
var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus.js"));
var _SliderTrack = require("./SliderTrack.js");
var _SliderThumb2 = require("./SliderThumb.js");
var _useSliderProps = require("./hooks/useSliderProps.js");
var _SliderHelpers = require("./SliderHelpers.js");
var _jsxRuntime = require("react/jsx-runtime");
var _SubtractButton, _AddButton, _AlignmentHelper, _SliderThumb, _SliderTrackBefore, _SliderTrackAfter, _SliderSuffix;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function SliderInstance() {
  const context = _react.default.useContext(_Context.default);
  const {
    isReverse,
    isVertical,
    showButtons,
    showStatus,
    shouldAnimate,
    allProps
  } = (0, _useSliderProps.useSliderProps)();
  const {
    id,
    label,
    labelSrOnly,
    labelDirection,
    status,
    statusProps,
    statusState,
    statusNoAnimation,
    globalStatus,
    stretch,
    skeleton,
    disabled,
    className,
    extensions
  } = allProps;
  const mainParams = (0, _SpacingUtils.applySpacing)(allProps, {
    className: (0, _clsx.default)("dnb-slider dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', shouldAnimate && 'dnb-slider__state--animate', !showButtons && 'dnb-slider--no-buttons', stretch && 'dnb-slider--stretch', label && labelDirection && `dnb-slider__label--${labelDirection}`, showStatus && 'dnb-slider__form-status', status && `dnb-slider__status--${statusState}`)
  });
  const subtractButton = showButtons ? _SubtractButton || (_SubtractButton = (0, _jsxRuntime.jsx)(SubtractButton, {})) : null;
  const addButton = showButtons ? _AddButton || (_AddButton = (0, _jsxRuntime.jsx)(AddButton, {})) : null;
  (0, _SkeletonHelper.skeletonDOMAttributes)(mainParams, skeleton, context);
  return (0, _jsxRuntime.jsxs)("span", {
    ...mainParams,
    children: [label && (0, _jsxRuntime.jsx)(_FormLabel.default, {
      forId: `${id}-thumb-0`,
      id: id + '-label',
      text: label,
      disabled: disabled,
      skeleton: skeleton,
      labelDirection: labelDirection,
      srOnly: labelSrOnly
    }), (0, _jsxRuntime.jsxs)("span", {
      className: "dnb-slider__wrapper",
      children: [_AlignmentHelper || (_AlignmentHelper = (0, _jsxRuntime.jsx)(_AlignmentHelper2.default, {})), (0, _jsxRuntime.jsx)(_FormStatus.default, {
        show: showStatus,
        id: id + '-form-status',
        globalStatus: globalStatus,
        textId: id + '-status',
        text: status,
        state: statusState,
        noAnimation: statusNoAnimation,
        skeleton: skeleton,
        ...statusProps
      }), (0, _jsxRuntime.jsxs)("span", {
        className: "dnb-slider__inner",
        children: [showButtons && (isReverse ? addButton : subtractButton), (0, _jsxRuntime.jsxs)(_SliderTrack.SliderMainTrack, {
          children: [extensions && Object.entries(extensions).map(([key, {
            instance,
            ...options
          }]) => {
            const Element = instance;
            return (0, _jsxRuntime.jsx)(Element, {
              ...options
            }, key);
          }), _SliderThumb || (_SliderThumb = (0, _jsxRuntime.jsx)(_SliderThumb2.SliderThumb, {})), _SliderTrackBefore || (_SliderTrackBefore = (0, _jsxRuntime.jsx)(_SliderTrack.SliderTrackBefore, {})), _SliderTrackAfter || (_SliderTrackAfter = (0, _jsxRuntime.jsx)(_SliderTrack.SliderTrackAfter, {}))]
        }), showButtons && (isReverse ? subtractButton : addButton), _SliderSuffix || (_SliderSuffix = (0, _jsxRuntime.jsx)(SliderSuffix, {}))]
      })]
    })]
  });
}
function SliderSuffix() {
  const {
    allProps
  } = (0, _useSliderProps.useSliderProps)();
  const {
    id,
    suffix
  } = allProps;
  return suffix ? (0, _jsxRuntime.jsx)(_Suffix.default, {
    className: "dnb-slider__suffix",
    id: id + '-suffix',
    context: allProps,
    children: suffix
  }) : null;
}
function SubtractButton() {
  const {
    emitChange,
    value,
    attributes,
    allProps
  } = (0, _useSliderProps.useSliderProps)();
  const {
    step,
    min,
    max,
    disabled,
    skeleton,
    subtractTitle,
    numberFormat
  } = allProps;
  const onSubtractClickHandler = event => {
    emitChange(event, (0, _SliderHelpers.clamp)(value - (step || 1), min, max));
  };
  const subtractParams = {};
  if (typeof attributes['aria-hidden'] !== 'undefined') {
    subtractParams['aria-hidden'] = attributes['aria-hidden'];
  }
  const humanNumber = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat);
  return (0, _jsxRuntime.jsx)(_Button.default, {
    className: "dnb-slider__button dnb-slider__button--subtract",
    variant: "secondary",
    icon: "subtract",
    size: "small",
    "aria-label": subtractTitle === null || subtractTitle === void 0 ? void 0 : subtractTitle.replace('%s', humanNumber.aria || String(value)),
    onClick: onSubtractClickHandler,
    disabled: disabled,
    skeleton: skeleton,
    ...subtractParams
  });
}
function AddButton() {
  const {
    emitChange,
    value,
    attributes,
    allProps
  } = (0, _useSliderProps.useSliderProps)();
  const {
    step,
    min,
    max,
    disabled,
    skeleton,
    addTitle,
    numberFormat
  } = allProps;
  const onAddClickHandler = event => {
    emitChange(event, (0, _SliderHelpers.clamp)(value + (step || 1), min, max));
  };
  const addParams = {};
  if (typeof attributes['aria-hidden'] !== 'undefined') {
    addParams['aria-hidden'] = attributes['aria-hidden'];
  }
  const humanNumber = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat);
  return (0, _jsxRuntime.jsx)(_Button.default, {
    className: "dnb-slider__button dnb-slider__button--add",
    variant: "secondary",
    icon: "add",
    size: "small",
    "aria-label": addTitle === null || addTitle === void 0 ? void 0 : addTitle.replace('%s', humanNumber.aria || String(value)),
    onClick: onAddClickHandler,
    disabled: disabled,
    skeleton: skeleton,
    ...addParams
  });
}
//# sourceMappingURL=SliderInstance.js.map