react-hook-toolkit 1.2.0 → 1.2.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.
@@ -1,299 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
13
- import { forwardRef, useState } from 'react';
14
- import { useEffect, useCallback, useRef, Suspense } from 'react';
15
- import { Paper, MenuList, MenuItem, ListItemIcon, ListItemText, Divider, Typography, styled, Box, Alert, AlertTitle, IconButton, CardContent, Tooltip, Card, Grid, Skeleton, CircularProgress, } from '@mui/material';
16
- import { Close, InsertDriveFile, Image, Description, Download, CheckCircleOutlined, ErrorOutlineOutlined, Upload, } from '@mui/icons-material';
17
- import { useTheme } from '@mui/material/styles';
18
- import NProgress from 'nprogress';
19
- import { ErrorBoundary } from 'react-error-boundary';
20
- import { promise } from '../utils';
21
- import { getHook } from '../chunk1415/chunk143';
22
- import { useWindowSize } from './chunk940514';
23
- function Fallback(_a) {
24
- var error = _a.error;
25
- return (_jsxs(Box, { sx: { padding: 2 }, children: [process.env.NODE_ENV === 'production' && (_jsxs(Alert, { sx: { py: 0, borderLeft: '2px solid #00abff !important', border: '1px solid #d0cfcf' }, severity: "info", children: [_jsx(AlertTitle, { children: "Page Loading Error" }), "Please check your network connection..."] })), process.env.NODE_ENV !== 'production' && (_jsxs(Alert, { severity: "error", sx: { py: 0, borderTop: '2px solid #791212ad !important', border: '1px solid #d0cfcf' }, children: [_jsx(AlertTitle, { children: "Error" }), error.message] }))] }));
26
- }
27
- var Error = function (_a) {
28
- var children = _a.children;
29
- var firstRender = useRef(false);
30
- var handleReload = useCallback(function () {
31
- if (!firstRender.current) {
32
- firstRender.current = true; // Ensure this runs only once
33
- promise(1500).then(function () {
34
- window.location.reload();
35
- });
36
- }
37
- }, []);
38
- return (_jsx(ErrorBoundary, { FallbackComponent: Fallback, onError: function () {
39
- if (process.env.NODE_ENV === 'production') {
40
- handleReload();
41
- }
42
- }, children: children }));
43
- };
44
- var LoadingScreen = function () {
45
- useEffect(function () {
46
- NProgress.start();
47
- return function () {
48
- NProgress.done();
49
- };
50
- }, []);
51
- return (_jsx(Box, { sx: {
52
- backgroundColor: 'background.paper',
53
- minHeight: '100%',
54
- } }));
55
- };
56
- // prettier-ignore
57
- export var DynamicLoader = function (Component) { return function (props) { return (_jsx(Error, { children: _jsx(Suspense, { fallback: _jsx(LoadingScreen, {}), children: _jsx(Component, __assign({}, props)) }) })); }; };
58
- export var AlertMessage = function (_a) {
59
- var type = _a.type, msg = _a.msg, duration = _a.duration;
60
- var _b = getHook('snackBar'), enqueueSnackbar = _b.enqueueSnackbar, closeSnackbar = _b.closeSnackbar;
61
- if (msg !== undefined && msg !== '') {
62
- enqueueSnackbar(msg !== null && msg !== void 0 ? msg : '', {
63
- anchorOrigin: {
64
- // @shivaji perpose dyanamic global alert.
65
- horizontal: 'right',
66
- vertical: 'top',
67
- },
68
- variant: type,
69
- preventDuplicate: true,
70
- // persist: true, whenever you want to close.
71
- action: function (key) { return (_jsx(IconButton, { "aria-label": "close", size: "small", onClick: function () { return closeSnackbar(key); }, children: _jsx(Close, { fontSize: "small", sx: { color: '#fff' } }) })); },
72
- autoHideDuration: duration !== null && duration !== void 0 ? duration : 6000,
73
- });
74
- }
75
- return null;
76
- };
77
- export var DetailsCard = function (_a) {
78
- var _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, title = _a.title, details = _a.details, _c = _a.spacing, spacing = _c === void 0 ? 2 : _c, _d = _a.boxShadow, boxShadow = _d === void 0 ? '0px 0px 2px 2px #d8d8d8' : _d, _e = _a.background, background = _e === void 0 ? '#eee' : _e, _f = _a.loaderType, loaderType = _f === void 0 ? 'skeleton' : _f, _g = _a.displayType, displayType = _g === void 0 ? 'flex' : _g;
79
- var width = useWindowSize().width;
80
- return (_jsx(Card, { sx: { boxShadow: boxShadow }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", sx: { background: background, padding: '4px' }, children: title }), _jsx(Grid, { container: true, spacing: spacing, sx: { mt: 1 }, children: details.filter(Boolean).map(function (item, index) { return (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: width < 1367 ? 6 : 4, children: _jsxs(Box, { display: displayType, alignItems: "center", sx: { fontSize: '14px' }, children: [_jsxs(Typography, { fontWeight: "bold", component: "span", sx: { fontSize: '14px' }, children: [item === null || item === void 0 ? void 0 : item.label, ":\u00A0"] }), isLoading ? (loaderType === 'skeleton' ? (_jsx(Skeleton, { sx: { ml: 2 }, variant: "text", width: 100, height: 20 })) : (_jsx(CircularProgress, { sx: { ml: 2 }, color: "success", size: 18 }))) : (_jsx(Typography, { component: "span", sx: { fontSize: '14px' }, children: (item === null || item === void 0 ? void 0 : item.value) !== undefined && (item === null || item === void 0 ? void 0 : item.value) !== null && (item === null || item === void 0 ? void 0 : item.value) !== '' ? item.value : 'N/A' }))] }) }, index.toString())); }) })] }) }));
81
- };
82
- export var LabeledValue = function (_a) {
83
- var label = _a.label, value = _a.value, _b = _a.style, style = _b === void 0 ? undefined : _b;
84
- return (_jsx(_Fragment, { children: _jsx(Typography, { sx: style !== null && style !== void 0 ? style : { padding: '5px' }, children: _jsxs("span", { style: { fontSize: '13px' }, children: [_jsxs("b", { children: [label, " "] }), ": ", value !== null && value !== void 0 ? value : 'N/A'] }) }) }));
85
- };
86
- export var FilePreview = function (_a) {
87
- var primaryKey = _a.primaryKey, filename = _a.filename, size = _a.size, _b = _a.onDownload, onDownload = _b === void 0 ? undefined : _b, _c = _a.width, width = _c === void 0 ? 350 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#dfdfdf' : _d, _e = _a.fileColor, fileColor = _e === void 0 ? 'primary' : _e, _f = _a.isDownloading, isDownloading = _f === void 0 ? false : _f;
88
- // Icon mapping configuration
89
- var iconMap = {
90
- pdf: _jsx(InsertDriveFile, { fontSize: "large", color: fileColor }),
91
- image: _jsx(Image, { fontSize: "large", color: fileColor }),
92
- doc: _jsx(Description, { fontSize: "large", color: fileColor }),
93
- default: _jsx(Description, { fontSize: "large", color: fileColor }),
94
- };
95
- // Determine file type from filename extension
96
- var getFileType = function (filenames) {
97
- var extension = filenames.split('.').pop().toLowerCase();
98
- if (['pdf'].includes(extension))
99
- return 'pdf';
100
- if (['jpg', 'jpeg', 'png', 'gif'].includes(extension))
101
- return 'image';
102
- if (['doc', 'docx', 'txt'].includes(extension))
103
- return 'doc';
104
- return 'default';
105
- };
106
- return (_jsx(Card, { variant: "outlined", sx: {
107
- maxWidth: width,
108
- minWidth: width,
109
- border: "1px solid ".concat(borderColor),
110
- borderRadius: 1,
111
- '&:hover': { boxShadow: 2 },
112
- marginLeft: 1,
113
- }, children: _jsxs(CardContent, { sx: {
114
- display: 'flex',
115
- alignItems: 'center',
116
- gap: 2,
117
- padding: '8px !important',
118
- }, children: [iconMap[getFileType(filename)], _jsxs(Box, { sx: { flexGrow: 1 }, children: [filename.length > 33 ? (_jsx(Tooltip, { title: filename, placement: "top", arrow: true, children: _jsx(Typography, { sx: {
119
- fontSize: '14px',
120
- whiteSpace: 'nowrap',
121
- overflow: 'hidden',
122
- textOverflow: 'ellipsis',
123
- maxWidth: width - 120,
124
- }, children: filename }) })) : (_jsx(Typography, { sx: {
125
- fontSize: '14px',
126
- whiteSpace: 'nowrap',
127
- overflow: 'hidden',
128
- textOverflow: 'ellipsis',
129
- maxWidth: width - 120,
130
- }, children: filename })), _jsx(Typography, { variant: "caption", color: "text.secondary", children: size })] }), _jsx(IconButton, { disabled: onDownload === undefined, "aria-label": "download", onClick: function () { return onDownload(primaryKey); }, sx: { color: '#dfdfdf', '&:hover': { color: 'primary.main' } }, children: isDownloading ? (_jsx(CircularProgress, { color: "success", size: 20 })) : (_jsx(Download, { fontSize: "small", color: onDownload ? 'primary' : 'inherit' })) })] }) }));
131
- };
132
- var VisuallyHiddenInput = forwardRef(function (props, ref) { return (_jsx("input", __assign({ ref: ref, type: "file", style: {
133
- position: 'absolute',
134
- width: 1,
135
- height: 1,
136
- padding: 0,
137
- overflow: 'hidden',
138
- clip: 'rect(0,0,0,0)',
139
- whiteSpace: 'nowrap',
140
- border: 0,
141
- } }, props))); });
142
- export var UploadFile = function (_a) {
143
- var _b = _a.isUpload, isUpload = _b === void 0 ? true : _b, color = _a.color, _c = _a.state, state = _c === void 0 ? {} : _c, onFileSelect = _a.onFileSelect;
144
- var onFileInputChange = function (e) {
145
- var _a;
146
- var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
147
- if (file) {
148
- onFileSelect(file);
149
- e.target.value = '';
150
- }
151
- };
152
- return (_jsx(Tooltip, { title: "Upload", children: _jsxs(Box, { sx: { position: 'relative', display: 'inline-block' }, children: [_jsxs(IconButton, { disabled: !isUpload, component: "label", children: [(state === null || state === void 0 ? void 0 : state.isUploaded) ? (_jsx(CheckCircleOutlined, { color: "success" })) : (state === null || state === void 0 ? void 0 : state.isUploadError) ? (_jsx(ErrorOutlineOutlined, { color: "error" })) : (_jsx(Upload, { color: color !== null && color !== void 0 ? color : 'primary' })), _jsx(VisuallyHiddenInput, { onChange: onFileInputChange })] }), (state === null || state === void 0 ? void 0 : state.isLoadingUpload) && (_jsx(CircularProgress, { size: "40px", sx: {
153
- position: 'absolute',
154
- top: 0,
155
- left: 0,
156
- zIndex: 1,
157
- } }))] }) }));
158
- };
159
- export var DownloadFile = function (_a) {
160
- var _b = _a.isDownload, isDownload = _b === void 0 ? true : _b, color = _a.color, _c = _a.state, state = _c === void 0 ? {} : _c, onDownload = _a.onDownload;
161
- return (_jsx(Tooltip, { title: "Download", children: _jsxs(Box, { sx: { position: 'relative', display: 'inline-block' }, children: [_jsx(IconButton, { disabled: !isDownload || (state === null || state === void 0 ? void 0 : state.isLoadingDownload), onClick: onDownload, sx: {
162
- bgcolor: function (theme) { return (color ? (theme.palette.mode === 'dark' ? '#303041' : color) : 'default'); },
163
- }, children: (state === null || state === void 0 ? void 0 : state.isDownloaded) ? (_jsx(CheckCircleOutlined, { color: "success" })) : (state === null || state === void 0 ? void 0 : state.isDownloadError) ? (_jsx(ErrorOutlineOutlined, { color: "error" })) : (_jsx(Download, { color: color !== null && color !== void 0 ? color : 'primary' })) }), (state === null || state === void 0 ? void 0 : state.isLoadingDownload) && (_jsx(CircularProgress, { size: "40px", sx: {
164
- position: 'absolute',
165
- top: 0,
166
- left: 0,
167
- zIndex: 1,
168
- } }))] }) }));
169
- };
170
- var StyledMenuPaper = styled(Paper)(function (_a) {
171
- var theme = _a.theme;
172
- return ({
173
- minWidth: 200,
174
- padding: theme.spacing(0, 0),
175
- boxShadow: theme.shadows[3],
176
- '&.context-menu-dark': {
177
- backgroundColor: theme.palette.grey[800],
178
- color: theme.palette.common.white,
179
- },
180
- });
181
- });
182
- var StyledMenuItem = styled(MenuItem)(function (_a) {
183
- var theme = _a.theme;
184
- return ({
185
- padding: theme.spacing(0.5, 1),
186
- fontSize: '14px',
187
- '& .MuiListItemText-root': {
188
- '& .MuiTypography-root': {
189
- fontSize: '14px',
190
- },
191
- },
192
- '&.context-menu-item-dark': {
193
- color: theme.palette.common.white,
194
- '&:hover': {
195
- backgroundColor: theme.palette.grey[700],
196
- },
197
- },
198
- '&.context-menu-item--disabled': {
199
- opacity: 0.5,
200
- pointerEvents: 'none',
201
- },
202
- });
203
- });
204
- var ShortcutText = styled(Typography)(function (_a) {
205
- var theme = _a.theme;
206
- return ({
207
- marginLeft: theme.spacing(2),
208
- fontSize: '0.75rem',
209
- color: theme.palette.text.secondary,
210
- '&.context-menu-shortcut-dark': {
211
- color: theme.palette.grey[400],
212
- },
213
- });
214
- });
215
- export var ContextMenuWrapper = function (_a) {
216
- var options = _a.options, children = _a.children, disabled = _a.disabled, className = _a.className, menuClassName = _a.menuClassName, _b = _a.position, position = _b === void 0 ? 'auto' : _b, onShow = _a.onShow, onHide = _a.onHide, currentInstance = _a.currentInstance, _c = _a.theme, theme = _c === void 0 ? 'light' : _c;
217
- var muiTheme = useTheme();
218
- var _d = useState(false), isVisible = _d[0], setIsVisible = _d[1];
219
- var _e = useState({ x: 0, y: 0 }), menuPosition = _e[0], setMenuPosition = _e[1];
220
- var menuRef = useRef(null);
221
- var triggerRef = useRef(null);
222
- var handleContextMenu = function (e) {
223
- var _a, _b;
224
- e.preventDefault();
225
- if (disabled)
226
- return;
227
- var x = e.clientX;
228
- var y = e.clientY;
229
- if (position === 'auto') {
230
- var viewportWidth = window.innerWidth;
231
- var viewportHeight = window.innerHeight;
232
- var menuWidth = ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200;
233
- var menuHeight = ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 200;
234
- if (x + menuWidth > viewportWidth) {
235
- x = viewportWidth - menuWidth - 5;
236
- }
237
- if (y + menuHeight > viewportHeight) {
238
- y = viewportHeight - menuHeight - 5;
239
- }
240
- }
241
- setMenuPosition({ x: x, y: y });
242
- setIsVisible(true);
243
- onShow === null || onShow === void 0 ? void 0 : onShow();
244
- };
245
- var closeMenu = function () {
246
- setIsVisible(false);
247
- onHide === null || onHide === void 0 ? void 0 : onHide();
248
- };
249
- var handleClickOutside = function (e) {
250
- if (menuRef.current &&
251
- !menuRef.current.contains(e.target) &&
252
- triggerRef.current &&
253
- !triggerRef.current.contains(e.target)) {
254
- closeMenu();
255
- }
256
- };
257
- var handleKeyDown = function (e) {
258
- if (e.key === 'Escape') {
259
- closeMenu();
260
- }
261
- };
262
- var handleItemClick = function (item) {
263
- var _a;
264
- if (item.disabled)
265
- return;
266
- (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, currentInstance !== null && currentInstance !== void 0 ? currentInstance : item);
267
- closeMenu();
268
- };
269
- useEffect(function () {
270
- if (isVisible) {
271
- document.addEventListener('mousedown', handleClickOutside);
272
- document.addEventListener('keydown', handleKeyDown);
273
- }
274
- else {
275
- document.removeEventListener('mousedown', handleClickOutside);
276
- document.removeEventListener('keydown', handleKeyDown);
277
- }
278
- return function () {
279
- document.removeEventListener('mousedown', handleClickOutside);
280
- document.removeEventListener('keydown', handleKeyDown);
281
- };
282
- }, [isVisible]);
283
- return (_jsxs("div", { ref: triggerRef, className: "context-menu-trigger ".concat(className || ''), onContextMenu: handleContextMenu, children: [children, isVisible && (_jsx("div", { ref: menuRef, style: {
284
- position: 'fixed',
285
- left: "".concat(menuPosition.x, "px"),
286
- top: "".concat(menuPosition.y, "px"),
287
- zIndex: muiTheme.zIndex.modal,
288
- }, children: _jsx(StyledMenuPaper, { className: "".concat(menuClassName || '', " context-menu-").concat(theme), children: _jsx(MenuList, { children: options.map(function (item, index) {
289
- if (item === 'divider') {
290
- return _jsx(Divider, { className: "context-menu-divider-".concat(theme) }, "divider-".concat(index.toString()));
291
- }
292
- return (_jsxs(StyledMenuItem, { sx: { fontSize: '10px' }, className: "".concat(item.className || '', " context-menu-item-").concat(theme, " ").concat(item.disabled ? 'context-menu-item--disabled' : ''), onClick: function () { return handleItemClick(item); }, onKeyDown: function (e) {
293
- if (e.key === 'Enter' || e.key === ' ') {
294
- e.preventDefault();
295
- handleItemClick(item);
296
- }
297
- }, tabIndex: item.disabled ? -1 : 0, disabled: item.disabled, children: [item.icon && (_jsx(ListItemIcon, { sx: { marginRight: -1 }, className: "context-menu-icon-".concat(theme), children: item.icon })), _jsx(ListItemText, { className: "context-menu-text-".concat(theme), children: item.label }), item.shortcut && (_jsx(ShortcutText, { className: "context-menu-shortcut-".concat(theme), children: item.shortcut }))] }, item.key || index));
298
- }) }) }) }))] }));
299
- };