nurseitaly-components 0.0.6 → 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/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

@@ -20,7 +20,7 @@ export default function AppToast() {
             return;
         dispatch(messageAction(EMPTY_TOAST));
     };
-    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')

package/package.json

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