@magicbe/design
Version:
React + Antd Drag Drop Visual design
56 lines (55 loc) • 2.43 kB
TypeScript
import React, { ReactNode } from "react";
import { Schema } from "../utils/schema";
import { WidgetFunctionComponent } from "../widgets/types";
import { DATA_DROP, DATA_DROP_WAPPER, DATA_WIDGET } from "../utils/const";
export type widgetsType<T = any> = Record<string, React.FC<T> | React.ComponentType<T>>;
export type injectPoint = "top" | "bottom";
export interface HoverAttrs {
[DATA_DROP]?: string;
[DATA_DROP_WAPPER]?: string;
[DATA_WIDGET]?: string;
}
export interface DesignContextProps {
/**当前聚焦属性 */
hoverAttrs?: HoverAttrs;
setHoverAttrs: (attrs?: HoverAttrs) => void;
/**拖放位置的元素 */
dropWidget?: string;
setDropWidget: (widget?: string) => void;
/**拖拽对象 */
dragWidget?: Record<string, any>;
setDragWidget: (prop?: Record<string, any>) => void;
/**拖拽的数据 */
dragSchemas?: Schema[];
setDragSchemas: (schemas?: Schema[]) => void;
/**数据主体 */
schemas: Schema[];
setSchemas: (schemas: Schema[]) => void;
/**当前选中的数据id */
activeSchemaKey?: string;
setActiveSchemaKey: (key?: string) => void;
onDrag?: (widget?: Record<string, any>) => void;
}
/**上下文容器 */
export declare const DesignContext: React.Context<DesignContextProps>;
export declare const useDesignContext: () => DesignContextProps;
export interface DesignProviderProps {
children?: ReactNode;
value: Schema[];
onChange?: (value: Schema[]) => void;
onDrag?: (widget?: Record<string, any>) => void;
onHoverAttrsChange?: (attrs?: HoverAttrs) => void;
onDragWidgetChange?: (prop?: Record<string, any>) => void;
onDragSchemasChange?: (schemas?: Schema[]) => void;
onDropWidgetChange?: (widget?: string) => void;
onActiveSchemaKeyChange?: (key?: string) => void;
}
export interface DesignProviderRef {
setHoverAttrs: React.Dispatch<React.SetStateAction<HoverAttrs | undefined>>;
setDragWidget: React.Dispatch<React.SetStateAction<WidgetFunctionComponent | undefined>>;
setDragSchemas: React.Dispatch<React.SetStateAction<Schema[] | undefined>>;
setDropWidget: React.Dispatch<React.SetStateAction<string | undefined>>;
setActiveSchemaKey: React.Dispatch<React.SetStateAction<string | undefined>>;
}
declare const DesignProvider: React.ForwardRefExoticComponent<DesignProviderProps & React.RefAttributes<DesignProviderRef>>;
export default DesignProvider;