@headless-adminapp/fluent 0.0.17-alpha.35 → 0.0.17-alpha.38

package/DataGrid/TableCell/TableCellLink.d.ts

@@ -4,5 +4,6 @@ export interface TableCellLinkProps {
     href?: string;
     onClick?: () => void;
     width: number;
+    target?: string;
 }
 export declare const TableCellLink: FC<TableCellLinkProps>;

package/DataGrid/TableCell/TableCellLink.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/route/hooks");
 const react_1 = require("react");
-exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width }) => {
+exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width, target }) => {
     const router = (0, hooks_1.useRouter)();
     return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
             textOverflow: 'ellipsis',
@@ -16,7 +16,10 @@ exports.TableCellLink = (0, react_1.memo)(({ value, href, onClick, width }) => {
             maxWidth: width,
             display: 'flex',
             alignItems: 'center',
-        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { as: "a", href: href, onClick: (event) => {
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { as: "a", href: href, target: target, onClick: (event) => {
+                if (target === '_blank') {
+                    return;
+                }
                 if (event.metaKey || event.ctrlKey) {
                     return;
                 }

package/DataGrid/useTableColumns.js

@@ -16,6 +16,7 @@ const utils_1 = require("@headless-adminapp/app/utils");
 const app_1 = require("@headless-adminapp/core/experience/app");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
+const componentStore_1 = require("../componentStore");
 const GridColumnHeader_1 = require("../DataGrid/GridColumnHeader");
 const TableCell_1 = require("../DataGrid/TableCell");
 const TableCellLink_1 = require("../DataGrid/TableCell/TableCellLink");
@@ -207,6 +208,13 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                         dateFormat: dateFormats.short,
                         timezone,
                     })) !== null && _c !== void 0 ? _c : '';
+                    if (column.component) {
+                        const Component = componentStore_1.componentStore.getComponent(column.component);
+                        if (!Component) {
+                            throw new Error(`Component with name ${column.component} not found`);
+                        }
+                        return ((0, jsx_runtime_1.jsx)(Component, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue }));
+                    }
                     if (schema.primaryAttribute === column.name) {
                         const path = routeResolver({
                             logicalName: schema.logicalName,
@@ -233,6 +241,12 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                                     recordSetSetter('', []);
                                     router.push(path);
                                 } }, column.id));
+                        case 'attachment':
+                            const url = value === null || value === void 0 ? void 0 : value.url;
+                            if (!url) {
+                                return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: "", width: info.column.getSize() }, column.id));
+                            }
+                            return ((0, jsx_runtime_1.jsx)(TableCellLink_1.TableCellLink, { value: formattedValue, width: info.column.getSize(), href: url, target: "_blank" }, column.id));
                     }
                     return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
                 },
@@ -254,10 +268,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         recordSetSetter,
         routeResolver,
         router,
-        schema.attributes,
-        schema.idAttribute,
-        schema.logicalName,
-        schema.primaryAttribute,
+        schema,
         schemaStore,
         setSorting,
         timezone,

package/PageEntityForm/StandardControl.js

@@ -26,6 +26,7 @@ const SwitchControl_1 = require("../form/controls/SwitchControl");
 const TelephoneControl_1 = require("../form/controls/TelephoneControl");
 const TextAreaControl_1 = require("../form/controls/TextAreaControl");
 const TextControl_1 = require("../form/controls/TextControl");
+const UrlControl_1 = require("../form/controls/UrlControl");
 const StandardControl = (props) => {
     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, 
@@ -74,7 +75,7 @@ const StandardControl = (props) => {
                     return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
                 }
                 case 'url': {
-                    const Control = (_e = componentStore_1.componentStore.getComponent('Form.UrlControl')) !== null && _e !== void 0 ? _e : TextControl_1.TextControl;
+                    const Control = (_e = componentStore_1.componentStore.getComponent('Form.UrlControl')) !== null && _e !== void 0 ? _e : UrlControl_1.UrlControl;
                     return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
                 }
                 case 'textarea': {

package/form/controls/UrlControl.d.ts

@@ -0,0 +1,4 @@
+import { ControlProps } from './types';
+export interface UrlControlProps extends ControlProps<string> {
+}
+export declare function UrlControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, }: UrlControlProps): import("react/jsx-runtime").JSX.Element;

package/form/controls/UrlControl.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UrlControl = UrlControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const icons_1 = require("@headless-adminapp/icons");
+function UrlControl({ value, onChange, id, name, onBlur, onFocus, placeholder, disabled, }) {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.Input, { type: "url", placeholder: placeholder, id: id, appearance: "filled-darker", name: name, value: value || '', onChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value), onBlur: () => onBlur === null || onBlur === void 0 ? void 0 : onBlur(), onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(), 
+        // invalid={error}
+        disabled: disabled, autoComplete: "off", style: {
+            width: '100%',
+            paddingRight: react_components_1.tokens.spacingHorizontalXS,
+        }, 
+        // size="sm"
+        contentAfter: !!value ? ((0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", size: "small", onClick: () => window.open(value, '_blank'), icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.OpenInNew, {}) })) : undefined }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.35",
+  "version": "0.0.17-alpha.38",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -48,5 +48,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "2250994fad501c28490b8167c7fca8141323e2b3"
+  "gitHead": "cf5abc4c56618fcc873bd31e3a26a84a9509edfa"
 }