2023-03-16 12:12:14 +08:00
|
|
|
import { useField, useFieldSchema, useForm } from '@formily/react';
|
2023-04-17 21:31:24 +08:00
|
|
|
import { EllipsisWithTooltip, useCollection } from '@nocobase/client';
|
2022-12-14 21:45:43 +08:00
|
|
|
import React, { useEffect } from 'react';
|
|
|
|
import AMapComponent from './AMap';
|
|
|
|
|
|
|
|
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;
|
|
|
|
const field = useField();
|
2023-04-17 21:31:24 +08:00
|
|
|
const form = useForm();
|
2022-12-14 21:45:43 +08:00
|
|
|
useEffect(() => {
|
2023-02-15 15:58:09 +08:00
|
|
|
if (!field.title && collectionField?.uiSchema?.title) {
|
2023-05-16 20:06:22 +08:00
|
|
|
field.title = collectionField?.uiSchema.title;
|
2022-12-14 21:45:43 +08:00
|
|
|
}
|
2023-02-15 15:58:09 +08:00
|
|
|
}, collectionField?.title);
|
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-04-17 21:31:24 +08:00
|
|
|
return mapType === 'amap' ? <AMapComponent readonly mapType={mapType} {...props}></AMapComponent> : null;
|
2022-12-14 21:45:43 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
export default ReadPretty;
|