Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: import beautiful dnd

Browse Source
This commit is contained in:
ascarbek 2023-03-13 17:41:51 +06:00
parent 88e0f6a32c
commit a66d457f10
3 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/appflowy_tauri/package.json
View File

@ -28,6 +28,7 @@
"jest": "^29.5.0",
"nanoid": "^4.0.0",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-i18next": "^12.2.0",
@ -47,6 +48,7 @@
"@types/is-hotkey": "^0.1.7",
"@types/node": "^18.7.10",
"@types/react": "^18.0.15",
"@types/react-beautiful-dnd": "^13.1.3",
"@types/react-dom": "^18.0.6",
"@types/utf8": "^3.0.1",
"@typescript-eslint/eslint-plugin": "^5.51.0",

42
frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx
View File

@ -4,6 +4,7 @@ import { BoardBlock } from './BoardBlock';
import { NewBoardBlock } from './NewBoardBlock';
import { useDatabase } from '../_shared/database-hooks/useDatabase';
import { ViewLayoutTypePB } from '@/services/backend';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
export const Board = ({ viewId }: { viewId: string }) => {
const { controller, rows, groups } = useDatabase(viewId, ViewLayoutTypePB.Board);
@ -22,24 +23,31 @@ export const Board = ({ viewId }: { viewId: string }) => {
<SearchInput />
</div>
</div>
<div className={'relative w-full flex-1 overflow-auto'}>
<div className={'absolute flex h-full flex-shrink-0 items-start justify-start gap-4'}>
{controller &&
groups &&
groups.map((group, index) => (
<BoardBlock
key={index}
viewId={viewId}
controller={controller}
rows={group.rows}
title={group.name}
allRows={rows}
/>
))}
<NewBoardBlock onClick={() => console.log('new block')}></NewBoardBlock>
<DragDropContext onDragEnd={(res) => console.log(res)}>
<div className={'relative w-full flex-1 overflow-auto'}>
<div className={'absolute flex h-full flex-shrink-0 items-start justify-start gap-4'}>
{controller &&
groups &&
groups.map((group, index) => (
<Droppable droppableId={group.groupId} key={index}>
{(provided, snapshot) => (
<div className={'h-full'} {...provided.droppableProps} ref={provided.innerRef}>
<BoardBlock
key={index}
viewId={viewId}
controller={controller}
rows={group.rows}
title={group.name}
allRows={rows}
/>
</div>
)}
</Droppable>
))}
<NewBoardBlock onClick={() => console.log('new block')}></NewBoardBlock>
</div>
</div>
</div>
</DragDropContext>
</>
);
};

9
frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx
View File

@ -4,6 +4,7 @@ import { BoardCard } from './BoardCard';
import { RowInfo } from '../../stores/effects/database/row/row_cache';
import { DatabaseController } from '../../stores/effects/database/database_controller';
import { RowPB } from '@/services/backend';
import { Draggable } from 'react-beautiful-dnd';
export const BoardBlock = ({
viewId,
@ -38,7 +39,13 @@ export const BoardBlock = ({
{rows.map((row_pb, index) => {
const row = allRows.find((r) => r.row.id === row_pb.id);
return row ? (
<BoardCard viewId={viewId} controller={controller} key={index} rowInfo={row}></BoardCard>
<Draggable draggableId={row_pb.id} index={index}>
{(provided, snapshot) => (
<div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
<BoardCard viewId={viewId} controller={controller} key={index} rowInfo={row}></BoardCard>
</div>
)}
</Draggable>
) : (
<span key={index}></span>
);