@lanaco/lnc-react-ui
Version:
React component library
265 lines (255 loc) • 6.57 kB
JavaScript
import { jsxs as v, jsx as t, Fragment as N } from "react/jsx-runtime";
import { forwardRef as P, useState as p, useEffect as f, useRef as F, useCallback as j } from "react";
import { s as w } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { c as d, b as R, d as E, e as T } from "./utils-BUdHa0nB.js";
import { u as D } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const L = ({ theme: e, size: $ }) => {
var o = T(e, $);
return `
min-height: ${o};
max-height: ${o};
`;
}, h = {
small: "0.875rem",
medium: "1.125rem",
large: "1.375rem"
}, U = w.div`
display: flex;
align-items: center;
justify-content: center;
position: relative;
${(e) => L(e)};
/* Removing the default appearance */
& > :is(.thumb, .thumb::-webkit-slider-thumb) {
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
& > .thumb {
pointer-events: none;
position: absolute;
height: 0;
width: 100%;
outline: none;
}
& > .thumb--left {
z-index: 3;
}
& > .thumb--right {
z-index: 4;
}
/* For Chrome browsers */
& > .thumb::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: ${(e) => h[e.size]}; /* Set a specific slider handle width */
height: ${(e) => h[e.size]}; /* Slider handle height */
border-radius: 50%;
background-color: ${(e) => d(
e.theme,
"Range",
e.color,
e.disabled === !0 ? "disabled" : "enabled",
"background"
)};
cursor: pointer; /* Cursor on hover */
border: none;
pointer-events: all;
}
/* For Firefox browsers */
& > .thumb::-moz-range-thumb {
width: ${(e) => h[e.size]}; /* Set a specific slider handle width */
height: ${(e) => h[e.size]}; /* Slider handle height */
border-radius: 50%;
background-color: ${(e) => d(
e.theme,
"Range",
e.color,
e.disabled === !0 ? "disabled" : "enabled",
"background"
)};
cursor: pointer; /* Cursor on hover */
border: none;
pointer-events: all;
}
`, W = w.div`
position: relative;
width: 100%;
height: 0.25rem;
&
> :is(.slider__track, .slider__range, .slider__left-value, .slider__right-value) {
position: absolute;
}
& > :is(.slider__track, .slider__range) {
height: 0.25rem;
}
& > .slider__track {
background-color: ${(e) => d(
e.theme,
"Range",
e.color,
"enabled",
"unfilled"
)};
width: 100%;
z-index: 1;
border-radius: ${(e) => R(e.theme, "regular")};
}
& > .slider__range {
border-radius: ${(e) => R(e.theme, "regular")};
background-color: ${(e) => d(
e.theme,
"Range",
e.color,
e.disabled === !0 ? "disabled" : "enabled",
"background"
)};
z-index: 2;
}
`, V = w.div`
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
left: ${(e) => `calc(${e.inputValue + "%"} + (${8 - e.inputValue * 0.15}px))`};
top: ${(e) => "calc(-" + h[e.size] + ")"};
transform: translateX(-50%);
${(e) => E(e.theme, "Range", e.size, "enabled")};
& > .text-content {
color: white;
background-color: ${(e) => d(
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-color: ${(e) => d(
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;
}
}
}
`, G = P((e, $) => {
const {
minValue: o = null,
maxValue: x = null,
min: c = 0,
max: u = 100,
disabled: m = !1,
onChange: k = () => {
},
color: S = "primary",
size: C = "small",
...M
} = e, b = { theme: D(), size: C, color: S }, [_, g] = p(), [r, z] = p(o), [a, y] = p(x);
f(() => {
z(o), y(x);
}, [o, x]);
const s = F(null), i = j(
(n) => Math.round((n - c) / (u - c) * 100),
[c, u]
);
return f(() => {
const n = i(r), l = i(a);
s.current && (s.current.style.left = `${n}%`, s.current.style.width = `${l - n}%`);
}, [r, i]), f(() => {
const n = i(r), l = i(a);
s.current && (s.current.style.width = `${l - n}%`);
}, [a, i]), f(() => {
k({ min: r, max: a });
}, [r, a, k]), /* @__PURE__ */ v(U, { disabled: m, ...b, ...M, children: [
_ && r && /* @__PURE__ */ t(N, { children: /* @__PURE__ */ v(
V,
{
...b,
inputValue: i(r),
disabled: m,
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" }) }) })
]
}
) }),
_ && a && /* @__PURE__ */ t(N, { children: /* @__PURE__ */ v(
V,
{
...b,
inputValue: i(a),
disabled: m,
children: [
/* @__PURE__ */ t("div", { className: "text-content", children: a }),
/* @__PURE__ */ t("div", { className: "arrow", children: /* @__PURE__ */ t("div", { className: "outer", children: /* @__PURE__ */ t("div", { className: "inner" }) }) })
]
}
) }),
/* @__PURE__ */ t(
"input",
{
type: "range",
min: c,
max: u,
value: r | "",
onChange: (n) => {
const l = Math.min(Number(n.target.value), a - 1);
z(l);
},
className: "thumb thumb--left",
style: { zIndex: r > u - 100 && "5" },
onMouseEnter: () => {
g(!0);
},
onMouseLeave: () => {
g(!1);
}
}
),
/* @__PURE__ */ t(
"input",
{
type: "range",
min: c,
max: u,
value: a | "",
onChange: (n) => {
const l = Math.max(Number(n.target.value), r + 1);
y(l);
},
className: "thumb thumb--right",
onMouseEnter: () => {
g(!0);
},
onMouseLeave: () => {
g(!1);
}
}
),
/* @__PURE__ */ v(W, { ...b, disabled: m, children: [
/* @__PURE__ */ t("div", { className: "slider__track" }),
/* @__PURE__ */ t("div", { ref: s, className: "slider__range" })
] })
] });
});
export {
G as default
};