65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import {Atom} from '@reatom/core';
|
|
import {useAtom} from '@reatom/react';
|
|
import {head} from 'lodash';
|
|
import Table, {ColumnsType} from 'antd/lib/table';
|
|
import React, {FC, memo, useCallback, useEffect, useMemo} from 'react';
|
|
import {CrudService} from '../../services/CrudService';
|
|
import {EntityMode} from '../../types/EntityModes';
|
|
import {EntityWithId} from '../../api/CrudAPI';
|
|
|
|
type Options<T> = {
|
|
entityListAtom: Atom<T[]>;
|
|
service: CrudService<T>;
|
|
};
|
|
|
|
export const createEntityTable = function <T> ({
|
|
entityListAtom,
|
|
service,
|
|
}: Options<T>): FC {
|
|
return memo(() => {
|
|
const entityList = useAtom(entityListAtom);
|
|
|
|
useEffect(() => {
|
|
service.loadEntityList();
|
|
}, []);
|
|
|
|
const onRow = useCallback((entity: EntityWithId<T>) => ({
|
|
onClick: () => {
|
|
service.navigate(EntityMode.Show, entity.id);
|
|
},
|
|
}), []);
|
|
|
|
const columns: ColumnsType<EntityWithId<T>> = useMemo(() => {
|
|
const entity = head(entityList);
|
|
if (entity) {
|
|
return Object.keys(entity).map(field => {
|
|
return {
|
|
title: field,
|
|
dataIndex: field,
|
|
key: field,
|
|
};
|
|
});
|
|
}
|
|
return [];
|
|
}, [entityList]);
|
|
|
|
const dataSource = useMemo(() => {
|
|
return entityList.map((entity: any) => {
|
|
return {
|
|
...entity,
|
|
key: entity.id,
|
|
};
|
|
});
|
|
}, [entityList]);
|
|
|
|
return (
|
|
<Table
|
|
columns={columns}
|
|
dataSource={dataSource}
|
|
onRow={onRow}
|
|
/>
|
|
);
|
|
});
|
|
};
|
|
|