page-design-core

Install & Usage

npm install --save page-design-core

import {PageDesignCore} from 'page-design-core';

...

render(){
    return (
        <PageDesignCore>
        ...
        </PageDesignCore>
    );
}
...

PageDesignCore Options

children

ReactNode | (model: Model) => JSX.Element

defaultValue

Item[]

项目列表

value

Item[]

受控属性，项目列表

axis

"vertical" | "horizontal" | "both" 默认：vertical

影响DropItem的hoverDirection 计算方式。

为vertical时hoverDirection有效值为: "up" | "bottom" | "none"
为horizontal时hoverDirection有效值为: "left" | "right" | "none"
为both时hoverDirection有效值为: ""up" | "bottom" | left" | "right" | "none"

示例:

<DropItem>
{({hoverDirection}) => <div/>}
</DropItem>

commitAction

"auto" | "drop" 默认：auto

区别：

auto：拖拽过程中实时改变拖拽目标的位置
drop：拖拽过程中不改变位置，释放目标后改变拖拽目标位置

如果设置为drop时，通常需要配合hoverDirection来实现拖拽的视觉效果

idField

string 默认：id

如果指定属性不存在则会随机生成

pidField

string 默认：pid

如果指定属性不存在默认为null

onChange

(items: Item[]) => void

拖拽项目位置改变时触发

onDragStart

(e: DragStartEvent) => void

开始拖拽时触发

DragStartEvent.type 拖拽模式：add（新增模式，DragItem触发）或 sort （排序模式，DropItem触发）
DragStartEvent.item 拖拽项目
DragStartEvent.dom 拖拽项目 DOM 元素
DragStartEvent.component 拖拽项目对象
DragStartEvent.monitor 参考：http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor
DragStartEvent.model 数据模型对象 Model

onDragEnd

(e: DragEndEvent) => void

拖拽项目释放时触发，触发晚于onDrop

属性同onDragStart

onDropToItem

(e: DropToItemEvent) => void

拖拽项目释放到DropItem时触发

属性同onDragStart，另外两个属性：

DropEvent.target: Item 释放目标项目
DropEvent.targetDOM 释放目标 DOM 元素

onDropToContainer

(e: DropToContainerEvent) => void

拖拽项目释放到DropContainer时触发

属性同onDragStart，另外两个属性：

DropEvent.target: string | number | null 释放目标项目
DropEvent.targetDOM: HTMLElement 释放目标 DOM 元素

onDrop

(e: DropEvent) => void

拖拽项目释放到DropItem或DropContainer时触发

属性同onDragStart，另外两个属性：

DropEvent.target: Item | string | number | null 释放目标项目
DropEvent.targetDOM 释放目标 DOM 元素

注：当释放目标为DropContainer时DropEvent.target的类型为string | number | null，如果释放目标为DropItem是DropEvent.target的类型为Item

所以在接收时注意要对DropEvent.target类型进行判断，eg: isObject(target) ? xx : yy

onDragHoverContainer

(e: DragHoverContainerEvent) => void

拖拽项目经过DropContainer时触发

onDragHoverItem

(e: DragHoverItemEvent) => void

拖拽项目经过DropItem时触发

onDragHover

(e: DragHoverEvent) => void

拖拽项目经过DropContainer或DropItem时触发

属性同onDrop

DropContainer Options

id

string | number | null 默认：null

容器 ID，当项目释放到当前容器时，该项目的pid会自动设置为当前容器的id

当DropContainer存在嵌套的情况下，子DropContainer的id必须设置

children

ReactNode | (props: DropContainerRenderProps) => JSX.Element

children 为函数时，props参数说明：

props.monitor 参考：http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor
props.isOver: boolean 拖拽项目是否经过当前组件，效果同monitor.isOver()
props.isStrictlyOver: boolean 拖拽项目是否经过当前组件（不进行冒泡），效果同monitor.isOver({ shallow: true })
props.model 数据模型对象 Model
props.connectDropTarget: (dom) => void 拖拽释放关联，使指定 DOM 元素具备接收drop能力。 eg: connectDropTarget(dom)
props.items: Item[] 当前容器的子项目，效果类似model.getChildren(id)，但不建议通过model的方式自行获取
props.canDrop: boolean 当前容器是否能接收目标 boolean

render

(props: DropContainerRenderProps) => JSX.Element

作用同children，优先级低于children

axis

作用同 Provider Options的axis，但DropContainer的优先级高

canDrop

(props: CanDropOptions) => boolean

限制DropContainer是否能接收拖拽项目

CanDropOptions.item 拖拽项目
CanDropOptions.dom 拖拽项目 DOM 元素
CanDropOptions.monitor 参考：http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor
CanDropOptions.model 数据模型对象 Model
CanDropOptions.component 当前DropContainer对象

注：canDrop 和 connectDropTarget 实现效果类似

hover

(props: CanDropOptions) => boolean

拖拽项经过容器时触发，包含冒泡，参数同 canDrop

注：是否经过当前组件时可通过monitor.isOver({ shallow: true }) 判断，否则就是通过冒泡响应

drop

(props: CanDropOptions) => boolean

拖拽释放到当前容器时触发，包含冒泡，参数同 canDrop

注：有可能是释放到当前容器下的子容器。monitor.didDrop()可判断

DropItem Options

item

Item 必填项目对象，

children

ReactNode | (props: DropItemRenderProps) => JSX.Element

children 为函数时，props属性说明：

item:Item 项目对象
isDragging: boolean 当前组件是否处于拖拽中
isOver: boolean 推拽中的项目是否正经过当前组件，可能是冒泡触发，效果同monitor.isOver()
isStrictlyOver: boolean 推拽中的项目是否正经过当前组件，效果同monitor.isOver({ shallow: true })
canDrop: boolean 当前组件是否能接收拖拽目标目标，只有使用了connectDropTarget才可能为true
hoverDirection: "up" | "down" | "left" | "right" | "none" 拖拽项目经过当前组件所在的位置，通过对角线进行分割的四块区域。受axis影响
isTmp: boolean 拖拽节点处于未提交状态，通常在拖拽DragItem时有效，如果不是自行操作 model，那么当前字段基本都为false
model: Model 数据模型对象
monitor: DragSourceMonitor 参考：http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor
connectDropTarget:dom => void 使指定 DOM 元素具备接收drop能力。
connectDragSource:dom => void 使指定 DOM 元素具备拖拽drag的能力。
connectDragPreview:dom => void 使用指定的 DOM 元素作为 drag的预览效果，如果不设置则使用系统默认，通常情况不需要设置，但下在配合DragLayer下一般使用一个透明图片作为占位符，例如: connectDragPreview(getEmptyImage())。
connectDragAndDrop:dom => void 使指定 DOM 元素具备 drag 和 drop 能力。

render

作用同children，优先级低于children

axis

作用同 Provider Options的axis，优先级最高

canDrop

作用同 DropContainer Options的canDrop

hover

作用同 DropContainer Options的hover

canDrag

(props: CanDragOptions) => boolean

DropItem是否能能拖拽，props属性如下：

monitor:DragSourceMonitor 参考：http://react-dnd.github.io/react-dnd/docs/api/drag-source-monitor
model: Model 数据模型对象
component: DropItem 当前DropItem对象

beginDrag

(props: BeginDragOptions) => void

当前组件拖拽前触发，属性作用同 DropContainer Options的canDrop

endDrag

(props: EndDragOptions) => void

当前组件拖拽结束后触发，触发时机晚于比drop，属性作用同 DropContainer Options的canDrop

DragItem Options

getInstance

() => Item 必填

当前组件拖拽时触发调用，需要返回一个Item实例。

children

ReactNode | (props: DragItemRenderProps) => JSX.Element

children 为函数时，props属性说明：

isDragging: boolean 当前组件是否处于拖拽中
model: Model 数据模型对象
monitor: DragSourceMonitor 参考：http://react-dnd.github.io/react-dnd/docs/api/drop-target-monitor
connectDragSource:dom => void 使指定 DOM 元素具备拖拽drag的能力。
connectDragPreview:dom => void 使用指定的 DOM 元素作为 drag的预览效果，如果不设置则使用系统默认，通常情况不需要设置，但下在配合DragLayer下一般使用一个透明图片作为占位符，例如: connectDragPreview(getEmptyImage())。

render

作用同children，优先级低于children

canDrag

作用同 DropItem Options的canDrag

beginDrag

作用同 DropItem Options的beginDrag

endDrag

作用同 DropItem Options的endDrag

DragLayer

ReactNode | (props: DragItemRenderProps) => JSX.Element

children 为函数时，props属性说明：

item: Item | null 如果不为null的情况，item 组件处于拖拽中
dom: HTMLElement | null 如果不为null的情况，为拖拽中组件的 DOM 元素
isDragging: boolean 组件是否处于拖拽中。
monitor: DragLayerMonitor 参考：http://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitor
initialClientOffset: Point | null 参考：http://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitor
initialSourceClientOffset: Point | null 参考：http://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitor
clientOffset: Point | null 参考：http://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitor
differenceFromInitialOffset: Point | null 参考：http://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitor
sourceClientOffset: Point | null 参考：http://react-dnd.github.io/react-dnd/docs/api/drag-layer-monitor

DropZone

当前组件辅助于拖拽时鼠标指针样式不变为 none，提升交互效果，通常紧跟 Provider以前使用，例如：

<PageDesignCore.Provider>
    <div>
        ...
    </div>
</PageDesignCore.Provider>

getEmptyImage

返回一个透明图片作为占位元素

useModel hook

获取数据模型对象

contains

Model Apis

model 类主要用于操作项目列表

getChildren(id: any) => Item[]

获取指定 id 的子项目列表

getItem(id: any) => Item | undefined

获取指定 id 的项目对象

isDragging(id?: any) => boolean

如果 id 不传代表检测当前是否处于拖拽中，如果传 id 则返回当前组件是否处于拖拽中

getDraggingItem(id: any) => Item | null

返回处于拖拽中的项目对象

removeItem(id: any) => void;

移除指定 id 的项目对象

addItem(item:Item, pid: any) => void;

添加项目

addItems(items: Item[], pid: any) => void;

批量添加项目

这里只列举了可能常用的 api，其他高级 api 建议自行处理。

export const EVENT_TYPE_ADD = "add";
export const EVENT_TYPE_SORT = "sort";

export const DRAG_DIR_UP = "up";
export const DRAG_DIR_DOWN = "down";
export const DRAG_DIR_LEFT = "left";
export const DRAG_DIR_RIGHT = "right";
export const DRAG_DIR_NONE = "none";

export const COMMIT_ACTION_AUTO = "auto";
export const COMMIT_ACTION_DROP = "drop";

export const AXIS_VERTICAL = "vertical";
export const AXIS_HORIZONTAL = "horizontal";
export const AXIS_BOTH = "both";

Types

type EventType = "add" | "sort";
type Axis = "vertical" | "horizontal" | "both";
type CommitAction = "auto" | "drop";
type HoverDirection = "up" | "down" | "left" | "right" | "none";

interface Point {
    x: number;
    y: number;
}

interface Item {
    id: string | number;
    pid: string | number | null;
    [propName: string]: any;
}

interface DragAndDropEvent {
    item: Item;
    dom: HTMLElement;
    component: any;
    monitor: DragSourceMonitor | DropTargetMonitor;
    model: Model;
}

interface DragStartEvent extends DragAndDropEvent {
    type: EventType;
}

interface DragEndEvent extends DragStartEvent {}

interface DropToItemEvent extends DragStartEvent {
    target: Item;
    targetDOM: HTMLElement;
}

interface DropToContainerEvent extends DragStartEvent {
    target: string | number | null;
    targetDOM: HTMLElement;
}

interface DropEvent extends DragStartEvent {
    target: Item | string | number | null;
    targetDOM: HTMLElement;
}

interface DragHoverItemEvent extends DropToItemEvent {}
interface DragHoverContainerEvent extends DropToContainerEvent {}
interface DragHoverEvent extends DropEvent {}

interface ProviderProps {
    backend: object;
    idField: string | "id";
    pidField: string | "pid";
    value?: Item[];
    defaultValue?: Item[];
    axis?: Axis;
    commitAction?: CommitAction;
    children?: React.ReactNode;
    onChange?: (items: Item[]) => void;
    onDragStart?: (e: DragStartEvent) => void;
    onDragEnd?: (e: DragEndEvent) => void;
    onDropToItem?: (e: DropToItemEvent) => void;
    onDropToContainer?: (e: DropToContainerEvent) => void;
    onDrop?: (e: DropEvent) => void;
    onDragHoverContainer?: (e: DragHoverContainerEvent) => void;
    onDragHoverItem?: (e: DragHoverItemEvent) => void;
    onDragHover?: (e: DragHoverEvent) => void;
}

type ModelProps = ProviderProps;

interface ProviderState {
    readonly scope: string;
    items: Item[];
}

interface CanDragOptions {
    monitor: DragSourceMonitor;
    model: Model;
    component: DragItem;
}

interface CanDropOptions extends CanDragOptions {
    item: Item;
    dom: HTMLElement;
}

interface DragHoverOptions extends CanDropOptions {}

interface BeginDragOptions extends CanDropOptions {}

interface EndDragOptions extends BeginDragOptions {}

interface DropOptions extends CanDropOptions {}

interface DragItemRenderProps {
    monitor: DragSourceMonitor;
    isDragging: boolean;
    model: Model;
    connectDragSource: ConnectDragSource;
    connectDragPreview: ConnectDragPreview;
}

type DragItemRender = (props: DragItemRenderProps) => JSX.Element;

interface DragItemProps {
    getInstance: () => Item;
    children?: React.ReactNode | DragItemRender;
    render?: DragItemRender;
    canDrag?: (props: CanDragOptions) => boolean;
    beginDrag?: (props: BeginDragOptions) => void;
    endDrag?: (props: EndDragOptions) => void;
}

interface DropItemRenderProps {
    monitor: DropTargetMonitor;
    hoverDirection: HoverDirection;
    isOver: boolean;
    isStrictlyOver: boolean;
    canDrop: boolean;
    isDragging: boolean;
    item: Item;
    isTmp: boolean;
    model: Model;
    connectDropTarget: ConnectDropTarget;
    connectDragSource: ConnectDragSource;
    connectDragAndDrop: (dom: HTMLElement) => void;
    connectDragPreview: ConnectDragPreview;
}

type DropItemRender = (props: DropItemRenderProps) => JSX.Element;

interface DropItemProps {
    item: Item;
    axis?: Axis;
    children?: React.ReactNode | DropItemRender;
    render?: DropItemRender;
    canDrop?: (props: CanDropOptions) => boolean;
    hover?: (props: DragHoverOptions) => void;
    canDrag?: (props: CanDragOptions) => void;
    beginDrag?: (props: BeginDragOptions) => void;
    endDrag?: (props: EndDragOptions) => void;
}

interface DropContainerRenderProps {
    monitor: DropTargetMonitor;
    canDrop: boolean;
    isOver: boolean;
    isStrictlyOver: boolean;
    model: Model;
    connectDropTarget: ConnectDropTarget;
    items: Items[];
    [propName: string]: any;
}

type DropContainerRender = (props: DropContainerRenderProps) => JSX.Element;

interface DropContainerProps {
    id: any;
    children?: React.ReactNode | DropContainerRender;
    axis?: Axis;
    render?: DropContainerRender;
    canDrop?: (props: CanDropOptions) => boolean;
    hover?: (props: DragHoverOptions) => void;
    drop?: (props: DropOptions) => void;
}

interface DragLayerRenderProps {
    item: Item | null;
    dom: HTMLElement | null;
    monitor: DragLayerMonitor;
    type: any;
    isDragging: boolean;
    initialClientOffset: Point | null;
    initialSourceClientOffset: Point | null;
    clientOffset: Point | null;
    differenceFromInitialOffset: Point | null;
    sourceClientOffset: Point | null;
}

type DragLayerRender = (props: DragLayerRenderProps) => JSX.Element;

interface DragLayerProps {
    children: React.ReactNode | DragLayerRender;
}

export class Provider extends React.Component<ProviderProps, ProviderState> {
    getModel(): Model;
    render(): JSX.Element;
}

export class Model extends React.Component<ModelProps, {}> {
    render(): JSX.Element;
}

export class DragItem extends React.Component<DragItemProps, {}> {
    render(): JSX.Element;
}

export class DropItem extends React.Component<DropItemProps, {}> {
    render(): JSX.Element;
}

export class DropContainer extends React.Component<DropContainerProps, {}> {
    render(): JSX.Element;
}

export class DragLayer extends React.Component<DragLayerProps, {}> {
    render(): JSX.Element;
}

export class DropZone extends React.Component<{}, {}> {
    render(): JSX.Element;
}

Files

README.md

Latest commit

History

README.md

File metadata and controls

page-design-core

Install & Usage

PageDesignCore Options

children

defaultValue

value

axis

commitAction

idField

pidField

onChange

onDragStart

onDragEnd

onDropToItem

onDropToContainer

onDrop

onDragHoverContainer

onDragHoverItem

onDragHover

DropContainer Options

id

children

render

axis

canDrop

hover

drop

DropItem Options

item

children

render

axis

canDrop

hover

canDrag

beginDrag

endDrag

DragItem Options

getInstance

children

render

canDrag

beginDrag

endDrag

DragLayer

DropZone

getEmptyImage

useModel hook

contains

Model Apis

getChildren(id: any) => Item[]

getItem(id: any) => Item | undefined

isDragging(id?: any) => boolean

getDraggingItem(id: any) => Item | null

removeItem(id: any) => void;

addItem(item:Item, pid: any) => void;

addItems(items: Item[], pid: any) => void;

Types