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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
var _SubtractButton, _AddButton, _AlignmentHelper, _SliderThumb, _SliderTrackBefore, _SliderTrackAfter, _SliderSuffix;
import React from 'react';
import classnames from 'classnames';
import { isTrue } from "../../shared/component-helper.js";
import AlignmentHelper from "../../shared/AlignmentHelper.js";
import { createSpacingClasses } from "../space/SpacingHelper.js";
import { createSkeletonClass, skeletonDOMAttributes } from "../skeleton/SkeletonHelper.js";
import Context from "../../shared/Context.js";
import Suffix from "../../shared/helpers/Suffix.js";
import Button from "../button/Button.js";
import FormLabel from "../form-label/FormLabel.js";
import FormStatus from "../form-status/FormStatus.js";
import { SliderMainTrack, SliderTrackBefore, SliderTrackAfter } from "./SliderTrack.js";
import { SliderThumb } from "./SliderThumb.js";
import { useSliderProps } from "./hooks/useSliderProps.js";
import { clamp, getFormattedNumber } from "./SliderHelpers.js";
export function SliderInstance() {
  const context = React.useContext(Context);
  const {
    isReverse,
    isVertical,
    showButtons,
    showStatus,
    shouldAnimate,
    allProps
  } = useSliderProps();
  const {
    id,
    label,
    labelSrOnly,
    labelDirection,
    status,
    statusProps,
    statusState,
    statusNoAnimation,
    globalStatus,
    stretch,
    skeleton,
    disabled,
    className,
    extensions
  } = allProps;
  const mainParams = {
    className: classnames("dnb-slider dnb-form-component", createSkeletonClass(null, skeleton), createSpacingClasses(allProps), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', shouldAnimate && 'dnb-slider__state--animate', !showButtons && 'dnb-slider--no-buttons', isTrue(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 = React.createElement(SubtractButton, null)) : null;
  const addButton = showButtons ? _AddButton || (_AddButton = React.createElement(AddButton, null)) : null;
  skeletonDOMAttributes(mainParams, skeleton, context);
  return React.createElement("span", mainParams, label && React.createElement(FormLabel, {
    forId: `${id}-thumb-0`,
    id: id + '-label',
    text: label,
    disabled: disabled,
    skeleton: skeleton,
    labelDirection: labelDirection,
    srOnly: labelSrOnly
  }), React.createElement("span", {
    className: "dnb-slider__wrapper"
  }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(FormStatus, _extends({
    show: showStatus,
    id: id + '-form-status',
    globalStatus: globalStatus,
    text_id: id + '-status',
    text: status,
    state: statusState,
    no_animation: statusNoAnimation,
    skeleton: skeleton
  }, statusProps)), React.createElement("span", {
    className: "dnb-slider__inner"
  }, showButtons && (isReverse ? addButton : subtractButton), React.createElement(SliderMainTrack, null, extensions && Object.entries(extensions).map(([key, {
    instance,
    ...options
  }]) => {
    const Element = instance;
    return React.createElement(Element, _extends({
      key: key
    }, options));
  }), _SliderThumb || (_SliderThumb = React.createElement(SliderThumb, null)), _SliderTrackBefore || (_SliderTrackBefore = React.createElement(SliderTrackBefore, null)), _SliderTrackAfter || (_SliderTrackAfter = React.createElement(SliderTrackAfter, null))), showButtons && (isReverse ? subtractButton : addButton), _SliderSuffix || (_SliderSuffix = React.createElement(SliderSuffix, null)))));
}
function SliderSuffix() {
  const {
    allProps
  } = useSliderProps();
  const {
    id,
    suffix
  } = allProps;
  return suffix ? React.createElement(Suffix, {
    className: "dnb-slider__suffix",
    id: id + '-suffix',
    context: allProps
  }, suffix) : null;
}
function SubtractButton() {
  const {
    emitChange,
    value,
    attributes,
    allProps
  } = useSliderProps();
  const {
    step,
    min,
    max,
    disabled,
    skeleton,
    subtractTitle,
    numberFormat
  } = allProps;
  const onSubtractClickHandler = event => {
    emitChange(event, clamp(value - (step || 1), min, max));
  };
  const subtractParams = {};
  if (typeof attributes['aria-hidden'] !== 'undefined') {
    subtractParams['aria-hidden'] = attributes['aria-hidden'];
  }
  const humanNumber = getFormattedNumber(value, numberFormat);
  return React.createElement(Button, _extends({
    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)),
    on_click: onSubtractClickHandler,
    disabled: disabled,
    skeleton: skeleton
  }, subtractParams));
}
function AddButton() {
  const {
    emitChange,
    value,
    attributes,
    allProps
  } = useSliderProps();
  const {
    step,
    min,
    max,
    disabled,
    skeleton,
    addTitle,
    numberFormat
  } = allProps;
  const onAddClickHandler = event => {
    emitChange(event, clamp(value + (step || 1), min, max));
  };
  const addParams = {};
  if (typeof attributes['aria-hidden'] !== 'undefined') {
    addParams['aria-hidden'] = attributes['aria-hidden'];
  }
  const humanNumber = getFormattedNumber(value, numberFormat);
  return React.createElement(Button, _extends({
    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)),
    on_click: onAddClickHandler,
    disabled: disabled,
    skeleton: skeleton
  }, addParams));
}
//# sourceMappingURL=SliderInstance.js.map