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 ( { refresh(); }} style={{ marginBottom: 14 }} actions={actions} /> {loading ? : groups.map(group => ( {group.title} {group.tooltip && }} column={1}> {group.children.map((field: any) => { if (Array.isArray(displayFields) && displayFields.length && displayFields.indexOf(field.id) === -1) { return null; } return ( ) })} ))} ); }