tp-react-elements 1.1.8 → 1.1.9
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,13 +1,5 @@
|
|
|
1
1
|
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import require$$0__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';
|
|
@@ -16,6 +8,14 @@ import FormTextFieldWithSelect from '../FormComponents/FormTextFieldWithSelect/F
|
|
|
16
8
|
import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js';
|
|
17
9
|
import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
|
|
18
10
|
import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
|
|
11
|
+
import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
|
|
12
|
+
import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
|
|
13
|
+
import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
|
|
14
|
+
import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
|
|
15
|
+
import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
|
|
16
|
+
import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
|
|
17
|
+
import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
|
|
18
|
+
import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
|
|
19
19
|
|
|
20
20
|
// Lazy-loaded heavy components
|
|
21
21
|
// const RichTextEditorWrapper = lazy(() =>
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { Box, TextField, Tooltip } from '@mui/material';
|
|
3
|
-
import Checkbox from '@mui/material/Checkbox';
|
|
2
|
+
import { Box, TextField, FormControlLabel, Checkbox, Tooltip } from '@mui/material';
|
|
4
3
|
import FormControl from '@mui/material/FormControl';
|
|
5
4
|
import InputLabel from '@mui/material/InputLabel';
|
|
6
|
-
import ListItemText from '@mui/material/ListItemText';
|
|
7
5
|
import MenuItem from '@mui/material/MenuItem';
|
|
8
6
|
import OutlinedInput from '@mui/material/OutlinedInput';
|
|
9
7
|
import Select from '@mui/material/Select';
|
|
@@ -13,8 +11,8 @@ import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
|
|
|
13
11
|
import 'dayjs';
|
|
14
12
|
import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
|
|
15
13
|
|
|
16
|
-
const ITEM_HEIGHT =
|
|
17
|
-
const ITEM_PADDING_TOP =
|
|
14
|
+
const ITEM_HEIGHT = 36;
|
|
15
|
+
const ITEM_PADDING_TOP = 2;
|
|
18
16
|
const extractValuesToArray = (inputString) => {
|
|
19
17
|
if (!inputString)
|
|
20
18
|
return [];
|
|
@@ -76,7 +74,7 @@ function MultiSelectV1({ props, variant, }) {
|
|
|
76
74
|
disableAutoFocusItem: true,
|
|
77
75
|
}, children: [jsx(Box, { sx: { width: '100%', position: 'sticky', top: 0, padding: '7px', zIndex: 2, background: '#fff' }, children: jsx(TextField, { inputRef: textfieldRef, fullWidth: true, size: "small", placeholder: "Search...", value: searchText, onChange: (e) => setSearchText(e.target.value),
|
|
78
76
|
// Prevent space key from closing the select while typing in search
|
|
79
|
-
onKeyDown: (e) => e.key !== 'Escape' && e.stopPropagation() }) }),
|
|
77
|
+
onKeyDown: (e) => e.key !== 'Escape' && e.stopPropagation() }) }), jsx(MenuItem, { disabled: filterOptions.length === 0, sx: { py: 0, px: 2 }, children: jsx(FormControlLabel, { control: jsx(Checkbox, { id: `${props.item.name}-select-all`, size: "small", checked: selectAll, sx: { p: 1 }, onChange: () => {
|
|
80
78
|
const currentValues = fieldValue?.split(',').filter(Boolean) || [];
|
|
81
79
|
const filteredIds = filterOptions.map((opt) => String(opt.value));
|
|
82
80
|
if (selectAll) {
|
|
@@ -85,22 +83,25 @@ function MultiSelectV1({ props, variant, }) {
|
|
|
85
83
|
else {
|
|
86
84
|
props.setValue(props.item.name, [...new Set([...currentValues, ...filteredIds])].join(','));
|
|
87
85
|
}
|
|
88
|
-
} }),
|
|
86
|
+
} }), label: "Select All", sx: {
|
|
87
|
+
width: '100%',
|
|
88
|
+
margin: 0,
|
|
89
|
+
'& .MuiFormControlLabel-label': { fontSize: '13px' }
|
|
90
|
+
} }) }), filterOptions.length !== 0 ? (filterOptions.map((option) => {
|
|
89
91
|
const selectedArray = fieldValue ? extractValuesToArray(fieldValue) : [];
|
|
90
92
|
const isChecked = selectedArray.includes(String(option.value));
|
|
91
|
-
return (
|
|
93
|
+
return (jsx(MenuItem, { value: `${option.value}`, sx: {
|
|
92
94
|
whiteSpace: 'normal',
|
|
93
95
|
wordBreak: 'break-all',
|
|
94
96
|
alignItems: 'flex-start',
|
|
95
|
-
py:
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
} })] }, option.value));
|
|
97
|
+
py: 0,
|
|
98
|
+
px: 2,
|
|
99
|
+
minHeight: ITEM_HEIGHT,
|
|
100
|
+
}, children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: isChecked, size: "small", sx: { p: 1 } }), label: option.label, sx: {
|
|
101
|
+
width: '100%',
|
|
102
|
+
margin: 0,
|
|
103
|
+
'& .MuiFormControlLabel-label': { fontSize: '13px' }
|
|
104
|
+
} }) }, option.value));
|
|
104
105
|
})) : (jsx(MenuItem, { disabled: true, children: "No data Found" }))] }), jsx(FormBottomField, { ...props })] }) }, props.item.name));
|
|
105
106
|
}
|
|
106
107
|
|
|
@@ -1,39 +1,25 @@
|
|
|
1
|
-
export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
|
|
2
|
-
export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
|
|
3
|
-
export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
|
|
4
|
-
export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
|
|
5
|
-
export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
|
|
6
|
-
export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
|
|
7
1
|
export { default as SingleSelect } from './Select/SingleSelect.esm.js';
|
|
8
2
|
export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
|
|
9
3
|
export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
|
|
10
4
|
export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
|
|
11
5
|
export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
|
|
6
|
+
export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
|
|
7
|
+
export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
|
|
8
|
+
export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
|
|
12
9
|
export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
|
|
10
|
+
export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
|
|
11
|
+
export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
|
|
12
|
+
export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
|
|
13
13
|
export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
|
|
14
|
-
export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
|
|
15
|
-
export { default as MonthPicker } from './DatePicker/MonthPicker.esm.js';
|
|
16
|
-
export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
|
|
17
|
-
export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
|
|
18
|
-
export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
|
|
19
14
|
export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
|
|
20
15
|
export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
import 'react';
|
|
24
|
-
import 'react-hook-form';
|
|
25
|
-
import 'dayjs';
|
|
26
|
-
export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
|
|
27
|
-
import '@mui/icons-material/Visibility';
|
|
28
|
-
import '@mui/icons-material/Close';
|
|
29
|
-
import '@mui/icons-material/NavigateBefore';
|
|
30
|
-
import '@mui/icons-material/NavigateNext';
|
|
31
|
-
import '@mui/icons-material/Delete';
|
|
32
|
-
import '@mui/icons-material/UploadFile';
|
|
33
|
-
import '@mui/icons-material/PictureAsPdf';
|
|
34
|
-
import '@mui/icons-material/TableChart';
|
|
35
|
-
import '@mui/icons-material/Description';
|
|
36
|
-
export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
|
|
16
|
+
export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
|
|
17
|
+
export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
|
|
37
18
|
export { default as HelperText } from './HelperText/HelperText.esm.js';
|
|
19
|
+
export { default as MonthPicker } from './DatePicker/MonthPicker.esm.js';
|
|
20
|
+
export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
|
|
21
|
+
export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
|
|
38
22
|
export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
|
|
39
23
|
export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
|
|
24
|
+
export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
|
|
25
|
+
export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
|
|
@@ -1,24 +1,14 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { Box, TextField, Tooltip } from '@mui/material';
|
|
2
|
+
import { Box, TextField, FormControlLabel, Tooltip } from '@mui/material';
|
|
3
3
|
import Checkbox from '@mui/material/Checkbox';
|
|
4
4
|
import FormControl from '@mui/material/FormControl';
|
|
5
|
-
import ListItemText from '@mui/material/ListItemText';
|
|
6
5
|
import MenuItem from '@mui/material/MenuItem';
|
|
7
6
|
import Select from '@mui/material/Select';
|
|
8
7
|
import * as require$$0 from 'react';
|
|
9
8
|
import { useState } from 'react';
|
|
10
9
|
|
|
11
|
-
const ITEM_HEIGHT =
|
|
12
|
-
const ITEM_PADDING_TOP =
|
|
13
|
-
const MenuProps = {
|
|
14
|
-
PaperProps: {
|
|
15
|
-
style: {
|
|
16
|
-
maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
autoFocus: false,
|
|
20
|
-
disableAutoFocusItem: true,
|
|
21
|
-
};
|
|
10
|
+
const ITEM_HEIGHT = 36;
|
|
11
|
+
const ITEM_PADDING_TOP = 2;
|
|
22
12
|
const extractValuesToArray = (inputString) => {
|
|
23
13
|
const valuesArray = inputString?.split(',');
|
|
24
14
|
const trimmedArray = valuesArray?.map((value) => value.trim());
|
|
@@ -30,9 +20,8 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
|
|
|
30
20
|
const [filterOptions, setFilterOptions] = useState(options);
|
|
31
21
|
const [selectAll, setSelectAll] = useState(false);
|
|
32
22
|
const textfieldRef = require$$0.useRef(null);
|
|
23
|
+
const containerRef = require$$0.useRef(null);
|
|
33
24
|
const fieldValue = value;
|
|
34
|
-
const mappedIds = filterOptions.map((item) => item.value);
|
|
35
|
-
const filterIds = filterOptions.map((item) => item.value);
|
|
36
25
|
require$$0.useEffect(() => {
|
|
37
26
|
if (searchText !== '') {
|
|
38
27
|
setFilterOptions(options.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
|
|
@@ -41,17 +30,18 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
|
|
|
41
30
|
setFilterOptions(options);
|
|
42
31
|
}
|
|
43
32
|
}, [options, searchText]);
|
|
44
|
-
function hasExactMatch(array, value) {
|
|
45
|
-
return array.some((item) => item === value);
|
|
46
|
-
}
|
|
47
33
|
require$$0.useEffect(() => {
|
|
48
|
-
|
|
34
|
+
const values = fieldValue ? fieldValue.split(',').filter(Boolean) : [];
|
|
35
|
+
const filterIdStrings = filterOptions.map((item) => String(item.value));
|
|
36
|
+
if (values.length === 0 || filterOptions.length === 0) {
|
|
49
37
|
setSelectAll(false);
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
if (values.every((val) => filterIdStrings.includes(String(val)))) {
|
|
41
|
+
setSelectAll(true);
|
|
50
42
|
}
|
|
51
43
|
else {
|
|
52
|
-
|
|
53
|
-
setSelectAll(true);
|
|
54
|
-
}
|
|
44
|
+
setSelectAll(false);
|
|
55
45
|
}
|
|
56
46
|
}, [filterOptions, fieldValue]);
|
|
57
47
|
const handleChange = (event) => {
|
|
@@ -61,7 +51,7 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
|
|
|
61
51
|
};
|
|
62
52
|
const selectedOptions = options.filter((item) => fieldValue?.split(',').some((value) => value === item.value));
|
|
63
53
|
const selectedValues = selectedOptions.map((item) => item.label).join(' , ');
|
|
64
|
-
return (jsx(Box, { children: jsx(FormControl, { fullWidth: true, sx: {
|
|
54
|
+
return (jsx(Box, { children: jsx(FormControl, { fullWidth: true, ref: containerRef, sx: {
|
|
65
55
|
'& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy': {
|
|
66
56
|
top: '-10px',
|
|
67
57
|
},
|
|
@@ -77,7 +67,24 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
|
|
|
77
67
|
}, 0);
|
|
78
68
|
}, onClose: () => {
|
|
79
69
|
setSearchText('');
|
|
80
|
-
}, renderValue: () => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > 3 ? `${selectedOptions.length} Selected` : selectedValues }) })), MenuProps:
|
|
70
|
+
}, renderValue: () => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > 3 ? `${selectedOptions.length} Selected` : selectedValues }) })), MenuProps: {
|
|
71
|
+
PaperProps: {
|
|
72
|
+
style: {
|
|
73
|
+
maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
|
|
74
|
+
width: containerRef.current ? containerRef.current.clientWidth : 250,
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
autoFocus: false,
|
|
78
|
+
disableAutoFocusItem: true,
|
|
79
|
+
anchorOrigin: {
|
|
80
|
+
vertical: 'bottom',
|
|
81
|
+
horizontal: 'left',
|
|
82
|
+
},
|
|
83
|
+
transformOrigin: {
|
|
84
|
+
vertical: 'top',
|
|
85
|
+
horizontal: 'left',
|
|
86
|
+
},
|
|
87
|
+
}, autoFocus: false, children: [jsx(Box, { sx: {
|
|
81
88
|
width: '100%',
|
|
82
89
|
position: 'sticky',
|
|
83
90
|
top: '0px',
|
|
@@ -94,27 +101,29 @@ function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false
|
|
|
94
101
|
if (e.key !== 'Escape') {
|
|
95
102
|
e.stopPropagation();
|
|
96
103
|
}
|
|
97
|
-
} }) }),
|
|
98
|
-
|
|
99
|
-
const
|
|
100
|
-
if (
|
|
101
|
-
onChangeFn('');
|
|
104
|
+
} }) }), jsx(MenuItem, { disabled: filterOptions.length === 0, sx: { py: 0, px: 2 }, children: jsx(FormControlLabel, { control: jsx(Checkbox, { id: `${value}-select-all`, size: "small", checked: selectAll, sx: { p: 1 }, onChange: () => {
|
|
105
|
+
const currentValues = fieldValue?.split(',').filter(Boolean) || [];
|
|
106
|
+
const filteredIds = filterOptions.map((opt) => String(opt.value));
|
|
107
|
+
if (selectAll) {
|
|
108
|
+
onChangeFn(currentValues.filter((v) => !filteredIds.includes(v)).join(','));
|
|
102
109
|
}
|
|
103
110
|
else {
|
|
104
|
-
|
|
105
|
-
onChangeFn(allDataMapped);
|
|
111
|
+
onChangeFn([...new Set([...currentValues, ...filteredIds])].join(','));
|
|
106
112
|
}
|
|
107
|
-
} }),
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
113
|
+
} }), label: "Select All", sx: {
|
|
114
|
+
width: '100%',
|
|
115
|
+
margin: 0,
|
|
116
|
+
'& .MuiFormControlLabel-label': { fontSize: '13px' }
|
|
117
|
+
} }) }), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsx(MenuItem, { value: `${option.value}`, sx: {
|
|
118
|
+
zIndex: 0,
|
|
119
|
+
py: 0,
|
|
120
|
+
px: 2,
|
|
121
|
+
minHeight: ITEM_HEIGHT
|
|
122
|
+
}, children: jsx(FormControlLabel, { control: jsx(Checkbox, { checked: fieldValue?.split(',').some((value) => value === String(option.value)), size: "small", sx: { p: 1 } }), label: option.label, sx: {
|
|
123
|
+
width: '100%',
|
|
124
|
+
margin: 0,
|
|
125
|
+
'& .MuiFormControlLabel-label': { fontSize: '13px' }
|
|
126
|
+
} }) }, option.value)))) : (jsx(MenuItem, { disabled: true, value: 'NA', children: "No data Found" }, 'NA'))] }) }) }));
|
|
118
127
|
}
|
|
119
128
|
|
|
120
129
|
export { MultiSelectFieldComponent as default };
|