nurseitaly-components 0.0.8 → 0.0.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,7 +1,7 @@
|
|
|
1
|
-
import { FieldValues, UseFormReturn } from
|
|
2
|
-
import
|
|
1
|
+
import { FieldValues, UseFormReturn } from "react-hook-form";
|
|
2
|
+
import "./styles.scss";
|
|
3
3
|
export type MaskFunction = (value: string, isBlur?: boolean) => string;
|
|
4
|
-
type DefaultEndAdornmentType =
|
|
4
|
+
type DefaultEndAdornmentType = "password" | "close" | "info";
|
|
5
5
|
type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
|
|
6
6
|
attr: string;
|
|
7
7
|
label?: string;
|
|
@@ -1,16 +1,16 @@
|
|
|
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, @typescript-eslint/no-unsafe-return */
|
|
3
|
-
import { InputAdornment, TextField as MuiTextField } from
|
|
4
|
-
import { ThemeProvider, useTheme } from
|
|
5
|
-
import cx from
|
|
6
|
-
import { useEffect, useState } from
|
|
7
|
-
import { Controller } from
|
|
8
|
-
import Icon from
|
|
9
|
-
import Tooltip from
|
|
10
|
-
import { textFieldTheme } from
|
|
11
|
-
import { setCurrentInput } from
|
|
12
|
-
import
|
|
13
|
-
export default function TextField({ className, attr, label, createdForm, disabled, title, placeholder, multiline, maxChars, required, startAdornment, endAdornment, defaultEndAdornments = [
|
|
3
|
+
import { InputAdornment, TextField as MuiTextField } from "@mui/material";
|
|
4
|
+
import { ThemeProvider, useTheme } from "@mui/material/styles";
|
|
5
|
+
import cx from "classnames";
|
|
6
|
+
import { useEffect, useState } from "react";
|
|
7
|
+
import { Controller, } from "react-hook-form";
|
|
8
|
+
import Icon from "../Icon";
|
|
9
|
+
import Tooltip from "../Tooltip";
|
|
10
|
+
import { textFieldTheme } from "./TextFieldTheme";
|
|
11
|
+
import { setCurrentInput } from "./inputRefManager";
|
|
12
|
+
import "./styles.scss";
|
|
13
|
+
export default function TextField({ className, attr, label, createdForm, disabled, title, placeholder, multiline, maxChars, required, startAdornment, endAdornment, defaultEndAdornments = ["close"], showEndAdornment = true, onChange, onFocus, onKeyDown, onRemove, onBlur, rows = 4, infoText, inputRef, width = "100%", height, mask, blurMask, }) {
|
|
14
14
|
const fieldName = attr;
|
|
15
15
|
const outerTheme = useTheme();
|
|
16
16
|
const [showPassword, setShowPassword] = useState(false);
|
|
@@ -23,15 +23,16 @@ export default function TextField({ className, attr, label, createdForm, disable
|
|
|
23
23
|
const effectiveHeight = height !== undefined
|
|
24
24
|
? height
|
|
25
25
|
: multiline
|
|
26
|
-
?
|
|
26
|
+
? "100%"
|
|
27
27
|
: hasLabel
|
|
28
|
-
?
|
|
28
|
+
? "48px"
|
|
29
29
|
: undefined;
|
|
30
|
-
const getClassNames = cx(
|
|
30
|
+
const getClassNames = cx("ds-input-text", className, {
|
|
31
31
|
disabled: disabled,
|
|
32
|
+
"ds-input-textarea": multiline,
|
|
32
33
|
});
|
|
33
34
|
const applyMask = (value, isBlur) => {
|
|
34
|
-
if (typeof value ===
|
|
35
|
+
if (typeof value === "string" && mask) {
|
|
35
36
|
return mask(value, isBlur);
|
|
36
37
|
}
|
|
37
38
|
return value;
|
|
@@ -41,7 +42,9 @@ export default function TextField({ className, attr, label, createdForm, disable
|
|
|
41
42
|
if (mask && currentValue) {
|
|
42
43
|
const masked = applyMask(currentValue);
|
|
43
44
|
if (masked !== currentValue) {
|
|
44
|
-
createdForm.setValue(fieldName, masked, {
|
|
45
|
+
createdForm.setValue(fieldName, masked, {
|
|
46
|
+
shouldValidate: false,
|
|
47
|
+
});
|
|
45
48
|
}
|
|
46
49
|
}
|
|
47
50
|
}, [attr, mask, createdForm, fieldName]);
|
|
@@ -49,19 +52,19 @@ export default function TextField({ className, attr, label, createdForm, disable
|
|
|
49
52
|
const adornments = [];
|
|
50
53
|
if (defaultEndAdornments.length > 0) {
|
|
51
54
|
// Check for password adornment
|
|
52
|
-
if (defaultEndAdornments.includes(
|
|
53
|
-
adornments.push(_jsx(Icon, { name: showPassword ?
|
|
55
|
+
if (defaultEndAdornments.includes("password")) {
|
|
56
|
+
adornments.push(_jsx(Icon, { name: showPassword ? "visibility_off" : "visibility", size: "small", onClick: () => setShowPassword(!showPassword), className: "pointer" }, "password"));
|
|
54
57
|
}
|
|
55
58
|
// Check for info adornment
|
|
56
|
-
if (defaultEndAdornments.includes(
|
|
59
|
+
if (defaultEndAdornments.includes("info") && infoText) {
|
|
57
60
|
const infoTextElement = (_jsx(Icon, { name: "info", size: "small", className: "icon-info pointer" }));
|
|
58
61
|
adornments.push(_jsx(Tooltip, { title: infoText, mode: "simple", children: _jsx("span", { children: infoTextElement }) }, "info"));
|
|
59
62
|
}
|
|
60
63
|
// Check for close adornment - show when value is not undefined and value is not equal to defaultValue
|
|
61
|
-
if (defaultEndAdornments.includes(
|
|
64
|
+
if (defaultEndAdornments.includes("close") &&
|
|
62
65
|
value !== undefined &&
|
|
63
66
|
onRemove) {
|
|
64
|
-
adornments.push(_jsx(Icon, { name: "close", size: "small", className: `${disabled ?
|
|
67
|
+
adornments.push(_jsx(Icon, { name: "close", size: "small", className: `${disabled ? "d-none" : ""} pointer`, onClick: () => onRemove && onRemove() }, "close"));
|
|
65
68
|
}
|
|
66
69
|
}
|
|
67
70
|
// Append custom endAdornments if provided
|
|
@@ -85,11 +88,11 @@ export default function TextField({ className, attr, label, createdForm, disable
|
|
|
85
88
|
setActive(false);
|
|
86
89
|
}
|
|
87
90
|
}, [focus, mouseOver]);
|
|
88
|
-
return (_jsx("div", { className: getClassNames, style: { width }, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: textFieldTheme(outerTheme, { hasLabel }), children: [_jsx(MuiTextField, { ...field, inputRef: inputRef, label: label, value: field.value ||
|
|
91
|
+
return (_jsx("div", { className: getClassNames, style: { width }, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: textFieldTheme(outerTheme, { hasLabel }), children: [_jsx(MuiTextField, { ...field, inputRef: inputRef, label: label, value: field.value || "", type: defaultEndAdornments.includes("password")
|
|
89
92
|
? showPassword
|
|
90
|
-
?
|
|
91
|
-
:
|
|
92
|
-
:
|
|
93
|
+
? "text"
|
|
94
|
+
: "password"
|
|
95
|
+
: "text", fullWidth: true, required: required, disabled: disabled, variant: "filled", placeholder: !focus ? placeholder : "", color: "error", multiline: multiline, minRows: rows, slotProps: {
|
|
93
96
|
...(hasLabel && {
|
|
94
97
|
inputLabel: {
|
|
95
98
|
shrink: true,
|
|
@@ -124,41 +127,41 @@ export default function TextField({ className, attr, label, createdForm, disable
|
|
|
124
127
|
onChange && onChange(attr, value);
|
|
125
128
|
}, sx: {
|
|
126
129
|
borderColor: disabled
|
|
127
|
-
?
|
|
130
|
+
? "#BEBFC1"
|
|
128
131
|
: hasError()
|
|
129
|
-
?
|
|
132
|
+
? "#C6080A"
|
|
130
133
|
: active
|
|
131
|
-
?
|
|
132
|
-
:
|
|
133
|
-
|
|
134
|
+
? "#1C83F4"
|
|
135
|
+
: "#BEBFC1",
|
|
136
|
+
".MuiInputLabel-root": {
|
|
134
137
|
color: disabled
|
|
135
|
-
?
|
|
138
|
+
? "#BEBFC1"
|
|
136
139
|
: hasError()
|
|
137
|
-
?
|
|
140
|
+
? "#C6080A"
|
|
138
141
|
: active
|
|
139
|
-
?
|
|
140
|
-
:
|
|
142
|
+
? "#1C83F4"
|
|
143
|
+
: "#000000",
|
|
141
144
|
},
|
|
142
|
-
|
|
143
|
-
paddingTop: hasLabel ?
|
|
144
|
-
paddingBottom:
|
|
145
|
+
"& .MuiInputBase-inputMultiline": {
|
|
146
|
+
paddingTop: hasLabel ? "24px" : "8px",
|
|
147
|
+
paddingBottom: "16px",
|
|
145
148
|
},
|
|
146
149
|
...(hasLabel &&
|
|
147
150
|
!multiline && {
|
|
148
|
-
|
|
149
|
-
paddingTop:
|
|
151
|
+
"& .MuiInputBase-input": {
|
|
152
|
+
paddingTop: "16px",
|
|
150
153
|
},
|
|
151
154
|
}),
|
|
152
|
-
|
|
153
|
-
paddingTop: multiline ?
|
|
155
|
+
"& .MuiInputAdornment-positionEnd": {
|
|
156
|
+
paddingTop: multiline ? "12px" : "0px",
|
|
154
157
|
},
|
|
155
158
|
...(effectiveHeight !== undefined && {
|
|
156
159
|
height: effectiveHeight,
|
|
157
160
|
}),
|
|
158
|
-
|
|
159
|
-
paddingTop: multiline ?
|
|
160
|
-
height: effectiveHeight !== undefined ?
|
|
161
|
-
alignItems: multiline ?
|
|
161
|
+
"& .MuiInputBase-root": {
|
|
162
|
+
paddingTop: multiline ? "12px" : hasLabel ? "4px" : "0px",
|
|
163
|
+
height: effectiveHeight !== undefined ? "100%" : "auto",
|
|
164
|
+
alignItems: multiline ? "flex-start" : "center",
|
|
162
165
|
},
|
|
163
166
|
} }), maxChars && (_jsxs("div", { className: "character-counter", children: [field.value?.length || 0, "/", maxChars] })), title && !hasError() && _jsx("div", { className: "helper", children: title }), hasError() && (_jsx("div", { className: "helper error", children: String(createdForm.formState.errors[attr]?.message) }))] })) }) }));
|
|
164
167
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { FieldValues, UseFormReturn } from
|
|
2
|
-
import { SelectItem } from
|
|
3
|
-
import { AppFormField } from
|
|
4
|
-
import
|
|
1
|
+
import { FieldValues, UseFormReturn } from "react-hook-form";
|
|
2
|
+
import { SelectItem } from "../../basic";
|
|
3
|
+
import { AppFormField } from "./AppFormField";
|
|
4
|
+
import "./style.scss";
|
|
5
5
|
type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
|
|
6
6
|
fields: AppFormField[];
|
|
7
7
|
form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { AsyncSelectField, CheckboxField, DatePickerField, SelectField, SelectMultipleField, SwitchField, TextField, } from
|
|
3
|
-
import FormColorField from
|
|
4
|
-
import { getFieldFlexStyle, groupFieldsIntoRows } from
|
|
5
|
-
import
|
|
2
|
+
import { AsyncSelectField, CheckboxField, DatePickerField, SelectField, SelectMultipleField, SwitchField, TextField, } from "../../basic";
|
|
3
|
+
import FormColorField from "./FormColorField";
|
|
4
|
+
import { getFieldFlexStyle, groupFieldsIntoRows } from "./groupFieldsIntoRows";
|
|
5
|
+
import "./style.scss";
|
|
6
6
|
const convertList = (values, labelAttr, valueAttr) => {
|
|
7
7
|
if (!values)
|
|
8
8
|
return [];
|
|
@@ -18,18 +18,18 @@ export default function AppForm({ fields, form, prefix, onChangeFunctions = {},
|
|
|
18
18
|
const getOptions = (attr) => {
|
|
19
19
|
if (!runtimeOptions[attr])
|
|
20
20
|
return undefined;
|
|
21
|
-
return convertList(runtimeOptions[attr],
|
|
21
|
+
return convertList(runtimeOptions[attr], "name", "uid");
|
|
22
22
|
};
|
|
23
23
|
const renderField = (field) => {
|
|
24
24
|
const name = prefix ? `${prefix}.${field.attr}` : field.attr;
|
|
25
25
|
const handleChange = getOnChangeFn(field.attr);
|
|
26
|
-
if (field.type ===
|
|
26
|
+
if (field.type === "autocomplete") {
|
|
27
27
|
const loadOptions = runtimeLoadOptions[field.attr];
|
|
28
28
|
if (!loadOptions)
|
|
29
29
|
return null;
|
|
30
30
|
return (_jsx(AsyncSelectField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, multiple: field.multiple, freeSolo: field.freeSolo, minQueryLength: field.minQueryLength, loadOptions: loadOptions, placeholder: field.title, noOptionsText: field.translation, onChange: (_attr, value) => handleChange?.(value) }, name));
|
|
31
31
|
}
|
|
32
|
-
if (field.type ===
|
|
32
|
+
if (field.type === "select") {
|
|
33
33
|
const selectOptions = getOptions(field.attr) || field.options || [];
|
|
34
34
|
const selectProps = {
|
|
35
35
|
attr: name,
|
|
@@ -46,24 +46,24 @@ export default function AppForm({ fields, form, prefix, onChangeFunctions = {},
|
|
|
46
46
|
}
|
|
47
47
|
return _jsx(SelectField, { ...selectProps }, name);
|
|
48
48
|
}
|
|
49
|
-
if (field.type ===
|
|
49
|
+
if (field.type === "check") {
|
|
50
50
|
return (_jsx(CheckboxField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled }, name));
|
|
51
51
|
}
|
|
52
|
-
if (field.type ===
|
|
52
|
+
if (field.type === "switch") {
|
|
53
53
|
return (_jsx(SwitchField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, onChange: (value) => handleChange?.(value) }, name));
|
|
54
54
|
}
|
|
55
|
-
if (field.type ===
|
|
55
|
+
if (field.type === "datepicker") {
|
|
56
56
|
const handleBlur = getOnBlurFn(field.attr);
|
|
57
|
-
return (_jsx(DatePickerField, { attr: name, label: field.size ===
|
|
57
|
+
return (_jsx(DatePickerField, { attr: name, label: field.size === "small" ? undefined : field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (_attr, value) => handleChange?.(value), onBlur: handleBlur, height: field.size === "small" ? "32px" : undefined }, name));
|
|
58
58
|
}
|
|
59
|
-
if (field.type ===
|
|
60
|
-
return (_jsx(TextField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), multiline: true, rows: field.rows,
|
|
59
|
+
if (field.type === "textarea") {
|
|
60
|
+
return (_jsx(TextField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), multiline: true, rows: field.rows, infoText: field.infoText, defaultEndAdornments: field.infoText ? ["info"] : ["close"] }, name));
|
|
61
61
|
}
|
|
62
|
-
if (field.type ===
|
|
62
|
+
if (field.type === "color") {
|
|
63
63
|
return (_jsx(FormColorField, { attr: name, label: field.name, form: form, disabled: field.disabled, tooltipText: field.tooltipText, onChange: (value) => handleChange?.(value) }, name));
|
|
64
64
|
}
|
|
65
65
|
const handleBlur = getOnBlurFn(field.attr);
|
|
66
|
-
return (_jsx(TextField, { attr: name, label: field.size ===
|
|
66
|
+
return (_jsx(TextField, { attr: name, label: field.size === "small" ? undefined : field.name, placeholder: field.size === "small" ? field.name : undefined, createdForm: form, mask: field.mask, blurMask: field.blurMask, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), height: field.size === "small" ? "32px" : undefined, onBlur: handleBlur, infoText: field.infoText, defaultEndAdornments: field.infoText ? ["info"] : ["close"] }, name));
|
|
67
67
|
};
|
|
68
68
|
return (_jsx("div", { className: "app-form-container", children: groupFieldsIntoRows(fields).map((row, rowIdx) => (_jsx("div", { className: "app-form-row", children: row.map((field) => (_jsx("div", { className: "app-form-field", style: getFieldFlexStyle(field), children: renderField(field) }, field.attr))) }, rowIdx))) }));
|
|
69
69
|
}
|