@irontec/ivoz-ui 1.7.14 → 1.7.17

package/components/List/Content/FastSearchField.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import SearchIcon from '@mui/icons-material/Search';
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { StyledSearchTextField } from '../../../services/form/Field/TextField/TextField.styles';
 import { useStoreActions, useStoreState } from 'store';
 import { isPropertyFk } from '../../../services';
 import { StyledAutocomplete } from '../../../services/form/Field/Autocomplete/Autocomplete.styles';
+import { StyledDynamicAutocomplete } from '../../../services/form/Field/DynamicAutocomplete/DynamicAutocomplete.styles';
 import useFirstColumn from './hook/useFirstColumn';
 import useFirstColumnCriteria from './hook/useFirstColumnCriteria';
+import StoreContainer from '../../../store/StoreContainer';
 const FastSearchField = (props, ref) => {
     const { className, path, entityService, ignoreColumn } = props;
     const storeQueryStringCriteria = useStoreState((state) => state.route.queryStringCriteria);
@@ -25,6 +27,32 @@ const FastSearchField = (props, ref) => {
     const isFk = isPropertyFk(firstColumnSpec);
     const foreignEntities = useStoreState((state) => state.list.fkChoices);
     const fkChoices = foreignEntities[firstColumnName] || [];
+    const [selectOptions, setSelectOptions] = useState(undefined);
+    const { useDynamicAutocomplete, entityName } = useMemo(() => {
+        var _a;
+        if (!isFk) {
+            return { useDynamicAutocomplete: false, entityName: '' };
+        }
+        const entities = StoreContainer.store.getState().entities.entities;
+        const entName = ((_a = firstColumnSpec.$ref) === null || _a === void 0 ? void 0 : _a.replace('#/definitions/', '')) || '';
+        const entity = entities === null || entities === void 0 ? void 0 : entities[entName];
+        return {
+            useDynamicAutocomplete: (entity === null || entity === void 0 ? void 0 : entity.dynamicSelectOptions) || false,
+            entityName: entName,
+        };
+    }, [isFk, firstColumnSpec]);
+    useEffect(() => {
+        if (!useDynamicAutocomplete || !entityName) {
+            return;
+        }
+        const entities = StoreContainer.store.getState().entities.entities;
+        const entity = entities === null || entities === void 0 ? void 0 : entities[entityName];
+        if (entity === null || entity === void 0 ? void 0 : entity.selectOptions) {
+            entity.selectOptions().then((handler) => {
+                setSelectOptions(() => handler);
+            });
+        }
+    }, [useDynamicAutocomplete, entityName]);
     const isDatetime = !isFk && firstColumnSpec.format === 'date-time';
     const initialValue = (firstColumnCriteria === null || firstColumnCriteria === void 0 ? void 0 : firstColumnCriteria.value) || '';
     const [value, setValue] = useState(isDatetime ? initialValue.replace(' ', 'T') : initialValue);
@@ -63,9 +91,8 @@ const FastSearchField = (props, ref) => {
         const queryStringCriteriaWithoutPagination = queryStringCriteria.filter((criteria) => criteria.name !== '_page');
         setQueryStringCriteria(queryStringCriteriaWithoutPagination);
     };
-    const changeHandler = ({ target, }) => {
-        const { value } = target;
-        setValue(value);
+    const changeHandler = ({ target }) => {
+        setValue(target.value);
     };
     useEffect(() => {
         //reset value
@@ -81,6 +108,11 @@ const FastSearchField = (props, ref) => {
         }, 2000);
         return () => clearTimeout(timeOutId);
     }, [value, firstColumnCriteria]);
+    if (isFk && useDynamicAutocomplete) {
+        return (_jsx(StyledDynamicAutocomplete, { name: 'fast_search', label: '', className: className, value: value, choices: {}, multiple: false, required: false, disabled: false, onChange: changeHandler, onBlur: () => {
+                /* noop */
+            }, selectOptions: selectOptions, error: false, errorMsg: '', hasChanged: false }));
+    }
     if (isFk) {
         return (_jsx(StyledAutocomplete, { className: className, name: 'fast_search', label: '', placeholder: 'Search', value: value, multiple: false, required: false, disabled: false, onChange: changeHandler, onBlur: () => {
                 /* noop */

package/components/List/Content/ListContentValue.js

@@ -58,7 +58,7 @@ const ListContentValue = (props) => {
         response = _jsx(StyledCheckBoxOutlineBlankIcon, {});
     }
     else {
-        response = _jsx(ListDecorator, { field: columnName, row: row, property: column });
+        response = _jsx(ListDecorator, { field: columnName, row: row, property: column, entityPath: entityService.getEntity().path });
     }
     if (isDownloadable && isFileType) {
         response = (_jsx(DownloadFile, { row: row, path: entityService.getEntity().path, fileType: columnName }));

package/components/List/Filter/ContentFilterDialog.js

@@ -16,10 +16,6 @@ export function ContentFilterDialog(props) {
     });
     const mobile = useMediaQuery(useTheme().breakpoints.down('md'));
     const [loading, setLoading] = useState(true);
-    const [criteria, setCriteria] = useState(queryStringCriteria);
-    useEffect(() => {
-        setCriteria(queryStringCriteria);
-    }, [queryStringCriteria, setCriteria]);
     const foreignKeyGetterLoader = entityService.getEntity().foreignKeyGetter;
     useEffect(() => {
         if (!loading) {
@@ -59,7 +55,7 @@ export function ContentFilterDialog(props) {
         setQueryStringCriteria(sanitizeData);
     };
     const removeFilter = (index) => {
-        const newCriteria = [...criteria];
+        const newCriteria = [...queryStringCriteria];
         newCriteria.splice(index, 1);
         setQueryStringCriteria(newCriteria);
     };

package/components/List/Filter/ContentFilterSelector/ContentFilterRow.js

@@ -6,9 +6,11 @@ import { memo, useEffect, useMemo, useState } from 'react';
 import { LightButton, TonalButton, } from '../../../../components/shared/Button/Button.styles';
 import { isPropertyFk, isPropertyScalar, } from '../../../../services/api/ParsedApiSpecInterface';
 import { StyledDropdown } from '../../../../services/form/Field/Dropdown/Dropdown.styles';
+import { StyledDynamicAutocomplete } from '../../../../services/form/Field/DynamicAutocomplete/DynamicAutocomplete.styles';
 import { StyledTextField } from '../../../../services/form/Field/TextField/TextField.styles';
 import _ from '../../../../services/translations/translate';
 import FilterIconFactory from '../icons/FilterIconFactory';
+import StoreContainer from '../../../../store/StoreContainer';
 const StyledDropdownMemo = memo(StyledDropdown, (prev, next) => {
     return prev.value === next.value;
 });
@@ -34,21 +36,52 @@ export default function ContentFilterRow(props) {
         setName(row.name);
         setType(row.type);
         setValue(row.value);
-    }, [row]);
+    }, [row.name, row.type, row.value]);
     const column = columns[name];
-    let enumValue = null;
-    if (isPropertyFk(column)) {
-        enumValue = fkChoices[name] || {};
-    }
-    else if (column.enum) {
-        enumValue = column.enum;
-    }
-    else if (column.type === 'boolean') {
-        enumValue = {
-            true: _('True'),
-            false: _('False'),
+    const [selectOptions, setSelectOptions] = useState(null);
+    const { useDynamicAutocomplete, entityName, enumValue } = useMemo(() => {
+        var _a;
+        let enumVal = null;
+        let useDynamic = false;
+        let entName = '';
+        if (isPropertyFk(column)) {
+            const entities = StoreContainer.store.getState().entities.entities;
+            entName = ((_a = column.$ref) === null || _a === void 0 ? void 0 : _a.replace('#/definitions/', '')) || '';
+            const entity = entities === null || entities === void 0 ? void 0 : entities[entName];
+            if (entity === null || entity === void 0 ? void 0 : entity.dynamicSelectOptions) {
+                useDynamic = true;
+            }
+            else {
+                enumVal = fkChoices[name] || {};
+            }
+        }
+        else if (column.enum) {
+            enumVal = column.enum;
+        }
+        else if (column.type === 'boolean') {
+            enumVal = {
+                true: _('True'),
+                false: _('False'),
+            };
+        }
+        return {
+            useDynamicAutocomplete: useDynamic,
+            entityName: entName,
+            enumValue: enumVal,
         };
-    }
+    }, [column, name, fkChoices]);
+    useEffect(() => {
+        if (!useDynamicAutocomplete || !entityName) {
+            return;
+        }
+        const entities = StoreContainer.store.getState().entities.entities;
+        const entity = entities === null || entities === void 0 ? void 0 : entities[entityName];
+        if (entity === null || entity === void 0 ? void 0 : entity.selectOptions) {
+            entity.selectOptions().then((handler) => {
+                setSelectOptions(() => handler);
+            });
+        }
+    }, [useDynamicAutocomplete, entityName]);
     const columnFormat = isPropertyScalar(column) && column.format;
     let textFieldInputType = 'text';
     const inputProps = {};
@@ -81,13 +114,17 @@ export default function ContentFilterRow(props) {
                     setType(target.value);
                 }, onBlur: () => {
                     /* noop */
-                }, choices: filterChoices, error: false, errorMsg: '', hasChanged: false }), type !== 'exists' && !enumValue && (_jsx(StyledTextField, { name: 'value', value: value, type: textFieldInputType, error: false, errorMsg: '', inputProps: inputProps, InputProps: {}, hasChanged: false, onChange: ({ target }) => {
+                }, choices: filterChoices, error: false, errorMsg: '', hasChanged: false }), type !== 'exists' && !enumValue && !useDynamicAutocomplete && (_jsx(StyledTextField, { name: 'value', value: value, type: textFieldInputType, error: false, errorMsg: '', inputProps: inputProps, InputProps: {}, hasChanged: false, onChange: ({ target }) => {
                     let { value } = target;
                     if (textFieldInputType === 'datetime-local') {
                         value = value.replace('T', ' ');
                     }
                     setValue(value);
-                } })), type !== 'exists' && enumValue && (_jsx(StyledDropdown, { name: 'value', label: '', value: value, required: false, disabled: false, onChange: ({ target }) => {
+                } })), type !== 'exists' && useDynamicAutocomplete && selectOptions && (_jsx(StyledDynamicAutocomplete, { name: 'value', label: '', value: value, choices: {}, multiple: false, required: false, disabled: false, onChange: ({ target }) => {
+                    setValue(target.value);
+                }, onBlur: () => {
+                    /* noop */
+                }, selectOptions: selectOptions, error: false, errorMsg: '', hasChanged: false })), type !== 'exists' && enumValue && !useDynamicAutocomplete && (_jsx(StyledDropdown, { name: 'value', label: '', value: value, required: false, disabled: false, onChange: ({ target }) => {
                     setValue(target.value);
                 }, onBlur: () => {
                     /* noop */

package/components/List/Filter/ContentFilterSelector/ContentFilterRow.styles.js

@@ -5,6 +5,10 @@ export const StyledContentFilterRow = styled(ContentFilterRow)(({ theme }) => {
         display: 'flex',
         alignItems: 'center',
         gap: 'var(--spacing-md)',
+        '& > *:not(button)': {
+            flex: 1,
+            minWidth: 0,
+        },
         [theme.breakpoints.down('md')]: {
             flexDirection: 'column',
             gap: 'var(--spacing-sm)',
@@ -16,5 +20,10 @@ export const StyledContentFilterRow = styled(ContentFilterRow)(({ theme }) => {
             height: '40px',
             aspectRatio: '1',
         },
+        '& .dynamic-autocomplete': {
+            '& .MuiInputBase-root': {
+                maxHeight: '40px',
+            },
+        },
     };
 });

package/components/List/Filter/ContentFilterSelector/ContentFilterSelector.js

@@ -20,7 +20,15 @@ export default function ContentFilterSelector(props) {
         const propertyName = columnNames[idx];
         filters[propertyName] = entityService.getPropertyFilters(propertyName, path);
     }
-    const [criteria, setCriteria] = useState(queryStringCriteria.length ? queryStringCriteria : []);
+    const [criteria, setCriteria] = useState(() => {
+        if (!queryStringCriteria.length)
+            return [];
+        return queryStringCriteria.map((row) => ({
+            name: row.name,
+            type: row.type,
+            value: decodeURIComponent(row.value),
+        }));
+    });
     const fieldNames = {};
     for (const fldName in filters) {
         fieldNames[fldName] = columns[fldName].label;
@@ -45,7 +53,7 @@ export default function ContentFilterSelector(props) {
         newCriteria[idx] = {
             name,
             type,
-            value: decodeURIComponent(value),
+            value,
         };
         setCriteria(newCriteria);
     };
@@ -61,7 +69,7 @@ export default function ContentFilterSelector(props) {
     const mobile = useMediaQuery(useTheme().breakpoints.down('md'));
     return (_jsxs("form", Object.assign({ className: className }, { children: [_jsxs(Box, Object.assign({ className: 'filters' }, { children: [_jsx("div", { children: _('Select Fields') }), !mobile &&
                         criteria.map((row, idx) => {
-                            return (_jsx(StyledContentFilterRow, { idx: idx, filters: filters, row: row, columns: columns, fkChoices: fkChoices, fieldNames: fieldNames, isLast: false, setRow: setRow, removeRow: removeRow }, idx));
+                            return (_jsx(StyledContentFilterRow, { idx: idx, filters: filters, row: row, columns: columns, fkChoices: fkChoices, fieldNames: fieldNames, isLast: false, setRow: setRow, removeRow: removeRow }, `${row.name}-${row.type}-${idx}`));
                         }), _jsx(StyledContentFilterRow, { idx: criteria.length, filters: filters, row: {
                             name: Object.keys(filters)[0],
                             type: defaultFilter,

package/entities/DefaultEntityBehavior/ListDecorator.js

@@ -1,9 +1,20 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isPropertyEmbeddable, isPropertyScalar, } from '../../services/api/ParsedApiSpecInterface';
 import { CustomFunctionComponentContext } from '../../services/form/Field/CustomComponentWrapper';
 import ListDecoratorMultilang from './ListDecoratorMultilang';
+import { ImageFileUploader } from '../../services/form/Field/FileUploader/Variant/ImageFileUploader';
 const ListDecorator = (props) => {
-    const { field, row, property, ignoreCustomComponent } = props;
+    var _a;
+    const { field, row, property, ignoreCustomComponent, entityPath } = props;
     const valuePath = field.split('.');
     let value = valuePath.length > 1
         ? row[valuePath.shift()][valuePath.shift()]
@@ -19,7 +30,11 @@ const ListDecorator = (props) => {
         return (_jsx(ListDecoratorMultilang, { field: field, row: row, property: property }));
     }
     if (property.type === 'file') {
-        return value.baseName;
+        const isImage = (_a = value === null || value === void 0 ? void 0 : value.mimeType) === null || _a === void 0 ? void 0 : _a.includes('image/');
+        if (isImage && entityPath) {
+            return (_jsx(ImageFileUploader, { _columnName: field, _context: CustomFunctionComponentContext.read, values: row, property: property, disabled: false, readOnly: true, downloadPath: `${entityPath}/${row.id}/${field}`, handleDownload: () => __awaiter(void 0, void 0, void 0, function* () { return Promise.resolve(); }), changeHandler: () => null, onBlur: () => null, choices: null, hasChanged: false }));
+        }
+        return value === null || value === void 0 ? void 0 : value.baseName;
     }
     if (isPropertyScalar(property) && property.enum) {
         let idx = value;

package/entities/DefaultEntityBehavior.d.ts

@@ -47,7 +47,7 @@ declare const DefaultEntityBehavior: {
     Form: () => Promise<EntityFormType>;
     View: () => Promise<(props: import("./EntityInterface").ViewProps) => JSX.Element | null>;
     fetchFks: (endpoint: string, properties: Array<EntityValues> | Array<string>, setter: FetchFksCallback, cancelToken?: CancelToken) => Promise<unknown>;
-    fetchAllFks: (props: import("../helpers/fechAllPages").fetchAllPagesProps) => Promise<unknown>;
+    fetchAllFks: (props: import("../helpers/fetchAllPages").fetchAllPagesProps) => Promise<unknown>;
     defaultOrderBy: string;
     defaultOrderDirection: OrderDirection;
 };

package/entities/DefaultEntityBehavior.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import * as React from 'react';
 import { OrderDirection, } from './EntityInterface';
-import { fetchAllPages } from '../helpers/fechAllPages';
+import { fetchAllPages } from '../helpers/fetchAllPages';
 import { isEntityItem } from '../router';
 import autoForeignKeyResolver from './DefaultEntityBehavior/AutoForeignKeyResolver';
 import autoSelectOptions, { autoSelectOptionHandlers, } from './DefaultEntityBehavior/AutoSelectOptions';

package/entities/EntityInterface.d.ts

@@ -14,6 +14,7 @@ export declare type ListDecoratorPropsType = {
     row: any;
     property: PropertySpec;
     ignoreCustomComponent?: true;
+    entityPath?: string;
 };
 export declare type ListDecoratorType = React.FunctionComponent<ListDecoratorPropsType>;
 export interface ChildDecoratorProps {

package/helpers/{fechAllPages.js → fetchAllPages.js}

@@ -15,23 +15,20 @@ export const fetchAllPages = (props) => __awaiter(void 0, void 0, void 0, functi
     let keepGoing = true;
     let _page = parseInt(((_a = endpoint.match(/_page=([0-9]+)/)) === null || _a === void 0 ? void 0 : _a[1]) || '1', 10);
     const response = [];
-    let loopCount = 0;
     while (keepGoing) {
         try {
-            if (loopCount > 5) {
-                console.error('Too much requests');
-                break;
-            }
-            loopCount++;
             const result = yield getAction({
                 path: endpoint,
                 silenceErrors: false,
-                params: Object.assign(Object.assign({}, params), { _pagination: false, _itemsPerPage: 200, _page }),
+                params: Object.assign(Object.assign({ _itemsPerPage: 200 }, params), { _page }),
                 successCallback: (data, headers) => __awaiter(void 0, void 0, void 0, function* () {
                     response.push(...data);
                     const totalItems = parseInt((headers === null || headers === void 0 ? void 0 : headers['x-total-items']) || `${response.length}`, 10);
-                    if (response.length >= totalItems ||
-                        !data.length) {
+                    const totalPages = parseInt((headers === null || headers === void 0 ? void 0 : headers['x-total-pages']) || '1', 10);
+                    const isLastPage = _page >= totalPages;
+                    const hasAllItems = response.length >= totalItems;
+                    const isEmptyResponse = !data.length;
+                    if (isLastPage || hasAllItems || isEmptyResponse) {
                         keepGoing = false;
                     }
                     _page++;

package/helpers/index.d.ts

@@ -1,2 +1,2 @@
-export * from './fechAllPages';
+export * from './fetchAllPages';
 export * from './fetchFilteredPage';

package/helpers/index.js

@@ -1,2 +1,2 @@
-export * from './fechAllPages';
+export * from './fetchAllPages';
 export * from './fetchFilteredPage';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.7.14",
+  "version": "1.7.17",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",

package/services/form/Field/DynamicAutocomplete/DynamicAutocomplete.js

@@ -9,7 +9,7 @@ const DynamicAutocomplete = (props) => {
     var _a;
     const { nullOption, name, label, required, multiple, disabled, onBlur, error, errorMsg, helperText, hasChanged, value, choices, selectOptions, onChange, } = props;
     const { t } = useTranslation();
-    let className = props.className;
+    let className = props.className || '';
     if (hasChanged) {
         className += ' changed';
     }
@@ -25,7 +25,11 @@ const DynamicAutocomplete = (props) => {
     const [loading, setLoading] = useState(false);
     const [currentOption, setCurrentOption] = useState(nullOptionObject);
     const debounceTimeoutRef = useRef();
+    const loadedValuesRef = useRef(new Set());
     useEffect(() => {
+        if (selectOptions && Object.keys(choices).length === 0) {
+            return;
+        }
         if (Array.isArray(choices)) {
             setArrayChoices(choices);
             return;
@@ -41,25 +45,27 @@ const DynamicAutocomplete = (props) => {
         if (nullValue) {
             return;
         }
-        if (!choices) {
+        if (!selectOptions) {
             return;
         }
-        const choicesIncludesValue = Array.isArray(choices)
-            ? choices.some((item) => item.id === value)
-            : choices && value in choices;
-        if (choicesIncludesValue) {
+        if (loadedValuesRef.current.has(value)) {
             return;
         }
-        selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions({
+        loadedValuesRef.current.add(value);
+        selectOptions({
             callback: (options) => {
                 const option = options[0];
-                arrayChoices.push(option);
-                setArrayChoices(arrayChoices);
+                if (option) {
+                    setArrayChoices((prev) => {
+                        const exists = prev.some((item) => item.id == option.id);
+                        return exists ? prev : [...prev, option];
+                    });
+                }
             },
         }, {
             id: value,
         });
-    }, []);
+    }, [value, selectOptions]);
     const setOptions = useCallback((options) => {
         const isCurrentOptionIncluded = options.some((option) => option.id == (currentOption === null || currentOption === void 0 ? void 0 : currentOption.id));
         if (!isCurrentOptionIncluded &&
@@ -209,9 +215,9 @@ const DynamicAutocomplete = (props) => {
     const disableClearable = arrayChoices.find((item) => item.id === '__null__')
         ? false
         : true;
-    const safeValue = arrayChoices.find((item) => item.id === value)
+    const safeValue = arrayChoices.find((item) => item.id == value)
         ? value
         : null;
-    return (_jsx(MuiAutocomplete, { className: 'dynamic-autocomplete' + className, value: safeValue, multiple: multiple, disabled: disabled, disableClearable: disableClearable, onChange: onChangeWrapper, onBlur: onBlur, onInputChange: handleInputChange, options: arrayChoices !== null && arrayChoices !== void 0 ? arrayChoices : [], getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, loading: loading, placeholder: props.placeholder, renderInput: renderInput, PaperComponent: CustomOption, renderOption: (props, option) => (_jsx(Box, Object.assign({ component: 'li', className: 'autocomplete-option', "data-value": option.id }, props, { children: option.label }))) }));
+    return (_jsx(MuiAutocomplete, { className: 'dynamic-autocomplete ' + className, value: safeValue, multiple: multiple, disabled: disabled, disableClearable: disableClearable, onChange: onChangeWrapper, onBlur: onBlur, onInputChange: handleInputChange, options: arrayChoices !== null && arrayChoices !== void 0 ? arrayChoices : [], getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, loading: loading, placeholder: props.placeholder, renderInput: renderInput, PaperComponent: CustomOption, renderOption: (props, option) => (_jsx(Box, Object.assign({ component: 'li', className: 'autocomplete-option', "data-value": option.id }, props, { children: option.label }))) }));
 };
 export default DynamicAutocomplete;

package/services/form/Field/FileUploader/FileUploader.styles.d.ts

@@ -12,6 +12,9 @@ interface StyledUploadButtonLabelProps {
 export declare const StyledUploadButtonLabel: import("@emotion/styled").StyledComponent<StyledUploadButtonLabelProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledFileNameContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledImageContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledImagePreview: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+interface StyledImagePreviewProps {
+    $isReadMode?: boolean;
+}
+export declare const StyledImagePreview: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledImagePreviewProps, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const StyledTextContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/services/form/Field/FileUploader/FileUploader.styles.js

@@ -38,10 +38,14 @@ export const StyledImageContainer = styled('div')({
         color: '#A3A4A8',
     },
 });
-export const StyledImagePreview = styled('img')({
-    maxWidth: '300px',
+export const StyledImagePreview = styled('img')(({ $isReadMode }) => ({
+    maxWidth: $isReadMode ? '50px' : '200px',
+    maxHeight: $isReadMode ? '50px' : '200px',
+    width: 'auto',
     height: 'auto',
-});
+    objectFit: $isReadMode ? 'cover' : 'contain',
+    cursor: $isReadMode ? '' : 'pointer',
+}));
 export const StyledTextContainer = styled('div')({
     color: '#B2B3B6',
     fontSize: '14px',

package/services/form/Field/FileUploader/Variant/ImageFileUploader.js

@@ -16,14 +16,16 @@ import { useStoreActions } from '../../../../../store';
 import { StyledImageFileUpladerTextDield } from '../../TextField/TextField.styles';
 import { IconButton, InputAdornment } from '@mui/material';
 import CancelIcon from '@mui/icons-material/Cancel';
+import { CustomFunctionComponentContext } from '../../CustomComponentWrapper';
 export const ImageFileUploader = (props) => {
     var _a, _b;
-    const { _columnName, accept, values, disabled, handleDownload, changeHandler, onBlur, downloadPath, property, } = props;
+    const { _columnName, _context, accept, values, disabled, handleDownload, changeHandler, onBlur, downloadPath, property, } = props;
     const fileValue = values[_columnName];
     const id = `${_columnName}-file-upload`;
     const fileName = (fileValue === null || fileValue === void 0 ? void 0 : fileValue.file) ? (_a = fileValue.file) === null || _a === void 0 ? void 0 : _a.name : fileValue === null || fileValue === void 0 ? void 0 : fileValue.baseName;
     const fileSize = (fileValue === null || fileValue === void 0 ? void 0 : fileValue.file) ? (_b = fileValue.file) === null || _b === void 0 ? void 0 : _b.size : fileValue === null || fileValue === void 0 ? void 0 : fileValue.fileSize;
     const fileSizeMb = Math.round(((fileSize || 0) / 1024 / 1024) * 10) / 10;
+    const isReadMode = _context === CustomFunctionComponentContext.read;
     const apiDownload = useStoreActions((actions) => {
         return actions.api.download;
     });
@@ -49,6 +51,12 @@ export const ImageFileUploader = (props) => {
             }),
         });
     }, [fileValue.file, fileValue.baseName]);
+    if (isReadMode) {
+        if (!fileName || !imageSrc) {
+            return null;
+        }
+        return (_jsx(StyledImageContainer, { children: _jsx(StyledImagePreview, { src: imageSrc, "$isReadMode": isReadMode }) }));
+    }
     return (_jsxs(_Fragment, { children: [_jsxs(StyledFileUploaderContainer, { children: [_jsx("input", { style: { display: 'none' }, id: id, type: 'file', accept: accept, onChange: (event) => {
                             const files = event.target.files || [];
                             const value = Object.assign(Object.assign({}, fileValue), { file: files[0] });
@@ -60,7 +68,7 @@ export const ImageFileUploader = (props) => {
                             };
                             changeHandler(changeEvent);
                             onBlur(changeEvent);
-                        } }), fileName && (_jsx(StyledImageContainer, Object.assign({ className: disabled ? 'disabled' : '' }, { children: imageSrc ? (_jsx(StyledImagePreview, { src: imageSrc, onClick: handleDownload })) : (values.id && _jsx(AccountCircleIcon, { onClick: handleDownload })) }))), _jsxs(StyledTextContainer, { children: [_jsx("span", { children: "JPG, JPEG, PNG format" }), _jsx("span", { children: "Maximum 500KB" }), !disabled && (_jsx(StyledUploadButtonLabel, Object.assign({ htmlFor: id }, { children: _('Upload image') }))), fileName && (_jsxs("span", { children: [fileName, " (", fileSizeMb, "MB)"] })), fileName && !property.required && (_jsx(StyledImageFileUpladerTextDield, { type: 'text', multiline: false, value: fileName, hasChanged: false, disabled: true, InputProps: {
+                        } }), fileName && (_jsx(StyledImageContainer, Object.assign({ className: disabled ? 'disabled' : '' }, { children: imageSrc ? (_jsx(StyledImagePreview, { src: imageSrc, onClick: handleDownload, "$isReadMode": isReadMode })) : (values.id && _jsx(AccountCircleIcon, { onClick: handleDownload })) }))), _jsxs(StyledTextContainer, { children: [_jsx("span", { children: "JPG, JPEG, PNG format" }), _jsx("span", { children: "Maximum 500KB" }), !disabled && (_jsx(StyledUploadButtonLabel, Object.assign({ htmlFor: id }, { children: _('Upload image') }))), fileName && (_jsxs("span", { children: [fileName, " (", fileSizeMb, "MB)"] })), fileName && !property.required && (_jsx(StyledImageFileUpladerTextDield, { type: 'text', multiline: false, value: fileName, hasChanged: false, disabled: true, InputProps: {
                                     endAdornment: (_jsx(InputAdornment, Object.assign({ position: 'end' }, { children: _jsx(IconButton, Object.assign({ "aria-label": 'delete image', onClick: () => {
                                                 setImageSrc(null);
                                                 const changeEvent = {