@next-libs/visual-builder 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2022-09-20)
+
+
+### Features
+
+* **visual-builder:** 迁移【visual-property-form】至libs ([bb31a88](https://github.com/easyops-cn/next-libs/commit/bb31a883378a208ae271f2e8c792b049821b6596))

package/README.md

@@ -0,0 +1,13 @@
+# @next-libs/visual-builder
+
+Generated by [@next-core/brick-scripts] v3.0.1
+
+## Development
+
+`lerna run start --scope=@next-libs/visual-builder`
+
+## Build
+
+`lerna run build --scope=@next-libs/visual-builder`
+
+[@next-core/brick-scripts]: https://github.com/easyops-cn/next-core/tree/master/packages/brick-scripts

package/dist/cjs/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _VisualPropertyForm = require("./visual-property-form/VisualPropertyForm");
+
+Object.keys(_VisualPropertyForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _VisualPropertyForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _VisualPropertyForm[key];
+    }
+  });
+});
+
+var _interfaces = require("./interfaces");
+
+Object.keys(_interfaces).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _interfaces[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _interfaces[key];
+    }
+  });
+});
+
+var _processor = require("./visual-property-form/processor");
+
+Object.keys(_processor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _processor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _processor[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from \"./visual-property-form/VisualPropertyForm\";\nexport * from \"./interfaces\";\nexport * from \"./visual-property-form/processor\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/cjs/interfaces/brick-visualization.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Required = exports.ItemModeType = void 0;
+let Required;
+exports.Required = Required;
+
+(function (Required) {
+  Required["True"] = "true";
+  Required["False"] = "false";
+})(Required || (exports.Required = Required = {}));
+
+let ItemModeType;
+exports.ItemModeType = ItemModeType;
+
+(function (ItemModeType) {
+  ItemModeType["Normal"] = "normal";
+  ItemModeType["Advanced"] = "advanced";
+})(ItemModeType || (exports.ItemModeType = ItemModeType = {}));
+//# sourceMappingURL=brick-visualization.js.map

package/dist/cjs/interfaces/brick-visualization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brick-visualization.js","names":["Required","ItemModeType"],"sources":["../../../src/interfaces/brick-visualization.ts"],"sourcesContent":["import { FormInstance } from \"antd/lib/form\";\n\nexport type FormItemType =\n  | boolean\n  | string\n  | string[]\n  | number\n  | Record<string, any>;\n\nexport enum Required {\n  True = \"true\",\n  False = \"false\",\n}\n\nexport enum ItemModeType {\n  Normal = \"normal\",\n  Advanced = \"advanced\",\n}\n\nexport interface PropertyType {\n  type: FormItemType;\n  name: string;\n  required?: Required;\n  description?: string;\n  default?: string;\n  group?: string;\n  groupI18N?: Record<string, { [language: string]: string }>;\n}\n\nexport interface UnionPropertyType extends PropertyType {\n  mode?: ItemModeType;\n  value?: any;\n  jsonSchema?: Record<string, any>;\n  schemaRef?: string;\n}\n\nexport type BrickProperties = Record<string, any>;\n\nexport interface visualFormUtils extends Partial<FormInstance> {\n  resetPropertyFields: (\n    typeList: PropertyType[],\n    properties: BrickProperties\n  ) => void;\n  getCurTypeList: () => UnionPropertyType[];\n}\n"],"mappings":";;;;;;IASYA,Q;;;WAAAA,Q;EAAAA,Q;EAAAA,Q;GAAAA,Q,wBAAAA,Q;;IAKAC,Y;;;WAAAA,Y;EAAAA,Y;EAAAA,Y;GAAAA,Y,4BAAAA,Y"}

package/dist/cjs/interfaces/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _brickVisualization = require("./brick-visualization");
+
+Object.keys(_brickVisualization).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _brickVisualization[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _brickVisualization[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/interfaces/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/interfaces/index.ts"],"sourcesContent":["export * from \"./brick-visualization\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/cjs/visual-property-form/VisualPropertyForm.js

@@ -0,0 +1,282 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LegacyVisualPropertyForm = LegacyVisualPropertyForm;
+exports.VisualPropertyForm = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _brickKit = require("@next-core/brick-kit");
+
+var _basicComponents = require("@next-libs/basic-components");
+
+var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
+
+var _lodash = require("lodash");
+
+var _VisualPropertyFormModule = _interopRequireDefault(require("./VisualPropertyForm.module.css"));
+
+var _CodeEditorFormItem = require("./components/CodeEditor/CodeEditorFormItem");
+
+var _IconSelectFormItem = require("./components/IconSelect/IconSelectFormItem");
+
+var _ColorEditorItem = require("./components/ColorEditor/ColorEditorItem");
+
+var _MenuEditorItem = require("./components/MenuEditor/MenuEditorItem");
+
+var _emptyDark = require("./images/empty-dark.svg");
+
+var _processor = require("./processor");
+
+var _constant = require("./constant");
+
+var _interfaces = require("../interfaces");
+
+function LegacyVisualPropertyForm(props, ref) {
+  var _groupByType;
+
+  const theme = (0, _brickKit.useCurrentTheme)();
+  const {
+    projectId,
+    labelIcon,
+    propertyTypeList,
+    brickProperties,
+    brickInfo,
+    emptyConfig,
+    menuSettingClick
+  } = props;
+
+  const [form] = _antd.Form.useForm();
+
+  const [typeList, setTypeList] = (0, _react.useState)((0, _processor.mergeProperties)(propertyTypeList, brickProperties));
+  (0, _react.useImperativeHandle)(ref, () => ({
+    validateFields: form.validateFields,
+    resetPropertyFields: (typeList, properties) => {
+      const restValue = (0, _processor.mergeProperties)(typeList, properties);
+      setTypeList(restValue);
+      form.resetFields();
+    },
+    getCurTypeList: () => {
+      return typeList === null || typeList === void 0 ? void 0 : typeList.map(item => (0, _lodash.pick)(item, ["name", "type", "mode"]));
+    }
+  }));
+  (0, _react.useEffect)(() => {
+    const newTypeList = (0, _processor.mergeProperties)(propertyTypeList, brickProperties);
+    setTypeList(newTypeList);
+    const newValue = (0, _processor.calculateValue)(propertyTypeList, brickProperties, newTypeList);
+    form.setFieldsValue(newValue);
+  }, [propertyTypeList, brickProperties]);
+
+  const handleLabelClick = name => {
+    const selected = typeList.find(item => item.name === name);
+    const index = typeList.findIndex(item => item.name === name);
+    const nextMode = selected.mode === _interfaces.ItemModeType.Advanced ? _interfaces.ItemModeType.Normal : _interfaces.ItemModeType.Advanced;
+    let value = selected.value;
+
+    if (nextMode === _interfaces.ItemModeType.Normal) {
+      if (_constant.supportMenuType.includes(selected.type)) {
+        value = (0, _processor.matchNoramlMenuValue)(value);
+      }
+    } else if ((0, _lodash.isNil)(selected.value)) {
+      value = "";
+    } else {
+      value = (0, _processor.yamlStringify)(selected.value);
+    }
+
+    form.setFieldsValue({
+      [name]: value
+    });
+    const newTypeList = (0, _immutabilityHelper.default)(typeList, {
+      $splice: [[index, 1, { ...selected,
+        mode: nextMode
+      }]]
+    });
+    setTypeList(newTypeList);
+  };
+
+  const renderLabel = (item, hideIcon) => {
+    return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      title: item.description
+    }, item.name), " ", !hideIcon && labelIcon && /*#__PURE__*/_react.default.createElement("span", {
+      className: _VisualPropertyFormModule.default.iconContainer,
+      onClick: () => handleLabelClick(item.name)
+    }, /*#__PURE__*/_react.default.createElement(_basicComponents.GeneralIcon, {
+      icon: item.mode === _interfaces.ItemModeType.Advanced ? labelIcon === null || labelIcon === void 0 ? void 0 : labelIcon.advanced : labelIcon.normal
+    })));
+  };
+
+  const renderEditorItem = (item, hideIcon) => {
+    return /*#__PURE__*/_react.default.createElement(_CodeEditorFormItem.CodeEditorFormItem, {
+      key: item.name,
+      name: item.name,
+      label: renderLabel(item, hideIcon),
+      required: item.required === _interfaces.Required.True,
+      theme: theme === "dark-v2" ? "monokai" : "tomorrow",
+      jsonSchema: item === null || item === void 0 ? void 0 : item.jsonSchema,
+      schemaRef: item === null || item === void 0 ? void 0 : item.schemaRef,
+      mode: "brick_next_yaml"
+    });
+  };
+
+  const renderStringItem = item => {
+    return item.mode === _interfaces.ItemModeType.Advanced ? renderEditorItem(item) : /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      key: item.name,
+      label: renderLabel(item),
+      name: item.name,
+      rules: [{
+        required: item.required === _interfaces.Required.True,
+        message: `请输入${item.name}`
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input, null));
+  };
+
+  const renderBooleanItem = item => {
+    return item.mode === _interfaces.ItemModeType.Advanced ? renderEditorItem(item) : /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      key: item.name,
+      label: renderLabel(item),
+      name: item.name,
+      rules: [{
+        required: item.required === _interfaces.Required.True,
+        message: `请输入${item.name}`
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_antd.Radio.Group, null, /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+      value: true
+    }, "true"), /*#__PURE__*/_react.default.createElement(_antd.Radio, {
+      value: false
+    }, "false")));
+  };
+
+  const renderInputNumberItem = item => {
+    return item.mode === _interfaces.ItemModeType.Advanced ? renderEditorItem(item) : /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      key: item.name,
+      label: renderLabel(item),
+      name: item.name,
+      rules: [{
+        required: item.required === _interfaces.Required.True,
+        message: `请输入${item.name}`
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_antd.InputNumber, null));
+  };
+
+  const renderStringListItem = item => {
+    return item.mode === _interfaces.ItemModeType.Advanced ? renderEditorItem(item) : /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      key: item.name,
+      label: renderLabel(item),
+      name: item.name,
+      rules: [{
+        required: item.required === _interfaces.Required.True,
+        message: `请输入${item.name}`
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+      mode: "tags"
+    }));
+  };
+
+  const renderIconItem = item => {
+    return /*#__PURE__*/_react.default.createElement(_IconSelectFormItem.IconSelectFormItem, {
+      key: item.name,
+      name: item.name,
+      label: renderLabel(item, true),
+      required: item.required === _interfaces.Required.True
+    });
+  };
+
+  const renderCodeEditorItem = item => {
+    return renderEditorItem(item, true);
+  };
+
+  const renderColorItem = item => {
+    return /*#__PURE__*/_react.default.createElement(_ColorEditorItem.ColorEditorItem, {
+      key: item.name,
+      name: item.name,
+      label: renderLabel(item, true),
+      required: item.required === _interfaces.Required.True
+    });
+  };
+
+  const renderMenuItem = item => {
+    return item.mode === _interfaces.ItemModeType.Advanced ? renderEditorItem(item) : /*#__PURE__*/_react.default.createElement(_MenuEditorItem.MenuEditorItem, {
+      projectId: projectId,
+      key: item.name,
+      name: item.name,
+      label: renderLabel(item),
+      required: item.required === _interfaces.Required.True,
+      menuSettingClick: menuSettingClick
+    });
+  };
+
+  const getFormItem = item => {
+    switch (item.type) {
+      case "string":
+        return renderStringItem(item);
+
+      case "string[]":
+        return renderStringListItem(item);
+
+      case "number":
+        return renderInputNumberItem(item);
+
+      case "boolean":
+        return renderBooleanItem(item);
+
+      case "MenuIcon":
+        return renderIconItem(item);
+
+      case "Color":
+        return renderColorItem(item);
+
+      case "Menu":
+      case "SidebarSubMenu":
+        return renderMenuItem(item);
+
+      default:
+        return renderCodeEditorItem(item);
+    }
+  };
+
+  return (0, _lodash.isEmpty)(typeList) ? /*#__PURE__*/_react.default.createElement(_antd.Empty, {
+    className: _VisualPropertyFormModule.default.empty,
+    description: emptyConfig === null || emptyConfig === void 0 ? void 0 : emptyConfig.description,
+    image: theme === "dark-v2" ? /*#__PURE__*/_react.default.createElement(_emptyDark.ReactComponent, null) : _antd.Empty.PRESENTED_IMAGE_SIMPLE,
+    imageStyle: emptyConfig === null || emptyConfig === void 0 ? void 0 : emptyConfig.imageStyle
+  }) : /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    name: "propertyForm",
+    layout: "vertical",
+    form: form,
+    onValuesChange: props.onValuesChange,
+    initialValues: (0, _processor.calculateValue)(propertyTypeList, brickProperties, typeList)
+  }, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
+    ghost: true,
+    defaultActiveKey: "0",
+    className: _VisualPropertyFormModule.default.panelContainer
+  }, (_groupByType = (0, _processor.groupByType)(typeList)) === null || _groupByType === void 0 ? void 0 : _groupByType.map(([category, list], index) => {
+    return /*#__PURE__*/_react.default.createElement(_antd.Collapse.Panel, {
+      header: (0, _lodash.upperFirst)(category),
+      key: index,
+      forceRender: true
+    }, list.map(item => getFormItem(item)));
+  }), /*#__PURE__*/_react.default.createElement(_antd.Collapse.Panel, {
+    className: _VisualPropertyFormModule.default.otherPanel,
+    forceRender: true,
+    header: (0, _lodash.upperFirst)(_constant.OTHER_FORM_ITEM_FIELD),
+    key: _constant.OTHER_FORM_ITEM_FIELD
+  }, /*#__PURE__*/_react.default.createElement(_CodeEditorFormItem.CodeEditorFormItem, {
+    name: _constant.OTHER_FORM_ITEM_FIELD,
+    label: (brickInfo === null || brickInfo === void 0 ? void 0 : brickInfo.type) === "template" ? "other params" : "other properties",
+    mode: "brick_next_yaml",
+    maxLines: Infinity
+  }))));
+}
+
+const VisualPropertyForm = /*#__PURE__*/_react.default.forwardRef(LegacyVisualPropertyForm);
+
+exports.VisualPropertyForm = VisualPropertyForm;
+//# sourceMappingURL=VisualPropertyForm.js.map

package/dist/cjs/visual-property-form/VisualPropertyForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualPropertyForm.js","names":["LegacyVisualPropertyForm","props","ref","theme","useCurrentTheme","projectId","labelIcon","propertyTypeList","brickProperties","brickInfo","emptyConfig","menuSettingClick","form","Form","useForm","typeList","setTypeList","useState","mergeProperties","useImperativeHandle","validateFields","resetPropertyFields","properties","restValue","resetFields","getCurTypeList","map","item","pick","useEffect","newTypeList","newValue","calculateValue","setFieldsValue","handleLabelClick","name","selected","find","index","findIndex","nextMode","mode","ItemModeType","Advanced","Normal","value","supportMenuType","includes","type","matchNoramlMenuValue","isNil","yamlStringify","update","$splice","renderLabel","hideIcon","description","styles","iconContainer","advanced","normal","renderEditorItem","required","Required","True","jsonSchema","schemaRef","renderStringItem","message","renderBooleanItem","renderInputNumberItem","renderStringListItem","renderIconItem","renderCodeEditorItem","renderColorItem","renderMenuItem","getFormItem","isEmpty","empty","Empty","PRESENTED_IMAGE_SIMPLE","imageStyle","onValuesChange","panelContainer","groupByType","category","list","upperFirst","otherPanel","OTHER_FORM_ITEM_FIELD","Infinity","VisualPropertyForm","React","forwardRef"],"sources":["../../../src/visual-property-form/VisualPropertyForm.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useState } from \"react\";\nimport {\n  Form,\n  Input,\n  InputNumber,\n  Radio,\n  Select,\n  Tooltip,\n  Collapse,\n  Empty,\n} from \"antd\";\nimport { EmptyProps } from \"antd/lib/empty\";\nimport { useCurrentTheme } from \"@next-core/brick-kit\";\nimport { MenuIcon } from \"@next-core/brick-types\";\nimport { GeneralIcon } from \"@next-libs/basic-components\";\nimport update from \"immutability-helper\";\nimport { isNil, pick, upperFirst, isEmpty } from \"lodash\";\nimport styles from \"./VisualPropertyForm.module.css\";\nimport { FormProps } from \"antd/lib/form\";\nimport { CodeEditorFormItem } from \"./components/CodeEditor/CodeEditorFormItem\";\nimport { IconSelectFormItem } from \"./components/IconSelect/IconSelectFormItem\";\nimport { ColorEditorItem } from \"./components/ColorEditor/ColorEditorItem\";\nimport { MenuEditorItem } from \"./components/MenuEditor/MenuEditorItem\";\nimport { ReactComponent as DarkEmpty } from \"./images/empty-dark.svg\";\nimport {\n  mergeProperties,\n  calculateValue,\n  groupByType,\n  yamlStringify,\n} from \"./processor\";\nimport { OTHER_FORM_ITEM_FIELD, supportMenuType } from \"./constant\";\nimport { matchNoramlMenuValue } from \"./processor\";\nimport {\n  PropertyType,\n  BrickProperties,\n  visualFormUtils,\n  ItemModeType,\n  UnionPropertyType,\n  Required,\n} from \"../interfaces\";\n\nexport interface VisualPropertyFormProps {\n  projectId?: string;\n  propertyTypeList: PropertyType[];\n  labelIcon: {\n    normal?: MenuIcon;\n    advanced?: MenuIcon;\n  };\n  brickProperties: BrickProperties;\n  onValuesChange?: FormProps[\"onValuesChange\"];\n  brickInfo?: {\n    type: \"brick\" | \"provider\" | \"template\";\n  };\n  emptyConfig?: EmptyProps;\n  menuSettingClick?: () => void;\n}\n\nexport function LegacyVisualPropertyForm(\n  props: VisualPropertyFormProps,\n  ref: React.Ref<visualFormUtils>\n): React.ReactElement {\n  const theme = useCurrentTheme();\n  const {\n    projectId,\n    labelIcon,\n    propertyTypeList,\n    brickProperties,\n    brickInfo,\n    emptyConfig,\n    menuSettingClick,\n  } = props;\n  const [form] = Form.useForm();\n  const [typeList, setTypeList] = useState<UnionPropertyType[]>(\n    mergeProperties(propertyTypeList, brickProperties)\n  );\n\n  useImperativeHandle(ref, () => ({\n    validateFields: form.validateFields,\n    resetPropertyFields: (\n      typeList: PropertyType[],\n      properties: BrickProperties\n    ) => {\n      const restValue = mergeProperties(typeList, properties);\n      setTypeList(restValue);\n      form.resetFields();\n    },\n    getCurTypeList: (): UnionPropertyType[] => {\n      return typeList?.map((item) => pick(item, [\"name\", \"type\", \"mode\"]));\n    },\n  }));\n\n  useEffect(() => {\n    const newTypeList = mergeProperties(propertyTypeList, brickProperties);\n    setTypeList(newTypeList);\n\n    const newValue = calculateValue(\n      propertyTypeList,\n      brickProperties,\n      newTypeList\n    );\n    form.setFieldsValue(newValue);\n  }, [propertyTypeList, brickProperties]);\n\n  const handleLabelClick = (name: string): void => {\n    const selected = typeList.find((item) => item.name === name);\n    const index = typeList.findIndex((item) => item.name === name);\n    const nextMode =\n      selected.mode === ItemModeType.Advanced\n        ? ItemModeType.Normal\n        : ItemModeType.Advanced;\n\n    let value = selected.value;\n    if (nextMode === ItemModeType.Normal) {\n      if (supportMenuType.includes(selected.type as string)) {\n        value = matchNoramlMenuValue(value);\n      }\n    } else if (isNil(selected.value)) {\n      value = \"\";\n    } else {\n      value = yamlStringify(selected.value);\n    }\n    form.setFieldsValue({\n      [name]: value,\n    });\n    const newTypeList = update(typeList, {\n      $splice: [[index, 1, { ...selected, mode: nextMode }]],\n    });\n    setTypeList(newTypeList);\n  };\n\n  const renderLabel = (\n    item: UnionPropertyType,\n    hideIcon?: boolean\n  ): React.ReactElement => {\n    return (\n      <span>\n        <Tooltip title={item.description}>{item.name}</Tooltip>{\" \"}\n        {!hideIcon && labelIcon && (\n          <span\n            className={styles.iconContainer}\n            onClick={() => handleLabelClick(item.name)}\n          >\n            <GeneralIcon\n              icon={\n                item.mode === ItemModeType.Advanced\n                  ? labelIcon?.advanced\n                  : labelIcon.normal\n              }\n            />\n          </span>\n        )}\n      </span>\n    );\n  };\n\n  const renderEditorItem = (item: UnionPropertyType, hideIcon?: boolean) => {\n    return (\n      <CodeEditorFormItem\n        key={item.name}\n        name={item.name}\n        label={renderLabel(item, hideIcon) as any}\n        required={item.required === Required.True}\n        theme={theme === \"dark-v2\" ? \"monokai\" : \"tomorrow\"}\n        jsonSchema={item?.jsonSchema}\n        schemaRef={item?.schemaRef}\n        mode=\"brick_next_yaml\"\n      />\n    );\n  };\n\n  const renderStringItem = (item: UnionPropertyType): React.ReactElement => {\n    return item.mode === ItemModeType.Advanced ? (\n      renderEditorItem(item)\n    ) : (\n      <Form.Item\n        key={item.name}\n        label={renderLabel(item)}\n        name={item.name}\n        rules={[\n          {\n            required: item.required === Required.True,\n            message: `请输入${item.name}`,\n          },\n        ]}\n      >\n        <Input />\n      </Form.Item>\n    );\n  };\n\n  const renderBooleanItem = (item: UnionPropertyType): React.ReactElement => {\n    return item.mode === ItemModeType.Advanced ? (\n      renderEditorItem(item)\n    ) : (\n      <Form.Item\n        key={item.name}\n        label={renderLabel(item)}\n        name={item.name}\n        rules={[\n          {\n            required: item.required === Required.True,\n            message: `请输入${item.name}`,\n          },\n        ]}\n      >\n        <Radio.Group>\n          <Radio value={true}>true</Radio>\n          <Radio value={false}>false</Radio>\n        </Radio.Group>\n      </Form.Item>\n    );\n  };\n\n  const renderInputNumberItem = (\n    item: UnionPropertyType\n  ): React.ReactElement => {\n    return item.mode === ItemModeType.Advanced ? (\n      renderEditorItem(item)\n    ) : (\n      <Form.Item\n        key={item.name}\n        label={renderLabel(item)}\n        name={item.name}\n        rules={[\n          {\n            required: item.required === Required.True,\n            message: `请输入${item.name}`,\n          },\n        ]}\n      >\n        <InputNumber />\n      </Form.Item>\n    );\n  };\n\n  const renderStringListItem = (\n    item: UnionPropertyType\n  ): React.ReactElement => {\n    return item.mode === ItemModeType.Advanced ? (\n      renderEditorItem(item)\n    ) : (\n      <Form.Item\n        key={item.name}\n        label={renderLabel(item)}\n        name={item.name}\n        rules={[\n          {\n            required: item.required === Required.True,\n            message: `请输入${item.name}`,\n          },\n        ]}\n      >\n        <Select mode=\"tags\" />\n      </Form.Item>\n    );\n  };\n\n  const renderIconItem = (item: UnionPropertyType): React.ReactElement => {\n    return (\n      <IconSelectFormItem\n        key={item.name}\n        name={item.name}\n        label={renderLabel(item, true) as any}\n        required={item.required === Required.True}\n      />\n    );\n  };\n\n  const renderCodeEditorItem = (item: PropertyType): React.ReactElement => {\n    return renderEditorItem(item, true);\n  };\n\n  const renderColorItem = (item: PropertyType): React.ReactElement => {\n    return (\n      <ColorEditorItem\n        key={item.name}\n        name={item.name}\n        label={renderLabel(item, true)}\n        required={item.required === Required.True}\n      />\n    );\n  };\n\n  const renderMenuItem = (item: UnionPropertyType): React.ReactElement => {\n    return item.mode === ItemModeType.Advanced ? (\n      renderEditorItem(item)\n    ) : (\n      <MenuEditorItem\n        projectId={projectId}\n        key={item.name}\n        name={item.name}\n        label={renderLabel(item)}\n        required={item.required === Required.True}\n        menuSettingClick={menuSettingClick}\n      />\n    );\n  };\n\n  const getFormItem = (item: PropertyType): React.ReactElement => {\n    switch (item.type) {\n      case \"string\":\n        return renderStringItem(item);\n      case \"string[]\":\n        return renderStringListItem(item);\n      case \"number\":\n        return renderInputNumberItem(item);\n      case \"boolean\":\n        return renderBooleanItem(item);\n      case \"MenuIcon\":\n        return renderIconItem(item);\n      case \"Color\":\n        return renderColorItem(item);\n      case \"Menu\":\n      case \"SidebarSubMenu\":\n        return renderMenuItem(item);\n      default:\n        return renderCodeEditorItem(item);\n    }\n  };\n\n  return isEmpty(typeList) ? (\n    <Empty\n      className={styles.empty}\n      description={emptyConfig?.description}\n      image={theme === \"dark-v2\" ? <DarkEmpty /> : Empty.PRESENTED_IMAGE_SIMPLE}\n      imageStyle={emptyConfig?.imageStyle}\n    />\n  ) : (\n    <Form\n      name=\"propertyForm\"\n      layout=\"vertical\"\n      form={form}\n      onValuesChange={props.onValuesChange}\n      initialValues={calculateValue(\n        propertyTypeList,\n        brickProperties,\n        typeList\n      )}\n    >\n      <Collapse ghost defaultActiveKey=\"0\" className={styles.panelContainer}>\n        {groupByType(typeList)?.map(([category, list], index) => {\n          return (\n            <Collapse.Panel\n              header={upperFirst(category)}\n              key={index}\n              forceRender={true}\n            >\n              {list.map((item) => getFormItem(item))}\n            </Collapse.Panel>\n          );\n        })}\n\n        <Collapse.Panel\n          className={styles.otherPanel}\n          forceRender={true}\n          header={upperFirst(OTHER_FORM_ITEM_FIELD)}\n          key={OTHER_FORM_ITEM_FIELD}\n        >\n          <CodeEditorFormItem\n            name={OTHER_FORM_ITEM_FIELD}\n            label={\n              brickInfo?.type === \"template\"\n                ? \"other params\"\n                : \"other properties\"\n            }\n            mode=\"brick_next_yaml\"\n            maxLines={Infinity}\n          />\n        </Collapse.Panel>\n      </Collapse>\n    </Form>\n  );\n}\n\nexport const VisualPropertyForm = React.forwardRef(LegacyVisualPropertyForm);\n"],"mappings":"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"}

package/dist/cjs/visual-property-form/components/CodeEditor/CodeEditorFormItem.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeEditorFormItem = CodeEditorFormItem;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _lodash = require("lodash");
+
+var _antd = require("antd");
+
+var _codeEditorComponents = require("@next-libs/code-editor-components");
+
+function CodeEditorFormItem(props) {
+  const {
+    name,
+    label,
+    ...rest
+  } = props;
+  const [hasError, setHasError] = (0, _react.useState)(false);
+
+  const handleValidate = err => {
+    const error = (0, _lodash.some)(err, ["type", "error"]);
+    setHasError(error);
+  };
+
+  const validatorFn = async () => {
+    if (!hasError) {
+      return Promise.resolve();
+    } else {
+      return Promise.reject("请填写正确的 yaml 语法");
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    key: props.name,
+    name: props.name,
+    label: props.label,
+    rules: [{
+      required: props.required,
+      message: `请输入${props.name}`
+    }, {
+      validator: validatorFn
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_codeEditorComponents.CodeEditorItem, (0, _extends2.default)({
+    tabSize: 2,
+    minLines: 5,
+    maxLines: 12,
+    printMargin: false,
+    showLineNumbers: false,
+    theme: "tomorrow",
+    enableLiveAutocompletion: true,
+    onValidate: handleValidate
+  }, rest)));
+}
+//# sourceMappingURL=CodeEditorFormItem.js.map

package/dist/cjs/visual-property-form/components/CodeEditor/CodeEditorFormItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditorFormItem.js","names":["CodeEditorFormItem","props","name","label","rest","hasError","setHasError","useState","handleValidate","err","error","some","validatorFn","Promise","resolve","reject","required","message","validator"],"sources":["../../../../../src/visual-property-form/components/CodeEditor/CodeEditorFormItem.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { some } from \"lodash\";\nimport { Form } from \"antd\";\nimport { FormItemWrapperProps } from \"@next-libs/forms\";\nimport {\n  CodeEditorProps,\n  CodeEditorItem,\n  Error,\n} from \"@next-libs/code-editor-components\";\n\ninterface CodeEditorItemProps extends CodeEditorProps, FormItemWrapperProps {}\n\nexport function CodeEditorFormItem(\n  props: CodeEditorItemProps\n): React.ReactElement {\n  const { name, label, ...rest } = props;\n  const [hasError, setHasError] = useState(false);\n\n  const handleValidate = (err: Error[\"err\"]): void => {\n    const error = some(err, [\"type\", \"error\"]);\n    setHasError(error);\n  };\n\n  const validatorFn = async () => {\n    if (!hasError) {\n      return Promise.resolve();\n    } else {\n      return Promise.reject(\"请填写正确的 yaml 语法\");\n    }\n  };\n\n  return (\n    <Form.Item\n      key={props.name}\n      name={props.name}\n      label={props.label}\n      rules={[\n        { required: props.required, message: `请输入${props.name}` },\n        { validator: validatorFn },\n      ]}\n    >\n      <CodeEditorItem\n        tabSize={2}\n        minLines={5}\n        maxLines={12}\n        printMargin={false}\n        showLineNumbers={false}\n        theme=\"tomorrow\"\n        enableLiveAutocompletion={true}\n        onValidate={handleValidate}\n        {...rest}\n      ></CodeEditorItem>\n    </Form.Item>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAQO,SAASA,kBAAT,CACLC,KADK,EAEe;EACpB,MAAM;IAAEC,IAAF;IAAQC,KAAR;IAAe,GAAGC;EAAlB,IAA2BH,KAAjC;EACA,MAAM,CAACI,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAAS,KAAT,CAAhC;;EAEA,MAAMC,cAAc,GAAIC,GAAD,IAA6B;IAClD,MAAMC,KAAK,GAAG,IAAAC,YAAA,EAAKF,GAAL,EAAU,CAAC,MAAD,EAAS,OAAT,CAAV,CAAd;IACAH,WAAW,CAACI,KAAD,CAAX;EACD,CAHD;;EAKA,MAAME,WAAW,GAAG,YAAY;IAC9B,IAAI,CAACP,QAAL,EAAe;MACb,OAAOQ,OAAO,CAACC,OAAR,EAAP;IACD,CAFD,MAEO;MACL,OAAOD,OAAO,CAACE,MAAR,CAAe,gBAAf,CAAP;IACD;EACF,CAND;;EAQA,oBACE,6BAAC,UAAD,CAAM,IAAN;IACE,GAAG,EAAEd,KAAK,CAACC,IADb;IAEE,IAAI,EAAED,KAAK,CAACC,IAFd;IAGE,KAAK,EAAED,KAAK,CAACE,KAHf;IAIE,KAAK,EAAE,CACL;MAAEa,QAAQ,EAAEf,KAAK,CAACe,QAAlB;MAA4BC,OAAO,EAAG,MAAKhB,KAAK,CAACC,IAAK;IAAtD,CADK,EAEL;MAAEgB,SAAS,EAAEN;IAAb,CAFK;EAJT,gBASE,6BAAC,oCAAD;IACE,OAAO,EAAE,CADX;IAEE,QAAQ,EAAE,CAFZ;IAGE,QAAQ,EAAE,EAHZ;IAIE,WAAW,EAAE,KAJf;IAKE,eAAe,EAAE,KALnB;IAME,KAAK,EAAC,UANR;IAOE,wBAAwB,EAAE,IAP5B;IAQE,UAAU,EAAEJ;EARd,GASMJ,IATN,EATF,CADF;AAuBD"}

package/dist/cjs/visual-property-form/components/ColorEditor/ColorEditorItem.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorEditorItem = ColorEditorItem;
+exports.ColorPick = void 0;
+exports.LegacyColorPick = LegacyColorPick;
+exports.getPresetColors = getPresetColors;
+
+var _reactColor = require("react-color");
+
+var _basicComponents = require("@next-libs/basic-components");
+
+var _antd = require("antd");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ColorEditorModule = _interopRequireDefault(require("./ColorEditor.module.css"));
+
+function getPresetColors(colorMap) {
+  const colorList = [];
+
+  for (const [, group] of Object.entries(colorMap)) {
+    ["color", "background", "borderColor"].forEach(name => {
+      var _name;
+
+      const result = (_name = group[name]) === null || _name === void 0 ? void 0 : _name.match(/^var\((.+)\)/);
+
+      if (result) {
+        var _window$getComputedSt;
+
+        const colorHex = (_window$getComputedSt = window.getComputedStyle(document.documentElement).getPropertyValue(result[1])) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.trim();
+        colorHex && colorList.push(colorHex);
+      }
+    });
+  }
+
+  return colorList;
+}
+
+function LegacyColorPick(props, ref) {
+  const [value, setValue] = (0, _react.useState)(props.value);
+  const [visible, setVisible] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setValue(props.value);
+  }, [props.value]);
+
+  const handleChangeComplete = color => {
+    setValue(color.hex);
+    props.onChange(color.hex);
+  };
+
+  const handleClick = () => {
+    setVisible(true);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _ColorEditorModule.default.colorContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _ColorEditorModule.default.colorCube,
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _ColorEditorModule.default.colorContent,
+    style: {
+      backgroundColor: value
+    }
+  })), visible && /*#__PURE__*/_react.default.createElement("div", {
+    className: _ColorEditorModule.default.popover
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _ColorEditorModule.default.cover,
+    onClick: () => setVisible(false)
+  }), /*#__PURE__*/_react.default.createElement(_reactColor.SketchPicker, {
+    width: "230px",
+    ref: ref,
+    color: value,
+    onChangeComplete: handleChangeComplete,
+    presetColors: getPresetColors(_basicComponents.COLORS_MAP)
+  })));
+}
+
+const ColorPick = /*#__PURE__*/(0, _react.forwardRef)(LegacyColorPick);
+exports.ColorPick = ColorPick;
+
+function ColorEditorItem(props) {
+  return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    key: props.name,
+    name: props.name,
+    label: props.label,
+    rules: [{
+      required: props.required,
+      message: `请输入${props.name}`
+    }]
+  }, /*#__PURE__*/_react.default.createElement(ColorPick, null));
+}
+//# sourceMappingURL=ColorEditorItem.js.map

package/dist/cjs/visual-property-form/components/ColorEditor/ColorEditorItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorEditorItem.js","names":["getPresetColors","colorMap","colorList","group","Object","entries","forEach","name","result","match","colorHex","window","getComputedStyle","document","documentElement","getPropertyValue","trim","push","LegacyColorPick","props","ref","value","setValue","useState","visible","setVisible","useEffect","handleChangeComplete","color","hex","onChange","handleClick","styles","colorContainer","colorCube","colorContent","backgroundColor","popover","cover","COLORS_MAP","ColorPick","forwardRef","ColorEditorItem","label","required","message"],"sources":["../../../../../src/visual-property-form/components/ColorEditor/ColorEditorItem.tsx"],"sourcesContent":["import { ColorResult, SketchPicker } from \"react-color\";\nimport { COLORS_MAP, Colors } from \"@next-libs/basic-components\";\nimport { Form } from \"antd\";\nimport React, { useEffect, useState, forwardRef } from \"react\";\nimport styles from \"./ColorEditor.module.css\";\n\nexport interface ColorEditorItemProps {\n  name?: string;\n  label?: string | React.ReactElement;\n  required?: boolean;\n  value?: any;\n  onChange?: (value: string) => void;\n}\n\nexport function getPresetColors(\n  colorMap: Record<\n    Colors,\n    {\n      color: string;\n      background: string;\n      borderColor: string;\n    }\n  >\n): string[] {\n  const colorList: string[] = [];\n  for (const [, group] of Object.entries(colorMap)) {\n    [\"color\", \"background\", \"borderColor\"].forEach((name) => {\n      const result = (group as Record<string, any>)[name]?.match(\n        /^var\\((.+)\\)/\n      );\n      if (result) {\n        const colorHex = window\n          .getComputedStyle(document.documentElement)\n          .getPropertyValue(result[1])\n          ?.trim();\n        colorHex && colorList.push(colorHex);\n      }\n    });\n  }\n\n  return colorList;\n}\n\nexport function LegacyColorPick(\n  props: ColorEditorItemProps,\n  ref: React.Ref<any>\n) {\n  const [value, setValue] = useState(props.value);\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    setValue(props.value);\n  }, [props.value]);\n\n  const handleChangeComplete = (color: ColorResult) => {\n    setValue(color.hex);\n    props.onChange(color.hex);\n  };\n\n  const handleClick = () => {\n    setVisible(true);\n  };\n\n  return (\n    <div className={styles.colorContainer}>\n      <div className={styles.colorCube} onClick={handleClick}>\n        <div\n          className={styles.colorContent}\n          style={{ backgroundColor: value }}\n        />\n      </div>\n      {visible && (\n        <div className={styles.popover}>\n          <div className={styles.cover} onClick={() => setVisible(false)} />\n          <SketchPicker\n            width=\"230px\"\n            ref={ref}\n            color={value}\n            onChangeComplete={handleChangeComplete}\n            presetColors={getPresetColors(COLORS_MAP)}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const ColorPick = forwardRef(LegacyColorPick);\n\nexport function ColorEditorItem(props: ColorEditorItemProps) {\n  return (\n    <Form.Item\n      key={props.name}\n      name={props.name}\n      label={props.label}\n      rules={[{ required: props.required, message: `请输入${props.name}` }]}\n    >\n      <ColorPick />\n    </Form.Item>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAUO,SAASA,eAAT,CACLC,QADK,EASK;EACV,MAAMC,SAAmB,GAAG,EAA5B;;EACA,KAAK,MAAM,GAAGC,KAAH,CAAX,IAAwBC,MAAM,CAACC,OAAP,CAAeJ,QAAf,CAAxB,EAAkD;IAChD,CAAC,OAAD,EAAU,YAAV,EAAwB,aAAxB,EAAuCK,OAAvC,CAAgDC,IAAD,IAAU;MAAA;;MACvD,MAAMC,MAAM,YAAIL,KAAD,CAA+BI,IAA/B,CAAH,0CAAG,MAAsCE,KAAtC,CACb,cADa,CAAf;;MAGA,IAAID,MAAJ,EAAY;QAAA;;QACV,MAAME,QAAQ,4BAAGC,MAAM,CACpBC,gBADc,CACGC,QAAQ,CAACC,eADZ,EAEdC,gBAFc,CAEGP,MAAM,CAAC,CAAD,CAFT,CAAH,0DAAG,sBAGbQ,IAHa,EAAjB;QAIAN,QAAQ,IAAIR,SAAS,CAACe,IAAV,CAAeP,QAAf,CAAZ;MACD;IACF,CAXD;EAYD;;EAED,OAAOR,SAAP;AACD;;AAEM,SAASgB,eAAT,CACLC,KADK,EAELC,GAFK,EAGL;EACA,MAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,IAAAC,eAAA,EAASJ,KAAK,CAACE,KAAf,CAA1B;EACA,MAAM,CAACG,OAAD,EAAUC,UAAV,IAAwB,IAAAF,eAAA,EAAS,KAAT,CAA9B;EAEA,IAAAG,gBAAA,EAAU,MAAM;IACdJ,QAAQ,CAACH,KAAK,CAACE,KAAP,CAAR;EACD,CAFD,EAEG,CAACF,KAAK,CAACE,KAAP,CAFH;;EAIA,MAAMM,oBAAoB,GAAIC,KAAD,IAAwB;IACnDN,QAAQ,CAACM,KAAK,CAACC,GAAP,CAAR;IACAV,KAAK,CAACW,QAAN,CAAeF,KAAK,CAACC,GAArB;EACD,CAHD;;EAKA,MAAME,WAAW,GAAG,MAAM;IACxBN,UAAU,CAAC,IAAD,CAAV;EACD,CAFD;;EAIA,oBACE;IAAK,SAAS,EAAEO,0BAAA,CAAOC;EAAvB,gBACE;IAAK,SAAS,EAAED,0BAAA,CAAOE,SAAvB;IAAkC,OAAO,EAAEH;EAA3C,gBACE;IACE,SAAS,EAAEC,0BAAA,CAAOG,YADpB;IAEE,KAAK,EAAE;MAAEC,eAAe,EAAEf;IAAnB;EAFT,EADF,CADF,EAOGG,OAAO,iBACN;IAAK,SAAS,EAAEQ,0BAAA,CAAOK;EAAvB,gBACE;IAAK,SAAS,EAAEL,0BAAA,CAAOM,KAAvB;IAA8B,OAAO,EAAE,MAAMb,UAAU,CAAC,KAAD;EAAvD,EADF,eAEE,6BAAC,wBAAD;IACE,KAAK,EAAC,OADR;IAEE,GAAG,EAAEL,GAFP;IAGE,KAAK,EAAEC,KAHT;IAIE,gBAAgB,EAAEM,oBAJpB;IAKE,YAAY,EAAE3B,eAAe,CAACuC,2BAAD;EAL/B,EAFF,CARJ,CADF;AAsBD;;AAEM,MAAMC,SAAS,gBAAG,IAAAC,iBAAA,EAAWvB,eAAX,CAAlB;;;AAEA,SAASwB,eAAT,CAAyBvB,KAAzB,EAAsD;EAC3D,oBACE,6BAAC,UAAD,CAAM,IAAN;IACE,GAAG,EAAEA,KAAK,CAACZ,IADb;IAEE,IAAI,EAAEY,KAAK,CAACZ,IAFd;IAGE,KAAK,EAAEY,KAAK,CAACwB,KAHf;IAIE,KAAK,EAAE,CAAC;MAAEC,QAAQ,EAAEzB,KAAK,CAACyB,QAAlB;MAA4BC,OAAO,EAAG,MAAK1B,KAAK,CAACZ,IAAK;IAAtD,CAAD;EAJT,gBAME,6BAAC,SAAD,OANF,CADF;AAUD"}