@bluemarble/bm-components 1.4.1 → 1.5.0
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.mts +121 -49
- package/dist/index.d.ts +121 -49
- package/dist/index.js +275 -61
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +302 -88
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -2
package/dist/index.mjs
CHANGED
|
@@ -255,7 +255,7 @@ var require_react_is_development = __commonJS({
|
|
|
255
255
|
var ContextProvider = REACT_PROVIDER_TYPE;
|
|
256
256
|
var Element = REACT_ELEMENT_TYPE;
|
|
257
257
|
var ForwardRef = REACT_FORWARD_REF_TYPE;
|
|
258
|
-
var
|
|
258
|
+
var Fragment3 = REACT_FRAGMENT_TYPE;
|
|
259
259
|
var Lazy = REACT_LAZY_TYPE;
|
|
260
260
|
var Memo = REACT_MEMO_TYPE;
|
|
261
261
|
var Portal = REACT_PORTAL_TYPE;
|
|
@@ -314,7 +314,7 @@ var require_react_is_development = __commonJS({
|
|
|
314
314
|
exports.ContextProvider = ContextProvider;
|
|
315
315
|
exports.Element = Element;
|
|
316
316
|
exports.ForwardRef = ForwardRef;
|
|
317
|
-
exports.Fragment =
|
|
317
|
+
exports.Fragment = Fragment3;
|
|
318
318
|
exports.Lazy = Lazy;
|
|
319
319
|
exports.Memo = Memo;
|
|
320
320
|
exports.Portal = Portal;
|
|
@@ -2404,7 +2404,7 @@ function createBox(options = {}) {
|
|
|
2404
2404
|
const BoxRoot = styled("div", {
|
|
2405
2405
|
shouldForwardProp: (prop) => prop !== "theme" && prop !== "sx" && prop !== "as"
|
|
2406
2406
|
})(styleFunctionSx_default);
|
|
2407
|
-
const
|
|
2407
|
+
const Box7 = /* @__PURE__ */ React3.forwardRef(function Box8(inProps, ref) {
|
|
2408
2408
|
const theme = useTheme_default(defaultTheme);
|
|
2409
2409
|
const _extendSxProp = extendSxProp(inProps), {
|
|
2410
2410
|
className,
|
|
@@ -2417,7 +2417,7 @@ function createBox(options = {}) {
|
|
|
2417
2417
|
theme: themeId ? theme[themeId] || theme : theme
|
|
2418
2418
|
}, other));
|
|
2419
2419
|
});
|
|
2420
|
-
return
|
|
2420
|
+
return Box7;
|
|
2421
2421
|
}
|
|
2422
2422
|
|
|
2423
2423
|
// node_modules/@mui/utils/generateUtilityClass/generateUtilityClass.js
|
|
@@ -3702,6 +3702,7 @@ var TabPanel = (props) => {
|
|
|
3702
3702
|
// src/components/BaseGrid/index.tsx
|
|
3703
3703
|
import React20 from "react";
|
|
3704
3704
|
import {
|
|
3705
|
+
Box as Box4,
|
|
3705
3706
|
LinearProgress as LinearProgress2,
|
|
3706
3707
|
Paper as Paper2,
|
|
3707
3708
|
Table as Table2,
|
|
@@ -3817,7 +3818,6 @@ function BaseGrid({
|
|
|
3817
3818
|
tableBodyProps,
|
|
3818
3819
|
tableHeadProps,
|
|
3819
3820
|
tableProps,
|
|
3820
|
-
sortedDirection,
|
|
3821
3821
|
sortedBy,
|
|
3822
3822
|
onSortBy,
|
|
3823
3823
|
dense = true,
|
|
@@ -3825,6 +3825,8 @@ function BaseGrid({
|
|
|
3825
3825
|
bordered,
|
|
3826
3826
|
currentPage,
|
|
3827
3827
|
totalNumberOfPages,
|
|
3828
|
+
tableSortLabelProps,
|
|
3829
|
+
boxContainerProps,
|
|
3828
3830
|
onPageChange,
|
|
3829
3831
|
rowsPerPage,
|
|
3830
3832
|
setRowsPerPage,
|
|
@@ -3832,6 +3834,7 @@ function BaseGrid({
|
|
|
3832
3834
|
hideFooter,
|
|
3833
3835
|
prependColumn,
|
|
3834
3836
|
appendColumn,
|
|
3837
|
+
loadingColSpan,
|
|
3835
3838
|
isLoading
|
|
3836
3839
|
}) {
|
|
3837
3840
|
return /* @__PURE__ */ React20.createElement(
|
|
@@ -3840,34 +3843,52 @@ function BaseGrid({
|
|
|
3840
3843
|
sx: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, styles.rowGap(dense)), styles.bordered(bordered)), styles.striped(striped)), styles.lastRowBorder(hideFooter)), paperProps == null ? void 0 : paperProps.sx)
|
|
3841
3844
|
}),
|
|
3842
3845
|
/* @__PURE__ */ React20.createElement(
|
|
3843
|
-
|
|
3844
|
-
__spreadProps(__spreadValues({
|
|
3845
|
-
|
|
3846
|
-
stickyHeader: true
|
|
3847
|
-
}, tableProps), {
|
|
3848
|
-
sx: __spreadValues({}, tableProps == null ? void 0 : tableProps.sx)
|
|
3846
|
+
Box4,
|
|
3847
|
+
__spreadProps(__spreadValues({}, boxContainerProps), {
|
|
3848
|
+
sx: __spreadValues({ overflowX: "auto" }, boxContainerProps == null ? void 0 : boxContainerProps.sx)
|
|
3849
3849
|
}),
|
|
3850
|
-
/* @__PURE__ */ React20.createElement(
|
|
3851
|
-
|
|
3852
|
-
{
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
|
|
3856
|
-
|
|
3857
|
-
|
|
3858
|
-
},
|
|
3859
|
-
|
|
3860
|
-
|
|
3850
|
+
/* @__PURE__ */ React20.createElement(
|
|
3851
|
+
Table2,
|
|
3852
|
+
__spreadProps(__spreadValues({
|
|
3853
|
+
size: "small",
|
|
3854
|
+
stickyHeader: true
|
|
3855
|
+
}, tableProps), {
|
|
3856
|
+
sx: __spreadValues({}, tableProps == null ? void 0 : tableProps.sx)
|
|
3857
|
+
}),
|
|
3858
|
+
/* @__PURE__ */ React20.createElement(TableHead2, __spreadValues({}, tableHeadProps), /* @__PURE__ */ React20.createElement(TableRow3, null, prependColumn, columns.map((column) => {
|
|
3859
|
+
var _a;
|
|
3860
|
+
return /* @__PURE__ */ React20.createElement(
|
|
3861
|
+
TableCell4,
|
|
3862
|
+
{
|
|
3863
|
+
key: column.name,
|
|
3864
|
+
padding: dense ? "none" : "normal",
|
|
3865
|
+
sx: __spreadValues({
|
|
3866
|
+
pl: 2
|
|
3867
|
+
}, column == null ? void 0 : column.sx)
|
|
3868
|
+
},
|
|
3869
|
+
column.children ? column.children : /* @__PURE__ */ React20.createElement(
|
|
3870
|
+
TableSortLabel2,
|
|
3871
|
+
__spreadProps(__spreadValues({
|
|
3872
|
+
active: sortedBy.some((p) => p.prop === column.name),
|
|
3873
|
+
direction: ((_a = sortedBy.find((p) => p.prop === column.name)) == null ? void 0 : _a.direction) || "desc",
|
|
3874
|
+
onClick: () => onSortBy(column.name),
|
|
3875
|
+
disabled: column.canSort === false
|
|
3876
|
+
}, tableSortLabelProps), {
|
|
3877
|
+
sx: __spreadValues({}, tableSortLabelProps == null ? void 0 : tableSortLabelProps.sx)
|
|
3878
|
+
}),
|
|
3879
|
+
column.label
|
|
3880
|
+
)
|
|
3881
|
+
);
|
|
3882
|
+
}), appendColumn), isLoading && /* @__PURE__ */ React20.createElement(TableRow3, null, /* @__PURE__ */ React20.createElement(
|
|
3883
|
+
TableCell4,
|
|
3861
3884
|
{
|
|
3862
|
-
|
|
3863
|
-
|
|
3864
|
-
onClick: () => onSortBy(column.name),
|
|
3865
|
-
disabled: column.canSort === false
|
|
3885
|
+
colSpan: loadingColSpan || columns.length,
|
|
3886
|
+
sx: { p: 0, border: "none" }
|
|
3866
3887
|
},
|
|
3867
|
-
|
|
3868
|
-
)
|
|
3869
|
-
|
|
3870
|
-
|
|
3888
|
+
/* @__PURE__ */ React20.createElement(LinearProgress2, null)
|
|
3889
|
+
))),
|
|
3890
|
+
/* @__PURE__ */ React20.createElement(TableBody2, __spreadValues({}, tableBodyProps), children)
|
|
3891
|
+
)
|
|
3871
3892
|
),
|
|
3872
3893
|
!hideFooter && /* @__PURE__ */ React20.createElement(
|
|
3873
3894
|
GridPagination,
|
|
@@ -3884,16 +3905,28 @@ function BaseGrid({
|
|
|
3884
3905
|
);
|
|
3885
3906
|
}
|
|
3886
3907
|
|
|
3887
|
-
// src/components/
|
|
3908
|
+
// src/components/BaseGrid/BaseGridAutoRows.tsx
|
|
3888
3909
|
import React21 from "react";
|
|
3910
|
+
import { Fragment as Fragment2 } from "react";
|
|
3911
|
+
import { TableCell as TableCell5, TableRow as TableRow4 } from "@mui/material";
|
|
3912
|
+
function BaseGridAutoRows({
|
|
3913
|
+
data,
|
|
3914
|
+
columns,
|
|
3915
|
+
rowKey
|
|
3916
|
+
}) {
|
|
3917
|
+
return /* @__PURE__ */ React21.createElement(Fragment2, null, data.map((row) => /* @__PURE__ */ React21.createElement(TableRow4, { key: row[rowKey] }, columns.map((column) => /* @__PURE__ */ React21.createElement(TableCell5, { key: column.name }, row[column.name])))));
|
|
3918
|
+
}
|
|
3919
|
+
|
|
3920
|
+
// src/components/Modal/index.tsx
|
|
3921
|
+
import React22 from "react";
|
|
3889
3922
|
import {
|
|
3890
|
-
Box as
|
|
3923
|
+
Box as Box5,
|
|
3891
3924
|
Modal as MuiModal
|
|
3892
3925
|
} from "@mui/material";
|
|
3893
3926
|
var Modal = (_a) => {
|
|
3894
3927
|
var _b = _a, { open, onClose } = _b, rest = __objRest(_b, ["open", "onClose"]);
|
|
3895
|
-
return /* @__PURE__ */
|
|
3896
|
-
|
|
3928
|
+
return /* @__PURE__ */ React22.createElement(MuiModal, __spreadValues({ open, onClose }, rest), /* @__PURE__ */ React22.createElement(
|
|
3929
|
+
Box5,
|
|
3897
3930
|
{
|
|
3898
3931
|
sx: {
|
|
3899
3932
|
outline: "none",
|
|
@@ -3905,7 +3938,7 @@ var Modal = (_a) => {
|
|
|
3905
3938
|
borderRadius: 1
|
|
3906
3939
|
}
|
|
3907
3940
|
},
|
|
3908
|
-
/* @__PURE__ */
|
|
3941
|
+
/* @__PURE__ */ React22.createElement(React22.Fragment, null, rest.children)
|
|
3909
3942
|
));
|
|
3910
3943
|
};
|
|
3911
3944
|
|
|
@@ -3918,9 +3951,9 @@ function GetInputLabel(columns) {
|
|
|
3918
3951
|
}
|
|
3919
3952
|
|
|
3920
3953
|
// src/components/Dialog/index.tsx
|
|
3921
|
-
import
|
|
3954
|
+
import React23 from "react";
|
|
3922
3955
|
import {
|
|
3923
|
-
Box as
|
|
3956
|
+
Box as Box6,
|
|
3924
3957
|
Dialog as DefaultDialog,
|
|
3925
3958
|
DialogContentText,
|
|
3926
3959
|
DialogActions,
|
|
@@ -3942,8 +3975,8 @@ var Dialog = (_a) => {
|
|
|
3942
3975
|
"body",
|
|
3943
3976
|
"options"
|
|
3944
3977
|
]);
|
|
3945
|
-
return /* @__PURE__ */
|
|
3946
|
-
return /* @__PURE__ */
|
|
3978
|
+
return /* @__PURE__ */ React23.createElement(DefaultDialog, __spreadValues({ open }, rest), /* @__PURE__ */ React23.createElement(Box6, { sx: { p: 2 } }, /* @__PURE__ */ React23.createElement(DialogTitle, { sx: { fontWeight: "bold" } }, title), /* @__PURE__ */ React23.createElement(DialogContentText, { sx: { px: "10px", textAlign: "center", mb: 2 } }, body), /* @__PURE__ */ React23.createElement(DialogActions, null, options.map((option, index) => {
|
|
3979
|
+
return /* @__PURE__ */ React23.createElement(
|
|
3947
3980
|
Button3,
|
|
3948
3981
|
{
|
|
3949
3982
|
key: index,
|
|
@@ -3956,7 +3989,7 @@ var Dialog = (_a) => {
|
|
|
3956
3989
|
disableElevation: true,
|
|
3957
3990
|
disabled: loading
|
|
3958
3991
|
},
|
|
3959
|
-
loading && option.focus ? /* @__PURE__ */
|
|
3992
|
+
loading && option.focus ? /* @__PURE__ */ React23.createElement(CircularProgress3, { size: 25, color: "inherit" }) : /* @__PURE__ */ React23.createElement(React23.Fragment, null, option.label)
|
|
3960
3993
|
);
|
|
3961
3994
|
}))));
|
|
3962
3995
|
};
|
|
@@ -4069,15 +4102,15 @@ import { useContext as useContext3, useEffect as useEffect4, useRef as useRef3 }
|
|
|
4069
4102
|
import { useContext as useContext2 } from "react";
|
|
4070
4103
|
|
|
4071
4104
|
// src/contexts/AlertContext.tsx
|
|
4072
|
-
import
|
|
4105
|
+
import React25 from "react";
|
|
4073
4106
|
import { createContext, useState as useState3 } from "react";
|
|
4074
4107
|
|
|
4075
4108
|
// src/components/Toast/index.tsx
|
|
4076
|
-
import
|
|
4109
|
+
import React24 from "react";
|
|
4077
4110
|
import { Alert, IconButton as IconButton4, Snackbar } from "@mui/material";
|
|
4078
4111
|
import { MdClose as MdClose2 } from "react-icons/md";
|
|
4079
4112
|
var Toast = ({ open, onClose, severity, message }) => {
|
|
4080
|
-
return /* @__PURE__ */
|
|
4113
|
+
return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
|
|
4081
4114
|
Snackbar,
|
|
4082
4115
|
{
|
|
4083
4116
|
open,
|
|
@@ -4086,12 +4119,12 @@ var Toast = ({ open, onClose, severity, message }) => {
|
|
|
4086
4119
|
anchorOrigin: { vertical: "top", horizontal: "right" },
|
|
4087
4120
|
sx: { zIndex: 99999999 }
|
|
4088
4121
|
},
|
|
4089
|
-
/* @__PURE__ */
|
|
4122
|
+
/* @__PURE__ */ React24.createElement(
|
|
4090
4123
|
Alert,
|
|
4091
4124
|
{
|
|
4092
4125
|
severity,
|
|
4093
4126
|
elevation: 2,
|
|
4094
|
-
action: /* @__PURE__ */
|
|
4127
|
+
action: /* @__PURE__ */ React24.createElement(
|
|
4095
4128
|
IconButton4,
|
|
4096
4129
|
{
|
|
4097
4130
|
"aria-label": "close",
|
|
@@ -4099,7 +4132,7 @@ var Toast = ({ open, onClose, severity, message }) => {
|
|
|
4099
4132
|
size: "small",
|
|
4100
4133
|
onClick: onClose
|
|
4101
4134
|
},
|
|
4102
|
-
/* @__PURE__ */
|
|
4135
|
+
/* @__PURE__ */ React24.createElement(MdClose2, { fontSize: "inherit" })
|
|
4103
4136
|
)
|
|
4104
4137
|
},
|
|
4105
4138
|
message
|
|
@@ -4121,7 +4154,7 @@ var AlertProvider = ({ children }) => {
|
|
|
4121
4154
|
function onCloseToast() {
|
|
4122
4155
|
setIsVisible(false);
|
|
4123
4156
|
}
|
|
4124
|
-
return /* @__PURE__ */
|
|
4157
|
+
return /* @__PURE__ */ React25.createElement(AlertContext.Provider, { value: { createAlert } }, children, /* @__PURE__ */ React25.createElement(
|
|
4125
4158
|
Toast,
|
|
4126
4159
|
{
|
|
4127
4160
|
open: isVisible,
|
|
@@ -4152,11 +4185,11 @@ function useLoading() {
|
|
|
4152
4185
|
}
|
|
4153
4186
|
|
|
4154
4187
|
// src/contexts/FormHelperProvider.tsx
|
|
4155
|
-
import
|
|
4188
|
+
import React26 from "react";
|
|
4156
4189
|
import { createContext as createContext2 } from "react";
|
|
4157
4190
|
var FormHelperContext = createContext2({});
|
|
4158
4191
|
var FormHelperProvider = ({ formatErrorMessage, api, children }) => {
|
|
4159
|
-
return /* @__PURE__ */
|
|
4192
|
+
return /* @__PURE__ */ React26.createElement(FormHelperContext.Provider, { value: { formatErrorMessage, api } }, children);
|
|
4160
4193
|
};
|
|
4161
4194
|
|
|
4162
4195
|
// src/hooks/useFormHelper.ts
|
|
@@ -4637,53 +4670,67 @@ function createFilter(filters) {
|
|
|
4637
4670
|
}
|
|
4638
4671
|
|
|
4639
4672
|
// src/hooks/useGrid.ts
|
|
4673
|
+
import sortBy from "sort-by";
|
|
4640
4674
|
function useGrid({
|
|
4641
4675
|
columns,
|
|
4642
4676
|
filters = [],
|
|
4643
4677
|
search,
|
|
4644
|
-
rowsPerPageOptions = [30, 60, 100]
|
|
4678
|
+
rowsPerPageOptions = [30, 60, 100],
|
|
4679
|
+
defaultData: externalDefaultData,
|
|
4680
|
+
defaultCurrentPage,
|
|
4681
|
+
defaultSortedBy
|
|
4645
4682
|
}) {
|
|
4646
|
-
const [defaultData, setDefaultData] = useState6([]);
|
|
4647
|
-
const [sortedBy, setSortedBy] = useState6(
|
|
4648
|
-
|
|
4649
|
-
|
|
4683
|
+
const [defaultData, setDefaultData] = useState6(externalDefaultData || []);
|
|
4684
|
+
const [sortedBy, setSortedBy] = useState6(
|
|
4685
|
+
defaultSortedBy || []
|
|
4686
|
+
);
|
|
4687
|
+
const [currentPage, setCurrentPage] = useState6(defaultCurrentPage || 0);
|
|
4650
4688
|
const [rowsPerPage, setRowsPerPage] = useState6(rowsPerPageOptions[0]);
|
|
4651
|
-
const toggleSortedDirection = () => {
|
|
4652
|
-
if (
|
|
4653
|
-
|
|
4654
|
-
|
|
4655
|
-
setSortedDirection("desc");
|
|
4689
|
+
const toggleSortedDirection = (direction) => {
|
|
4690
|
+
if (direction === "asc")
|
|
4691
|
+
return "desc";
|
|
4692
|
+
return "asc";
|
|
4656
4693
|
};
|
|
4657
4694
|
function setSort(prop, direction) {
|
|
4658
|
-
setSortedBy(prop);
|
|
4659
|
-
setSortedDirection(direction);
|
|
4695
|
+
setSortedBy((prev) => [...prev, { prop, direction }]);
|
|
4660
4696
|
}
|
|
4661
4697
|
const onSortBy = (prop) => {
|
|
4662
4698
|
if (!prop)
|
|
4663
4699
|
return;
|
|
4664
|
-
|
|
4665
|
-
|
|
4666
|
-
|
|
4667
|
-
setSortedBy(
|
|
4668
|
-
} else
|
|
4669
|
-
|
|
4700
|
+
const currentSorted = sortedBy.find((p) => p.prop === prop);
|
|
4701
|
+
if (currentSorted) {
|
|
4702
|
+
if (currentSorted.direction === "asc") {
|
|
4703
|
+
setSortedBy((prev) => prev.filter((p) => p.prop !== prop));
|
|
4704
|
+
} else {
|
|
4705
|
+
setSortedBy((prev) => {
|
|
4706
|
+
const newArr = prev.map((p) => {
|
|
4707
|
+
if (p.prop !== prop)
|
|
4708
|
+
return p;
|
|
4709
|
+
return {
|
|
4710
|
+
prop: p.prop,
|
|
4711
|
+
direction: toggleSortedDirection(p.direction)
|
|
4712
|
+
};
|
|
4713
|
+
});
|
|
4714
|
+
return [...newArr].slice(0);
|
|
4715
|
+
});
|
|
4716
|
+
}
|
|
4670
4717
|
} else {
|
|
4671
|
-
|
|
4672
|
-
setSortedBy(prop);
|
|
4718
|
+
setSortedBy((prev) => [...prev, { prop, direction: "desc" }]);
|
|
4673
4719
|
}
|
|
4674
4720
|
};
|
|
4675
4721
|
const set = (data) => {
|
|
4676
4722
|
setDefaultData(data);
|
|
4677
4723
|
};
|
|
4678
4724
|
function sortData(data) {
|
|
4679
|
-
if (sortedBy) {
|
|
4680
|
-
|
|
4681
|
-
|
|
4682
|
-
|
|
4683
|
-
|
|
4684
|
-
|
|
4685
|
-
|
|
4686
|
-
|
|
4725
|
+
if (sortedBy.length > 0) {
|
|
4726
|
+
const symbolDir = {
|
|
4727
|
+
asc: "",
|
|
4728
|
+
desc: "-"
|
|
4729
|
+
};
|
|
4730
|
+
const formattedKeys = sortedBy.map(
|
|
4731
|
+
({ prop, direction }) => `${symbolDir[direction]}${prop}`
|
|
4732
|
+
);
|
|
4733
|
+
return data.sort(sortBy(...formattedKeys));
|
|
4687
4734
|
} else
|
|
4688
4735
|
return data;
|
|
4689
4736
|
}
|
|
@@ -4715,7 +4762,7 @@ function useGrid({
|
|
|
4715
4762
|
const startPage = currentPage * rowsPerPage;
|
|
4716
4763
|
const endPage = startPage + rowsPerPage;
|
|
4717
4764
|
return sortedData.slice(startPage, endPage);
|
|
4718
|
-
}, [sortedBy,
|
|
4765
|
+
}, [sortedBy, filteredData, currentPage, rowsPerPage]);
|
|
4719
4766
|
const totalNumberOfPages = Math.ceil(filteredData.length / rowsPerPage) - 1;
|
|
4720
4767
|
return {
|
|
4721
4768
|
data: displayData,
|
|
@@ -4723,7 +4770,6 @@ function useGrid({
|
|
|
4723
4770
|
onSortBy,
|
|
4724
4771
|
sortedBy,
|
|
4725
4772
|
defaultData,
|
|
4726
|
-
sortedDirection,
|
|
4727
4773
|
columns,
|
|
4728
4774
|
currentPage,
|
|
4729
4775
|
totalNumberOfPages: totalNumberOfPages < 0 ? 0 : totalNumberOfPages,
|
|
@@ -4769,10 +4815,176 @@ function createSearch(options) {
|
|
|
4769
4815
|
};
|
|
4770
4816
|
}
|
|
4771
4817
|
|
|
4818
|
+
// src/hooks/useAsyncGrid.ts
|
|
4819
|
+
import { useCallback, useEffect as useEffect5, useState as useState7 } from "react";
|
|
4820
|
+
function useAsyncGrid({
|
|
4821
|
+
columns,
|
|
4822
|
+
filters = [],
|
|
4823
|
+
search,
|
|
4824
|
+
rowsPerPageOptions = [30, 60, 100],
|
|
4825
|
+
onRequest,
|
|
4826
|
+
axiosInstance,
|
|
4827
|
+
url,
|
|
4828
|
+
defaultData: externalDefaultData,
|
|
4829
|
+
defaultCurrentPage,
|
|
4830
|
+
defaultSortedBy
|
|
4831
|
+
}) {
|
|
4832
|
+
const [defaultData, setDefaultData] = useState7(externalDefaultData || []);
|
|
4833
|
+
const [sortedBy, setSortedBy] = useState7(
|
|
4834
|
+
defaultSortedBy || []
|
|
4835
|
+
);
|
|
4836
|
+
const [totalNumberOfItems, setTotalNumberOfItems] = useState7(0);
|
|
4837
|
+
const [isLoading, setIsLoading] = useState7(false);
|
|
4838
|
+
const [currentPage, setCurrentPage] = useState7(defaultCurrentPage || 0);
|
|
4839
|
+
const [rowsPerPage, setRowsPerPage] = useState7(rowsPerPageOptions[0]);
|
|
4840
|
+
const totalNumberOfPages = Math.ceil(totalNumberOfItems / rowsPerPage) - 1;
|
|
4841
|
+
const toggleSortedDirection = (direction) => {
|
|
4842
|
+
if (direction === "asc")
|
|
4843
|
+
return "desc";
|
|
4844
|
+
return "asc";
|
|
4845
|
+
};
|
|
4846
|
+
function setSort(prop, direction) {
|
|
4847
|
+
setSortedBy((prev) => [...prev, { prop, direction }]);
|
|
4848
|
+
}
|
|
4849
|
+
const onSortBy = (prop) => __async(this, null, function* () {
|
|
4850
|
+
if (!prop)
|
|
4851
|
+
return;
|
|
4852
|
+
let finalArr = [];
|
|
4853
|
+
const currentSorted = sortedBy.find((p) => p.prop === prop);
|
|
4854
|
+
if (currentSorted) {
|
|
4855
|
+
if (currentSorted.direction === "asc") {
|
|
4856
|
+
finalArr = sortedBy.filter((p) => p.prop !== prop);
|
|
4857
|
+
} else {
|
|
4858
|
+
finalArr = sortedBy.map((p) => {
|
|
4859
|
+
if (p.prop !== prop)
|
|
4860
|
+
return p;
|
|
4861
|
+
return {
|
|
4862
|
+
prop: p.prop,
|
|
4863
|
+
direction: toggleSortedDirection(p.direction)
|
|
4864
|
+
};
|
|
4865
|
+
});
|
|
4866
|
+
}
|
|
4867
|
+
} else {
|
|
4868
|
+
finalArr = [...sortedBy, { prop, direction: "desc" }];
|
|
4869
|
+
}
|
|
4870
|
+
yield updateGridContent({
|
|
4871
|
+
page: currentPage,
|
|
4872
|
+
sortedBy: finalArr,
|
|
4873
|
+
rowsPerPage
|
|
4874
|
+
});
|
|
4875
|
+
});
|
|
4876
|
+
const set = useCallback(
|
|
4877
|
+
(data) => {
|
|
4878
|
+
setDefaultData(data);
|
|
4879
|
+
},
|
|
4880
|
+
[setDefaultData]
|
|
4881
|
+
);
|
|
4882
|
+
function baseRequest(_0) {
|
|
4883
|
+
return __async(this, arguments, function* ({
|
|
4884
|
+
page,
|
|
4885
|
+
search: search2,
|
|
4886
|
+
filters: filters2,
|
|
4887
|
+
sortedBy: sortedBy2,
|
|
4888
|
+
rowsPerPage: rowsPerPage2
|
|
4889
|
+
}) {
|
|
4890
|
+
if (!axiosInstance)
|
|
4891
|
+
throw new Error("Axios instance not provided");
|
|
4892
|
+
try {
|
|
4893
|
+
const params = new URLSearchParams({
|
|
4894
|
+
page: String(page),
|
|
4895
|
+
rowsPerPage: String(rowsPerPage2),
|
|
4896
|
+
searchText: (search2 == null ? void 0 : search2.value) || "",
|
|
4897
|
+
sort: sortedBy2.map(({ prop, direction }) => `${prop}:${direction}`).join(","),
|
|
4898
|
+
filters: filters2.map(
|
|
4899
|
+
(filter) => `${filter.prop}:${filter.compareType}:${filter.value}`
|
|
4900
|
+
).join(",")
|
|
4901
|
+
});
|
|
4902
|
+
const pathWithParams = `${url}?${params.toString()}`;
|
|
4903
|
+
const { data } = yield axiosInstance.get(pathWithParams);
|
|
4904
|
+
setTotalNumberOfItems(data.totalNumberOfItems);
|
|
4905
|
+
return data.rows;
|
|
4906
|
+
} catch (error) {
|
|
4907
|
+
return [];
|
|
4908
|
+
}
|
|
4909
|
+
});
|
|
4910
|
+
}
|
|
4911
|
+
const updateGridContent = useCallback(
|
|
4912
|
+
(_0) => __async(this, [_0], function* ({
|
|
4913
|
+
page,
|
|
4914
|
+
sortedBy: sortedBy2,
|
|
4915
|
+
rowsPerPage: rowsPerPage2
|
|
4916
|
+
}) {
|
|
4917
|
+
setIsLoading(true);
|
|
4918
|
+
try {
|
|
4919
|
+
const props = {
|
|
4920
|
+
page,
|
|
4921
|
+
rowsPerPage: rowsPerPage2,
|
|
4922
|
+
sortedBy: sortedBy2,
|
|
4923
|
+
search,
|
|
4924
|
+
filters
|
|
4925
|
+
};
|
|
4926
|
+
const result = !onRequest ? yield baseRequest(props) : yield onRequest(props);
|
|
4927
|
+
setSortedBy(sortedBy2);
|
|
4928
|
+
setRowsPerPage(rowsPerPage2);
|
|
4929
|
+
set(result);
|
|
4930
|
+
setCurrentPage(page);
|
|
4931
|
+
} catch (error) {
|
|
4932
|
+
throw error;
|
|
4933
|
+
} finally {
|
|
4934
|
+
setIsLoading(false);
|
|
4935
|
+
}
|
|
4936
|
+
}),
|
|
4937
|
+
[set, rowsPerPage, setCurrentPage, search, filters]
|
|
4938
|
+
);
|
|
4939
|
+
const onPageChange = (pageNumber) => {
|
|
4940
|
+
if (pageNumber < 0)
|
|
4941
|
+
return;
|
|
4942
|
+
if (pageNumber > totalNumberOfPages)
|
|
4943
|
+
return;
|
|
4944
|
+
updateGridContent({ page: pageNumber, sortedBy, rowsPerPage });
|
|
4945
|
+
};
|
|
4946
|
+
const onChangeRowsPerPage = (rows) => {
|
|
4947
|
+
let totalNumberOfPages2 = Math.round(totalNumberOfItems / rows) - 1;
|
|
4948
|
+
totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
|
|
4949
|
+
if (currentPage > totalNumberOfPages2)
|
|
4950
|
+
updateGridContent({
|
|
4951
|
+
page: totalNumberOfPages2,
|
|
4952
|
+
sortedBy,
|
|
4953
|
+
rowsPerPage: rows
|
|
4954
|
+
});
|
|
4955
|
+
updateGridContent({
|
|
4956
|
+
page: currentPage,
|
|
4957
|
+
sortedBy,
|
|
4958
|
+
rowsPerPage: rows
|
|
4959
|
+
});
|
|
4960
|
+
};
|
|
4961
|
+
const displayData = defaultData;
|
|
4962
|
+
useEffect5(() => {
|
|
4963
|
+
updateGridContent({ page: 0, sortedBy: [], rowsPerPage });
|
|
4964
|
+
}, []);
|
|
4965
|
+
return {
|
|
4966
|
+
data: displayData,
|
|
4967
|
+
set,
|
|
4968
|
+
onSortBy,
|
|
4969
|
+
sortedBy,
|
|
4970
|
+
defaultData,
|
|
4971
|
+
columns,
|
|
4972
|
+
currentPage,
|
|
4973
|
+
totalNumberOfPages: totalNumberOfPages < 0 ? 0 : totalNumberOfPages,
|
|
4974
|
+
onPageChange,
|
|
4975
|
+
setRowsPerPage: onChangeRowsPerPage,
|
|
4976
|
+
rowsPerPageOptions,
|
|
4977
|
+
rowsPerPage,
|
|
4978
|
+
setSort,
|
|
4979
|
+
isLoading,
|
|
4980
|
+
setIsLoading
|
|
4981
|
+
};
|
|
4982
|
+
}
|
|
4983
|
+
|
|
4772
4984
|
// src/hooks/useEvent.ts
|
|
4773
|
-
import { useEffect as
|
|
4985
|
+
import { useEffect as useEffect6 } from "react";
|
|
4774
4986
|
function useEvent(event, handler, passive = false) {
|
|
4775
|
-
|
|
4987
|
+
useEffect6(() => {
|
|
4776
4988
|
window.addEventListener(event, handler, passive);
|
|
4777
4989
|
return function cleanup() {
|
|
4778
4990
|
window.removeEventListener(event, handler);
|
|
@@ -4781,11 +4993,11 @@ function useEvent(event, handler, passive = false) {
|
|
|
4781
4993
|
}
|
|
4782
4994
|
|
|
4783
4995
|
// src/contexts/AuthContext.tsx
|
|
4784
|
-
import
|
|
4996
|
+
import React28 from "react";
|
|
4785
4997
|
import {
|
|
4786
4998
|
createContext as createContext3,
|
|
4787
|
-
useEffect as
|
|
4788
|
-
useState as
|
|
4999
|
+
useEffect as useEffect7,
|
|
5000
|
+
useState as useState8
|
|
4789
5001
|
} from "react";
|
|
4790
5002
|
import { parseCookies as parseCookies2 } from "nookies";
|
|
4791
5003
|
function createAuthContext() {
|
|
@@ -4797,8 +5009,8 @@ function CreateAuthProvider({
|
|
|
4797
5009
|
sessionTokenName,
|
|
4798
5010
|
Provider
|
|
4799
5011
|
}) {
|
|
4800
|
-
const [user, setUser] =
|
|
4801
|
-
const [status, setStatus] =
|
|
5012
|
+
const [user, setUser] = useState8();
|
|
5013
|
+
const [status, setStatus] = useState8("unauthenticated");
|
|
4802
5014
|
const { createAlert } = useAlert();
|
|
4803
5015
|
const signIn = (_0) => __async(this, [_0], function* ({ email, password }) {
|
|
4804
5016
|
setStatus("loading");
|
|
@@ -4825,7 +5037,7 @@ function CreateAuthProvider({
|
|
|
4825
5037
|
setUser(void 0);
|
|
4826
5038
|
});
|
|
4827
5039
|
}
|
|
4828
|
-
|
|
5040
|
+
useEffect7(() => {
|
|
4829
5041
|
const token = parseCookies2()[sessionTokenName];
|
|
4830
5042
|
if (token) {
|
|
4831
5043
|
setStatus("loading");
|
|
@@ -4837,7 +5049,7 @@ function CreateAuthProvider({
|
|
|
4837
5049
|
});
|
|
4838
5050
|
}
|
|
4839
5051
|
}, [api, sessionTokenName]);
|
|
4840
|
-
return /* @__PURE__ */
|
|
5052
|
+
return /* @__PURE__ */ React28.createElement(
|
|
4841
5053
|
Provider,
|
|
4842
5054
|
{
|
|
4843
5055
|
value: {
|
|
@@ -4857,6 +5069,7 @@ export {
|
|
|
4857
5069
|
AuthHelper,
|
|
4858
5070
|
Autocomplete2 as Autocomplete,
|
|
4859
5071
|
BaseGrid,
|
|
5072
|
+
BaseGridAutoRows,
|
|
4860
5073
|
Checkbox,
|
|
4861
5074
|
CreateAuthProvider,
|
|
4862
5075
|
Dialog,
|
|
@@ -4881,6 +5094,7 @@ export {
|
|
|
4881
5094
|
filterData,
|
|
4882
5095
|
getTabProps,
|
|
4883
5096
|
useAlert,
|
|
5097
|
+
useAsyncGrid,
|
|
4884
5098
|
useEvent,
|
|
4885
5099
|
useFilter,
|
|
4886
5100
|
useFormHelper,
|