@firecms/core 3.0.1 → 3.1.0-canary.02232f4

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -11,6 +11,7 @@ import {
     User
 } from "../../types";
 import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from "../common/types";
+import { VirtualTableColumn } from "../VirtualTable";
 
 /**
  * @group Collection components
@@ -18,142 +19,158 @@ import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from ".
 export type EntityCollectionTableProps<M extends Record<string, any>,
     USER extends User = User> = {
 
-    className?: string;
-
-    style?: React.CSSProperties;
-
-    /**
-     * Display these entities as selected
-     */
-    selectionController: SelectionController<M>;
-
-    /**
-     * List of entities that will be displayed as selected;
-     */
-    highlightedEntities?: Entity<M>[];
+        className?: string;
+
+        style?: React.CSSProperties;
+
+        /**
+         * Display these entities as selected
+         */
+        selectionController: SelectionController<M>;
+
+        /**
+         * List of entities that will be displayed as selected;
+         */
+        highlightedEntities?: Entity<M>[];
+
+        /**
+         * Override the title in the toolbar
+         */
+        title?: React.ReactNode;
 
-    /**
-     * Override the title in the toolbar
-     */
-    title?: React.ReactNode;
-
-    /**
-     * Additional component that renders actions such as buttons in the
-     * collection toolbar, displayed on the left side
-     */
-    actionsStart?: React.ReactNode;
+        /**
+         * Additional component that renders actions such as buttons in the
+         * collection toolbar, displayed on the left side
+         */
+        actionsStart?: React.ReactNode;
 
-    /**
-     * Callback when a cell value changes.
-     */
-    onValueChange?: OnCellValueChange<any, M>;
+        /**
+         * Callback when a cell value changes.
+         */
+        onValueChange?: OnCellValueChange<any, M>;
 
-    uniqueFieldValidator?: UniqueFieldValidator;
+        uniqueFieldValidator?: UniqueFieldValidator;
 
-    /**
-     * Builder for creating the buttons in each row
-     * @param entity
-     * @param size
-     */
-    tableRowActionsBuilder?: (params: {
-        entity: Entity<M>,
-        size: CollectionSize,
-        width: number,
-        frozen?: boolean
-    }) => React.ReactNode;
+        /**
+         * Builder for creating the buttons in each row
+         * @param entity
+         * @param size
+         */
+        tableRowActionsBuilder?: (params: {
+            entity: Entity<M>,
+            size: CollectionSize,
+            width: number,
+            frozen?: boolean
+        }) => React.ReactNode;
 
-    /**
-     * Callback when anywhere on the table is clicked
-     */
-    onEntityClick?(entity: Entity<M>): void;
+        /**
+         * Callback when anywhere on the table is clicked
+         */
+        onEntityClick?(entity: Entity<M>): void;
 
-    /**
-     * Callback when a column is resized
-     */
-    onColumnResize?(params: OnColumnResizeParams): void;
+        /**
+         * Callback when a column is resized
+         */
+        onColumnResize?(params: OnColumnResizeParams): void;
 
-    /**
-     * Initial scroll position
-     */
-    initialScroll?: number;
+        /**
+         * Initial scroll position
+         */
+        initialScroll?: number;
 
-    /**
-     * Callback when the table is scrolled
-     * @param props
-     */
-    onScroll?: (props: {
-        scrollDirection: "forward" | "backward",
-        scrollOffset: number,
-        scrollUpdateWasRequested: boolean
-    }) => void;
+        /**
+         * Callback when the table is scrolled
+         * @param props
+         */
+        onScroll?: (props: {
+            scrollDirection: "forward" | "backward",
+            scrollOffset: number,
+            scrollUpdateWasRequested: boolean
+        }) => void;
 
-    /**
-     * Callback when the selected size of the table is changed
-     */
-    onSizeChanged?(size: CollectionSize): void;
+        /**
+         * Callback when the selected size of the table is changed
+         */
+        onSizeChanged?(size: CollectionSize): void;
 
-    /**
-     * Should apply a different style to a row when hovering
-     */
-    hoverRow?: boolean;
+        /**
+         * Should apply a different style to a row when hovering
+         */
+        hoverRow?: boolean;
 
-    /**
-     * Additional component that renders actions such as buttons in the
-     * collection toolbar, displayed on the right side
-     */
-    actions?: React.ReactNode;
+        /**
+         * Additional component that renders actions such as buttons in the
+         * collection toolbar, displayed on the right side
+         */
+        actions?: React.ReactNode;
 
-    /**
-     * Controller holding the logic for the table
-     * {@link useDataSourceTableController}
-     * {@link EntityTableController}
-     */
-    tableController: EntityTableController<M>;
+        /**
+         * View mode toggle button, positioned left of the search bar.
+         */
+        viewModeToggle?: React.ReactNode;
 
-    displayedColumnIds?: PropertyColumnConfig[];
+        /**
+         * Controller holding the logic for the table
+         * {@link useDataSourceTableController}
+         * {@link EntityTableController}
+         */
+        tableController: EntityTableController<M>;
 
-    forceFilter?: FilterValues<Extract<keyof M, string>>;
+        displayedColumnIds?: PropertyColumnConfig[];
 
-    textSearchEnabled?: boolean;
+        forceFilter?: FilterValues<Extract<keyof M, string>>;
 
-    inlineEditing?: boolean;
+        textSearchEnabled?: boolean;
 
-    additionalFields?: AdditionalFieldDelegate<M, USER>[];
+        inlineEditing?: boolean;
 
-    defaultSize?: CollectionSize;
+        additionalFields?: AdditionalFieldDelegate<M, USER>[];
 
-    properties: ResolvedProperties<M>;
+        defaultSize?: CollectionSize;
 
-    getPropertyFor?: (props: GetPropertyForProps<M>) => ResolvedProperties<M>[string];
+        properties: ResolvedProperties<M>;
 
-    filterable?: boolean;
+        getPropertyFor?: (props: GetPropertyForProps<M>) => ResolvedProperties<M>[string];
 
-    sortable?: boolean;
+        filterable?: boolean;
 
-    endAdornment?: React.ReactNode;
+        sortable?: boolean;
 
-    AdditionalHeaderWidget?: React.ComponentType<{
-        property: ResolvedProperty,
-        propertyKey: string,
-        onHover: boolean,
-    }>;
+        endAdornment?: React.ReactNode;
 
-    AddColumnComponent?: React.ComponentType;
+        AdditionalHeaderWidget?: React.ComponentType<{
+            property: ResolvedProperty,
+            propertyKey: string,
+            onHover: boolean,
+        }>;
 
-    additionalIDHeaderWidget?: React.ReactNode;
+        AddColumnComponent?: React.ComponentType;
 
-    emptyComponent?: React.ReactNode;
+        additionalIDHeaderWidget?: React.ReactNode;
 
-    getIdColumnWidth?: () => number;
+        emptyComponent?: React.ReactNode;
 
-    onTextSearchClick?: () => void;
+        getIdColumnWidth?: () => number;
 
-    textSearchLoading?: boolean;
+        onTextSearchClick?: () => void;
 
-    enablePopupIcon: boolean;
+        textSearchLoading?: boolean;
 
-    openEntityMode?: "side_panel" | "full_screen";
-};
+        enablePopupIcon: boolean;
+
+        openEntityMode?: "side_panel" | "full_screen";
+
+        /**
+         * Callback when columns are reordered via drag-and-drop
+         */
+        onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
+
+        /**
+         * If true, the internal toolbar will not be rendered.
+         * Used when the parent component renders its own toolbar.
+         */
+        hideToolbar?: boolean;
+    };
 
 export type GetPropertyForProps<M extends Record<string, any>> = {
     propertyKey: string,

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -49,6 +49,13 @@ export interface PropertyTableCellProps<T extends CMSType> {
     path: string;
     disabled: boolean;
     enablePopupIcon?: boolean;
+    // Sortable props for dnd-kit integration
+    sortableNodeRef?: (node: HTMLElement | null) => void;
+    sortableStyle?: React.CSSProperties;
+    sortableAttributes?: Record<string, any>;
+    isDragging?: boolean;
+    isDraggable?: boolean;
+    frozen?: boolean;
 }
 
 function isStorageProperty(property: ResolvedProperty) {
@@ -69,19 +76,25 @@ function isStorageProperty(property: ResolvedProperty) {
 
 export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
     function PropertyTableCell<T extends CMSType, M extends Record<string, any>>({
-                                                                                     propertyKey,
-                                                                                     customFieldValidator,
-                                                                                     value,
-                                                                                     property,
-                                                                                     align,
-                                                                                     width,
-                                                                                     height,
-                                                                                     path,
-                                                                                     entity,
-                                                                                     readonly,
-                                                                                     disabled: disabledProp,
-                                                                                     enablePopupIcon = true
-                                                                                 }: PropertyTableCellProps<T>) {
+        propertyKey,
+        customFieldValidator,
+        value,
+        property,
+        align,
+        width,
+        height,
+        path,
+        entity,
+        readonly,
+        disabled: disabledProp,
+        enablePopupIcon = true,
+        sortableNodeRef,
+        sortableStyle,
+        sortableAttributes,
+        isDragging,
+        isDraggable,
+        frozen
+    }: PropertyTableCellProps<T>) {
 
         const {
             onValueChange,
@@ -240,7 +253,13 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 align={align ?? "left"}
                 fullHeight={false}
                 disabledTooltip={disabledTooltip ?? (readOnlyProperty ? "Read only" : undefined)}
-                disabled={true}>
+                disabled={true}
+                sortableNodeRef={sortableNodeRef}
+                sortableStyle={sortableStyle}
+                sortableAttributes={sortableAttributes}
+                isDragging={isDragging}
+                isDraggable={isDraggable}
+                frozen={frozen}>
                 <PropertyPreview
                     width={width}
                     height={getRowHeight(size)}
@@ -261,32 +280,32 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 const referenceValue = internalValue ? new EntityReference(internalValue, path) : undefined;
                 innerComponent =
                     <TableReferenceField name={propertyKey as string}
-                                         internalValue={referenceValue}
-                                         updateValue={(v) => updateValue(v ? (v as EntityReference).id : null)}
-                                         disabled={disabled}
-                                         size={size}
-                                         path={path}
-                                         multiselect={false}
-                                         previewProperties={referenceProperty.previewProperties}
-                                         includeId={referenceProperty.includeId}
-                                         includeEntityLink={referenceProperty.includeEntityLink}
-                                         title={stringProperty.name}
-                                         forceFilter={referenceProperty.forceFilter}
+                        internalValue={referenceValue}
+                        updateValue={(v) => updateValue(v ? (v as EntityReference).id : null)}
+                        disabled={disabled}
+                        size={size}
+                        path={path}
+                        multiselect={false}
+                        previewProperties={referenceProperty.previewProperties}
+                        includeId={referenceProperty.includeId}
+                        includeEntityLink={referenceProperty.includeEntityLink}
+                        title={stringProperty.name}
+                        forceFilter={referenceProperty.forceFilter}
                     />;
                 allowScroll = false;
             } else if (isAStorageProperty) {
                 innerComponent = <TableStorageUpload error={validationError ?? error}
-                                                     disabled={disabled}
-                                                     focused={selected}
-                                                     selected={selected}
-                                                     openPopup={setPopupCell ? openPopup : undefined}
-                                                     property={property as ResolvedStringProperty | ResolvedArrayProperty<string[]>}
-                                                     entity={entity}
-                                                     path={path}
-                                                     value={internalValue}
-                                                     previewSize={getPreviewSizeFrom(size)}
-                                                     updateValue={updateValue}
-                                                     propertyKey={propertyKey as string}
+                    disabled={disabled}
+                    focused={selected}
+                    selected={selected}
+                    openPopup={setPopupCell ? openPopup : undefined}
+                    property={property as ResolvedStringProperty | ResolvedArrayProperty<string[]>}
+                    entity={entity}
+                    path={path}
+                    value={internalValue}
+                    previewSize={getPreviewSizeFrom(size)}
+                    updateValue={updateValue}
+                    propertyKey={propertyKey as string}
                 />;
                 includeActions = false;
                 showExpandIcon = true;
@@ -296,15 +315,15 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 const numberProperty = property as ResolvedNumberProperty;
                 if (numberProperty.enumValues) {
                     innerComponent = <VirtualTableSelect name={propertyKey as string}
-                                                         multiple={false}
-                                                         disabled={disabled}
-                                                         focused={selected}
-                                                         valueType={"number"}
-                                                         small={getPreviewSizeFrom(size) !== "medium"}
-                                                         enumValues={numberProperty.enumValues}
-                                                         error={validationError ?? error}
-                                                         internalValue={internalValue as string | number}
-                                                         updateValue={updateValue}
+                        multiple={false}
+                        disabled={disabled}
+                        focused={selected}
+                        valueType={"number"}
+                        small={getPreviewSizeFrom(size) !== "medium"}
+                        enumValues={numberProperty.enumValues}
+                        error={validationError ?? error}
+                        internalValue={internalValue as string | number}
+                        updateValue={updateValue}
                     />;
                     fullHeight = true;
                 } else {
@@ -322,54 +341,55 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 const stringProperty = property as ResolvedStringProperty;
                 if (stringProperty.enumValues) {
                     innerComponent = <VirtualTableSelect name={propertyKey as string}
-                                                         multiple={false}
-                                                         focused={selected}
-                                                         disabled={disabled}
-                                                         valueType={"string"}
-                                                         small={getPreviewSizeFrom(size) !== "medium"}
-                                                         enumValues={stringProperty.enumValues}
-                                                         error={validationError ?? error}
-                                                         internalValue={internalValue as string | number}
-                                                         updateValue={updateValue}
+                        multiple={false}
+                        focused={selected}
+                        disabled={disabled}
+                        valueType={"string"}
+                        small={getPreviewSizeFrom(size) !== "medium"}
+                        enumValues={stringProperty.enumValues}
+                        error={validationError ?? error}
+                        internalValue={internalValue as string | number}
+                        updateValue={updateValue}
                     />;
                     fullHeight = true;
                 } else if (stringProperty.userSelect) {
                     innerComponent = <VirtualTableUserSelect name={propertyKey as string}
-                                                             multiple={false}
-                                                             focused={selected}
-                                                             disabled={disabled}
-                                                             small={getPreviewSizeFrom(size) !== "medium"}
-                                                             error={validationError ?? error}
-                                                             internalValue={internalValue as string}
-                                                             updateValue={updateValue}
+                        multiple={false}
+                        focused={selected}
+                        disabled={disabled}
+                        small={getPreviewSizeFrom(size) !== "medium"}
+                        error={validationError ?? error}
+                        internalValue={internalValue as string}
+                        updateValue={updateValue}
                     />;
                     fullHeight = true;
                 } else if (stringProperty.markdown || !stringProperty.storage || !stringProperty.reference) {
                     const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
                     innerComponent = <VirtualTableInput error={validationError ?? error}
-                                                        disabled={disabled}
-                                                        multiline={multiline}
-                                                        focused={selected}
-                                                        value={internalValue as string}
-                                                        updateValue={updateValue}
+                        disabled={disabled}
+                        multiline={multiline}
+                        focused={selected}
+                        value={internalValue as string}
+                        updateValue={updateValue}
                     />;
                     allowScroll = true;
                 }
             } else if (property.dataType === "boolean") {
                 innerComponent = <VirtualTableSwitch error={validationError ?? error}
-                                                     disabled={disabled}
-                                                     focused={selected}
-                                                     internalValue={internalValue as boolean}
-                                                     updateValue={updateValue}
+                    disabled={disabled}
+                    focused={selected}
+                    internalValue={internalValue as boolean}
+                    updateValue={updateValue}
                 />;
             } else if (property.dataType === "date") {
                 innerComponent = <VirtualTableDateField name={propertyKey as string}
-                                                        error={validationError ?? error}
-                                                        disabled={disabled}
-                                                        mode={property.mode}
-                                                        focused={selected}
-                                                        internalValue={internalValue as Date}
-                                                        updateValue={updateValue}
+                    error={validationError ?? error}
+                    disabled={disabled}
+                    mode={property.mode}
+                    timezone={property.timezone}
+                    focused={selected}
+                    internalValue={internalValue as Date}
+                    updateValue={updateValue}
                 />;
                 fullHeight = true;
                 hideOverflow = false;
@@ -378,17 +398,17 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 if (typeof property.path === "string") {
                     innerComponent =
                         <TableReferenceField name={propertyKey as string}
-                                             internalValue={internalValue as EntityReference}
-                                             updateValue={updateValue}
-                                             disabled={disabled}
-                                             size={size}
-                                             path={property.path}
-                                             multiselect={false}
-                                             previewProperties={property.previewProperties}
-                                             includeId={property.includeId}
-                                             includeEntityLink={property.includeEntityLink}
-                                             title={property.name}
-                                             forceFilter={property.forceFilter}
+                            internalValue={internalValue as EntityReference}
+                            updateValue={updateValue}
+                            disabled={disabled}
+                            size={size}
+                            path={property.path}
+                            multiselect={false}
+                            previewProperties={property.previewProperties}
+                            includeId={property.includeId}
+                            includeEntityLink={property.includeEntityLink}
+                            title={property.name}
+                            forceFilter={property.forceFilter}
                         />;
                 }
                 allowScroll = false;
@@ -403,15 +423,15 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                         if (selected && arrayProperty.of.enumValues) {
                             innerComponent =
                                 <VirtualTableSelect name={propertyKey as string}
-                                                    multiple={true}
-                                                    disabled={disabled}
-                                                    focused={selected}
-                                                    small={getPreviewSizeFrom(size) !== "medium"}
-                                                    valueType={arrayProperty.of.dataType}
-                                                    enumValues={arrayProperty.of.enumValues}
-                                                    error={validationError ?? error}
-                                                    internalValue={internalValue as string | number}
-                                                    updateValue={updateValue}
+                                    multiple={true}
+                                    disabled={disabled}
+                                    focused={selected}
+                                    small={getPreviewSizeFrom(size) !== "medium"}
+                                    valueType={arrayProperty.of.dataType}
+                                    enumValues={arrayProperty.of.enumValues}
+                                    error={validationError ?? error}
+                                    internalValue={internalValue as string | number}
+                                    updateValue={updateValue}
                                 />;
                             allowScroll = true;
                             fullHeight = true;
@@ -447,11 +467,11 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
             showExpandIcon = enablePopupIcon && selected && !innerComponent && !disabled && !readOnlyProperty;
             innerComponent = (
                 <PropertyPreview width={width}
-                                 height={height}
-                                 propertyKey={propertyKey as string}
-                                 value={internalValue}
-                                 property={property}
-                                 size={getPreviewSizeFrom(size)}
+                    height={height}
+                    propertyKey={propertyKey as string}
+                    value={internalValue}
+                    property={property}
+                    size={getPreviewSizeFrom(size)}
                 />
             );
         }
@@ -474,12 +494,18 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 showExpandIcon={showExpandIcon}
                 value={internalValue}
                 hideOverflow={hideOverflow}
+                sortableNodeRef={sortableNodeRef}
+                sortableStyle={sortableStyle}
+                sortableAttributes={sortableAttributes}
+                isDragging={isDragging}
+                isDraggable={isDraggable}
+                frozen={frozen}
                 actions={includeActions && <EntityTableCellActions
                     showError={showError}
                     disabled={disabled}
                     showExpandIcon={showExpandIcon}
                     selected={selected}
-                    openPopup={!disabled ? openPopup : undefined}/>}
+                    openPopup={!disabled ? openPopup : undefined} />}
             >
 
                 {innerComponent}
@@ -498,6 +524,9 @@ function areEqual(prevProps: PropertyTableCellProps<any>, nextProps: PropertyTab
         equal(prevProps.property, nextProps.property) &&
         equal(prevProps.value, nextProps.value) &&
         equal(prevProps.entity.id, nextProps.entity.id) &&
-        equal(prevProps.entity.values, nextProps.entity.values)
+        equal(prevProps.entity.values, nextProps.entity.values) &&
+        prevProps.isDragging === nextProps.isDragging &&
+        prevProps.isDraggable === nextProps.isDraggable &&
+        prevProps.frozen === nextProps.frozen
         ;
 }

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -10,6 +10,7 @@ import { useCustomizationController, useNavigationController, useReferenceDialog
 import { ErrorView } from "../../ErrorView";
 import { cls, EditIcon } from "@firecms/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
+import { useTranslation } from "../../../hooks";
 
 type TableReferenceFieldProps = {
     name: string;
@@ -62,6 +63,8 @@ export const TableReferenceFieldInternal = React.memo(
             includeEntityLink
         } = props;
 
+        const { t } = useTranslation();
+
         const onSingleEntitySelected = useCallback((entity: Entity<any>) => {
             updateValue(entity ? getReferenceFrom(entity) : null);
         }, [updateValue]);
@@ -111,7 +114,7 @@ export const TableReferenceFieldInternal = React.memo(
                 return <EntityPreviewContainer
                     onClick={disabled ? undefined : handleOpen}
                     size={getPreviewSizeFrom(size)}>
-                    <ErrorView title="Value is not a reference." error={"Click to edit"}/>
+                    <ErrorView title={t("value_is_not_reference")} error={t("click_to_edit")}/>
                 </EntityPreviewContainer>;
         };
 
@@ -136,11 +139,11 @@ export const TableReferenceFieldInternal = React.memo(
                     }
                 </>;
             else
-                return <ErrorView error={"Data is not an array of references"}/>;
+                return <ErrorView error={t("data_is_not_array_of_references")}/>;
         };
 
         if (!collection)
-            return <ErrorView error={"The specified collection does not exist"}/>;
+            return <ErrorView error={t("collection_does_not_exist")}/>;
 
         return (
             <div className="w-full group">