@nocobase/client 0.9.2-alpha.4 → 0.9.4-alpha.1

package/es/schema-settings/DataTemplates/FormDataTemplates.js

@@ -1,45 +1,96 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { connect, mapProps, observer } from '@formily/react';
+import { observable } from '@formily/reactive';
 import { Tree as AntdTree } from 'antd';
-import React from 'react';
+import _ from 'lodash';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { mergeFilter } from '../../block-provider';
 import { useCollectionManager } from '../../collection-manager';
-import { AssociationSelect, SchemaComponent } from '../../schema-component';
+import { AssociationSelect, SchemaComponent, SchemaComponentContext, removeNullCondition } from '../../schema-component';
 import { AsDefaultTemplate } from './components/AsDefaultTemplate';
 import { ArrayCollapse } from './components/DataTemplateTitle';
+import { Designer, getSelectedIdFilter } from './components/Designer';
 import { useCollectionState } from './hooks/useCollectionState';
 var Tree = connect(AntdTree, mapProps({
   value: 'checkedKeys',
-  dataSource: 'treeData',
-  onInput: 'onCheck'
+  dataSource: 'treeData'
+  // onInput: 'onCheck',
 }));
+
 export var FormDataTemplates = observer(function (props) {
-  var useProps = props.useProps;
+  var useProps = props.useProps,
+    formSchema = props.formSchema,
+    designerCtx = props.designerCtx;
   var _useProps = useProps(),
     defaultValues = _useProps.defaultValues,
     collectionName = _useProps.collectionName;
   var _useCollectionState = useCollectionState(collectionName),
     collectionList = _useCollectionState.collectionList,
-    getEnableFieldTree = _useCollectionState.getEnableFieldTree;
+    getEnableFieldTree = _useCollectionState.getEnableFieldTree,
+    onLoadData = _useCollectionState.onLoadData,
+    onCheck = _useCollectionState.onCheck;
   var _useCollectionManager = useCollectionManager(),
     getCollection = _useCollectionManager.getCollection,
     getCollectionField = _useCollectionManager.getCollectionField;
-  var collection = getCollection(collectionName);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var field = getCollectionField("".concat(collectionName, ".").concat((collection === null || collection === void 0 ? void 0 : collection.titleField) || 'id'));
-  return /*#__PURE__*/React.createElement(SchemaComponent, {
-    components: {
+  // 不要在后面的数组中依赖 defaultValues，否则会因为 defaultValues 的变化导致 activeData 响应性丢失
+  var activeData = useMemo(function () {
+    return observable(defaultValues || {
+      items: [],
+      display: true,
+      config: _defineProperty({}, collectionName, {
+        titleField: '',
+        filter: {}
+      })
+    });
+  }, []);
+  var getTargetField = function getTargetField(collectionName) {
+    var _activeData$config$co;
+    var collection = getCollection(collectionName);
+    return getCollectionField("".concat(collectionName, ".").concat((activeData === null || activeData === void 0 ? void 0 : (_activeData$config$co = activeData.config[collectionName]) === null || _activeData$config$co === void 0 ? void 0 : _activeData$config$co.titleField) || (collection === null || collection === void 0 ? void 0 : collection.titleField) || 'id'));
+  };
+  var getFieldNames = function getFieldNames(collectionName) {
+    var _activeData$config, _activeData$config$co2;
+    var collection = getCollection(collectionName);
+    return {
+      label: getLabel(((_activeData$config = activeData.config) === null || _activeData$config === void 0 ? void 0 : (_activeData$config$co2 = _activeData$config[collectionName]) === null || _activeData$config$co2 === void 0 ? void 0 : _activeData$config$co2.titleField) || (collection === null || collection === void 0 ? void 0 : collection.titleField) || 'id'),
+      value: 'id'
+    };
+  };
+  var getFilter = function getFilter(collectionName, value) {
+    var _activeData$config2, _activeData$config2$c;
+    var filter = (_activeData$config2 = activeData.config) === null || _activeData$config2 === void 0 ? void 0 : (_activeData$config2$c = _activeData$config2[collectionName]) === null || _activeData$config2$c === void 0 ? void 0 : _activeData$config2$c.filter;
+    return _.isEmpty(filter) ? {} : removeNullCondition(mergeFilter([filter, getSelectedIdFilter(value)], '$or'));
+  };
+  var components = useMemo(function () {
+    return {
       ArrayCollapse: ArrayCollapse
-    },
-    scope: {
-      getEnableFieldTree: getEnableFieldTree
-    },
-    schema: {
+    };
+  }, []);
+  var scope = useMemo(function () {
+    return {
+      getEnableFieldTree: getEnableFieldTree,
+      getTargetField: getTargetField,
+      getFieldNames: getFieldNames,
+      getFilter: getFilter,
+      getResource: getResource,
+      collectionName: collectionName
+    };
+  }, []);
+  var schema = useMemo(function () {
+    return {
       type: 'object',
       properties: {
         items: {
           type: 'array',
-          default: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.items,
+          default: activeData === null || activeData === void 0 ? void 0 : activeData.items,
           'x-component': 'ArrayCollapse',
           'x-decorator': 'FormItem',
           'x-component-props': {
@@ -49,7 +100,9 @@ export var FormDataTemplates = observer(function (props) {
             type: 'object',
             'x-component': 'ArrayCollapse.CollapsePanel',
             'x-component-props': {
-              extra: [/*#__PURE__*/React.createElement(AsDefaultTemplate, null)]
+              extra: [/*#__PURE__*/React.createElement(AsDefaultTemplate, {
+                key: "0"
+              })]
             },
             properties: {
               layout: {
@@ -58,14 +111,13 @@ export var FormDataTemplates = observer(function (props) {
                 'x-component-props': {
                   layout: 'vertical'
                 },
-                // TODO: 翻译
                 properties: {
                   collection: {
                     type: 'string',
                     title: '{{ t("Collection") }}',
                     required: true,
                     description: t('If collection inherits, choose inherited collections as templates'),
-                    default: collectionName,
+                    default: '{{ collectionName }}',
                     'x-display': collectionList.length > 1 ? 'visible' : 'hidden',
                     'x-decorator': 'FormItem',
                     'x-component': 'Select',
@@ -78,31 +130,27 @@ export var FormDataTemplates = observer(function (props) {
                     title: '{{ t("Template Data") }}',
                     required: true,
                     description: t('Select an existing piece of data as the initialization data for the form'),
+                    'x-designer': Designer,
+                    'x-designer-props': {
+                      formSchema: formSchema,
+                      data: activeData
+                    },
                     'x-decorator': 'FormItem',
                     'x-component': AssociationSelect,
                     'x-component-props': {
                       service: {
-                        resource: collectionName
+                        resource: '{{ $record.collection || collectionName }}',
+                        params: {
+                          filter: '{{ getFilter($self.componentProps.service.resource, $self.value) }}'
+                        }
                       },
                       action: 'list',
                       multiple: false,
                       objectValue: false,
                       manual: false,
-                      targetField: field,
-                      mapOptions: function mapOptions(option) {
-                        try {
-                          var label = getLabel(collection);
-                          option[label] = /*#__PURE__*/React.createElement(React.Fragment, null, "#", option.id, " ", option[label]);
-                          return option;
-                        } catch (error) {
-                          console.error(error);
-                          return option;
-                        }
-                      },
-                      fieldNames: {
-                        label: getLabel(collection),
-                        value: 'id'
-                      }
+                      targetField: '{{ getTargetField($self.componentProps.service.resource) }}',
+                      mapOptions: getMapOptions(),
+                      fieldNames: '{{ getFieldNames($self.componentProps.service.resource) }}'
                     },
                     'x-reactions': [{
                       dependencies: ['.collection'],
@@ -111,7 +159,7 @@ export var FormDataTemplates = observer(function (props) {
                           disabled: '{{ !$deps[0] }}',
                           componentProps: {
                             service: {
-                              resource: '{{ $deps[0] }}'
+                              resource: '{{ getResource($deps[0], $self) }}'
                             }
                           }
                         }
@@ -128,7 +176,10 @@ export var FormDataTemplates = observer(function (props) {
                     'x-component-props': {
                       treeData: [],
                       checkable: true,
+                      checkStrictly: true,
                       selectable: false,
+                      loadData: onLoadData,
+                      onCheck: onCheck,
                       rootStyle: {
                         padding: '8px 0',
                         border: '1px solid #d9d9d9',
@@ -144,7 +195,7 @@ export var FormDataTemplates = observer(function (props) {
                         state: {
                           disabled: '{{ !$deps[0] }}',
                           componentProps: {
-                            treeData: '{{ getEnableFieldTree($deps[0]) }}'
+                            treeData: '{{ getEnableFieldTree($deps[0], $self) }}'
                           }
                         }
                       }
@@ -177,14 +228,38 @@ export var FormDataTemplates = observer(function (props) {
         display: {
           type: 'boolean',
           'x-content': '{{ t("Display data template selector") }}',
-          default: (defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.display) !== false,
+          default: (activeData === null || activeData === void 0 ? void 0 : activeData.display) !== false,
           'x-decorator': 'FormItem',
           'x-component': 'Checkbox'
         }
       }
-    }
-  });
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(SchemaComponentContext.Provider, {
+    value: _objectSpread(_objectSpread({}, designerCtx), {}, {
+      designable: true
+    })
+  }, /*#__PURE__*/React.createElement(SchemaComponent, {
+    components: components,
+    scope: scope,
+    schema: schema
+  }));
 });
-function getLabel(collection) {
-  return !(collection === null || collection === void 0 ? void 0 : collection.titleField) || collection.titleField === 'id' ? 'label' : collection === null || collection === void 0 ? void 0 : collection.titleField;
+export function getLabel(titleField) {
+  return titleField || 'label';
+}
+function getMapOptions() {
+  return function (option) {
+    if ((option === null || option === void 0 ? void 0 : option.id) === undefined) {
+      return null;
+    }
+    return option;
+  };
+}
+function getResource(resource, field) {
+  if (resource !== field.componentProps.service.resource) {
+    // 切换 collection 后，之前选中的其它 collection 的数据就没有意义了，需要清空
+    field.value = undefined;
+  }
+  return resource;
 }

package/es/schema-settings/DataTemplates/components/Designer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const Designer: React.MemoExoticComponent<React.FunctionComponent<unknown>>;
+export declare function getSelectedIdFilter(selectedId: any): {
+    id: {
+        $eq: any;
+    };
+};

package/es/schema-settings/DataTemplates/components/Designer.js

@@ -0,0 +1,179 @@
+var _excluded = ["title", "options", "value", "onChange"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { observer, useField, useFieldSchema } from '@formily/react';
+import { error } from '@nocobase/utils/client';
+import { Select } from 'antd';
+import _ from 'lodash';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { GeneralSchemaDesigner, SchemaSettings } from '../..';
+import { mergeFilter } from '../../../block-provider';
+import { useCollectionFilterOptions, useCollectionManager } from '../../../collection-manager';
+import { isTitleField } from '../../../collection-manager/Configuration/CollectionFields';
+import { removeNullCondition, useCompile, useDesignable } from '../../../schema-component';
+import { FilterDynamicComponent } from '../../../schema-component/antd/table-v2/FilterDynamicComponent';
+export var Designer = observer(function () {
+  var _useCollectionManager = useCollectionManager(),
+    getCollectionFields = _useCollectionManager.getCollectionFields,
+    getCollectionField = _useCollectionManager.getCollectionField,
+    getCollection = _useCollectionManager.getCollection;
+  var field = useField();
+  var fieldSchema = useFieldSchema();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDesignable = useDesignable(),
+    dn = _useDesignable.dn;
+  var compile = useCompile();
+  var _fieldSchema$xDesign = fieldSchema['x-designer-props'],
+    formSchema = _fieldSchema$xDesign.formSchema,
+    data = _fieldSchema$xDesign.data;
+  // 在这里读取 resource 的值，当 resource 变化时，会触发该组件的更新
+  var collectionName = field.componentProps.service.resource;
+  var collection = getCollection(collectionName);
+  var collectionFields = getCollectionFields(collectionName);
+  var dataSource = useCollectionFilterOptions(collectionName);
+  if (!data) {
+    error('data is required');
+    return null;
+  }
+  var getFilter = function getFilter() {
+    var _data$config, _data$config$collecti;
+    return ((_data$config = data.config) === null || _data$config === void 0 ? void 0 : (_data$config$collecti = _data$config[collectionName]) === null || _data$config$collecti === void 0 ? void 0 : _data$config$collecti.filter) || {};
+  };
+  var setFilter = function setFilter(filter) {
+    try {
+      _.set(data, "config.".concat(collectionName, ".filter"), removeNullCondition(filter));
+    } catch (err) {
+      error(err);
+    }
+  };
+  var getTitleFIeld = function getTitleFIeld() {
+    var _data$config2, _data$config2$collect;
+    return ((_data$config2 = data.config) === null || _data$config2 === void 0 ? void 0 : (_data$config2$collect = _data$config2[collectionName]) === null || _data$config2$collect === void 0 ? void 0 : _data$config2$collect.titleField) || (collection === null || collection === void 0 ? void 0 : collection.titleField) || 'id';
+  };
+  var setTitleField = function setTitleField(titleField) {
+    try {
+      _.set(data, "config.".concat(collectionName, ".titleField"), titleField);
+    } catch (err) {
+      error(err);
+    }
+  };
+  var options = collectionFields.filter(function (field) {
+    return isTitleField(field);
+  }).map(function (field) {
+    var _field$uiSchema;
+    return {
+      value: field === null || field === void 0 ? void 0 : field.name,
+      label: compile(field === null || field === void 0 ? void 0 : (_field$uiSchema = field.uiSchema) === null || _field$uiSchema === void 0 ? void 0 : _field$uiSchema.title) || (field === null || field === void 0 ? void 0 : field.name)
+    };
+  });
+  return /*#__PURE__*/React.createElement(GeneralSchemaDesigner, {
+    draggable: false
+  }, /*#__PURE__*/React.createElement(SchemaSettings.ModalItem, {
+    title: t('Set the data scope'),
+    schema: {
+      type: 'object',
+      title: t('Set the data scope'),
+      properties: {
+        filter: {
+          default: getFilter(),
+          // title: '数据范围',
+          enum: dataSource,
+          'x-component': 'Filter',
+          'x-component-props': {
+            dynamicComponent: function dynamicComponent(props) {
+              return FilterDynamicComponent(_objectSpread({}, props));
+            }
+          }
+        }
+      }
+    },
+    onSubmit: function onSubmit(_ref) {
+      var _schema;
+      var filter = _ref.filter;
+      setFilter(filter);
+      try {
+        // 不仅更新当前模板，也更新同级的其它模板
+        field.query('fieldReaction.items.*.layout.dataId').forEach(function (item) {
+          if (item.componentProps.service.resource !== collectionName) {
+            return;
+          }
+          item.componentProps.service.params = {
+            filter: _.isEmpty(filter) ? {} : removeNullCondition(mergeFilter([filter, getSelectedIdFilter(field.value)], '$or'))
+          };
+        });
+      } catch (err) {
+        error(err);
+      }
+      formSchema['x-data-templates'] = data;
+      dn.emit('patch', {
+        schema: (_schema = {}, _defineProperty(_schema, 'x-uid', formSchema['x-uid']), _defineProperty(_schema, 'x-data-templates', data), _schema)
+      });
+      dn.refresh();
+    }
+  }), /*#__PURE__*/React.createElement(SelectItem, {
+    key: "title-field",
+    title: t('Title field'),
+    options: options,
+    value: getTitleFIeld(),
+    onChange: function onChange(label) {
+      var _schema2;
+      setTitleField(label);
+      try {
+        // 不仅更新当前模板，也更新同级的其它模板
+        field.query('fieldReaction.items.*.layout.dataId').forEach(function (item) {
+          if (item.componentProps.service.resource !== collectionName) {
+            return;
+          }
+          item.componentProps.fieldNames.label = label;
+          item.componentProps.targetField = getCollectionField("".concat(collectionName, ".").concat(label || (collection === null || collection === void 0 ? void 0 : collection.titleField) || 'id'));
+        });
+      } catch (err) {
+        console.error(err);
+      }
+      formSchema['x-data-templates'] = data;
+      var schema = (_schema2 = {}, _defineProperty(_schema2, 'x-uid', formSchema['x-uid']), _defineProperty(_schema2, 'x-data-templates', data), _schema2);
+      dn.emit('patch', {
+        schema: schema
+      });
+      dn.refresh();
+    }
+  }));
+});
+export function getSelectedIdFilter(selectedId) {
+  return selectedId ? {
+    id: {
+      $eq: selectedId
+    }
+  } : null;
+}
+function SelectItem(props) {
+  var title = props.title,
+    options = props.options,
+    value = props.value,
+    onChange = props.onChange,
+    others = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(SchemaSettings.Item, _objectSpread({}, others), /*#__PURE__*/React.createElement("div", {
+    style: {
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'space-between'
+    }
+  }, title, /*#__PURE__*/React.createElement(Select, _objectSpread({
+    bordered: false,
+    value: value,
+    onChange: onChange,
+    options: options,
+    style: {
+      textAlign: 'right',
+      minWidth: 100
+    }
+  }, others))));
+}

package/es/schema-settings/DataTemplates/hooks/useCollectionState.d.ts

@@ -1,13 +1,18 @@
+import { ArrayField } from '@formily/core';
 import React from 'react';
 export declare const useCollectionState: (currentCollectionName: string) => {
     collectionList: {
         label: any;
         value: string;
     }[];
-    getEnableFieldTree: (collectionName: string) => {
+    getEnableFieldTree: (collectionName: string, fields: ArrayField) => {
         title: React.FunctionComponentElement<any>;
         key: any;
+        isLeaf: boolean;
+        field: import("../../../collection-manager").CollectionFieldOptions;
         type: string;
         tag: any;
     }[];
+    onLoadData: (node: any) => Promise<unknown>;
+    onCheck: (checkedKeys: any, { node, checked }: any) => void;
 };