@headless-adminapp/fluent 0.0.17-alpha.18 → 0.0.17-alpha.20

package/DialogContainer/PromptDialog.d.ts

@@ -1,3 +1,4 @@
+import { FormValidationStringSet } from '@headless-adminapp/app/form';
 import { PromptDialogOptions } from '@headless-adminapp/core/experience/dialog';
 import { SchemaAttributes } from '@headless-adminapp/core/schema';
 import * as yup from 'yup';
@@ -14,12 +15,12 @@ interface PromptDialogProps<SA extends SchemaAttributes = SchemaAttributes> {
     onDismiss?: PromptDialogOptions<SA>['onDismiss'];
 }
 export declare function PromptDialog(props: PromptDialogProps): import("react/jsx-runtime").JSX.Element;
-export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A) => (values: Record<string, any>, context: any, options: any) => Promise<import("react-hook-form").ResolverResult<{
+export declare const formValidator: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A, language: string, strings: FormValidationStringSet) => (values: Record<string, any>, context: any, options: any) => Promise<import("react-hook-form").ResolverResult<{
     [x: string]: any;
     [x: number]: any;
     [x: symbol]: any;
 }>>) & import("lodash").MemoizedFunction;
-export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A) => yup.ObjectSchema<{
+export declare const generateValidationSchema: (<A extends SchemaAttributes = SchemaAttributes>(attributes: A, language: string, strings: FormValidationStringSet) => yup.ObjectSchema<{
     [x: string]: any;
 }, yup.AnyObject, {
     [x: string]: any;

package/DialogContainer/PromptDialog.js

@@ -37,6 +37,8 @@ exports.PromptDialog = PromptDialog;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const utils_1 = require("@headless-adminapp/app/dataform/utils");
+const form_1 = require("@headless-adminapp/app/form");
+const locale_1 = require("@headless-adminapp/app/locale");
 const yup_1 = require("@hookform/resolvers/yup");
 const lodash_1 = require("lodash");
 const react_hook_form_1 = require("react-hook-form");
@@ -45,11 +47,13 @@ const SectionControl_1 = require("../DataForm/SectionControl");
 const StandardControl_1 = require("../PageEntityForm/StandardControl");
 function PromptDialog(props) {
     var _a, _b;
+    const { language } = (0, locale_1.useLocale)();
+    const formValidationStrings = (0, form_1.useFormValidationStrings)();
     const form = (0, react_hook_form_1.useForm)({
         mode: 'all',
         defaultValues: props.defaultValues,
         shouldUnregister: false,
-        resolver: (0, exports.formValidator)(props.attributes),
+        resolver: (0, exports.formValidator)(props.attributes, language, formValidationStrings),
     });
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
             var _a;
@@ -80,19 +84,19 @@ function PromptDialog(props) {
                                     }))();
                                 }), children: (_b = props.confirmText) !== null && _b !== void 0 ? _b : 'Confirm' })] })] }) }) }));
 }
-exports.formValidator = (0, lodash_1.memoize)(function formValidator(attributes) {
+exports.formValidator = (0, lodash_1.memoize)(function formValidator(attributes, language, strings) {
     return (values, context, options) => __awaiter(this, void 0, void 0, function* () {
-        const validator = (0, exports.generateValidationSchema)(attributes);
+        const validator = (0, exports.generateValidationSchema)(attributes, language, strings);
         const resolver = (0, yup_1.yupResolver)(validator);
         const result = yield resolver(values, context, options);
         return result;
     });
 }, (attributes) => JSON.stringify({ attributes }));
-exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema(attributes) {
+exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema(attributes, language, strings) {
     const columns = Object.keys(attributes);
     return yup.object().shape(Object.assign({}, columns.reduce((acc, column) => {
         const attribute = attributes[column];
-        const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, 'en', {});
+        const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, language, strings);
         return Object.assign(Object.assign({}, acc), { [column]: validationSchema });
     }, {})));
 }, (attributes) => JSON.stringify({ attributes }));

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 AttachmentsControl_1 = require("../form/controls/AttachmentsControl");
 const CurrencyControl_1 = require("../form/controls/CurrencyControl");
 const DateControl_1 = require("../form/controls/DateControl");
 const DateRangeControl_1 = require("../form/controls/DateRangeControl");
@@ -24,7 +25,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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const { attribute, label: _label, isError, 
     // errorMessage,
     name, value, onBlur, onChange, 
@@ -142,6 +143,10 @@ const StandardControl = (props) => {
             const Control = (_r = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _r !== void 0 ? _r : 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 'attachments': {
+            const Control = (_s = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _s !== void 0 ? _s : 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': {
         //   return (
         //     <FormControl

package/form/controls/AttachmentsControl.d.ts

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,75 @@
+"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.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 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: {
+                                flexWrap: 'wrap',
+                                columnGap: react_components_1.tokens.spacingHorizontalXS,
+                                gap: react_components_1.tokens.spacingHorizontalXS,
+                            }, children: [value === null || value === void 0 ? void 0 : value.map((file, index) => ((0, jsx_runtime_1.jsx)(react_components_1.Tag, { as: "span", appearance: "brand", size: "small", shape: "rounded", 
+                                    // value={option}
+                                    dismissible: true, dismissIcon: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', cursor: 'pointer' }, onClick: () => {
+                                            if (readOnly)
+                                                return;
+                                            onChange === null || onChange === void 0 ? void 0 : onChange(value === null || value === void 0 ? void 0 : value.filter((_, i) => i !== index));
+                                        }, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Close, { size: 16 }) }), children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { href: file.url, target: "_blank", onClick: (event) => {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            window.open(file.url, '_blank');
+                                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Caption1, { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: file.name }) }) }, index))), (0, jsx_runtime_1.jsx)(react_components_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.Add, { size: 16 }), appearance: "outline", onClick: () => {
+                                        var _a;
+                                        if (readOnly)
+                                            return;
+                                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                                    }, 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)));
+                        onChange === null || onChange === void 0 ? void 0 : onChange([...(value !== null && value !== void 0 ? value : []), ...fileObjects]);
+                    }
+                }) })] }));
+};
+exports.AttachmentsControl = AttachmentsControl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.18",
+  "version": "0.0.17-alpha.20",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -44,5 +44,5 @@
     "react-hook-form": "7.52.2",
     "yup": "^1.4.0"
   },
-  "gitHead": "d49e654cade6f418c799a34fa0dcadb05b663d88"
+  "gitHead": "bcc1bcddef884731f72e5e4fedb0d78ad64afbd0"
 }