@lanaco/lnc-react-ui
Version:
React component library
278 lines (270 loc) • 7.22 kB
JavaScript
import { jsxs as Y, jsx as w } from "react/jsx-runtime";
import { forwardRef as Z, useState as W, useRef as _, useEffect as R } from "react";
import { s as N } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { e as m, c, b as v, f as S, i as F, d as A } from "./utils-BUdHa0nB.js";
import { u as ee } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const te = N.div`
display: flex;
align-items: center;
min-height: ${(e) => m(e.theme, e.size)};
max-height: ${(e) => m(e.theme, e.size)};
background-color: ${(e) => c(
e.theme,
"Input",
e.color,
"enabled",
"background"
)};
border: 1px solid
${(e) => c(
e.theme,
"Input",
e.focused === !0 ? "primary" : e.color,
"enabled",
"border"
)};
border-radius: ${(e) => v(e.theme, "regular")};
${(e) => e.focused === !0 && e.readOnly !== !0 ? S(e.theme) : ""}
/* ${(e) => e.isDisabled === !0 ? F(e.theme) : ""} */
${(e) => e.isDisabled === !0 && `background-color: ${c(
e.theme,
"Input",
e.color,
"disabled",
"background",
"backgroundOpacity"
)};
color: ${(d) => c(
d.theme,
"Input",
d.color,
"disabled",
"text"
)};`}
${(e) => e.isDisabled === !0 ? "border: 1px solid " + c(
e.theme,
"Input",
e.color,
"disabled",
"border"
) : ""}
& input {
background: none;
border: none;
outline: none;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
width: 100%;
${(e) => A(e.theme, "Input", e.size, "enabled")}
min-height: ${(e) => m(e.theme, e.size)};
max-height: ${(e) => m(e.theme, e.size)};
color: ${(e) => c(
e.theme,
"Input",
e.focused === !0 ? "primary" : e.color,
"enabled",
"text"
)};
caret-color: ${(e) => c(e.theme, "Input", e.color, "enabled", "caret")};
padding-right: ${(e) => e.suffix ? "0" : "0.75rem"};
padding-left: ${(e) => e.prefix ? "0" : "0.75rem"};
}
& input:disabled {
/* ${(e) => F(e.theme)} */
${(e) => `background-color: ${c(
e.theme,
"Input",
e.color,
"disabled",
"background",
"backgroundOpacity"
)};
color: ${(d) => c(
d.theme,
"Input",
d.color,
"disabled",
"text"
)};`}
background: none;
}
& input:read-only {
cursor: default;
}
& input::placeholder {
color: ${(e) => c(
e.theme,
"Input",
e.color,
"enabled",
"placeholder"
)};
}
`, U = N.span`
padding: 0 12px;
color: ${(e) => c(
e.theme,
"Input",
e.focused === !0 ? "primary" : e.color,
"enabled",
"prefix"
)};
`, ne = N(U)``, ae = Z((e, d) => {
const {
disabled: j,
readOnly: C,
// debounceTime = 0,
prefix: f,
suffix: b,
decimalSeparator: a = ",",
decimalScale: r = 2,
allowNegative: E = !0,
// //----------------
onKeyDown: P = () => {
},
onBlur: $ = () => {
},
onFocus: x = () => {
},
onChange: V = () => {
},
value: y,
//----------------
className: q = "",
style: G = {},
size: H = "small",
color: k = "primary",
onInputChange: z = () => {
},
allowNull: D = !0,
...J
} = e, p = ee(), [I, O] = W(!1), B = (i) => {
var t, u;
if (isNaN(+i)) {
if (D === !0 && (i == null || i === ""))
return "";
} else {
const o = (t = i == null ? void 0 : i.toString()) == null ? void 0 : t.split(".");
if (!(o != null && o.length) > 0)
return "0" + a + new Array(r + 1).join("0");
if ((o == null ? void 0 : o.length) === 1)
return o.at(0) + a + new Array(r + 1).join("0");
if ((o == null ? void 0 : o.length) > 1) {
let n = (u = o == null ? void 0 : o.at(1)) == null ? void 0 : u.toString();
if ((n == null ? void 0 : n.length) === r)
return o.at(0) + a + n;
if ((n == null ? void 0 : n.length) < r)
return o.at(0) + a + o.at(1) + new Array(r - n.length + 1).join("0");
if ((n == null ? void 0 : n.length) > r)
return o.at(0) + a + n.slice(0, r);
}
}
return "0" + a + new Array(r + 1).join("0");
}, K = B(y), [L, g] = W(K), l = _(K);
R(() => {
const i = B(y);
l.current = i, g(l.current);
}, [y]);
const M = (i) => {
O(!0), x == null || x(i);
}, Q = (i) => {
O(!1), $ == null || $(i);
}, X = (i) => {
var u, o;
let t = (u = l.current) == null ? void 0 : u.replace(a, "");
if (i.key === "Delete" || i.key === "Backspace")
if (+t != 0) {
t = t.slice(0, (t == null ? void 0 : t.length) - 1);
let n = t.slice(
0,
(t == null ? void 0 : t.length) - r
), s = t.slice((t == null ? void 0 : t.length) - r);
(n == null ? void 0 : n.length) === 0 ? n = "0" : n === "-" && +t != 0 ? n = "-0" : n === "-" && +t == 0 && (n = "0");
let h = [
n,
a,
s
].join("");
l.current = h, g(l.current);
} else +t == 0 && D === !0 && (l == null ? void 0 : l.current) !== "" && (l.current = "", g(l.current), T(i));
else if (i.key === "-" && E === !0 && +t != 0)
((o = l == null ? void 0 : l.current) == null ? void 0 : o.slice(1)) === "-" ? l.current = l.current.slice(1, l.current.length) : l.current = "-" + l.current, g(l.current);
else if (!isNaN(i.key)) {
(t == null ? void 0 : t.length) === 0 ? t = "0" + new Array(r).join("0") + i.key : t = t + i.key;
let n = t.slice(0, (t == null ? void 0 : t.length) - r), s = t.slice((t == null ? void 0 : t.length) - r);
(n == null ? void 0 : n.length) > 1 && (n = n.replace(/^0+/, ""), (n == null ? void 0 : n.length) === 0 && (n = "0"));
let h = [
n,
a,
s
].join("");
l.current = h, g(l.current);
}
P(i);
}, T = (i) => {
var s, h;
if ((l == null ? void 0 : l.current) === "") {
i.target.value = "", z(i, null), V(i, null);
return;
}
let t = (s = l == null ? void 0 : l.current) == null ? void 0 : s.split(a), u = +(t == null ? void 0 : t.at(0)), o = ((h = t == null ? void 0 : t.at(1)) == null ? void 0 : h.length) > 0 ? `0.${t == null ? void 0 : t.at(1)}` : 0, n = u + +o;
i.target.value = n, z(i, n), V(i, n);
};
return /* @__PURE__ */ Y(
te,
{
style: G,
className: q,
theme: p,
color: k,
size: H,
prefix: f,
suffix: b,
focused: I,
disabled: j,
readOnly: C,
children: [
f && /* @__PURE__ */ w(
U,
{
theme: p,
color: k,
focused: I,
className: "lnc-input-prefix",
children: f
}
),
/* @__PURE__ */ w(
"input",
{
ref: d,
type: "text",
...J,
onKeyDown: X,
onBlur: Q,
value: L,
className: "lnc-ui-decimal-v2-input",
onFocus: M,
disabled: j || C,
onChange: (i) => {
T(i);
}
}
),
b && /* @__PURE__ */ w(
ne,
{
theme: p,
color: k,
focused: I,
className: "lnc-input-suffix",
children: b
}
)
]
}
);
});
export {
ae as default
};