@headless-adminapp/fluent 0.0.17-alpha.40 → 0.0.17-alpha.41

package/DataGrid/TableCell/TableCellChoice.d.ts

@@ -0,0 +1,15 @@
+import { ChoiceAttribute } from '@headless-adminapp/core/attributes';
+import { ViewColumn } from '@headless-adminapp/core/experience/view';
+import { Schema } from '@headless-adminapp/core/schema';
+import { UniqueRecord } from '../types';
+interface TableCellChoiceProps {
+    column: ViewColumn;
+    schema: Schema;
+    record: UniqueRecord;
+    value: unknown;
+    attribute: ChoiceAttribute<string | number>;
+    formattedValue: string;
+    width: number;
+}
+export declare function TableCellChoice(props: TableCellChoiceProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/DataGrid/TableCell/TableCellChoice.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellChoice = TableCellChoice;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const react_1 = require("react");
+const TableCellBase_1 = require("./TableCellBase");
+function isColorDark(color) {
+    const rgb = parseInt(color, 16);
+    const r = (rgb >> 16) & 0xff;
+    const g = (rgb >> 8) & 0xff;
+    const b = (rgb >> 0) & 0xff;
+    const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    return luma < 128;
+}
+function TableCellChoice(props) {
+    const bgColor = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!props.value || !props.attribute.options) {
+            return;
+        }
+        return (_a = props.attribute.options.find((option) => option.value === props.value)) === null || _a === void 0 ? void 0 : _a.color;
+    }, [props.formattedValue]);
+    const color = (0, react_1.useMemo)(() => {
+        if (!bgColor) {
+            return;
+        }
+        return isColorDark(bgColor) ? '#FFFFFF' : '#000000';
+    }, [bgColor]);
+    return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            width: props.width,
+            minWidth: props.width,
+            maxWidth: props.width,
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Tag, { size: "small", style: { backgroundColor: bgColor, color }, children: props.formattedValue }) }));
+}

package/DataGrid/types.d.ts

@@ -0,0 +1,5 @@
+import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Data } from '@headless-adminapp/core/transport';
+export type UniqueRecord = Data<InferredSchemaType<SchemaAttributes>> & {
+    __uuid: string;
+};

package/DataGrid/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/DataGrid/useTableColumns.d.ts

@@ -1,8 +1,4 @@
-import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
-import { Data } from '@headless-adminapp/core/transport';
-export type UniqueRecord = Data<InferredSchemaType<SchemaAttributes>> & {
-    __uuid: string;
-};
+import { UniqueRecord } from './types';
 export declare function useTableColumns({ disableSelection, disableContextMenu, disableColumnResize, disableColumnFilter, disableColumnSort, tableWrapperRef, }: {
     disableSelection?: boolean;
     disableContextMenu?: boolean;

package/DataGrid/useTableColumns.js

@@ -21,6 +21,7 @@ const GridColumnHeader_1 = require("../DataGrid/GridColumnHeader");
 const TableCell_1 = require("../DataGrid/TableCell");
 const TableCellLink_1 = require("../DataGrid/TableCell/TableCellLink");
 const ActionCell_1 = require("./ActionCell");
+const TableCellChoice_1 = require("./TableCell/TableCellChoice");
 const columnHelper = (0, react_table_1.createColumnHelper)();
 const useStyles = (0, react_components_1.makeStyles)({
     selectionCell: {
@@ -74,7 +75,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
     const router = (0, hooks_5.useRouter)();
     const recordSetSetter = (0, hooks_4.useRecordSetSetter)();
     const openRecord = (0, useOpenRecord_1.useOpenRecord)();
-    const { currency, dateFormats, timezone } = (0, locale_1.useLocale)();
+    const { currency, dateFormats, timezone, timeFormats } = (0, locale_1.useLocale)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
     const headingSelectionState = (0, react_1.useMemo)(() => {
@@ -206,14 +207,18 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                     const formattedValue = (_c = (0, utils_1.getAttributeFormattedValue)(attribute, value, {
                         currency: currency.currency,
                         dateFormat: dateFormats.short,
+                        timeFormat: timeFormats.short,
                         timezone,
                     })) !== null && _c !== void 0 ? _c : '';
+                    if (column.plainText) {
+                        return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
+                    }
                     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 }));
+                        return ((0, jsx_runtime_1.jsx)(Component, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
                     }
                     if (schema.primaryAttribute === column.name) {
                         const path = routeResolver({
@@ -247,6 +252,8 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
                                 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));
+                        case 'choice':
+                            return ((0, jsx_runtime_1.jsx)(TableCellChoice_1.TableCellChoice, { column: column, schema: schema, record: info.row.original, value: value, attribute: attribute, formattedValue: formattedValue, width: info.column.getSize() }));
                     }
                     return ((0, jsx_runtime_1.jsx)(TableCell_1.TableCellText, { value: formattedValue, width: info.column.getSize() }, column.id));
                 },
@@ -260,6 +267,7 @@ function useTableColumns({ disableSelection, disableContextMenu, disableColumnRe
         columnWidths,
         currency.currency,
         dateFormats.short,
+        timeFormats.short,
         disableColumnFilter,
         disableColumnResize,
         disableColumnSort,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/fluent",
-  "version": "0.0.17-alpha.40",
+  "version": "0.0.17-alpha.41",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -48,5 +48,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "5141e4c378ed0b2aac011927e4d6c10c797624e0"
+  "gitHead": "2feaed5c73b0732b74518d37af5b5f26925e89d8"
 }