@lanaco/lnc-react-ui/dist/RangeSlider.js

React component library

import { jsxs as O, jsx as t, Fragment as W } from "react/jsx-runtime";
import { n as x } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { P as n } from "./index-S5Cd7WrG.js";
import { forwardRef as X, useRef as q, useState as v, useCallback as A, useEffect as M } from "react";
import { a as D, b as o, c as G, d as H } from "./utils-DtRLzzTZ.js";
import { u as J } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { u as K } from "./useUpdateEffect-CuYWz7EA.js";
const Q = ({ theme: e, size: i }) => {
  var u = H(e, i);
  return `
    min-height: ${u};
    max-height: ${u};
  `;
}, g = {
  small: "0.875rem",
  medium: "1.125rem",
  large: "1.375rem"
}, Y = x.div`
  position: relative;
  ${(e) => Q(e)};
  display: inline-flex;
  align-items: center;
`, T = x.input`
  -webkit-appearance: none; /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 0.25rem; /* Specified height */
  border-radius: 3px;
  outline: none; /* Remove outline */
  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
  background: ${(e) => e.rangeBackground};
  transition: background 450ms ease-in;
  -webkit-appearance: none;
  border-radius: ${(e) => D(e.theme, "regular")};
  &::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: ${(e) => g[e.size]}; /* Set a specific slider handle width */
    height: ${(e) => g[e.size]}; /* Slider handle height */
    border-radius: 50%;
    background-color: ${(e) => o(
  e.theme,
  "Range",
  e.color,
  e.disabled === !0 ? "disabled" : "enabled",
  "background"
)};
    cursor: pointer; /* Cursor on hover */
    border: none;
  }
  &::-moz-range-thumb {
    width: ${(e) => g[e.size]}; /* Set a specific slider handle width */
    height: ${(e) => g[e.size]}; /* Slider handle height */
    border-radius: 50%;
    background-color: ${(e) => o(
  e.theme,
  "Range",
  e.color,
  e.disabled === !0 ? "disabled" : "enabled",
  "background"
)};
    cursor: pointer; /* Cursor on hover */
    border: none;
  }
`, Z = x.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  ${(e) => G(e.theme, "Range", e.size, "enabled")};
  left: ${(e) => `calc(${e.inputValue + "%"} + (${8 - e.inputValue * 0.15}px))`};
  top: ${(e) => "calc(-" + g[e.size] + ")"};
  transform: translateX(-50%);
  & > .text-content {
    color: white;
    background-color: ${(e) => o(
  e.theme,
  "Range",
  e.color,
  e.disabled === !0 ? "disabled" : "enabled",
  "background"
)};
    border-radius: 3px;
    z-index: 2;
    padding: 2px 6px;
  }
  & > .arrow {
    & > .outer {
      height: 4px;
      position: relative;
      & > .inner {
        width: 8px;
        height: 8px;
        background: ${(e) => o(
  e.theme,
  "Range",
  e.color,
  e.disabled === !0 ? "disabled" : "enabled",
  "background"
)};
        transform: rotate(45deg);
        position: absolute;
        top: -6px;
        left: -4px;
        z-index: 1;
        border-radius: 1px;
      }
    }
  }
`, _ = X((e, i) => {
  const {
    defaultValue: u,
    value: d = null,
    min: c = 0,
    max: h = 100,
    disabled: l,
    tabIndex: $ = 0,
    onChange: k = () => {
    },
    onInput: w = () => {
    },
    color: s = "primary",
    size: B = "small",
    className: E = "",
    style: j = {},
    ...y
  } = e, C = q(), m = J(), b = { theme: m, size: B, color: s, className: E, style: j }, R = o(
    m,
    "Range",
    s,
    "enabled",
    "unfilled"
  ), [S, F] = v(
    o(
      m,
      "Range",
      s,
      l ? "disabled" : "enabled",
      "background"
    )
  ), [z, U] = v(), [L, p] = v(), f = A(
    (a) => Math.round((a - c) / (h - c) * 100),
    [c, h]
  ), [r, I] = v(d || u);
  K(() => {
    I(d);
  }, [d]), M(() => {
    P(r || 0);
  }, [r, f, l, s]), M(() => {
    F(
      o(
        m,
        "Range",
        s,
        l ? "disabled" : "enabled",
        "background"
      )
    );
  }, [s, l]);
  const V = (a) => {
    P(a.target.value), w && w(a);
  }, P = (a) => {
    U(
      `linear-gradient(to right, ${S} 0%, ${S} ${f(
        a
      )}%, ${R} ${f(a)}%, ${R} 100%)`
    );
  }, N = (a) => {
    I(a.target.value), k && k(a);
  };
  return /* @__PURE__ */ O(Y, { ...b, children: [
    L && r && /* @__PURE__ */ t(W, { children: /* @__PURE__ */ O(Z, { ...b, inputValue: f(r), children: [
      /* @__PURE__ */ t("div", { className: "text-content", children: r }),
      /* @__PURE__ */ t("div", { className: "arrow", children: /* @__PURE__ */ t("div", { className: "outer", children: /* @__PURE__ */ t("div", { className: "inner" }) }) })
    ] }) }),
    d == null || d == "undefined" ? /* @__PURE__ */ t(
      T,
      {
        ref: i || C,
        id: "fader",
        type: "range",
        min: c,
        max: h,
        defaultValue: u,
        disabled: l,
        tabIndex: $,
        onMouseEnter: () => {
          p(!0);
        },
        onMouseLeave: () => {
          p(!1);
        },
        rangeBackground: z,
        onInput: V,
        onChange: N,
        ...b,
        ...y
      }
    ) : /* @__PURE__ */ t(
      T,
      {
        ref: i || C,
        id: "fader",
        type: "range",
        min: c,
        max: h,
        value: r,
        disabled: l,
        tabIndex: $,
        onMouseEnter: () => {
          p(!0);
        },
        onMouseLeave: () => {
          p(!1);
        },
        rangeBackground: z,
        onInput: V,
        onChange: N,
        ...b,
        ...y
      }
    )
  ] });
});
_.propTypes = {
  value: n.number,
  defaultValue: n.number,
  min: n.number,
  max: n.number,
  disabled: n.bool,
  tabIndex: n.number,
  //-------------------------
  onChange: n.func,
  onInput: n.func,
  //-------------------------
  className: n.string,
  style: n.object,
  size: n.oneOf(["small", "medium", "large"]),
  color: n.oneOf([
    "primary",
    "secondary",
    "success",
    "danger",
    "warning",
    "disabled",
    "information",
    "neutral",
    "gray"
  ])
};
export {
  _ as default
};