tp-react-elements-dev 1.12.33 → 1.12.34
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,17 +1,17 @@
|
|
|
1
1
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import React__default, { lazy, Suspense } from 'react';
|
|
3
|
-
import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
|
|
4
|
-
import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
|
|
5
|
-
import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
|
|
6
|
-
import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
|
|
7
|
-
import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
|
|
8
|
-
import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
|
|
9
|
-
import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
|
|
10
|
-
import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
|
|
11
3
|
import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
|
|
12
4
|
import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
|
|
13
5
|
import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
|
|
14
6
|
import FormActiveSwitch from './FormActiveSwitch.esm.js';
|
|
7
|
+
import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
|
|
8
|
+
import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
|
|
9
|
+
import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
|
|
10
|
+
import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
|
|
11
|
+
import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
|
|
12
|
+
import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
|
|
13
|
+
import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
|
|
14
|
+
import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
|
|
15
15
|
|
|
16
16
|
// Lazy-loaded heavy components
|
|
17
17
|
const RichTextEditorWrapper = lazy(() => import('../RichTextEditor/index.esm.js').then((m) => ({ default: m.RichTextEditorWrapper })));
|
|
@@ -11,6 +11,9 @@ import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
|
|
|
11
11
|
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
|
|
12
12
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
13
13
|
import UploadFileIcon from '@mui/icons-material/UploadFile';
|
|
14
|
+
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
|
|
15
|
+
import TableChartIcon from '@mui/icons-material/TableChart';
|
|
16
|
+
import DescriptionIcon from '@mui/icons-material/Description';
|
|
14
17
|
|
|
15
18
|
const MultiFileWithPreview = ({ props, variant, }) => {
|
|
16
19
|
const inputRef = useRef(null);
|
|
@@ -134,6 +137,19 @@ const MultiFileWithPreview = ({ props, variant, }) => {
|
|
|
134
137
|
: file.name.split('.').pop()?.toLowerCase();
|
|
135
138
|
return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext || '');
|
|
136
139
|
};
|
|
140
|
+
const isPdfFile = (file) => {
|
|
141
|
+
const name = typeof file === 'string' ? file : file.name;
|
|
142
|
+
return name.toLowerCase().endsWith('.pdf');
|
|
143
|
+
};
|
|
144
|
+
const isExcelFile = (file) => {
|
|
145
|
+
const name = typeof file === 'string' ? file : file.name;
|
|
146
|
+
return /\.xlsx?$/.test(name.toLowerCase());
|
|
147
|
+
};
|
|
148
|
+
const isWordFile = (file) => {
|
|
149
|
+
const name = typeof file === 'string' ? file : file.name;
|
|
150
|
+
return /\.(doc|docx)$/.test(name.toLowerCase());
|
|
151
|
+
};
|
|
152
|
+
const getObjectUrl = (file) => typeof file === 'string' ? file : URL.createObjectURL(file);
|
|
137
153
|
return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: "4px", sx: { ...props.item.sx, position: 'relative' }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px' }, children: renderLabel(variant, props, true) })), jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [jsxs(Button, { variant: "outlined", component: "label", startIcon: jsx(UploadFileIcon, {}), sx: { flex: 1, textTransform: 'none' }, color: isError ? 'error' : 'primary', children: [selectedFiles.length > 0
|
|
138
154
|
? isSingleFileMode
|
|
139
155
|
? '1 file selected'
|
|
@@ -148,7 +164,7 @@ const MultiFileWithPreview = ({ props, variant, }) => {
|
|
|
148
164
|
? '.jpg,.jpeg,.png'
|
|
149
165
|
: props.item.fileType === 'all'
|
|
150
166
|
? '.pdf,.jpg,.jpeg,.png,.xls,.xlsx,.doc,.docx'
|
|
151
|
-
: '', ref: inputRef, onChange: handleFileChange })] }), props.item.showFileCarousel && selectedFiles.length > 0
|
|
167
|
+
: '', ref: inputRef, onChange: handleFileChange })] }), jsx(Box, { sx: { width: 36, display: 'flex', justifyContent: 'center' }, children: props.item.showFileCarousel && selectedFiles.length > 0 ? (jsx(IconButton, { onClick: handlePreviewClick, color: "primary", size: "small", "aria-label": "preview selected files", children: jsx(VisibilityIcon, {}) })) : null })] })] }), jsx(FormBottomField, { ...props }), jsx(Modal, { open: open, onClose: handleClose, children: jsxs(Box, { sx: {
|
|
152
168
|
position: 'absolute',
|
|
153
169
|
top: '50%',
|
|
154
170
|
left: '50%',
|
|
@@ -158,30 +174,38 @@ const MultiFileWithPreview = ({ props, variant, }) => {
|
|
|
158
174
|
borderRadius: 2,
|
|
159
175
|
boxShadow: 24,
|
|
160
176
|
p: 3,
|
|
161
|
-
}, children: [jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [jsx(Typography, { variant: "h6", children: "File Preview" }), jsxs(Box, { display: "flex", gap: 1, children: [jsx(IconButton, { onClick: () => handleDeleteFile(currentFileIndex), color: "error", title: "Delete current file", children: jsx(DeleteIcon, {}) }), jsx(IconButton, { onClick: handleClose, children: jsx(CloseIcon, {}) })] })] }), jsx(Box, { mt: 2, children: selectedFiles.length > 0 && (jsxs(Fragment, { children: [jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: 2, children: [jsx(IconButton, { onClick: handlePrevious,
|
|
177
|
+
}, children: [jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [jsx(Typography, { variant: "h6", children: "File Preview" }), jsxs(Box, { display: "flex", gap: 1, children: [jsx(IconButton, { onClick: () => handleDeleteFile(currentFileIndex), color: "error", title: "Delete current file", children: jsx(DeleteIcon, {}) }), jsx(IconButton, { onClick: handleClose, children: jsx(CloseIcon, {}) })] })] }), jsx(Box, { mt: 2, children: selectedFiles.length > 0 && (jsxs(Fragment, { children: [jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: 2, children: [selectedFiles.length > 1 && !isSingleFileMode ? (jsx(IconButton, { onClick: handlePrevious, children: jsx(NavigateBeforeIcon, {}) })) : null, jsx(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", sx: { p: 2, minHeight: '400px', width: '100%' }, children: (() => {
|
|
162
178
|
const currentFile = selectedFiles[currentFileIndex];
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
borderRadius: 8,
|
|
170
|
-
} }));
|
|
171
|
-
}
|
|
172
|
-
return (jsx(Typography, { variant: "body1", children: currentFile.name }));
|
|
173
|
-
}
|
|
174
|
-
else if (typeof currentFile === 'string') {
|
|
175
|
-
const isImg = isImageFile(currentFile);
|
|
176
|
-
return isImg ? (jsx("img", { alt: "Preview", src: currentFile, style: {
|
|
179
|
+
const fileName = typeof currentFile === 'string'
|
|
180
|
+
? currentFile.split('/').pop() || currentFile
|
|
181
|
+
: currentFile.name;
|
|
182
|
+
// Images
|
|
183
|
+
if (isImageFile(currentFile)) {
|
|
184
|
+
return (jsx("img", { alt: "Preview", src: getObjectUrl(currentFile), style: {
|
|
177
185
|
maxHeight: '400px',
|
|
178
186
|
maxWidth: '100%',
|
|
179
187
|
objectFit: 'contain',
|
|
180
188
|
borderRadius: 8,
|
|
181
|
-
} }))
|
|
189
|
+
} }));
|
|
190
|
+
}
|
|
191
|
+
// PDF inline viewer
|
|
192
|
+
if (isPdfFile(currentFile)) {
|
|
193
|
+
const url = getObjectUrl(currentFile);
|
|
194
|
+
return (jsx(Box, { width: "100%", height: 420, children: jsx("object", { data: url, type: "application/pdf", width: "100%", height: "100%", children: jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 1, children: [jsx(PictureAsPdfIcon, { color: "error" }), jsx(Typography, { variant: "body2", children: "Preview not available. " }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open PDF" })] }) }) }));
|
|
195
|
+
}
|
|
196
|
+
// Excel preview placeholder with actions
|
|
197
|
+
if (isExcelFile(currentFile)) {
|
|
198
|
+
const url = getObjectUrl(currentFile);
|
|
199
|
+
return (jsxs(Box, { textAlign: "center", children: [jsx(TableChartIcon, { color: "primary", sx: { fontSize: 64, mb: 1 } }), jsx(Typography, { variant: "body1", gutterBottom: true, children: fileName }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open" })] }));
|
|
200
|
+
}
|
|
201
|
+
// Word preview placeholder with actions
|
|
202
|
+
if (isWordFile(currentFile)) {
|
|
203
|
+
const url = getObjectUrl(currentFile);
|
|
204
|
+
return (jsxs(Box, { textAlign: "center", children: [jsx(DescriptionIcon, { color: "primary", sx: { fontSize: 64, mb: 1 } }), jsx(Typography, { variant: "body1", gutterBottom: true, children: fileName }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open" })] }));
|
|
182
205
|
}
|
|
183
|
-
|
|
184
|
-
|
|
206
|
+
// Fallback: show name
|
|
207
|
+
return jsx(Typography, { variant: "body1", children: fileName });
|
|
208
|
+
})() }), selectedFiles.length > 1 && !isSingleFileMode ? (jsx(IconButton, { onClick: handleNext, children: jsx(NavigateNextIcon, {}) })) : null] }), selectedFiles.length > 1 && !isSingleFileMode && (jsx(Box, { display: "flex", justifyContent: "center", mt: 2, children: jsxs(Typography, { variant: "body2", color: "text.secondary", children: [currentFileIndex + 1, " of ", selectedFiles.length] }) }))] })) })] }) })] }));
|
|
185
209
|
};
|
|
186
210
|
|
|
187
211
|
export { MultiFileWithPreview as default };
|
|
@@ -1,35 +1,24 @@
|
|
|
1
|
+
export { default as SingleSelect } from './Select/SingleSelect.esm.js';
|
|
2
|
+
export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
|
|
3
|
+
export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
|
|
4
|
+
export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
|
|
1
5
|
export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
|
|
2
6
|
export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
|
|
3
7
|
export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
|
|
4
8
|
export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
|
|
5
9
|
export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
|
|
6
10
|
export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
|
|
7
|
-
export { default as SingleSelect } from './Select/SingleSelect.esm.js';
|
|
8
|
-
export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
|
|
9
|
-
export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
|
|
10
|
-
export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
|
|
11
11
|
export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
|
|
12
12
|
export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
|
|
13
13
|
export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
|
|
14
14
|
export { default as MonthPicker } from './DatePicker/MonthPicker.esm.js';
|
|
15
15
|
export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
|
|
16
|
-
export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
|
|
17
16
|
export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
|
|
18
17
|
export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
|
|
19
18
|
export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
|
|
20
|
-
import 'react/jsx-runtime';
|
|
21
|
-
import '@mui/material';
|
|
22
|
-
import 'react';
|
|
23
|
-
import 'react-hook-form';
|
|
24
|
-
import 'dayjs';
|
|
25
|
-
export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
|
|
26
|
-
import '@mui/icons-material/Visibility';
|
|
27
|
-
import '@mui/icons-material/Close';
|
|
28
|
-
import '@mui/icons-material/NavigateBefore';
|
|
29
|
-
import '@mui/icons-material/NavigateNext';
|
|
30
|
-
import '@mui/icons-material/Delete';
|
|
31
|
-
import '@mui/icons-material/UploadFile';
|
|
32
19
|
export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
|
|
33
20
|
export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
|
|
21
|
+
export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
|
|
34
22
|
export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
|
|
35
23
|
export { default as HelperText } from './HelperText/HelperText.esm.js';
|
|
24
|
+
export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
|