* feat(plugin-map): add MapBlock * feat: improve implementation to better support multiple fields * feat: support click overlay * fix: the width of select is not 100% * fix: repeat MapBlock * fix: loss initializer * feat: support selected marker in map * feat: support select point use box * fix: fixedBlock not work * fix: template not work * feat: improve ui * feat: improve selecting * feat: update ui * feat: improve map readpretty * feat: support marker field
77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
import { TableOutlined } from '@ant-design/icons';
|
|
import { DataBlockInitializer, SchemaComponent, SchemaComponentOptions, useCollectionManager } from '@nocobase/client';
|
|
import { SchemaOptionsContext } from '@formily/react';
|
|
import { FormDialog, FormLayout } from '@formily/antd';
|
|
import React, { useContext } from 'react';
|
|
import { useMapTranslation } from '../locale';
|
|
import { createMapBlockSchema } from './utils';
|
|
|
|
export const MapBlockInitializer = (props) => {
|
|
const { insert } = props;
|
|
const options = useContext(SchemaOptionsContext);
|
|
const { getCollectionFieldsOptions } = useCollectionManager();
|
|
const { t } = useMapTranslation();
|
|
|
|
return (
|
|
<DataBlockInitializer
|
|
{...props}
|
|
componentType={'Map'}
|
|
icon={<TableOutlined />}
|
|
onCreateBlockSchema={async ({ item }) => {
|
|
const mapFieldOptions = getCollectionFieldsOptions(item.name, ['point', 'lineString', 'polygon']);
|
|
const markerFieldOptions = getCollectionFieldsOptions(item.name, 'string');
|
|
const values = await FormDialog(t('Create map block'), () => {
|
|
return (
|
|
<SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
|
|
<FormLayout layout={'vertical'}>
|
|
<SchemaComponent
|
|
schema={{
|
|
properties: {
|
|
field: {
|
|
title: t('Map field'),
|
|
enum: mapFieldOptions,
|
|
required: true,
|
|
'x-component': 'Select',
|
|
'x-decorator': 'FormItem',
|
|
default: mapFieldOptions[0]?.value
|
|
},
|
|
marker: {
|
|
title: t('Marker field'),
|
|
enum: markerFieldOptions,
|
|
'x-component': 'Select',
|
|
'x-decorator': 'FormItem',
|
|
'x-reactions': (field) => {
|
|
const value = field.form.values.field
|
|
console.log("🚀 ~ file: MapBlockInitializer.tsx:45 ~ values ~ value:", value)
|
|
console.log("🚀 ~ file: MapBlockInitializer.tsx:50 ~ values ~ mapFieldOptions:", mapFieldOptions)
|
|
|
|
if (!value) {
|
|
return
|
|
}
|
|
const item = mapFieldOptions.find((item) => item.value === value).type
|
|
field.hidden = item !== 'point'
|
|
},
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</FormLayout>
|
|
</SchemaComponentOptions>
|
|
);
|
|
}).open({
|
|
initialValues: {},
|
|
});
|
|
insert(
|
|
createMapBlockSchema({
|
|
collection: item.name,
|
|
fieldNames: {
|
|
...values,
|
|
},
|
|
}),
|
|
);
|
|
}}
|
|
title={t('Map block')}
|
|
/>
|
|
);
|
|
};
|