mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-02-17 17:40:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

delete row

Browse Source
This commit is contained in:
Bowen Tan 2021-09-09 15:13:11 +08:00
parent 2f56b4b5b1
commit 65c4c44816
3 changed files with 142 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/runtime/example/table/dynamic.html
View File

@ -29,21 +29,51 @@
type: 'chakra_ui/v1/table',
properties: {
size: 'sm',
data: '{{ table.query.data }}',
data: '{{ table.fetchUsersQuery.data }}',
majorKey: 'id',
rowsPerPage: 5,
columns: [
{
key: 'id',
title: 'ID',
type: 'text',
},
{
key: 'title',
title: 'Title',
key: 'name',
title: 'Name',
type: 'text',
},
{
key: 'body',
title: 'Content',
key: 'avatar',
title: 'Avatar',
type: 'image',
},
{
key: 'company',
title: 'Company',
type: 'text',
},
{
key: 'email',
title: 'Email',
type: 'text',
},
{
key: 'operation',
title: 'Operation',
type: 'button',
buttonConfig: {
text: 'Delete',
events: [
{
componentId: 'table',
method: {
name: 'triggerFetch',
parameters: 'deleteUserQuery',
},
},
],
},
},
],
},
@ -60,12 +90,32 @@
{
type: 'core/v1/fetch',
properties: {
name: 'query',
url: 'https://jsonplaceholder.typicode.com/posts?userId=1',
name: 'fetchUsersQuery',
url: 'https://61373521eac1410017c18209.mockapi.io/users',
method: 'get',
lazy: false,
},
},
{
type: 'core/v1/fetch',
properties: {
name: 'deleteUserQuery',
url: 'https://61373521eac1410017c18209.mockapi.io/users/{{ table.selectedItem ? table.selectedItem.id : "" }}',
method: 'delete',
lazy: true,
onComplete: [
{
componentId: 'table',
method: {
name: 'triggerFetch',
parameters: 'fetchUsersQuery',
},
wait: {},
disabled: 'false',
},
],
},
},
],
},
],

89
packages/runtime/src/components/chakra-ui/Table/Table.tsx
View File

@ -1,10 +1,19 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { sortBy } from 'lodash';
import { Table as BaseTable, Thead, Tr, Th, Tbody, Td } from '@chakra-ui/react';
import {
Table as BaseTable,
Thead,
Tr,
Th,
Tbody,
Td,
Button,
} from '@chakra-ui/react';
import { ComponentImplementation } from '../../../registry';
import { createComponent } from '@meta-ui/core';
import { Static, Type } from '@sinclair/typebox';
import { TablePagination } from './Pagination';
import { apiService } from '../../../api-service';
function normalizeData(data: Static<typeof DataPropertySchema>): {
normalizedData: Array<Record<string, string>>;
@ -59,7 +68,7 @@ const Table: ComponentImplementation<{
currentPage * rowsPerPage + rowsPerPage
);
const onClickRow = useCallback(
const onClickItem = useCallback(
item => {
setSelectedItem(item);
mergeState({ selectedItem: item });
@ -102,9 +111,14 @@ const Table: ComponentImplementation<{
<Tr
key={item[majorKey]}
bgColor={isSelected ? 'gray' : undefined}
onClick={() => onClickRow(item)}>
{columns.map(({ key }) => (
<Td key={key}>{item[key] ?? '-'}</Td>
onClick={() => onClickItem(item)}>
{columns.map(column => (
<TableTd
key={column.key}
item={item}
column={column}
onClickItem={() => onClickItem(item)}
/>
))}
</Tr>
);
@ -120,6 +134,41 @@ const Table: ComponentImplementation<{
);
};
const TableTd: React.FC<{
item: any;
column: Static<typeof ColumnSchema>;
onClickItem: () => void;
}> = props => {
const { item, column, onClickItem } = props;
switch (column.type) {
case 'image':
return (
<Td>
<img src={item[column.key]} />
</Td>
);
case 'button':
const onClick = () => {
onClickItem();
column.buttonConfig.events.forEach(event => {
apiService.send('uiMethod', {
componentId: event.componentId,
name: event.method.name,
parameters: event.method.parameters,
});
});
};
return (
<Td>
<Button onClick={onClick}>{column.buttonConfig.text}</Button>
</Td>
);
default:
return <Td>{item[column.key]}</Td>;
}
};
const MajorKeyPropertySchema = Type.String();
const RowsPerPagePropertySchema = Type.Number();
const DataPropertySchema = Type.Array(Type.Any());
@ -130,14 +179,34 @@ const SizePropertySchema = Type.KeyOf(
lg: Type.String(),
})
);
const ColumnsPropertySchema = Type.Array(
const TdTypeSchema = Type.KeyOf(
Type.Object({
key: Type.String(),
title: Type.String(),
// displayValue: Type.String(),
// type: Type.String(),// text,image,button...
text: Type.String(),
image: Type.String(),
button: Type.String(),
})
);
const ColumnSchema = Type.Object({
key: Type.String(),
title: Type.String(),
// displayValue: Type.String(),
type: TdTypeSchema,
buttonConfig: Type.Object({
text: Type.String(),
events: Type.Array(
Type.Object({
componentId: Type.String(),
method: Type.Object({
name: Type.String(),
parameters: Type.Any(),
}),
})
),
}),
});
const ColumnsPropertySchema = Type.Array(ColumnSchema);
const StateSchema = Type.Object({});

11
packages/runtime/src/traits/core/fetch.tsx
View File

@ -1,6 +1,6 @@
import { createTrait } from '@meta-ui/core';
import { Static, Type } from '@sinclair/typebox';
import { globalHandlerMap } from '../../handler';
import { apiService } from '../../api-service';
import { TraitImplementation } from '../../registry';
import { stateStore } from '../../store';
@ -62,10 +62,11 @@ const useFetchTrait: TraitImplementation<FetchPropertySchema> = ({
},
});
onComplete?.forEach(event => {
const hanlderMap = globalHandlerMap.get(event.componentId);
if (hanlderMap) {
hanlderMap[event.method.name](event.method.parameters);
}
apiService.send('uiMethod', {
componentId: event.componentId,
name: event.method.name,
parameters: event.method.parameters,
});
});
} else {
// TODO: Add FetchError class and remove console info