@konoma-development/react-components 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -46426,6 +46426,7 @@ function Select({
|
|
|
46426
46426
|
},
|
|
46427
46427
|
onChange: (option) => {
|
|
46428
46428
|
if (!option) {
|
|
46429
|
+
onChange(false);
|
|
46429
46430
|
return;
|
|
46430
46431
|
}
|
|
46431
46432
|
if (isMulti) {
|
|
@@ -54532,6 +54533,7 @@ function Table({
|
|
|
54532
54533
|
totalRows,
|
|
54533
54534
|
noEntryLabel,
|
|
54534
54535
|
allowReorder,
|
|
54536
|
+
showFilters,
|
|
54535
54537
|
onMoveRow = () => {
|
|
54536
54538
|
return;
|
|
54537
54539
|
},
|
|
@@ -54546,8 +54548,12 @@ function Table({
|
|
|
54546
54548
|
},
|
|
54547
54549
|
onUpdateFilters = async () => {
|
|
54548
54550
|
return;
|
|
54551
|
+
},
|
|
54552
|
+
onSort = () => {
|
|
54553
|
+
return;
|
|
54549
54554
|
}
|
|
54550
54555
|
}) {
|
|
54556
|
+
const hasFilters = !!(showFilters && (columnsCenter.some((column) => column.filterable) || columnsLeft?.some((column) => column.filterable) || columnsRight?.some((column) => column.filterable)));
|
|
54551
54557
|
const header = useRef(null);
|
|
54552
54558
|
const currentColumnsLeft = useMemo(() => columnsLeft?.filter((column) => !column?.hidden) || [], [columnsLeft]);
|
|
54553
54559
|
const currentColumnsCenter = useMemo(() => columnsCenter?.filter((column) => !column?.hidden) || [], [columnsCenter]);
|
|
@@ -54568,128 +54574,218 @@ function Table({
|
|
|
54568
54574
|
className: "max-h-full max-w-full overflow-x-auto overflow-y-auto rounded-krc-table",
|
|
54569
54575
|
onScroll,
|
|
54570
54576
|
children: [
|
|
54571
|
-
/* @__PURE__ */ jsxs(
|
|
54572
|
-
/* @__PURE__ */
|
|
54573
|
-
|
|
54574
|
-
|
|
54575
|
-
{
|
|
54576
|
-
|
|
54577
|
-
|
|
54578
|
-
maxWidth: column.initialWidth
|
|
54579
|
-
},
|
|
54580
|
-
className: "flex h-12 flex-row items-center truncate bg-secondary-100 px-4 py-3 text-xs font-medium first:rounded-tl-krc-table",
|
|
54581
|
-
children: column.title
|
|
54577
|
+
/* @__PURE__ */ jsxs("div", { ref: header, className: "sticky top-0 z-[1] flex flex-row items-center justify-between rounded-t-krc-table bg-secondary-100", children: [
|
|
54578
|
+
!!currentColumnsLeft.length && /* @__PURE__ */ jsx$1("div", { className: "sticky left-0 flex flex-row", children: currentColumnsLeft.map((column) => /* @__PURE__ */ jsxs(
|
|
54579
|
+
"div",
|
|
54580
|
+
{
|
|
54581
|
+
style: {
|
|
54582
|
+
minWidth: column.initialWidth,
|
|
54583
|
+
maxWidth: column.initialWidth
|
|
54582
54584
|
},
|
|
54583
|
-
|
|
54584
|
-
|
|
54585
|
-
|
|
54586
|
-
|
|
54587
|
-
|
|
54588
|
-
|
|
54589
|
-
|
|
54590
|
-
|
|
54591
|
-
|
|
54592
|
-
|
|
54593
|
-
|
|
54585
|
+
onClick: () => {
|
|
54586
|
+
return column.sortKey && onSort(
|
|
54587
|
+
Object.assign({}, column, {
|
|
54588
|
+
sorting: column.sorting ? { "+": "-", "-": undefined }[column.sorting] : "+"
|
|
54589
|
+
})
|
|
54590
|
+
);
|
|
54591
|
+
},
|
|
54592
|
+
className: [
|
|
54593
|
+
"flex h-12 flex-row items-center truncate bg-secondary-100 px-4 py-3 text-xs font-medium first:rounded-tl-krc-table",
|
|
54594
|
+
column.sortKey ? "cursor-pointer" : ""
|
|
54595
|
+
].join(" "),
|
|
54596
|
+
children: [
|
|
54597
|
+
/* @__PURE__ */ jsx$1("span", { children: column.title }),
|
|
54598
|
+
column.sortKey && /* @__PURE__ */ jsx$1("div", { children: /* @__PURE__ */ jsx$1(
|
|
54599
|
+
Icon,
|
|
54600
|
+
{
|
|
54601
|
+
className: "h-4 w-4",
|
|
54602
|
+
name: column.sorting ? {
|
|
54603
|
+
"+": "heroicons:chevron-down-16-solid",
|
|
54604
|
+
"-": "heroicons:chevron-up-16-solid"
|
|
54605
|
+
}[column.sorting] : "heroicons:chevron-up-16-solid"
|
|
54606
|
+
}
|
|
54607
|
+
) }),
|
|
54608
|
+
hasFilters && /* @__PURE__ */ jsx$1("div", { className: "bg-secondary-100 px-4 text-xs font-medium text-secondary-500", children: column.filterable && column.filterKey && /* @__PURE__ */ jsx$1(Fragment, { children: column.filterComponent?.(filters, updateFilters) || /* @__PURE__ */ jsx$1(
|
|
54609
|
+
Input$2,
|
|
54610
|
+
{
|
|
54611
|
+
defaultValue: filters[column.filterKey],
|
|
54612
|
+
onKeyDown: async (e) => {
|
|
54613
|
+
if (e.key === "Enter" && column.filterKey) {
|
|
54614
|
+
const key = column.filterKey;
|
|
54615
|
+
const value = e.currentTarget.value;
|
|
54616
|
+
if (e) {
|
|
54617
|
+
await updateFilters({ ...filters, [key]: value });
|
|
54618
|
+
} else {
|
|
54619
|
+
const newFilters = { ...filters };
|
|
54620
|
+
delete newFilters[key];
|
|
54621
|
+
await updateFilters(newFilters);
|
|
54622
|
+
}
|
|
54623
|
+
}
|
|
54624
|
+
},
|
|
54625
|
+
onClick: (e) => {
|
|
54626
|
+
e.stopPropagation();
|
|
54627
|
+
},
|
|
54628
|
+
className: "h-10",
|
|
54629
|
+
iconRightName: "heroicons:magnifying-glass-16-solid"
|
|
54630
|
+
}
|
|
54631
|
+
) }) })
|
|
54632
|
+
]
|
|
54633
|
+
},
|
|
54634
|
+
column.id.toString()
|
|
54635
|
+
)) }),
|
|
54636
|
+
currentColumnsCenter.map((column) => /* @__PURE__ */ jsxs(
|
|
54637
|
+
"div",
|
|
54638
|
+
{
|
|
54639
|
+
style: {
|
|
54640
|
+
minWidth: column.initialWidth,
|
|
54641
|
+
maxWidth: column.initialWidth
|
|
54594
54642
|
},
|
|
54595
|
-
|
|
54596
|
-
|
|
54597
|
-
|
|
54598
|
-
"
|
|
54599
|
-
{
|
|
54600
|
-
|
|
54601
|
-
|
|
54602
|
-
|
|
54603
|
-
|
|
54604
|
-
|
|
54605
|
-
children: column.title
|
|
54643
|
+
className: [
|
|
54644
|
+
"flex h-12 flex-row items-center truncate bg-secondary-100 px-4 py-3 text-xs font-medium first:rounded-tl-krc-table last:rounded-tr-krc-table",
|
|
54645
|
+
column.sortKey ? "cursor-pointer" : ""
|
|
54646
|
+
].join(" "),
|
|
54647
|
+
onClick: () => {
|
|
54648
|
+
return column.sortKey && onSort(
|
|
54649
|
+
Object.assign({}, column, {
|
|
54650
|
+
sorting: column.sorting ? { "+": "-", "-": undefined }[column.sorting] : "+"
|
|
54651
|
+
})
|
|
54652
|
+
);
|
|
54606
54653
|
},
|
|
54607
|
-
|
|
54608
|
-
|
|
54609
|
-
|
|
54610
|
-
|
|
54611
|
-
|
|
54612
|
-
|
|
54613
|
-
|
|
54614
|
-
|
|
54615
|
-
|
|
54616
|
-
|
|
54617
|
-
|
|
54618
|
-
|
|
54619
|
-
|
|
54620
|
-
|
|
54621
|
-
|
|
54622
|
-
|
|
54623
|
-
|
|
54654
|
+
children: [
|
|
54655
|
+
/* @__PURE__ */ jsx$1("span", { children: column.title }),
|
|
54656
|
+
column.sortKey && /* @__PURE__ */ jsx$1("div", { children: /* @__PURE__ */ jsx$1(
|
|
54657
|
+
Icon,
|
|
54658
|
+
{
|
|
54659
|
+
className: "h-4 w-4",
|
|
54660
|
+
name: column.sorting ? {
|
|
54661
|
+
"+": "heroicons:chevron-down-16-solid",
|
|
54662
|
+
"-": "heroicons:chevron-up-16-solid"
|
|
54663
|
+
}[column.sorting] : "heroicons:chevron-up-16-solid"
|
|
54664
|
+
}
|
|
54665
|
+
) }),
|
|
54666
|
+
hasFilters && /* @__PURE__ */ jsx$1("div", { className: "bg-secondary-100 px-4 text-xs font-medium text-secondary-500", children: column.filterable && column.filterKey && /* @__PURE__ */ jsx$1(Fragment, { children: column.filterComponent?.(filters, updateFilters) || /* @__PURE__ */ jsx$1(
|
|
54667
|
+
Input$2,
|
|
54668
|
+
{
|
|
54669
|
+
defaultValue: filters[column.filterKey],
|
|
54670
|
+
onKeyDown: async (e) => {
|
|
54671
|
+
if (e.key === "Enter" && column.filterKey) {
|
|
54672
|
+
const key = column.filterKey;
|
|
54673
|
+
const value = e.currentTarget.value;
|
|
54674
|
+
if (e) {
|
|
54675
|
+
await updateFilters({ ...filters, [key]: value });
|
|
54676
|
+
} else {
|
|
54677
|
+
const newFilters = { ...filters };
|
|
54678
|
+
delete newFilters[key];
|
|
54679
|
+
await updateFilters(newFilters);
|
|
54680
|
+
}
|
|
54681
|
+
}
|
|
54682
|
+
},
|
|
54683
|
+
onClick: (e) => {
|
|
54684
|
+
e.stopPropagation();
|
|
54685
|
+
},
|
|
54686
|
+
className: "h-10",
|
|
54687
|
+
iconRightName: "heroicons:magnifying-glass-16-solid"
|
|
54688
|
+
}
|
|
54689
|
+
) }) })
|
|
54690
|
+
]
|
|
54691
|
+
},
|
|
54692
|
+
column.id.toString()
|
|
54693
|
+
)),
|
|
54694
|
+
!!currentColumnsRight.length && /* @__PURE__ */ jsx$1("div", { className: "sticky right-0 flex flex-row", children: currentColumnsRight.map((column) => /* @__PURE__ */ jsx$1(
|
|
54695
|
+
"div",
|
|
54696
|
+
{
|
|
54697
|
+
style: {
|
|
54698
|
+
minWidth: column.initialWidth,
|
|
54699
|
+
maxWidth: column.initialWidth
|
|
54624
54700
|
},
|
|
54625
|
-
|
|
54626
|
-
|
|
54627
|
-
|
|
54628
|
-
|
|
54629
|
-
|
|
54630
|
-
|
|
54631
|
-
|
|
54632
|
-
|
|
54633
|
-
|
|
54634
|
-
|
|
54635
|
-
|
|
54636
|
-
|
|
54637
|
-
|
|
54638
|
-
|
|
54639
|
-
|
|
54640
|
-
|
|
54641
|
-
|
|
54642
|
-
|
|
54643
|
-
|
|
54644
|
-
|
|
54645
|
-
|
|
54646
|
-
|
|
54647
|
-
|
|
54648
|
-
|
|
54649
|
-
|
|
54650
|
-
|
|
54651
|
-
|
|
54652
|
-
|
|
54653
|
-
|
|
54654
|
-
|
|
54655
|
-
|
|
54656
|
-
|
|
54657
|
-
|
|
54658
|
-
|
|
54659
|
-
|
|
54660
|
-
|
|
54701
|
+
className: "flex h-12 flex-row items-center justify-end truncate bg-secondary-100 px-4 py-3 text-xs font-medium last:rounded-tr-krc-table",
|
|
54702
|
+
children: column.title
|
|
54703
|
+
},
|
|
54704
|
+
column.id.toString()
|
|
54705
|
+
)) })
|
|
54706
|
+
] }),
|
|
54707
|
+
allowReorder ? /* @__PURE__ */ jsx$1(DndProvider, { backend: HTML5Backend, debugMode: true, children: data.map((entry, i) => {
|
|
54708
|
+
return /* @__PURE__ */ jsx$1(
|
|
54709
|
+
Row,
|
|
54710
|
+
{
|
|
54711
|
+
index: i,
|
|
54712
|
+
entry,
|
|
54713
|
+
moveRow: onMoveRow,
|
|
54714
|
+
currentColumnsCenter,
|
|
54715
|
+
currentColumnsLeft,
|
|
54716
|
+
currentColumnsRight,
|
|
54717
|
+
cellRenderer,
|
|
54718
|
+
header,
|
|
54719
|
+
onRowClick,
|
|
54720
|
+
onRowDoubleClick
|
|
54721
|
+
},
|
|
54722
|
+
i
|
|
54723
|
+
);
|
|
54724
|
+
}) }) : /* @__PURE__ */ jsx$1(Fragment, { children: data.map((entry, i) => {
|
|
54725
|
+
return /* @__PURE__ */ jsxs(
|
|
54726
|
+
"div",
|
|
54727
|
+
{
|
|
54728
|
+
className: `group relative flex flex-row justify-between rounded-t-krc-table bg-white last:rounded-b-krc-table hover:bg-primary-100`,
|
|
54729
|
+
onClick: () => onRowClick(entry),
|
|
54730
|
+
onDoubleClick: () => onRowDoubleClick(entry),
|
|
54731
|
+
children: [
|
|
54732
|
+
!!currentColumnsLeft.length && /* @__PURE__ */ jsx$1("div", { className: "sticky left-0 flex flex-row border-r", children: currentColumnsLeft.map((column) => {
|
|
54733
|
+
return /* @__PURE__ */ jsx$1(
|
|
54734
|
+
"div",
|
|
54735
|
+
{
|
|
54736
|
+
style: {
|
|
54737
|
+
minWidth: column.initialWidth,
|
|
54738
|
+
maxWidth: column.initialWidth
|
|
54661
54739
|
},
|
|
54662
|
-
|
|
54663
|
-
|
|
54664
|
-
|
|
54665
|
-
|
|
54666
|
-
|
|
54667
|
-
|
|
54668
|
-
|
|
54669
|
-
|
|
54670
|
-
|
|
54671
|
-
|
|
54672
|
-
|
|
54673
|
-
|
|
54674
|
-
|
|
54675
|
-
|
|
54740
|
+
className: "bg-white group-hover:bg-primary-100",
|
|
54741
|
+
title: entry[column.id] || "",
|
|
54742
|
+
children: cellRenderer?.[column.id]?.(entry) || /* @__PURE__ */ jsx$1("div", { className: "h-14 truncate p-4 text-sm", children: entry[column.id] || "-" })
|
|
54743
|
+
},
|
|
54744
|
+
column.id.toString()
|
|
54745
|
+
);
|
|
54746
|
+
}) }),
|
|
54747
|
+
currentColumnsCenter.map((column) => {
|
|
54748
|
+
return /* @__PURE__ */ jsx$1(
|
|
54749
|
+
"div",
|
|
54750
|
+
{
|
|
54751
|
+
style: {
|
|
54752
|
+
minWidth: column.initialWidth,
|
|
54753
|
+
maxWidth: column.initialWidth
|
|
54676
54754
|
},
|
|
54677
|
-
|
|
54678
|
-
|
|
54679
|
-
|
|
54680
|
-
|
|
54755
|
+
className: "bg-white first:grow group-hover:bg-primary-100",
|
|
54756
|
+
title: entry[column.id] ? entry[column.id].toString() : "",
|
|
54757
|
+
children: cellRenderer?.[column.id]?.(entry) || /* @__PURE__ */ jsx$1("div", { className: "h-14 truncate p-4 text-sm", children: entry[column.id] || "-" })
|
|
54758
|
+
},
|
|
54759
|
+
column.id.toString()
|
|
54760
|
+
);
|
|
54761
|
+
}),
|
|
54762
|
+
!!currentColumnsRight.length && /* @__PURE__ */ jsx$1("div", { className: "sticky right-0 flex flex-row border-l", children: currentColumnsRight.map((column) => {
|
|
54763
|
+
return /* @__PURE__ */ jsx$1(
|
|
54681
54764
|
"div",
|
|
54682
54765
|
{
|
|
54683
|
-
style: {
|
|
54684
|
-
|
|
54685
|
-
|
|
54686
|
-
|
|
54687
|
-
|
|
54688
|
-
|
|
54689
|
-
|
|
54690
|
-
|
|
54691
|
-
|
|
54692
|
-
|
|
54766
|
+
style: {
|
|
54767
|
+
minWidth: column.initialWidth,
|
|
54768
|
+
maxWidth: column.initialWidth
|
|
54769
|
+
},
|
|
54770
|
+
className: "bg-white group-hover:bg-primary-100",
|
|
54771
|
+
title: entry[column.id] || "",
|
|
54772
|
+
children: cellRenderer?.[column.id]?.(entry) || /* @__PURE__ */ jsx$1("div", { className: "h-14 truncate p-4 text-sm", children: entry[column.id] || "-" })
|
|
54773
|
+
},
|
|
54774
|
+
column.id.toString()
|
|
54775
|
+
);
|
|
54776
|
+
}) }),
|
|
54777
|
+
/* @__PURE__ */ jsx$1(
|
|
54778
|
+
"div",
|
|
54779
|
+
{
|
|
54780
|
+
style: { width: `${(header.current?.scrollWidth || 0) - 1}px` },
|
|
54781
|
+
className: "absolute bottom-0 left-0 right-0 h-px bg-secondary-100"
|
|
54782
|
+
}
|
|
54783
|
+
)
|
|
54784
|
+
]
|
|
54785
|
+
},
|
|
54786
|
+
i
|
|
54787
|
+
);
|
|
54788
|
+
}) }),
|
|
54693
54789
|
data.length === 0 && /* @__PURE__ */ jsx$1("div", { className: noDataClasses, children: noEntryLabel })
|
|
54694
54790
|
]
|
|
54695
54791
|
}
|
|
@@ -55045,5 +55141,5 @@ function Tabs({
|
|
|
55045
55141
|
)) });
|
|
55046
55142
|
}
|
|
55047
55143
|
|
|
55048
|
-
export { Button, Checkbox, CheckboxList, Column, ColumnChooser, ColumnChooserEntry, Form, FormField, Icon, Input$2 as Input, LoadingIndicator, Modal, Pagination, PhoneInput, RadioButtonGroup, Select, Table, TableActionEntry, TableActions, Tabs, Tag, TagList, Textarea as TextArea, validators };
|
|
55144
|
+
export { Button, Checkbox, CheckboxList, Column, ColumnChooser, ColumnChooserEntry, FilterContext, Form, FormField, Icon, Input$2 as Input, LoadingIndicator, Modal, Pagination, PhoneInput, RadioButtonGroup, Select, Table, TableActionEntry, TableActions, Tabs, Tag, TagList, Textarea as TextArea, validators };
|
|
55049
55145
|
//# sourceMappingURL=react-components.js.map
|