@hitachivantara/uikit-react-core/dist/esm/Slider/SliderInput/SliderInput.js

Core React components for the NEXT Design System.

import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useEffect, Fragment } from "react";
import { setId } from "../../utils/setId.js";
import { knobsValuesToString, stringValuesToKnobs } from "../utils.js";
import { useClasses } from "./SliderInput.styles.js";
import { staticClasses } from "./SliderInput.styles.js";
import { HvInput } from "../../Input/Input.js";
const HvSliderInput = ({
  classes: classesProp,
  className,
  id,
  label,
  status,
  values: valuesProp = [],
  inputProps = [],
  readOnly = false,
  disabled = false,
  markDigits = 0,
  onChange,
  ...others
}) => {
  const { classes, cx } = useClasses(classesProp);
  const [inputValues, setInputValues] = useState(
    knobsValuesToString(valuesProp, markDigits)
  );
  const handleChange = (index) => {
    if (disabled) return;
    onChange?.(stringValuesToKnobs(inputValues), index);
  };
  useEffect(() => {
    setInputValues(knobsValuesToString(valuesProp, markDigits));
  }, [markDigits, valuesProp]);
  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), ...others, children: inputValues.map((value, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
    index !== 0 && /* @__PURE__ */ jsx("span", { children: "—" }),
    /* @__PURE__ */ jsx(
      HvInput,
      {
        id: setId(id, index),
        "aria-label": `${label}-${index}`,
        className: classes.input,
        disabled,
        value: Number.isNaN(value) || value == null ? "" : value.toString(),
        onEnter: () => handleChange(index),
        onBlur: () => handleChange(index),
        onChange: (_, inputValue) => {
          const newValues = [...inputValues];
          newValues[index] = inputValue;
          setInputValues(newValues);
        },
        status: status?.[index] || "standBy",
        readOnly,
        disableClear: true,
        ...inputProps[index]
      }
    )
  ] }, setId(id, index))) });
};
export {
  HvSliderInput,
  staticClasses as sliderInputClasses
};