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", "jest": "^29.5.0",
"nanoid": "^4.0.0", "nanoid": "^4.0.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4", "react-error-boundary": "^3.1.4",
"react-i18next": "^12.2.0", "react-i18next": "^12.2.0",
@ -47,6 +48,7 @@
"@types/is-hotkey": "^0.1.7", "@types/is-hotkey": "^0.1.7",
"@types/node": "^18.7.10", "@types/node": "^18.7.10",
"@types/react": "^18.0.15", "@types/react": "^18.0.15",
"@types/react-beautiful-dnd": "^13.1.3",
"@types/react-dom": "^18.0.6", "@types/react-dom": "^18.0.6",
"@types/utf8": "^3.0.1", "@types/utf8": "^3.0.1",
"@typescript-eslint/eslint-plugin": "^5.51.0", "@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 { NewBoardBlock } from './NewBoardBlock';
import { useDatabase } from '../_shared/database-hooks/useDatabase'; import { useDatabase } from '../_shared/database-hooks/useDatabase';
import { ViewLayoutTypePB } from '@/services/backend'; import { ViewLayoutTypePB } from '@/services/backend';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
export const Board = ({ viewId }: { viewId: string }) => { export const Board = ({ viewId }: { viewId: string }) => {
const { controller, rows, groups } = useDatabase(viewId, ViewLayoutTypePB.Board); const { controller, rows, groups } = useDatabase(viewId, ViewLayoutTypePB.Board);
@ -22,24 +23,31 @@ export const Board = ({ viewId }: { viewId: string }) => {
<SearchInput /> <SearchInput />
</div> </div>
</div> </div>
<div className={'relative w-full flex-1 overflow-auto'}> <DragDropContext onDragEnd={(res) => console.log(res)}>
<div className={'absolute flex h-full flex-shrink-0 items-start justify-start gap-4'}> <div className={'relative w-full flex-1 overflow-auto'}>
{controller && <div className={'absolute flex h-full flex-shrink-0 items-start justify-start gap-4'}>
groups && {controller &&
groups.map((group, index) => ( groups &&
<BoardBlock groups.map((group, index) => (
key={index} <Droppable droppableId={group.groupId} key={index}>
viewId={viewId} {(provided, snapshot) => (
controller={controller} <div className={'h-full'} {...provided.droppableProps} ref={provided.innerRef}>
rows={group.rows} <BoardBlock
title={group.name} key={index}
allRows={rows} viewId={viewId}
/> controller={controller}
))} rows={group.rows}
title={group.name}
<NewBoardBlock onClick={() => console.log('new block')}></NewBoardBlock> allRows={rows}
/>
</div>
)}
</Droppable>
))}
<NewBoardBlock onClick={() => console.log('new block')}></NewBoardBlock>
</div>
</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 { RowInfo } from '../../stores/effects/database/row/row_cache';
import { DatabaseController } from '../../stores/effects/database/database_controller'; import { DatabaseController } from '../../stores/effects/database/database_controller';
import { RowPB } from '@/services/backend'; import { RowPB } from '@/services/backend';
import { Draggable } from 'react-beautiful-dnd';
export const BoardBlock = ({ export const BoardBlock = ({
viewId, viewId,
@ -38,7 +39,13 @@ export const BoardBlock = ({
{rows.map((row_pb, index) => { {rows.map((row_pb, index) => {
const row = allRows.find((r) => r.row.id === row_pb.id); const row = allRows.find((r) => r.row.id === row_pb.id);
return row ? ( 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> <span key={index}></span>
); );