2021SC@SDUSC amis-低代码前端框架代码分析四

代码分析

compat.js
关于适配性的代码分析

(0, factory_1.addSchemaFilter)(function FormPropsFilter(schema, renderer) {
      if (renderer.component !== FieldSet_1.FieldSetRenderer) {
          return schema;
      }
      if (Array.isArray(schema.controls)) {
          let flag = false;
          let converted = schema.controls.map((control) => {
              if (Array.isArray(control)) {
                  let converted = convertFieldSetTabs2Controls({
                      type: 'group',
                      controls: control
                  });
                  if (converted !== control) {
                      flag = true;
                  }
                  return converted;
              }
              return control;
          });
          if (flag) {
              schema = Object.assign(Object.assign({}, schema), { controls: converted });
          }
      }
      return schema;
  });`

FieldSet 中把 controls 里面的数组用法转成 {type: ‘group’, controls: []}，以便于分析，减少错误

{type: 'group', controls: []}
  function convertArray2Hbox(arr) {
      let flag = false;
      let converted = arr.map((item) => {
          if (Array.isArray(item)) {
              flag = true;
              return convertArray2Hbox(item);
          }
          return item;
      });
      if (!flag) {
          converted = arr;
      }
      return {
          type: 'hbox',
          columns: converted
      };
  }

Form 里面的 Tabs 中把 controls 里面的数组用法转成

  (0, factory_1.addSchemaFilter)(function (schema, renderer) {
      if (renderer.component !== Card_1.CardRenderer &&
          renderer.component !== List_1.ListItemRenderer) {
          return schema;
      }
      if (Array.isArray(schema.body)) {
          let flag = false;
          let converted = schema.body.map((item) => {
              if (Array.isArray(item)) {
                  flag = true;
                  return convertArray2Hbox(item);
              }
              return item;
          });
          if (flag) {
              schema = Object.assign(Object.assign({}, schema), { body: converted });
          }
      }
      return schema;
  });

CRUD/List 和 CRUD/Card 的 body 中的数组用法转成 hbox

  (0, factory_1.addSchemaFilter)(function (scheam, renderer) {
      if (renderer.component !== ButtonGroupSelect_1.ButtonGroupControlRenderer) {
          return scheam;
      }
      if (scheam.btnClassName || scheam.btnActiveClassName) {
          scheam = Object.assign(Object.assign({}, scheam), { btnLevel: (0, helper_1.getLevelFromClassName)(scheam.btnClassName), btnActiveLevel: (0, helper_1.getLevelFromClassName)(scheam.btnActiveClassName) });
          delete scheam.btnClassName;
          delete scheam.btnActiveClassName;
      }
      return scheam;
  });

button group 的 btnClassName 和 btnActiveClassName 改成 btnLevel 和 btnActiveLevel 了

总结

这是为了适应版本，以及更好处理数据而做的临时处理，也能更好兼容旧版本