@ctlyst.id/internal-ui 2.0.9 → 2.0.10
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.
- package/dist/components/data-table/components/data-table.d.ts +2 -2
- package/dist/internal-ui.cjs.development.js +22 -58
- package/dist/internal-ui.cjs.development.js.map +1 -1
- package/dist/internal-ui.cjs.production.min.js +13 -13
- package/dist/internal-ui.cjs.production.min.js.map +1 -1
- package/dist/internal-ui.esm.js +23 -59
- package/dist/internal-ui.esm.js.map +1 -1
- package/package.json +2 -2
- package/dist/components/data-table/components/indeterminate-checkbox.d.ts +0 -8
package/dist/internal-ui.esm.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { cx, dataAttr } from '@chakra-ui/shared-utils';
|
2
2
|
import { forwardRef, omitThemingProps, useMultiStyleConfig, chakra, useColorMode } from '@chakra-ui/system';
|
3
|
-
import React__default, { createElement, forwardRef as forwardRef$2, useMemo,
|
3
|
+
import React__default, { createElement, forwardRef as forwardRef$2, useMemo, useState, useEffect, useImperativeHandle, Fragment, useCallback, createContext as createContext$1, useContext, useRef } from 'react';
|
4
4
|
import { createContext } from '@chakra-ui/react-context';
|
5
5
|
import { CheckCircle, Info, AlertTriangle, Close, EyeOff, Eye, Rating as Rating$1, Check } from '@ctlyst.id/internal-icon';
|
6
6
|
import { cx as cx$1 } from '@chakra-ui/utils';
|
@@ -554,48 +554,6 @@ Chips.defaultProps = {
|
|
554
554
|
size: 'sm'
|
555
555
|
};
|
556
556
|
|
557
|
-
const useCombinedRefs = (...refs) => {
|
558
|
-
const targetRef = useRef();
|
559
|
-
useEffect(() => {
|
560
|
-
refs.forEach(ref => {
|
561
|
-
/* eslint-disable no-param-reassign */
|
562
|
-
if (!ref) return;
|
563
|
-
if (typeof ref === 'function') {
|
564
|
-
ref(targetRef.current);
|
565
|
-
} else {
|
566
|
-
ref.current = targetRef.current;
|
567
|
-
}
|
568
|
-
});
|
569
|
-
}, [refs]);
|
570
|
-
return targetRef;
|
571
|
-
};
|
572
|
-
const IndeterminateCheckbox = /*#__PURE__*/forwardRef$2(({
|
573
|
-
isIndeterminate,
|
574
|
-
isChecked,
|
575
|
-
...rest
|
576
|
-
}, ref) => {
|
577
|
-
const defaultRef = useRef(null);
|
578
|
-
const combinedRef = useCombinedRefs(ref, defaultRef);
|
579
|
-
useEffect(() => {
|
580
|
-
if (combinedRef !== null && combinedRef !== void 0 && combinedRef.current) {
|
581
|
-
combinedRef.current.indeterminate = isIndeterminate !== null && isIndeterminate !== void 0 ? isIndeterminate : false;
|
582
|
-
}
|
583
|
-
}, [combinedRef, isIndeterminate]);
|
584
|
-
return /*#__PURE__*/React__default.createElement(Checkbox$1, Object.assign({
|
585
|
-
ref: combinedRef,
|
586
|
-
focusBorderColor: "0",
|
587
|
-
isIndeterminate: isIndeterminate,
|
588
|
-
isChecked: isChecked,
|
589
|
-
inputProps: {
|
590
|
-
'data-test-id': `CT_component_indeterminate-checkbox_${rest.id || rest.name}`
|
591
|
-
}
|
592
|
-
}, rest));
|
593
|
-
});
|
594
|
-
IndeterminateCheckbox.displayName = 'IndeterminateCheckbox';
|
595
|
-
IndeterminateCheckbox.defaultProps = {
|
596
|
-
isIndeterminate: false
|
597
|
-
};
|
598
|
-
|
599
557
|
/* eslint-disable react-hooks/rules-of-hooks */
|
600
558
|
const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
|
601
559
|
const {
|
@@ -612,6 +570,7 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
|
|
612
570
|
manualSorting,
|
613
571
|
onRowClick
|
614
572
|
} = props;
|
573
|
+
const [isFirstLoad, setIsFirstLoad] = useState(true);
|
615
574
|
const [sorting, setSorting] = useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
|
616
575
|
const [rowSelection, onRowSelectionChange] = useState({});
|
617
576
|
const dataColumns = useMemo(() => columns, [columns]);
|
@@ -619,20 +578,20 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
|
|
619
578
|
id: 'select',
|
620
579
|
header: ({
|
621
580
|
table
|
622
|
-
}) => /*#__PURE__*/createElement(
|
623
|
-
|
581
|
+
}) => /*#__PURE__*/createElement(Checkbox$1, Object.assign({
|
582
|
+
"data-test-id": "select-header-data-table"
|
624
583
|
}, {
|
625
|
-
|
626
|
-
|
584
|
+
isChecked: table.getIsAllRowsSelected(),
|
585
|
+
isIndeterminate: table.getIsSomeRowsSelected(),
|
627
586
|
onChange: table.getToggleAllRowsSelectedHandler()
|
628
587
|
})),
|
629
588
|
cell: ({
|
630
589
|
row
|
631
|
-
}) => /*#__PURE__*/createElement(
|
632
|
-
|
590
|
+
}) => /*#__PURE__*/createElement(Checkbox$1, Object.assign({
|
591
|
+
"data-test-id": `select-data-table-${row.index}`
|
633
592
|
}, {
|
634
|
-
|
635
|
-
|
593
|
+
isChecked: row.getIsSelected(),
|
594
|
+
isIndeterminate: row.getIsSomeSelected(),
|
636
595
|
onChange: row.getToggleSelectedHandler()
|
637
596
|
}))
|
638
597
|
}], []);
|
@@ -644,9 +603,6 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
|
|
644
603
|
};
|
645
604
|
const onSortingChange = data => {
|
646
605
|
setSorting(data);
|
647
|
-
if (onSort) {
|
648
|
-
onSort(data);
|
649
|
-
}
|
650
606
|
};
|
651
607
|
const table = useReactTable({
|
652
608
|
data: dataSource,
|
@@ -679,6 +635,14 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
|
|
679
635
|
useImperativeHandle(ref, () => ({
|
680
636
|
toggleAllRowsSelected
|
681
637
|
}));
|
638
|
+
useEffect(() => {
|
639
|
+
if (onSort && !isFirstLoad) {
|
640
|
+
onSort(sorting);
|
641
|
+
}
|
642
|
+
}, [sorting]);
|
643
|
+
useEffect(() => {
|
644
|
+
setIsFirstLoad(false);
|
645
|
+
}, []);
|
682
646
|
return /*#__PURE__*/createElement(Box, Object.assign({}, props), isLoading && /*#__PURE__*/createElement(Flex, {
|
683
647
|
w: "100%",
|
684
648
|
h: "100%",
|
@@ -732,12 +696,12 @@ const DataTable = /*#__PURE__*/forwardRef$2((props, ref) => {
|
|
732
696
|
key: row.id
|
733
697
|
}, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
|
734
698
|
css: css`
|
735
|
-
|
736
|
-
|
737
|
-
|
738
|
-
}
|
699
|
+
&:last-child {
|
700
|
+
td {
|
701
|
+
border-bottom: none;
|
739
702
|
}
|
740
|
-
|
703
|
+
}
|
704
|
+
`,
|
741
705
|
onClick: () => {
|
742
706
|
if (onRowClick) {
|
743
707
|
onRowClick(row.original);
|