@headless-adminapp/fluent 0.0.17-alpha.27 → 0.0.17-alpha.29

package/PageEntityForm/RelatedViewSelector.js

@@ -70,6 +70,7 @@ function RelatedViewSelector(props) {
                         outlineStyle: 'none',
                         textTransform: 'none',
                         columnGap: react_components_1.tokens.spacingHorizontalSNudge,
+                        color: react_components_1.tokens.colorNeutralForeground2,
                     }, children: [strings.related, (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, { size: 16 })] }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: data.map((item) => {
                         var _a, _b;
                         return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => props.onSelect(item), children: (_b = (_a = item.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.pluralLabel }, item.key));

package/PageEntityForm/SectionContainer.js

@@ -41,7 +41,12 @@ function SectionContainer({ section }) {
                                     ? (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message
                                     : '';
                                 const label = (_g = (_f = (_d = (_c = control.localizedLabels) === null || _c === void 0 ? void 0 : _c[language]) !== null && _d !== void 0 ? _d : (_e = attribute.localizedLabels) === null || _e === void 0 ? void 0 : _e[language]) !== null && _f !== void 0 ? _f : control.label) !== null && _g !== void 0 ? _g : attribute.label;
-                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, disabled: readonly, label: label, placeholder: label, allowNavigation: true, allowNewRecord: true }) }));
+                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, disabled: readonly, label: label, placeholder: label, allowNavigation: true, allowNewRecord: true, fileServiceContext: {
+                                            type: 'entity-form',
+                                            recordId,
+                                            attributeName: control.attributeName,
+                                            logicalName: schema.logicalName,
+                                        } }) }));
                             } }, control.attributeName) }, control.attributeName));
                 }
                 case 'editablegrid': {

package/PageEntityForm/StandardControl.d.ts

@@ -10,6 +10,7 @@ export interface StandardControlProps {
     placeholder?: string;
     onChange: (value: any) => void;
     onBlur: () => void;
+    fileServiceContext?: Record<string, unknown>;
     disabled?: boolean;
     borderOnFocusOnly?: boolean;
     hideLabel?: boolean;

package/PageEntityForm/StandardControl.js

@@ -9,6 +9,7 @@ const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
 const transport_1 = require("@headless-adminapp/app/transport");
 const react_1 = require("react");
 const componentStore_1 = require("../componentStore");
+const AttachmentControl_1 = require("../form/controls/AttachmentControl");
 const AttachmentsControl_1 = require("../form/controls/AttachmentsControl");
 const CurrencyControl_1 = require("../form/controls/CurrencyControl");
 const DateControl_1 = require("../form/controls/DateControl");
@@ -26,7 +27,7 @@ const TelephoneControl_1 = require("../form/controls/TelephoneControl");
 const TextAreaControl_1 = require("../form/controls/TextAreaControl");
 const TextControl_1 = require("../form/controls/TextControl");
 const StandardControl = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     const { attribute, label: _label, isError, 
     // errorMessage,
     name, value, onBlur, onChange, 
@@ -44,6 +45,7 @@ const StandardControl = (props) => {
         : (_a = _placeholder !== null && _placeholder !== void 0 ? _placeholder : _label) !== null && _a !== void 0 ? _a : attribute.label;
     // const required = quickViewControl ? false : attribute.required;
     const dataService = (0, transport_1.useDataService)();
+    const fileService = (0, transport_1.useFileService)();
     const { schemaStore, experienceStore } = (0, hooks_1.useMetadata)();
     // const { openQuickCreate } = useQuickCreateForm();
     switch (attribute.type) {
@@ -148,8 +150,12 @@ const StandardControl = (props) => {
             const Control = (_s = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _s !== void 0 ? _s : MultiSelectControl_1.default;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
+        case 'attachment': {
+            const Control = (_t = componentStore_1.componentStore.getComponent('Form.AttachmentControl')) !== null && _t !== void 0 ? _t : AttachmentControl_1.AttachmentControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { fileService: fileService, format: attribute.format, location: attribute.location, name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, fileServiceContext: props.fileServiceContext }));
+        }
         case 'attachments': {
-            const Control = (_t = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _t !== void 0 ? _t : AttachmentsControl_1.AttachmentsControl;
+            const Control = (_u = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _u !== void 0 ? _u : AttachmentsControl_1.AttachmentsControl;
             return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         // case 'attachment': {

package/form/controls/AttachmentControl.d.ts

@@ -0,0 +1,17 @@
+import { AttachmentAttribute, FileObject } from '@headless-adminapp/core/attributes/AttachmentAttribute';
+import { IFileService } from '@headless-adminapp/core/transport';
+import { FC } from 'react';
+import { ControlProps } from './types';
+export interface AttachmentImageControlProps extends ControlProps<FileObject> {
+    fileService: IFileService;
+    fileServiceContext?: Record<string, unknown>;
+    location: AttachmentAttribute['location'];
+}
+interface AttachmentControlProps extends ControlProps<FileObject> {
+    fileService: IFileService;
+    fileServiceContext?: Record<string, unknown>;
+    location: AttachmentAttribute['location'];
+    format: AttachmentAttribute['format'];
+}
+export declare const AttachmentControl: FC<AttachmentControlProps>;
+export {};

package/form/controls/AttachmentControl.js

@@ -0,0 +1,225 @@
+"use strict";
+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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttachmentControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/dialog/hooks");
+const utils_1 = require("@headless-adminapp/core/utils");
+const icons_1 = require("@headless-adminapp/icons");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+function useAttachmentSelector({ fileService, fileServiceContext, location, onChange, }) {
+    const openErrorDialog = (0, hooks_1.useOpenErrorDialog)();
+    const { isPending, mutate: handleFile } = (0, react_query_1.useMutation)({
+        mutationFn: (file) => __awaiter(this, void 0, void 0, function* () {
+            if (location === 'local') {
+                return (0, utils_1.fileToObject)(file);
+            }
+            else {
+                const url = yield fileService.uploadFile(file, {
+                    context: fileServiceContext,
+                });
+                return (0, utils_1.urlToFileObject)(url);
+            }
+        }),
+        onSuccess: (fileObject) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(fileObject);
+        },
+        onError: (error) => {
+            console.error(error);
+            openErrorDialog({
+                title: 'Failed to upload file',
+                text: error.message,
+            });
+        },
+    });
+    const selectFile = (accept) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        if (accept) {
+            input.accept = accept;
+        }
+        input.onchange = (event) => __awaiter(this, void 0, void 0, function* () {
+            const files = event.target.files;
+            if (!(files === null || files === void 0 ? void 0 : files.length)) {
+                return;
+            }
+            const file = files[0];
+            handleFile(file);
+        });
+        input.click();
+    };
+    return {
+        isProcessing: isPending,
+        selectFile,
+    };
+}
+const AttachmentImageControl = ({ value, disabled, readOnly, onChange, fileService, fileServiceContext, location, }) => {
+    const { isProcessing, selectFile } = useAttachmentSelector({
+        fileService,
+        fileServiceContext,
+        location,
+        onChange,
+    });
+    if (!value) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    width: 100,
+                    height: 100,
+                    backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                    borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    color: react_components_1.tokens.colorNeutralForeground4,
+                    cursor: 'pointer',
+                    pointerEvents: disabled || readOnly || isProcessing ? 'none' : 'auto',
+                }, onClick: () => selectFile('image/*'), children: isProcessing ? (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "small" }) : (0, jsx_runtime_1.jsx)(icons_1.Icons.Image, {}) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', display: 'flex' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                maxWidth: '100%',
+                height: 100,
+                position: 'relative',
+            }, children: [(0, jsx_runtime_1.jsx)("img", { src: value.url, style: {
+                        maxHeight: '100%',
+                        maxWidth: '100%',
+                        objectFit: 'contain',
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    } }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: 0, right: 0 }, children: (0, jsx_runtime_1.jsx)(ActionMenu, { format: 'image', value: value, disabled: disabled, readOnly: readOnly, onChange: onChange, onChangeClick: () => selectFile('image/*') }) }), isProcessing && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                inset: 0,
+                                backgroundColor: react_components_1.tokens.colorNeutralBackground1,
+                                opacity: 0.7,
+                            } }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                position: 'absolute',
+                                inset: 0,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "small" }) })] }))] }) }));
+};
+const AttachmentControl = ({ value, disabled, readOnly, id, name, onBlur, onChange, placeholder, fileService, fileServiceContext, location, format, }) => {
+    const { isProcessing, selectFile } = useAttachmentSelector({
+        fileService,
+        fileServiceContext,
+        location,
+        onChange,
+    });
+    const accept = (0, react_1.useMemo)(() => {
+        switch (format) {
+            case 'image':
+                return 'image/*';
+            case 'video':
+                return 'video/*';
+            case 'audio':
+                return 'audio/*';
+            case 'document':
+                return '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv';
+            default:
+                return '';
+        }
+    }, [format]);
+    const FormatIcon = (0, react_1.useMemo)(() => {
+        switch (format) {
+            case 'video':
+                return icons_1.Icons.Video;
+            case 'audio':
+                return icons_1.Icons.Audio;
+            default:
+                return icons_1.Icons.Document;
+        }
+    }, [format]);
+    if (format === 'image') {
+        return ((0, jsx_runtime_1.jsx)(AttachmentImageControl, { value: value, disabled: disabled, readOnly: readOnly, id: id, name: name, onBlur: onBlur, onChange: onChange, placeholder: placeholder, fileService: fileService, fileServiceContext: fileServiceContext, location: location }));
+    }
+    if (!value) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    width: '100%',
+                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                        width: '100%',
+                        height: 30,
+                        borderRadius: react_components_1.tokens.borderRadiusMedium,
+                        backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                        display: 'flex',
+                        paddingLeft: react_components_1.tokens.spacingHorizontalS,
+                        gap: react_components_1.tokens.spacingHorizontalS,
+                        alignItems: 'center',
+                        overflow: 'hidden',
+                        color: react_components_1.tokens.colorNeutralForeground4,
+                        cursor: 'pointer',
+                        pointerEvents: disabled || readOnly || isProcessing ? 'none' : 'auto',
+                    }, onClick: () => selectFile(accept), children: [(0, jsx_runtime_1.jsx)(FormatIcon, { size: 16 }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                flex: 1,
+                            }, children: placeholder || 'Select a file' }), isProcessing && ((0, jsx_runtime_1.jsx)("div", { style: { paddingRight: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" }) }))] }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                width: '100%',
+            }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                    width: '100%',
+                    height: 30,
+                    borderRadius: react_components_1.tokens.borderRadiusMedium,
+                    backgroundColor: react_components_1.tokens.colorNeutralBackground2,
+                    display: 'flex',
+                    paddingLeft: react_components_1.tokens.spacingHorizontalS,
+                    gap: react_components_1.tokens.spacingHorizontalS,
+                    alignItems: 'center',
+                    overflow: 'hidden',
+                }, children: [(0, jsx_runtime_1.jsx)(FormatIcon, { size: 16 }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            flex: 1,
+                        }, children: value.name || value.url }), isProcessing && ((0, jsx_runtime_1.jsx)("div", { style: { paddingRight: react_components_1.tokens.spacingHorizontalS }, children: (0, jsx_runtime_1.jsx)(react_components_1.Spinner, { size: "extra-tiny" }) })), !isProcessing && ((0, jsx_runtime_1.jsx)(ActionMenu, { format: format, value: value, disabled: disabled, readOnly: readOnly, onChange: onChange, onChangeClick: () => selectFile(accept) }))] }) }) }));
+};
+exports.AttachmentControl = AttachmentControl;
+const ActionMenu = ({ format, value, disabled, readOnly, onChange, onChangeClick, }) => {
+    const openConfirmDialog = (0, hooks_1.useOpenConfirmDialog)();
+    const FileOpenIcon = (0, react_1.useMemo)(() => {
+        switch (format) {
+            case 'video':
+            case 'audio':
+                return icons_1.Icons.Play;
+            default:
+                return icons_1.Icons.OpenInNew;
+        }
+    }, [format]);
+    const OpenText = (0, react_1.useMemo)(() => {
+        switch (format) {
+            case 'video':
+                return 'Play';
+            case 'audio':
+                return 'Play';
+            default:
+                return 'Open';
+        }
+    }, [format]);
+    return ((0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "before-top", hasIcons: true, children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}) }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsxs)(react_components_1.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(FileOpenIcon, {}), onClick: () => {
+                                window.open(value.url, '_blank');
+                            }, children: OpenText }), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Copy, {}), onClick: () => {
+                                navigator.clipboard.writeText(value.url).catch(() => { });
+                            }, children: "Copy Url" }), !(disabled || readOnly) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Edit, {}), onClick: () => {
+                                        onChangeClick === null || onChangeClick === void 0 ? void 0 : onChangeClick();
+                                    }, children: "Change" }), (0, jsx_runtime_1.jsx)(react_components_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Delete, {}), onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                                        const result = yield openConfirmDialog({
+                                            title: 'Remove file',
+                                            text: 'Are you sure you want to remove this file?',
+                                            confirmButtonLabel: 'Remove',
+                                            cancelButtonLabel: 'Cancel',
+                                        });
+                                        if (!(result === null || result === void 0 ? void 0 : result.confirmed)) {
+                                            return;
+                                        }
+                                        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+                                    }), children: "Remove" })] }))] }) })] }));
+};

package/form/controls/AttachmentsControl.d.ts

@@ -1,8 +1,6 @@
 import { FileObject } from '@headless-adminapp/core/attributes/AttachmentAttribute';
 import { FC } from 'react';
 import { ControlProps } from './types';
-export declare function fileToObject(file: File): Promise<FileObject>;
-export declare function dataUrlToFile(dataUrl: string, name: string): File;
 export interface AttachmentsControlProps extends ControlProps<FileObject[]> {
 }
 export declare const AttachmentsControl: FC<AttachmentsControlProps>;

package/form/controls/AttachmentsControl.js

@@ -10,39 +10,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AttachmentsControl = void 0;
-exports.fileToObject = fileToObject;
-exports.dataUrlToFile = dataUrlToFile;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
+const utils_1 = require("@headless-adminapp/core/utils");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
-function fileToObject(file) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-            resolve({
-                name: file.name,
-                type: file.type,
-                size: file.size,
-                url: reader.result,
-            });
-        };
-        reader.onerror = (error) => {
-            reject(error);
-        };
-        reader.readAsDataURL(file);
-    });
-}
-function dataUrlToFile(dataUrl, name) {
-    const byteString = atob(dataUrl.split(',')[1]);
-    const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
-    const ab = new ArrayBuffer(byteString.length);
-    const ia = new Uint8Array(ab);
-    for (let i = 0; i < byteString.length; i++) {
-        ia[i] = byteString.charCodeAt(i);
-    }
-    return new File([ab], name, { type: mimeString });
-}
 const AttachmentsControl = ({ onChange, id, onBlur, onFocus, disabled, readOnly, value, }) => {
     const inputRef = (0, react_1.useRef)(null);
     return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TagPicker, { appearance: "filled-darker", disabled: disabled, open: false, children: [(0, jsx_runtime_1.jsx)(react_components_1.TagPickerControl, { onFocus: onFocus, onBlur: onBlur, id: id, style: { paddingBlock: react_components_1.tokens.spacingVerticalXXS }, expandIcon: null, children: (0, jsx_runtime_1.jsxs)(react_components_1.TagGroup, { style: {
@@ -65,7 +37,7 @@ const AttachmentsControl = ({ onChange, id, onBlur, onFocus, disabled, readOnly,
                                     }, children: "Add" }))] }) }), (0, jsx_runtime_1.jsx)(react_components_1.TagPickerList, {})] }), (0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "file", multiple: true, style: { display: 'none' }, onChange: (event) => __awaiter(void 0, void 0, void 0, function* () {
                     const files = event.target.files;
                     if (files === null || files === void 0 ? void 0 : files.length) {
-                        const fileObjects = yield Promise.all(Array.from(files).map((file) => fileToObject(file)));
+                        const fileObjects = yield Promise.all(Array.from(files).map((file) => (0, utils_1.fileToObject)(file)));
                         onChange === null || onChange === void 0 ? void 0 : onChange([...(value !== null && value !== void 0 ? value : []), ...fileObjects]);
                     }
                 }) })] }));

package/form/controls/utils.d.ts

@@ -0,0 +1,4 @@
+import { FileObject } from '@headless-adminapp/core/attributes/AttachmentAttribute';
+export declare function fileToObject(file: File): Promise<FileObject>;
+export declare function dataUrlToFile(dataUrl: string, name: string): File;
+export declare function urlToFileObject(url: string, name?: string): FileObject;

package/form/controls/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileToObject = fileToObject;
+exports.dataUrlToFile = dataUrlToFile;
+exports.urlToFileObject = urlToFileObject;
+// TODO: Move to core
+function fileToObject(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            resolve({
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                url: reader.result,
+            });
+        };
+        reader.onerror = (error) => {
+            reject(error);
+        };
+        reader.readAsDataURL(file);
+    });
+}
+function dataUrlToFile(dataUrl, name) {
+    const byteString = atob(dataUrl.split(',')[1]);
+    const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+    }
+    return new File([ab], name, { type: mimeString });
+}
+function urlToFileObject(url, name) {
+    const fileName = name || url.split('/').pop() || 'file';
+    return {
+        name: fileName,
+        size: 0,
+        type: '',
+        url,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.27",
+  "version": "0.0.17-alpha.29",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -47,5 +47,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "249b7141dedc93a334d3d918d134bd167cecd6ae"
+  "gitHead": "85977e78c12fe81f708b974c32c8089e9184f553"
 }

package/types/index.d.ts

@@ -32,6 +32,13 @@ declare module '@headless-adminapp/icons/types' {
         ExportCsv: Icon;
         ExportExcel: Icon;
         Entity: Icon;
+        OpenInNew: Icon;
+        Play: Icon;
+        Audio: Icon;
+        Video: Icon;
+        Copy: Icon;
+        Document: Icon;
+        Image: Icon;
     }
 }
 export {};