@majoo-ui/react 1.56.0 → 1.56.1
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.
|
@@ -5,7 +5,7 @@ export declare const ButtonPrimitive: import("@stitches/react/types/styled-compo
|
|
|
5
5
|
buttonType?: "primary" | "secondary" | "ghost" | "ghost-secondary" | "negative" | "negative-secondary" | "negative-ghost" | "headerMenu" | "tableMenu" | undefined;
|
|
6
6
|
size?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
7
7
|
iconSize?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
8
|
-
|
|
8
|
+
hidden?: boolean | "true" | undefined;
|
|
9
9
|
}, {
|
|
10
10
|
sm: "(min-width: 359px)";
|
|
11
11
|
md: "(min-width: 767px)";
|
|
@@ -133,7 +133,7 @@ export declare const Button: React.ForwardRefExoticComponent<import("@stitches/r
|
|
|
133
133
|
buttonType?: "primary" | "secondary" | "ghost" | "ghost-secondary" | "negative" | "negative-secondary" | "negative-ghost" | "headerMenu" | "tableMenu" | undefined;
|
|
134
134
|
size?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
135
135
|
iconSize?: "sm" | "md" | "lg" | "xs" | undefined;
|
|
136
|
-
|
|
136
|
+
hidden?: boolean | "true" | undefined;
|
|
137
137
|
}, {
|
|
138
138
|
sm: "(min-width: 359px)";
|
|
139
139
|
md: "(min-width: 767px)";
|
|
@@ -28,5 +28,5 @@ interface IInputResourceListProps {
|
|
|
28
28
|
title?: string;
|
|
29
29
|
hideSelectAll?: boolean;
|
|
30
30
|
}
|
|
31
|
-
declare function InputResourceList({ data, disabled, onItemCheck, onItemUncheck, searchPlaceholder, counterFooterText, isLoading, enabledItems, emptyDataMessage, value, fetchData, onQueryChange, css, defaultSort, title, hideSelectAll, }: IInputResourceListProps): JSX.Element;
|
|
31
|
+
declare function InputResourceList({ data: dataProp, disabled, onItemCheck, onItemUncheck, searchPlaceholder, counterFooterText, isLoading, enabledItems, emptyDataMessage, value, fetchData, onQueryChange, css, defaultSort, title, hideSelectAll, }: IInputResourceListProps): JSX.Element;
|
|
32
32
|
export default InputResourceList;
|
package/index.esm.js
CHANGED
|
@@ -3993,24 +3993,29 @@ const ButtonTableMenu = {
|
|
|
3993
3993
|
}
|
|
3994
3994
|
};
|
|
3995
3995
|
const StyledIcon$2 = styled('div', {
|
|
3996
|
-
|
|
3996
|
+
display: 'inline-flex',
|
|
3997
|
+
justifyContent: 'center',
|
|
3998
|
+
alignItems: 'center',
|
|
3997
3999
|
'& svg': {
|
|
3998
4000
|
verticalAlign: 'middle'
|
|
3999
4001
|
}
|
|
4000
4002
|
});
|
|
4001
4003
|
const StyledIconLeft$4 = styled('div', {
|
|
4002
4004
|
marginRight: '$spacing-03',
|
|
4003
|
-
display: 'inline-
|
|
4004
|
-
|
|
4005
|
+
display: 'inline-flex',
|
|
4006
|
+
justifyContent: 'center',
|
|
4007
|
+
alignItems: 'center'
|
|
4005
4008
|
});
|
|
4006
4009
|
const StyledIconRight$2 = styled('div', {
|
|
4007
4010
|
marginLeft: '$spacing-03',
|
|
4008
|
-
display: 'inline-
|
|
4009
|
-
|
|
4011
|
+
display: 'inline-flex',
|
|
4012
|
+
justifyContent: 'center',
|
|
4013
|
+
alignItems: 'center'
|
|
4010
4014
|
});
|
|
4011
4015
|
const ButtonPrimitive = styled('button', {
|
|
4012
4016
|
margin: 0,
|
|
4013
|
-
display: 'flex',
|
|
4017
|
+
display: 'inline-flex',
|
|
4018
|
+
flexDirection: 'row',
|
|
4014
4019
|
alignItems: 'center',
|
|
4015
4020
|
justifyContent: 'center',
|
|
4016
4021
|
fontWeight: 600,
|
|
@@ -4023,7 +4028,6 @@ const ButtonPrimitive = styled('button', {
|
|
|
4023
4028
|
textAlign: 'center',
|
|
4024
4029
|
lineHeight: '20px',
|
|
4025
4030
|
position: 'relative',
|
|
4026
|
-
verticalAlign: 'middle',
|
|
4027
4031
|
whiteSpace: 'nowrap',
|
|
4028
4032
|
'&:focus': {
|
|
4029
4033
|
outline: '2px solid #82C4E0'
|
|
@@ -4120,9 +4124,12 @@ const ButtonPrimitive = styled('button', {
|
|
|
4120
4124
|
borderRadius: '$md'
|
|
4121
4125
|
}
|
|
4122
4126
|
},
|
|
4123
|
-
|
|
4127
|
+
/**
|
|
4128
|
+
* Hidden the button
|
|
4129
|
+
*/
|
|
4130
|
+
hidden: {
|
|
4124
4131
|
true: {
|
|
4125
|
-
display: '
|
|
4132
|
+
display: 'none'
|
|
4126
4133
|
}
|
|
4127
4134
|
}
|
|
4128
4135
|
}
|
|
@@ -4148,9 +4155,7 @@ const Button$4 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
|
|
|
4148
4155
|
size: size,
|
|
4149
4156
|
iconSize: icon ? size : undefined,
|
|
4150
4157
|
disabled: disabled,
|
|
4151
|
-
displayBlock: Boolean(block || leftIcon || rightIcon),
|
|
4152
4158
|
css: Object.assign(Object.assign({}, props.css), {
|
|
4153
|
-
display: block ? 'block' : 'inline-block',
|
|
4154
4159
|
width: block ? '100%' : width
|
|
4155
4160
|
}),
|
|
4156
4161
|
ref: forwardedRef
|
|
@@ -12177,7 +12182,7 @@ const SortingIcon = styled(Flex$1, {
|
|
|
12177
12182
|
justifyContent: 'center'
|
|
12178
12183
|
});
|
|
12179
12184
|
function InputResourceList({
|
|
12180
|
-
data,
|
|
12185
|
+
data: dataProp,
|
|
12181
12186
|
disabled = false,
|
|
12182
12187
|
onItemCheck,
|
|
12183
12188
|
onItemUncheck,
|
|
@@ -12200,7 +12205,15 @@ function InputResourceList({
|
|
|
12200
12205
|
const [checkedResources, setCheckedResources] = useState([]);
|
|
12201
12206
|
const [query, setQuery] = useState();
|
|
12202
12207
|
const [sortType, setSortType] = useState('asc');
|
|
12208
|
+
const [data, setData] = useState([]);
|
|
12203
12209
|
const scrollerRef = useRef(null);
|
|
12210
|
+
useEffect(() => {
|
|
12211
|
+
function filterUnique(params) {
|
|
12212
|
+
const unique = params === null || params === void 0 ? void 0 : params.filter((obj, index) => (params === null || params === void 0 ? void 0 : params.findIndex(item => (item === null || item === void 0 ? void 0 : item.value) === (obj === null || obj === void 0 ? void 0 : obj.value))) === index);
|
|
12213
|
+
setData(unique);
|
|
12214
|
+
}
|
|
12215
|
+
filterUnique(dataProp);
|
|
12216
|
+
}, [dataProp]);
|
|
12204
12217
|
useEffect(() => {
|
|
12205
12218
|
var _a;
|
|
12206
12219
|
(_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
|
@@ -18540,7 +18553,14 @@ const TableContainer$4 = styled(Flex$1, {
|
|
|
18540
18553
|
height: '100%',
|
|
18541
18554
|
overflowY: 'auto',
|
|
18542
18555
|
overflowX: 'hidden',
|
|
18543
|
-
padding: '0 $spacing-05'
|
|
18556
|
+
padding: '0 $spacing-05',
|
|
18557
|
+
variants: {
|
|
18558
|
+
decoration: {
|
|
18559
|
+
true: {
|
|
18560
|
+
overflow: 'unset'
|
|
18561
|
+
}
|
|
18562
|
+
}
|
|
18563
|
+
}
|
|
18544
18564
|
});
|
|
18545
18565
|
const TableHeadRow$4 = styled('tr', {
|
|
18546
18566
|
borderBottom: '1pt solid $bgBorder',
|
|
@@ -18642,190 +18662,227 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
|
|
|
18642
18662
|
}
|
|
18643
18663
|
return (getIsMobileHeader() ? column.isMobileHeader : index === indexDefaultHeader) || column.id === 'selection';
|
|
18644
18664
|
};
|
|
18665
|
+
const renderTableDecorationChild = child => {
|
|
18666
|
+
return jsx(TableContent$3, {
|
|
18667
|
+
children: jsx(TableBody$3, Object.assign({}, getTableBodyProps(), {
|
|
18668
|
+
children: child
|
|
18669
|
+
}), void 0)
|
|
18670
|
+
}, void 0);
|
|
18671
|
+
};
|
|
18645
18672
|
return jsxs(TableContainer$4, Object.assign({
|
|
18646
18673
|
css: css,
|
|
18647
|
-
ref: ref
|
|
18674
|
+
ref: ref,
|
|
18675
|
+
decoration: Boolean(decoration)
|
|
18648
18676
|
}, {
|
|
18649
|
-
children: [
|
|
18650
|
-
|
|
18651
|
-
|
|
18652
|
-
|
|
18653
|
-
|
|
18654
|
-
|
|
18655
|
-
|
|
18656
|
-
|
|
18657
|
-
|
|
18658
|
-
|
|
18659
|
-
|
|
18660
|
-
|
|
18661
|
-
|
|
18662
|
-
|
|
18663
|
-
|
|
18664
|
-
|
|
18665
|
-
|
|
18666
|
-
isToggled: column.isToggled
|
|
18667
|
-
}, {
|
|
18668
|
-
children: jsx(TableHeadCellContent, Object.assign({
|
|
18677
|
+
children: [jsx(ConditionalWrapper, Object.assign({
|
|
18678
|
+
condition: !decoration,
|
|
18679
|
+
wrapper: child => infiniteScrollWrapper(child)
|
|
18680
|
+
}, {
|
|
18681
|
+
children: jsxs(TableContent$3, Object.assign({}, getTableProps(), {
|
|
18682
|
+
children: [jsx(TableHead$3, Object.assign({
|
|
18683
|
+
hiddenHeader: hideHeader
|
|
18684
|
+
}, {
|
|
18685
|
+
children: headerGroups.map(headerGroup => jsx(TableHeadRow$4, Object.assign({}, headerGroup.getHeaderGroupProps(), {
|
|
18686
|
+
children: headerGroup.headers.filter((column, index) => filterMobileHeader(column, index)).map(column => {
|
|
18687
|
+
const headerRender = column.render('Header');
|
|
18688
|
+
return jsx(TableHeadCell$4, Object.assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
|
|
18689
|
+
title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
|
|
18690
|
+
}) : {
|
|
18691
|
+
onClick: column.onToggle
|
|
18692
|
+
}), {
|
|
18693
|
+
children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, Object.assign({
|
|
18669
18694
|
isMobile: true,
|
|
18670
|
-
|
|
18671
|
-
|
|
18695
|
+
isSortedDesc: column.isSortedDesc,
|
|
18696
|
+
unsortable: column.unsortable,
|
|
18697
|
+
isToggleable: !!column.onToggle,
|
|
18698
|
+
isToggled: column.isToggled
|
|
18672
18699
|
}, {
|
|
18673
|
-
children:
|
|
18674
|
-
|
|
18675
|
-
|
|
18676
|
-
|
|
18677
|
-
|
|
18678
|
-
|
|
18679
|
-
|
|
18680
|
-
|
|
18681
|
-
|
|
18682
|
-
|
|
18683
|
-
|
|
18684
|
-
|
|
18685
|
-
|
|
18686
|
-
|
|
18687
|
-
|
|
18688
|
-
|
|
18689
|
-
|
|
18690
|
-
|
|
18691
|
-
|
|
18692
|
-
customStyle = customRowsStyle(row.values)[_i].css;
|
|
18700
|
+
children: jsx(TableHeadCellContent, Object.assign({
|
|
18701
|
+
isMobile: true,
|
|
18702
|
+
heading: "headerTable",
|
|
18703
|
+
color: "secondary"
|
|
18704
|
+
}, {
|
|
18705
|
+
children: headerRender.toUpperCase()
|
|
18706
|
+
}), void 0)
|
|
18707
|
+
}), void 0) : headerRender
|
|
18708
|
+
}), void 0);
|
|
18709
|
+
})
|
|
18710
|
+
}), void 0))
|
|
18711
|
+
}), void 0), jsxs(TableBody$3, Object.assign({}, getTableBodyProps(), {
|
|
18712
|
+
children: [(_a = decoration === null || decoration === void 0 ? void 0 : decoration.headerRender) === null || _a === void 0 ? void 0 : _a.call(decoration), jsx(ConditionalWrapper, Object.assign({
|
|
18713
|
+
condition: Boolean(decoration),
|
|
18714
|
+
wrapper: child => jsx(TableRow$4, Object.assign({
|
|
18715
|
+
css: {
|
|
18716
|
+
'&:hover': {
|
|
18717
|
+
backgroundColor: 'unset'
|
|
18718
|
+
}
|
|
18693
18719
|
}
|
|
18694
|
-
}
|
|
18695
|
-
}
|
|
18696
|
-
return jsxs(React__default.Fragment, {
|
|
18697
|
-
children: [((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isTopChild'] && ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsx(Text$1, Object.assign({
|
|
18698
|
-
variant: "contentButton"
|
|
18699
18720
|
}, {
|
|
18700
|
-
children:
|
|
18701
|
-
|
|
18702
|
-
|
|
18703
|
-
|
|
18704
|
-
|
|
18721
|
+
children: jsx(TableCell$4, Object.assign({
|
|
18722
|
+
colSpan: (decoration === null || decoration === void 0 ? void 0 : decoration.colSpan) || 12
|
|
18723
|
+
}, {
|
|
18724
|
+
children: jsx(Box, Object.assign({
|
|
18725
|
+
css: Object.assign({
|
|
18726
|
+
height: 300,
|
|
18727
|
+
overflowY: 'auto'
|
|
18728
|
+
}, decoration === null || decoration === void 0 ? void 0 : decoration.css)
|
|
18729
|
+
}, {
|
|
18730
|
+
children: infiniteScrollWrapper(renderTableDecorationChild(child))
|
|
18731
|
+
}), void 0)
|
|
18732
|
+
}), void 0)
|
|
18733
|
+
}), void 0)
|
|
18734
|
+
}, {
|
|
18735
|
+
children: page.map((row, i) => {
|
|
18736
|
+
var _a;
|
|
18737
|
+
prepareRow(row);
|
|
18738
|
+
const isContextMenu = (_a = row.cells.filter(cell => {
|
|
18705
18739
|
var _a, _b;
|
|
18706
|
-
|
|
18707
|
-
|
|
18708
|
-
|
|
18709
|
-
|
|
18710
|
-
|
|
18711
|
-
|
|
18712
|
-
|
|
18713
|
-
|
|
18714
|
-
|
|
18715
|
-
|
|
18716
|
-
|
|
18717
|
-
|
|
18718
|
-
|
|
18719
|
-
|
|
18720
|
-
}, {
|
|
18721
|
-
children: children
|
|
18722
|
-
}), void 0)
|
|
18723
|
-
}), void 0)
|
|
18740
|
+
return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
|
|
18741
|
+
})) === null || _a === void 0 ? void 0 : _a.length;
|
|
18742
|
+
const actionCells = row.allCells.filter(cell => cell.column.id === 'menu' || cell.column.isAction);
|
|
18743
|
+
let customStyle = {};
|
|
18744
|
+
if (customRowsStyle && customRowsStyle(row.values).length) {
|
|
18745
|
+
for (let _i = 0; _i < customRowsStyle(row.values).length; _i++) {
|
|
18746
|
+
if (customRowsStyle(row.values)[_i].predicate) {
|
|
18747
|
+
customStyle = customRowsStyle(row.values)[_i].css;
|
|
18748
|
+
}
|
|
18749
|
+
}
|
|
18750
|
+
}
|
|
18751
|
+
return jsxs(React__default.Fragment, {
|
|
18752
|
+
children: [((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isTopChild'] && ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsx(Text$1, Object.assign({
|
|
18753
|
+
variant: "contentButton"
|
|
18724
18754
|
}, {
|
|
18725
|
-
children:
|
|
18726
|
-
}), void 0)
|
|
18727
|
-
|
|
18728
|
-
|
|
18729
|
-
|
|
18730
|
-
|
|
18731
|
-
|
|
18732
|
-
|
|
18733
|
-
|
|
18734
|
-
|
|
18735
|
-
|
|
18736
|
-
|
|
18737
|
-
|
|
18738
|
-
|
|
18739
|
-
|
|
18740
|
-
|
|
18741
|
-
|
|
18742
|
-
|
|
18743
|
-
|
|
18744
|
-
|
|
18745
|
-
}
|
|
18746
|
-
|
|
18755
|
+
children: row.cells[0].render('Cell')
|
|
18756
|
+
}), void 0)), jsx(TableRow$4, Object.assign({
|
|
18757
|
+
css: customStyle
|
|
18758
|
+
}, row.getRowProps(), {
|
|
18759
|
+
children: row.cells.filter((cell, indexCell) => (getIsMobileHeader() ? cell.column.isMobileHeader : indexCell === indexDefaultHeader) || cell.column.id === 'selection').map(cell => {
|
|
18760
|
+
var _a, _b;
|
|
18761
|
+
const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
|
|
18762
|
+
const exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
|
|
18763
|
+
const renderCell = () => jsx(ConditionalWrapper, Object.assign({
|
|
18764
|
+
condition: isContextMenu && !exceptionId,
|
|
18765
|
+
wrapper: children => jsx(ContextMenuTrigger, Object.assign({
|
|
18766
|
+
id: "context-menu-table",
|
|
18767
|
+
triggerSide: "left"
|
|
18768
|
+
}, {
|
|
18769
|
+
children: jsx(Box, Object.assign({
|
|
18770
|
+
onClick: () => handleRowClick(row, i),
|
|
18771
|
+
css: {
|
|
18772
|
+
cursor: 'pointer',
|
|
18773
|
+
width: 'calc(100vw - 120px)'
|
|
18774
|
+
}
|
|
18775
|
+
}, {
|
|
18776
|
+
children: children
|
|
18777
|
+
}), void 0)
|
|
18778
|
+
}), void 0)
|
|
18747
18779
|
}, {
|
|
18748
|
-
children:
|
|
18749
|
-
}), void 0)
|
|
18750
|
-
|
|
18751
|
-
|
|
18752
|
-
|
|
18780
|
+
children: cell.render('Cell')
|
|
18781
|
+
}), void 0);
|
|
18782
|
+
return jsx(TableCell$4, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
|
|
18783
|
+
children: cell.column.accessor ? jsxs(Flex$1, Object.assign({
|
|
18784
|
+
justify: "between",
|
|
18785
|
+
align: "center",
|
|
18786
|
+
css: {
|
|
18787
|
+
cursor: 'pointer',
|
|
18788
|
+
height: '100%'
|
|
18753
18789
|
}
|
|
18754
|
-
|
|
18755
|
-
|
|
18790
|
+
}, {
|
|
18791
|
+
children: [jsx(Flex$1, Object.assign({
|
|
18792
|
+
align: "center",
|
|
18793
|
+
css: {
|
|
18794
|
+
flex: 1,
|
|
18795
|
+
height: '100%'
|
|
18796
|
+
},
|
|
18797
|
+
onClick: () => {
|
|
18798
|
+
if (!exceptionId) {
|
|
18799
|
+
handleRowClick(row, i);
|
|
18800
|
+
}
|
|
18801
|
+
}
|
|
18802
|
+
}, {
|
|
18803
|
+
children: renderCell()
|
|
18804
|
+
}), void 0), jsx(Box, Object.assign({
|
|
18805
|
+
onClick: () => {
|
|
18806
|
+
if (!Object.keys(state.expanded).includes(row.id)) {
|
|
18807
|
+
toggleAllRowsExpanded(false);
|
|
18808
|
+
}
|
|
18809
|
+
row.toggleRowExpanded(!row.isExpanded);
|
|
18810
|
+
}
|
|
18811
|
+
}, {
|
|
18812
|
+
children: row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
|
|
18813
|
+
}), void 0)]
|
|
18814
|
+
}), void 0) : renderCell()
|
|
18815
|
+
}), void 0);
|
|
18816
|
+
})
|
|
18817
|
+
}), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? jsx(TableRow$4, {
|
|
18818
|
+
children: jsxs(TableCell$4, Object.assign({
|
|
18819
|
+
colSpan: visibleColumns.length
|
|
18820
|
+
}, {
|
|
18821
|
+
children: [jsx(Flex$1, Object.assign({
|
|
18822
|
+
direction: "column"
|
|
18756
18823
|
}, {
|
|
18757
|
-
children: row.
|
|
18758
|
-
|
|
18759
|
-
|
|
18760
|
-
|
|
18761
|
-
|
|
18762
|
-
|
|
18763
|
-
|
|
18764
|
-
|
|
18765
|
-
|
|
18766
|
-
|
|
18767
|
-
|
|
18768
|
-
|
|
18769
|
-
|
|
18770
|
-
|
|
18771
|
-
|
|
18824
|
+
children: row.cells.filter((cell, indexCell) => (getIsMobileHeader() ? !cell.column.isMobileHeader : indexCell !== indexDefaultHeader) && cell.column.accessor).map(cell => {
|
|
18825
|
+
var _a;
|
|
18826
|
+
return jsxs(Flex$1, Object.assign({
|
|
18827
|
+
align: "center",
|
|
18828
|
+
justify: "between",
|
|
18829
|
+
gap: 5,
|
|
18830
|
+
css: {
|
|
18831
|
+
backgroundColor: colors$5.bgGray,
|
|
18832
|
+
padding: `$spacing-04 $spacing-05 ${'selection' in row.values ? '$spacing-04 $spacing-07' : ''}`,
|
|
18833
|
+
borderBottom: '1pt solid $bgBorder',
|
|
18834
|
+
alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
|
|
18835
|
+
}
|
|
18836
|
+
}, {
|
|
18837
|
+
children: [jsx(Heading, Object.assign({
|
|
18838
|
+
css: {
|
|
18839
|
+
padding: '3px 0px'
|
|
18840
|
+
},
|
|
18841
|
+
heading: "headerTable",
|
|
18842
|
+
color: "secondary"
|
|
18843
|
+
}, {
|
|
18844
|
+
children: typeof cell.column.Header === 'string' ? (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase() : cell.render('Header')
|
|
18845
|
+
}), void 0), cell.render('Cell')]
|
|
18846
|
+
}), `${cell.column.id}-${row.id}`);
|
|
18847
|
+
})
|
|
18848
|
+
}), void 0), actionCells && actionCells.length > 0 && jsx(Flex$1, Object.assign({
|
|
18772
18849
|
align: "center",
|
|
18773
|
-
justify: "
|
|
18774
|
-
gap:
|
|
18850
|
+
justify: "end",
|
|
18851
|
+
gap: 3,
|
|
18775
18852
|
css: {
|
|
18853
|
+
height: '40px',
|
|
18776
18854
|
backgroundColor: colors$5.bgGray,
|
|
18777
|
-
|
|
18778
|
-
borderBottom: '1pt solid $bgBorder',
|
|
18779
|
-
alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
|
|
18855
|
+
paddingRight: '$spacing-04'
|
|
18780
18856
|
}
|
|
18781
18857
|
}, {
|
|
18782
|
-
children:
|
|
18783
|
-
|
|
18784
|
-
|
|
18785
|
-
|
|
18786
|
-
|
|
18787
|
-
|
|
18788
|
-
|
|
18789
|
-
|
|
18790
|
-
|
|
18791
|
-
|
|
18792
|
-
|
|
18793
|
-
}), void 0), actionCells && actionCells.length > 0 && jsx(Flex$1, Object.assign({
|
|
18794
|
-
align: "center",
|
|
18795
|
-
justify: "end",
|
|
18796
|
-
gap: 3,
|
|
18797
|
-
css: {
|
|
18798
|
-
height: '40px',
|
|
18799
|
-
backgroundColor: colors$5.bgGray,
|
|
18800
|
-
paddingRight: '$spacing-04'
|
|
18801
|
-
}
|
|
18802
|
-
}, {
|
|
18803
|
-
children: actionCells.map(cell => cell.render('Cell'))
|
|
18804
|
-
}), void 0)]
|
|
18805
|
-
}), void 0)
|
|
18806
|
-
}, void 0) : null]
|
|
18807
|
-
}, row.id);
|
|
18808
|
-
}), (_b = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _b === void 0 ? void 0 : _b.call(decoration)]
|
|
18809
|
-
}), void 0), !isInfiniteScroll && jsx(TableFoot$2, {
|
|
18810
|
-
children: jsx(TableFootRow$2, {
|
|
18811
|
-
children: jsx(TableFootCell$2, Object.assign({
|
|
18812
|
-
colSpan: 100
|
|
18813
|
-
}, {
|
|
18814
|
-
children: totalData > 0 || isLoading ? footer : jsxs(Flex$1, Object.assign({
|
|
18815
|
-
align: "center",
|
|
18816
|
-
justify: "center",
|
|
18817
|
-
direction: "column",
|
|
18818
|
-
gap: 3,
|
|
18819
|
-
css: {
|
|
18820
|
-
margin: '56px auto 100px'
|
|
18821
|
-
}
|
|
18858
|
+
children: actionCells.map(cell => cell.render('Cell'))
|
|
18859
|
+
}), void 0)]
|
|
18860
|
+
}), void 0)
|
|
18861
|
+
}, void 0) : null]
|
|
18862
|
+
}, row.id);
|
|
18863
|
+
})
|
|
18864
|
+
}), void 0), (_b = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _b === void 0 ? void 0 : _b.call(decoration)]
|
|
18865
|
+
}), void 0), !isInfiniteScroll && jsx(TableFoot$2, {
|
|
18866
|
+
children: jsx(TableFootRow$2, {
|
|
18867
|
+
children: jsx(TableFootCell$2, Object.assign({
|
|
18868
|
+
colSpan: 100
|
|
18822
18869
|
}, {
|
|
18823
|
-
children:
|
|
18870
|
+
children: totalData > 0 || isLoading ? footer : jsxs(Flex$1, Object.assign({
|
|
18871
|
+
align: "center",
|
|
18872
|
+
justify: "center",
|
|
18873
|
+
direction: "column",
|
|
18874
|
+
gap: 3,
|
|
18875
|
+
css: {
|
|
18876
|
+
margin: '56px auto 100px'
|
|
18877
|
+
}
|
|
18878
|
+
}, {
|
|
18879
|
+
children: [customEmptyDataProps.doodleImage, customEmptyDataProps.title, customEmptyDataProps.description]
|
|
18880
|
+
}), void 0)
|
|
18824
18881
|
}), void 0)
|
|
18825
|
-
}
|
|
18826
|
-
}, void 0)
|
|
18827
|
-
}, void 0)
|
|
18828
|
-
}), void 0)
|
|
18882
|
+
}, void 0)
|
|
18883
|
+
}, void 0)]
|
|
18884
|
+
}), void 0)
|
|
18885
|
+
}), void 0), renderContextMenu === null || renderContextMenu === void 0 ? void 0 : renderContextMenu()]
|
|
18829
18886
|
}), void 0);
|
|
18830
18887
|
});
|
|
18831
18888
|
|
|
@@ -19632,7 +19689,7 @@ function Table({
|
|
|
19632
19689
|
}
|
|
19633
19690
|
}, {
|
|
19634
19691
|
children: jsx(TableCell$3, Object.assign({
|
|
19635
|
-
colSpan: 12
|
|
19692
|
+
colSpan: (decoration === null || decoration === void 0 ? void 0 : decoration.colSpan) || 12
|
|
19636
19693
|
}, {
|
|
19637
19694
|
children: jsx(Box, Object.assign({
|
|
19638
19695
|
css: Object.assign({
|
package/index.umd.js
CHANGED
|
@@ -4068,24 +4068,29 @@
|
|
|
4068
4068
|
}
|
|
4069
4069
|
};
|
|
4070
4070
|
var StyledIcon$2 = styled('div', {
|
|
4071
|
-
|
|
4071
|
+
display: 'inline-flex',
|
|
4072
|
+
justifyContent: 'center',
|
|
4073
|
+
alignItems: 'center',
|
|
4072
4074
|
'& svg': {
|
|
4073
4075
|
verticalAlign: 'middle'
|
|
4074
4076
|
}
|
|
4075
4077
|
});
|
|
4076
4078
|
var StyledIconLeft$4 = styled('div', {
|
|
4077
4079
|
marginRight: '$spacing-03',
|
|
4078
|
-
display: 'inline-
|
|
4079
|
-
|
|
4080
|
+
display: 'inline-flex',
|
|
4081
|
+
justifyContent: 'center',
|
|
4082
|
+
alignItems: 'center'
|
|
4080
4083
|
});
|
|
4081
4084
|
var StyledIconRight$2 = styled('div', {
|
|
4082
4085
|
marginLeft: '$spacing-03',
|
|
4083
|
-
display: 'inline-
|
|
4084
|
-
|
|
4086
|
+
display: 'inline-flex',
|
|
4087
|
+
justifyContent: 'center',
|
|
4088
|
+
alignItems: 'center'
|
|
4085
4089
|
});
|
|
4086
4090
|
var ButtonPrimitive = styled('button', {
|
|
4087
4091
|
margin: 0,
|
|
4088
|
-
display: 'flex',
|
|
4092
|
+
display: 'inline-flex',
|
|
4093
|
+
flexDirection: 'row',
|
|
4089
4094
|
alignItems: 'center',
|
|
4090
4095
|
justifyContent: 'center',
|
|
4091
4096
|
fontWeight: 600,
|
|
@@ -4098,7 +4103,6 @@
|
|
|
4098
4103
|
textAlign: 'center',
|
|
4099
4104
|
lineHeight: '20px',
|
|
4100
4105
|
position: 'relative',
|
|
4101
|
-
verticalAlign: 'middle',
|
|
4102
4106
|
whiteSpace: 'nowrap',
|
|
4103
4107
|
'&:focus': {
|
|
4104
4108
|
outline: '2px solid #82C4E0'
|
|
@@ -4195,9 +4199,12 @@
|
|
|
4195
4199
|
borderRadius: '$md'
|
|
4196
4200
|
}
|
|
4197
4201
|
},
|
|
4198
|
-
|
|
4202
|
+
/**
|
|
4203
|
+
* Hidden the button
|
|
4204
|
+
*/
|
|
4205
|
+
hidden: {
|
|
4199
4206
|
true: {
|
|
4200
|
-
display: '
|
|
4207
|
+
display: 'none'
|
|
4201
4208
|
}
|
|
4202
4209
|
}
|
|
4203
4210
|
}
|
|
@@ -4226,9 +4233,7 @@
|
|
|
4226
4233
|
size: size,
|
|
4227
4234
|
iconSize: icon ? size : undefined,
|
|
4228
4235
|
disabled: disabled,
|
|
4229
|
-
displayBlock: Boolean(block || leftIcon || rightIcon),
|
|
4230
4236
|
css: __assign(__assign({}, props.css), {
|
|
4231
|
-
display: block ? 'block' : 'inline-block',
|
|
4232
4237
|
width: block ? '100%' : width
|
|
4233
4238
|
}),
|
|
4234
4239
|
ref: forwardedRef
|
|
@@ -12317,7 +12322,7 @@
|
|
|
12317
12322
|
justifyContent: 'center'
|
|
12318
12323
|
});
|
|
12319
12324
|
function InputResourceList(_a) {
|
|
12320
|
-
var
|
|
12325
|
+
var dataProp = _a.data,
|
|
12321
12326
|
_b = _a.disabled,
|
|
12322
12327
|
disabled = _b === void 0 ? false : _b,
|
|
12323
12328
|
onItemCheck = _a.onItemCheck,
|
|
@@ -12345,7 +12350,21 @@
|
|
|
12345
12350
|
var _f = React.useState('asc'),
|
|
12346
12351
|
sortType = _f[0],
|
|
12347
12352
|
setSortType = _f[1];
|
|
12353
|
+
var _g = React.useState([]),
|
|
12354
|
+
data = _g[0],
|
|
12355
|
+
setData = _g[1];
|
|
12348
12356
|
var scrollerRef = React.useRef(null);
|
|
12357
|
+
React.useEffect(function () {
|
|
12358
|
+
function filterUnique(params) {
|
|
12359
|
+
var unique = params === null || params === void 0 ? void 0 : params.filter(function (obj, index) {
|
|
12360
|
+
return (params === null || params === void 0 ? void 0 : params.findIndex(function (item) {
|
|
12361
|
+
return (item === null || item === void 0 ? void 0 : item.value) === (obj === null || obj === void 0 ? void 0 : obj.value);
|
|
12362
|
+
})) === index;
|
|
12363
|
+
});
|
|
12364
|
+
setData(unique);
|
|
12365
|
+
}
|
|
12366
|
+
filterUnique(dataProp);
|
|
12367
|
+
}, [dataProp]);
|
|
12349
12368
|
React.useEffect(function () {
|
|
12350
12369
|
var _a;
|
|
12351
12370
|
(_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
|
@@ -18817,7 +18836,14 @@
|
|
|
18817
18836
|
height: '100%',
|
|
18818
18837
|
overflowY: 'auto',
|
|
18819
18838
|
overflowX: 'hidden',
|
|
18820
|
-
padding: '0 $spacing-05'
|
|
18839
|
+
padding: '0 $spacing-05',
|
|
18840
|
+
variants: {
|
|
18841
|
+
decoration: {
|
|
18842
|
+
true: {
|
|
18843
|
+
overflow: 'unset'
|
|
18844
|
+
}
|
|
18845
|
+
}
|
|
18846
|
+
}
|
|
18821
18847
|
});
|
|
18822
18848
|
var TableHeadRow$4 = styled('tr', {
|
|
18823
18849
|
borderBottom: '1pt solid $bgBorder',
|
|
@@ -18912,208 +18938,249 @@
|
|
|
18912
18938
|
}
|
|
18913
18939
|
return (getIsMobileHeader() ? column.isMobileHeader : index === indexDefaultHeader) || column.id === 'selection';
|
|
18914
18940
|
};
|
|
18941
|
+
var renderTableDecorationChild = function renderTableDecorationChild(child) {
|
|
18942
|
+
return jsxRuntime.jsx(TableContent$3, {
|
|
18943
|
+
children: jsxRuntime.jsx(TableBody$3, __assign({}, getTableBodyProps(), {
|
|
18944
|
+
children: child
|
|
18945
|
+
}), void 0)
|
|
18946
|
+
}, void 0);
|
|
18947
|
+
};
|
|
18915
18948
|
return jsxRuntime.jsxs(TableContainer$4, __assign({
|
|
18916
18949
|
css: css,
|
|
18917
|
-
ref: ref
|
|
18950
|
+
ref: ref,
|
|
18951
|
+
decoration: Boolean(decoration)
|
|
18918
18952
|
}, {
|
|
18919
|
-
children: [
|
|
18920
|
-
|
|
18921
|
-
|
|
18922
|
-
|
|
18923
|
-
|
|
18924
|
-
|
|
18925
|
-
|
|
18926
|
-
|
|
18927
|
-
|
|
18928
|
-
|
|
18929
|
-
|
|
18930
|
-
|
|
18931
|
-
|
|
18932
|
-
|
|
18933
|
-
})
|
|
18934
|
-
|
|
18935
|
-
|
|
18936
|
-
|
|
18937
|
-
|
|
18938
|
-
|
|
18939
|
-
|
|
18940
|
-
|
|
18941
|
-
children: jsxRuntime.jsx(TableHeadCellContent, __assign({
|
|
18953
|
+
children: [jsxRuntime.jsx(ConditionalWrapper, __assign({
|
|
18954
|
+
condition: !decoration,
|
|
18955
|
+
wrapper: function (child) {
|
|
18956
|
+
return infiniteScrollWrapper(child);
|
|
18957
|
+
}
|
|
18958
|
+
}, {
|
|
18959
|
+
children: jsxRuntime.jsxs(TableContent$3, __assign({}, getTableProps(), {
|
|
18960
|
+
children: [jsxRuntime.jsx(TableHead$3, __assign({
|
|
18961
|
+
hiddenHeader: hideHeader
|
|
18962
|
+
}, {
|
|
18963
|
+
children: headerGroups.map(function (headerGroup) {
|
|
18964
|
+
return jsxRuntime.jsx(TableHeadRow$4, __assign({}, headerGroup.getHeaderGroupProps(), {
|
|
18965
|
+
children: headerGroup.headers.filter(function (column, index) {
|
|
18966
|
+
return filterMobileHeader(column, index);
|
|
18967
|
+
}).map(function (column) {
|
|
18968
|
+
var headerRender = column.render('Header');
|
|
18969
|
+
return jsxRuntime.jsx(TableHeadCell$4, __assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
|
|
18970
|
+
title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
|
|
18971
|
+
}) : {
|
|
18972
|
+
onClick: column.onToggle
|
|
18973
|
+
}), {
|
|
18974
|
+
children: typeof headerRender === 'string' ? jsxRuntime.jsx(TableHeaderCellContainer, __assign({
|
|
18942
18975
|
isMobile: true,
|
|
18943
|
-
|
|
18944
|
-
|
|
18976
|
+
isSortedDesc: column.isSortedDesc,
|
|
18977
|
+
unsortable: column.unsortable,
|
|
18978
|
+
isToggleable: !!column.onToggle,
|
|
18979
|
+
isToggled: column.isToggled
|
|
18945
18980
|
}, {
|
|
18946
|
-
children:
|
|
18981
|
+
children: jsxRuntime.jsx(TableHeadCellContent, __assign({
|
|
18982
|
+
isMobile: true,
|
|
18983
|
+
heading: "headerTable",
|
|
18984
|
+
color: "secondary"
|
|
18985
|
+
}, {
|
|
18986
|
+
children: headerRender.toUpperCase()
|
|
18987
|
+
}), void 0)
|
|
18988
|
+
}), void 0) : headerRender
|
|
18989
|
+
}), void 0);
|
|
18990
|
+
})
|
|
18991
|
+
}), void 0);
|
|
18992
|
+
})
|
|
18993
|
+
}), void 0), jsxRuntime.jsxs(TableBody$3, __assign({}, getTableBodyProps(), {
|
|
18994
|
+
children: [(_b = decoration === null || decoration === void 0 ? void 0 : decoration.headerRender) === null || _b === void 0 ? void 0 : _b.call(decoration), jsxRuntime.jsx(ConditionalWrapper, __assign({
|
|
18995
|
+
condition: Boolean(decoration),
|
|
18996
|
+
wrapper: function (child) {
|
|
18997
|
+
return jsxRuntime.jsx(TableRow$4, __assign({
|
|
18998
|
+
css: {
|
|
18999
|
+
'&:hover': {
|
|
19000
|
+
backgroundColor: 'unset'
|
|
19001
|
+
}
|
|
19002
|
+
}
|
|
19003
|
+
}, {
|
|
19004
|
+
children: jsxRuntime.jsx(TableCell$4, __assign({
|
|
19005
|
+
colSpan: (decoration === null || decoration === void 0 ? void 0 : decoration.colSpan) || 12
|
|
19006
|
+
}, {
|
|
19007
|
+
children: jsxRuntime.jsx(Box, __assign({
|
|
19008
|
+
css: __assign({
|
|
19009
|
+
height: 300,
|
|
19010
|
+
overflowY: 'auto'
|
|
19011
|
+
}, decoration === null || decoration === void 0 ? void 0 : decoration.css)
|
|
19012
|
+
}, {
|
|
19013
|
+
children: infiniteScrollWrapper(renderTableDecorationChild(child))
|
|
18947
19014
|
}), void 0)
|
|
18948
|
-
}), void 0)
|
|
19015
|
+
}), void 0)
|
|
18949
19016
|
}), void 0);
|
|
18950
|
-
})
|
|
18951
|
-
}), void 0);
|
|
18952
|
-
})
|
|
18953
|
-
}), void 0), jsxRuntime.jsxs(TableBody$3, __assign({}, getTableBodyProps(), {
|
|
18954
|
-
children: [(_b = decoration === null || decoration === void 0 ? void 0 : decoration.headerRender) === null || _b === void 0 ? void 0 : _b.call(decoration), page.map(function (row, i) {
|
|
18955
|
-
var _a;
|
|
18956
|
-
prepareRow(row);
|
|
18957
|
-
var isContextMenu = (_a = row.cells.filter(function (cell) {
|
|
18958
|
-
var _a, _b;
|
|
18959
|
-
return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
|
|
18960
|
-
})) === null || _a === void 0 ? void 0 : _a.length;
|
|
18961
|
-
var actionCells = row.allCells.filter(function (cell) {
|
|
18962
|
-
return cell.column.id === 'menu' || cell.column.isAction;
|
|
18963
|
-
});
|
|
18964
|
-
var customStyle = {};
|
|
18965
|
-
if (customRowsStyle && customRowsStyle(row.values).length) {
|
|
18966
|
-
for (var i_1 = 0; i_1 < customRowsStyle(row.values).length; i_1++) {
|
|
18967
|
-
if (customRowsStyle(row.values)[i_1].predicate) {
|
|
18968
|
-
customStyle = customRowsStyle(row.values)[i_1].css;
|
|
18969
|
-
}
|
|
18970
19017
|
}
|
|
18971
|
-
}
|
|
18972
|
-
|
|
18973
|
-
|
|
18974
|
-
|
|
18975
|
-
|
|
18976
|
-
children: row.cells[0].render('Cell')
|
|
18977
|
-
}), void 0)), jsxRuntime.jsx(TableRow$4, __assign({
|
|
18978
|
-
css: customStyle
|
|
18979
|
-
}, row.getRowProps(), {
|
|
18980
|
-
children: row.cells.filter(function (cell, indexCell) {
|
|
18981
|
-
return (getIsMobileHeader() ? cell.column.isMobileHeader : indexCell === indexDefaultHeader) || cell.column.id === 'selection';
|
|
18982
|
-
}).map(function (cell) {
|
|
19018
|
+
}, {
|
|
19019
|
+
children: page.map(function (row, i) {
|
|
19020
|
+
var _a;
|
|
19021
|
+
prepareRow(row);
|
|
19022
|
+
var isContextMenu = (_a = row.cells.filter(function (cell) {
|
|
18983
19023
|
var _a, _b;
|
|
18984
|
-
|
|
18985
|
-
|
|
18986
|
-
|
|
18987
|
-
|
|
18988
|
-
|
|
18989
|
-
|
|
18990
|
-
|
|
18991
|
-
|
|
18992
|
-
|
|
19024
|
+
return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
|
|
19025
|
+
})) === null || _a === void 0 ? void 0 : _a.length;
|
|
19026
|
+
var actionCells = row.allCells.filter(function (cell) {
|
|
19027
|
+
return cell.column.id === 'menu' || cell.column.isAction;
|
|
19028
|
+
});
|
|
19029
|
+
var customStyle = {};
|
|
19030
|
+
if (customRowsStyle && customRowsStyle(row.values).length) {
|
|
19031
|
+
for (var i_1 = 0; i_1 < customRowsStyle(row.values).length; i_1++) {
|
|
19032
|
+
if (customRowsStyle(row.values)[i_1].predicate) {
|
|
19033
|
+
customStyle = customRowsStyle(row.values)[i_1].css;
|
|
19034
|
+
}
|
|
19035
|
+
}
|
|
19036
|
+
}
|
|
19037
|
+
return jsxRuntime.jsxs(React__default["default"].Fragment, {
|
|
19038
|
+
children: [((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isTopChild'] && ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsxRuntime.jsx(Text$1, __assign({
|
|
19039
|
+
variant: "contentButton"
|
|
19040
|
+
}, {
|
|
19041
|
+
children: row.cells[0].render('Cell')
|
|
19042
|
+
}), void 0)), jsxRuntime.jsx(TableRow$4, __assign({
|
|
19043
|
+
css: customStyle
|
|
19044
|
+
}, row.getRowProps(), {
|
|
19045
|
+
children: row.cells.filter(function (cell, indexCell) {
|
|
19046
|
+
return (getIsMobileHeader() ? cell.column.isMobileHeader : indexCell === indexDefaultHeader) || cell.column.id === 'selection';
|
|
19047
|
+
}).map(function (cell) {
|
|
19048
|
+
var _a, _b;
|
|
19049
|
+
var collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
|
|
19050
|
+
var exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
|
|
19051
|
+
var renderCell = function renderCell() {
|
|
19052
|
+
return jsxRuntime.jsx(ConditionalWrapper, __assign({
|
|
19053
|
+
condition: isContextMenu && !exceptionId,
|
|
19054
|
+
wrapper: function (children) {
|
|
19055
|
+
return jsxRuntime.jsx(ContextMenuTrigger, __assign({
|
|
19056
|
+
id: "context-menu-table",
|
|
19057
|
+
triggerSide: "left"
|
|
19058
|
+
}, {
|
|
19059
|
+
children: jsxRuntime.jsx(Box, __assign({
|
|
19060
|
+
onClick: function () {
|
|
19061
|
+
return handleRowClick(row, i);
|
|
19062
|
+
},
|
|
19063
|
+
css: {
|
|
19064
|
+
cursor: 'pointer',
|
|
19065
|
+
width: 'calc(100vw - 120px)'
|
|
19066
|
+
}
|
|
19067
|
+
}, {
|
|
19068
|
+
children: children
|
|
19069
|
+
}), void 0)
|
|
19070
|
+
}), void 0);
|
|
19071
|
+
}
|
|
18993
19072
|
}, {
|
|
18994
|
-
children:
|
|
18995
|
-
|
|
18996
|
-
|
|
18997
|
-
|
|
19073
|
+
children: cell.render('Cell')
|
|
19074
|
+
}), void 0);
|
|
19075
|
+
};
|
|
19076
|
+
return jsxRuntime.jsx(TableCell$4, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
|
|
19077
|
+
children: cell.column.accessor ? jsxRuntime.jsxs(Flex$1, __assign({
|
|
19078
|
+
justify: "between",
|
|
19079
|
+
align: "center",
|
|
19080
|
+
css: {
|
|
19081
|
+
cursor: 'pointer',
|
|
19082
|
+
height: '100%'
|
|
19083
|
+
}
|
|
19084
|
+
}, {
|
|
19085
|
+
children: [jsxRuntime.jsx(Flex$1, __assign({
|
|
19086
|
+
align: "center",
|
|
18998
19087
|
css: {
|
|
18999
|
-
|
|
19000
|
-
|
|
19088
|
+
flex: 1,
|
|
19089
|
+
height: '100%'
|
|
19090
|
+
},
|
|
19091
|
+
onClick: function () {
|
|
19092
|
+
if (!exceptionId) {
|
|
19093
|
+
handleRowClick(row, i);
|
|
19094
|
+
}
|
|
19001
19095
|
}
|
|
19002
19096
|
}, {
|
|
19003
|
-
children:
|
|
19004
|
-
}), void 0)
|
|
19005
|
-
|
|
19006
|
-
|
|
19007
|
-
|
|
19008
|
-
|
|
19009
|
-
|
|
19010
|
-
|
|
19011
|
-
|
|
19012
|
-
|
|
19013
|
-
|
|
19014
|
-
|
|
19015
|
-
|
|
19016
|
-
|
|
19017
|
-
|
|
19018
|
-
|
|
19097
|
+
children: renderCell()
|
|
19098
|
+
}), void 0), jsxRuntime.jsx(Box, __assign({
|
|
19099
|
+
onClick: function () {
|
|
19100
|
+
if (!Object.keys(state.expanded).includes(row.id)) {
|
|
19101
|
+
toggleAllRowsExpanded(false);
|
|
19102
|
+
}
|
|
19103
|
+
row.toggleRowExpanded(!row.isExpanded);
|
|
19104
|
+
}
|
|
19105
|
+
}, {
|
|
19106
|
+
children: row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
|
|
19107
|
+
}), void 0)]
|
|
19108
|
+
}), void 0) : renderCell()
|
|
19109
|
+
}), void 0);
|
|
19110
|
+
})
|
|
19111
|
+
}), void 0), ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row)), row.isExpanded ? jsxRuntime.jsx(TableRow$4, {
|
|
19112
|
+
children: jsxRuntime.jsxs(TableCell$4, __assign({
|
|
19113
|
+
colSpan: visibleColumns.length
|
|
19019
19114
|
}, {
|
|
19020
19115
|
children: [jsxRuntime.jsx(Flex$1, __assign({
|
|
19021
|
-
|
|
19022
|
-
css: {
|
|
19023
|
-
flex: 1,
|
|
19024
|
-
height: '100%'
|
|
19025
|
-
},
|
|
19026
|
-
onClick: function () {
|
|
19027
|
-
if (!exceptionId) {
|
|
19028
|
-
handleRowClick(row, i);
|
|
19029
|
-
}
|
|
19030
|
-
}
|
|
19031
|
-
}, {
|
|
19032
|
-
children: renderCell()
|
|
19033
|
-
}), void 0), jsxRuntime.jsx(Box, __assign({
|
|
19034
|
-
onClick: function () {
|
|
19035
|
-
if (!Object.keys(state.expanded).includes(row.id)) {
|
|
19036
|
-
toggleAllRowsExpanded(false);
|
|
19037
|
-
}
|
|
19038
|
-
row.toggleRowExpanded(!row.isExpanded);
|
|
19039
|
-
}
|
|
19116
|
+
direction: "column"
|
|
19040
19117
|
}, {
|
|
19041
|
-
children: row.
|
|
19042
|
-
|
|
19043
|
-
|
|
19044
|
-
|
|
19045
|
-
|
|
19046
|
-
|
|
19047
|
-
|
|
19048
|
-
|
|
19049
|
-
|
|
19050
|
-
|
|
19051
|
-
|
|
19052
|
-
|
|
19053
|
-
|
|
19054
|
-
|
|
19055
|
-
|
|
19056
|
-
|
|
19057
|
-
|
|
19118
|
+
children: row.cells.filter(function (cell, indexCell) {
|
|
19119
|
+
return (getIsMobileHeader() ? !cell.column.isMobileHeader : indexCell !== indexDefaultHeader) && cell.column.accessor;
|
|
19120
|
+
}).map(function (cell) {
|
|
19121
|
+
var _a;
|
|
19122
|
+
return jsxRuntime.jsxs(Flex$1, __assign({
|
|
19123
|
+
align: "center",
|
|
19124
|
+
justify: "between",
|
|
19125
|
+
gap: 5,
|
|
19126
|
+
css: {
|
|
19127
|
+
backgroundColor: colors$5.bgGray,
|
|
19128
|
+
padding: "$spacing-04 $spacing-05 ".concat('selection' in row.values ? '$spacing-04 $spacing-07' : ''),
|
|
19129
|
+
borderBottom: '1pt solid $bgBorder',
|
|
19130
|
+
alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
|
|
19131
|
+
}
|
|
19132
|
+
}, {
|
|
19133
|
+
children: [jsxRuntime.jsx(Heading, __assign({
|
|
19134
|
+
css: {
|
|
19135
|
+
padding: '3px 0px'
|
|
19136
|
+
},
|
|
19137
|
+
heading: "headerTable",
|
|
19138
|
+
color: "secondary"
|
|
19139
|
+
}, {
|
|
19140
|
+
children: typeof cell.column.Header === 'string' ? (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase() : cell.render('Header')
|
|
19141
|
+
}), void 0), cell.render('Cell')]
|
|
19142
|
+
}), "".concat(cell.column.id, "-").concat(row.id));
|
|
19143
|
+
})
|
|
19144
|
+
}), void 0), actionCells && actionCells.length > 0 && jsxRuntime.jsx(Flex$1, __assign({
|
|
19058
19145
|
align: "center",
|
|
19059
|
-
justify: "
|
|
19060
|
-
gap:
|
|
19146
|
+
justify: "end",
|
|
19147
|
+
gap: 3,
|
|
19061
19148
|
css: {
|
|
19149
|
+
height: '40px',
|
|
19062
19150
|
backgroundColor: colors$5.bgGray,
|
|
19063
|
-
|
|
19064
|
-
borderBottom: '1pt solid $bgBorder',
|
|
19065
|
-
alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
|
|
19151
|
+
paddingRight: '$spacing-04'
|
|
19066
19152
|
}
|
|
19067
19153
|
}, {
|
|
19068
|
-
children:
|
|
19069
|
-
|
|
19070
|
-
|
|
19071
|
-
|
|
19072
|
-
|
|
19073
|
-
|
|
19074
|
-
|
|
19075
|
-
|
|
19076
|
-
|
|
19077
|
-
|
|
19078
|
-
|
|
19079
|
-
|
|
19080
|
-
|
|
19081
|
-
justify: "end",
|
|
19082
|
-
gap: 3,
|
|
19083
|
-
css: {
|
|
19084
|
-
height: '40px',
|
|
19085
|
-
backgroundColor: colors$5.bgGray,
|
|
19086
|
-
paddingRight: '$spacing-04'
|
|
19087
|
-
}
|
|
19088
|
-
}, {
|
|
19089
|
-
children: actionCells.map(function (cell) {
|
|
19090
|
-
return cell.render('Cell');
|
|
19091
|
-
})
|
|
19092
|
-
}), void 0)]
|
|
19093
|
-
}), void 0)
|
|
19094
|
-
}, void 0) : null]
|
|
19095
|
-
}, row.id);
|
|
19096
|
-
}), (_c = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _c === void 0 ? void 0 : _c.call(decoration)]
|
|
19097
|
-
}), void 0), !isInfiniteScroll && jsxRuntime.jsx(TableFoot$2, {
|
|
19098
|
-
children: jsxRuntime.jsx(TableFootRow$2, {
|
|
19099
|
-
children: jsxRuntime.jsx(TableFootCell$2, __assign({
|
|
19100
|
-
colSpan: 100
|
|
19101
|
-
}, {
|
|
19102
|
-
children: totalData > 0 || isLoading ? footer : jsxRuntime.jsxs(Flex$1, __assign({
|
|
19103
|
-
align: "center",
|
|
19104
|
-
justify: "center",
|
|
19105
|
-
direction: "column",
|
|
19106
|
-
gap: 3,
|
|
19107
|
-
css: {
|
|
19108
|
-
margin: '56px auto 100px'
|
|
19109
|
-
}
|
|
19154
|
+
children: actionCells.map(function (cell) {
|
|
19155
|
+
return cell.render('Cell');
|
|
19156
|
+
})
|
|
19157
|
+
}), void 0)]
|
|
19158
|
+
}), void 0)
|
|
19159
|
+
}, void 0) : null]
|
|
19160
|
+
}, row.id);
|
|
19161
|
+
})
|
|
19162
|
+
}), void 0), (_c = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _c === void 0 ? void 0 : _c.call(decoration)]
|
|
19163
|
+
}), void 0), !isInfiniteScroll && jsxRuntime.jsx(TableFoot$2, {
|
|
19164
|
+
children: jsxRuntime.jsx(TableFootRow$2, {
|
|
19165
|
+
children: jsxRuntime.jsx(TableFootCell$2, __assign({
|
|
19166
|
+
colSpan: 100
|
|
19110
19167
|
}, {
|
|
19111
|
-
children:
|
|
19168
|
+
children: totalData > 0 || isLoading ? footer : jsxRuntime.jsxs(Flex$1, __assign({
|
|
19169
|
+
align: "center",
|
|
19170
|
+
justify: "center",
|
|
19171
|
+
direction: "column",
|
|
19172
|
+
gap: 3,
|
|
19173
|
+
css: {
|
|
19174
|
+
margin: '56px auto 100px'
|
|
19175
|
+
}
|
|
19176
|
+
}, {
|
|
19177
|
+
children: [customEmptyDataProps.doodleImage, customEmptyDataProps.title, customEmptyDataProps.description]
|
|
19178
|
+
}), void 0)
|
|
19112
19179
|
}), void 0)
|
|
19113
|
-
}
|
|
19114
|
-
}, void 0)
|
|
19115
|
-
}, void 0)
|
|
19116
|
-
}), void 0)
|
|
19180
|
+
}, void 0)
|
|
19181
|
+
}, void 0)]
|
|
19182
|
+
}), void 0)
|
|
19183
|
+
}), void 0), renderContextMenu === null || renderContextMenu === void 0 ? void 0 : renderContextMenu()]
|
|
19117
19184
|
}), void 0);
|
|
19118
19185
|
});
|
|
19119
19186
|
|
|
@@ -19973,7 +20040,7 @@
|
|
|
19973
20040
|
}
|
|
19974
20041
|
}, {
|
|
19975
20042
|
children: jsxRuntime.jsx(TableCell$3, __assign({
|
|
19976
|
-
colSpan: 12
|
|
20043
|
+
colSpan: (decoration === null || decoration === void 0 ? void 0 : decoration.colSpan) || 12
|
|
19977
20044
|
}, {
|
|
19978
20045
|
children: jsxRuntime.jsx(Box, __assign({
|
|
19979
20046
|
css: __assign({
|