@evoke-platform/ui-components 1.0.0-dev.217 → 1.0.0-dev.218

package/dist/published/components/custom/Form/FormComponents/ButtonComponent.js

@@ -0,0 +1,150 @@
+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());
+    });
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ReactComponent } from '@formio/react';
+import { groupBy, isEmpty } from 'lodash';
+import { customAlphabet } from 'nanoid';
+import { lowercase, uppercase } from 'nanoid-dictionary';
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { LoadingButton } from '../../../core';
+import { Box } from '../../../layout';
+const nanoid = customAlphabet(uppercase + lowercase);
+export class ButtonComponent extends ReactComponent {
+    constructor(component, options, data) {
+        super(component, options, data);
+        this.getButton = (buttonAction) => {
+            var _a;
+            return (_a = this.component.components) === null || _a === void 0 ? void 0 : _a.find((button) => button && button.action == buttonAction);
+        };
+        this.handleCancel = (event) => {
+            const cancelButton = this.getButton('cancel');
+            cancelButton === null || cancelButton === void 0 ? void 0 : cancelButton.onClick(event);
+        };
+        this.handleSaveDraft = (setSubmitting) => {
+            setSubmitting(true);
+            const submission = this.root.getValue();
+            const saveDraftButton = this.getButton('save-draft');
+            if (!saveDraftButton) {
+                console.error('Save draft button not on form');
+                return;
+            }
+            this.emit('saveDraftButton', submission);
+            this.root.errors.forEach((error) => {
+                // set non-required empty fields to null if it has a mask
+                const maskMessage = error.messages.find((message) => message.context.validator === 'mask');
+                const noMaskError = !!maskMessage &&
+                    !error.component.validate.required &&
+                    submission.data[error.component.key] === maskMessage.context.value;
+                if (noMaskError) {
+                    submission.data[error.component.key] = null;
+                }
+            });
+            saveDraftButton.onClick(submission, this.setError, setSubmitting);
+        };
+        this.handleSubmit = (setSubmitting) => {
+            setSubmitting(true);
+            const submission = this.root.getValue();
+            const submitButton = this.getButton('submit');
+            if (!submitButton) {
+                console.error('Submit button not on form');
+                return;
+            }
+            this.emit('submitButton', submission);
+            const errors = [
+                ...this.root.errors.filter((error) => {
+                    // remove mask errors when field is empty and not required
+                    const maskMessage = error.messages.find((message) => message.context.validator === 'mask');
+                    const noMaskError = !!maskMessage &&
+                        !error.component.validate.required &&
+                        submission.data[error.component.key] === maskMessage.context.value;
+                    if (noMaskError) {
+                        submission.data[error.component.key] = null;
+                    }
+                    return !noMaskError;
+                }),
+                ...this.root.customErrors.filter((err) => err.code !== 'errorMessage'),
+            ];
+            if (isEmpty(errors)) {
+                submitButton.onClick(submission, this.setError, setSubmitting);
+            }
+            else {
+                setTimeout(() => {
+                    const element = document.getElementById(`error-list-${this.root.id}`);
+                    submitButton.isModal
+                        ? element === null || element === void 0 ? void 0 : element.scrollIntoView({ block: 'nearest' })
+                        : this.scrollIntoViewWithOffset(element, 170);
+                }, 0);
+                setSubmitting(false);
+            }
+        };
+        this.scrollIntoViewWithOffset = (el, offset) => {
+            var _a, _b, _c;
+            window.scrollTo({
+                behavior: 'smooth',
+                top: ((_a = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) === null || _a === void 0 ? void 0 : _a.top) - ((_c = (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.top) - offset,
+            });
+        };
+        this.setButtonKey = (value) => {
+            this.buttonKey = value;
+        };
+        this.getButton = this.getButton.bind(this);
+        this.handleCancel = this.handleCancel.bind(this);
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleSaveDraft = this.handleSaveDraft.bind(this);
+        this.setError = this.setError.bind(this);
+        this.buttonKey = nanoid();
+    }
+    setError(error) {
+        if ((error === null || error === void 0 ? void 0 : error.statusCode) === 422) {
+            for (const [key, details] of Object.entries(groupBy(error.details, 'path'))) {
+                this.emit(`error-${key.replace('/', '')}`, details);
+            }
+            setTimeout(() => {
+                const submitButton = this.getButton('submit');
+                const element = document.getElementById(`error-list-${this.root.id}`);
+                (submitButton === null || submitButton === void 0 ? void 0 : submitButton.isModal)
+                    ? element === null || element === void 0 ? void 0 : element.scrollIntoView({ block: 'nearest' })
+                    : this.scrollIntoViewWithOffset(element, 170);
+            }, 100);
+        }
+    }
+    attachReact(element) {
+        if (!this.componentRoot) {
+            this.componentRoot = createRoot(element);
+        }
+        return this.componentRoot.render(React.createElement(Box, { sx: { width: '100%', display: 'flex', justifyContent: 'flex-end', paddingTop: '10px' } }, this.component.components.map((button) => {
+            if (button) {
+                return (React.createElement(Button, { key: this.buttonKey, button: button, handleSubmit: this.handleSubmit, handleCancel: this.handleCancel, handleSaveDraft: this.handleSaveDraft, setButtonKey: this.setButtonKey }));
+            }
+            return null;
+        })));
+    }
+}
+const Button = (props) => {
+    const { button, handleSubmit, handleCancel, handleSaveDraft, setButtonKey } = props;
+    const [submitting, setSubmitting] = useState(false);
+    return (React.createElement(LoadingButton, { sx: button.style, variant: button.variant, onClick: (event) => __awaiter(void 0, void 0, void 0, function* () {
+            switch (button.action) {
+                case 'submit':
+                    handleSubmit(setSubmitting);
+                    setButtonKey(nanoid());
+                    break;
+                case 'cancel':
+                    handleCancel(event);
+                    break;
+                case 'save-draft':
+                    handleSaveDraft(setSubmitting);
+                    break;
+                default:
+                    button.onClick();
+            }
+        }), loading: submitting }, button.label));
+};

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/Document.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ApiServices, DocumentValidation, ObjectInstance, Property } from '@evoke-platform/context';
+import { SavedDocumentReference } from '../../types';
+declare type DocumentProps = {
+    id: string;
+    handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | null) => void;
+    property: Property;
+    instance: ObjectInstance;
+    canUpdateProperty: boolean;
+    error: boolean;
+    apiServices: ApiServices;
+    objectId?: string;
+    validate?: DocumentValidation;
+    value: (File | SavedDocumentReference)[] | undefined;
+};
+export declare const Document: (props: DocumentProps) => JSX.Element;
+export {};

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/Document.js

@@ -0,0 +1,80 @@
+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 { isNil } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { UploadCloud } from '../../../../../icons';
+import { Skeleton, Snackbar, Typography } from '../../../../core';
+import { Box, Grid } from '../../../../layout';
+import { getPrefixedUrl } from '../../utils';
+import { DocumentList } from './DocumentList';
+export const Document = (props) => {
+    var _a;
+    const { id, handleChange, property, instance, canUpdateProperty, apiServices, error, objectId, value, validate } = props;
+    const [documents, setDocuments] = useState();
+    const [hasUpdatePermission, setHasUpdatePermission] = useState();
+    const [snackbarError, setSnackbarError] = useState();
+    useEffect(() => {
+        setDocuments(value);
+    }, [value]);
+    useEffect(() => {
+        const currentValue = instance === null || instance === void 0 ? void 0 : instance[property.id];
+        if (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) {
+            setDocuments(currentValue);
+        }
+    }, [property]);
+    useEffect(() => {
+        checkPermissions();
+    }, []);
+    const checkPermissions = () => {
+        if (canUpdateProperty) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=update`))
+                .then((accessCheck) => setHasUpdatePermission(accessCheck.result));
+        }
+    };
+    const handleUpload = (files) => __awaiter(void 0, void 0, void 0, function* () {
+        const newDocuments = [...(documents !== null && documents !== void 0 ? documents : []), ...(files !== null && files !== void 0 ? files : [])];
+        setDocuments(newDocuments);
+        handleChange(property.id, newDocuments);
+    });
+    const uploadDisabled = !!(validate === null || validate === void 0 ? void 0 : validate.maxDocuments) && ((_a = documents === null || documents === void 0 ? void 0 : documents.length) !== null && _a !== void 0 ? _a : 0) >= validate.maxDocuments;
+    const { getRootProps, getInputProps, open } = useDropzone({
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onDrop: (files) => handleUpload(files),
+        disabled: uploadDisabled,
+    });
+    return (React.createElement(React.Fragment, null,
+        canUpdateProperty && hasUpdatePermission && (React.createElement(Box, Object.assign({ sx: {
+                margin: '5px 0',
+                height: '115px',
+                borderRadius: '8px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                border: `1px dashed ${error ? 'red' : uploadDisabled ? '#DFE3E8' : '#858585'}`,
+                position: 'relative',
+                cursor: uploadDisabled ? 'cursor' : 'pointer',
+            } }, getRootProps(), { onClick: open }),
+            React.createElement("input", Object.assign({}, getInputProps({ id }), { disabled: uploadDisabled })),
+            React.createElement(Grid, { container: true, sx: { width: '100%' } },
+                React.createElement(Grid, { item: true, xs: 12, sx: { display: 'flex', justifyContent: 'center', paddingBottom: '7px' } },
+                    React.createElement(UploadCloud, { sx: { color: uploadDisabled ? '#919EAB' : '#919EAB', width: '50px', height: '30px' } })),
+                React.createElement(Grid, { item: true, xs: 12 },
+                    React.createElement(Typography, { variant: "body2", sx: { color: uploadDisabled ? '#919EAB' : '#212B36', textAlign: 'center' } },
+                        "Drag and drop or",
+                        ' ',
+                        React.createElement(Typography, { component: 'span', sx: { color: uploadDisabled ? '#919EAB' : '#0075A7', fontSize: '14px' } }, "select file"),
+                        ' ',
+                        "to upload"))))),
+        canUpdateProperty && isNil(hasUpdatePermission) && (React.createElement(Skeleton, { variant: "rectangular", height: "115px", sx: { margin: '5px 0', borderRadius: '8px' } })),
+        React.createElement(DocumentList, { property: property, instance: instance, objectId: objectId, handleChange: handleChange, value: value, apiServices: apiServices, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission }),
+        React.createElement(Snackbar, { open: !!(snackbarError === null || snackbarError === void 0 ? void 0 : snackbarError.message), handleClose: () => setSnackbarError(null), message: snackbarError === null || snackbarError === void 0 ? void 0 : snackbarError.message, error: (snackbarError === null || snackbarError === void 0 ? void 0 : snackbarError.type) === 'error' })));
+};

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentComponent.d.ts

@@ -0,0 +1,23 @@
+import { ReactComponent } from '@formio/react';
+import { Root } from 'react-dom/client';
+import { BaseFormComponentProps, SavedDocumentReference } from '../../types';
+export declare class DocumentComponent extends ReactComponent {
+    [x: string]: any;
+    static schema: any;
+    component: BaseFormComponentProps;
+    errorDetails: any;
+    componentRoot?: Root;
+    constructor(component: any, options: any, data: any);
+    init(): void;
+    clearErrors(): void;
+    hasErrors(): boolean;
+    errorMessages(): string;
+    /**
+     * Synchronizes out-of-the-box form.io errors with this field's errorDetails object
+     */
+    manageFormErrors(): void;
+    handleChange: (key: string, value?: (File | SavedDocumentReference)[] | null) => void;
+    handleValidation(value?: (File | SavedDocumentReference)[] | null): void;
+    beforeSubmit(): Promise<void>;
+    attachReact(element: Element): void;
+}

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentComponent.js

@@ -0,0 +1,154 @@
+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());
+    });
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ReactComponent } from '@formio/react';
+import { isEmpty } from 'lodash';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { FormComponentWrapper } from '../../Common';
+import { Document } from './Document';
+export class DocumentComponent extends ReactComponent {
+    constructor(component, options, data) {
+        super(Object.assign(Object.assign({}, component), { canUpdateProperty: !component.readOnly, hideLabel: true }), options, data);
+        this.handleChange = (key, value) => {
+            delete this.errorDetails['api-error'];
+            this.setValue(value);
+            this.updateValue(value !== null && value !== void 0 ? value : [], { modified: true });
+            this.handleValidation(value);
+            this.emit('changed-' + this.component.key, value);
+            this.attach(this.element);
+            if (this.component.autoSave) {
+                this.component.autoSave({ [key]: value });
+            }
+        };
+        this.errorDetails = {};
+        this.handleChange = this.handleChange.bind(this);
+    }
+    init() {
+        this.on('changed-' + this.component.conditional.when, (value) => {
+            // set default value when conditional field is shown
+            if (this.component.defaultValue && value === this.component.conditional.eq) {
+                this.setValue(this.component.defaultValue);
+                this.updateValue(this.component.defaultValue, { modified: true });
+            }
+            // clear data and errors when a true conditional field is hidden
+            if (this.component.conditional.show && value !== this.component.conditional.eq) {
+                this.setValue('');
+                this.updateValue('', { modified: true });
+                this.clearErrors();
+                super.detach();
+            }
+        });
+        this.on(`api-error`, (details) => {
+            const error = details.find((detail) => detail.code === 'errorMessage' && detail.path.replace('/', '') === this.component.key);
+            if (error) {
+                if (!this.root.customErrors.find((err) => err.formattedKeyOrPath === this.component.key && err.message === error.message)) {
+                    this.root.customErrors = [
+                        ...this.root.customErrors,
+                        Object.assign(Object.assign({}, error), { code: 'api-error', component: this.component, formattedKeyOrPath: this.component.key }),
+                    ];
+                }
+                this.errorDetails['api-error'] = error === null || error === void 0 ? void 0 : error.message;
+            }
+            else {
+                this.root.customErrors = this.root.customErrors.filter((item) => item.formattedKeyOrPath !== this.component.key);
+                delete this.errorDetails['api-error'];
+            }
+            this.attach(this.element);
+            this.attachReact(this.element);
+        });
+    }
+    clearErrors() {
+        this.errorDetails = {};
+        this.root.customErrors = this.root.customErrors.filter((error) => error.formattedKeyOrPath !== this.component.key);
+    }
+    hasErrors() {
+        return !isEmpty(this.errorDetails);
+    }
+    errorMessages() {
+        return Object.values(this.errorDetails).join(', ');
+    }
+    /**
+     * Synchronizes out-of-the-box form.io errors with this field's errorDetails object
+     */
+    manageFormErrors() {
+        var _a;
+        const outOfTheBoxError = (_a = this.root.errors.find((error) => {
+            return error.component.key === this.component.key;
+        })) === null || _a === void 0 ? void 0 : _a.message;
+        // add OoB form.io error to errorDetails object to show under field
+        if (outOfTheBoxError) {
+            this.errorDetails['rootError'] = outOfTheBoxError;
+        }
+        else {
+            delete this.errorDetails['rootError'];
+        }
+        // add custom errors to be read by the Buttons component to show above the form
+        Object.values(this.errorDetails).forEach((error, index) => {
+            if (!this.root.errors.some((err) => err.message === error) &&
+                !this.root.customErrors.some((err) => err.message === error)) {
+                this.root.customErrors = [
+                    ...this.root.customErrors,
+                    { component: this.component, message: error, formattedKeyOrPath: this.component.key },
+                ];
+            }
+        });
+    }
+    handleValidation(value) {
+        var _a;
+        const validate = this.component.validate;
+        const amountOfDocuments = (_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 0;
+        if (amountOfDocuments &&
+            (((validate === null || validate === void 0 ? void 0 : validate.minDocuments) && amountOfDocuments < validate.minDocuments) ||
+                ((validate === null || validate === void 0 ? void 0 : validate.maxDocuments) && amountOfDocuments > validate.maxDocuments))) {
+            let error;
+            if (validate === null || validate === void 0 ? void 0 : validate.customMessage) {
+                error = validate.customMessage;
+            }
+            else if (validate.minDocuments && validate.maxDocuments) {
+                error = `Please select between ${validate.minDocuments} and ${validate.maxDocuments} documents`;
+            }
+            else if (validate.minDocuments && amountOfDocuments < validate.minDocuments) {
+                error = `Please select at least ${validate.minDocuments} documents`;
+            }
+            else if (validate.maxDocuments && amountOfDocuments > validate.maxDocuments) {
+                error = `Please select no more than ${validate.maxDocuments} documents`;
+            }
+            this.errorDetails['documentError'] = error;
+        }
+        else {
+            delete this.errorDetails['documentError'];
+        }
+        // check for out-of-the-box form.io errors which store on this.root.errors
+        this.checkValidity(this.dataValue, true, this.data);
+        this.manageFormErrors();
+    }
+    beforeSubmit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.handleValidation(this.dataValue);
+            this.element && this.attach(this.element);
+        });
+    }
+    attachReact(element) {
+        let root = ReactDOM.findDOMNode(element);
+        if (!root) {
+            root = element;
+        }
+        if (!this.componentRoot) {
+            this.componentRoot = createRoot(root);
+        }
+        // Form.io uses id for an enclosing div, so we need to give the input field a different id
+        const inputId = `${this.component.id}-input`;
+        return ReactDOM.render(React.createElement("div", null,
+            React.createElement(FormComponentWrapper, Object.assign({}, this.component, { inputId: inputId, viewOnly: !this.component.canUpdateProperty, errorMessage: this.errorMessages() }),
+                React.createElement(Document, Object.assign({}, this.component, { id: inputId, handleChange: this.handleChange, error: this.hasErrors(), value: this.dataValue })))), root);
+    }
+}

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentList.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ApiServices, ObjectInstance, Property } from '@evoke-platform/context';
+import { SavedDocumentReference } from '../../types';
+declare type DocumentListProps = {
+    handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | null) => void;
+    property: Property;
+    instance: ObjectInstance;
+    canUpdateProperty: boolean;
+    value: (File | SavedDocumentReference)[] | undefined;
+    apiServices: ApiServices;
+    objectId?: string;
+    setSnackbarError: (type: 'error' | 'success', message: string) => void;
+};
+export declare const DocumentList: (props: DocumentListProps) => JSX.Element;
+export {};

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentList.js

@@ -0,0 +1,172 @@
+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 { isEqual } from 'lodash';
+import prettyBytes from 'pretty-bytes';
+import React, { useEffect, useState } from 'react';
+import { FileWithExtension, LaunchRounded, TrashCan, WarningRounded } from '../../../../../icons';
+import { Chip, IconButton, Typography } from '../../../../core';
+import { Box, Grid } from '../../../../layout';
+import { getPrefixedUrl } from '../../utils';
+const styles = {
+    icon: {
+        padding: '3px',
+        color: '#637381',
+    },
+};
+const viewableFileTypes = [
+    'application/pdf',
+    'image/jpeg',
+    'image/jpg',
+    'image/png',
+    'image/gif',
+    'image/bmp',
+    'image/webp',
+    'text/plain',
+];
+export const DocumentList = (props) => {
+    const { handleChange, property, instance, canUpdateProperty, objectId, value: documents, apiServices, setSnackbarError, } = props;
+    const [savedDocuments, setSavedDocuments] = useState();
+    const [hasViewPermission, setHasViewPermission] = useState(true);
+    useEffect(() => {
+        const currentValue = instance === null || instance === void 0 ? void 0 : instance[property.id];
+        if (currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) {
+            const currentDocumentIds = currentValue.map((doc) => doc.id);
+            if (currentDocumentIds.length &&
+                !isEqual(currentDocumentIds, savedDocuments === null || savedDocuments === void 0 ? void 0 : savedDocuments.map((doc) => doc.id))) {
+                getDocuments(currentDocumentIds);
+            }
+        }
+    }, [property]);
+    const getDocuments = (currentDocumentIds, shouldRetry = true) => {
+        apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents`), {
+            params: { filter: { where: { id: { inq: currentDocumentIds } } } },
+        }, (error, docs) => {
+            // There is a short delay between when a document is uploaded and when
+            // it is indexed. Therefore, try again if documents are not found.
+            if (shouldRetry &&
+                (!docs || currentDocumentIds.some((docId) => !docs.find((doc) => docId === doc.id)))) {
+                setTimeout(() => getDocuments(currentDocumentIds, false), 2000);
+            }
+            else if (error) {
+                setSnackbarError('error', 'Error occurred while retrieving saved documents');
+            }
+            else {
+                setSavedDocuments(docs);
+            }
+        });
+    };
+    useEffect(() => {
+        checkPermissions();
+    }, []);
+    const checkPermissions = () => {
+        var _a;
+        if ((_a = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _a === void 0 ? void 0 : _a.length) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=view`))
+                .then((accessCheck) => setHasViewPermission(accessCheck.result));
+        }
+    };
+    const isFile = (doc) => doc instanceof File;
+    const fileExists = (doc) => savedDocuments === null || savedDocuments === void 0 ? void 0 : savedDocuments.find((d) => d.id === doc.id);
+    const handleRemove = (index) => {
+        var _a;
+        const updatedDocuments = (_a = documents === null || documents === void 0 ? void 0 : documents.filter((_, i) => i !== index)) !== null && _a !== void 0 ? _a : [];
+        handleChange(property.id, updatedDocuments);
+    };
+    const openDocument = (index) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        const doc = documents === null || documents === void 0 ? void 0 : documents[index];
+        if (doc) {
+            let url;
+            const contentType = doc instanceof File
+                ? doc.type
+                : (_a = savedDocuments === null || savedDocuments === void 0 ? void 0 : savedDocuments.find((savedDocument) => savedDocument.id === doc.id)) === null || _a === void 0 ? void 0 : _a.contentType;
+            if (!isFile(doc)) {
+                try {
+                    const documentResponse = yield apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/${doc.id}/content`), { responseType: 'blob' });
+                    const blob = new Blob([documentResponse], { type: contentType });
+                    url = window.URL.createObjectURL(blob);
+                }
+                catch (error) {
+                    setSnackbarError('error', `Could not open ${doc.name}`);
+                    return;
+                }
+            }
+            else {
+                url = URL.createObjectURL(doc);
+            }
+            if (contentType && viewableFileTypes.includes(contentType)) {
+                window.open(url, '_blank');
+            }
+            else {
+                const link = document.createElement('a');
+                link.href = url;
+                link.setAttribute('download', doc.name);
+                document.body.appendChild(link);
+                link.click();
+                // Clean up and remove the link
+                (_b = link.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(link);
+            }
+        }
+    });
+    const getDocumentSize = (doc) => {
+        let size;
+        if (isFile(doc)) {
+            size = prettyBytes(doc.size);
+        }
+        else {
+            const savedDoc = savedDocuments === null || savedDocuments === void 0 ? void 0 : savedDocuments.find((savedDocument) => savedDocument.id === doc.id);
+            size = savedDoc ? prettyBytes(savedDoc.size) : '';
+        }
+        return size;
+    };
+    return (React.createElement(React.Fragment, null,
+        !documents && !canUpdateProperty && (React.createElement(Typography, { variant: "body2", sx: { color: '#637381' } }, "No documents")),
+        !!(documents === null || documents === void 0 ? void 0 : documents.length) && (React.createElement(Box, null, documents.map((doc, index) => {
+            var _a, _b, _c;
+            return (React.createElement(Grid, { container: true, sx: {
+                    width: '100%',
+                    border: '1px solid #C4CDD5',
+                    borderRadius: '6px',
+                    margin: '5px 2px',
+                    padding: ' 8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                } },
+                React.createElement(Grid, { item: true, sx: { display: 'flex', justifyContent: 'center', padding: '7px', marginLeft: '4px' } },
+                    React.createElement(FileWithExtension, { fontFamily: "Arial", fileExtension: (_c = (_b = (_a = doc.name) === null || _a === void 0 ? void 0 : _a.split('.')) === null || _b === void 0 ? void 0 : _b.pop()) !== null && _c !== void 0 ? _c : '', sx: { height: '1.5em', width: '1.5em' } })),
+                React.createElement(Grid, { item: true, sx: { flex: 1, justifyContent: 'center', paddingBottom: '5px' } },
+                    React.createElement(Grid, { item: true, xs: 12 },
+                        React.createElement(Typography, { sx: {
+                                fontSize: '14px',
+                                fontWeight: 700,
+                                color: '#212B36',
+                                lineHeight: '15px',
+                                paddingTop: '8px',
+                            } }, doc.name)),
+                    React.createElement(Grid, { item: true, xs: 12 },
+                        React.createElement(Typography, { sx: { fontSize: '12px', color: '#637381' } }, getDocumentSize(doc)))),
+                (isFile(doc) || (hasViewPermission && !isFile(doc) && fileExists(doc))) && (React.createElement(Grid, { item: true },
+                    React.createElement(IconButton, { "aria-label": "open document", sx: Object.assign(Object.assign({}, styles.icon), { marginRight: '16px' }), onClick: () => openDocument(index) },
+                        React.createElement(LaunchRounded, { sx: { color: '#637381', fontSize: '22px' } })))),
+                !isFile(doc) && savedDocuments && !fileExists(doc) && (React.createElement(Chip, { label: "Deleted", sx: {
+                        marginRight: '16px',
+                        backgroundColor: 'rgba(222, 48, 36, 0.16)',
+                        color: '#A91813',
+                        borderRadius: '6px',
+                        height: '25px',
+                        fontWeight: 700,
+                        '& .MuiChip-icon': { color: '#A91813', width: '.8em', marginBottom: '2px' },
+                    }, icon: React.createElement(WarningRounded, null) })),
+                canUpdateProperty && (React.createElement(Grid, { item: true },
+                    React.createElement(IconButton, { "aria-label": "delete document", sx: styles.icon, onClick: () => handleRemove(index) },
+                        React.createElement(TrashCan, { sx: { color: '#637381' } }))))));
+        })))));
+};

package/dist/published/components/custom/Form/FormComponents/FormFieldComponent.d.ts

@@ -0,0 +1,41 @@
+import { Property } from '@evoke-platform/context';
+import { ReactComponent } from '@formio/react';
+import { BaseFormComponentProps } from '../types';
+declare type FormFieldComponentProps = Omit<BaseFormComponentProps, 'property'> & {
+    property: Omit<Property, 'type'> & {
+        type: Property['type'] | 'choices';
+    };
+    inputMask?: string;
+    inputMaskPlaceholderChar?: string;
+    addressPropertyId?: string;
+    isAddressLine1?: boolean;
+};
+export declare class FormFieldComponent extends ReactComponent {
+    [x: string]: any;
+    static schema: any;
+    component: FormFieldComponentProps;
+    errorDetails: any;
+    /**
+     * Called when the component has been instantiated. This is useful to define
+     * default instance variable values.
+     *
+     * @param component - The JSON representation of the component created.
+     * @param options - The global options for the renderer
+     * @param data - The contextual data object (model) used for this component.
+     */
+    constructor(component: FormFieldComponentProps, options: any, data: any);
+    init(): void;
+    clearErrors(): void;
+    handleValidation(value: string): void;
+    hasErrors(): boolean;
+    errorMessages(): string;
+    /**
+     * Synchronizes out-of-the-box formio errors with this field's errorDetails object
+     */
+    manageFormErrors(): void;
+    beforeSubmit(): void;
+    handleComponentChange: (components: any, value: any) => void;
+    handleChange: (key: string, value: any) => void;
+    attachReact(element: Element): void;
+}
+export {};