@evoke-platform/ui-components 1.0.0-dev.196 → 1.0.0-dev.198
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,13 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
|
-
import { Box, Grid, InputAdornment, Switch, TextField, Typography, IconButton, Button } from '@mui/material';
|
|
3
|
-
import { Search, DragHandleOutlined } from '@mui/icons-material';
|
|
2
|
+
import { Box, Grid, InputAdornment, Switch, TextField, Typography, IconButton, Button, AlertTitle, } from '@mui/material';
|
|
3
|
+
import { Search, DragHandleOutlined, WarningRounded } from '@mui/icons-material';
|
|
4
4
|
import UIThemeProvider from '../../../theme';
|
|
5
5
|
import { sortBy } from 'lodash';
|
|
6
6
|
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
|
|
7
7
|
import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
|
8
8
|
import { restrictToVerticalAxis, restrictToWindowEdges } from '@dnd-kit/modifiers';
|
|
9
9
|
import { SortableItem } from './SortableItem';
|
|
10
|
-
import {
|
|
10
|
+
import { Alert, Tooltip } from '../../core';
|
|
11
11
|
const styles = {
|
|
12
12
|
textField: {
|
|
13
13
|
borderRadius: '8px',
|
|
@@ -143,23 +143,31 @@ export default function MultiSelect(props) {
|
|
|
143
143
|
};
|
|
144
144
|
return (React.createElement(UIThemeProvider, null,
|
|
145
145
|
React.createElement(Grid, { container: true, direction: "column", sx: { paddingTop: '10px' } },
|
|
146
|
+
!!deletedOptions.length && (React.createElement(Alert, { sx: {
|
|
147
|
+
display: 'flex',
|
|
148
|
+
alignItems: 'center',
|
|
149
|
+
justifyContent: 'center',
|
|
150
|
+
marginX: '8px',
|
|
151
|
+
backgroundColor: '#FFF7CD',
|
|
152
|
+
}, severity: 'warning', icon: React.createElement(WarningRounded, { color: "warning" }), action: React.createElement(Button, { sx: {
|
|
153
|
+
color: '#7A4F01',
|
|
154
|
+
borderColor: '#7A4F01',
|
|
155
|
+
'&:hover': { borderColor: '#7A4F01' },
|
|
156
|
+
padding: '4px',
|
|
157
|
+
borderRadius: '8px',
|
|
158
|
+
}, size: 'small', variant: 'outlined', onClick: (e) => handleDeletedOptions(e) }, "Clear all") },
|
|
159
|
+
React.createElement(AlertTitle, { sx: { fontWeight: 700, lineHeight: '22px', fontSize: '13px', color: '#7A4F01' } }, `${deletedOptions.length} fields has been deleted`),
|
|
160
|
+
React.createElement(Typography, { sx: { fontWeight: 400, lineHeight: '18px', fontSize: '12px', color: '#7A4F01' } }, "Any cleared deleted fields will be removed after saving."))),
|
|
146
161
|
options.length > 4 && (React.createElement(Grid, { item: true, p: 1 },
|
|
147
162
|
React.createElement(TextField, { placeholder: "Search Properties", size: "small", InputProps: {
|
|
148
163
|
startAdornment: (React.createElement(InputAdornment, { position: "start" },
|
|
149
164
|
React.createElement(Search, null))),
|
|
150
165
|
}, fullWidth: true, sx: styles.textField, value: searchText, onChange: filterItems }))),
|
|
151
|
-
(optionsArray === null || optionsArray === void 0 ? void 0 : optionsArray.length) && (React.createElement(Grid, { container: true },
|
|
152
|
-
deletedOptions.length && (React.createElement(Grid, { item: true, xs: 6, sx: { display: 'flex', justifyContent: 'start', textAlign: 'center' } },
|
|
153
|
-
React.createElement(Link, { sx: {
|
|
154
|
-
color: 'red',
|
|
155
|
-
'&:hover': { backgroundColor: 'transparent', cursor: 'pointer' },
|
|
156
|
-
textDecoration: 'none',
|
|
157
|
-
margin: '8px',
|
|
158
|
-
}, onClick: (e) => handleDeletedOptions(e) }, `Clear ${deletedOptions.length} deleted fields`))),
|
|
166
|
+
(optionsArray === null || optionsArray === void 0 ? void 0 : optionsArray.length) > 1 && (React.createElement(Grid, { container: true },
|
|
159
167
|
React.createElement(Grid, { item: true, xs: 3 },
|
|
160
168
|
React.createElement(Button, { sx: Object.assign(Object.assign({}, styles.button), { fontWeight: 'bold' }), variant: "text", onClick: (e) => handleSelectAllChange(e), disabled: optionsArray.every((option) => option.disabled === true || selectAll) }, "Select All")),
|
|
161
|
-
React.createElement(Grid, { item: true, xs:
|
|
162
|
-
React.createElement(Button, { sx: Object.assign(Object.assign({}, styles.button), {
|
|
169
|
+
React.createElement(Grid, { item: true, xs: 9 },
|
|
170
|
+
React.createElement(Button, { sx: Object.assign(Object.assign({}, styles.button), { fontWeight: 'bold' }), variant: "text", onClick: (e) => handleClearAll(e), disabled: optionsArray.every((option) => option.disabled === true) ||
|
|
163
171
|
optionsArray.every((option) => option.value === false) }, "Clear All")))),
|
|
164
172
|
React.createElement(Box, { sx: Object.assign(Object.assign({}, styles.list), { maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : 'auto' }) }, isSortable ? (React.createElement(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, modifiers: [restrictToVerticalAxis, restrictToWindowEdges] },
|
|
165
173
|
React.createElement(SortableContext, { items: optionsArray, strategy: verticalListSortingStrategy }, optionsArray.map((option) => {
|