@dndbuilder.com/react/dist/packages/react/src/components/controls/slider-unit.control.js

Drag and drop builder for React

"use client";
import { jsxs as s, jsx as n } from "react/jsx-runtime";
import { Label as R } from "../shared/label.js";
import { RangeSlider as T } from "../shared/range-slider.js";
import { Select as i } from "../shared/select.js";
import { Tooltip as d } from "../shared/tooltip.js";
import { useAppSelector as U } from "../../hooks/use-app-selector.js";
import B from "../../hooks/use-debounce.js";
import { useSettings as M } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as X } from "../../../../../store/selectors.js";
import { Unit as m } from "../../types/style.js";
import { classNames as h } from "../../../../../utils.js";
import { useState as A, useEffect as y } from "react";
import { BreakpointSelector as D } from "../shared/breakpoint-selector.js";
const G = [m.PX, m.PERCENTAGE, m.REM, m.EM], _ = ({
  min: g,
  max: x,
  step: v = 1,
  units: u = G,
  className: S,
  label: C,
  type: $,
  fieldName: a,
  mode: c,
  responsive: f = !1,
  ...E
}) => {
  const b = U(X), [t, j] = M(
    f && c ? `${a}.${b}.${c}` : f ? `${a}.${b}` : c ? `${a}.${c}` : a,
    $
  ), [e, p] = A(
    t ?? {
      value: void 0,
      unit: u[0] ?? m.PX
    }
  ), o = B(e, 400);
  y(() => {
    ((t == null ? void 0 : t.value) !== (o == null ? void 0 : o.value) || (t == null ? void 0 : t.unit) !== (o == null ? void 0 : o.unit)) && j(o);
  }, [o]), y(() => {
    ((t == null ? void 0 : t.value) !== (e == null ? void 0 : e.value) || (t == null ? void 0 : t.unit) !== (e == null ? void 0 : e.unit)) && p(t);
  }, [t]);
  const w = (r) => {
    p({ ...e, value: r });
  }, k = (r) => {
    p({
      ...e,
      unit: r
    });
  }, P = () => {
    switch ((t == null ? void 0 : t.unit) || m.PX) {
      case "px":
        return {
          min: g ?? 0,
          max: x ?? 1600
        };
      default:
        return {
          min: g ?? 0,
          max: x ?? 100
        };
    }
  }, { min: N, max: l } = P();
  return /* @__PURE__ */ s("div", { className: h("mt-4", S), children: [
    C && /* @__PURE__ */ s(R, { className: "mb-1.5 flex items-center gap-1", children: [
      C,
      " ",
      f && /* @__PURE__ */ n(D, {})
    ] }),
    /* @__PURE__ */ s("div", { className: h("flex gap-1.5"), ...E, children: [
      /* @__PURE__ */ n(
        T,
        {
          onValueChange: (r) => w(r[0]),
          value: [(e == null ? void 0 : e.value) ?? 0],
          step: v,
          max: l,
          min: N
        }
      ),
      /* @__PURE__ */ s(
        "div",
        {
          className: h(
            "flex h-7 items-center justify-between rounded-sm border text-gray-800"
          ),
          children: [
            /* @__PURE__ */ s(d, { children: [
              /* @__PURE__ */ n(d.Trigger, { children: /* @__PURE__ */ n(
                "input",
                {
                  onChange: (r) => w(r.target.value === "" ? void 0 : Number(r.target.value)),
                  value: (e == null ? void 0 : e.value) ?? "",
                  className: "remove-spinner w-[46px] rounded-sm border-0 bg-transparent p-0 pl-1.5 pt-[3px] text-[11px] leading-3 shadow-none outline-none focus:ring-0",
                  type: "number",
                  min: N,
                  max: l,
                  step: v
                }
              ) }),
              e != null && e.value && e.value > l ? /* @__PURE__ */ s(d.Content, { children: [
                "Value must be less than or equel to ",
                l
              ] }) : null
            ] }),
            /* @__PURE__ */ s(i, { onValueChange: k, value: (e == null ? void 0 : e.unit) || u[0], children: [
              /* @__PURE__ */ n(
                i.Trigger,
                {
                  className: "flex h-full w-7 items-center justify-center rounded-none rounded-r border-0 border-l p-0 text-[11px] leading-3 hover:bg-gray-300 focus:ring-0 focus:ring-offset-0",
                  chevronDown: !1,
                  children: /* @__PURE__ */ n(i.Value, {})
                }
              ),
              /* @__PURE__ */ n(i.Content, { alignOffset: -10, sideOffset: -60, className: "min-w-[38px] border-0", children: /* @__PURE__ */ n(i.Group, { children: u.map((r) => /* @__PURE__ */ n(
                i.Item,
                {
                  showCheck: !1,
                  value: r,
                  className: "flex items-center justify-center px-0 py-1.5 text-xs",
                  children: r
                },
                r
              )) }) })
            ] })
          ]
        }
      )
    ] })
  ] });
};
export {
  _ as SliderUnitControl
};
//# sourceMappingURL=slider-unit.control.js.map