nurseitaly-components 0.0.5 → 0.0.7

package/dist/basic/Avatar/Avatar.js

@@ -16,7 +16,7 @@ export default function Avatar({ src, className, size = 'large', title, onClick,
         placeholder: usePlaceholder,
     });
     useEffect(() => {
-        !src && setUsePlaceholder(true);
+        setUsePlaceholder(!src);
     }, [src]);
     return (_jsx("div", { className: getClassNames, children: usePlaceholder ? (_jsx(Icon, { name: "account_circle", size: size, filled: true, onClick: onClick })) : (_jsx("img", { src: src, onError: () => {
                 setUsePlaceholder(true);

package/dist/common/AppDropzone/AppDropzone.js

@@ -9,5 +9,5 @@ export default function AppDropzone({ folder, onClose, onSuccess, onError, accep
     const handleConfirm = () => {
         bodyRef.current?.upload();
     };
-    return (_jsx(AppModal, { title: title || t('modal.title'), className: "modal-upload", close: onClose, confirm: handleConfirm, disableConfirm: disableConfirm, alternativeButton: alternativeButton, children: _jsx(AppDropzoneBody, { ref: bodyRef, folder: folder, onSuccess: onSuccess, onError: onError, accept: accept, messages: messages, onDrop: onDrop, keepName: keepName, showConfirmButton: false }) }));
+    return (_jsx(AppModal, { title: title || t('modal.title', { defaultValue: 'Upload a file' }), className: "modal-upload", close: onClose, confirm: handleConfirm, disableConfirm: disableConfirm, alternativeButton: alternativeButton, children: _jsx(AppDropzoneBody, { ref: bodyRef, folder: folder, onSuccess: onSuccess, onError: onError, accept: accept, messages: messages, onDrop: onDrop, keepName: keepName, showConfirmButton: false }) }));
 }

package/dist/common/AppDropzone/AppDropzoneBody.js

@@ -66,9 +66,14 @@ function AppDropzoneBodyInner({ folder, onSuccess, onError, accept, messages, on
     };
     const resolveMessage = (key) => {
         const customMessage = messages?.[key]?.trim();
-        return customMessage || t(key);
+        return (customMessage ||
+            t(key, {
+                defaultValue: key === 'label.dropzone'
+                    ? 'Drag and drop or click to upload a file'
+                    : 'You are uploading the following file:',
+            }));
     };
-    return (_jsxs("div", { className: "dropzone-container", children: [!file && (_jsx(Dropzone, { onDrop: (acceptedFiles) => handleDrop(acceptedFiles), accept: accept, maxFiles: 1, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: resolveMessage('label.dropzone') })] })) })), file && (_jsxs("div", { className: "uploaded-file", children: [preview && _jsx("img", { className: "preview", src: preview, alt: "" }), !preview && (_jsxs(_Fragment, { children: [_jsx("b", { children: resolveMessage('label.uploaded.file') }), _jsx("span", { children: file.name })] })), showConfirmButton && (_jsxs("div", { className: "buttons", children: [_jsx(Button, { onClick: handleCancel, text: t('common:button.cancel'), size: "small", mode: "outlined", color: "danger" }), _jsx(Button, { onClick: upload, text: t('common:button.confirm'), size: "small", mode: "outlined", disabled: disableConfirm })] }))] }))] }));
+    return (_jsxs("div", { className: "dropzone-container", children: [!file && (_jsx(Dropzone, { onDrop: (acceptedFiles) => handleDrop(acceptedFiles), accept: accept, maxFiles: 1, children: ({ getRootProps, getInputProps }) => (_jsxs("div", { ...getRootProps(), className: "dropzone", children: [_jsx("input", { ...getInputProps() }), _jsx("span", { children: resolveMessage('label.dropzone') })] })) })), file && (_jsxs("div", { className: "uploaded-file", children: [preview && _jsx("img", { className: "preview", src: preview, alt: "" }), !preview && (_jsxs(_Fragment, { children: [_jsx("b", { children: resolveMessage('label.uploaded.file') }), _jsx("span", { children: file.name })] })), showConfirmButton && (_jsxs("div", { className: "buttons", children: [_jsx(Button, { onClick: handleCancel, text: t('common:button.cancel', { defaultValue: 'Cancel' }), size: "small", mode: "outlined", color: "danger" }), _jsx(Button, { onClick: upload, text: t('common:button.confirm', { defaultValue: 'Confirm' }), size: "small", mode: "outlined", disabled: disableConfirm })] }))] }))] }));
 }
 const AppDropzoneBody = forwardRef(AppDropzoneBodyInner);
 export default AppDropzoneBody;

package/dist/common/AppForm/AppForm.d.ts

@@ -10,7 +10,6 @@ type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTran
     onBlurFunctions?: Record<string, () => void>;
     runtimeOptions?: Record<string, any[]>;
     runtimeLoadOptions?: Record<string, (query: string) => Promise<SelectItem[]>>;
-    twoColumns?: boolean;
 };
-export default function AppForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ fields, form, prefix, onChangeFunctions, onBlurFunctions, runtimeOptions, runtimeLoadOptions, twoColumns, }: Props<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
+export default function AppForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ fields, form, prefix, onChangeFunctions, onBlurFunctions, runtimeOptions, runtimeLoadOptions, }: Props<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
 export {};

package/dist/common/AppForm/AppForm.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AsyncSelectField, CheckboxField, DatePickerField, SelectField, SelectMultipleField, SwitchField, TextField, } from '../../basic';
 import FormColorField from './FormColorField';
+import { getFieldFlexStyle, groupFieldsIntoRows } from './groupFieldsIntoRows';
 import './style.scss';
 const convertList = (values, labelAttr, valueAttr) => {
     if (!values)
@@ -11,7 +12,7 @@ const convertList = (values, labelAttr, valueAttr) => {
     });
     return fields;
 };
-export default function AppForm({ fields, form, prefix, onChangeFunctions = {}, onBlurFunctions = {}, runtimeOptions = {}, runtimeLoadOptions = {}, twoColumns = false, }) {
+export default function AppForm({ fields, form, prefix, onChangeFunctions = {}, onBlurFunctions = {}, runtimeOptions = {}, runtimeLoadOptions = {}, }) {
     const getOnChangeFn = (attr) => onChangeFunctions[attr];
     const getOnBlurFn = (attr) => onBlurFunctions[attr];
     const getOptions = (attr) => {
@@ -19,49 +20,50 @@ export default function AppForm({ fields, form, prefix, onChangeFunctions = {},
             return undefined;
         return convertList(runtimeOptions[attr], 'name', 'uid');
     };
-    return (_jsx("div", { className: `app-form-container ${twoColumns ? 'two-columns' : ''}`, children: fields.map((field) => {
-            const name = prefix ? `${prefix}.${field.attr}` : field.attr;
-            const handleChange = getOnChangeFn(field.attr);
-            if (field.type === 'autocomplete') {
-                const loadOptions = runtimeLoadOptions[field.attr];
-                if (!loadOptions)
-                    return null;
-                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));
-            }
-            if (field.type === 'select') {
-                const selectOptions = getOptions(field.attr) || field.options || [];
-                const selectProps = {
-                    attr: name,
-                    label: field.name,
-                    createdForm: form,
-                    options: selectOptions,
-                    disabled: field.disabled,
-                    required: field.required,
-                    onChange: (value) => handleChange?.(value),
-                    showEndAdornment: false,
-                };
-                if (field.multiple) {
-                    return _jsx(SelectMultipleField, { ...selectProps }, name);
-                }
-                return _jsx(SelectField, { ...selectProps }, name);
-            }
-            if (field.type === 'check') {
-                return (_jsx(CheckboxField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled }, name));
-            }
-            if (field.type === 'switch') {
-                return (_jsx(SwitchField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, onChange: (value) => handleChange?.(value) }, name));
-            }
-            if (field.type === 'datepicker') {
-                const handleBlur = getOnBlurFn(field.attr);
-                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));
-            }
-            if (field.type === 'textarea') {
-                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, height: "100%", infoText: field.infoText, defaultEndAdornments: field.infoText ? ['info'] : ['close'] }, name));
-            }
-            if (field.type === 'color') {
-                return (_jsx(FormColorField, { attr: name, label: field.name, form: form, disabled: field.disabled, tooltipText: field.tooltipText, onChange: (value) => handleChange?.(value) }, name));
+    const renderField = (field) => {
+        const name = prefix ? `${prefix}.${field.attr}` : field.attr;
+        const handleChange = getOnChangeFn(field.attr);
+        if (field.type === 'autocomplete') {
+            const loadOptions = runtimeLoadOptions[field.attr];
+            if (!loadOptions)
+                return null;
+            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));
+        }
+        if (field.type === 'select') {
+            const selectOptions = getOptions(field.attr) || field.options || [];
+            const selectProps = {
+                attr: name,
+                label: field.name,
+                createdForm: form,
+                options: selectOptions,
+                disabled: field.disabled,
+                required: field.required,
+                onChange: (value) => handleChange?.(value),
+                showEndAdornment: false,
+            };
+            if (field.multiple) {
+                return _jsx(SelectMultipleField, { ...selectProps }, name);
             }
+            return _jsx(SelectField, { ...selectProps }, name);
+        }
+        if (field.type === 'check') {
+            return (_jsx(CheckboxField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled }, name));
+        }
+        if (field.type === 'switch') {
+            return (_jsx(SwitchField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, onChange: (value) => handleChange?.(value) }, name));
+        }
+        if (field.type === 'datepicker') {
             const handleBlur = getOnBlurFn(field.attr);
-            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));
-        }) }));
+            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));
+        }
+        if (field.type === 'textarea') {
+            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, height: "100%", infoText: field.infoText, defaultEndAdornments: field.infoText ? ['info'] : ['close'] }, name));
+        }
+        if (field.type === 'color') {
+            return (_jsx(FormColorField, { attr: name, label: field.name, form: form, disabled: field.disabled, tooltipText: field.tooltipText, onChange: (value) => handleChange?.(value) }, name));
+        }
+        const handleBlur = getOnBlurFn(field.attr);
+        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));
+    };
+    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))) }));
 }

package/dist/common/AppForm/AppFormField.d.ts

@@ -34,4 +34,10 @@ export type AppFormField = {
     display?: DisplayFunction;
     copyToClipboard?: boolean;
     truncate?: number;
+    /** Flex-grow weight when sharing a row with adjacent flex fields. Omit for full-width. */
+    flexGrow?: number;
+    /** Optional flex-basis (default: 0 for even ratio distribution). */
+    flexBasis?: number | string;
+    /** Force a new row before this field (even if it has flexGrow). */
+    breakBefore?: boolean;
 };

package/dist/common/AppForm/AppFormInfo.js

@@ -1,6 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { formatSwitchFieldValue } from './AppFormField';
+import { getFieldFlexStyle, groupFieldsIntoRows } from './groupFieldsIntoRows';
 import './style.scss';
 import { Icon } from '../../basic';
 import UsabilityUtils from '../../functions/UsabilityUtils';
@@ -37,9 +38,7 @@ function getFieldDisplayContent(field, raw, t) {
 }
 export default function AppFormInfo({ fields, data }) {
     const { t } = useTranslation('common');
-    return (_jsx("div", { className: "app-form-info-container", children: fields.map((field, idx) => {
-            return (_jsxs("div", { className: "item", ...(field.title && { title: field.title }), children: [_jsxs("span", { className: "label", children: [field.name, ":"] }), _jsx("span", { className: "value", children: getFieldDisplayContent(field, data[field.attr], t) }), field.copyToClipboard && (_jsx(Icon, { name: "content_copy", size: "small", className: "ds-copy-icon", filled: true, onClick: () => {
-                            UsabilityUtils.copy(data[field.attr]);
-                        } }))] }, idx));
-        }) }));
+    return (_jsx("div", { className: "app-form-info-container", children: groupFieldsIntoRows(fields).map((row, rowIdx) => (_jsx("div", { className: "app-form-row", children: row.map((field, idx) => (_jsx("div", { className: "app-form-field", style: getFieldFlexStyle(field), children: _jsxs("div", { className: "item", ...(field.title && { title: field.title }), children: [_jsxs("span", { className: "label", children: [field.name, ":"] }), _jsx("span", { className: "value", children: getFieldDisplayContent(field, data[field.attr], t) }), field.copyToClipboard && (_jsx(Icon, { name: "content_copy", size: "small", className: "ds-copy-icon", filled: true, onClick: () => {
+                                UsabilityUtils.copy(data[field.attr]);
+                            } }))] }) }, field.attr ?? idx))) }, rowIdx))) }));
 }

package/dist/common/AppForm/groupFieldsIntoRows.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+import { AppFormField } from './AppFormField';
+export declare function groupFieldsIntoRows(fields: AppFormField[]): AppFormField[][];
+export declare function getFieldFlexStyle(field: AppFormField): CSSProperties | undefined;

package/dist/common/AppForm/groupFieldsIntoRows.js

@@ -0,0 +1,30 @@
+export function groupFieldsIntoRows(fields) {
+    const rows = [];
+    let currentRow = [];
+    const flush = () => {
+        if (currentRow.length) {
+            rows.push(currentRow);
+            currentRow = [];
+        }
+    };
+    for (const field of fields) {
+        if (field.breakBefore)
+            flush();
+        if (field.flexGrow != null) {
+            currentRow.push(field);
+        }
+        else {
+            flush();
+            rows.push([field]);
+        }
+    }
+    flush();
+    return rows;
+}
+export function getFieldFlexStyle(field) {
+    if (field.flexGrow == null)
+        return undefined;
+    return {
+        flex: `${field.flexGrow} ${field.flexGrow} ${field.flexBasis ?? 0}`,
+    };
+}

package/dist/common/AppForm/style.scss

@@ -8,10 +8,6 @@
     align-items: center;
     gap: 4px;
 
-    &.full-width {
-      grid-column: 1 / -1;
-    }
-
     .label {
       @include label-medium-2;
       color: var(--text-primary);
@@ -33,11 +29,26 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+}
+
+.app-form-row {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.app-form-field {
+  min-width: 0;
+
+  &:only-child {
+    flex: 1 1 100%;
+  }
+}
 
-  &.two-columns {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 16px;
+@media (max-width: 768px) {
+  .app-form-row {
+    flex-direction: column;
   }
 }
 

package/dist/common/AppToast/AppToast.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactLoading from 'react-loading';
 import { ToastContainer, toast } from 'react-toastify';
@@ -13,21 +13,18 @@ const MESSAGE_AUTO_CLOSE_MS = 5000;
 export default function AppToast() {
     const { t } = useTranslation('common');
     const { dispatch, state } = useContext(CommonContext);
+    const messageValueRef = useRef(state.message.value);
+    messageValueRef.current = state.message.value;
     const clearMessage = () => {
+        if (!messageValueRef.current)
+            return;
         dispatch(messageAction(EMPTY_TOAST));
     };
-    const handleClose = () => {
-        toast.dismiss(MESSAGE_TOAST_ID);
-        clearMessage();
-    };
-    const handleClipboard = () => {
-        navigator.clipboard.writeText(state.message.value);
-    };
-    const getLoading = () => (_jsxs("div", { className: "d-flex", children: [_jsx(ReactLoading, { type: "spinningBubbles", color: "blue", height: 24, width: 24 }), _jsx("span", { className: "ms-3", children: state.toastLoadingText ?? t('generic.loading') })] }));
+    const getLoading = () => (_jsxs("div", { className: "d-flex", children: [_jsx(ReactLoading, { type: "spinningBubbles", color: "blue", height: 24, width: 24 }), _jsx("span", { className: "ms-3", children: state.toastLoadingText ?? t('generic.loading', { defaultValue: 'Loading...' }) })] }));
     useEffect(() => {
         const closeOnEscape = (e) => {
             if (e.key === 'Escape')
-                handleClose();
+                toast.dismiss(MESSAGE_TOAST_ID);
         };
         window.addEventListener('keydown', closeOnEscape);
         return () => window.removeEventListener('keydown', closeOnEscape);
@@ -50,9 +47,8 @@ export default function AppToast() {
         }
     }, [state.toastLoading, state.toastLoadingText]);
     useEffect(() => {
-        if (!state.message?.value) {
+        if (!state.message?.value)
             return;
-        }
         const baseOptions = {
             toastId: MESSAGE_TOAST_ID,
             autoClose: MESSAGE_AUTO_CLOSE_MS,
@@ -64,17 +60,16 @@ export default function AppToast() {
             case 'error':
                 toast.error(state.message.value, {
                     ...baseOptions,
-                    onClick: () => handleClipboard(),
+                    onClick: () => {
+                        navigator.clipboard.writeText(state.message.value);
+                    },
                 });
                 break;
             case 'warning':
                 toast.warning(state.message.value, baseOptions);
                 break;
             case 'success':
-                toast.success(state.message.value, {
-                    ...baseOptions,
-                    onClick: () => handleClose(),
-                });
+                toast.success(state.message.value, baseOptions);
                 break;
             default:
                 toast(state.message.value, baseOptions);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nurseitaly-components",
   "private": false,
-  "version": "0.0.5",
+  "version": "0.0.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {