@lanaco/lnc-react-ui
Version:
React component library
468 lines (465 loc) • 13 kB
JavaScript
import { jsx as l, Fragment as $, jsxs as U } from "react/jsx-runtime";
import { useState as X, useRef as A, useEffect as F, createElement as Z, forwardRef as ee, useImperativeHandle as re } from "react";
import { P as r } from "./index-S5Cd7WrG.js";
import { c as z, r as G, i as V } from "./utils-DtRLzzTZ.js";
import te from "./Table.js";
import { n as Y } from "./emotion-styled.browser.esm-CjCaF13H.js";
import N from "./TextInput.js";
import oe from "./NumberInput.js";
import ne from "./DecimalInput.js";
import ae from "./CheckBoxInput.js";
import se from "./Dropdown.js";
import ce from "./DecimalInputV2.js";
import { u as le } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const h = {
BOOLEAN: "BOOLEAN",
STRING: "STRING",
INTEGER: "INTEGER",
DECIMAL: "DECIMAL",
DECIMAL2: "DECIMAL2",
DATE: "DATE",
SELECT: "SELECT"
}, ie = Y.td`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: ${(o) => o.width};
padding: ${(o) => o.focused && !o.isBoolean ? "0.5rem 0.5rem 0.5rem 0.7rem" : "0.5rem 0.5rem 0.5rem 1.5rem"};
${(o) => o.bgColor}
${(o) => z(o.theme, "TableCell", o.size, "enabled")};
`, ue = Y.div`
${(o) => z(
o.theme,
"TableSpecialLastRow",
o.size,
"enabled"
)};
padding: ${(o) => o.hasRender ? "0" : "9.5px 6px 9.5px 0"};
cursor: ${(o) => o.tabIndex !== -1 ? "pointer" : "auto"};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:focus {
outline: none;
}
`, x = (o) => {
const [u, L] = X(!1);
var c = A(), w = A(), y = A(!0);
const {
__TYPE__: I = "TABLE_CELL",
Column: e = {},
ColumnsToRender: d,
RowData: a = {},
Index: T = 0,
RowIndex: f,
EnableSelection: D = !1,
TabIndexOffset: O = 100,
onFocusChanged: R,
RowIdentifier: k,
onDiscard: S,
onMount: t,
//----------------
onChange: s,
//----------------
className: b = "",
size: C = "small",
color: p = "primary"
} = o, j = le(), P = {
className: b,
size: C,
color: p,
theme: j
};
F(() => {
t(f, T, w);
}, []), F(() => {
u || t(f, T, w);
}, [u]), F(() => {
u && c && c.current && c.current.focus();
}, [u]);
const H = () => e && e.width ? e.width + "%" : "auto", B = () => {
if (e.editable !== !0) return -1;
var n = d.filter((m) => m.editable), E = n.find((m) => m.id === e.id);
return O + f * n.length + n.indexOf(E);
}, v = (n, E) => {
R(n, E, f, T), E || L(E);
}, M = (n) => {
n.key === "Escape" && (y.current = !1, c.current.blur(), y.current = !0, S(n, f, T, a));
}, W = () => {
var n = null, E = (i, Q) => {
s(i, Q, f, T, e, a);
}, m = (i) => {
s(_, i, f, T, e, a);
}, g = {
...P,
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: u,
onChange: E,
onBlur: (i) => v(i, !1),
onFocus: (i) => v(i, !0),
onKeyDown: (i) => M(i),
tabIndex: B()
};
switch (e.inputType) {
case h.STRING:
n = /* @__PURE__ */ l(N, { ...g, ref: c });
break;
case h.INTEGER:
n = /* @__PURE__ */ l(oe, { ...g, ref: c });
break;
case h.DECIMAL:
n = /* @__PURE__ */ l(ne, { ...g, ref: c });
break;
case h.DECIMAL2:
n = /* @__PURE__ */ l(ce, { ...g, ref: c });
break;
case h.DATE:
n = /* @__PURE__ */ l(N, { ...g, ref: c });
break;
case h.BOOLEAN:
n = /* @__PURE__ */ l(ae, { ...g, ref: c });
break;
case h.SELECT:
n = /* @__PURE__ */ l(
se,
{
...g,
value: e.inputProps.options.find(
(i) => i.value === (e == null ? void 0 : e.objectAccessor) ? a[e.accessor][e == null ? void 0 : e.objectAccessor] : a[e.accessor]
),
onChange: m,
ref: c
}
);
break;
default:
n = /* @__PURE__ */ l(N, { ...g, ref: c });
}
return n;
}, q = (n) => {
y.current === !0 ? v(n, !1) : L(!1);
}, J = () => {
var n = W();
if (e.editable === !0 && e.editComponent) {
var E = {};
e.inputType === h.SELECT && (E = {
items: e.selectItems,
mapNameTo: e.selectProps.mapNameTo,
mapValueTo: e.selectProps.mapValueTo
}), n = /* @__PURE__ */ l(
e.editComponent,
{
ref: c,
tabIndex: B(),
value: e != null && e.objectAccessor ? a[e.accessor][e == null ? void 0 : e.objectAccessor] : a[e.accessor],
onChange: (m, g, i) => {
s(m, g, f, T, e, a, i);
},
focused: u,
onBlur: q,
onFocus: (m) => v(m, !0),
onKeyDown: (m) => M(m),
...E
}
);
}
if (e.editable === !0 && u) return n;
if (!u || e.editable !== !0)
return /* @__PURE__ */ l(
ue,
{
ref: w,
tabIndex: B(),
onFocus: () => L(!0),
hasRender: !!e.readonlyComponent,
...P,
children: e.readonlyComponent ? /* @__PURE__ */ l(
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__ */ Z(
ie,
{
"data-rowindex": f,
...P,
selection: D,
width: H(),
key: T,
focused: u,
isBoolean: e.inputType === h.BOOLEAN
},
J()
);
};
x.propTypes = {
__TYPE__: r.string,
//----------------------------------------
Column: r.object,
RowData: r.object,
Index: r.number,
EnableSelection: r.bool,
TabIndexOffset: r.number,
//----------------------------------------
className: r.string,
size: r.oneOf(["small", "medium", "large"]),
color: r.oneOf([
"primary",
"secondary",
"success",
"warning",
"danger",
"information",
"neutral",
"gray"
])
};
x.displayName = "TABLE_CELL";
const K = ee((o, u) => {
var {
__TYPE__: L = "EDITABLE_TABLE",
Data: c = [],
onRowFocusChange: w = () => {
},
onDiscard: y = () => {
},
onInputChange: I = () => {
}
} = o;
const e = A({
FocusedCell: null,
PreviousFocusedCell: null
}), d = A([]), a = A(null), T = A();
re(
u,
() => ({
focusFirstCellOfLastRow: () => {
a.current && a.current.focus();
},
focusLastActiveCell: () => {
try {
var t = d.current.find(
(s) => s.row === e.current.PreviousFocusedCell.row && s.cell === e.current.PreviousFocusedCell.cell
);
t.ref && t.ref.focus();
} catch {
}
}
}),
[
o
// Update functions when certain state changes
]
);
const f = (t, s, b, C, p, j) => {
I && I(t, s, b, C, p, j);
}, D = (t, s, b, C, p) => {
s && (e.current = {
...e.current,
FocusedCell: {
row: b,
cell: C,
ref: p
}
}), s || (e.current = {
PreviousFocusedCell: e.current.FocusedCell,
FocusedCell: null
}, O(t, b));
}, O = (t, s) => {
(t.relatedTarget === null || t.relatedTarget.closest("tbody") === null || !t.relatedTarget.closest("tbody").hasAttribute("data-tbody")) && w(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 && w(
t,
s,
parseInt(t.relatedTarget.closest("td").getAttribute("data-rowindex"))
);
}, R = (t, s, b) => {
if (t === c.length - 1 && s === 0 && (a.current = b.current), d.current.length === 0 && (d.current = [
{ row: t, cell: s, ref: b.current }
]), d.current.length > 0 && d.current.find(
(p) => p.row === t && p.cell === s
)) {
var C = d.current.find(
(p) => p.row === t && p.cell === s
);
C.ref = b.current;
} else d.current.length > 0 && (d.current = [
...d.current,
{ row: t, cell: s, ref: b.current }
]);
}, k = () => G(
V("TABLE_SPECIAL_LAST_ROW", o.children),
{
TabIndexOffset: 50
}
) || /* @__PURE__ */ l($, {}), S = () => {
var t = {
TabIndexOffset: 50,
onFocusChanged: D,
onChange: f,
onDiscard: y,
onMount: R
};
return G(
V("TABLE_CELL", o.children),
t
) || /* @__PURE__ */ l(x, { ...t });
};
return /* @__PURE__ */ l($, { children: /* @__PURE__ */ U(te, { ref: T, ...o, Data: c, VisibilityPattern: null, children: [
o.children,
S(),
k()
] }) });
});
K.propTypes = {
/**
* This property determines where the component is rendered.
* Should not be overridden!
*/
__TYPE__: r.string,
//----------------------------------------
/**
* Show a selection checkbox in the first cell of every row.
* Value of the checkbox is determined by the `SelectedData` property.
*/
EnableSelection: r.bool,
/**
* Show ordering arrows in header cells.
*/
EnableOrdering: r.bool,
/**
* Show a spinner with backdrop on top of the table when `Loading` is set to `true`.
*/
EnableLoader: r.bool,
/**
* Show a selection checkbox in the first cell of the table header.
* Value of the checkbox is determined by the `SelectedEntirePage` property.
*/
EnableSelectAll: r.bool,
//----------------------------------------
/**
* Specify the text that is shown when there are 0 rows in the `Data`.
*/
NoDataText: r.string,
/**
* Disables some events and actions when set to `true`. Also triggers the spinner if `EnableLoader` is set to `true`.
*/
Loading: r.bool,
/**
* Defines the table columns.
* @param id - Column identifier
* @param displayName - Text displayed in the header
* @param accessor - Access the property in `Data`
* @param width - Default column width (overridden by the VisibilityPattern)
* @param sortable - Can be sorted
*
*/
Columns: r.arrayOf(r.object),
/**
* Defines the data displayed in each row.
*/
Data: r.arrayOf(r.object),
/**
* Define the selected data.
* @param id - Column identifier (mandatory field)
*/
SelectedData: r.arrayOf(r.object),
/**
* Value of the `SelectAll` checkbox.
*/
SelectedEntirePage: r.bool,
/**
* Defines which field in a data object is the row identifier.
*/
RowIdentifier: r.string,
/**
* An object that defines the width and order of columns for different screen sizes.
* (`XS`,`S`,`M`,`L`,`XL`)
*/
VisibilityPattern: r.object,
/**
* Describe how the data is ordered.
* @param columnId - Column identifier, maps to the id on the Column object
*/
Ordering: r.object,
//----------------------------------------
/**
* Triggers when the focus is moved to another row or another component outside of the table
* @param event - event object
* @param currentRowIndex - index of the currently focused row
* @param nextRowIndex - index of the next focused row (-1 if the focuse moves otutside of the table rows)
*/
onRowFocusChange: () => {
},
/**
*
*/
onDiscard: () => {
},
/**
*
*/
onInputChange: () => {
},
//----------------------------------------
/**
* Triggered on header cell click.
* @param event - event object
* @param column - column definition
* @param ordering - updated ordering object, or undefined if ordering is not enabled or the column is not sortable
*/
onColumnClick: r.func,
/**
* Triggered on table row click.
* @param event - event object
* @param rowData - row data
*/
onRowClick: r.func,
/**
* Triggered on selection checkbox click.
* @param event - event object
* @param rowData - row data
* @param isSelected - the value of selection checkbox
*/
onSelectRow: r.func,
/**
* Triggered on select all checkbox click.
* @param event - event object
* @param isSelected - the value of select all checkbox
*/
onSelectAll: r.func,
//----------------------------------------
/**
* `className` applied to the component container.
*/
className: r.string,
/**
* Defines size of the component (padding, margin, font etc.).
*/
size: r.oneOf(["small", "medium", "large"]),
/**
* Defines the palette color for the component.
*/
color: r.oneOf([
"primary",
"secondary",
"success",
"error",
"warning",
"gray",
"white",
"neutral"
])
};
K.displayName = "EDITABLE_TABLE";
export {
K as default
};