@univerjsdesigninterfacesIdraggablelistprops

@univerjs/design v0.5.0-beta.1 • Docs

Interface: IDraggableListProps<T>

Extends

  • Omit<RGL.ReactGridLayoutProps, "layout" | "onLayoutChange" | "cols" | "isResizable">

Type Parameters

Type Parameter
T

Properties

PropertyTypeDescriptionInherited fromDefined in
allowOverlap?booleanIf true, grid can be placed one over the other.Omit.allowOverlapnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:213
autoSize?booleanIf true, the container height swells and contracts to fit contents.Omit.autoSizenode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:130
children?ReactNode-Omit.childrennode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:302
className?stringThe classname to add to the root element.Omit.classNamenode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:114
compactType?null | "horizontal" | "vertical"Compaction type.Omit.compactTypenode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:150
containerPadding?[number, number]Padding inside the container [x, y] in px.Omit.containerPaddingnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:317
draggableCancel?stringA CSS selector for tags that will not be draggable. For example: draggableCancel: '.MyNonDraggableAreaClassName' If you forget the leading. it will not work. "".react-resizable-handle” is always prepended to this value.Omit.draggableCancelnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:138
draggableHandle?stringA CSS selector for tags that will act as the draggable handle. For example: draggableHandle: '.MyDragHandleClassName' If you forget the leading . it will not work.Omit.draggableHandlenode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:145
droppingItem?{ h: number; i: string; w: number; }Configuration of a dropping element. Dropping element is a “virtual” element which appears when you drag over some element from outside.Omit.droppingItemnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:161
droppingItem.hnumber--node_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:164
droppingItem.istring--node_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:162
droppingItem.wnumber--node_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:163
idKeykeyof T--submodules/univer/packages/design/src/components/draggable-list/DraggableList.tsx:26
innerRef?Ref<HTMLDivElement>Ref for getting a reference for the grid’s wrapping div. You can use this instead of a regular ref and the deprecated `ReactDOM.findDOMNode()“ function.Omit.innerRefnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:298
isBounded?booleanIf true and draggable, all items will be moved only within grid.Omit.isBoundednode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:196
isDraggable?booleanIf set to false it will disable dragging on all children.Omit.isDraggablenode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:186
isDroppable?booleanIf true, droppable elements (with draggable={true} attribute) can be dropped on the grid. It triggers “onDrop” callback with position and event object as parameters. It can be useful for dropping an element in a specific position NOTE: In case of using Firefox you should add onDragStart={e => e.dataTransfer.setData('text/plain', '')} attribute along with draggable={true} otherwise this feature will work incorrect. onDragStart attribute is required for Firefox for a dragging initialization See https://bugzilla.mozilla.org/show_bug.cgi?id=568313Omit.isDroppablenode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:231
itemRender(item: T, index: number) => ReactNode--submodules/univer/packages/design/src/components/draggable-list/DraggableList.tsx:27
listT[]--submodules/univer/packages/design/src/components/draggable-list/DraggableList.tsx:24
margin?[number, number]Margin between items [x, y] in px.Omit.marginnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:312
maxRows?numberDefault Infinity, but you can specify a max here if you like. Note that this isn’t fully fleshed out and won’t error if you specify a layout that extends beyond the row capacity. It will, however, not allow users to drag/resize an item past the barrier. They can push items beyond the barrier, though. Intentionally not documented for this reason.Omit.maxRowsnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:179
onDrag?ItemCallbackCalls on each drag movement.Omit.onDragnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:260
onDragStart?ItemCallbackCalls when drag starts.Omit.onDragStartnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:255
onDragStop?ItemCallbackCalls when drag is complete.Omit.onDragStopnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:265
onListChange(list: T[]) => void--submodules/univer/packages/design/src/components/draggable-list/DraggableList.tsx:25
onResize?ItemCallbackCalls when resize movement happens.Omit.onResizenode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:275
onResizeStart?ItemCallbackCalls when resize starts.Omit.onResizeStartnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:270
onResizeStop?ItemCallbackCalls when resize is complete.Omit.onResizeStopnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:280
preventCollision?booleanIf true, grid items won’t change position when being dragged over.Omit.preventCollisionnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:218
resizeHandle?ReactNode | (resizeHandle) => ReactNodeDefines custom component for resize handleOmit.resizeHandlenode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:250
resizeHandles?ResizeHandle[]Defines which resize handles should be rendered Allows for any combination of: ‘s’ - South handle (bottom-center) ‘w’ - West handle (left-center) ‘e’ - East handle (right-center) ‘n’ - North handle (top-center) ‘sw’ - Southwest handle (bottom-left) ‘nw’ - Northwest handle (top-left) ‘se’ - Southeast handle (bottom-right) ‘ne’ - Northeast handle (top-right)Omit.resizeHandlesnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:245
rowHeight?numberRows have a static height, but you can change this based on breakpoints if you like.Omit.rowHeightnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:155
style?CSSPropertiesInline-style object to pass to the root element.Omit.stylenode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:119
transformScale?numberIf parent DOM node of ResponsiveReactGridLayout or ReactGridLayout has “transform: scale(n)” css property, we should set scale coefficient to avoid render artefacts while dragging.Omit.transformScalenode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:208
useCSSTransforms?booleanUses CSS3 translate() instead of position top/left. This makes about 6x faster paint performance.Omit.useCSSTransformsnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:202
verticalCompact?booleanIf true, the layout will compact vertically.Omit.verticalCompactnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:170
width?numberThis allows setting the initial width on the server side. This is required unless using the HOC or similar.Omit.widthnode_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:125

Methods

onDrop()?

optional onDrop(
   layout, 
   item, 
   e): void

Calls when some element has been dropped

Parameters

ParameterType
layoutLayout[]
itemLayout
eEvent

Returns

void

Inherited from

Omit.onDrop

Defined in

node_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:285

onDropDragOver()?

optional onDropDragOver(e): undefined | false | {
  h: number;
  w: number;
}

Calls when an element is being dragged over the grid from outside as above. This callback should return an object to dynamically change the droppingItem size Return false to short-circuit the dragover

Parameters

ParameterType
eDragOverEvent

Returns

undefined | false | { h: number; w: number; }

Inherited from

Omit.onDropDragOver

Defined in

node_modules/.pnpm/@types+react-grid-layout@1.3.5/node_modules/@types/react-grid-layout/index.d.ts:292

IdialogpropsIdropdownprops