amis-editor 5.2.3-beta.12 → 5.2.3

package/esm/renderer/style-control/ThemeClassName.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 类名输入框 + 自定义样式源码编辑器
+ */
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+export declare class BorderRenderer extends React.Component<FormControlProps> {
+    render(): JSX.Element;
+}

package/esm/renderer/style-control/ThemeClassName.js

@@ -0,0 +1,228 @@
+/**
+ * amis-editor v5.2.3
+ * Copyright 2018-2023 @fex
+ */
+
+import { __extends, __assign, __decorate } from 'tslib';
+import React__default, { useRef, useState, useEffect } from 'react';
+import { Button, Icon, Overlay, PopOver, Editor } from 'amis-ui';
+import { FormItem, render } from 'amis-core';
+import { parse } from 'amis-postcss';
+import { debounce } from 'lodash';
+import { i18n } from 'i18n-runtime';
+
+var valueMap = {
+  'margin-top': 'marginTop',
+  'margin-right': 'marginRight',
+  'margin-bottom': 'marginBottom',
+  'margin-left': 'marginLeft',
+  'padding-top': 'paddingTop',
+  'padding-right': 'paddingRight',
+  'padding-bottom': 'paddingBottom',
+  'padding-left': 'paddingLeft',
+  'border-top-width': 'top-border-width',
+  'border-right-width': 'right-border-width',
+  'border-bottom-width': 'bottom-border-width',
+  'border-left-width': 'left-border-width',
+  'border-top-style': 'top-border-style',
+  'border-right-style': 'right-border-style',
+  'border-bottom-style': 'bottom-border-style',
+  'border-left-style': 'left-border-style',
+  'border-top-color': 'top-border-color',
+  'border-right-color': 'right-border-color',
+  'border-bottom-color': 'bottom-border-color',
+  'border-left-color': 'left-border-color',
+  'font-size': 'fontSize',
+  'font-weight': 'fontWeight',
+  'line-height': 'lineHeight'
+};
+var fontStyle = ['color', 'font-weight', 'font-size', 'font-style', 'text-decoration', 'text-align', 'vertical-align', 'font-family', 'line-height'];
+function AmisStyleCodeEditor(props) {
+  var name = props.name,
+    classname = props.value,
+    suffix = props.suffix;
+  var _a = useState(''),
+    value = _a[0],
+    setValue = _a[1];
+  function getCssAndSetValue(classname, name, suffix) {
+    try {
+      var id = (classname === null || classname === void 0 ? void 0 : classname.replace(name + '-', '')) + (suffix ? '-' + suffix : '');
+      var dom = document.getElementById(id || '') || null;
+      var content = (dom === null || dom === void 0 ? void 0 : dom.innerHTML) || '';
+      var ast = parse(content);
+      var nodes_1 = [];
+      ast.nodes.forEach(function (node) {
+        var selector = node.selector;
+        if (!selector.endsWith('.hover') && !selector.endsWith('.active')) {
+          nodes_1.push(node);
+        }
+      });
+      ast.nodes = nodes_1;
+      var css = nodes_1.map(function (node) {
+        var style = node.nodes.map(function (n) {
+          return "".concat(n.prop, ": ").concat(n.value, ";");
+        });
+        return "".concat(node.selector, " {\n  ").concat(style.join('\n  '), "\n}");
+      }).join('\n\n');
+      setValue(css);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  useEffect(function () {
+    getCssAndSetValue(classname, name, suffix);
+  }, []);
+  function handleChange(value) {
+    setValue(value);
+    editorChange(value);
+  }
+  var editorChange = debounce(function (value) {
+    var _a;
+    try {
+      var ast = parse(value);
+      var data = props.data,
+        onBulkChange = props.onBulkChange,
+        name_1 = props.name;
+      var sourceCss = data.css || {};
+      var className_1 = {};
+      ast.nodes.forEach(function (node) {
+        var nodes = node.nodes;
+        var selector = node.selector;
+        var state = 'default';
+        if (!!~selector.indexOf(':hover:active')) {
+          state = 'active';
+        } else if (!!~selector.indexOf(':hover')) {
+          state = 'hover';
+        }
+        nodes.forEach(function (item) {
+          var prop = item.prop;
+          var cssValue = item.value;
+          if (!!~prop.indexOf('radius')) {
+            var type = 'radius:' + state;
+            !className_1[type] && (className_1[type] = {});
+            var radius = cssValue.split(' ');
+            className_1[type]['top-left-border-radius'] = radius[0];
+            className_1[type]['top-right-border-radius'] = radius[1];
+            className_1[type]['bottom-right-border-radius'] = radius[2];
+            className_1[type]['bottom-left-border-radius'] = radius[3];
+          } else if (!!~prop.indexOf('border')) {
+            !className_1['border:' + state] && (className_1['border:' + state] = {});
+            className_1['border:' + state][valueMap[prop] || prop] = cssValue;
+          } else if (!!~prop.indexOf('padding') || !!~prop.indexOf('margin')) {
+            !className_1['padding-and-margin:' + state] && (className_1['padding-and-margin:' + state] = {});
+            className_1['padding-and-margin:' + state][valueMap[prop] || prop] = cssValue;
+          } else if (fontStyle.includes(prop)) {
+            !className_1['font:' + state] && (className_1['font:' + state] = {});
+            className_1['font:' + state][valueMap[prop] || prop] = cssValue;
+          } else {
+            className_1[(valueMap[prop] || prop) + ':' + state] = cssValue;
+          }
+        });
+      });
+      var newCss = __assign(__assign({}, sourceCss), (_a = {}, _a[name_1] = className_1, _a));
+      onBulkChange && onBulkChange({
+        css: newCss
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  });
+  return React__default.createElement("div", {
+    className: "ThemeClassName-editor"
+  }, React__default.createElement("div", {
+    className: "ThemeClassName-editor-title"
+  }, "\u81EA\u5B9A\u4E49\u6837\u5F0F\u6E90\u7801"), React__default.createElement("div", {
+    className: "ThemeClassName-editor-close"
+  }, React__default.createElement(Button, {
+    onClick: props.onHide,
+    level: "link"
+  }, React__default.createElement(Icon, {
+    icon: "close",
+    className: "icon"
+  }))), React__default.createElement("div", {
+    className: "ThemeClassName-editor-content"
+  }, React__default.createElement(Editor, {
+    value: value,
+    language: "css",
+    onChange: handleChange,
+    options: {
+      automaticLayout: true,
+      lineNumbers: 'off',
+      glyphMargin: false,
+      tabSize: 2,
+      wordWrap: 'on',
+      lineDecorationsWidth: 0,
+      lineNumbersMinChars: 0,
+      selectOnLineNumbers: true,
+      scrollBeyondLastLine: false,
+      folding: true,
+      minimap: {
+        enabled: false
+      }
+    }
+  })));
+}
+function ThemeClassName(props) {
+  var ref = useRef(null);
+  var value = props.value;
+  var _a = useState(false),
+    showEditor = _a[0],
+    setShowEditor = _a[1];
+  function handleShowEditor() {
+    setShowEditor(true);
+  }
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    ref: ref,
+    className: "ThemeClassName"
+  }, React__default.createElement(Button, {
+    onClick: handleShowEditor,
+    level: "link",
+    className: ":ThemeClassName-button"
+  }, React__default.createElement(Icon, {
+    icon: "file",
+    className: "icon"
+  })), render({
+    type: 'input-tag',
+    name: 'class',
+    placeholder: i18n("ec8f3e4a298160dface2fda5c0125df2"),
+    delimiter: ' ',
+    value: value,
+    onChange: function (value) {
+      props.onChange && props.onChange(value);
+    }
+  })), React__default.createElement(Overlay, {
+    container: document.body,
+    placement: "left",
+    target: ref.current,
+    show: showEditor,
+    rootClose: false
+  }, React__default.createElement(PopOver, {
+    overlay: true,
+    onHide: function () {
+      return setShowEditor(false);
+    }
+  }, React__default.createElement(AmisStyleCodeEditor, __assign({}, props, {
+    onHide: function () {
+      return setShowEditor(false);
+    }
+  })))));
+}
+/** @class */(function (_super) {
+  __extends(BorderRenderer, _super);
+  function BorderRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  Object.defineProperty(BorderRenderer.prototype, "render", {
+    enumerable: false,
+    configurable: true,
+    writable: true,
+    value: function () {
+      return React__default.createElement(ThemeClassName, __assign({}, this.props));
+    }
+  });
+  BorderRenderer = __decorate([FormItem({
+    type: 'theme-classname',
+    strictMode: false
+  })], BorderRenderer);
+  return BorderRenderer;
+})(React__default.Component);

package/esm/renderer/style-control/font-family.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.3-beta.12
+ * amis-editor v5.2.3
  * Copyright 2018-2023 @fex
  */
 

package/esm/renderer/style-control/transformation.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.3-beta.12
+ * amis-editor v5.2.3
  * Copyright 2018-2023 @fex
  */
 

package/esm/renderer/textarea-formula/FormulaPicker.d.ts

@@ -8,5 +8,8 @@ export interface FormulaPickerProps {
     variableMode?: 'tabs' | 'tree';
     evalMode?: boolean;
 }
+export interface CustomFormulaPickerProps extends FormulaPickerProps {
+    [propName: string]: any;
+}
 declare const FormulaPicker: React.FC<FormulaPickerProps>;
 export default FormulaPicker;

package/esm/renderer/textarea-formula/FormulaPicker.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.3-beta.12
+ * amis-editor v5.2.3
  * Copyright 2018-2023 @fex
  */
 

package/esm/renderer/textarea-formula/TextareaFormulaControl.d.ts

@@ -5,6 +5,7 @@
 import React from 'react';
 import { FormControlProps } from 'amis-core';
 import { FormulaPlugin } from './plugin';
+import { CustomFormulaPickerProps } from './FormulaPicker';
 import CodeMirror from 'codemirror';
 import { VariableItem } from 'amis-ui/lib/components/formula/Editor';
 export interface TextareaFormulaControlProps extends FormControlProps {
@@ -34,6 +35,14 @@ export interface TextareaFormulaControlProps extends FormControlProps {
         icon?: string;
         className?: string;
     }>;
+    /**
+     * 整体点击长文本公式输入框
+     */
+    onOverallClick?: () => void;
+    /**
+     * 自定义fx面板
+     */
+    customFormulaPicker?: React.FC<CustomFormulaPickerProps>;
 }
 interface TextareaFormulaControlState {
     value: string;

package/esm/renderer/textarea-formula/TextareaFormulaControl.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.3-beta.12
+ * amis-editor v5.2.3
  * Copyright 2018-2023 @fex
  */
 
@@ -181,6 +181,9 @@ var TextareaFormulaControl = /** @class */function (_super) {
     configurable: true,
     writable: true,
     value: function () {
+      if (this.props.onOverallClick) {
+        return;
+      }
       this.setState({
         isFullscreen: !this.state.isFullscreen
       });
@@ -191,6 +194,9 @@ var TextareaFormulaControl = /** @class */function (_super) {
     configurable: true,
     writable: true,
     value: function () {
+      if (this.props.onOverallClick) {
+        return;
+      }
       this.setState({
         formulaPickerOpen: true,
         formulaPickerValue: '',
@@ -220,13 +226,16 @@ var TextareaFormulaControl = /** @class */function (_super) {
         _a.placeholder;
         var height = _a.height,
         additionalMenus = _a.additionalMenus,
-        rest = __rest(_a, ["className", "header", "label", "placeholder", "height", "additionalMenus"]);
+        onOverallClick = _a.onOverallClick,
+        customFormulaPicker = _a.customFormulaPicker,
+        rest = __rest(_a, ["className", "header", "label", "placeholder", "height", "additionalMenus", "onOverallClick", "customFormulaPicker"]);
       var _b = this.state,
         value = _b.value,
         formulaPickerOpen = _b.formulaPickerOpen,
         formulaPickerValue = _b.formulaPickerValue,
         isFullscreen = _b.isFullscreen,
         variables = _b.variables;
+      var FormulaPickerCmp = customFormulaPicker !== null && customFormulaPicker !== void 0 ? customFormulaPicker : FormulaPicker;
       // 输入框样式
       var resultBoxStyle = {};
       if (height) {
@@ -285,7 +294,10 @@ var TextareaFormulaControl = /** @class */function (_super) {
             return item === null || item === void 0 ? void 0 : item.onClick();
           }
         }, item.label));
-      })))), formulaPickerOpen ? React__default.createElement(FormulaPicker, {
+      })))), !!onOverallClick ? React__default.createElement("div", {
+        className: cx('ae-TextareaResultBox-overlay'),
+        onClick: onOverallClick
+      }) : null, formulaPickerOpen ? React__default.createElement(FormulaPickerCmp, __assign({}, this.props, {
         value: formulaPickerValue,
         initable: true,
         variables: variables,
@@ -297,7 +309,7 @@ var TextareaFormulaControl = /** @class */function (_super) {
           });
         },
         onConfirm: this.handleConfirm
-      }) : null);
+      })) : null);
     }
   });
   Object.defineProperty(TextareaFormulaControl, "defaultProps", {

package/esm/renderer/textarea-formula/plugin.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.3-beta.12
+ * amis-editor v5.2.3
  * Copyright 2018-2023 @fex
  */
 

package/esm/renderer/textarea-formula/utils.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.3-beta.12
+ * amis-editor v5.2.3
  * Copyright 2018-2023 @fex
  */
 

package/esm/tpl/api.js

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.3-beta.12
+ * amis-editor v5.2.3
  * Copyright 2018-2023 @fex
  */