@enableai-base/grid-layout 1.0.0

package/dist/grid-layout.d.ts

@@ -0,0 +1,410 @@
+/// <reference types="react" />
+import { UploadFunction, FileInfo, LinkEditorProps, SelectProps } from '@enableai-base/ui';
+import ReactGridLayout, { Layout } from 'react-grid-layout';
+export { Layout } from 'react-grid-layout';
+import React$1, { FC as FC$1, ReactNode, CSSProperties, MouseEventHandler, InputHTMLAttributes, SetStateAction, ChangeEvent } from 'react';
+import { MenuProps, FormInstance, DrawerProps, InputProps } from 'antd';
+import { MenuInfo, FeatureValues, ColumnDefine, DateFormatType, NumberFormatType, FilterColumnData, ToolConfig, TableConfig } from '@enableai-base/core';
+import { FileInfo as FileInfo$1 } from 'packages/ui/src/upload-list/type';
+import { Dayjs } from 'dayjs';
+import { UploadListProps } from 'antd/es/upload';
+
+/**
+ * ObjectURLManager 类用于创建并管理对象 URL。
+ * - 可以为 Blob 或 MediaSource 创建对象 URL并跟踪生成的 URL。
+ * - 支持批量撤销已创建的对象 URL。
+ */
+export declare class ObjectURLManager {
+    private store;
+    /**
+     * 为指定的 Blob 或 MediaSource 创建对象 URL 并存储。
+     *
+     * @param {Blob | MediaSource} obj - 需要创建对象 URL 的数据对象。
+     * @returns {string} 创建的对象 URL。
+     */
+    create(obj: Blob | MediaSource): string;
+    /**
+     * 撤销所有已创建的对象 URL，释放内存。
+     */
+    destroy(): void;
+}
+
+export type AttachmentPreviewProps = {
+    /**
+     * 资源路径，后端存储的S3路径 /path/to/s3
+     */
+    path: string;
+    s3PathParser: (path: string) => Promise<string>;
+};
+export declare const AttachmentPreview: FC<AttachmentPreviewProps>;
+
+export type AttachmentEditorProps = {
+    value?: {
+        name: string;
+        path: string;
+    }[];
+    onChange?: (value: Required<AttachmentEditorProps>['value']) => void;
+    s3PathParser: (path: string) => Promise<string>;
+    uploadFunction: UploadFunction;
+    onPreview?: (file: FileInfo) => void;
+    disabled?: boolean;
+};
+export declare const AttachmentEditor: FC<AttachmentEditorProps>;
+
+export type DashboardItemStore = Layout[];
+export type DashboardProps = {
+    dashboardData?: DashboardItemStore;
+    children?: ReactNode;
+    cols?: number;
+    gapX?: number;
+    gapY?: number;
+    rowHeight?: number;
+    onLayoutChange?: (layout: Layout[]) => void;
+    mode?: 'editable' | 'view';
+    onDrop?: ReactGridLayout.CoreProps['onDrop'];
+    droppingItem?: ReactGridLayout.CoreProps['droppingItem'];
+};
+export declare const Dashboard: FC$1<DashboardProps>;
+
+type LayoutItem = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/**
+ * 自动计算一个新 item 可以放置的位置
+ * @param layout 当前布局项数组
+ * @param newW 新组件宽度
+ * @param newH 新组件高度
+ * @param cols 网格总列数（默认12）
+ */
+export declare function findAvailablePosition(layout: LayoutItem[], newW: number, newH: number, cols?: number): {
+    x: number;
+    y: number;
+};
+/**
+ * 自动计算生成一个虚线框的Base64图片
+ * @param width 当前布局宽度
+ * @param height 当前布局高度
+ * @param x 虚线结束点x
+ * @param y 虚线结束点y
+ * @param padding 虚线绘制的padding
+ */
+export declare function generateCrossDashedBase64(width: number, height: number, x: number, y: number, padding?: number): string | undefined;
+
+type DashboardItemProps = {
+    id: string;
+    title?: string | ReactNode;
+    isActive?: boolean;
+    menuItems?: MenuProps['items'];
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    mode?: 'editable' | 'view';
+    onMouseDown?: MouseEventHandler<HTMLElement>;
+    onMouseUp?: MouseEventHandler<HTMLElement>;
+    onSelect?: (e: React$1.MouseEvent<HTMLElement>, selectedId: string) => void;
+    onMenuClick?: (info: MenuInfo, selectedId: string) => void;
+};
+declare const _default: React$1.ForwardRefExoticComponent<DashboardItemProps & React$1.RefAttributes<HTMLDivElement>>;
+
+export type DetailsDrawerProps = {
+    isOpen?: boolean;
+    width?: number | string;
+    placement?: 'left' | 'right';
+    className?: string;
+    form?: FormInstance<FeatureValues>;
+    initialValues: FeatureValues;
+    onChange: (changed: FeatureValues) => void;
+    onPreview?: (value: FileInfo$1) => void;
+    columnsData: ColumnDefine[];
+    historyNode: ReactNode;
+    defaultActiveKey?: string;
+    onClick?: (e: React.MouseEvent, columnId: string) => void;
+    onClose: () => void;
+    uploadFunction: UploadFunction;
+} & DrawerProps;
+export declare const DetailsDrawer: FC<DetailsDrawerProps>;
+
+export declare const useDetailsDrawerContext: () => {
+    uploadFunction: UploadFunction;
+    columnsData: ColumnDefine[];
+    onClick: ((e: React.MouseEvent, columnId: string) => void) | undefined;
+    onPreview: ((value: FileInfo$1) => void) | undefined;
+};
+
+type DrawerFormProps = {
+    form?: FormInstance<FeatureValues>;
+    initialValues: FeatureValues;
+    columnsData: ColumnDefine[];
+    onChange: (values: FeatureValues) => void;
+    loading?: boolean;
+};
+export declare const DrawerForm: FC<DrawerFormProps>;
+
+type DrawerTitleProps = {
+    onClose: () => void;
+    isLast?: boolean;
+    isNext?: boolean;
+    onLastClick?: () => void;
+    onNextClick?: () => void;
+};
+export declare const DrawerTitle: FC<DrawerTitleProps>;
+
+type FeatureRowFieldsProps = {
+    currentColumn: ColumnDefine;
+};
+export declare const FeatureRowFields: FC<FeatureRowFieldsProps>;
+
+type Person = {
+    id: string;
+    name?: string;
+    avatar?: string;
+    role?: string;
+    mobile?: string;
+    status?: string;
+};
+type FormAvatarProps = {
+    value?: Person[];
+    request?: (id: string) => Promise<any>;
+};
+export declare const FormAvatar: FC<FormAvatarProps>;
+
+export type ProFormDateTimeFormatProps = {
+    value?: Dayjs;
+    onChange?: (value?: string) => void;
+    format?: DateFormatType;
+    placeholder?: string;
+    disabled?: boolean;
+};
+export declare const FormDateTimePicker: React.FC<ProFormDateTimeFormatProps>;
+
+type ProFormNumberFormatProps = {
+    value?: number | string;
+    onChange?: (value?: number) => void;
+    format?: NumberFormatType;
+    placeholder?: string;
+    disabled?: boolean;
+};
+export declare const FormInputNumber: React.FC<ProFormNumberFormatProps>;
+
+export type JsonEditorProps = {
+    value: string;
+    dark: boolean;
+    disabled?: boolean;
+    onChange?: (value?: string) => void;
+};
+export declare const JsonEditor: FC<JsonEditorProps>;
+
+export declare const FormJsonEditor: FC<JsonEditorProps>;
+
+export declare const FormLinkEdit: FC<LinkEditorProps>;
+
+export declare const FormMultiSelect: FC<SelectProps>;
+
+export declare const FormSingleSelect: FC<SelectProps>;
+
+type ProFormDurationTextProps = InputProps & {
+    value?: number;
+    onChange?: (value: number) => void;
+};
+export declare const FormTimeLen: React.FC<ProFormDurationTextProps>;
+
+type FormUploadProps = Omit<UploadListProps, 'uploadFunction'> & {
+    format?: 'image' | 'document' | 'video';
+    onPreview?: (file: FileInfo) => void;
+};
+export declare const FormUpload: FC<FormUploadProps>;
+
+type FeatureRowFieldProps = {
+    columnId: string;
+    columnsData: ColumnDefine[];
+};
+export declare const FeatureRowField: FC<FeatureRowFieldProps>;
+
+export type FeatureFieldsProps = {
+    columnId: string;
+    featureValue: FeatureValues;
+    onChange: (value: FeatureValues) => void;
+};
+
+type RowLabelProps = {
+    columnData: ColumnDefine;
+    icon?: ReactNode;
+};
+export declare const RowLabel: FC<RowLabelProps>;
+
+type PointData$2 = {
+    x: number;
+    y: number;
+};
+type SearchModalProps = {
+    offsetParent: HTMLElement | null;
+    position: PointData$2;
+    isOpen?: boolean;
+    searchValue?: InputHTMLAttributes<HTMLInputElement>['value'] | bigint;
+    isLoading?: boolean;
+    width?: number;
+    placeholder?: string;
+    searchTotal?: number;
+    suffix?: ReactNode;
+    onClose?: () => void;
+    onPositionChange: (data: SetStateAction<PointData$2>) => void;
+    onSearchChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onPageChange?: (current: number) => void;
+};
+export declare const SearchModal: FC<SearchModalProps>;
+
+export declare enum FilterOperator {
+    EQUAl = "equal",
+    NOT_EQUAL = "not_equal",
+    LIKE = "like",
+    NOT_LIKE = "not_like",
+    EMPTY = "empty",
+    NOT_EMPTY = "not_empty",
+    BETWEEN = "between",
+    GREATER_THAN = "greater_than",
+    GREATER_THAN_OR_EQUAL = "greater_than_or_equal",
+    LESS_THAN = "less_than",
+    LESS_THAN_OR_EQUAL = "less_than_or_equal"
+}
+/** 表单值类型 */
+export type FilterItem = {
+    columnId: string;
+    operator: FilterOperator;
+    value?: string | number | string[] | [start: Dayjs | undefined, end: Dayjs | undefined];
+};
+export interface FilterFormValues {
+    filterType?: 'all' | 'any';
+    filters: FilterItem[];
+}
+
+type PointData$1 = {
+    x: number;
+    y: number;
+};
+export type FilterModalProps = {
+    offsetParent: HTMLElement | null;
+    initialValues?: FilterFormValues;
+    columnData: FilterColumnData[];
+    tools: ToolConfig[];
+    position: PointData$1;
+    isOpen?: boolean;
+    width?: number;
+    onClose?: () => void;
+    onPositionChange: (data: SetStateAction<PointData$1>) => void;
+    onValuesChange?: (values: FilterFormValues) => void;
+};
+export declare const FilterModal: FC<FilterModalProps>;
+
+interface TableFilterFormProps {
+    tools: ToolConfig[];
+    columnData: FilterColumnData[];
+    initialValues?: FilterFormValues;
+    onValuesChange?: (values: FilterFormValues) => void;
+}
+export declare const TableFilterForm: FC<TableFilterFormProps>;
+
+export declare enum Operator {
+    EQUAL = "equal",
+    NOT_EQUAL = "not_equal",
+    GREATER_THAN = "greater_than",
+    GREATER_THAN_OR_EQUAL = "greater_than_or_equal",
+    LESS_THAN = "less_than",
+    LESS_THAN_OR_EQUAL = "less_than_or_equal",
+    BEFORE = "before",
+    AFTER = "after",
+    LIKE = "like",
+    NOT_LIKE = "not_like",
+    EMPTY = "empty",
+    NOT_EMPTY = "not_empty"
+}
+
+export declare const getDateRangeByOption: (type: string, operator: Operator) => [Dayjs | undefined, Dayjs | undefined] | undefined;
+export declare const getDateBySpecific: (value: Dayjs, operator: Operator) => [Dayjs | undefined, Dayjs | undefined];
+
+export type BaseFilterValueProps = {
+    form: FormInstance<any>;
+    columnId: string;
+    listIndex: number;
+    tableConfig: TableConfig;
+    columnConfig: FilterColumnData;
+    operator: string;
+};
+export type FilterValueProps = {
+    value: FeatureValues['value'];
+    onChange: (value: FeatureValues['value']) => void;
+} & BaseFilterValueProps;
+export declare const FilterValue: FC<BaseFilterValueProps>;
+
+export declare const FilterDatePicker: FC<FilterValueProps>;
+
+export declare const FilterDateSelect: FC<FilterValueProps>;
+
+export declare const FilterFileSelect: FC<FilterValueProps>;
+
+type FilterGroupProps = {
+    form: FormInstance<any>;
+    columnId: string;
+    columnData: FilterColumnData[];
+    listIndex: number;
+    tools: ToolConfig[];
+    operator: any;
+};
+export declare const FilterGroup: FC<FilterGroupProps>;
+
+export declare const FilterInput: FC<FilterValueProps>;
+
+export declare const FilterNumber: FC<FilterValueProps>;
+
+export declare const FilterPeopleSelect: FC<FilterValueProps>;
+
+export declare const FilterSelect: FC<FilterValueProps>;
+
+type FilterTitleProps = {
+    filterCount: number;
+};
+export declare const FilterTitle: FC<FilterTitleProps>;
+
+export type FilterTypeSelectProps = {
+    value: FeatureValues['value'];
+    onChange: (value: FeatureValues['value']) => void;
+} & BaseFilterValueProps;
+export declare const FilterTypeSelect: FC<FilterTypeSelectProps>;
+
+export type DateOptionValue = 'specific' | 'today' | 'tomorrow' | 'yesterday' | 'this_week' | 'last_week' | 'this_month' | 'last_month' | 'last_7_days' | 'next_7_days' | 'last_30_days' | 'next_30_days';
+export declare const dateValues: string[];
+export declare function resolveDateRange(value: DateOptionValue, now?: Dayjs): [Dayjs, Dayjs] | undefined;
+
+type PointData = {
+    x: number;
+    y: number;
+};
+export type MenuItems = Required<MenuProps>['items'];
+export type TableMenuModalProps = {
+    offsetParent: HTMLElement | null;
+    position: PointData;
+    menuItems: MenuItems;
+    isOpen?: boolean;
+    width?: number;
+    onClose?: () => void;
+    onClick?: MenuProps['onClick'];
+    onPositionChange: (data: SetStateAction<PointData>) => void;
+};
+export declare const TableMenuModal: FC<TableMenuModalProps>;
+
+type Position = {
+    x: number;
+    y: number;
+};
+type AdjustOptions = {
+    left?: boolean;
+    right?: boolean;
+    top?: boolean;
+    bottom?: boolean;
+};
+export declare function adjustPositionToViewport(position: Position, modalRect: DOMRect, options?: AdjustOptions): Position;
+export declare const useModalPosition: (contentRef: React.RefObject<HTMLElement | null>, position: Position, setPosition: (position: Position) => void, adjustOptions?: AdjustOptions) => void;
+
+export { _default as DashboardItem,  };