DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Early iteration of non-virtual list

Browse Source
This commit is contained in:
knownotunknown
2024-02-14 17:55:19 -06:00
parent 776cab9297
commit 80148ba0ff
1 changed files with 50 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/views/components/common/List/List.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useCallback, ReactElement } from 'react'; import React, { useState, ReactElement, useCallback } from 'react';
import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd'; import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
import { FixedSizeList, areEqual } from 'react-window'; import { FixedSizeList, areEqual } from 'react-window';
@@ -12,8 +12,8 @@ import { FixedSizeList, areEqual } from 'react-window';
* Props for the List component. * Props for the List component.
*/ */
export interface ListProps { export interface ListProps {
draggableElements: any[]; // Will later define draggableElements based on what types draggableElements: any[]; // Will later define draggableElements based on what types
// of components are draggable. // of components are draggable.
itemHeight: number; itemHeight: number;
listHeight: number; listHeight: number;
listWidth: number; listWidth: number;
@@ -35,7 +35,7 @@ function reorder(list: { id: string, content: ReactElement }[], startIndex: numb
return result; return result;
} }
function getStyle({ provided, style, isDragging, gap }) { function getStyle({ provided, style /* , isDragging, gap */ }) {
const combined = { const combined = {
...style, ...style,
...provided.draggableProps.style ...provided.draggableProps.style
@@ -44,12 +44,12 @@ function getStyle({ provided, style, isDragging, gap }) {
return combined; return combined;
} }
function Item({ provided, item, style, isDragging, gap }) { function Item({ provided, item, style, isDragging/* , gap */ }) {
return ( return (
<div <div
{...provided.draggableProps} {...provided.draggableProps}
ref={provided.innerRef} ref={provided.innerRef}
style={getStyle({ provided, style, isDragging, gap })} style={getStyle({ provided, style/* , isDragging, gap */ })}
className={`item ${isDragging ? "is-dragging" : ""}`} className={`item ${isDragging ? "is-dragging" : ""}`}
> >
{React.cloneElement(item.content, {dragHandleProps: provided.dragHandleProps})} {React.cloneElement(item.content, {dragHandleProps: provided.dragHandleProps})}
@@ -103,10 +103,10 @@ const List: React.FC<ListProps> = ( { draggableElements, itemHeight, listHeight,
); );
setItems(newItems as { id: string, content: React.ReactElement }[]); setItems(newItems as { id: string, content: React.ReactElement }[]);
}, [items]); }, [items]);
return ( return (
<div style={{ overflow: 'hidden', width: listWidth, height: listHeight }}> <div style={{ overflow: 'hidden', width: listWidth }}>
<DragDropContext onDragEnd = {onDragEnd}> <DragDropContext onDragEnd = {onDragEnd}>
<div style = {{ <div style = {{
display: "flex", display: "flex",
@@ -115,7 +115,7 @@ const List: React.FC<ListProps> = ( { draggableElements, itemHeight, listHeight,
}}> }}>
<Droppable <Droppable
droppableId="droppable" droppableId="droppable"
mode="virtual" /* mode="virtual" */
direction="vertical" direction="vertical"
renderClone={(provided, snapshot, rubric) => { renderClone={(provided, snapshot, rubric) => {
let { style } = provided.draggableProps; let { style } = provided.draggableProps;
@@ -128,17 +128,20 @@ const List: React.FC<ListProps> = ( { draggableElements, itemHeight, listHeight,
.split(',') .split(',')
.map((v) => parseInt(v, 10)); .map((v) => parseInt(v, 10));
// const minTranslateY = -1 * rubric.source.index * itemHeight; /*
// const maxTranslateY = (items.length - rubric.source.index - 1) * itemHeight; const minTranslateY = -1 * rubric.source.index * itemHeight;
// if (y < minTranslateY) { const maxTranslateY = (items.length - rubric.source.index - 1) * itemHeight;
// } if (y < minTranslateY) {
// else if (y > maxTranslateY) {
// } }
// else { else if (y > maxTranslateY) {
// } }
else {
}
*/
style.transform = `translate(0px, ${y}px)`; // Apply constrained y value style.transform = `translate(0px, ${y}px)`; // Apply constrained y value
} }
@@ -151,22 +154,40 @@ const List: React.FC<ListProps> = ( { draggableElements, itemHeight, listHeight,
style = {{ style = {{
style style
}} }}
gap = {gap} /* gap = {gap} */
/> />
)} )}
} }
> >
{provided => ( {(provided) => (
<FixedSizeList <div
height={listHeight} {...provided.droppableProps}
itemCount={items.length} ref={provided.innerRef}
itemSize={itemHeight} style={{ width: `${listWidth}px` }}
width={listWidth} className="space-y-2"
outerRef={provided.innerRef} >
itemData={{ items, gap }} {items.map((item, index) => (
> <Draggable key={item.id} draggableId={item.id} index={index}>
{Row} {(provided, snapshot) => (
</FixedSizeList> <div
ref={provided.innerRef}
key={item.id}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
marginBottom: '8px',
background: snapshot.isDragging ? '#f4f4f4' : 'transparent',
}}
className="p-2"
>
{item.content}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)} )}
</Droppable> </Droppable>
</div> </div>