tachybase_todo/packages/app/src/components/views/Details.tsx
2021-01-26 17:12:31 +08:00

113 lines
3.2 KiB
TypeScript

import React from 'react';
import { Card, Descriptions, Button, Tooltip } from 'antd';
import { Actions } from '@/components/actions';
import api from '@/api-client';
import { useRequest } from 'umi';
import { Spin } from '@nocobase/client';
import Field from './Field';
import get from 'lodash/get';
import { useSize } from 'ahooks';
import { configResponsive, useResponsive } from 'ahooks';
import { InfoCircleOutlined } from '@ant-design/icons';
configResponsive({
small: 0,
middle: 800,
large: 1200,
});
function toGroups(fields: any[], { displayFields = [] }) {
const groups = [];
let group = {
title: undefined,
tooltip: undefined,
children: [],
};
fields.forEach(field => {
if (Array.isArray(displayFields) && displayFields.length && displayFields.indexOf(field.id) === -1) {
return null;
}
if (field.interface === 'description' && group.children.length) {
groups.push(group);
group = {
title: field.title,
tooltip: get(field, 'component.tooltip'),
children: [],
};
} else {
group.children.push(field);
}
});
if (group.children.length) {
groups.push(group);
}
return groups;
}
export function Details(props: any) {
const dom = document.querySelector('body');
const responsive = useResponsive();
console.log('Details.props', props)
const {
activeTab = {},
pageInfo = {},
schema,
resourceName,
associatedName,
associatedKey,
resourceKey,
} = props;
const { actions = [], actionDefaultParams = {}, fields = [] } = props.schema;
const { data = {}, loading, refresh } = useRequest(() => {
const name = associatedName ? `${associatedName}.${resourceName}` : resourceName;
return api.resource(name).get({
resourceKey,
associatedKey,
...actionDefaultParams,
});
});
let descriptionsProps: any = {
size: 'middle',
bordered: true,
}
if (responsive.small && !responsive.middle && !responsive.large) {
descriptionsProps = {
layout: 'vertical'
}
}
const { displayFields = [] } = activeTab;
const groups = toGroups(fields, { displayFields });
console.log({groups});
return (
<Card bordered={false}>
<Actions
{...props}
onFinish={() => {
refresh();
}}
style={{ marginBottom: 14 }}
actions={actions}
/>
{loading ? <Spin/> : groups.map(group => (
<Descriptions
// layout={'vertical'}
// size={'middle'}
// bordered
{...descriptionsProps}
title={group.title && <span>{group.title} {group.tooltip && <Tooltip title={group.tooltip}><InfoCircleOutlined /></Tooltip>}</span>}
column={1}>
{group.children.map((field: any) => {
if (Array.isArray(displayFields) && displayFields.length && displayFields.indexOf(field.id) === -1) {
return null;
}
return (
<Descriptions.Item label={field.title||field.name}>
<Field data={field} viewType={'descriptions'} schema={field} value={get(data, field.name)}/>
</Descriptions.Item>
)
})}
</Descriptions>
))}
</Card>
);
}