@nocobase/plugin-map 0.8.1-alpha.3

package/src/client/components/Configuration.tsx

@@ -0,0 +1,91 @@
+import { useAPIClient, useCompile, useRequest } from '@nocobase/client';
+import { useBoolean } from 'ahooks';
+import { Form, Input, Tabs, Button, Card, message } from 'antd';
+import React, { useMemo, useEffect } from 'react';
+import { MapTypes } from '../constants';
+import { MapConfigurationResourceKey, useMapConfiguration } from '../hooks';
+import { useMapTranslation } from '../locales';
+
+const AMapConfiguration = ({ type }) => {
+  const { t } = useMapTranslation();
+  const [isDisabled, disableAction] = useBoolean(false);
+  const apiClient = useAPIClient();
+  const [form] = Form.useForm();
+  const data = useMapConfiguration(type);
+  useEffect(() => {
+    if (data) {
+      form.setFieldsValue(data);
+      disableAction.toggle();
+    }
+  }, [data]);
+
+  const resource = useMemo(() => {
+    return apiClient.resource(MapConfigurationResourceKey);
+  }, [apiClient]);
+
+  const onSubmit = (values) => {
+    resource
+      .set({
+        ...values,
+        type,
+      })
+      .then((res) => {
+        message.success(t('Saved successfully'));
+      })
+      .catch((err) => {
+        message.success(t('Saved failed'));
+      });
+  };
+  return (
+    <Form form={form} layout="vertical" onFinish={onSubmit}>
+      <Form.Item required name="accessKey" label={t('Access key')}>
+        <Input disabled={isDisabled} />
+      </Form.Item>
+      <Form.Item required name="securityJsCode" label={t('securityJsCode or serviceHost')}>
+        <Input disabled={isDisabled} />
+      </Form.Item>
+      {isDisabled ? (
+        <Button onClick={disableAction.toggle} type="ghost">
+          {t('Edit')}
+        </Button>
+      ) : (
+        <Form.Item>
+          <Button type="primary" htmlType="submit">
+            {t('Save')}
+          </Button>
+        </Form.Item>
+      )}
+    </Form>
+  );
+};
+
+const components = {
+  amap: AMapConfiguration,
+  google: () => <div>Coming soon</div>,
+};
+
+const tabList = MapTypes.map((item) => {
+  return {
+    ...item,
+    component: components[item.value],
+  };
+});
+
+const Configuration = () => {
+  const compile = useCompile();
+  return (
+    <Card bordered>
+      <Tabs type="card">
+        {tabList.map((tab) => {
+          return (
+            <Tabs.TabPane key={tab.value} tab={compile(tab.label)}>
+              <tab.component type={tab.value} />
+            </Tabs.TabPane>
+          );
+        })}
+      </Tabs>
+    </Card>
+  );
+};
+
+export default Configuration;

package/src/client/components/Designer.tsx

@@ -0,0 +1,260 @@
+import { Field } from '@formily/core';
+import { ISchema, useField, useFieldSchema } from '@formily/react';
+import {
+  GeneralSchemaDesigner,
+  SchemaSettings,
+  useCollection,
+  useCollectionManager,
+  useDesignable,
+  useFormBlockContext,
+} from '@nocobase/client';
+import _ from 'lodash';
+import React from 'react';
+import { useMapTranslation } from '../locales';
+
+const Designer = () => {
+  const { getCollectionJoinField } = useCollectionManager();
+  const { getField } = useCollection();
+  const { form } = useFormBlockContext();
+  const field = useField<Field>();
+  const fieldSchema = useFieldSchema();
+  const { t } = useMapTranslation();
+  const { dn, refresh } = useDesignable();
+  const collectionField = getField(fieldSchema['name']) || getCollectionJoinField(fieldSchema['x-collection-field']);
+  const originalTitle = collectionField?.uiSchema?.title;
+  const initialValue = {
+    title: field.title === originalTitle ? undefined : field.title,
+  };
+  if (!field.readPretty) {
+    initialValue['required'] = field.required;
+  }
+
+  let readOnlyMode = 'editable';
+  if (fieldSchema['x-disabled'] === true) {
+    readOnlyMode = 'readonly';
+  }
+  if (fieldSchema['x-read-pretty'] === true) {
+    readOnlyMode = 'read-pretty';
+  }
+
+  return (
+    <GeneralSchemaDesigner>
+      <SchemaSettings.ModalItem
+        key="edit-field-title"
+        title={t('Edit field title')}
+        schema={
+          {
+            type: 'object',
+            title: t('Edit field title'),
+            properties: {
+              title: {
+                title: t('Field title'),
+                default: field?.title,
+                description: `${t('Original field title: ')}${collectionField?.uiSchema?.title}`,
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+                'x-component-props': {},
+              },
+            },
+          } as ISchema
+        }
+        onSubmit={({ title }) => {
+          if (title) {
+            field.title = title;
+            fieldSchema.title = title;
+            dn.emit('patch', {
+              schema: {
+                'x-uid': fieldSchema['x-uid'],
+                title: fieldSchema.title,
+              },
+            });
+          }
+          dn.refresh();
+        }}
+      />
+      {!field.readPretty && (
+        <SchemaSettings.ModalItem
+          key="edit-description"
+          title={t('Edit description')}
+          schema={
+            {
+              type: 'object',
+              title: t('Edit description'),
+              properties: {
+                description: {
+                  // title: t('Description'),
+                  default: field?.description,
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Input.TextArea',
+                  'x-component-props': {},
+                },
+              },
+            } as ISchema
+          }
+          onSubmit={({ description }) => {
+            field.description = description;
+            fieldSchema.description = description;
+            dn.emit('patch', {
+              schema: {
+                'x-uid': fieldSchema['x-uid'],
+                description: fieldSchema.description,
+              },
+            });
+            dn.refresh();
+          }}
+        />
+      )}
+      {field.readPretty && (
+        <SchemaSettings.ModalItem
+          key="edit-tooltip"
+          title={t('Edit tooltip')}
+          schema={
+            {
+              type: 'object',
+              title: t('Edit description'),
+              properties: {
+                tooltip: {
+                  default: fieldSchema?.['x-decorator-props']?.tooltip,
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Input.TextArea',
+                  'x-component-props': {},
+                },
+              },
+            } as ISchema
+          }
+          onSubmit={({ tooltip }) => {
+            field.decoratorProps.tooltip = tooltip;
+            fieldSchema['x-decorator-props'] = fieldSchema['x-decorator-props'] || {};
+            fieldSchema['x-decorator-props']['tooltip'] = tooltip;
+            dn.emit('patch', {
+              schema: {
+                'x-uid': fieldSchema['x-uid'],
+                'x-decorator-props': fieldSchema['x-decorator-props'],
+              },
+            });
+            dn.refresh();
+          }}
+        />
+      )}
+      {!field.readPretty && (
+        <SchemaSettings.SwitchItem
+          key="required"
+          title={t('Required')}
+          checked={fieldSchema.required as boolean}
+          onChange={(required) => {
+            const schema = {
+              ['x-uid']: fieldSchema['x-uid'],
+            };
+            field.required = required;
+            fieldSchema['required'] = required;
+            schema['required'] = required;
+            dn.emit('patch', {
+              schema,
+            });
+            refresh();
+          }}
+        />
+      )}
+      {form && !form?.readPretty && fieldSchema?.['x-component-props']?.['pattern-disable'] != true && (
+        <SchemaSettings.SelectItem
+          key="pattern"
+          title={t('Pattern')}
+          options={[
+            { label: t('Editable'), value: 'editable' },
+            { label: t('Readonly'), value: 'readonly' },
+            { label: t('Easy-reading'), value: 'read-pretty' },
+          ]}
+          value={readOnlyMode}
+          onChange={(v) => {
+            const schema: ISchema = {
+              ['x-uid']: fieldSchema['x-uid'],
+            };
+
+            switch (v) {
+              case 'readonly': {
+                fieldSchema['x-read-pretty'] = false;
+                fieldSchema['x-disabled'] = true;
+                schema['x-read-pretty'] = false;
+                schema['x-disabled'] = true;
+                field.readPretty = false;
+                field.disabled = true;
+                break;
+              }
+              case 'read-pretty': {
+                fieldSchema['x-read-pretty'] = true;
+                fieldSchema['x-disabled'] = false;
+                schema['x-read-pretty'] = true;
+                schema['x-disabled'] = false;
+                field.readPretty = true;
+                break;
+              }
+              default: {
+                fieldSchema['x-read-pretty'] = false;
+                fieldSchema['x-disabled'] = false;
+                schema['x-read-pretty'] = false;
+                schema['x-disabled'] = false;
+                field.readPretty = false;
+                field.disabled = false;
+                break;
+              }
+            }
+
+            dn.emit('patch', {
+              schema,
+            });
+
+            dn.refresh();
+          }}
+        />
+      )}
+      <SchemaSettings.ModalItem
+        key="map-zoom"
+        title={t('Set default zoom level')}
+        schema={
+          {
+            type: 'object',
+            title: t('Set default zoom level'),
+            properties: {
+              zoom: {
+                title: t('Zoom'),
+                default: field.componentProps.zoom || 13,
+                description: t('The default zoom level of the map'),
+                'x-decorator': 'FormItem',
+                'x-component': 'InputNumber',
+                'x-component-props': {
+                  precision: 0,
+                },
+              },
+            },
+          } as ISchema
+        }
+        onSubmit={({ zoom }) => {
+          if (zoom) {
+            _.set(fieldSchema, 'x-component-props.zoom', zoom);
+            Object.assign(field.componentProps, fieldSchema['x-component-props']);
+
+            dn.emit('patch', {
+              schema: {
+                'x-uid': fieldSchema['x-uid'],
+                'x-component-props': field.componentProps,
+              },
+            });
+          }
+          dn.refresh();
+        }}
+      />
+      <SchemaSettings.Remove
+        key="remove"
+        removeParentsIfNoChildren
+        confirm={{
+          title: t('Delete field'),
+        }}
+        breakRemoveOn={{
+          'x-component': 'Grid',
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};
+
+export default Designer;

package/src/client/components/Map.tsx

@@ -0,0 +1,29 @@
+import { connect, mapReadPretty } from '@formily/react';
+import React from 'react';
+import AMapComponent from './AMap';
+import ReadPretty from './ReadPretty';
+import { css } from '@emotion/css';
+import Designer from './Designer';
+
+const InternalMap = connect((props) => {
+  return (
+    <div
+      className={css`
+        border: 1px solid transparent;
+        .ant-formily-item-error & {
+          border: 1px solid #ff4d4f;
+        }
+      `}
+    >
+      {props.mapType ? <AMapComponent {...props} /> : null}
+    </div>
+  );
+}, mapReadPretty(ReadPretty));
+
+const Map = InternalMap as typeof InternalMap & {
+  Designer: typeof Designer;
+};
+
+Map.Designer = Designer;
+
+export default Map;

package/src/client/components/ReadPretty.tsx

@@ -0,0 +1,34 @@
+import { useField, useFieldSchema } from '@formily/react';
+import { useCollection } from '@nocobase/client';
+import React, { useEffect } from 'react';
+import AMapComponent from './AMap';
+
+const ReadPretty = (props) => {
+  const { value, readOnly } = props;
+  const fieldSchema = useFieldSchema();
+  const { getField } = useCollection();
+  const collectionField = getField(fieldSchema.name);
+  const mapType = props.mapType || collectionField?.uiSchema['x-component-props']?.mapType;
+  const field = useField();
+
+  useEffect(() => {
+    if (!field.title) {
+      field.title = collectionField.uiSchema.title;
+    }
+  }, collectionField.title);
+
+  if (!readOnly)
+    return (
+      <div
+        style={{
+          whiteSpace: 'pre-wrap',
+        }}
+      >
+        {value?.map((item) => (Array.isArray(item) ? `(${item.join(',')})` : item)).join(',')}
+      </div>
+    );
+
+  return mapType === 'amap' ? <AMapComponent mapType={mapType} {...props}></AMapComponent> : null;
+};
+
+export default ReadPretty;

package/src/client/components/Search.tsx

@@ -0,0 +1,93 @@
+import { message, Select } from 'antd';
+import { css } from '@emotion/css';
+import React, { useEffect, useRef, useState } from 'react';
+import { useDebounceFn } from 'ahooks';
+import { useMapTranslation } from '../locales';
+
+interface SearchProps {
+  aMap: any;
+  toCenter: (p: any) => void;
+}
+
+const Search = (props: SearchProps) => {
+  const { aMap, toCenter } = props;
+  const { t } = useMapTranslation();
+  const placeSearch = useRef<any>();
+  const [options, setOptions] = useState([]);
+
+  useEffect(() => {
+    aMap?.plugin('AMap.PlaceSearch', () => {
+      placeSearch.current = new aMap.PlaceSearch({
+        city: '全国',
+        pageSize: 30,
+      });
+    });
+  }, [aMap]);
+
+  const { run: onSearch } = useDebounceFn(
+    (keyword) => {
+      if (!placeSearch.current) {
+        return;
+      }
+      placeSearch.current.search(keyword || ' ', (status, result) => {
+        if (status === 'complete') {
+          setOptions(
+            result.poiList.pois.map((item) => {
+              return {
+                ...item,
+                label: `${item.name}-${item.address}`,
+                value: item.id,
+              };
+            }),
+          );
+        } else {
+          if (status === 'no_data') {
+            setOptions([]);
+            return;
+          }
+          message.error(t('Please configure the AMap securityCode or securityHost correctly'));
+        }
+      });
+    },
+    {
+      wait: 300,
+    },
+  );
+
+  const onSelect = (value) => {
+    const place = options.find((o) => {
+      return o.value === value;
+    });
+
+    if (place?.location) {
+      toCenter(place.location);
+    }
+  };
+
+  return (
+    <div
+      className={css`
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        z-index: 10;
+        width: calc(100% - 20px);
+      `}
+    >
+      <Select
+        showSearch
+        allowClear
+        style={{
+          background: 'rgba(255, 255, 255, 0.8)',
+        }}
+        placeholder={t('Enter keywords to search')}
+        filterOption={false}
+        onSearch={onSearch}
+        onSelect={onSelect}
+        options={options}
+      ></Select>
+    </div>
+  );
+};
+
+export default Search;

package/src/client/constants.ts

@@ -0,0 +1,6 @@
+import { generateNTemplate } from "./locales";
+
+export const MapTypes = [
+  { label: generateNTemplate('AMap'), value: 'amap' },
+  { label: generateNTemplate('Google Maps'), value: 'google' },
+]

package/src/client/fields/circle.ts

@@ -0,0 +1,23 @@
+import { IField } from '@nocobase/client';
+import { generateNTemplate } from '../locales';
+import { commonSchema } from './schema';
+
+export const circle: IField = {
+  name: 'circle',
+  type: 'object',
+  group: 'map',
+  order: 3,
+  title: generateNTemplate('Circle'),
+  description: generateNTemplate('Circle'),
+  sortable: true,
+  default: {
+    type: 'circle',
+    uiSchema: {
+      type: 'void',
+      'x-component': 'Map',
+      'x-component-designer': 'Map.Designer',
+      'x-component-props': {},
+    },
+  },
+  ...commonSchema,
+};

package/src/client/fields/index.ts

@@ -0,0 +1,16 @@
+import { circle } from './circle'
+import { lineString } from './lineString'
+import { point } from './point'
+import { polygon } from './polygon'
+
+export const fields = [
+  point,
+  polygon,
+  lineString,
+  circle
+]
+
+export const interfaces = fields.reduce((ins, field) => {
+  ins[field.name] = field
+  return ins
+}, {})

package/src/client/fields/lineString.ts

@@ -0,0 +1,23 @@
+import { IField } from '@nocobase/client';
+import { generateNTemplate } from '../locales';
+import { commonSchema } from './schema';
+
+export const lineString: IField = {
+  name: 'lineString',
+  type: 'object',
+  group: 'map',
+  order: 2,
+  title: generateNTemplate('Line'),
+  description: generateNTemplate('Line'),
+  sortable: true,
+  default: {
+    type: 'lineString',
+    uiSchema: {
+      type: 'void',
+      'x-component': 'Map',
+      'x-component-designer': 'Map.Designer',
+      'x-component-props': {},
+    },
+  },
+  ...commonSchema,
+};

package/src/client/fields/point.ts

@@ -0,0 +1,24 @@
+import { ISchema } from '@formily/react';
+import { IField } from '@nocobase/client';
+import { generateNTemplate } from '../locales';
+import { commonSchema } from './schema';
+
+export const point: IField = {
+  name: 'point',
+  type: 'object',
+  group: 'map',
+  order: 1,
+  title: generateNTemplate('Point'),
+  description: generateNTemplate('Point'),
+  sortable: true,
+  default: {
+    type: 'point',
+    uiSchema: {
+      type: 'void',
+      'x-component': 'Map',
+      'x-component-designer': 'Map.Designer',
+      'x-component-props': {},
+    },
+  },
+  ...commonSchema,
+};

package/src/client/fields/polygon.ts

@@ -0,0 +1,23 @@
+import { IField } from '@nocobase/client';
+import { generateNTemplate } from '../locales';
+import { commonSchema } from './schema';
+
+export const polygon: IField = {
+  name: 'polygon',
+  type: 'object',
+  group: 'map',
+  order: 4,
+  title: generateNTemplate('Polygon'),
+  description: generateNTemplate('Polygon'),
+  sortable: true,
+  default: {
+    type: 'polygon',
+    uiSchema: {
+      type: 'void',
+      'x-component': 'Map',
+      'x-component-designer': 'Map.Designer',
+      'x-component-props': {},
+    },
+  },
+  ...commonSchema,
+};

package/src/client/fields/schema.ts

@@ -0,0 +1,57 @@
+import { ISchema } from '@formily/react';
+import { interfacesProperties } from '@nocobase/client';
+import { MapTypes } from '../constants';
+import { generateNTemplate } from '../locales';
+
+const { defaultProps } = interfacesProperties;
+
+if (Array.isArray(defaultProps.type.enum)) {
+  defaultProps.type.enum.push(
+    {
+      label: 'Point',
+      value: 'point',
+    },
+    {
+      label: 'LineString',
+      value: 'lineString',
+    },
+    {
+      label: 'Polygon',
+      value: 'polygon',
+    },
+    {
+      label: 'Circle',
+      value: 'circle',
+    },
+  );
+}
+
+export const commonSchema = {
+  properties: {
+    ...defaultProps,
+    'uiSchema.x-component-props.mapType': {
+      title: generateNTemplate('Map type'),
+      type: 'string',
+      required: true,
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      'x-component-props': {
+        showSearch: false,
+        allowClear: false,
+      },
+      'x-disabled': '{{ isOverride || !createOnly }}',
+      default: 'amap',
+      enum: MapTypes
+    }
+  },
+  schemaInitialize(schema: ISchema, { readPretty, block }) {
+    if (block === 'Form') {
+      Object.assign(schema, {
+        'x-component-props': {
+          readOnly: readPretty ? true : false
+        },
+        'x-designer': 'Map.Designer',
+      });
+    }
+  },
+}

package/src/client/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useMapConfiguration'