@coko/client
Version:
Client side common code for coko apps
232 lines (227 loc) • 6.62 kB
JavaScript
import { noop as e, without as t } from "../../toolkit/funcs.js";
import { grid as n, th as r } from "../../toolkit/themeHelper.js";
import "../../toolkit/index.js";
import { Indicator as i } from "./Spin.js";
import a from "./Checkbox.js";
import o from "./Empty.js";
import s from "./Search.js";
import c from "./Select.js";
import l from "./Pagination.js";
import u from "./VisuallyHiddenElement.js";
import "react";
import d from "styled-components";
import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
import { List as h } from "antd";
import { DndContext as g, KeyboardSensor as _, PointerSensor as v, closestCenter as y, useSensor as b, useSensors as ee } from "@dnd-kit/core";
import { SortableContext as x, arrayMove as S, sortableKeyboardCoordinates as C, useSortable as w, verticalListSortingStrategy as te } from "@dnd-kit/sortable";
import { CSS as T } from "@dnd-kit/utilities";
//#region src/ui/common/List.tsx
var ne = d.div`
background-color: ${r("colorBackground")};
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
`, re = d.div`
flex-grow: 1;
overflow: auto;
`, E = d.div`
align-self: center;
max-width: 1170px;
padding: 0 ${n(2)};
width: 100%;
`, D = d.div`
border-bottom: 1px solid ${r("colorBorder")};
display: flex;
padding: ${n(2)};
`, ie = d.div`
align-items: center;
display: flex;
`, ae = d.div`
margin-left: auto;
`, oe = d(c)`
display: inline-block;
margin-left: ${n(2)};
width: 150px;
`, O = d.li`
align-items: center;
display: flex;
justify-content: stretch;
> div {
border: 2px solid
${({ $isDragging: e }) => e ? r("colorPrimary") : "transparent"};
&:focus {
border: 2px solid ${r("colorPrimary")};
}
}
`, k = d(h)`
flex-grow: 1;
overflow: auto;
.ant-spin-nested-loading {
height: 100%;
.ant-spin {
display: grid;
max-height: unset;
place-content: center;
}
}
`, A = d(i)`
transform: translateY(-100%);
`, j = d.div`
border: 1px solid ${r("colorBorder")};
display: flex;
justify-content: space-between;
padding: 5px;
`, M = d(a)`
padding: ${n(2)};
`, N = (e) => {
let { id: t, index: n, renderItem: r, onDeselect: i, onSelect: a, selected: o, checkboxLabel: s = "", ...c } = e, l = () => {
o ? i(t) : a(t);
};
return s === "" ? /* @__PURE__ */ m(M, {
checked: o,
onChange: l,
children: [/* @__PURE__ */ p(u, { children: "Select item: " }), r({
id: t,
...c
}, n)]
}) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(M, {
"aria-label": s,
checked: o,
onChange: l
}), r({
id: t,
...c
}, n)] });
}, P = ({ id: e, children: t }) => {
let { attributes: n, listeners: r, setNodeRef: i, transform: a, transition: o, isDragging: s } = w({ id: e });
return /* @__PURE__ */ p(O, {
$isDragging: s,
"data-testid": "list-item-wrapper",
ref: i,
style: {
transform: T.Translate.toString(a),
transition: o,
cursor: s ? "grabbing" : "grab"
},
...n,
...r,
children: t
});
}, F = (n) => {
let { footerContent: r = null, className: i, dataSource: a, locale: c, pagination: u, renderItem: d, itemSelection: f = null, loading: S = !1, onSearch: w, onSortOptionChange: T = null, searchLoading: M = !1, searchPlaceholder: F, showPagination: I = !0, showSearch: L = !1, showSort: R = !1, showTotalCount: z = !1, sortOptions: B = [], totalCount: V = null, draggable: H = !1, onDragEnd: U = e, selectedItems: W = [], ...G } = n, K = (e) => {
f?.onChange?.([...W, e]);
}, q = (e) => {
f?.onChange?.(t(W, e));
}, J = f ? (e, t) => H ? /* @__PURE__ */ p(P, {
id: e.id,
children: /* @__PURE__ */ p(N, {
index: t,
onDeselect: q,
onSelect: K,
renderItem: d,
selected: W.includes(e?.id),
...e
})
}, e.id) : /* @__PURE__ */ p(O, {
"data-testid": "list-item-wrapper",
children: /* @__PURE__ */ p(N, {
index: t,
onDeselect: q,
onSelect: K,
renderItem: d,
selected: W.includes(e?.id),
...e
})
}, e?.id) : (e, t) => H ? /* @__PURE__ */ p(P, {
id: e.id,
children: d(e, t)
}, e.id) : /* @__PURE__ */ p(O, {
"data-testid": "list-item-wrapper",
children: d(e, t)
}), Y = {
current: 1,
pageSize: 10,
...u
}, X = [...a];
Y && !Y.total && (V ? Y.total = V : Y.total = X.length), u && X.length > (Y.current - 1) * Y.pageSize && (X = [...a].splice((Y.current - 1) * Y.pageSize, Y.pageSize));
let Z = Math.ceil((Y.total ?? 0) / Y.pageSize);
Y.current > Z && (Y.current = Z);
let se = R || z, Q = B && B.find((e) => e.isDefault), ce = B.map(({ label: e, value: t }) => ({
label: e,
value: t
})), $ = {
emptyText: S ? /* @__PURE__ */ p("div", {
role: "status",
children: "Loading"
}) : /* @__PURE__ */ p("span", {
role: "status",
children: /* @__PURE__ */ p(o, {
description: "No Data",
image: o.PRESENTED_IMAGE_SIMPLE
})
}),
...c
}, le = ee(b(v), b(_, { coordinateGetter: C })), ue = X.map((e) => e.id), de = H ? /* @__PURE__ */ p(g, {
collisionDetection: y,
onDragEnd: U,
sensors: le,
children: /* @__PURE__ */ p(x, {
items: ue,
strategy: te,
children: /* @__PURE__ */ p(re, { children: /* @__PURE__ */ p(h, {
dataSource: X,
loading: S ? {
spinning: !0,
indicator: /* @__PURE__ */ p(A, {})
} : {
spinning: !1,
indicator: /* @__PURE__ */ p(A, {})
},
locale: $,
renderItem: J,
...G,
pagination: !1
}) })
})
}) : /* @__PURE__ */ p(k, {
dataSource: X,
loading: S ? {
spinning: !0,
indicator: /* @__PURE__ */ p(A, {})
} : {
spinning: !1,
indicator: /* @__PURE__ */ p(A, {})
},
locale: $,
renderItem: J,
...G
});
return /* @__PURE__ */ m(ne, {
className: i,
children: [
L && /* @__PURE__ */ p(E, { children: /* @__PURE__ */ p(s, {
"aria-label": "Enter text to search in list",
loading: M,
onSearch: w,
placeholder: F
}) }),
se && /* @__PURE__ */ m(D, { children: [z && /* @__PURE__ */ p(ie, { children: /* @__PURE__ */ m("span", { children: [V, " results"] }) }), R && /* @__PURE__ */ p(ae, { children: /* @__PURE__ */ m("label", { children: ["Sort by", /* @__PURE__ */ p(oe, {
"data-testid": "sort-select",
defaultValue: Q && Q.value,
id: "sortBy",
onChange: T ? (e) => T(e) : void 0,
options: ce
})] }) })] }),
de,
(r || I) && /* @__PURE__ */ m(j, { children: [r || /* @__PURE__ */ p("div", {}), I && /* @__PURE__ */ p(l, {
onChange: u ? u.onChange : void 0,
onShowSizeChange: u ? u.onShowSizeChange : void 0,
pagination: Y
})] })
]
});
};
F.Item = h.Item;
//#endregion
export { F as default, S as dndArrayMove };