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: create cell component for each field type

Browse Source
This commit is contained in:
ascarbek 2023-03-06 17:39:11 +06:00
parent 7ca4da0966
commit 3635b6b63e
5 changed files with 37 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts
View File

@ -2,31 +2,18 @@ import { CellIdentifier } from '../../../stores/effects/database/cell/cell_bd_sv
import { CellCache } from '../../../stores/effects/database/cell/cell_cache';
import { FieldController } from '../../../stores/effects/database/field/field_controller';
import { CellControllerBuilder } from '../../../stores/effects/database/cell/controller_builder';
import { DateCellDataPB, FieldType, SelectOptionCellDataPB } from '../../../../services/backend';
import { DateCellDataPB, SelectOptionCellDataPB, URLCellDataPB } from '../../../../services/backend';
import { useState } from 'react';
export const useCell = (cellIdentifier: CellIdentifier, cellCache: CellCache, fieldController: FieldController) => {
const [data, setData] = useState<string[]>([]);
const [data, setData] = useState<DateCellDataPB | URLCellDataPB | SelectOptionCellDataPB | string | undefined>();
const loadCell = async () => {
const builder = new CellControllerBuilder(cellIdentifier, cellCache, fieldController);
const cellController = builder.build();
cellController.subscribeChanged({
onCellChanged: (value) => {
if (
cellIdentifier.fieldType === FieldType.Checklist ||
cellIdentifier.fieldType === FieldType.MultiSelect ||
cellIdentifier.fieldType === FieldType.SingleSelect
) {
const v = value.unwrap() as SelectOptionCellDataPB;
setData(v.select_options.map((option) => option.id));
} else if (cellIdentifier.fieldType === FieldType.DateTime) {
const v = value.unwrap() as DateCellDataPB;
setData([v.date]);
} else {
const v = value.unwrap() as string;
setData([v]);
}
setData(value.unwrap());
},
});

25
frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx
View File

@ -2,7 +2,11 @@ import { useCell } from '../_shared/database-hooks/useCell';
import { CellIdentifier } from '../../stores/effects/database/cell/cell_bd_svc';
import { CellCache } from '../../stores/effects/database/cell/cell_cache';
import { FieldController } from '../../stores/effects/database/field/field_controller';
import {useEffect} from "react";
import { useEffect } from 'react';
import { DateCellDataPB, FieldType, SelectOptionCellDataPB } from '../../../services/backend';
import { BoardOptionsCell } from './BoardOptionsCell';
import { BoardDateCell } from './BoardDateCell';
import { BoardTextCell } from './BoardTextCell';
export const BoardCell = ({
cellIdentifier,
@ -16,8 +20,21 @@ export const BoardCell = ({
const { loadCell, data } = useCell(cellIdentifier, cellCache, fieldController);
useEffect(() => {
void (async () => {
await loadCell()
await loadCell();
})();
}, [])
return <div>{data}</div>;
}, []);
return (
<>
{cellIdentifier.fieldType === FieldType.SingleSelect ||
cellIdentifier.fieldType === FieldType.MultiSelect ||
cellIdentifier.fieldType === FieldType.Checklist ? (
<BoardOptionsCell value={data as SelectOptionCellDataPB | undefined}></BoardOptionsCell>
) : cellIdentifier.fieldType === FieldType.DateTime ? (
<BoardDateCell value={data as DateCellDataPB | undefined}></BoardDateCell>
) : (
<BoardTextCell value={data as string | undefined}></BoardTextCell>
)}
</>
);
};

5
frontend/appflowy_tauri/src/appflowy_app/components/board/BoardDateCell.tsx Normal file
View File

@ -0,0 +1,5 @@
import { DateCellDataPB } from '../../../services/backend';
export const BoardDateCell = ({ value }: { value: DateCellDataPB | undefined }) => {
return <div>{value?.date || ''}</div>;
};

5
frontend/appflowy_tauri/src/appflowy_app/components/board/BoardOptionsCell.tsx Normal file
View File

@ -0,0 +1,5 @@
import { SelectOptionCellDataPB, SelectOptionColorPB } from '../../../services/backend';
export const BoardOptionsCell = ({ value }: { value: SelectOptionCellDataPB | undefined }) => {
return <>{value?.select_options?.map((option, index) => <div key={index}>{option?.name || ''}</div>) || ''}</>;
};

3
frontend/appflowy_tauri/src/appflowy_app/components/board/BoardTextCell.tsx Normal file
View File

@ -0,0 +1,3 @@
export const BoardTextCell = ({ value }: { value: string | undefined }) => {
return <div>{value || ''}</div>;
};