@etsoo/react 1.8.22 → 1.8.24

package/lib/mjs/app/ReactUtils.d.ts

@@ -0,0 +1,41 @@
+import { DataTypes } from "@etsoo/shared";
+import React from "react";
+/**
+ * React utils
+ */
+export declare namespace ReactUtils {
+    /**
+     * Format input value
+     * @param value Input value
+     * @returns Formatted value
+     */
+    function formatInputValue(value: unknown): string | number | any[] | undefined;
+    /**
+     * Is safe click
+     * @param event Mouse event
+     * @returns Result
+     */
+    function isSafeClick(event: React.MouseEvent<HTMLElement>): boolean;
+    /**
+     * Trigger input change event
+     * @param input Form input
+     * @param value New value
+     * @param cancelable Cancelable
+     */
+    function triggerChange(input: HTMLInputElement, value: string, cancelable?: boolean): void;
+    /**
+     * Update refs
+     * @param refs Refs
+     * @param data Data
+     * @param callback Callback to update refs' value, return false continue to process
+     */
+    function updateRefs<D extends object, T = HTMLInputElement>(refs: Partial<DataTypes.DI<ReadonlyArray<keyof D & string>, React.MutableRefObject<T | null>>>, data: D, callback?: ((item: T, value: D[keyof D & string]) => void | boolean) | keyof T): void;
+    /**
+     * Update data with refs
+     * @param refs Refs
+     * @param data Data
+     * @param callback Callback to return new value
+     * @param ignoreEmpty Ignore empty string or not, default true
+     */
+    function updateRefValues<D extends object, T = HTMLInputElement>(refs: Partial<DataTypes.DI<ReadonlyArray<keyof D & string>, React.MutableRefObject<T | null>>>, data: D, callback?: ((item: T) => any) | keyof T, ignoreEmpty?: boolean): void;
+}

package/lib/mjs/components/DnDList.d.ts

@@ -0,0 +1,74 @@
+import { UniqueIdentifier } from "@dnd-kit/core";
+import { DataTypes } from "@etsoo/shared";
+import React, { CSSProperties } from "react";
+/**
+ * DnD list forward ref
+ */
+export interface DnDListRef<D extends object> {
+    /**
+     * Add item
+     * @param item New item
+     */
+    addItem(item: D): void;
+    /**
+     * Add items
+     * @param items items
+     */
+    addItems(items: D[]): void;
+    /**
+     * Delete item
+     * @param index Item index
+     */
+    deleteItem(index: number): void;
+    /**
+     * Edit item
+     * @param newItem New item
+     * @param index Index
+     */
+    editItem(newItem: D, index: number): boolean;
+}
+/**
+ * DnD sortable list properties
+ */
+export interface DnDListPros<D extends object, K extends DataTypes.Keys<D>> {
+    /**
+     * Get list item style callback
+     */
+    getItemStyle: (index: number, isDragging: boolean) => CSSProperties;
+    /**
+     * Item renderer
+     */
+    itemRenderer: (item: D, index: number, nodeRef: React.ComponentProps<any>, actionNodeRef: React.ComponentProps<any>) => React.ReactElement;
+    /**
+     * List items
+     */
+    items: D[];
+    /**
+     * Unique key field
+     */
+    keyField: K;
+    /**
+     * Label field
+     */
+    labelField: K;
+    /**
+     * Methods ref
+     */
+    mRef?: React.Ref<DnDListRef<D>>;
+    /**
+     * Data change handler
+     */
+    onChange?: (items: D[]) => void;
+    /**
+     * Drag end handler
+     */
+    onDragEnd?: (items: D[]) => void;
+}
+/**
+ * DnD (Drag and Drop) sortable list
+ * @param props Props
+ * @returns Component
+ */
+export declare function DnDList<D extends {
+    id: UniqueIdentifier;
+}, K extends DataTypes.Keys<D, UniqueIdentifier> = DataTypes.Keys<D, UniqueIdentifier>>(props: DnDListPros<D, K>): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/components/DynamicRouter.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { RouteObject } from "react-router";
+/**
+ * Dynamic router props
+ */
+export type DynamicRouterProps = {
+    /**
+     * basename of the router
+     */
+    basename?: string;
+};
+/**
+ * Dynamic router
+ * @param props Props
+ * @returns Component
+ */
+export declare function DynamicRouter(props: React.PropsWithChildren<DynamicRouterProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Create dynamic router
+ * @param routes Routes
+ * @param opts Options
+ * @returns Router
+ */
+export declare function createDynamicRouter(routes: RouteObject[], opts?: DynamicRouterProps): import("react-router").DataRouter;

package/lib/mjs/components/GridColumn.d.ts

@@ -0,0 +1,193 @@
+import { EntityStatus } from "@etsoo/appscript";
+import { DataTypes } from "@etsoo/shared";
+import React from "react";
+import { GridLoaderStates } from "./GridLoader";
+import { ScrollerGridForwardRef } from "./ScrollerGrid";
+/**
+ * Grid data type
+ */
+import GridDataType = DataTypes.CombinedEnum;
+export { GridDataType };
+/**
+ * Grid align
+ */
+export type GridAlign = "center" | "inherit" | "justify" | "left" | "right";
+/**
+ * Data align get
+ * @param align Align
+ * @param type Data type
+ */
+export declare const GridAlignGet: (align?: GridAlign, type?: GridDataType) => GridAlign | undefined;
+/**
+ * Grid deleted cell box style
+ * @param data Data
+ * @returns Result
+ */
+export declare const GridDeletedCellBoxStyle: (data: undefined | {
+    status: EntityStatus;
+} | {
+    entityStatus: EntityStatus;
+}) => React.CSSProperties;
+/**
+ * Grid cell value type
+ */
+export type GridCellValueType = string | number | Date | boolean | undefined;
+/**
+ * Grid cell formatter props
+ */
+export type GridCellFormatterProps<T> = {
+    /**
+     * Current data
+     */
+    data?: T;
+    /**
+     * Data field
+     */
+    field?: string;
+    /**
+     * Row index
+     */
+    rowIndex: number;
+    /**
+     * Column index
+     */
+    columnIndex: number;
+};
+/**
+ * Grid cell renderer props
+ */
+export type GridCellRendererProps<T, P = any> = GridCellFormatterProps<T> & {
+    /**
+     * Cell props
+     */
+    cellProps: P;
+    /**
+     * Formatted value
+     */
+    formattedValue?: GridCellValueType;
+    /**
+     * Item selected
+     */
+    selected: boolean;
+    /**
+     * Data type
+     */
+    type?: GridDataType;
+    /**
+     * Render props
+     */
+    renderProps?: GridColumnRenderProps;
+    /**
+     * Set items for rerenderer
+     * @param callback Callback
+     */
+    setItems: (callback: (items: T[], ref?: ScrollerGridForwardRef<T>) => T[] | undefined | void) => void;
+};
+/**
+ * Grid header cell renderer props
+ */
+export type GridHeaderCellRendererProps<T, P = any> = {
+    /**
+     * Cell props
+     */
+    cellProps: P;
+    /**
+     * Column
+     */
+    column: GridColumn<T>;
+    /**
+     * Column index
+     */
+    columnIndex: number;
+    /**
+     * States
+     */
+    states: GridLoaderStates<T>;
+};
+/**
+ * Grid column render props
+ */
+export type GridColumnRenderProps = {
+    /**
+     * Culture, like zh-CN
+     */
+    readonly culture?: string;
+    /**
+     * Time zone
+     */
+    readonly timeZone?: string;
+    /**
+     * Currency, like USD for US dollar
+     */
+    readonly currency?: string;
+    /**
+     * Number format options
+     */
+    readonly numberFormatOptions?: Intl.NumberFormatOptions;
+    /**
+     * Near days to show alert
+     */
+    readonly nearDays?: number;
+    /**
+     * Additional data
+     */
+    readonly data?: Readonly<Record<string, any>>;
+};
+/**
+ * Grid column
+ */
+export type GridColumn<T> = {
+    /**
+     * The column identifier. It's used to map with row data
+     */
+    field?: string & keyof T;
+    /**
+     * The title of the column rendered in the column header cell
+     */
+    header?: string;
+    /**
+     * Set the width of the column
+     */
+    width?: number;
+    /**
+     * Sets the minimum width of a column
+     */
+    minWidth?: number;
+    /**
+     * Align
+     */
+    align?: GridAlign;
+    /**
+     * If `true`, the column is sortable
+     * @default true
+     */
+    sortable?: boolean;
+    /**
+     * Sort ascending or descending
+     */
+    sortAsc?: boolean;
+    /**
+     * Data type
+     */
+    type?: GridDataType;
+    /**
+     * Cell value formatter
+     */
+    valueFormatter?: (props: GridCellFormatterProps<T>) => GridCellValueType;
+    /**
+     * Cell renderer
+     */
+    cellRenderer?: (props: GridCellRendererProps<T>) => React.ReactNode;
+    /**
+     * Cell box style
+     */
+    cellBoxStyle?: ((data: T | undefined) => React.CSSProperties) | React.CSSProperties;
+    /**
+     * Render props
+     */
+    renderProps?: GridColumnRenderProps | ((data: T | undefined) => GridColumnRenderProps);
+    /**
+     * Header cell renderer
+     */
+    headerCellRenderer?: (props: GridHeaderCellRendererProps<T>) => React.ReactNode;
+};

package/lib/mjs/components/GridLoader.d.ts

@@ -0,0 +1,155 @@
+import { QueryPagingData, QueryPagingOrder } from "@etsoo/appscript";
+import { DataTypes } from "@etsoo/shared";
+/**
+ * Grid size
+ */
+export type GridSize = number | ((input: number) => number);
+/**
+ * Grid size calculation
+ * @param size Size
+ * @param input Input
+ */
+export declare const GridSizeGet: (size: GridSize, input: number) => number;
+/**
+ * Grid data type
+ */
+export type GridData = FormData | DataTypes.StringRecord;
+/**
+ * Grid template type
+ */
+export type GridTemplateType<T> = DataTypes.BasicTemplateType<{
+    [k in keyof T]: T[k] extends "date" ? "date" | "string" : T[k] extends DataTypes.BasicNames ? T[k] : never;
+}>;
+/**
+ * Grid data get with format
+ * @param data Data
+ * @param template Template
+ * @param keepSource Keep source data
+ * @returns Json data
+ */
+export declare function GridDataGet<const T>(props: GridLoadDataProps, template?: T, keepSource?: boolean): GridJsonData & GridTemplateType<T>;
+/**
+ * Grid data get with format
+ * @param data Data
+ * @param template Template
+ * @param keepSource Keep source data
+ * @returns Json data
+ */
+export declare function GridDataGetData<const T>(data?: GridData, template?: T, keepSource?: boolean): GridTemplateType<T>;
+/**
+ * Grid Json data
+ */
+export type GridJsonData = {
+    /**
+     * Query paging data
+     */
+    queryPaging: QueryPagingData;
+};
+/**
+ * Grid data load props
+ */
+export type GridLoadDataProps = GridJsonData & {
+    /**
+     * Data related
+     */
+    data?: GridData;
+};
+/**
+ * Grid data load partial props
+ */
+export type GridLoadDataPartialProps = {
+    /**
+     * Query paging data
+     */
+    queryPaging?: Partial<QueryPagingData>;
+    /**
+     * Data related
+     */
+    data?: GridData;
+};
+/**
+ * Grid data loader
+ */
+export type GridLoader<T extends object, P extends GridJsonData = GridLoadDataProps> = {
+    /**
+     * Auto load data, otherwise call reset
+     * @default true
+     */
+    autoLoad?: boolean;
+    /**
+     * Default order by
+     */
+    defaultOrderBy?: QueryPagingOrder[];
+    /**
+     * Batch size when load data, default will be calcuated with height and itemSize
+     */
+    loadBatchSize?: GridSize;
+    /**
+     * Load data
+     */
+    loadData: (props: P, lastItem?: T) => PromiseLike<T[] | null | undefined>;
+    /**
+     * Handler for init load
+     * @param ref Ref
+     * @returns Result
+     */
+    onInitLoad?: (ref: any) => [T[], GridLoaderPartialStates<T>?] | null | undefined;
+    /**
+     * Handler for updating rows
+     * @param rows Rows
+     * @param state State
+     */
+    onUpdateRows?: (rows: T[], state: GridLoaderStates<T>) => void;
+    /**
+     * Threshold at which to pre-fetch data; default is half of loadBatchSize
+     */
+    threshold?: number | undefined;
+};
+type GridLoaderProps<T> = {
+    /**
+     * Auto load data, otherwise call reset
+     * @default true
+     */
+    autoLoad: boolean;
+    /**
+     * Last loaded item
+     */
+    lastItem?: T;
+    /**
+     * Last loaded items
+     */
+    lastLoadedItems?: number;
+    /**
+     * All loaded items count
+     */
+    loadedItems: number;
+    /**
+     * Has next page?
+     */
+    hasNextPage: boolean;
+    /**
+     * Is next page loading?
+     */
+    isNextPageLoading: boolean;
+    /**
+     * Is mounted
+     */
+    isMounted?: boolean;
+    /**
+     * Selected items of id
+     */
+    selectedItems: T[];
+    /**
+     * Id cache
+     */
+    idCache: Record<any, null>;
+};
+/**
+ * Grid loader states
+ */
+export type GridLoaderStates<T> = GridLoadDataProps & GridLoaderProps<T>;
+/**
+ * Grid loader states
+ */
+export type GridLoaderPartialStates<T> = GridLoadDataPartialProps & Partial<GridLoaderProps<T>>;
+export {};

package/lib/mjs/components/GridMethodRef.d.ts

@@ -0,0 +1,31 @@
+import { Align } from "react-window";
+import { GridLoaderPartialStates } from "./GridLoader";
+/**
+ * Grid method ref
+ */
+export interface GridMethodRef<T> {
+    /**
+     * Delete item at the index
+     * @param index Index
+     */
+    delete(index: number): T | undefined;
+    /**
+     * Insert the item at start
+     * @param item Item
+     * @param start Start position
+     */
+    insert(item: T, start: number): void;
+    /**
+     * Reset
+     * @param add Additional data
+     */
+    reset(add?: GridLoaderPartialStates<T>): void;
+    /**
+     * Scroll to the specified offset (scrollTop or scrollLeft, depending on the direction prop).
+     */
+    scrollToRef(scrollOffset: number): void;
+    /**
+     * Scroll to the specified item.
+     */
+    scrollToItemRef(index: number, align?: Align): void;
+}

package/lib/mjs/components/ListItemReact.d.ts

@@ -0,0 +1,6 @@
+import { ListItem } from "@etsoo/appscript";
+import React from "react";
+/**
+ * React list item
+ */
+export type ListItemReact = ListItem<React.ReactNode, React.MouseEvent>;

package/lib/mjs/components/ScrollRestoration.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Scroll restoration
+ */
+export declare function ScrollRestoration(): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/components/ScrollerGrid.d.ts

@@ -0,0 +1,112 @@
+import { DataTypes } from "@etsoo/shared";
+import React from "react";
+import { Align, GridChildComponentProps, VariableSizeGridProps } from "react-window";
+import { GridJsonData, GridLoadDataProps, GridLoader, GridLoaderStates } from "./GridLoader";
+import { GridMethodRef } from "./GridMethodRef";
+export type ScrollerGridItemRendererProps<T> = Omit<GridChildComponentProps<T>, "data"> & {
+    /**
+     * Selected items
+     */
+    selectedItems: T[];
+    /**
+     * Set items for rerenderer
+     * @param callback Callback
+     */
+    setItems: (callback: (items: T[], ref: ScrollerGridForwardRef<T>) => T[] | undefined | void) => void;
+    /**
+     * Data
+     */
+    data?: T;
+};
+/**
+ * Scroller vertical grid props
+ */
+export type ScrollerGridProps<T extends object, P extends GridJsonData = GridLoadDataProps> = GridLoader<T, P> & Omit<VariableSizeGridProps<T>, "children" | "rowCount" | "rowHeight"> & {
+    /**
+     * Footer renderer
+     */
+    footerRenderer?: (rows: T[], states: GridLoaderStates<T>) => React.ReactNode;
+    /**
+     * Header renderer
+     */
+    headerRenderer?: (states: GridLoaderStates<T>) => React.ReactNode;
+    /**
+     * Id field
+     */
+    idField?: DataTypes.Keys<T>;
+    /**
+     * Item renderer
+     */
+    itemRenderer: (props: ScrollerGridItemRendererProps<T>) => React.ReactElement;
+    /**
+     * Methods
+     */
+    mRef?: React.Ref<ScrollerGridForwardRef<T>>;
+    /**
+     * On items select change
+     */
+    onSelectChange?: (selectedItems: T[]) => void;
+    /**
+     * Returns the height of the specified row.
+     */
+    rowHeight?: ((index: number) => number) | number;
+};
+/**
+ * Scroller grid forward ref
+ */
+export interface ScrollerGridForwardRef<T> extends GridMethodRef<T> {
+    /**
+     * Scroll to the specified offsets
+     */
+    scrollTo(params: {
+        scrollLeft: number;
+        scrollTop: number;
+    }): void;
+    scrollToItem(params: {
+        align?: Align | undefined;
+        columnIndex?: number | undefined;
+        rowIndex?: number | undefined;
+    }): void;
+    /**
+     * Scroll to the specified item
+     */
+    scrollToItem(params: {
+        align?: Align | undefined;
+        columnIndex?: number | undefined;
+        rowIndex?: number | undefined;
+    }): void;
+    /**
+     * Select the item
+     * @param rowIndex Row index
+     */
+    select(rowIndex: number): void;
+    /**
+     * Select or unselect all items
+     * @param checked Checked
+     */
+    selectAll(checked: boolean): void;
+    /**
+     * Select item
+     * @param item Item
+     * @param checked Checked
+     */
+    selectItem(item: any, checked: boolean): void;
+    /**
+     *
+     * @param index
+     * @param shouldForceUpdate
+     */
+    resetAfterColumnIndex(index: number, shouldForceUpdate?: boolean): void;
+    resetAfterIndices(params: {
+        columnIndex: number;
+        rowIndex: number;
+        shouldForceUpdate?: boolean | undefined;
+    }): void;
+    resetAfterRowIndex(index: number, shouldForceUpdate?: boolean): void;
+}
+/**
+ * Scroller vertical grid
+ * @param props Props
+ * @returns Component
+ */
+export declare const ScrollerGrid: <T extends object>(props: ScrollerGridProps<T>) => import("react/jsx-runtime").JSX.Element;