@lanaco/lnc-react-ui
Version:
React component library
245 lines (244 loc) • 6.58 kB
JavaScript
import { jsxs as oe, jsx as C } from "react/jsx-runtime";
import { forwardRef as le, useState as te, useRef as ce } from "react";
import { P as e } from "./index-S5Cd7WrG.js";
import { n as re } from "./emotion-styled.browser.esm-CjCaF13H.js";
import ae from "./ActionsToolbar.js";
import ie from "./Pagination.js";
import { r as g, i as w } from "./utils-DtRLzzTZ.js";
import se from "./Table.js";
const me = re.div`
& .table-view-pagination-lnc {
padding: 0 0.625rem;
}
& .table-view-toolbar-lnc {
margin: 0 0.625rem;
}
`, z = le((D, E) => {
const {
__TYPE__: ue = "TABLE_VIEW",
goToPreviousView: de,
tableProps: n = {},
paginationProps: o = {},
actionsToolbarProps: T = {},
rowsSingleSelect: S = !0,
rowsMultiSelect: b = !1,
loading: be = !1,
showCreate: N = !0,
enableCreate: O = !0,
enableDetails: he = !0,
showEdit: _,
enableEditOnSelection: A,
showDelete: v = !0,
enableDeleteOnSelection: k = !0,
showCopy: I = !0,
enableCopyOnSelection: j = !0,
customActions: x,
pagination: L = !0,
readOnly: f = !1,
actionsDropdownZIndex: V = null,
actionsDropdownPlacement: B = null,
actionDropdownProps: F,
//----------------
onCreate: M = () => {
},
onEdit: W = () => {
},
onDelete: Y = () => {
},
onDetails: Z = () => {
},
onCopy: p = () => {
},
onFilter: ye = () => {
},
onSort: Ce = () => {
},
onPageChange: G = () => {
},
onEmptyRowsSelection: ge = () => {
},
//------------------
className: we = "",
style: Se = {},
color: s = "primary",
size: m = "small",
children: u,
onChangeRowsSelection: d = () => {
},
...q
} = D, l = {
...T,
showCreate: N,
enableCreate: O,
showCopy: I,
enableCopyOnSelection: j,
showEdit: _,
enableEditOnSelection: A,
showDelete: v,
enableDeleteOnSelection: k,
customActions: x,
readOnly: f
}, [a, h] = te([]), t = ce([]), H = (c, r) => {
var i;
r ? (b || S) && (t.current = b ? [...t.current, c] : [c], d(t == null ? void 0 : t.current), h(t == null ? void 0 : t.current)) : (t.current = b ? (i = t == null ? void 0 : t.current) == null ? void 0 : i.filter((y) => y != c) : [], d == null || d(t == null ? void 0 : t.current), h(t == null ? void 0 : t.current));
}, J = (c, r) => {
var i, y;
((i = c.target) == null ? void 0 : i.type) !== "checkbox" && ((y = c.target) == null ? void 0 : y.className) !== "checkmark" && (n != null && n.onRowClick && n.onRowClick(c, r), K(r, c));
}, K = (c, r) => {
Z(c, r);
}, Q = (c) => {
M(c);
}, U = (c) => {
p(a, c);
}, X = (c) => {
W(a, c), t.current = [], h([]), d([]);
}, $ = (c) => {
Y(a, c), t.current = [], h([]), d([]);
}, R = (c) => {
G(c);
}, P = () => g(
w("ACTIONS_TOOLBAR", u),
{
...l,
size: l != null && l.size ? l.size : m,
color: l != null && l.color ? l.color : s,
className: "table-view-toolbar-lnc " + (l == null ? void 0 : l.className)
},
u
) || /* @__PURE__ */ C(
ae,
{
...l,
className: "table-view-toolbar-lnc " + (l == null ? void 0 : l.className),
size: l != null && l.size ? l.size : m,
color: l != null && l.color ? l.color : s,
selectedRowsLength: a != null && a.length ? a.length : 0,
onCreate: Q,
onCopy: U,
onEdit: X,
onDelete: $,
actionsDropdownZIndex: V,
actionDropdownProps: F,
actionsDropdownPlacement: B,
selectedRows: t == null ? void 0 : t.current
}
), ee = () => g(
w("TABLE", u),
{
...n,
size: n != null && n.size ? n.size : m,
color: n != null && n.color ? n.color : s,
className: "table-view-pagination-lnc " + (n == null ? void 0 : n.className)
},
u
) || /* @__PURE__ */ C(
se,
{
size: n != null && n.size ? n.size : m,
color: n != null && n.color ? n.color : s,
EnableSelection: (S || b) && f == !1,
onSelectRow: (c, r, i) => H(r, !i),
SelectedData: a,
onRowClick: (c, r) => J(c, r),
...n
}
), ne = () => g(
w("PAGINATION", u),
{
...o,
size: o != null && o.size ? o.size : m,
color: o != null && o.color ? o.color : s,
className: "table-view-pagination-lnc " + (o == null ? void 0 : o.className)
},
u
) || /* @__PURE__ */ C(
ie,
{
...o,
size: o != null && o.size ? o.size : m,
color: o != null && o.color ? o.color : s,
className: "table-view-pagination-lnc " + (o == null ? void 0 : o.className),
onPageChange: R
}
);
return /* @__PURE__ */ oe(me, { ref: E, ...q, children: [
P(),
ee(),
L == !0 && ne()
] });
});
z.propTypes = {
__TYPE__: e.string,
tableProps: e.object,
actionsToolbarProps: e.object,
paginationProps: e.object,
rowsSingleSelect: e.bool,
rowsMultiSelect: e.bool,
loading: e.bool,
showCreate: e.bool,
actionsDropdownZIndex: e.any,
actionsDropdownPlacement: e.any,
/**
* Enable create
*/
enableCreate: e.bool,
/**
* Enable details on row click
*/
enableDetails: e.bool,
showEdit: e.bool,
/**
* Enable edit when one row is selected
*/
enableEditOnSelection: e.bool,
showDelete: e.bool,
/**
* Enable delete when one row is selected
*/
enableDeleteOnSelection: e.bool,
showCopy: e.bool,
/**
* Enable copy when one row is selected
*/
enableCopyOnSelection: e.bool,
/**
* Actions that will be shown in toolbar with existing actions
* type of [{name: `<string>`, show: `<bool>`, enable: `<bool>`, enableOnSelection: `<bool>`, onAction: `<func>`, customAction: `<elemet>`}, ...]
*/
customActions: e.array,
/**
* Determines whether will pagination be shown in view
*/
pagination: e.bool,
/**
* If `readOnly={true}` actions Delete, Edit and Copy won't be shown. Row Selction will be disabled.
*/
readOnly: e.bool,
//-------------------------------------------------------------
onCreate: e.func,
onEdit: e.func,
onDelete: e.func,
onDetails: e.func,
onCopy: e.func,
onFilter: e.func,
onSort: e.func,
onPageChange: e.func,
//------------------------------------------------------------
className: e.string,
style: e.object,
size: e.oneOf(["small", "medium", "large"]),
color: e.oneOf([
"primary",
"secondary",
"success",
"danger",
"warning",
"information",
"neutral",
"gray"
])
};
z.displayName = "TABLE_VIEW";
export {
z as default
};