tachybase_todo/packages/app/src/components/form.fields/draggable-table/index.tsx
2021-01-25 10:22:24 +08:00

90 lines
2.6 KiB
TypeScript

import React, { useState } from 'react'
import { connect } from '@formily/react-schema-renderer'
import moment from 'moment'
import { Select, Table } from 'antd'
import get from 'lodash/get';
import {
mapStyledProps,
mapTextComponent,
compose,
isStr,
isArr
} from '../shared'
import { useRequest } from 'umi';
import api from '@/api-client';
import { Spin } from '@nocobase/client'
import { fields2columns, components } from '@/components/views/SortableTable'
function DraggableTableComponent(props) {
const { mode = 'showInDetail', value, onChange, disabled, rowKey = 'id', fields = [], resourceName, associatedKey, filter, labelField, valueField = 'id', objectValue, placeholder } = props;
const { data = [], loading = true, mutate } = useRequest(() => {
return api.resource(resourceName).list({
associatedKey,
filter,
perPage: -1,
});
}, {
refreshDeps: [resourceName, associatedKey]
});
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const onTableChange = (selectedRowKeys: React.ReactText[]) => {
onChange(selectedRowKeys);
}
const tableProps: any = {};
tableProps.rowSelection = {
selectedRowKeys: Array.isArray(value) ? value : data.map(item => item[rowKey]),
onChange: onTableChange,
}
const dataSource = data.filter(item => {
return get(item, ['component', mode])
});
// const sortIds = get(value, 'sort')||[];
// let values = [];
// sortIds.forEach(id => {
// const item = dataSource.find(item => item[rowKey] === id);
// if (item) {
// values.push(item);
// }
// });
// if (values.length === 0) {
// values = dataSource;
// }
return (
<>
<Table
size={'small'}
dataSource={dataSource}
rowKey={rowKey}
loading={loading}
columns={fields2columns(fields||[])}
pagination={false}
{...tableProps}
// components={components({
// data: {
// list: data,
// },
// mutate: (values) => {
// onChange({
// sort: values.list.map(item => item[rowKey]),
// selectedRowKeys: get(value, 'selectedRowKeys')||data.map(item => item[rowKey]),
// });
// mutate(values.list);
// // setDataSource(values.list);
// console.log('mutate', values);
// },
// rowKey,
// onMoved: async ({resourceKey, target}) => {
// }
// })}
/>
</>
);
}
export const DraggableTable = connect({
getProps: mapStyledProps,
getComponent: mapTextComponent,
})(DraggableTableComponent)
export default DraggableTable