nurseitaly-components 0.0.7 → 0.0.8
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.
|
@@ -39,6 +39,34 @@ export const selectFieldTheme = (outerTheme, { hasLabel = true, hasAddornments:
|
|
|
39
39
|
},
|
|
40
40
|
},
|
|
41
41
|
},
|
|
42
|
+
MuiSelect: {
|
|
43
|
+
styleOverrides: {
|
|
44
|
+
select: {
|
|
45
|
+
display: 'flex',
|
|
46
|
+
alignItems: 'center',
|
|
47
|
+
boxSizing: 'border-box',
|
|
48
|
+
minHeight: 'unset!important',
|
|
49
|
+
height: hasLabel ? '48px!important' : 'auto',
|
|
50
|
+
padding: hasLabel ? '21px 0px 4px!important' : '8px 16px!important',
|
|
51
|
+
fontSize: '16px',
|
|
52
|
+
fontWeight: '400',
|
|
53
|
+
lineHeight: '120%',
|
|
54
|
+
letterSpacing: '0px',
|
|
55
|
+
fontFamily: 'Work Sans, sans-serif',
|
|
56
|
+
whiteSpace: 'nowrap',
|
|
57
|
+
overflow: 'hidden',
|
|
58
|
+
textOverflow: 'ellipsis',
|
|
59
|
+
'&.MuiSelect-multiple': {
|
|
60
|
+
minHeight: 'unset!important',
|
|
61
|
+
height: hasLabel ? '48px!important' : 'auto',
|
|
62
|
+
padding: hasLabel ? '21px 0px 4px!important' : '8px 16px!important',
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
icon: {
|
|
66
|
+
marginRight: hasAddorments ? '24px' : '0px',
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
},
|
|
42
70
|
MuiInputLabel: {
|
|
43
71
|
styleOverrides: {
|
|
44
72
|
root: {
|
|
@@ -8,7 +8,7 @@ export type SelectItem = {
|
|
|
8
8
|
type DefaultEndAdornmentType = 'close' | 'info';
|
|
9
9
|
type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
|
|
10
10
|
attr: string;
|
|
11
|
-
label
|
|
11
|
+
label?: string;
|
|
12
12
|
createdForm: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
|
|
13
13
|
className?: string;
|
|
14
14
|
disabled?: boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
|
|
3
|
-
import { FormControl, InputAdornment, InputLabel, MenuItem, Select, } from '@mui/material';
|
|
3
|
+
import { FilledInput, FormControl, InputAdornment, InputLabel, MenuItem, Select, } from '@mui/material';
|
|
4
4
|
import { ThemeProvider, useTheme } from '@mui/material/styles';
|
|
5
5
|
import cx from 'classnames';
|
|
6
6
|
import { useEffect, useState } from 'react';
|
|
@@ -52,7 +52,10 @@ export default function SelectMultipleField({ className, attr, label, createdFor
|
|
|
52
52
|
}
|
|
53
53
|
return _jsx("div", { className: "ds-end-adornments", children: adornments });
|
|
54
54
|
};
|
|
55
|
-
return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: selectFieldTheme(outerTheme
|
|
55
|
+
return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: selectFieldTheme(outerTheme, {
|
|
56
|
+
hasLabel: !!label,
|
|
57
|
+
hasAddornments: !!endAdornment,
|
|
58
|
+
}), children: [_jsxs(FormControl, { fullWidth: true, variant: "filled", disabled: disabled, children: [label && (_jsx(InputLabel, { htmlFor: `${attr}-select`, shrink: true, sx: {
|
|
56
59
|
color: disabled
|
|
57
60
|
? '#BEBFC1'
|
|
58
61
|
: hasError()
|
|
@@ -60,7 +63,7 @@ export default function SelectMultipleField({ className, attr, label, createdFor
|
|
|
60
63
|
: active
|
|
61
64
|
? '#1C83F4'
|
|
62
65
|
: '#000000',
|
|
63
|
-
}, children: `${label}${required ? ' *' : ''}` }), _jsxs(Select, { ...field, value: Array.isArray(field.value) ? field.value : [], multiple: true, fullWidth: true, displayEmpty: true, required: required, disabled: disabled, variant: "filled",
|
|
66
|
+
}, children: `${label}${required ? ' *' : ''}` })), _jsxs(Select, { ...field, id: `${attr}-select`, value: Array.isArray(field.value) ? field.value : [], multiple: true, fullWidth: true, displayEmpty: true, required: required, disabled: disabled, variant: "filled", onFocus: () => setFocus(true), onBlur: () => setFocus(false), onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onChange: (event) => {
|
|
64
67
|
let value = event.target.value;
|
|
65
68
|
if (Array.isArray(value) && value.includes('')) {
|
|
66
69
|
value = [];
|
|
@@ -81,18 +84,18 @@ export default function SelectMultipleField({ className, attr, label, createdFor
|
|
|
81
84
|
// while keeping the smart "flipping" logic active
|
|
82
85
|
variant: 'menu',
|
|
83
86
|
anchorReference: 'anchorEl',
|
|
84
|
-
}, sx: {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
87
|
+
}, input: _jsx(FilledInput, { endAdornment: showEndAdornment && (_jsx(InputAdornment, { position: "end", children: getEndAdornmentIcon(field.value) })), sx: {
|
|
88
|
+
borderColor: disabled
|
|
89
|
+
? '#BEBFC1'
|
|
90
|
+
: hasError()
|
|
91
|
+
? '#C6080A!important'
|
|
92
|
+
: active
|
|
93
|
+
? '#1C83F4!important'
|
|
94
|
+
: '#BEBFC1!important',
|
|
95
|
+
backgroundColor: disabled
|
|
96
|
+
? '#BEBFC1!important'
|
|
97
|
+
: '#FFFFFF!important',
|
|
98
|
+
} }), children: [_jsx(MenuItem, { value: "", sx: (theme) => ({
|
|
96
99
|
minHeight: theme.spacing(6),
|
|
97
100
|
}), children: placeholder || '\u00a0' }), options.map((option, idx) => (_jsx(MenuItem, { value: option.value, children: option.label }, idx.valueOf())))] })] }), title && !hasError() && _jsx("div", { className: "helper", children: title }), hasError() && (_jsx("div", { className: "helper error", children: String(createdForm.formState.errors[attr]?.message) }))] })) }) }));
|
|
98
101
|
}
|
|
@@ -2,6 +2,21 @@
|
|
|
2
2
|
width: 100%;
|
|
3
3
|
position: relative;
|
|
4
4
|
|
|
5
|
+
> .helper {
|
|
6
|
+
@include helper-small-1;
|
|
7
|
+
margin-top: 4px;
|
|
8
|
+
|
|
9
|
+
&.error {
|
|
10
|
+
color: var(--text-error);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ds-end-adornments {
|
|
15
|
+
display: flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
gap: 8px;
|
|
18
|
+
}
|
|
19
|
+
|
|
5
20
|
.ds-icon {
|
|
6
21
|
cursor: pointer;
|
|
7
22
|
}
|