@lanaco/lnc-react-ui
Version:
React component library
302 lines (299 loc) • 8.56 kB
JavaScript
import { jsx as c, Fragment as P, jsxs as W } from "react/jsx-runtime";
import { useState as q, useRef as g, useEffect as N, createElement as J, forwardRef as Q, useImperativeHandle as U } from "react";
import { d as M, r as k, j as x } from "./utils-BUdHa0nB.js";
import X from "./Table.js";
import { s as _ } from "./emotion-styled.browser.esm-DfbrHHed.js";
import j from "./TextInput.js";
import Y from "./NumberInput.js";
import Z from "./DecimalInput.js";
import ee from "./CheckBoxInput.js";
import te from "./Dropdown.js";
import re from "./DecimalInputV2.js";
import { u as oe } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const E = {
BOOLEAN: "BOOLEAN",
STRING: "STRING",
INTEGER: "INTEGER",
DECIMAL: "DECIMAL",
DECIMAL2: "DECIMAL2",
DATE: "DATE",
SELECT: "SELECT"
}, ae = _.td`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: ${(r) => r.width};
padding: ${(r) => r.focused && !r.isBoolean ? "0.5rem 0.5rem 0.5rem 0.7rem" : "0.5rem 0.5rem 0.5rem 1.5rem"};
${(r) => r.bgColor}
${(r) => M(r.theme, "TableCell", r.size, "enabled")};
`, se = _.div`
${(r) => M(
r.theme,
"TableSpecialLastRow",
r.size,
"enabled"
)};
padding: ${(r) => r.hasRender ? "0" : "9.5px 6px 9.5px 0"};
cursor: ${(r) => r.tabIndex !== -1 ? "pointer" : "auto"};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:focus {
outline: none;
}
`, $ = (r) => {
const [i, A] = q(!1);
var n = g(), w = g(), v = g(!0);
const {
Column: e = {},
ColumnsToRender: u,
RowData: a = {},
Index: h = 0,
RowIndex: d,
EnableSelection: D = !1,
TabIndexOffset: R = 100,
onFocusChanged: F,
onDiscard: O,
onMount: y,
//----------------
onChange: t,
//----------------
className: s = "",
size: f = "small",
color: C = "primary"
} = r, p = oe(), L = {
className: s,
size: f,
color: C,
theme: p
};
N(() => {
y(d, h, w);
}, []), N(() => {
i || y(d, h, w);
}, [i]), N(() => {
i && n && n.current && n.current.focus();
}, [i]);
const G = () => e && e.width ? e.width + "%" : "auto", B = () => {
if (e.editable !== !0) return -1;
var o = u.filter((b) => b.editable), m = o.find((b) => b.id === e.id);
return R + d * o.length + o.indexOf(m);
}, I = (o, m) => {
F(o, m, d, h), m || A(m);
}, S = (o) => {
o.key === "Escape" && (v.current = !1, n.current.blur(), v.current = !0, O(o, d, h, a));
}, V = () => {
var o = null, m = (l, H) => {
t(l, H, d, h, e, a);
}, b = (l) => {
t(null, l, d, h, e, a);
}, T = {
...L,
debounceTime: 0,
...e.inputProps,
value: e != null && e.objectAccessor ? a[e.accessor][e == null ? void 0 : e.objectAccessor] : a[e.accessor],
defaultChecked: e != null && e.objectAccessor ? a[e.accessor][e == null ? void 0 : e.objectAccessor] : a[e.accessor],
focused: i,
onChange: m,
onBlur: (l) => I(l, !1),
onFocus: (l) => I(l, !0),
onKeyDown: (l) => S(l),
tabIndex: B()
};
switch (e.inputType) {
case E.STRING:
o = /* @__PURE__ */ c(j, { ...T, ref: n });
break;
case E.INTEGER:
o = /* @__PURE__ */ c(Y, { ...T, ref: n });
break;
case E.DECIMAL:
o = /* @__PURE__ */ c(Z, { ...T, ref: n });
break;
case E.DECIMAL2:
o = /* @__PURE__ */ c(re, { ...T, ref: n });
break;
case E.DATE:
o = /* @__PURE__ */ c(j, { ...T, ref: n });
break;
case E.BOOLEAN:
o = /* @__PURE__ */ c(ee, { ...T, ref: n });
break;
case E.SELECT:
o = /* @__PURE__ */ c(
te,
{
...T,
value: e.inputProps.options.find(
(l) => l.value === (e == null ? void 0 : e.objectAccessor) ? a[e.accessor][e == null ? void 0 : e.objectAccessor] : a[e.accessor]
),
onChange: b,
ref: n
}
);
break;
default:
o = /* @__PURE__ */ c(j, { ...T, ref: n });
}
return o;
}, z = (o) => {
v.current === !0 ? I(o, !1) : A(!1);
}, K = () => {
var o = V();
if (e.editable === !0 && e.editComponent) {
var m = {};
e.inputType === E.SELECT && (m = {
items: e.selectItems,
mapNameTo: e.selectProps.mapNameTo,
mapValueTo: e.selectProps.mapValueTo
}), o = /* @__PURE__ */ c(
e.editComponent,
{
ref: n,
tabIndex: B(),
value: e != null && e.objectAccessor ? a[e.accessor][e == null ? void 0 : e.objectAccessor] : a[e.accessor],
onChange: (b, T, l) => {
t(b, T, d, h, e, a, l);
},
focused: i,
onBlur: z,
onFocus: (b) => I(b, !0),
onKeyDown: (b) => S(b),
...m
}
);
}
if (e.editable === !0 && i) return o;
if (!i || e.editable !== !0)
return /* @__PURE__ */ c(
se,
{
ref: w,
tabIndex: B(),
onFocus: () => A(!0),
hasRender: !!e.readonlyComponent,
...L,
children: e.readonlyComponent ? /* @__PURE__ */ c(
e.readonlyComponent,
{
rowData: a,
value: e != null && e.objectAccessor ? a[e.accessor][e == null ? void 0 : e.objectAccessor] : a[e.accessor],
fullValue: a[e.accessor],
disabled: !0
}
) : e != null && e.objectAccessor ? a[e.accessor][e == null ? void 0 : e.objectAccessor] : a[e.accessor]
}
);
};
return /* @__PURE__ */ J(
ae,
{
"data-rowindex": d,
...L,
selection: D,
width: G(),
key: h,
focused: i,
isBoolean: e.inputType === E.BOOLEAN
},
K()
);
};
$.displayName = "TABLE_CELL";
const ne = Q((r, i) => {
var {
Data: A = [],
onRowFocusChange: n = () => {
},
onDiscard: w = () => {
},
onInputChange: v = () => {
}
} = r;
const e = g({
FocusedCell: null,
PreviousFocusedCell: null
}), u = g([]), a = g(null), h = g();
U(
i,
() => ({
focusFirstCellOfLastRow: () => {
a.current && a.current.focus();
},
focusLastActiveCell: () => {
try {
var t = u.current.find(
(s) => s.row === e.current.PreviousFocusedCell.row && s.cell === e.current.PreviousFocusedCell.cell
);
t.ref && t.ref.focus();
} catch {
}
}
}),
[
r
// Update functions when certain state changes
]
);
const d = (t, s, f, C, p, L) => {
v && v(t, s, f, C, p, L);
}, D = (t, s, f, C, p) => {
s && (e.current = {
...e.current,
FocusedCell: {
row: f,
cell: C,
ref: p
}
}), s || (e.current = {
PreviousFocusedCell: e.current.FocusedCell,
FocusedCell: null
}, R(t, f));
}, R = (t, s) => {
(t.relatedTarget === null || t.relatedTarget.closest("tbody") === null || !t.relatedTarget.closest("tbody").hasAttribute("data-tbody")) && n(t, s, -1), t.relatedTarget && t.relatedTarget.closest("tbody") && t.relatedTarget.closest("tbody").hasAttribute("data-tbody") && parseInt(t.relatedTarget.closest("td").getAttribute("data-rowindex")) !== s && n(
t,
s,
parseInt(t.relatedTarget.closest("td").getAttribute("data-rowindex"))
);
}, F = (t, s, f) => {
if (t === A.length - 1 && s === 0 && (a.current = f.current), u.current.length === 0 && (u.current = [
{ row: t, cell: s, ref: f.current }
]), u.current.length > 0 && u.current.find(
(p) => p.row === t && p.cell === s
)) {
var C = u.current.find(
(p) => p.row === t && p.cell === s
);
C.ref = f.current;
} else u.current.length > 0 && (u.current = [
...u.current,
{ row: t, cell: s, ref: f.current }
]);
}, O = () => k(
x("TABLE_SPECIAL_LAST_ROW", r.children),
{
TabIndexOffset: 50
}
) || /* @__PURE__ */ c(P, {}), y = () => {
var t = {
TabIndexOffset: 50,
onFocusChanged: D,
onChange: d,
onDiscard: w,
onMount: F
};
return k(
x("TABLE_CELL", r.children),
t
) || /* @__PURE__ */ c($, { ...t });
};
return /* @__PURE__ */ c(P, { children: /* @__PURE__ */ W(X, { ref: h, ...r, Data: A, VisibilityPattern: null, children: [
r.children,
y(),
O()
] }) });
});
ne.displayName = "EDITABLE_TABLE";
export {
ne as default
};