@nocobase/client-v2 2.1.0-beta.37 → 2.1.0-beta.40

package/src/collection-field-interface/CollectionFieldInterface.ts

@@ -10,7 +10,15 @@
 import type { ISchema } from '@formily/react';
 import { tval } from '@nocobase/utils/client';
 import { capitalize, cloneDeep, set } from 'lodash';
+import type { ComponentType, ReactNode } from 'react';
 
+import {
+  normalizeFilterableOperators,
+  resolveFilterOperators,
+  type FieldFilterable,
+  type FieldFilterOperator,
+} from '../collection-manager/filter-operators';
+import type { FieldConfigureItem } from '../collection-manager/field-configure';
 import { defaultProps } from '../collection-manager/interfaces/properties';
 import { CollectionFieldInterfaceManager } from './CollectionFieldInterfaceManager';
 export type CollectionFieldInterfaceFactory = new (
@@ -24,6 +32,55 @@ export interface CollectionFieldInterfaceComponentOption {
   useProps?: () => any;
 }
 
+export type FieldConfigureFormMode = 'create' | 'edit';
+
+export interface FieldConfigureContext {
+  mode: FieldConfigureFormMode;
+  fieldInterface: CollectionFieldInterface | FieldInterfaceConfigure;
+  collection?: Record<string, any>;
+  field?: Record<string, any>;
+  disabledJSONB?: boolean;
+  createOnly?: boolean;
+  editMainOnly?: boolean;
+}
+
+export type FieldConfigureFormProps = FieldConfigureContext;
+
+export interface FieldConfigurePropertyComponentProps extends FieldConfigureContext {
+  name: string;
+  namePath: Array<string | number>;
+  schema: Record<string, any>;
+  form?: any;
+  disabled?: boolean;
+  collections?: Array<Record<string, any>>;
+  context: Record<string, boolean>;
+  title?: ReactNode;
+  tooltip?: ReactNode;
+  componentProps?: Record<string, any>;
+}
+
+export interface FieldInterfaceConfigure {
+  name?: string;
+  title?: ReactNode;
+  group?: string;
+  order?: number;
+  default?: Record<string, any>;
+  titleUsable?: boolean;
+  isAssociation?: boolean;
+  supportDataSourceType?: string[];
+  notSupportDataSourceType?: string[];
+  properties?: Record<string, any>;
+  items?: FieldConfigureItem[];
+  getConfigureFormProperties?: (collectionInfo?: Record<string, any>) => Record<string, any>;
+  components?: Record<string, ComponentType<FieldConfigurePropertyComponentProps>>;
+  initialize?: (values: Record<string, any>, context?: FieldConfigureContext) => void;
+  ConfigureForm?: ComponentType<FieldConfigureFormProps>;
+  Component?: ComponentType<FieldConfigureFormProps>;
+  normalizeValues?: (values: Record<string, any>, context: FieldConfigureContext) => Record<string, any>;
+  normalize?: (values: Record<string, any>, context: FieldConfigureContext) => Record<string, any>;
+  validate?: (values: Record<string, any>, context: FieldConfigureContext) => Promise<void> | void;
+}
+
 export abstract class CollectionFieldInterface {
   constructor(public collectionFieldInterfaceManager: CollectionFieldInterfaceManager) {}
   name: string;
@@ -45,30 +102,19 @@ export abstract class CollectionFieldInterface {
   hasDefaultValue?: boolean;
   componentOptions?: CollectionFieldInterfaceComponentOption[];
   isAssociation?: boolean;
-  operators?: any[];
+  operators?: FieldFilterOperator[];
   properties?: any;
   validationType?: string;
   availableValidationOptions: string[] = [];
+  configure?: FieldInterfaceConfigure;
   excludeValidationOptions?: string[];
   /**
    * - 如果该值为空，则在 Filter 组件中该字段会被过滤掉
    * - 如果该值为空，则不会在变量列表中看到该字段
    */
-  filterable?: {
-    /**
-     * 字段所支持的操作符，会在 Filter 组件中显示，比如设置 `数据范围` 的时候可以看见
-     */
-    operators?: any[];
-    /**
-     * 为当前字段添加子选项，这个子选项会在 Filter 组件中显示，比如设置 `数据范围` 的时候可以看见
-     */
-    children?: any[];
-    [key: string]: any;
-  };
+  filterable?: FieldFilterable;
   titleUsable?: boolean;
-  validateSchema?(fieldSchema: ISchema): Record<string, ISchema>;
   usePathOptions?(field: any): any;
-  schemaInitialize?(schema: ISchema, data: any): void;
   hidden?: boolean;
 
   addComponentOption(componentOption: CollectionFieldInterfaceComponentOption) {
@@ -93,10 +139,12 @@ export abstract class CollectionFieldInterface {
     this.componentOptions.push(componentOption);
   }
   getConfigureFormProperties(collectionInfo?: any): Record<string, ISchema> {
+    const configuredProperties =
+      this.configure?.getConfigureFormProperties?.(collectionInfo) || this.configure?.properties || {};
     const defaultValueProps = this.hasDefaultValue ? this.getDefaultValueProperty() : {};
-    this.availableValidationOptions.push('required');
     const isViewCollection = collectionInfo?.view;
     const isSqlCollection = collectionInfo?.template === 'sql' || collectionInfo?.sql;
+    const availableValidationOptions = [...new Set([...this.availableValidationOptions, 'required'])];
     const validationProps =
       !isViewCollection && !isSqlCollection && this.validationType
         ? {
@@ -107,7 +155,7 @@ export abstract class CollectionFieldInterface {
               'x-component': 'FieldValidation',
               'x-component-props': {
                 type: this.validationType,
-                availableValidationOptions: [...new Set(this.availableValidationOptions)],
+                availableValidationOptions,
                 excludeValidationOptions: [...new Set(this.excludeValidationOptions)],
                 isAssociation: this.isAssociation,
               },
@@ -115,7 +163,7 @@ export abstract class CollectionFieldInterface {
           }
         : {};
     return {
-      ...cloneDeep({ ...defaultProps, ...this?.properties }),
+      ...cloneDeep({ ...defaultProps, ...this?.properties, ...configuredProperties }),
       ...defaultValueProps,
       ...validationProps,
     };
@@ -128,73 +176,19 @@ export abstract class CollectionFieldInterface {
         required: false,
         title: '{{ t("Default value") }}',
         'x-decorator': 'FormItem',
-        'x-reactions': [
-          {
-            dependencies: [
-              'uiSchema.x-component-props.gmt',
-              'uiSchema.x-component-props.showTime',
-              'uiSchema.x-component-props.dateFormat',
-              'uiSchema.x-component-props.timeFormat',
-              'uiSchema.x-component-props.picker',
-              'uiSchema.x-component-props.format',
-            ],
-            fulfill: {
-              state: {
-                componentProps: {
-                  gmt: '{{$deps[0]}}',
-                  showTime: '{{$deps[1]}}',
-                  dateFormat: '{{$deps[2]}}',
-                  timeFormat: '{{$deps[3]}}',
-                  picker: '{{$deps[4]}}',
-                  format: '{{$deps[5]}}',
-                },
-              },
-            },
-          },
-          {
-            // 当 picker 改变时，清空 defaultValue
-            dependencies: ['uiSchema.x-component-props.picker'],
-            fulfill: {
-              state: {
-                value: null,
-              },
-            },
-          },
-          {
-            dependencies: ['primaryKey', 'unique', 'autoIncrement', 'defaultToCurrentTime'],
-            when: '{{$deps[0]||$deps[1]||$deps[2]||$deps[3]}}',
-            fulfill: {
-              state: {
-                hidden: true,
-                value: null,
-              },
-            },
-            otherwise: {
-              state: {
-                hidden: false,
-              },
-            },
-          },
-          {
-            dependencies: ['uiSchema.enum'],
-            fulfill: {
-              state: {
-                dataSource: '{{$deps[0]}}',
-              },
-            },
-          },
-        ],
       },
     };
   }
 
-  addOperator(operatorOption: any) {
-    set(this, 'filterable.operators', [...(this.filterable.operators || [])]);
+  addOperator(operatorOption: FieldFilterOperator) {
+    normalizeFilterableOperators(this.filterable);
+    const operators = [...resolveFilterOperators(this.filterable?.operators)];
+    set(this, 'filterable.operators', operators);
 
-    if (this.filterable.operators.find((item) => item.value === operatorOption.value)) {
+    if (operators.find((item) => item.value === operatorOption.value)) {
       return;
     }
 
-    this.filterable.operators.push(operatorOption);
+    operators.push(operatorOption);
   }
 }

package/src/collection-field-interface/CollectionFieldInterfaceManager.ts

@@ -7,16 +7,43 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import {
+  filterOperatorRegistry,
+  normalizeFilterableOperators,
+  type FieldFilterable,
+  type FieldFilterOperator,
+  type FieldFilterOperatorReference,
+} from '../collection-manager/filter-operators';
+import { configurePropertiesToItems } from '../collection-manager/field-configure';
+import {
+  addFieldValidationConfiguresToGroup,
+  fieldValidationConfigureRegistry,
+  registerFieldValidationConfigure,
+  registerFieldValidationConfigureGroup,
+  type FieldValidationConfigureInput,
+  type FieldValidationConfigureItem,
+} from '../collection-manager/field-validation';
+import type { FieldInterfaceConfigure } from './CollectionFieldInterface';
+import type { ReactNode } from 'react';
+
 interface FieldInterfaceLike {
   name?: string;
+  title?: ReactNode;
+  group?: string;
+  order?: number;
+  isAssociation?: boolean;
   supportDataSourceType?: string[];
   notSupportDataSourceType?: string[];
+  properties?: Record<string, any>;
+  configure?: FieldInterfaceConfigure;
+  filterable?: FieldFilterable;
   addComponentOption?: (option: any) => void;
-  addOperator?: (option: any) => void;
+  addOperator?: (option: FieldFilterOperator) => void;
+  getConfigureFormProperties?: (collectionInfo?: any) => Record<string, any>;
 }
 
 interface PendingAction {
-  type: 'addComponentOption' | 'addOperator';
+  type: 'addComponentOption' | 'addOperator' | 'registerConfigure';
   data: any;
 }
 
@@ -50,10 +77,14 @@ export class CollectionFieldInterfaceManager {
   ) {
     const newCollectionFieldInterfaces = fieldInterfaceClasses.reduce<Record<string, FieldInterfaceLike>>(
       (acc, Interface) => {
+        if (typeof Interface !== 'function') {
+          return acc;
+        }
         const instance = new Interface(this);
         if (!instance?.name) {
           return acc;
         }
+        normalizeFilterableOperators(instance.filterable);
         acc[instance.name] = instance;
         if (Array.isArray(this.actionList[instance.name])) {
           this.actionList[instance.name].forEach((item) => {
@@ -61,9 +92,13 @@ export class CollectionFieldInterfaceManager {
               instance.addComponentOption?.(item.data);
               return;
             }
+            if (item.type === 'registerConfigure') {
+              instance.configure = this.mergeFieldInterfaceConfigure(instance.configure, item.data);
+              return;
+            }
             instance.addOperator?.(item.data);
           });
-          this.actionList[instance.name] = undefined;
+          delete this.actionList[instance.name];
         }
         return acc;
       },
@@ -96,7 +131,7 @@ export class CollectionFieldInterfaceManager {
    * @param operatorOption 操作符配置
    * @returns void
    */
-  addFieldInterfaceOperator(name: string, operatorOption: any) {
+  addFieldInterfaceOperator(name: string, operatorOption: FieldFilterOperator) {
     const fieldInterface = this.getFieldInterface(name);
     if (!fieldInterface) {
       this.enqueueAction(name, { type: 'addOperator', data: operatorOption });
@@ -105,6 +140,78 @@ export class CollectionFieldInterfaceManager {
     fieldInterface.addOperator?.(operatorOption);
   }
 
+  /**
+   * 注册 v2 字段过滤操作符。
+   *
+   * 插件可通过该方法补充自己的过滤操作符，再把它们加入自定义 operator group。
+   *
+   * @param operator 过滤操作符配置
+   * @returns void
+   */
+  registerFieldFilterOperator(operator: FieldFilterOperator) {
+    filterOperatorRegistry.register(operator);
+  }
+
+  /**
+   * 注册 v2 字段过滤操作符分组。
+   *
+   * 字段 interface 可以通过 `createFilterable(groupName)` 引用这里注册的分组。
+   *
+   * @param name 分组名
+   * @param operators 操作符配置或已注册操作符名
+   * @returns void
+   */
+  registerFieldFilterOperatorGroup(name: string, operators: FieldFilterOperatorReference[] = []) {
+    filterOperatorRegistry.registerGroup(name, operators);
+    this.normalizeFieldInterfaceFilterables();
+  }
+
+  /**
+   * 向已有 v2 字段过滤操作符分组追加操作符。
+   *
+   * @param name 分组名
+   * @param operators 操作符配置或已注册操作符名
+   * @returns void
+   */
+  addFieldFilterOperatorsToGroup(name: string, operators: FieldFilterOperatorReference[] = []) {
+    filterOperatorRegistry.addToGroup(name, operators);
+    this.normalizeFieldInterfaceFilterables();
+  }
+
+  registerFieldValidationConfigure(item: FieldValidationConfigureItem) {
+    registerFieldValidationConfigure(item);
+  }
+
+  registerFieldValidationConfigureGroup(name: string, items: FieldValidationConfigureInput[] = []) {
+    registerFieldValidationConfigureGroup(name, items);
+  }
+
+  addFieldValidationConfiguresToGroup(name: string, items: FieldValidationConfigureInput[] = []) {
+    addFieldValidationConfiguresToGroup(name, items);
+  }
+
+  getFieldValidationConfigureGroup(name: string) {
+    return fieldValidationConfigureRegistry.getGroup(name);
+  }
+
+  /**
+   * 注册字段接口创建/编辑字段时的配置项。
+   *
+   * 字段插件可以把复杂配置组件、配置属性、normalize / initialize 等逻辑挂到字段接口自身。
+   * 如果字段接口尚未注册，配置会暂存并在接口注册后回放。
+   *
+   * @param options 字段接口配置
+   * @returns void
+   */
+  registerFieldInterfaceConfigure(options: FieldInterfaceConfigure & { name: string }) {
+    const fieldInterface = this.getFieldInterface(options.name);
+    if (!fieldInterface) {
+      this.enqueueAction(options.name, { type: 'registerConfigure', data: options });
+      return;
+    }
+    fieldInterface.configure = this.mergeFieldInterfaceConfigure(fieldInterface.configure, options);
+  }
+
   /**
    * 获取单个字段接口实例。
    *
@@ -139,6 +246,54 @@ export class CollectionFieldInterfaceManager {
     }) as T[];
   }
 
+  /**
+   * 获取字段接口创建/编辑字段时的配置属性。
+   *
+   * 字段接口可以通过自身的 properties / getConfigureFormProperties() 定义专属配置项。
+   * 数据源管理等 v2 页面只需要通过该方法读取，不需要硬编码具体字段类型。
+   *
+   * @param name 字段接口名
+   * @param collectionInfo 当前数据表信息
+   * @returns 配置属性映射
+   */
+  getFieldInterfaceConfigureProperties(name: string, collectionInfo?: any) {
+    const configure = this.getFieldInterfaceConfigure(name, collectionInfo);
+    return configure?.getConfigureFormProperties?.(collectionInfo) || configure?.properties || {};
+  }
+
+  /**
+   * 获取字段接口配置。
+   *
+   * 返回值会合并字段接口自身声明和后注册配置；后注册配置优先。
+   *
+   * @param name 字段接口名
+   * @param collectionInfo 当前数据表信息
+   * @returns 字段接口配置
+   */
+  getFieldInterfaceConfigure(name: string, collectionInfo?: any) {
+    const fieldInterface = this.getFieldInterface(name);
+    if (!fieldInterface) {
+      return undefined;
+    }
+    const properties = fieldInterface.getConfigureFormProperties?.(collectionInfo) || fieldInterface.properties || {};
+    const baseConfigure: FieldInterfaceConfigure = {
+      name: fieldInterface.name,
+      title: fieldInterface.title,
+      group: fieldInterface.group,
+      order: fieldInterface.order,
+      default: (fieldInterface as any).default,
+      titleUsable: (fieldInterface as any).titleUsable,
+      isAssociation: fieldInterface.isAssociation,
+      supportDataSourceType: fieldInterface.supportDataSourceType,
+      notSupportDataSourceType: fieldInterface.notSupportDataSourceType,
+      properties,
+      items: configurePropertiesToItems(properties, { components: fieldInterface.configure?.components }),
+      getConfigureFormProperties: fieldInterface.getConfigureFormProperties?.bind(fieldInterface),
+    };
+
+    return this.mergeFieldInterfaceConfigure(baseConfigure, fieldInterface.configure);
+  }
+
   /**
    * 注册字段接口分组。
    *
@@ -174,4 +329,46 @@ export class CollectionFieldInterfaceManager {
     }
     this.actionList[interfaceName].push(action);
   }
+
+  protected normalizeFieldInterfaceFilterables() {
+    Object.values(this.collectionFieldInterfaceInstances).forEach((fieldInterface) => {
+      normalizeFilterableOperators(fieldInterface.filterable);
+    });
+  }
+
+  protected mergeFieldInterfaceConfigure(
+    base?: FieldInterfaceConfigure,
+    override?: FieldInterfaceConfigure,
+  ): FieldInterfaceConfigure | undefined {
+    if (!base) {
+      return override;
+    }
+    if (!override) {
+      return base;
+    }
+    return {
+      ...base,
+      ...override,
+      default: override.default || base.default,
+      properties: {
+        ...(base.properties || {}),
+        ...(override.properties || {}),
+      },
+      items: this.mergeFieldConfigureItems(base.items, override.items),
+      components: {
+        ...(base.components || {}),
+        ...(override.components || {}),
+      },
+    };
+  }
+
+  protected mergeFieldConfigureItems(
+    baseItems: FieldInterfaceConfigure['items'] = [],
+    overrideItems: FieldInterfaceConfigure['items'] = [],
+  ) {
+    const itemMap = new Map<string, NonNullable<FieldInterfaceConfigure['items']>[number]>();
+    baseItems.forEach((item) => itemMap.set(item.name, item));
+    overrideItems.forEach((item) => itemMap.set(item.name, item));
+    return Array.from(itemMap.values());
+  }
 }