@univerjsdesigninterfacesIdraggablelistprops

@univerjs/design v0.5.4

Interface: IDraggableListProps<T>

Defined in: submodules/univer/packages/design/src/components/draggable-list/DraggableList.tsx:23

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

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

Calls when some element has been dropped

Parameters

ParameterType
layoutLayout[]
itemLayout
eEvent

Returns

void

Inherited from

Omit.onDrop

onDropDragOver()?

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

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

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
IdialogpropsIdropdownlegacyprops