@lanaco/lnc-react-ui
Version:
React component library
290 lines (280 loc) • 7.06 kB
JavaScript
import { jsxs as f, jsx as r, Fragment as V } from "react/jsx-runtime";
import { forwardRef as F, useState as w, useEffect as x, useRef as T, useCallback as j } from "react";
import { n as $ } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { P as i } from "./index-S5Cd7WrG.js";
import { b as u, a as R, c as E, d as O } from "./utils-DtRLzzTZ.js";
import { u as D } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const L = ({ theme: e, size: k }) => {
var s = O(e, k);
return `
min-height: ${s};
max-height: ${s};
`;
}, h = {
small: "0.875rem",
medium: "1.125rem",
large: "1.375rem"
}, U = $.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) => u(
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) => u(
e.theme,
"Range",
e.color,
e.disabled === !0 ? "disabled" : "enabled",
"background"
)};
cursor: pointer; /* Cursor on hover */
border: none;
pointer-events: all;
}
`, 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) => u(
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) => u(
e.theme,
"Range",
e.color,
e.disabled === !0 ? "disabled" : "enabled",
"background"
)};
z-index: 2;
}
`, S = $.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) => u(
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) => u(
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;
}
}
}
`, B = F((e, k) => {
const {
minValue: s = null,
maxValue: v = null,
min: c = 0,
max: m = 100,
disabled: b = !1,
onChange: y = () => {
},
color: C = "primary",
size: P = "small",
...M
} = e, g = { theme: D(), size: P, color: C }, [_, p] = w(), [t, z] = w(s), [a, N] = w(v);
x(() => {
z(s), N(v);
}, [s, v]);
const d = T(null), o = j(
(n) => Math.round((n - c) / (m - c) * 100),
[c, m]
);
return x(() => {
const n = o(t), l = o(a);
d.current && (d.current.style.left = `${n}%`, d.current.style.width = `${l - n}%`);
}, [t, o]), x(() => {
const n = o(t), l = o(a);
d.current && (d.current.style.width = `${l - n}%`);
}, [a, o]), x(() => {
y({ min: t, max: a });
}, [t, a, y]), /* @__PURE__ */ f(U, { disabled: b, ...g, ...M, children: [
_ && t && /* @__PURE__ */ r(V, { children: /* @__PURE__ */ f(
S,
{
...g,
inputValue: o(t),
disabled: b,
children: [
/* @__PURE__ */ r("div", { className: "text-content", children: t }),
/* @__PURE__ */ r("div", { className: "arrow", children: /* @__PURE__ */ r("div", { className: "outer", children: /* @__PURE__ */ r("div", { className: "inner" }) }) })
]
}
) }),
_ && a && /* @__PURE__ */ r(V, { children: /* @__PURE__ */ f(
S,
{
...g,
inputValue: o(a),
disabled: b,
children: [
/* @__PURE__ */ r("div", { className: "text-content", children: a }),
/* @__PURE__ */ r("div", { className: "arrow", children: /* @__PURE__ */ r("div", { className: "outer", children: /* @__PURE__ */ r("div", { className: "inner" }) }) })
]
}
) }),
/* @__PURE__ */ r(
"input",
{
type: "range",
min: c,
max: m,
value: t | "",
onChange: (n) => {
const l = Math.min(Number(n.target.value), a - 1);
z(l);
},
className: "thumb thumb--left",
style: { zIndex: t > m - 100 && "5" },
onMouseEnter: () => {
p(!0);
},
onMouseLeave: () => {
p(!1);
}
}
),
/* @__PURE__ */ r(
"input",
{
type: "range",
min: c,
max: m,
value: a | "",
onChange: (n) => {
const l = Math.max(Number(n.target.value), t + 1);
N(l);
},
className: "thumb thumb--right",
onMouseEnter: () => {
p(!0);
},
onMouseLeave: () => {
p(!1);
}
}
),
/* @__PURE__ */ f(W, { ...g, disabled: b, children: [
/* @__PURE__ */ r("div", { className: "slider__track" }),
/* @__PURE__ */ r("div", { ref: d, className: "slider__range" })
] })
] });
});
B.propTypes = {
minValue: i.number,
maxValue: i.number,
min: i.number,
max: i.number,
disabled: i.bool,
//-----------------------------
onChange: i.func,
//-------------------------
className: i.string,
style: i.object,
size: i.oneOf(["small", "medium", "large"]),
color: i.oneOf([
"primary",
"secondary",
"success",
"danger",
"warning",
"disabled",
"information",
"neutral",
"gray"
])
};
export {
B as default
};