Appsmith - BaseWidget组件基类

227 阅读1分钟
  1. 静态方法

    • 配置属性面板:getPropertyPaneContentConfig

      {
          sectionName: "层名称",
          children: [
              {
                  label: "配置面板上的名称",
                  propertyName: "属性键",
                  helpText: "tooltip提示",
                  controlType: "控件类型:src/components/propertyControls/index.ts",
                  isBindProperty: true,
                  isJSConvertible: true,
                  isTriggerProperty: false, //如果controlType: "ACTION_SELECTOR"等于true
                  dependencies: [], //依赖属性,定义updateHook和hidden函数中使用到的属性
                  hidden: (props: any, propertyPath: string) => false,
                  updateHook: (props: any, propertyPath: string, propertyValue: any) => [
                      { propertyPath, propertyValue },
                      // ...其他需要更新的属性
                  ],
                  validation: {
                      type: "类型:src/constants/WidgetValidation.ts",
                      params: {
                          required: true,
                          default: "xxx", //为无效或undefined的属性提供默认值
                          ignoreCase: true, //忽略大小写
                          min: 0, //type=NUMBER有效
                          max: 0, //type=NUMBER有效
                          natural: true, //type=NUMBER有效
                          regex: "", //type=TEXT有效
                          strict: true, //type=TEXT有效
                          allowedKeys: [], //type=OBJECT有效
                          allowedValues: [], //type=ARRAY有效
                          children: [], //type=OBJECT_ARRAY有效
                          fn: //type=FUNCTION有效
                      }
                  }, //属性验证
                  panelConfig: {
                      editableTitle: true,
                      titlePropertyName: "label",
                      panelIdPropertyName: "id",
                      children: [], //
                  }, //配置对象属性
                  customJSControl: ???,
                  additionalAutoComplete: ???,
              }
          ]
      }
      
      blueprint: {
          view: [{
              type: "",
              size: { rows: 4, columns: 4, },
              position: { top: 4, left: 4, },
              props: {}
          }],
          operations: [{
              type: BlueprintOperationType, //MODIFY_PROPS|ADD_ACTION|CHILD_OPERATIONS
              fn: BlueprintOperationFunction
          }]
      }
      
    • 派生属性(根据其他属性组合生成的属性,类似计算属性):getDerivedPropertiesMap

    • 默认属性(根据其他配置属性来设置的默认值):getDefaultPropertiesMap

    • 元属性(不需要持久化存储的属性):getMetaPropertiesMap

  2. 继承方法

    • 调用配置方法:executeAction
    • 表格拖动时,需要禁止组件被拖动:disableDrag
    • 更新单个属性:updateWidgetProperty
    • 更新多个属性:batchUpdateWidgetProperty
    • 删除属性:deleteWidgetProperty
    • 更新元属性:updateMetaWidgetProperty
    • 重置元属性:resetChildrenMetaProperty