@ballistix.digital/react-components 0.4.113 → 0.4.114
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/index.d.ts +64 -26
- package/dist/index.esm.js +85 -39
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +85 -39
- package/dist/index.js.map +1 -1
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +13 -30
package/dist/index.js
CHANGED
|
@@ -120,7 +120,7 @@ var AvatarElement = function (props) {
|
|
|
120
120
|
return (jsxRuntime.jsx("a", { href: url, children: jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsxs("span", { className: "flex items-center justify-center", children: [jsxRuntime.jsx("div", { className: styles.container, style: { backgroundImage: "url(".concat(src, ")") } }), status && jsxRuntime.jsx("span", { className: styles.indicator })] }), children && jsxRuntime.jsx("div", { className: "ml-3", children: children })] }) }));
|
|
121
121
|
};
|
|
122
122
|
|
|
123
|
-
var base$
|
|
123
|
+
var base$m = {
|
|
124
124
|
loading: 'inline-block relative overflow-hidden bg-gray-50 flex items-center justify-center',
|
|
125
125
|
spinner: 'w-5 h-5 animate-spin text-gray-400',
|
|
126
126
|
empty: 'inline-block relative overflow-hidden bg-gray-50 text-red-400',
|
|
@@ -199,7 +199,7 @@ var blocked = {
|
|
|
199
199
|
indicator: 'bg-red-400',
|
|
200
200
|
};
|
|
201
201
|
var styles$o = {
|
|
202
|
-
base: base$
|
|
202
|
+
base: base$m,
|
|
203
203
|
xs: xs$4,
|
|
204
204
|
sm: sm$5,
|
|
205
205
|
md: md$4,
|
|
@@ -232,7 +232,7 @@ var BadgeElement = function (props) {
|
|
|
232
232
|
return (jsxRuntime.jsxs("span", { className: styles.container, children: [type === 'indicator' && (jsxRuntime.jsx("svg", { className: styles.indicator, fill: "currentColor", viewBox: "0 0 8 8", children: jsxRuntime.jsx("circle", { cx: 4, cy: 4, r: 3 }) })), children, type === 'close' && (jsxRuntime.jsxs("button", { type: "button", className: styles.button, onClick: onClose, children: [jsxRuntime.jsx("span", { className: "sr-only", children: "Remove large option" }), xIcon] }))] }));
|
|
233
233
|
};
|
|
234
234
|
|
|
235
|
-
var base$
|
|
235
|
+
var base$l = {
|
|
236
236
|
container: 'inline-flex items-center font-medium py-0.5',
|
|
237
237
|
indicator: '',
|
|
238
238
|
button: 'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:text-white focus:outline-none',
|
|
@@ -316,7 +316,7 @@ var loading$1 = {
|
|
|
316
316
|
container: 'cursor-progress',
|
|
317
317
|
};
|
|
318
318
|
var styles$n = {
|
|
319
|
-
base: base$
|
|
319
|
+
base: base$l,
|
|
320
320
|
normal: normal$5,
|
|
321
321
|
indicator: indicator,
|
|
322
322
|
close: close,
|
|
@@ -385,7 +385,7 @@ var ButtonElement = function (props) {
|
|
|
385
385
|
return (jsxRuntime.jsxs("button", { type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef, children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "spinner", className: styles.spinner }), jsxRuntime.jsx("div", { children: children })] })), status === 'error' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-exclamation", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] })), status === 'success' && (jsxRuntime.jsxs("div", { className: styles.content, children: [jsxRuntime.jsx(IconElement, { type: "regular", accessor: "circle-check", className: styles.icon }), jsxRuntime.jsx("div", { children: children })] }))] }));
|
|
386
386
|
};
|
|
387
387
|
|
|
388
|
-
var base$
|
|
388
|
+
var base$k = {
|
|
389
389
|
container: 'inline-flex items-center border border-transparent font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 duration-300',
|
|
390
390
|
content: 'flex gap-2',
|
|
391
391
|
icon: '',
|
|
@@ -438,7 +438,7 @@ var disabled$4 = {
|
|
|
438
438
|
container: '!opacity-20 !cursor-not-allowed',
|
|
439
439
|
};
|
|
440
440
|
var styles$m = {
|
|
441
|
-
base: base$
|
|
441
|
+
base: base$k,
|
|
442
442
|
primary: primary,
|
|
443
443
|
secondary: secondary,
|
|
444
444
|
outline: outline,
|
|
@@ -480,14 +480,14 @@ var ButtonGroupElement = function (props) {
|
|
|
480
480
|
}) }));
|
|
481
481
|
};
|
|
482
482
|
|
|
483
|
-
var base$
|
|
483
|
+
var base$j = {
|
|
484
484
|
container: 'relative z-0 inline-flex shadow-sm rounded-md',
|
|
485
485
|
firstButton: 'relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
|
|
486
486
|
button: '-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
|
|
487
487
|
lastButton: '-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500',
|
|
488
488
|
};
|
|
489
489
|
var styles$l = {
|
|
490
|
-
base: base$
|
|
490
|
+
base: base$j,
|
|
491
491
|
};
|
|
492
492
|
|
|
493
493
|
var Container$3 = function (props) {
|
|
@@ -509,7 +509,7 @@ var DropdownElement = {
|
|
|
509
509
|
Item: react.Menu.Item,
|
|
510
510
|
};
|
|
511
511
|
|
|
512
|
-
var base$
|
|
512
|
+
var base$i = {
|
|
513
513
|
container: 'inline-block text-left',
|
|
514
514
|
button: 'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
|
|
515
515
|
compact: 'bg-gray-100 rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
|
|
@@ -531,7 +531,7 @@ var topRight = {
|
|
|
531
531
|
items: 'origin-bottom-left left-0 bottom-0',
|
|
532
532
|
};
|
|
533
533
|
var styles$k = {
|
|
534
|
-
base: base$
|
|
534
|
+
base: base$i,
|
|
535
535
|
button: button,
|
|
536
536
|
compact: compact,
|
|
537
537
|
'bottom-left': bottomLeft,
|
|
@@ -560,10 +560,10 @@ var InputGroupForm = function (props) {
|
|
|
560
560
|
var styles = handleGenerateStyle();
|
|
561
561
|
var invalidIcon = (jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: "h-5 w-5 text-red-500", "aria-hidden": "true" }));
|
|
562
562
|
return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.body, children: [leading && jsxRuntime.jsx("div", { className: styles.leading, children: leading }), !htmlType ||
|
|
563
|
-
(htmlType !== 'area' && (jsxRuntime.jsx("input", { type: mask$1 !== undefined ? 'text' : htmlType, ref: mask$1 && ref, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }))), htmlType === 'area' && (jsxRuntime.jsx("textarea", { rows: rows, name: name, id: name, className:
|
|
563
|
+
(htmlType !== 'area' && (jsxRuntime.jsx("input", { type: mask$1 !== undefined ? 'text' : htmlType, ref: mask$1 && ref, name: name, id: name, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }))), htmlType === 'area' && (jsxRuntime.jsx("textarea", { rows: rows, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsxRuntime.jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && jsxRuntime.jsx("p", { className: styles.error, children: error })] })] }));
|
|
564
564
|
};
|
|
565
565
|
|
|
566
|
-
var base$
|
|
566
|
+
var base$h = {
|
|
567
567
|
container: '',
|
|
568
568
|
head: 'flex justify-between',
|
|
569
569
|
body: 'relative rounded-md',
|
|
@@ -627,7 +627,7 @@ var disabled$3 = {
|
|
|
627
627
|
input: 'block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200',
|
|
628
628
|
};
|
|
629
629
|
var styles$j = {
|
|
630
|
-
base: base$
|
|
630
|
+
base: base$h,
|
|
631
631
|
leading: leading$2,
|
|
632
632
|
trailing: trailing$2,
|
|
633
633
|
normal: normal$4,
|
|
@@ -668,7 +668,7 @@ var ContainerLayout = function (props) {
|
|
|
668
668
|
return handleGenerateComponent();
|
|
669
669
|
};
|
|
670
670
|
|
|
671
|
-
var base$
|
|
671
|
+
var base$g = {
|
|
672
672
|
container: '',
|
|
673
673
|
content: '',
|
|
674
674
|
};
|
|
@@ -683,7 +683,7 @@ var fill$1 = {
|
|
|
683
683
|
container: 'max-w-7xl mx-auto sm:px-6 lg:px-8',
|
|
684
684
|
};
|
|
685
685
|
var styles$i = {
|
|
686
|
-
base: base$
|
|
686
|
+
base: base$g,
|
|
687
687
|
break: breakStyles,
|
|
688
688
|
center: center$3,
|
|
689
689
|
fill: fill$1,
|
|
@@ -704,7 +704,7 @@ var DividerLayout = function (props) {
|
|
|
704
704
|
return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.head, "aria-hidden": "true", children: jsxRuntime.jsx("div", { className: styles.line }) }), jsxRuntime.jsx("div", { className: styles.body, children: jsxRuntime.jsx("div", { className: styles.content, children: children }) })] }));
|
|
705
705
|
};
|
|
706
706
|
|
|
707
|
-
var base$
|
|
707
|
+
var base$f = {
|
|
708
708
|
container: 'relative',
|
|
709
709
|
head: 'absolute inset-0 flex items-center',
|
|
710
710
|
line: 'w-full border-t border-gray-300',
|
|
@@ -721,7 +721,7 @@ var right = {
|
|
|
721
721
|
body: 'justify-end',
|
|
722
722
|
};
|
|
723
723
|
var styles$h = {
|
|
724
|
-
base: base$
|
|
724
|
+
base: base$f,
|
|
725
725
|
left: left,
|
|
726
726
|
center: center$2,
|
|
727
727
|
right: right,
|
|
@@ -744,7 +744,7 @@ var ListContainerLayout = function (props) {
|
|
|
744
744
|
}) }) }));
|
|
745
745
|
};
|
|
746
746
|
|
|
747
|
-
var base$
|
|
747
|
+
var base$e = {
|
|
748
748
|
container: '',
|
|
749
749
|
list: '',
|
|
750
750
|
item: '',
|
|
@@ -776,7 +776,7 @@ var cardSticky = {
|
|
|
776
776
|
item: 'bg-white shadow overflow-hidden px-4 py-4 sm:px-6 sm:rounded-md',
|
|
777
777
|
};
|
|
778
778
|
var styles$g = {
|
|
779
|
-
base: base$
|
|
779
|
+
base: base$e,
|
|
780
780
|
fill: fill,
|
|
781
781
|
'fill-sticky': fillSticky,
|
|
782
782
|
center: center$1,
|
|
@@ -809,7 +809,7 @@ var MediaObjectLayout = function (props) {
|
|
|
809
809
|
return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.figure, children: $svg }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("h4", { className: styles.title, children: title }), jsxRuntime.jsx("p", { className: styles.paragraph, children: paragraph })] })] }));
|
|
810
810
|
};
|
|
811
811
|
|
|
812
|
-
var base$
|
|
812
|
+
var base$d = {
|
|
813
813
|
container: '',
|
|
814
814
|
figure: 'mr-4 flex-shrink-0',
|
|
815
815
|
svg: 'h-16 w-16 border border-gray-300 bg-white text-gray-300',
|
|
@@ -865,7 +865,7 @@ var wideReversed = {
|
|
|
865
865
|
svg: 'h-32 w-full sm:w-32',
|
|
866
866
|
};
|
|
867
867
|
var styles$f = {
|
|
868
|
-
base: base$
|
|
868
|
+
base: base$d,
|
|
869
869
|
top: top,
|
|
870
870
|
'top-reversed': topReversed,
|
|
871
871
|
center: center,
|
|
@@ -911,7 +911,7 @@ var LayoutPanel = {
|
|
|
911
911
|
Section: Section,
|
|
912
912
|
};
|
|
913
913
|
|
|
914
|
-
var base$
|
|
914
|
+
var base$c = {
|
|
915
915
|
container: 'bg-white overflow-hidden shadow',
|
|
916
916
|
section: 'px-4 py-5 sm:px-6',
|
|
917
917
|
};
|
|
@@ -922,7 +922,7 @@ var sticky$1 = {
|
|
|
922
922
|
container: 'sm:rounded-lg',
|
|
923
923
|
};
|
|
924
924
|
var styles$e = {
|
|
925
|
-
base: base$
|
|
925
|
+
base: base$c,
|
|
926
926
|
normal: normal$3,
|
|
927
927
|
sticky: sticky$1,
|
|
928
928
|
};
|
|
@@ -1070,7 +1070,7 @@ var PanelPaginationNavigation = function (props) {
|
|
|
1070
1070
|
return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsxRuntime.jsx("button", { className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: "Previous" }), jsxRuntime.jsx("button", { className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: "Next" })] }), jsxRuntime.jsxs("div", { className: styles.desktop.container, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { className: "text-sm text-gray-700", children: children && children({ min: min, max: max, current: current }) }) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("nav", { className: styles.desktop.navigation, "aria-label": "Pagination", children: [jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.leftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Previous" }), jsxRuntime.jsx(solid.ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] }), component, jsxRuntime.jsxs("button", { className: toClassName(styles.desktop.rightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); }, children: [jsxRuntime.jsx("span", { className: styles.label, children: "Next" }), jsxRuntime.jsx(solid.ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] })] }) })] })] }));
|
|
1071
1071
|
};
|
|
1072
1072
|
|
|
1073
|
-
var base$
|
|
1073
|
+
var base$b = {
|
|
1074
1074
|
container: 'flex items-center justify-between border-t border-gray-200 bg-white py-3',
|
|
1075
1075
|
mobile: {
|
|
1076
1076
|
container: '',
|
|
@@ -1092,7 +1092,7 @@ var base$a = {
|
|
|
1092
1092
|
icon: 'w-5 h-5',
|
|
1093
1093
|
};
|
|
1094
1094
|
var styles$d = {
|
|
1095
|
-
base: base$
|
|
1095
|
+
base: base$b,
|
|
1096
1096
|
};
|
|
1097
1097
|
|
|
1098
1098
|
var TableList = function (props) {
|
|
@@ -1228,7 +1228,7 @@ var TableList = function (props) {
|
|
|
1228
1228
|
: { container: 'mt-4' }, onChange: onPaginate, children: children })] }) }));
|
|
1229
1229
|
};
|
|
1230
1230
|
|
|
1231
|
-
var base$
|
|
1231
|
+
var base$a = {
|
|
1232
1232
|
container: 'px-4 sm:px-6 lg:px-8',
|
|
1233
1233
|
head: {
|
|
1234
1234
|
container: 'sm:flex sm:items-center',
|
|
@@ -1341,7 +1341,7 @@ var controlled = {
|
|
|
1341
1341
|
},
|
|
1342
1342
|
};
|
|
1343
1343
|
var styles$c = {
|
|
1344
|
-
base: base$
|
|
1344
|
+
base: base$a,
|
|
1345
1345
|
normal: normal$2,
|
|
1346
1346
|
panel: panel$1,
|
|
1347
1347
|
full: full,
|
|
@@ -1351,10 +1351,27 @@ var styles$c = {
|
|
|
1351
1351
|
};
|
|
1352
1352
|
|
|
1353
1353
|
var TableList2 = function (props) {
|
|
1354
|
-
var
|
|
1355
|
-
var
|
|
1356
|
-
var
|
|
1357
|
-
var
|
|
1354
|
+
var _a, _b;
|
|
1355
|
+
var config = props.table, head = props.head, foot = props.foot, isLoading = props.isLoading, onChange = props.onChange, stylesOverrides = props.styles;
|
|
1356
|
+
var _c = React.useState([]), sorting = _c[0], setSorting = _c[1];
|
|
1357
|
+
var _d = React.useState({
|
|
1358
|
+
title: false,
|
|
1359
|
+
}), columnVisibility = _d[0], setColumnVisibility = _d[1];
|
|
1360
|
+
var _e = React.useState([]), columnOrder = _e[0], setColumnOrder = _e[1];
|
|
1361
|
+
var handleGenerateStyle = function () {
|
|
1362
|
+
var result = deepCopyObject(styles$b.base);
|
|
1363
|
+
var keys = calculateNestedKeys(styles$b.base);
|
|
1364
|
+
keys.forEach(function (key) {
|
|
1365
|
+
lodash.set(result, key, toClassName(lodash.get(styles$b.base, key),
|
|
1366
|
+
// type && get(defaultStyles[type], key),
|
|
1367
|
+
// hasStickyHeader && get(defaultStyles.sticky, key),
|
|
1368
|
+
// hasVerticalSeparators && get(defaultStyles.separated, key),
|
|
1369
|
+
// areControlsVisible && get(defaultStyles.controlled, key),
|
|
1370
|
+
lodash.get(stylesOverrides, key)));
|
|
1371
|
+
});
|
|
1372
|
+
return result;
|
|
1373
|
+
};
|
|
1374
|
+
var styles = handleGenerateStyle();
|
|
1358
1375
|
var table = reactTable.useReactTable({
|
|
1359
1376
|
getCoreRowModel: reactTable.getCoreRowModel(),
|
|
1360
1377
|
columns: config.columns,
|
|
@@ -1387,31 +1404,57 @@ var TableList2 = function (props) {
|
|
|
1387
1404
|
onChange && onChange(state);
|
|
1388
1405
|
}
|
|
1389
1406
|
}, [onChange, state]);
|
|
1390
|
-
|
|
1407
|
+
// Set column visibility state on mount.
|
|
1408
|
+
React.useEffect(function () {
|
|
1409
|
+
var _a, _b, _c, _d, _e, _f;
|
|
1410
|
+
if (!((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.defaultVisibility)) {
|
|
1411
|
+
return;
|
|
1412
|
+
}
|
|
1413
|
+
var base = (_b = table
|
|
1414
|
+
.getAllColumns()) === null || _b === void 0 ? void 0 : _b.map(function (column) { return ((column === null || column === void 0 ? void 0 : column.id) ? column === null || column === void 0 ? void 0 : column.id : column === null || column === void 0 ? void 0 : column.accessorKey); }).map(function (key) {
|
|
1415
|
+
var _a;
|
|
1416
|
+
return (_a = {}, _a[key] = false, _a);
|
|
1417
|
+
}).reduce(function (a, b) { return (__assign(__assign({}, a), b)); });
|
|
1418
|
+
var current = ((_c = config === null || config === void 0 ? void 0 : config.options) === null || _c === void 0 ? void 0 : _c.defaultVisibility) &&
|
|
1419
|
+
((_e = (_d = config === null || config === void 0 ? void 0 : config.options) === null || _d === void 0 ? void 0 : _d.defaultVisibility) === null || _e === void 0 ? void 0 : _e.length) > 0
|
|
1420
|
+
? (_f = config === null || config === void 0 ? void 0 : config.options) === null || _f === void 0 ? void 0 : _f.defaultVisibility.map(function (key) {
|
|
1421
|
+
var _a;
|
|
1422
|
+
return (_a = {}, _a[key] = true, _a);
|
|
1423
|
+
}).reduce(function (a, b) { return (__assign(__assign({}, a), b)); })
|
|
1424
|
+
: {};
|
|
1425
|
+
setColumnVisibility(__assign(__assign({}, base), current));
|
|
1426
|
+
}, [(_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.defaultVisibility, table]);
|
|
1427
|
+
React.useEffect(function () {
|
|
1428
|
+
var _a, _b;
|
|
1429
|
+
if ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.defaultOrder) {
|
|
1430
|
+
setColumnOrder((_b = config === null || config === void 0 ? void 0 : config.options) === null || _b === void 0 ? void 0 : _b.defaultOrder);
|
|
1431
|
+
}
|
|
1432
|
+
}, [(_b = config === null || config === void 0 ? void 0 : config.options) === null || _b === void 0 ? void 0 : _b.defaultOrder]);
|
|
1433
|
+
return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.head, children: head && head(state) }), jsxRuntime.jsx("div", { className: "", children: jsxRuntime.jsx("div", { className: "flow-root relative", children: jsxRuntime.jsx("div", { className: "overflow-x-scroll overflow-y-visible", children: jsxRuntime.jsxs("div", { className: "inline-block min-w-full align-middle", children: [jsxRuntime.jsxs("table", { className: "min-w-full border-separate border-spacing-0 ", children: [jsxRuntime.jsx("thead", { className: "", children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsxRuntime.jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxRuntime.jsxs("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
|
|
1391
1434
|
minWidth: !!header.column.columnDef.size &&
|
|
1392
1435
|
header.column.columnDef.size !== 150
|
|
1393
1436
|
? "".concat(header.column.columnDef.size, "px")
|
|
1394
1437
|
: 'auto',
|
|
1395
1438
|
}, children: [header.isPlaceholder
|
|
1396
1439
|
? null
|
|
1397
|
-
: reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsxRuntime.jsx("span", { className: toClassName(styles
|
|
1398
|
-
? styles
|
|
1399
|
-
: styles
|
|
1440
|
+
: reactTable.flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsxRuntime.jsx("span", { className: toClassName(styles.sortIndicator.container, header.column.getIsSorted()
|
|
1441
|
+
? styles.sortIndicator.isSorted
|
|
1442
|
+
: styles.sortIndicator.isNotSorted), children: jsxRuntime.jsx(solid.ChevronDownIcon, { className: toClassName(styles.sortIndicator.icon.container, header.column.getIsSorted() === 'asc' &&
|
|
1400
1443
|
'-scale-100'), "aria-hidden": "true" }) }))] }, header.id)); }) }, headerGroup.id)); }) }), !isLoading && (jsxRuntime.jsx("tbody", { className: "border", children: table === null || table === void 0 ? void 0 : table.getRowModel().rows.map(function (row, index) {
|
|
1401
1444
|
var _a;
|
|
1402
|
-
return (jsxRuntime.jsx("tr", { className: toClassName(styles
|
|
1445
|
+
return (jsxRuntime.jsx("tr", { className: toClassName(styles.body.table.body.row, ((_a = config.options) === null || _a === void 0 ? void 0 : _a.isStriped) &&
|
|
1403
1446
|
index % 2 === 0 &&
|
|
1404
1447
|
'bg-gray-50'), children: row.getVisibleCells().map(function (cell) {
|
|
1405
1448
|
var _a, _b, _c;
|
|
1406
|
-
return (jsxRuntime.jsx("td", { className: toClassName(styles
|
|
1449
|
+
return (jsxRuntime.jsx("td", { className: toClassName(styles.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
|
|
1407
1450
|
index !==
|
|
1408
1451
|
((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) - 1 &&
|
|
1409
1452
|
'border-b border-gray-200'), children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
|
|
1410
1453
|
}) }, row.id));
|
|
1411
|
-
}) }))] }), isLoading && (jsxRuntime.jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsxRuntime.jsx("div", { className: styles
|
|
1454
|
+
}) }))] }), isLoading && (jsxRuntime.jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsxRuntime.jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
|
|
1412
1455
|
};
|
|
1413
1456
|
|
|
1414
|
-
var
|
|
1457
|
+
var base$9 = {
|
|
1415
1458
|
container: '',
|
|
1416
1459
|
head: '',
|
|
1417
1460
|
body: {
|
|
@@ -1446,6 +1489,9 @@ var styles$b = {
|
|
|
1446
1489
|
},
|
|
1447
1490
|
},
|
|
1448
1491
|
};
|
|
1492
|
+
var styles$b = {
|
|
1493
|
+
base: base$9,
|
|
1494
|
+
};
|
|
1449
1495
|
|
|
1450
1496
|
var createColumnHelper = function () {
|
|
1451
1497
|
return reactTable.createColumnHelper();
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|