amis-editor 5.6.0-beta.0 → 5.6.1

package/lib/renderer/TableColumnWidthControl.js

@@ -0,0 +1,186 @@
+/**
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
+ * Copyright 2018-2023 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var cx = require('classnames');
+var amis = require('amis');
+var amisCore = require('amis-core');
+var amisEditorCore = require('amis-editor-core');
+var i18nRuntime = require('i18n-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+/**
+ * @file 表格自定义列可视化编辑控件
+ */
+var TableColumnWidthControl = /** @class */function (_super) {
+  tslib.__extends(TableColumnWidthControl, _super);
+  function TableColumnWidthControl(props) {
+    var _this = _super.call(this, props) || this;
+    _this.options = [{
+      label: i18nRuntime.i18n("07c60b53a84fd7751095864a5310cc7d"),
+      value: 'adaptive'
+    }, {
+      label: i18nRuntime.i18n("81522afdfef2e4121c9240d00583f531"),
+      value: 'percentage'
+    }, {
+      label: i18nRuntime.i18n("b591aed69defa2abf0486da6a58dfb5e"),
+      value: 'fixed'
+    }];
+    _this.state = {
+      activeOption: _this.options[0]
+    };
+    return _this;
+  }
+  TableColumnWidthControl.prototype.componentDidMount = function () {
+    var value = this.props.value;
+    if (value === undefined) return;
+    if (typeof value === 'number') {
+      this.state.activeOption !== this.options[2] && this.setState({
+        activeOption: this.options[2]
+      });
+    } else if (typeof value === 'string' && value.endsWith('%')) {
+      this.state.activeOption !== this.options[1] && this.setState({
+        activeOption: this.options[1]
+      });
+    } else {
+      this.state.activeOption !== this.options[0] && this.setState({
+        activeOption: this.options[0]
+      });
+    }
+  };
+  TableColumnWidthControl.prototype.handleOptionChange = function (item) {
+    var _a, _b;
+    if (item === this.state.activeOption) return;
+    this.setState({
+      activeOption: item
+    });
+    (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, undefined);
+  };
+  TableColumnWidthControl.prototype.renderHeader = function () {
+    var _this = this;
+    var _a;
+    var _b = this.props,
+      render = _b.render,
+      formLabel = _b.formLabel,
+      labelRemark = _b.labelRemark,
+      useMobileUI = _b.useMobileUI,
+      env = _b.env,
+      popOverContainer = _b.popOverContainer;
+      _b.data;
+    var classPrefix = (_a = env === null || env === void 0 ? void 0 : env.theme) === null || _a === void 0 ? void 0 : _a.classPrefix;
+    var activeOption = this.state.activeOption;
+    return React__default["default"].createElement("div", {
+      className: "ae-columnWidthControl-header"
+    }, React__default["default"].createElement("label", {
+      className: cx__default["default"]("".concat(classPrefix, "Form-label"))
+    }, formLabel || '', labelRemark ? render('label-remark', {
+      type: 'remark',
+      icon: labelRemark.icon || 'warning-mark',
+      tooltip: labelRemark,
+      className: cx__default["default"]("Form-lableRemark", labelRemark === null || labelRemark === void 0 ? void 0 : labelRemark.className),
+      useMobileUI: useMobileUI,
+      container: popOverContainer ? popOverContainer : env && env.getModalContainer ? env.getModalContainer : undefined
+    }) : null), render('columnWidthControl-options', {
+      type: 'dropdown-button',
+      level: 'link',
+      size: 'sm',
+      label: activeOption.label,
+      align: 'right',
+      closeOnClick: true,
+      closeOnOutside: true,
+      buttons: this.options.map(function (item) {
+        return tslib.__assign(tslib.__assign({}, item), {
+          onClick: function () {
+            return _this.handleOptionChange(item);
+          }
+        });
+      })
+    }, {
+      popOverContainer: null
+    }));
+  };
+  TableColumnWidthControl.prototype.handleChange = function (type, val) {
+    var onChange = this.props.onChange;
+    if (typeof val !== 'number' || isNaN(val)) return;
+    if (val <= 0) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+      return;
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(type === 'percentage' ? val + '%' : val);
+  };
+  TableColumnWidthControl.prototype.renderBody = function () {
+    var _this = this;
+    var _a = this.props;
+      _a.onBulkChange;
+      var render = _a.render;
+      _a.onChange;
+      var value = _a.value;
+    var activeOption = this.state.activeOption;
+    if (activeOption.value === 'adaptive') {
+      return null;
+    }
+    if (activeOption.value === 'fixed') {
+      return render('columnWidthControl-fixed', amisEditorCore.getSchemaTpl('withUnit', {
+        label: i18nRuntime.i18n("9a8aed590bb7fcdd9198daca349b055a"),
+        name: 'interval',
+        control: {
+          type: 'input-number',
+          min: 0,
+          value: value
+          // onChange: (val: number) => this.handleChange('fixed', val)
+        },
+
+        unit: 'px',
+        className: 'mt-3'
+      }), {
+        onChange: function (val) {
+          return _this.handleChange('fixed', val);
+        }
+      });
+    }
+    return render('columnWidthControl-fixed', {
+      type: 'input-range',
+      name: 'range',
+      min: 0,
+      max: 100,
+      step: 1,
+      label: i18nRuntime.i18n("e0dbf4a939e6c84610d28b8a9b1803c1"),
+      value: amisCore.toNumber(value),
+      onChange: function (val) {
+        return activeOption.value === 'percentage' && _this.handleChange('percentage', val);
+      }
+    });
+  };
+  TableColumnWidthControl.prototype.render = function () {
+    return React__default["default"].createElement("div", {
+      className: cx__default["default"]('ae-columnWidthControl')
+    }, this.renderHeader(), this.renderBody());
+  };
+  return TableColumnWidthControl;
+}(React__default["default"].Component);
+/** @class */(function (_super) {
+  tslib.__extends(TableColumnWidthControlRender, _super);
+  function TableColumnWidthControlRender() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  TableColumnWidthControlRender = tslib.__decorate([amis.FormItem({
+    type: 'ae-columnWidthControl',
+    renderLabel: false
+  })], TableColumnWidthControlRender);
+  return TableColumnWidthControlRender;
+})(TableColumnWidthControl);
+
+exports["default"] = TableColumnWidthControl;
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/lib/renderer/TimelineItemControl.js

@@ -1,5 +1,6 @@
 /**
- * amis-editor v5.6.0-beta.0
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
  * Copyright 2018-2023 @fex
  */
 
@@ -534,3 +535,4 @@ var TimelineItemControl = /** @class */function (_super) {
 })(React__default["default"].Component);
 
 exports["default"] = TimelineItemControl;
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/lib/renderer/TplFormulaControl.js

@@ -1,5 +1,6 @@
 /**
- * amis-editor v5.6.0-beta.0
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
  * Copyright 2018-2023 @fex
  */
 
@@ -429,3 +430,4 @@ var TplFormulaControl = /** @class */function (_super) {
 })(TplFormulaControl);
 
 exports.TplFormulaControl = TplFormulaControl;
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/lib/renderer/TransferTableControl.js

@@ -1,5 +1,6 @@
 /**
- * amis-editor v5.6.0-beta.0
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
  * Copyright 2018-2023 @fex
  */
 
@@ -454,3 +455,4 @@ var TransferTableControl = BaseOptionControl(TransferTableOption);
 })(TransferTableControl);
 
 exports["default"] = TransferTableOption;
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/lib/renderer/TreeOptionControl.d.ts

@@ -29,7 +29,7 @@ export default class TreeOptionControl extends React.Component<OptionControlProp
     drag?: HTMLElement | null;
     internalProps: string[];
     constructor(props: OptionControlProps);
-    transformOptions(props: OptionControlProps): any;
+    transformOptions(props: OptionControlProps): any[];
     /**
      * 处理下未设置value的情况
      */

package/lib/renderer/TreeOptionControl.js

@@ -1,5 +1,6 @@
 /**
- * amis-editor v5.6.0-beta.0
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
  * Copyright 2018-2023 @fex
  */
 
@@ -58,11 +59,11 @@ var TreeOptionControl = /** @class */function (_super) {
     return _this;
   }
   TreeOptionControl.prototype.transformOptions = function (props) {
-    var options = props.data.options;
-    if (!options || !options.length) {
+    var value = props.value;
+    if (!value || !Array.isArray(value) || !value.length) {
       return [tslib.__assign({}, defaultOption)];
     }
-    return options;
+    return value;
   };
   /**
    * 处理下未设置value的情况
@@ -196,8 +197,8 @@ var TreeOptionControl = /** @class */function (_super) {
     var _this = this;
     var _a, _b;
     var options = cloneDeep__default["default"](this.state.options);
-    if (options.length === 1) {
-      amis.toast.warning(i18nRuntime.i18n("355c54009e364bf4396be424fba10e0f"), {
+    if (!pathStr.includes('-') && options.length === 1) {
+      amis.toast.warning(i18nRuntime.i18n("41be5ce31e28742d0b259fe734e49c28"), {
         closeButton: true
       });
       return;
@@ -624,3 +625,4 @@ var TreeOptionControl = /** @class */function (_super) {
 })(TreeOptionControl);
 
 exports["default"] = TreeOptionControl;
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/lib/renderer/ValidationControl.js

@@ -1,5 +1,6 @@
 /**
- * amis-editor v5.6.0-beta.0
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
  * Copyright 2018-2023 @fex
  */
 
@@ -369,3 +370,4 @@ var ValidationControl = /** @class */function (_super) {
 })(ValidationControl);
 
 exports["default"] = ValidationControl;
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/lib/renderer/ValidationItem.js

@@ -1,5 +1,6 @@
 /**
- * amis-editor v5.6.0-beta.0
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
  * Copyright 2018-2023 @fex
  */
 
@@ -172,3 +173,4 @@ var ValidationItem = /** @class */function (_super) {
 }(React__default["default"].Component);
 
 exports["default"] = ValidationItem;
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/lib/renderer/crud2-control/AddColumnModal.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @file AddColumnModal
+ * @desc 添加列
+ */
+declare const _default: any;
+export default _default;

package/lib/renderer/crud2-control/AddColumnModal.js

@@ -0,0 +1,265 @@
+/**
+ * amis-editor v5.5.2-beta.2
+ * build time: 2023-09-28
+ * Copyright 2018-2023 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var omit = require('lodash/omit');
+var amis = require('amis');
+var amisEditorCore = require('amis-editor-core');
+var constants = require('../../builder/constants.js');
+require('lodash/isObjectLike');
+require('../../builder/DSBuilder.js');
+require('../../builder/DSBuilderManager.js');
+require('../../builder/ApiDSBuilder.js');
+var i18nRuntime = require('i18n-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
+
+/**
+ * @file AddColumnModal
+ * @desc 添加列
+ */
+var AddColumnModal = function (props) {
+  var cx = props.classnames,
+    render = props.render,
+    visible = props.visible,
+    initData = props.initData,
+    ctx = props.ctx;
+    props.manager;
+    var builder = props.builder,
+    onConfirm = props.onConfirm,
+    onClose = props.onClose;
+  var componentId = ctx === null || ctx === void 0 ? void 0 : ctx.id;
+  var modalRef = React.useRef(null);
+  var formRef = React.useRef(null);
+  var _a = tslib.__read(React.useState(false), 2),
+    loading = _a[0],
+    setLoading = _a[1];
+  var handleModalConfirm = React.useCallback(function () {
+    return tslib.__awaiter(void 0, void 0, void 0, function () {
+      var form, schema, errorStack, error_1;
+      var _a, _b, _c;
+      return tslib.__generator(this, function (_d) {
+        switch (_d.label) {
+          case 0:
+            form = (_b = (_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.getWrappedInstance) === null || _b === void 0 ? void 0 : _b.call(_a);
+            setLoading(true);
+            if (!form) return [3 /*break*/, 4];
+            _d.label = 1;
+          case 1:
+            _d.trys.push([1, 3,, 4]);
+            return [4 /*yield*/, (_c = form.submit) === null || _c === void 0 ? void 0 : _c.call(form, function (values) {
+              return tslib.__awaiter(void 0, void 0, void 0, function () {
+                var scaffold, column, fields;
+                var _a, _b, _c;
+                return tslib.__generator(this, function (_d) {
+                  switch (_d.label) {
+                    case 0:
+                      if (!(values.colType === 'field')) return [3 /*break*/, 2];
+                      return [4 /*yield*/, (_a = builder.buildCRUDColumn) === null || _a === void 0 ? void 0 : _a.call(builder, values.__fieldItem ? tslib.__assign(tslib.__assign({}, values.__fieldItem), {
+                        checked: true
+                      }) : tslib.__assign(tslib.__assign({}, values), {
+                        label: values.title,
+                        name: values.name,
+                        displayType: 'tpl'
+                      }), {
+                        renderer: 'crud',
+                        inScaffold: false,
+                        schema: ctx
+                      }, componentId)];
+                    case 1:
+                      column = _d.sent();
+                      scaffold = column !== false ? column : {
+                        label: values.title,
+                        name: values.name
+                      };
+                      return [3 /*break*/, 4];
+                    case 2:
+                      if (!(values.colType === 'operation')) return [3 /*break*/, 4];
+                      fields = ((_b = ctx === null || ctx === void 0 ? void 0 : ctx.columns) !== null && _b !== void 0 ? _b : []).map(function (item) {
+                        var _a, _b;
+                        return {
+                          displayType: (_a = item.type) !== null && _a !== void 0 ? _a : 'input-text',
+                          inputType: (_b = item.type) !== null && _b !== void 0 ? _b : 'input-text',
+                          name: item.name,
+                          label: item.title
+                        };
+                      });
+                      return [4 /*yield*/, (_c = builder.buildCRUDOpColumn) === null || _c === void 0 ? void 0 : _c.call(builder, {
+                        renderer: 'crud',
+                        inScaffold: false,
+                        feats: values.feats,
+                        schema: ctx,
+                        scaffoldConfig: {
+                          viewFields: fields,
+                          editFields: fields,
+                          viewApi: values === null || values === void 0 ? void 0 : values.viewApi,
+                          editApi: values === null || values === void 0 ? void 0 : values.editApi,
+                          deleteApi: values === null || values === void 0 ? void 0 : values.deleteApi
+                        },
+                        buildSettings: {
+                          useDefaultFields: true
+                        }
+                      }, componentId)];
+                    case 3:
+                      scaffold = _d.sent();
+                      _d.label = 4;
+                    case 4:
+                      return [2 /*return*/, Promise.resolve(amisEditorCore.JSONPipeIn(omit__default["default"](scaffold, ['key'])))];
+                  }
+                });
+              });
+            })];
+          case 2:
+            schema = _d.sent();
+            return [3 /*break*/, 4];
+          case 3:
+            error_1 = _d.sent();
+            errorStack = error_1.stack;
+            return [3 /*break*/, 4];
+          case 4:
+            setLoading(false);
+            if (!errorStack) {
+              onConfirm(schema);
+              onClose === null || onClose === void 0 ? void 0 : onClose();
+            } else {
+              /** 表单校验没通过就不自动关闭Dialog */
+              console.error(errorStack);
+            }
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [onConfirm]);
+  React.useEffect(function () {}, []);
+  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(amis.Modal, {
+    ref: modalRef,
+    size: "sm",
+    show: visible,
+    onHide: onClose,
+    closeOnEsc: false,
+    contentClassName: "ae-Scaffold-Modal AMISCSSWrapper"
+  }, React__default["default"].createElement(amis.Modal.Header, {
+    showCloseButton: true,
+    onClose: onClose
+  }, React__default["default"].createElement(amis.Modal.Title, null, i18nRuntime.i18n("49198f84cea6c212cd5d463037827cd5"))), React__default["default"].createElement(amis.Modal.Body, null, render('column-control-modal', {
+    type: 'form',
+    title: '',
+    mode: 'horizontal',
+    horizontal: {
+      justify: true,
+      leftFixed: 'sm'
+    },
+    submitOnChange: true,
+    wrapWithPanel: false,
+    clearValueOnHidden: true,
+    preventEnterSubmit: true,
+    actions: [],
+    body: tslib.__spreadArray(tslib.__spreadArray([{
+      type: 'input-tag',
+      name: 'colType',
+      label: i18nRuntime.i18n("fb4c95bae088e3f216ea9312bcdb26ca"),
+      static: true,
+      className: 'mb-2',
+      options: [{
+        label: i18nRuntime.i18n("8eebb8ae809cf1ceaa23cd2fa2c73898"),
+        value: 'field'
+      }, {
+        label: i18nRuntime.i18n("39ccc34fa3ee9be12d8bae7e6fecbac2"),
+        value: 'operation'
+      }]
+    }], tslib.__read((initData === null || initData === void 0 ? void 0 : initData.colType) === 'field' ? [amisEditorCore.getSchemaTpl('formItemName', {
+      name: 'name',
+      label: i18nRuntime.i18n("4ca07911d10b74cc7c357b510e7cc948"),
+      required: true,
+      onBindingChange: function (field, onBulkChange) {
+        return tslib.__awaiter(void 0, void 0, void 0, function () {
+          return tslib.__generator(this, function (_a) {
+            onBulkChange === null || onBulkChange === void 0 ? void 0 : onBulkChange({
+              name: field.value,
+              title: field.label,
+              __fieldItem: field
+            }, true);
+            return [2 /*return*/, false];
+          });
+        });
+      }
+    }), {
+      name: 'title',
+      label: i18nRuntime.i18n("eb2719a7e6cebda7ca234560f21fb448"),
+      type: 'input-text',
+      required: true
+    }] : []), false), tslib.__read((initData === null || initData === void 0 ? void 0 : initData.colType) === 'operation' ? tslib.__spreadArray([{
+      type: 'checkboxes',
+      label: i18nRuntime.i18n("5246d2c81fa12b1f4f73635c257e232d"),
+      name: 'feats',
+      joinValues: false,
+      extractValue: true,
+      multiple: true,
+      inline: false,
+      options: [{
+        label: i18nRuntime.i18n("5b48dbb8dc710cffe6313bb56a7f6d47"),
+        value: 'View'
+      }, {
+        label: i18nRuntime.i18n("e22b59b6bda1cf9a58f8979fd0a0b43c"),
+        value: 'Edit'
+      }, {
+        label: i18nRuntime.i18n("a790208cafd5c95a18dd9a168319ecf8"),
+        value: 'Delete'
+      }],
+      value: [constants.DSFeatureEnum.View, constants.DSFeatureEnum.Edit, constants.DSFeatureEnum.Delete]
+    }], tslib.__read(builder.key !== constants.ModelDSBuilderKey ? tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(builder.makeSourceSettingForm({
+      feat: 'View',
+      renderer: 'crud',
+      inScaffold: false,
+      sourceSettings: {
+        name: 'viewApi',
+        visibleOn: "data.feats && data.feats.indexOf('View') > -1"
+      }
+    })), false), tslib.__read(builder.makeSourceSettingForm({
+      feat: 'Edit',
+      renderer: 'crud',
+      inScaffold: false,
+      sourceSettings: {
+        name: 'editApi',
+        visibleOn: "data.feats && data.feats.indexOf('Edit') > -1"
+      }
+    })), false), tslib.__read(builder.makeSourceSettingForm({
+      feat: 'Delete',
+      renderer: 'crud',
+      inScaffold: false,
+      sourceSettings: {
+        name: 'deleteApi',
+        visibleOn: "data.feats && data.feats.indexOf('Delete') > -1"
+      }
+    })), false).filter(Boolean) : []), false).filter(function (i) {
+      return !!i;
+    }) : []), false)
+  }, {
+    ref: formRef,
+    popOverContainer: modalRef.current,
+    disabled: loading,
+    data: amis.utils.createObject(ctx, tslib.__assign({}, initData))
+  })), React__default["default"].createElement(amis.Modal.Footer, null, React__default["default"].createElement(amis.Button, {
+    onClick: onClose
+  }, i18nRuntime.i18n("625fb26b4b3340f7872b411f401e754c")), React__default["default"].createElement(amis.Button, {
+    loading: loading,
+    loadingClassName: cx('ae-CRUDConfigControl-modal-btn-loading'),
+    level: "primary",
+    onClick: handleModalConfirm
+  }, i18nRuntime.i18n("38cf16f2204ffab8a6e0187070558721")))));
+};
+var AddColumnModal$1 = amis.themeable(AddColumnModal);
+
+exports["default"] = AddColumnModal$1;
+window.amisEditorVersionInfo={version:'5.5.2-beta.2',buildTime:'2023-09-28'};

package/lib/renderer/crud2-control/CRUDColumnControl.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @file CRUDColumnControl
+ * @desc 列配置控件
+ */
+import React from 'react';
+import Sortable from 'sortablejs';
+import type { FormControlProps } from 'amis';
+import type { ColumnSchema } from 'amis/lib/renderers/Table2';
+import type { DSBuilderInterface } from '../../builder';
+interface Option {
+    label: string;
+    value: string;
+    nodeId: string;
+    hidden: boolean;
+    /** 原始结构 */
+    pristine: DesignColumnSchema;
+    /** 字段信息 */
+    context?: any;
+}
+interface DesignColumnSchema extends ColumnSchema {
+    /** 设计态节点 ID */
+    $$id: string;
+    /** schema ID */
+    id: string;
+    /** 绑定的实体字段的 ID */
+    fieldId?: string;
+    relationBuildSetting?: any;
+}
+export interface CRUDColumnControlProps extends FormControlProps {
+    /** CRUD 节点的 ID */
+    nodeId: string;
+    builder: DSBuilderInterface;
+}
+export interface CRUDColumnControlState {
+    options: Option[];
+    loading: boolean;
+    showAddModal: boolean;
+    addModalData?: {
+        colTypeLabel: string;
+        colType: 'field' | 'operation';
+    };
+}
+export declare class CRUDColumnControl extends React.Component<CRUDColumnControlProps, CRUDColumnControlState> {
+    sortable?: Sortable;
+    drag?: HTMLElement | null;
+    dom?: HTMLElement;
+    constructor(props: CRUDColumnControlProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<CRUDColumnControlProps>): void;
+    transformOption(option: DesignColumnSchema): Option | false;
+    initOptions(): Promise<void>;
+    dragRef(ref: any): void;
+    initDragging(): void;
+    destroyDragging(): void;
+    handleSort(): void;
+    handleEdit(item: Option): void;
+    /** 添加列 */
+    handleAddColumn(type: 'field' | 'empty' | 'container' | 'operation'): void;
+    handleAddModalConfirm(scaffold: DesignColumnSchema): void;
+    handleAddModalClose(): void;
+    handleDelete(item: Option, index: number): Promise<void>;
+    renderOption(item: Option, index: number): React.JSX.Element;
+    renderHeader(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export declare class CRUDColumnControlRenderer extends CRUDColumnControl {
+}
+export {};