@lanaco/lnc-react-ui
Version:
React component library
305 lines (297 loc) • 8.01 kB
JavaScript
import { jsxs as Y, jsx as N } from "react/jsx-runtime";
import { P as l } from "./index-S5Cd7WrG.js";
import { forwardRef as Z, useState as F, useRef as _, useEffect as v } from "react";
import { n as k } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { d as m, b as u, a as R, e as A, h as P, c as ee } from "./utils-DtRLzzTZ.js";
import { u as te } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const ne = k.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) => u(
e.theme,
"Input",
e.color,
"enabled",
"background"
)};
border: 1px solid
${(e) => u(
e.theme,
"Input",
e.focused === !0 ? "primary" : e.color,
"enabled",
"border"
)};
border-radius: ${(e) => R(e.theme, "regular")};
${(e) => e.focused === !0 && e.readOnly !== !0 ? A(e.theme) : ""}
${(e) => e.isDisabled === !0 ? P(e.theme) : ""}
${(e) => e.isDisabled === !0 ? "border: 1px solid " + u(
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) => ee(e.theme, "Input", e.size, "enabled")}
min-height: ${(e) => m(e.theme, e.size)};
max-height: ${(e) => m(e.theme, e.size)};
color: ${(e) => u(
e.theme,
"Input",
e.focused === !0 ? "primary" : e.color,
"enabled",
"text"
)};
caret-color: ${(e) => u(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) => P(e.theme)}
background: none;
}
& input:read-only {
cursor: default;
}
& input::placeholder {
color: ${(e) => u(
e.theme,
"Input",
e.color,
"enabled",
"placeholder"
)};
}
`, W = k.span`
padding: 0 12px;
color: ${(e) => u(
e.theme,
"Input",
e.focused === !0 ? "primary" : e.color,
"enabled",
"prefix"
)};
`, ie = k(W)``, oe = Z((e, U) => {
const {
disabled: I,
readOnly: j,
// debounceTime = 0,
prefix: f,
suffix: p,
decimalSeparator: c = ",",
decimalScale: a = 2,
allowNegative: E = !0,
// //----------------
onKeyDown: G = () => {
},
onBlur: y = () => {
},
onFocus: b = () => {
},
onChange: O = () => {
},
value: x,
//----------------
className: H = "",
style: S = {},
size: q = "small",
color: $ = "primary",
onInputChange: V = () => {
},
allowNull: z = !0,
...J
} = e, w = te(), [C, D] = F(!1), T = (i) => {
var t, s;
if (isNaN(+i)) {
if (z === !0 && (i == null || i === ""))
return "";
} else {
const r = (t = i == null ? void 0 : i.toString()) == null ? void 0 : t.split(".");
if (!(r != null && r.length) > 0)
return "0" + c + new Array(a + 1).join("0");
if ((r == null ? void 0 : r.length) === 1)
return r.at(0) + c + new Array(a + 1).join("0");
if ((r == null ? void 0 : r.length) > 1) {
let n = (s = r == null ? void 0 : r.at(1)) == null ? void 0 : s.toString();
if ((n == null ? void 0 : n.length) === a)
return r.at(0) + c + n;
if ((n == null ? void 0 : n.length) < a)
return r.at(0) + c + r.at(1) + new Array(a - n.length + 1).join("0");
if ((n == null ? void 0 : n.length) > a)
return r.at(0) + c + n.slice(0, a);
}
}
return "0" + c + new Array(a + 1).join("0");
}, B = T(x), [L, g] = F(B), o = _(B);
v(() => {
const i = T(x);
o.current = i, g(o.current);
}, [x]);
const M = (i) => {
D(!0), b == null || b(i);
}, Q = (i) => {
D(!1), y == null || y(i);
}, X = (i) => {
var s, r;
let t = (s = o.current) == null ? void 0 : s.replace(c, "");
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) - a
), d = t.slice((t == null ? void 0 : t.length) - a);
(n == null ? void 0 : n.length) === 0 ? n = "0" : n === "-" && +t != 0 ? n = "-0" : n === "-" && +t == 0 && (n = "0");
let h = [
n,
c,
d
].join("");
o.current = h, g(o.current);
} else +t == 0 && z === !0 && (o == null ? void 0 : o.current) !== "" && (o.current = "", g(o.current), K(i));
else if (i.key === "-" && E === !0 && +t != 0)
((r = o == null ? void 0 : o.current) == null ? void 0 : r.slice(1)) === "-" ? o.current = o.current.slice(1, o.current.length) : o.current = "-" + o.current, g(o.current);
else if (!isNaN(i.key)) {
(t == null ? void 0 : t.length) === 0 ? t = "0" + new Array(a).join("0") + i.key : t = t + i.key;
let n = t.slice(0, (t == null ? void 0 : t.length) - a), d = t.slice((t == null ? void 0 : t.length) - a);
(n == null ? void 0 : n.length) > 1 && (n = n.replace(/^0+/, ""), (n == null ? void 0 : n.length) === 0 && (n = "0"));
let h = [
n,
c,
d
].join("");
o.current = h, g(o.current);
}
G(i);
}, K = (i) => {
var d, h;
if ((o == null ? void 0 : o.current) === "") {
i.target.value = "", V(i, null), O(i, null);
return;
}
let t = (d = o == null ? void 0 : o.current) == null ? void 0 : d.split(c), s = +(t == null ? void 0 : t.at(0)), r = ((h = t == null ? void 0 : t.at(1)) == null ? void 0 : h.length) > 0 ? `0.${t == null ? void 0 : t.at(1)}` : 0, n = s + +r;
i.target.value = n, V(i, n), O(i, n);
};
return /* @__PURE__ */ Y(
ne,
{
style: S,
className: H,
theme: w,
color: $,
size: q,
prefix: f,
suffix: p,
focused: C,
disabled: I,
readOnly: j,
children: [
f && /* @__PURE__ */ N(
W,
{
theme: w,
color: $,
focused: C,
className: "lnc-input-prefix",
children: f
}
),
/* @__PURE__ */ N(
"input",
{
ref: U,
type: "text",
...J,
onKeyDown: X,
onBlur: Q,
value: L,
className: "lnc-ui-decimal-v2-input",
onFocus: M,
disabled: I || j,
onChange: (i) => {
console.log("CHG", i), K(i);
}
}
),
p && /* @__PURE__ */ N(
ie,
{
theme: w,
color: $,
focused: C,
className: "lnc-input-suffix",
children: p
}
)
]
}
);
});
oe.propTypes = {
id: l.string,
value: l.any,
defaultValue: l.any,
disabled: l.bool,
readOnly: l.bool,
debounceTime: l.number,
/**
* Reserved space before input. Intented to be used with plain text or `Icon` component.
*/
prefix: l.oneOfType([l.string, l.element]),
/**
* Reserved space after input. Intented to be used with plain text or `Icon` component.
*/
suffix: l.oneOfType([l.string, l.element]),
thousandSeparator: l.oneOf([".", ",", " "]),
decimalSeparator: l.oneOf([".", ","]),
decimalScale: l.number,
fixedDecimalScale: l.bool,
allowNegative: l.bool,
//----------------
/**
* `(event, value) => void`
*/
onChange: l.func,
/**
* `(event, value) => void`
*/
onInputChange: l.func,
/**
* `(event) => void`
*/
onBlur: l.func,
/**
* `(event) => void`
*/
onFocus: l.func,
/**
* `(event) => void`
*/
onKeyDown: l.func,
//----------------
className: l.string,
style: l.object,
size: l.oneOf(["small", "medium", "large"]),
color: l.oneOf([
"primary",
"secondary",
"success",
"danger",
"warning",
"information",
"neutral",
"gray"
])
};
export {
oe as default
};