@lanaco/lnc-react-ui
Version:
React component library
333 lines (328 loc) • 8.59 kB
JavaScript
import { jsx as O } from "react/jsx-runtime";
import { P as o } from "./index-S5Cd7WrG.js";
import * as x from "react";
import W, { forwardRef as Y, useState as F, useEffect as $, useCallback as q } from "react";
import { d as D } from "./index-CkWvbrVT.js";
import { n as X } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { c as Z, d as J, b as C, a as K, e as Q, h as ee } from "./utils-DtRLzzTZ.js";
import { _ as te, u as re } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { _ as ne } from "./objectWithoutPropertiesLoose-DhwSMsjf.js";
import { i as ae } from "./use-isomorphic-layout-effect.browser.esm-DERp5kr6.js";
const oe = X.div`
& textarea {
${(e) => Z(e.theme, "Input", e.size, "enabled")}
min-height: ${(e) => J(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,
e.disabled === !0 ? "disabled" : "enabled",
"border"
)};
border-radius: ${(e) => K(e.theme, "regular")};
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")};
overflow: ${(e) => e.collapseOnBlur && e.focused === !1 ? "hidden" : "auto"};
transition: height 0.2s ease-out;
padding: 0.563rem 0.75rem;
min-width: 100%;
max-width: 100%;
}
& textarea::placeholder {
color: ${(e) => C(
e.theme,
"Input",
e.color,
"enabled",
"placeholder"
)};
}
& textarea:read-only {
cursor: default;
}
& textarea:focus {
${(e) => e.readOnly !== !0 ? Q(e.theme) : "outline: none"}
}
& textarea:disabled {
${(e) => ee(e.theme)}
}
`;
var ie = function(t) {
var n = W.useRef(t);
return ae(function() {
n.current = t;
}), n;
}, k = function(t, n) {
if (typeof t == "function") {
t(n);
return;
}
t.current = n;
}, de = function(t, n) {
var r = W.useRef();
return W.useCallback(function(a) {
t.current = a, r.current && k(r.current, null), r.current = n, n && k(n, a);
}, [n]);
}, M = {
"min-height": "0",
"max-height": "none",
height: "0",
visibility: "hidden",
overflow: "hidden",
position: "absolute",
"z-index": "-1000",
top: "0",
right: "0",
display: "block"
}, ue = function(t) {
Object.keys(M).forEach(function(n) {
t.style.setProperty(n, M[n], "important");
});
}, V = ue, d = null, A = function(t, n) {
var r = t.scrollHeight;
return n.sizingStyle.boxSizing === "border-box" ? r + n.borderSize : r - n.paddingSize;
};
function se(e, t, n, r) {
n === void 0 && (n = 1), r === void 0 && (r = 1 / 0), d || (d = document.createElement("textarea"), d.setAttribute("tabindex", "-1"), d.setAttribute("aria-hidden", "true"), V(d)), d.parentNode === null && document.body.appendChild(d);
var a = e.paddingSize, m = e.borderSize, s = e.sizingStyle, S = s.boxSizing;
Object.keys(s).forEach(function(f) {
var b = f;
d.style[b] = s[b];
}), V(d), d.value = t;
var i = A(d, e);
d.value = t, i = A(d, e), d.value = "x";
var u = d.scrollHeight - a, l = u * n;
S === "border-box" && (l = l + a + m), i = Math.max(l, i);
var c = u * r;
return S === "border-box" && (c = c + a + m), i = Math.min(c, i), [i, u];
}
var _ = function() {
}, le = function(t, n) {
return t.reduce(function(r, a) {
return r[a] = n[a], r;
}, {});
}, ce = [
"borderBottomWidth",
"borderLeftWidth",
"borderRightWidth",
"borderTopWidth",
"boxSizing",
"fontFamily",
"fontSize",
"fontStyle",
"fontWeight",
"letterSpacing",
"lineHeight",
"paddingBottom",
"paddingLeft",
"paddingRight",
"paddingTop",
// non-standard
"tabSize",
"textIndent",
// non-standard
"textRendering",
"textTransform",
"width",
"wordBreak",
"wordSpacing",
"scrollbarGutter"
], fe = !!document.documentElement.currentStyle, he = function(t) {
var n = window.getComputedStyle(t);
if (n === null)
return null;
var r = le(ce, n), a = r.boxSizing;
if (a === "")
return null;
fe && a === "border-box" && (r.width = parseFloat(r.width) + parseFloat(r.borderRightWidth) + parseFloat(r.borderLeftWidth) + parseFloat(r.paddingRight) + parseFloat(r.paddingLeft) + "px");
var m = parseFloat(r.paddingBottom) + parseFloat(r.paddingTop), s = parseFloat(r.borderBottomWidth) + parseFloat(r.borderTopWidth);
return {
sizingStyle: r,
paddingSize: m,
borderSize: s
};
}, ge = he;
function B(e, t, n) {
var r = ie(n);
x.useLayoutEffect(function() {
var a = function(s) {
return r.current(s);
};
if (e)
return e.addEventListener(t, a), function() {
return e.removeEventListener(t, a);
};
}, []);
}
var me = function(t, n) {
B(document.body, "reset", function(r) {
t.current.form === r.target && n(r);
});
}, be = function(t) {
B(window, "resize", t);
}, pe = function(t) {
B(document.fonts, "loadingdone", t);
}, ve = ["cacheMeasurements", "maxRows", "minRows", "onChange", "onHeightChange"], xe = function(t, n) {
var r = t.cacheMeasurements, a = t.maxRows, m = t.minRows, s = t.onChange, S = s === void 0 ? _ : s, i = t.onHeightChange, u = i === void 0 ? _ : i, l = ne(t, ve), c = l.value !== void 0, f = x.useRef(null), b = de(f, n), L = x.useRef(0), R = x.useRef(), v = function() {
var h = f.current, y = r && R.current ? R.current : ge(h);
if (y) {
R.current = y;
var T = se(y, h.value || h.placeholder || "x", m, a), p = T[0], H = T[1];
L.current !== p && (L.current = p, h.style.setProperty("height", p + "px", "important"), u(p, {
rowHeight: H
}));
}
}, I = function(h) {
c || v(), S(h);
};
return x.useLayoutEffect(v), me(f, function() {
if (!c) {
var w = f.current.value;
requestAnimationFrame(function() {
var h = f.current;
h && w !== h.value && v();
});
}
}), be(v), pe(v), /* @__PURE__ */ x.createElement("textarea", te({}, l, {
onChange: I,
ref: b
}));
}, ye = /* @__PURE__ */ x.forwardRef(xe);
const Se = Y((e, t) => {
const {
disabled: n,
readOnly: r,
value: a,
defaultValue: m,
debounceTime: s = 0,
type: S = "textarea",
collapseOnBlur: i = !1,
minRows: u = 0,
maxRows: l,
//----------------
onChange: c,
onBlur: f,
onFocus: b,
//----------------
className: L = "",
style: R = {},
size: v = "small",
color: I = "primary",
...w
} = e, [h, y] = F(a || m || ""), T = re(), [p, H] = F(!1), [N, j] = F(u), [P, z] = F(
i ? u : l
);
$(() => {
a != null && y(a);
}, [a]), $(() => {
j(u), i && p === !1 && z(u);
}, [u, l]), $(() => {
z(i ? p === !0 ? l : u : l);
}, [i]);
const U = q(
D((g, E) => G(g, E), s),
[c]
), G = (g, E) => {
c && (c == null || c(g, E));
};
return /* @__PURE__ */ O(
oe,
{
style: R,
className: L,
theme: T,
color: I,
size: v,
focused: p,
disabled: n,
readOnly: r,
collapseOnBlur: i,
children: /* @__PURE__ */ O(
ye,
{
ref: t,
disabled: n,
value: h,
readOnly: r,
minRows: N,
maxRows: P,
onChange: (g) => {
y(g.target.value), U(g, g.target.value);
},
onFocus: (g) => {
H(!0), i && z(l), b == null || b(g);
},
onBlur: (g) => {
H(!1), i && z(u), f == null || f(g);
},
...w
}
)
}
);
});
Se.propTypes = {
id: o.string,
defaultValue: o.string,
value: o.string,
disabled: o.bool,
readOnly: o.bool,
debounceTime: o.number,
placeholder: o.string,
tabIndex: o.number,
/**
* Defines whether the textarea will collapse to its original size after it loses focus.
*/
collapseOnBlur: o.bool,
/**
* Minimum number of rows to show.
*/
minRows: o.number,
/**
* Maximum number of rows to be shown before scroller appears.
*/
maxRows: o.number,
/**
* `(event, value) => void`
*/
onChange: o.func,
/**
* `(event) => void`
*/
onBlur: o.func,
/**
* `(event) => void`
*/
onFocus: o.func,
//----------------
className: o.string,
style: o.object,
size: o.oneOf(["small", "medium", "large"]),
color: o.oneOf([
"primary",
"secondary",
"success",
"danger",
"warning",
"information",
"neutral",
"gray"
])
};
export {
Se as default
};