@vuu-ui/vuu-utils 2.3.0 → 3.0.0-beta.2

package/esm/packages/vuu-utils/src/data-editing/useEditableTable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useEditableTable.js","sources":["../../../../../../../packages/vuu-utils/src/data-editing/useEditableTable.ts"],"sourcesContent":["import { CopyOption, DataSource, DeleteRowMode, EditApi, EditSessionMode } from \"@vuu-ui/vuu-data-types\";\nimport type { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useData } from \"../context-definitions/DataProvider\";\nimport { useLayoutEffectSkipFirst } from \"../useLayoutEffectSkipFirst\";\nimport { EditSession, isCopyOption } from \"./EditSession\";\n\nexport type EditMode = \"edit\" | \"view\";\n\nexport interface EditableTableHookProps {\n  /**\n   * columns to be included in subscription. If not provided,\n   * default will be '*'. Ignored if dataSource prop present.\n   */\n  columns?: string[];\n  dataSource?: DataSource;\n  addRowsCount?: number;\n  deleteMode?: DeleteRowMode;\n  editSessionMode?: EditSessionMode | CopyOption;\n  isEditMode: boolean;\n  onCancel: () => void;\n  onSave: () => void;\n  /**\n   * If dataSource not provided, new DataSource\n   * will be created using table and columns\n   */\n  table?: VuuTable;\n}\n\nexport const useEditableTable = ({\n  addRowsCount = 15,\n  columns,\n  dataSource: dataSourceProp,\n  deleteMode = \"soft\",\n  editSessionMode = \"inline-all-rows\" as EditSessionMode | CopyOption,\n  isEditMode,\n  onCancel,\n  onSave,\n  table,\n}: EditableTableHookProps) => {\n  const { VuuDataSource } = useData();\n  const [sessionDataSource, setSessionDataSource] = useState<\n    DataSource | undefined\n  >(undefined);\n  const [selectionCount, setSelectionCount] = useState(0);\n  const [deleteCount, setDeleteCount] = useState(0);\n  useLayoutEffectSkipFirst(() => {\n    console.warn(`[useEditableTable] columns and or table changed`);\n  }, [columns, table]);\n\n  const dataSource = useMemo(() => {\n    if (dataSourceProp) {\n      return dataSourceProp;\n    } else if (table) {\n      return new VuuDataSource({ columns, table });\n    } else {\n      throw Error(\n        `useEditableTable unable to provide DataSource, neither dataSource nor table available as props`,\n      );\n    }\n  }, [VuuDataSource, columns, dataSourceProp, table]);\n\n  // The editSession will be made available to all the edit controls in scope\n  // by wrapping the edit component with a DataEditingProvider.\n  const editSession = useMemo(\n    () => new EditSession(dataSource as EditApi, deleteMode),\n    // deleteMode is intentionally excluded — changing it mid-session is not supported\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [dataSource],\n  );\n\n  const handleCancel = useCallback(async () => {\n    try {\n      await editSession.end();\n      setSessionDataSource(undefined);\n      setSelectionCount(0);\n      onCancel();\n    } catch (e) {\n      //\n    }\n  }, [editSession, onCancel]);\n\n  const handleSave = useCallback(\n    async (force = false) => {\n      dataSource.resume?.();\n      try {\n        await editSession.end(true, force);\n        if (editSession.inEditMode === false) {\n          setSessionDataSource(undefined);\n          setSelectionCount(0);\n          onSave();\n        }\n      } catch (e) {\n        console.log(`[useEditableTable] handleSave ${(e as Error).message}`);\n      }\n    },\n    [dataSource, editSession, onSave],\n  );\n\n  const handleDelete = useCallback(async () => {\n    await editSession.deleteSelectedRows();\n    setSelectionCount(0);\n  }, [editSession]);\n\n  const handleAddRows = useCallback(() => {\n    editSession.addRows(addRowsCount);\n  }, [addRowsCount, editSession]);\n\n  const handleUndoRowChange = useCallback(\n    (key: string) => void editSession.undoRowChange(key),\n    [editSession],\n  );\n\n  useEffect(() => {\n    const activeDataSource = sessionDataSource ?? dataSource;\n    activeDataSource.on(\"row-selection\", setSelectionCount);\n    return () => activeDataSource.removeListener(\"row-selection\", setSelectionCount);\n  }, [dataSource, sessionDataSource]);\n\n  useEffect(() => {\n    const syncDeleteCount = () => setDeleteCount(editSession.deleteCount);\n    editSession.on(\"editState\", syncDeleteCount);\n    return () => editSession.removeListener(\"editState\", syncDeleteCount);\n  }, [editSession]);\n\n  useMemo(async () => {\n    if (isEditMode) {\n      try {\n        const sessionDs = isCopyOption(editSessionMode)\n          ? await editSession.begin(editSessionMode)\n          : await editSession.begin(editSessionMode);\n        if (sessionDs) {\n          setSessionDataSource(sessionDs);\n        } else {\n          console.warn(\n            `[useEditableTable] editSession.begin(${editSessionMode}) did not return a session DataSource`,\n          );\n        }\n      } catch (e) {\n        console.error(`[useEditableTable] begin edit session failed`, e);\n        onCancel();\n      }\n    } else if (editSession.inEditMode) {\n      await editSession.end();\n      setSessionDataSource(undefined);\n      setSelectionCount(0);\n    }\n  }, [editSession, editSessionMode, isEditMode, onCancel]);\n\n  return {\n    dataSource,\n    editSession,\n    hasSelection: selectionCount > 0 || deleteCount > 0,\n    onAddRows: handleAddRows,\n    onCancel: handleCancel,\n    onDelete: handleDelete,\n    onSave: handleSave,\n    onUndoRowChange: handleUndoRowChange,\n    sessionDataSource,\n  };\n};\n"],"names":[],"mappings":"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"}

package/types/data-editing/DataEditingProvider.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from "react";
-import { EditSession } from "./EditSession";
-export declare const DataEditingProvider: ({ children, editSession, }: {
-    children: ReactNode;
-    editSession: EditSession;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare function useEditSession(throwIfUnavailable?: false): EditSession | undefined;
-export declare function useEditSession(throwIfUnavailable: true): EditSession;

package/types/data-editing/EditButtons.d.ts

@@ -1,13 +0,0 @@
-import { EditSession } from "./EditSession";
-export interface EditButtonProps {
-    editSession?: EditSession;
-    hasSelection?: boolean;
-    onCancel?: () => void;
-    onDelete?: () => void;
-    onAddRows?: () => void;
-    onSave: (force?: boolean) => void;
-    saveLabel?: string;
-    confirmSave?: () => boolean | Promise<boolean>;
-    confirmCancel?: () => boolean | Promise<boolean>;
-}
-export declare const EditButtons: ({ confirmCancel, confirmSave, editSession, hasSelection, onAddRows, onCancel, onDelete, onSave, saveLabel, }: EditButtonProps) => import("react/jsx-runtime").JSX.Element;

package/types/data-editing/EditModeProvider.d.ts

@@ -1,13 +0,0 @@
-import { ReactNode } from "react";
-export interface EditModeContextProps {
-    isEditMode: boolean;
-    setEditMode: (inEditMode: boolean) => void;
-}
-/**
- * Implemented as a standalone Provider so that EditMode cna be implemented
- * at higher level than individual edit controls.
- */
-export declare const EditModeProvider: ({ children }: {
-    children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const useEditMode: () => EditModeContextProps;

package/types/data-editing/EditSession.d.ts

@@ -1,53 +0,0 @@
-import { CopyOption, DataSource, DeleteRowMode, EditApi, EditSessionMode } from "@vuu-ui/vuu-data-types";
-import type { VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
-import { EventEmitter } from "../event-emitter";
-export declare const isCopyOption: (mode?: EditSessionMode | CopyOption) => mode is CopyOption;
-export type EditState = "clean" | "dirty" | "invalid" | "stale";
-export declare class EditError extends Error {
-}
-type CellEdit = {
-    originalValue: VuuRowDataItemType;
-    editedValue: VuuRowDataItemType;
-    isValid?: boolean;
-    isDeleted?: boolean;
-};
-export declare class StaleUpdateError extends Error {
-}
-type RowEditDetails = {
-    /**
-     * Column name => cell edit details
-     */
-    cellEdits: Map<string, CellEdit>;
-};
-type EditSessionEvents = {
-    editState: (editState: EditState) => void;
-};
-export declare class EditSession extends EventEmitter<EditSessionEvents> {
-    #private;
-    constructor(dataSource: EditApi, deleteMode?: DeleteRowMode);
-    get editCount(): number;
-    set editCount(val: number);
-    get invalidCount(): number;
-    set invalidCount(val: number);
-    get deleteCount(): number;
-    set deleteCount(val: number);
-    get addCount(): number;
-    set addCount(val: number);
-    deleteSelectedRows(): Promise<void>;
-    addRows(count?: number, rowData?: Record<string, VuuRowDataItemType>): void;
-    restoreRows(keys: string[]): void;
-    hasRowChanges(key: string): boolean;
-    undoRowChange(key: string): Promise<void>;
-    clear(): void;
-    /** @deprecated Pass a `CopyOption` ("All" | "Empty" | "Selected") to use `createSessionDataSource` instead. Long-form `EditSessionMode` values will be removed in a future release. */
-    begin(mode: EditSessionMode): Promise<DataSource | undefined>;
-    begin(mode?: CopyOption): Promise<DataSource | undefined>;
-    get dataSource(): EditApi<import("@vuu-ui/vuu-data-types").DataSourceRow<VuuRowDataItemType>> | undefined;
-    end(saveChanges?: boolean, force?: boolean): Promise<void>;
-    get inEditMode(): boolean;
-    get editState(): EditState;
-    getOrCreateRowEdits(key: string): RowEditDetails;
-    storeCellEdit(cellEdits: Map<string, CellEdit>, column: string, originalValue: VuuRowDataItemType, editedValue: VuuRowDataItemType, isValid: boolean): CellEdit;
-    commit(key: string, columnName: string, originalValue: VuuRowDataItemType, typedValue: string | number | boolean, isValid: boolean): Promise<any>;
-}
-export {};

package/types/data-editing/edit-utils.d.ts

@@ -1,4 +0,0 @@
-import { EditSessionMode, InlineEditSessionMode } from "@vuu-ui/vuu-data-types";
-import { DataRow, RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
-export declare const isInlineEditingSession: (editSessionMode: EditSessionMode) => editSessionMode is InlineEditSessionMode;
-export declare const getVuuEditMessage: (dataRow: DataRow, column: RuntimeColumnDescriptor, originalValue: string) => import("react/jsx-runtime").JSX.Element | undefined;

package/types/data-editing/useEditableTable.d.ts

@@ -1,34 +0,0 @@
-import { CopyOption, DataSource, DeleteRowMode, EditSessionMode } from "@vuu-ui/vuu-data-types";
-import type { VuuTable } from "@vuu-ui/vuu-protocol-types";
-import { EditSession } from "./EditSession";
-export type EditMode = "edit" | "view";
-export interface EditableTableHookProps {
-    /**
-     * columns to be included in subscription. If not provided,
-     * default will be '*'. Ignored if dataSource prop present.
-     */
-    columns?: string[];
-    dataSource?: DataSource;
-    addRowsCount?: number;
-    deleteMode?: DeleteRowMode;
-    editSessionMode?: EditSessionMode | CopyOption;
-    isEditMode: boolean;
-    onCancel: () => void;
-    onSave: () => void;
-    /**
-     * If dataSource not provided, new DataSource
-     * will be created using table and columns
-     */
-    table?: VuuTable;
-}
-export declare const useEditableTable: ({ addRowsCount, columns, dataSource: dataSourceProp, deleteMode, editSessionMode, isEditMode, onCancel, onSave, table, }: EditableTableHookProps) => {
-    dataSource: DataSource;
-    editSession: EditSession;
-    hasSelection: boolean;
-    onAddRows: () => void;
-    onCancel: () => Promise<void>;
-    onDelete: () => Promise<void>;
-    onSave: (force?: boolean) => Promise<void>;
-    onUndoRowChange: (key: string) => undefined;
-    sessionDataSource: DataSource | undefined;
-};