2023-06-30 11:08:53 +08:00
|
|
|
import { useFieldSchema, useForm } from '@formily/react';
|
|
|
|
import { EllipsisWithTooltip, useCollection, useFieldTitle } from '@nocobase/client';
|
|
|
|
import React from 'react';
|
|
|
|
import { MapComponent } from './MapComponent';
|
2022-12-14 21:45:43 +08:00
|
|
|
|
|
|
|
const ReadPretty = (props) => {
|
2023-03-16 12:12:14 +08:00
|
|
|
const { value } = props;
|
2022-12-14 21:45:43 +08:00
|
|
|
const fieldSchema = useFieldSchema();
|
|
|
|
const { getField } = useCollection();
|
|
|
|
const collectionField = getField(fieldSchema.name);
|
|
|
|
const mapType = props.mapType || collectionField?.uiSchema['x-component-props']?.mapType;
|
2023-04-17 21:31:24 +08:00
|
|
|
const form = useForm();
|
2023-06-30 11:08:53 +08:00
|
|
|
useFieldTitle();
|
2022-12-14 21:45:43 +08:00
|
|
|
|
2023-03-16 12:12:14 +08:00
|
|
|
if (!form.readPretty) {
|
2022-12-14 21:45:43 +08:00
|
|
|
return (
|
2023-02-18 11:10:26 +08:00
|
|
|
<div>
|
|
|
|
<EllipsisWithTooltip ellipsis={true}>
|
|
|
|
{value?.map((item) => (Array.isArray(item) ? `(${item.join(',')})` : item)).join(',')}
|
|
|
|
</EllipsisWithTooltip>
|
2022-12-14 21:45:43 +08:00
|
|
|
</div>
|
|
|
|
);
|
2023-03-16 12:12:14 +08:00
|
|
|
}
|
2022-12-14 21:45:43 +08:00
|
|
|
|
2023-06-30 11:08:53 +08:00
|
|
|
return <MapComponent readonly mapType={mapType} {...props}></MapComponent>;
|
2022-12-14 21:45:43 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export default ReadPretty;
|