@arquimedes.co/eureka-forms 3.0.17-refactor → 3.0.19-refactor
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/@Types/FormStep.d.ts +3 -3
- package/dist/FormSteps/@Construction/CBRElementStep/CBRElementStep.js +3 -3
- package/dist/FormSteps/@Construction/CBRPropertyStep/CBRPropertyStep.js +2 -2
- package/dist/FormSteps/CBRStepMapper.js +5 -5
- package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js +1 -1
- package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js +1 -1
- package/dist/FormSteps/SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep.js +1 -1
- package/dist/FormSteps/Utils/MaterialInputContainer/MaterialInputContainer.js +2 -5
- package/dist/Icons/@ErkIcon.js +1 -1
- package/dist/Icons/Construction/PropertyIcon.js +2 -2
- package/dist/Shared/ErkButton/ErkButton.js +1 -1
- package/dist/Shared/ErkSelect/ErkSelect.js +10 -2
- package/dist/Shared/ErkSmartSelect/ErkSmartSelect.js +7 -10
- package/dist/Shared/InputIcon/InputIcon.d.ts +3 -3
- package/dist/Shared/InputIcon/InputIcon.js +26 -67
- package/dist/constants/{IconTypes.d.ts → ErkIconTypes.d.ts} +1 -2
- package/dist/constants/ErkIconTypes.js +15 -0
- package/package.json +1 -1
- package/dist/constants/IconTypes.js +0 -16
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { ErkIconTypes } from '../constants/ErkIconTypes';
|
|
1
2
|
import FormStepTypes, { ClassifierOptionTypes, OptionTypes, RatingTypes, MapperStyleTypes, EntityValueOptionTypes, EntityValueDataTypes, ApiSelectorOptionTypes, ApiSelectorParamTypes } from '../constants/FormStepTypes';
|
|
2
|
-
import IconTypes from '../constants/IconTypes';
|
|
3
3
|
import { Condition } from './Condition';
|
|
4
4
|
import { EurekaDraft } from './Draft/Draft';
|
|
5
5
|
import * as GSteps from './GenericFormSteps';
|
|
@@ -109,7 +109,7 @@ interface HideValueOption {
|
|
|
109
109
|
export interface EntityValuePicker extends GSteps.GSmartSelect {
|
|
110
110
|
type: FormStepTypes.ENTITYVALUEPICKER;
|
|
111
111
|
idEntity: string;
|
|
112
|
-
icon:
|
|
112
|
+
icon: ErkIconTypes;
|
|
113
113
|
filters: EntityValuePickerFilter[];
|
|
114
114
|
path: EntityValuePickerPath[];
|
|
115
115
|
options: Record<string, FormEntityValuePickerOption>;
|
|
@@ -161,7 +161,7 @@ export interface ValueEntityValuePickerFilter {
|
|
|
161
161
|
}
|
|
162
162
|
export interface ApiSelector extends GSteps.GSmartSelect {
|
|
163
163
|
type: FormStepTypes.API_SELECTOR;
|
|
164
|
-
icon?:
|
|
164
|
+
icon?: ErkIconTypes;
|
|
165
165
|
url: string;
|
|
166
166
|
pathParams: ApiSelectorParam[];
|
|
167
167
|
queryParams: ApiSelectorParam[];
|
|
@@ -5,9 +5,9 @@ import axios from 'axios';
|
|
|
5
5
|
import InputIcon from '../../../Shared/InputIcon/InputIcon';
|
|
6
6
|
import FormContext from '../../../Contexts/FormContext';
|
|
7
7
|
import { useContext } from 'react';
|
|
8
|
-
import
|
|
8
|
+
import { ErkIconTypes } from '../../../constants/ErkIconTypes';
|
|
9
9
|
function CBRElementStepComponent(props) {
|
|
10
|
-
return (_jsx(SmartSelectStep, { ...props, step: props.step, IconComponent: () => _jsx(InputIcon, { icon:
|
|
10
|
+
return (_jsx(SmartSelectStep, { ...props, step: props.step, IconComponent: () => _jsx(InputIcon, { icon: ErkIconTypes.LEAK }), getOptions: getElementOptions, getOptionSelected: (option, value) => option.id === value.id, getValueString: (value) => value?.id, calcDepError: calcDepError, valueOverwrite: (value) => {
|
|
11
11
|
if (value) {
|
|
12
12
|
return { ...value, subStep: props.step.subStep };
|
|
13
13
|
}
|
|
@@ -26,7 +26,7 @@ function ElementSubStepRenderer({ value, ...stepProps }) {
|
|
|
26
26
|
if (subStep?.type !== CBRFormStepTypes.CBR_LOCATIVAS) {
|
|
27
27
|
return _jsx("div", {});
|
|
28
28
|
}
|
|
29
|
-
return (_jsx(SmartSelectStep, { ...stepProps, step: subStep, IconComponent: () => _jsx(InputIcon, { icon:
|
|
29
|
+
return (_jsx(SmartSelectStep, { ...stepProps, step: subStep, IconComponent: () => _jsx(InputIcon, { icon: ErkIconTypes.LEAK }), getOptions: getElementOptions, calcDepError: calcDepError, getOptionSelected: (option, value) => option.id === value.id, getValueString: (value) => value?.id, renderNestedSteps: (value) => (_jsx(ElementSubStepRenderer, { value: value, ...stepProps, step: subStep })) }));
|
|
30
30
|
}
|
|
31
31
|
const getElementOptions = async (idOrganization, step, dependencyStore) => {
|
|
32
32
|
if (step.dependencies && idOrganization) {
|
|
@@ -10,7 +10,7 @@ import CBRFormStepTypes from '../../../constants/CBRFormStepTypes';
|
|
|
10
10
|
import { Dialog } from '@mui/material';
|
|
11
11
|
import CloseIcon from '../../../Icons/CloseIcon';
|
|
12
12
|
import WarningIcon from '../../../Icons/WarningIcon';
|
|
13
|
-
import
|
|
13
|
+
import { ErkIconTypes } from '../../../constants/ErkIconTypes';
|
|
14
14
|
const baseUrl = `https://integrations.${import.meta.env.VITE_REACT_APP_DOMAIN}/sinco/cbr/`;
|
|
15
15
|
function CBRPropertyStepComponent(props) {
|
|
16
16
|
const { formStyle } = useAppSelector((state) => state.global);
|
|
@@ -34,7 +34,7 @@ function CBRPropertyStepComponent(props) {
|
|
|
34
34
|
return null;
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
|
-
return (_jsxs(React.Fragment, { children: [_jsx(SmartSelectStep, { ...props, IconComponent: () => _jsx(InputIcon, { icon:
|
|
37
|
+
return (_jsxs(React.Fragment, { children: [_jsx(SmartSelectStep, { ...props, IconComponent: () => _jsx(InputIcon, { icon: ErkIconTypes.PROPERTY }), getOptionSelected: (option, value) => option.id === value.id, calcDepError: (steps) => {
|
|
38
38
|
for (const step of steps) {
|
|
39
39
|
if (step.type === CBRFormStepTypes.CBR_PROYECTO) {
|
|
40
40
|
return 'Selecciona un proyecto';
|
|
@@ -9,7 +9,7 @@ import axios from 'axios';
|
|
|
9
9
|
import CBRPropertyStep from './@Construction/CBRPropertyStep/CBRPropertyStep';
|
|
10
10
|
import InputIcon from '../Shared/InputIcon/InputIcon';
|
|
11
11
|
import PersonIcon from '../Icons/PersonIcon';
|
|
12
|
-
import
|
|
12
|
+
import { ErkIconTypes } from '../constants/ErkIconTypes';
|
|
13
13
|
const baseUrl = `https://integrations.${import.meta.env.VITE_REACT_APP_DOMAIN}/sinco/cbr/`;
|
|
14
14
|
function CBRStepMapper(props) {
|
|
15
15
|
const getTipoDocOptions = async (idOrganization) => {
|
|
@@ -75,15 +75,15 @@ function CBRStepMapper(props) {
|
|
|
75
75
|
case CBRFormStepTypes.CBR_TIPO_DOC:
|
|
76
76
|
return (_jsx(SmartSelectStep, { ...props, step: { ...props.step, showIcon: false }, getOptions: getTipoDocOptions, getOptionSelected: (option, value) => option.id === value.id, getValueString: (value) => value?.id }));
|
|
77
77
|
case CBRFormStepTypes.CBR_MACRO_PROYECTO:
|
|
78
|
-
return (_jsx(SmartSelectStep, { ...props, step: props.step, IconComponent: () => _jsx(InputIcon, { icon:
|
|
78
|
+
return (_jsx(SmartSelectStep, { ...props, step: props.step, IconComponent: () => _jsx(InputIcon, { icon: ErkIconTypes.PROJECT }), getOptions: getMacroProyectoOptions, getOptionSelected: (option, value) => option.id === value.id, getValueString: (value) => value?.id }));
|
|
79
79
|
case CBRFormStepTypes.CBR_PROYECTO:
|
|
80
|
-
return (_jsx(SmartSelectStep, { ...props, step: props.step, IconComponent: () => _jsx(InputIcon, { icon:
|
|
80
|
+
return (_jsx(SmartSelectStep, { ...props, step: props.step, IconComponent: () => _jsx(InputIcon, { icon: ErkIconTypes.PROJECT }), getOptions: getProyectoOptions, getOptionSelected: (option, value) => option.id === value.id, getValueString: (value) => value?.id }));
|
|
81
81
|
case CBRFormStepTypes.CBR_INMUEBLE:
|
|
82
82
|
return _jsx(CBRPropertyStep, { ...props, step: props.step });
|
|
83
83
|
case CBRFormStepTypes.CBR_TIPO_SOLICITANTE:
|
|
84
84
|
return (_jsx(SmartSelectStep, { ...props, step: props.step, IconComponent: () => _jsx(PersonIcon, {}), getOptions: getTipoSolicitanteOptions, getOptionSelected: (option, value) => option.id === value.id, getValueString: (value) => value?.id }));
|
|
85
85
|
case CBRFormStepTypes.CBR_TIPO_ESPACIO:
|
|
86
|
-
return (_jsx(SmartSelectStep, { ...props, step: props.step, IconComponent: () => _jsx(InputIcon, { icon:
|
|
86
|
+
return (_jsx(SmartSelectStep, { ...props, step: props.step, IconComponent: () => _jsx(InputIcon, { icon: ErkIconTypes.SPACE }), getOptions: getTipoEspaciosOptions, calcDepError: (steps) => {
|
|
87
87
|
for (const step of steps) {
|
|
88
88
|
if (step.type === CBRFormStepTypes.CBR_PROYECTO) {
|
|
89
89
|
return 'Selecciona un proyecto';
|
|
@@ -105,5 +105,5 @@ export default CBRStepMapper;
|
|
|
105
105
|
function DocumentIconComponent() {
|
|
106
106
|
return (_jsx("div", { style: {
|
|
107
107
|
marginRight: 2,
|
|
108
|
-
}, children: _jsx(InputIcon, { icon:
|
|
108
|
+
}, children: _jsx(InputIcon, { icon: ErkIconTypes.DOCUMENT }) }));
|
|
109
109
|
}
|
|
@@ -34,7 +34,7 @@ function EntityValuePickerStep({ step, editable }) {
|
|
|
34
34
|
}
|
|
35
35
|
: undefined);
|
|
36
36
|
}, []);
|
|
37
|
-
return (_jsxs(React.Fragment, { children: [dialogs !== undefined && form.entities?.[step.idEntity] && (_jsx(MaterialEntityValueDialog, { type: dialogs.current.type, entity: form.entities?.[step.idEntity], entityValue: dialogs.value, message: dialogs.current.message, handleClose: handleCloseDialog })), _jsx(StepFillerContainer, { step: step, children: _jsx(SmartSelect, {
|
|
37
|
+
return (_jsxs(React.Fragment, { children: [dialogs !== undefined && form.entities?.[step.idEntity] && (_jsx(MaterialEntityValueDialog, { type: dialogs.current.type, entity: form.entities?.[step.idEntity], entityValue: dialogs.value, message: dialogs.current.message, handleClose: handleCloseDialog })), _jsx(StepFillerContainer, { step: step, children: _jsx(SmartSelect, { step: step, editable: editable, getOptionalDependencies: getOptionalDependencies, IconComponent: () => (step.icon ? _jsx(InputIcon, { icon: step.icon }) : undefined), getOptions: getEntityValueOptions, getOptionSelected: (option, value) => option._id === value._id, calcDepError: (steps) => {
|
|
38
38
|
for (const step of steps) {
|
|
39
39
|
if (step.type === FormStepTypes.ENTITYVALUEPICKER) {
|
|
40
40
|
return 'Selecciona un ' + step.label;
|
|
@@ -142,7 +142,7 @@ function FileUploadStep({ step, editable }) {
|
|
|
142
142
|
}
|
|
143
143
|
inputRef.current.value = '';
|
|
144
144
|
}
|
|
145
|
-
}, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''),
|
|
145
|
+
}, multiple: true, accept: getAcceptedExtensions() }), _jsxs("div", { className: styles.btnContainer, children: [_jsx("input", { ref: ref, className: 'hidden-input' }), _jsx(ErkButton, { disabled: !editable || postview, text: 'Examinar' + (step.required ? ' *' : ''), onClick: () => {
|
|
146
146
|
if (editable && !postview) {
|
|
147
147
|
const input = inputRef.current;
|
|
148
148
|
if (input !== null) {
|
|
@@ -137,6 +137,6 @@ function SmartSelectStep({ step, editable, getOptions, calcDepError, defaultValu
|
|
|
137
137
|
return undefined;
|
|
138
138
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
139
139
|
}, [invalids, touched, value, filteredOptions]);
|
|
140
|
-
return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, { step: step, onClick: onFocus, editable: editable, children: _jsx(ErkSmartSelect, { ...field, value: value, inputRef: ref, onFocus: onFocus, loading: loading, label: step.label, onChange: onChange, required: step.required, searchable: step.searchable, getValueString: getValueString, disabled:
|
|
140
|
+
return (_jsxs(React.Fragment, { children: [_jsx(MaterialInputContainer, { step: step, onClick: onFocus, editable: editable, children: _jsx(ErkSmartSelect, { ...field, value: value, inputRef: ref, onFocus: onFocus, loading: loading, label: step.label, onChange: onChange, required: step.required, searchable: step.searchable, getValueString: getValueString, disabled: emptyDep, getOptionSelected: getOptionSelected, options: filteredOptions ?? undefined, IconComponent: step.showIcon ? IconComponent : undefined, error: !!errorMsg || !!warning || !!error, readOnly: !editable || postview || emptyDep || filteredOptions === null, helperText: errorMsg ?? warning ?? error?.message?.toString() ?? step.description ?? undefined }) }), renderNestedSteps?.(value)] }));
|
|
141
141
|
}
|
|
142
142
|
export default SmartSelectStep;
|
|
@@ -9,12 +9,9 @@ function MaterialInputContainer({ step, editable, children, onClick, maxHeight =
|
|
|
9
9
|
const currentBreakPoint = useAppSelector(selectBreakPoint);
|
|
10
10
|
const postview = useAppSelector((state) => state.global.postview);
|
|
11
11
|
return (_jsx("div", { className: styles.container, style: {
|
|
12
|
-
width: currentBreakPoint <= step.size
|
|
13
|
-
? '100%'
|
|
14
|
-
: calcStepWidth(step.size, form.size),
|
|
12
|
+
width: currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size),
|
|
15
13
|
minHeight: maxHeight
|
|
16
|
-
? step.description ||
|
|
17
|
-
(!postview && editable && step.required)
|
|
14
|
+
? step.description || (!postview && editable && step.required)
|
|
18
15
|
? '55px'
|
|
19
16
|
: '43px'
|
|
20
17
|
: undefined,
|
package/dist/Icons/@ErkIcon.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useIconProps } from '../@ErkIcon';
|
|
3
3
|
function PropertyIcon(props) {
|
|
4
4
|
const iconProps = useIconProps(props);
|
|
5
|
-
return (_jsx("svg", { ...iconProps, xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
return (_jsx("svg", { ...iconProps, viewBox: "0 0 512 512", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { children: [_jsx("path", { d: "m256 4c-108.075 0-196 87.925-196 196 0 52.5 31.807 119.92 94.537 200.378a1065.816 1065.816 0 0 0 93.169 104.294 12 12 0 0 0 16.588 0 1065.816 1065.816 0 0 0 93.169-104.294c62.73-80.458 94.537-147.878 94.537-200.378 0-108.075-87.925-196-196-196zm0 336c-77.2 0-140-62.8-140-140s62.8-140 140-140 140 62.8 140 140-62.8 140-140 140z" }), _jsx("path", { d: "m352.072 183.121-88-80a12 12 0 0 0 -16.144 0l-88 80a12.006 12.006 0 0 0 -2.23 15.039 12.331 12.331 0 0 0 10.66 5.84h11.642v76a12 12 0 0 0 12 12h28a12 12 0 0 0 12-12v-44a12 12 0 0 1 12-12h24a12 12 0 0 1 12 12v44a12 12 0 0 0 12 12h28a12 12 0 0 0 12-12v-76h11.642a12.331 12.331 0 0 0 10.66-5.84 12.006 12.006 0 0 0 -2.23-15.039z" })] }) }));
|
|
6
6
|
}
|
|
7
7
|
export default PropertyIcon;
|
|
@@ -28,9 +28,17 @@ export const StyledSelect = styled(MuiSelect)(({ theme, size, ...props }) => ({
|
|
|
28
28
|
'&:hover:not(.Mui-readOnly) .Erk-MuiOutlinedInput-notchedOutline': {
|
|
29
29
|
borderColor: props.disabled || props.readOnly ? theme.palette.outline.main : theme.palette.primary.main,
|
|
30
30
|
},
|
|
31
|
+
'&.Mui-readOnly': {
|
|
32
|
+
'& .Erk-MuiSelect-select': {
|
|
33
|
+
color: theme.palette.text.primary,
|
|
34
|
+
WebkitTextFillColor: theme.palette.text.primary,
|
|
35
|
+
},
|
|
36
|
+
'& .Erk-MuiSelect-icon': {
|
|
37
|
+
color: theme.palette.text.primary + 'a0',
|
|
38
|
+
},
|
|
39
|
+
},
|
|
31
40
|
'& .Mui-disabled, &.Mui-readOnly': {
|
|
32
41
|
cursor: 'default',
|
|
33
|
-
pointerEvents: 'none',
|
|
34
42
|
},
|
|
35
43
|
'&.Erk-MuiInputBase-root.Mui-focused': {
|
|
36
44
|
'& .Erk-MuiOutlinedInput-notchedOutline': {
|
|
@@ -87,7 +95,7 @@ export const StyledHelperText = styled(MuiFormHelperText)(({ theme, ...props })
|
|
|
87
95
|
function CustomSelect({ label, error, value, loading, onChange, children, required, inputRef, MenuProps, helperText, IconComponent, size = 'small', labelMargin = 5, multiple = false, readOnly = false, disabled = false, clearable = true, fullWidth = true, clearLabel = 'Sin Seleccionar', ...others }) {
|
|
88
96
|
const [open, setOpen] = useState(false);
|
|
89
97
|
const handleChange = useCallback((event) => onChange?.(event.target.value), [onChange]);
|
|
90
|
-
return (_jsxs(FormControl, { size: size, error: error, variant: "outlined", required: required, fullWidth: fullWidth, style: { marginTop: label ? labelMargin : undefined, maxWidth: '100%' }, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, size: size === 'small' ? 'small' : 'normal', children: label })), _jsxs(StyledSelect, { ...others, size: size,
|
|
98
|
+
return (_jsxs(FormControl, { size: size, error: error, variant: "outlined", required: required, fullWidth: fullWidth, style: { marginTop: label ? labelMargin : undefined, maxWidth: '100%' }, children: [label && (_jsx(StyledInputLabel, { disabled: disabled, open: open, size: size === 'small' ? 'small' : 'normal', children: label })), _jsxs(StyledSelect, { ...others, size: size, autoWidth: false, open: others.open ?? open, label: label, inputRef: inputRef, readOnly: readOnly, disabled: disabled, multiple: multiple, onChange: handleChange, value: value ?? (multiple ? [] : ''), IconComponent: IconComponent ? () => _jsx(_Fragment, {}) : undefined, endAdornment: IconComponent ? (_jsx(InputAdornment, { position: "end", onClick: (e) => {
|
|
91
99
|
e.stopPropagation();
|
|
92
100
|
if (!readOnly && !disabled) {
|
|
93
101
|
if (others.open !== undefined) {
|
|
@@ -4,9 +4,9 @@ import ErkSelect from '../ErkSelect/ErkSelect';
|
|
|
4
4
|
import { StyledTextField } from '../ErkTextField/ErkTextField';
|
|
5
5
|
import ErkMenuItem from '../ErkMenuItem';
|
|
6
6
|
const filter = createFilterOptions();
|
|
7
|
-
const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, ...props }) => ({
|
|
7
|
+
const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, readOnly, ...props }) => ({
|
|
8
8
|
'& .Erk-MuiInputBase-root': {
|
|
9
|
-
cursor: props.disabled ||
|
|
9
|
+
cursor: props.disabled || readOnly ? 'default' : 'text',
|
|
10
10
|
},
|
|
11
11
|
'& .Erk-MuiInputBase-input': {
|
|
12
12
|
paddingRight: 24,
|
|
@@ -18,6 +18,7 @@ const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, ...props }) => ({
|
|
|
18
18
|
color: theme.palette.text.primary + 'a0',
|
|
19
19
|
'& .Erk-MuiButtonBase-root': {
|
|
20
20
|
padding: 0,
|
|
21
|
+
color: readOnly ? theme.palette.text.primary + 'a0' : undefined,
|
|
21
22
|
},
|
|
22
23
|
},
|
|
23
24
|
'& .Erk-MuiAutocomplete-popupIndicatorOpen': {
|
|
@@ -26,14 +27,14 @@ const StyledAutoComplete = styled(MuiAutocomplete)(({ theme, ...props }) => ({
|
|
|
26
27
|
}));
|
|
27
28
|
export default function ErkSmartSelect({ options, value = '', onChange, label, getValueString = (value) => value?.value, loading = false, getOptionSelected, IconComponent, size = 'small', disabled = false, readOnly = false, searchable = false, inputRef, ...others }) {
|
|
28
29
|
if (searchable) {
|
|
29
|
-
return (_jsx(StyledAutoComplete, { fullWidth: true, openOnFocus: true, size: size, loading: loading, options: options ?? [], loadingText: "Cargando...", onFocus: others.onFocus, "data-testid": "smart-select", noOptionsText: "No hay opciones",
|
|
30
|
+
return (_jsx(StyledAutoComplete, { fullWidth: true, openOnFocus: true, size: size, loading: loading, disabled: disabled || readOnly, readOnly: readOnly, options: options ?? [], loadingText: "Cargando...", onFocus: others.onFocus, "data-testid": "smart-select", noOptionsText: "No hay opciones", value: !loading && value ? value : null, onChange: (_event, newValue) => onChange?.(newValue), popupIcon: loading ? _jsx(CircularProgress, { size: 22 }) : IconComponent ? _jsx(IconComponent, {}) : undefined, filterOptions: (options, params) => {
|
|
30
31
|
if (value && value.label === params?.inputValue) {
|
|
31
32
|
return options;
|
|
32
33
|
}
|
|
33
34
|
else {
|
|
34
35
|
return filter(options, params);
|
|
35
36
|
}
|
|
36
|
-
}, renderOption: ({ key, ...props }, option) => (_jsx(ErkMenuItem, { ...props, children: option.label }, key)), getOptionLabel: (option) => {
|
|
37
|
+
}, renderOption: ({ key, ...props }, option) => (_jsx(ErkMenuItem, { ...props, children: option.label }, key)), getOptionKey: (option) => getValueString(option), getOptionLabel: (option) => {
|
|
37
38
|
// Value selected with enter, right from the input
|
|
38
39
|
if (typeof option === 'string') {
|
|
39
40
|
return option;
|
|
@@ -45,13 +46,9 @@ export default function ErkSmartSelect({ options, value = '', onChange, label, g
|
|
|
45
46
|
// Regular option
|
|
46
47
|
return option?.label ?? '';
|
|
47
48
|
}
|
|
48
|
-
}, slotProps: {
|
|
49
|
-
popper: {
|
|
50
|
-
sx: { zIndex: 1305 },
|
|
51
|
-
},
|
|
52
|
-
}, renderInput: (params) => (_jsx(StyledTextField, { ...params, size: size, label: label, labelMargin: 0, name: others.name, readOnly: readOnly, disabled: disabled, inputRef: inputRef, error: others.error, onBlur: others.onBlur, required: others.required, helperText: others.helperText })) }));
|
|
49
|
+
}, slotProps: { popper: { sx: { zIndex: 1305 } } }, renderInput: (params) => (_jsx(StyledTextField, { ...params, size: size, label: label, labelMargin: 0, name: others.name, readOnly: readOnly, disabled: disabled, inputRef: inputRef, error: others.error, onBlur: others.onBlur, required: others.required, helperText: others.helperText })) }));
|
|
53
50
|
}
|
|
54
51
|
else {
|
|
55
|
-
return (_jsxs(ErkSelect, { ...others, labelMargin: 0, inputRef: inputRef, onChange: (value) => onChange?.(options?.find((option) => getValueString(option) === value)), value: loading ? '' : getValueString(value), label: label, IconComponent: loading ? () => _jsx(CircularProgress, { size: 22 }) : IconComponent, children: [options?.map((option) => (_jsx(ErkMenuItem, { value: getValueString(option), "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(ErkMenuItem, { value: getValueString(value), children: value.label ?? '' }, getValueString(value)))] }));
|
|
52
|
+
return (_jsxs(ErkSelect, { ...others, labelMargin: 0, disabled: disabled, readOnly: readOnly, inputRef: inputRef, onChange: (value) => onChange?.(options?.find((option) => getValueString(option) === value)), value: loading ? '' : getValueString(value), label: label, IconComponent: loading ? () => _jsx(CircularProgress, { size: 22 }) : IconComponent, children: [options?.map((option) => (_jsx(ErkMenuItem, { value: getValueString(option), "data-testid": 'smart-select-' + getValueString(option), children: option.label }, getValueString(option)))), options === undefined && value && !loading && (_jsx(ErkMenuItem, { value: getValueString(value), children: value.label ?? '' }, getValueString(value)))] }));
|
|
56
53
|
}
|
|
57
54
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ErkIconTypes } from '../../constants/ErkIconTypes';
|
|
2
2
|
export interface InputIconProps {
|
|
3
|
-
icon:
|
|
3
|
+
icon: ErkIconTypes;
|
|
4
4
|
fill?: string;
|
|
5
5
|
}
|
|
6
|
-
declare function InputIcon({ icon,
|
|
6
|
+
declare function InputIcon({ icon, ...others }: InputIconProps): JSX.Element;
|
|
7
7
|
export default InputIcon;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ErkIconTypes } from '../../constants/ErkIconTypes';
|
|
2
3
|
import CalendarIcon from '../../Icons/CalendarIcon';
|
|
3
4
|
import LeakIcon from '../../Icons/Construction/LeakIcon';
|
|
4
5
|
import ProjectIcon from '../../Icons/Construction/ProjectIcon';
|
|
@@ -11,75 +12,33 @@ import HandShakeIcon from '../../Icons/Entities/HandshakeIcon';
|
|
|
11
12
|
import SupplierIcon from '../../Icons/Entities/SupplierIcon';
|
|
12
13
|
import LocationIcon from '../../Icons/LocationIcon';
|
|
13
14
|
import PersonIcon from '../../Icons/PersonIcon';
|
|
14
|
-
|
|
15
|
-
function InputIcon({ icon, fill, ...others }) {
|
|
15
|
+
function InputIcon({ icon, ...others }) {
|
|
16
16
|
switch (icon) {
|
|
17
|
-
case
|
|
18
|
-
return
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
case
|
|
24
|
-
return
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
case
|
|
30
|
-
return
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
case
|
|
36
|
-
return _jsx(
|
|
37
|
-
case
|
|
38
|
-
return
|
|
39
|
-
|
|
40
|
-
height: 23,
|
|
41
|
-
width: 23,
|
|
42
|
-
marginTop: 2,
|
|
43
|
-
}, fill: fill, ...others }));
|
|
44
|
-
case IconTypes.DOCUMENT:
|
|
45
|
-
return (_jsx(DocumentIcon, { style: {
|
|
46
|
-
display: 'flex',
|
|
47
|
-
height: 23,
|
|
48
|
-
width: 23,
|
|
49
|
-
}, fill: fill, ...others }));
|
|
50
|
-
case IconTypes.HANDSHAKE:
|
|
51
|
-
return (_jsx(HandShakeIcon, { style: {
|
|
52
|
-
display: 'flex',
|
|
53
|
-
height: 23,
|
|
54
|
-
width: 23,
|
|
55
|
-
}, fill: fill, ...others }));
|
|
56
|
-
case IconTypes.CHECKLIST:
|
|
57
|
-
return (_jsx(CheckListIcon, { style: {
|
|
58
|
-
display: 'flex',
|
|
59
|
-
height: 23,
|
|
60
|
-
width: 23,
|
|
61
|
-
}, fill: fill, ...others }));
|
|
62
|
-
case IconTypes.SUPPLIER:
|
|
63
|
-
return (_jsx(SupplierIcon, { style: {
|
|
64
|
-
display: 'flex',
|
|
65
|
-
height: 24,
|
|
66
|
-
width: 24,
|
|
67
|
-
}, fill: fill, ...others }));
|
|
68
|
-
case IconTypes.CALENDAR:
|
|
69
|
-
return _jsx(CalendarIcon, { fill: fill, ...others });
|
|
70
|
-
case IconTypes.LOCATION:
|
|
71
|
-
return (_jsx(LocationIcon, { style: {
|
|
72
|
-
display: 'flex',
|
|
73
|
-
height: 23,
|
|
74
|
-
width: 23,
|
|
75
|
-
}, fill: fill, ...others }));
|
|
76
|
-
case IconTypes.GENERIC:
|
|
17
|
+
case ErkIconTypes.PROJECT:
|
|
18
|
+
return _jsx(ProjectIcon, { size: 24, ...others });
|
|
19
|
+
case ErkIconTypes.PROPERTY:
|
|
20
|
+
return _jsx(PropertyIcon, { size: 23, ...others });
|
|
21
|
+
case ErkIconTypes.SPACE:
|
|
22
|
+
return _jsx(SpaceIcon, { size: 23, ...others });
|
|
23
|
+
case ErkIconTypes.PERSON:
|
|
24
|
+
return _jsx(PersonIcon, { size: 23, ...others });
|
|
25
|
+
case ErkIconTypes.LEAK:
|
|
26
|
+
return _jsx(LeakIcon, { size: 23, style: { marginTop: 2 }, ...others });
|
|
27
|
+
case ErkIconTypes.DOCUMENT:
|
|
28
|
+
return _jsx(DocumentIcon, { size: 23, ...others });
|
|
29
|
+
case ErkIconTypes.HANDSHAKE:
|
|
30
|
+
return _jsx(HandShakeIcon, { size: 23, ...others });
|
|
31
|
+
case ErkIconTypes.CHECKLIST:
|
|
32
|
+
return _jsx(CheckListIcon, { size: 23, ...others });
|
|
33
|
+
case ErkIconTypes.SUPPLIER:
|
|
34
|
+
return _jsx(SupplierIcon, { size: 24, ...others });
|
|
35
|
+
case ErkIconTypes.CALENDAR:
|
|
36
|
+
return _jsx(CalendarIcon, { size: 23, ...others });
|
|
37
|
+
case ErkIconTypes.LOCATION:
|
|
38
|
+
return _jsx(LocationIcon, { size: 23, ...others });
|
|
39
|
+
case ErkIconTypes.GENERIC:
|
|
77
40
|
default:
|
|
78
|
-
return
|
|
79
|
-
display: 'flex',
|
|
80
|
-
height: 23,
|
|
81
|
-
width: 23,
|
|
82
|
-
}, fill: fill, ...others }));
|
|
41
|
+
return _jsx(GenericEntityIcon, { size: 23, ...others });
|
|
83
42
|
}
|
|
84
43
|
}
|
|
85
44
|
export default InputIcon;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare enum
|
|
1
|
+
export declare enum ErkIconTypes {
|
|
2
2
|
PROJECT = "PROJECT",
|
|
3
3
|
PROPERTY = "PROPERTY",
|
|
4
4
|
SPACE = "SPACE",
|
|
@@ -12,4 +12,3 @@ export declare enum IconTypes {
|
|
|
12
12
|
LOCATION = "LOCATION",
|
|
13
13
|
CALENDAR = "CALENDAR"
|
|
14
14
|
}
|
|
15
|
-
export default IconTypes;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export var ErkIconTypes;
|
|
2
|
+
(function (ErkIconTypes) {
|
|
3
|
+
ErkIconTypes["PROJECT"] = "PROJECT";
|
|
4
|
+
ErkIconTypes["PROPERTY"] = "PROPERTY";
|
|
5
|
+
ErkIconTypes["SPACE"] = "SPACE";
|
|
6
|
+
ErkIconTypes["LEAK"] = "LEAK";
|
|
7
|
+
ErkIconTypes["PERSON"] = "PERSON";
|
|
8
|
+
ErkIconTypes["DOCUMENT"] = "DOCUMENT";
|
|
9
|
+
ErkIconTypes["HANDSHAKE"] = "HANDSHAKE";
|
|
10
|
+
ErkIconTypes["CHECKLIST"] = "CHECKLIST";
|
|
11
|
+
ErkIconTypes["SUPPLIER"] = "SUPPLIER";
|
|
12
|
+
ErkIconTypes["GENERIC"] = "GENERIC";
|
|
13
|
+
ErkIconTypes["LOCATION"] = "LOCATION";
|
|
14
|
+
ErkIconTypes["CALENDAR"] = "CALENDAR";
|
|
15
|
+
})(ErkIconTypes || (ErkIconTypes = {}));
|
package/package.json
CHANGED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export var IconTypes;
|
|
2
|
-
(function (IconTypes) {
|
|
3
|
-
IconTypes["PROJECT"] = "PROJECT";
|
|
4
|
-
IconTypes["PROPERTY"] = "PROPERTY";
|
|
5
|
-
IconTypes["SPACE"] = "SPACE";
|
|
6
|
-
IconTypes["LEAK"] = "LEAK";
|
|
7
|
-
IconTypes["PERSON"] = "PERSON";
|
|
8
|
-
IconTypes["DOCUMENT"] = "DOCUMENT";
|
|
9
|
-
IconTypes["HANDSHAKE"] = "HANDSHAKE";
|
|
10
|
-
IconTypes["CHECKLIST"] = "CHECKLIST";
|
|
11
|
-
IconTypes["SUPPLIER"] = "SUPPLIER";
|
|
12
|
-
IconTypes["GENERIC"] = "GENERIC";
|
|
13
|
-
IconTypes["LOCATION"] = "LOCATION";
|
|
14
|
-
IconTypes["CALENDAR"] = "CALENDAR";
|
|
15
|
-
})(IconTypes || (IconTypes = {}));
|
|
16
|
-
export default IconTypes;
|