amis-editor 5.2.5-beta.6 → 5.2.5-beta.7

package/lib/renderer/style-control/ThemeCssCode.js

@@ -0,0 +1,354 @@
+/**
+ * amis-editor v5.2.5-alpha.12
+ * Copyright 2018-2023 @fex
+ */
+
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var amisUi = require('amis-ui');
+var amisCore = require('amis-core');
+var amisPostcss = require('amis-postcss');
+var _ = require('lodash');
+require('../../icons/index.js');
+var themeLanguage = require('./themeLanguage.js');
+var cx = require('classnames');
+var i18nRuntime = require('i18n-runtime');
+var amisEditorCore = require('amis-editor-core');
+
+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);
+
+var valueMap = {};
+for (var key in amisCore.styleMap) {
+  valueMap[amisCore.styleMap[key]] = key;
+}
+var fontStyle = ['color', 'font-weight', 'font-size', 'font-style', 'text-decoration', 'text-align', 'vertical-align', 'font-family', 'line-height'];
+function AmisThemeCssCodeEditor(props) {
+  var themeClass = props.themeClass,
+    data = props.data;
+  var id = data.id.replace('u:', '');
+  var _a = tslib.__read(React.useState([]), 2),
+    cssNodes = _a[0],
+    setCssNodes = _a[1];
+  var _b = tslib.__read(React.useState(0), 2),
+    tabId = _b[0],
+    setTabId = _b[1];
+  function getCssAndSetValue(themeClass) {
+    try {
+      var newCssNodes_1 = [];
+      themeClass === null || themeClass === void 0 ? void 0 : themeClass.forEach(function (n) {
+        var classId = n.value ? id + '-' + n.value : id;
+        var state = n.state || ['default'];
+        var className = n.className || 'className';
+        var dom = document.getElementById(classId || '') || null;
+        var content = (dom === null || dom === void 0 ? void 0 : dom.innerHTML) || '';
+        var ast = amisPostcss.parse(content);
+        var nodes = [];
+        ast.nodes.forEach(function (node) {
+          var selector = node.selector;
+          if (!selector.endsWith('.hover') && !selector.endsWith('.active')) {
+            nodes.push(node);
+          }
+        });
+        var css = [];
+        state.forEach(function (s) {
+          css.push({
+            selector: ".".concat(className, "-").concat(id).concat(s === 'default' ? '' : ':' + s),
+            state: s,
+            value: ''
+          });
+        });
+        nodes.forEach(function (node) {
+          var style = node.nodes.map(function (n) {
+            return "".concat(n.prop, ": ").concat(n.value, ";");
+          });
+          var item = css.find(function (c) {
+            if (c.selector === node.selector || node.selector.endsWith(":".concat(c.state))) {
+              return c;
+            }
+            return false;
+          });
+          item.value = style.join('\n');
+        });
+        newCssNodes_1.push({
+          name: n.name || i18nRuntime.i18n("f01c3cd99ecb0c534cc47081d3433c9f"),
+          children: css
+        });
+      });
+      setCssNodes(newCssNodes_1);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  React.useEffect(function () {
+    getCssAndSetValue(themeClass);
+  }, []);
+  var editorChange = _.debounce(function (nodeTabs) {
+    try {
+      var data_1 = props.data,
+        onBulkChange = props.onBulkChange;
+      var sourceCss = data_1.themeCss || data_1.css || {};
+      var newCss_1 = {};
+      nodeTabs.forEach(function (tab) {
+        tab.children.forEach(function (node) {
+          var nodes = amisPostcss.parse(node.value).nodes.map(function (node) {
+            var prop = node.prop,
+              value = node.value;
+            return {
+              prop: prop,
+              value: value
+            };
+          }).filter(function (n) {
+            return n.value;
+          });
+          var selector = node.selector;
+          var nameEtr = /\.(.*)\-/.exec(selector);
+          var cssCode = {};
+          var name = nameEtr ? nameEtr[1] : '';
+          var state = 'default';
+          if (!!~selector.indexOf(':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;
+              !cssCode[type] && (cssCode[type] = {});
+              var radius = cssValue.split(' ');
+              cssCode[type]['top-left-border-radius'] = radius[0];
+              cssCode[type]['top-right-border-radius'] = radius[1];
+              cssCode[type]['bottom-right-border-radius'] = radius[2];
+              cssCode[type]['bottom-left-border-radius'] = radius[3];
+            } else if (!!~prop.indexOf('border')) {
+              !cssCode['border:' + state] && (cssCode['border:' + state] = {});
+              cssCode['border:' + state][valueMap[prop] || prop] = cssValue;
+            } else if (!!~prop.indexOf('padding') || !!~prop.indexOf('margin')) {
+              !cssCode['padding-and-margin:' + state] && (cssCode['padding-and-margin:' + state] = {});
+              cssCode['padding-and-margin:' + state][valueMap[prop] || prop] = cssValue;
+            } else if (fontStyle.includes(prop)) {
+              !cssCode['font:' + state] && (cssCode['font:' + state] = {});
+              cssCode['font:' + state][valueMap[prop] || prop] = cssValue;
+            } else {
+              cssCode[(valueMap[prop] || prop) + ':' + state] = cssValue;
+            }
+          });
+          if (newCss_1[name]) {
+            newCss_1[name] = Object.assign(newCss_1[name], cssCode);
+          } else {
+            newCss_1[name] = cssCode;
+          }
+        });
+      });
+      onBulkChange && onBulkChange({
+        themeCss: tslib.__assign(tslib.__assign({}, sourceCss), newCss_1)
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  });
+  function handleChange(value, i, j) {
+    var newCssNodes = cssNodes;
+    newCssNodes[i].children[j].value = value;
+    setCssNodes(newCssNodes); // 好像不需要这个?
+    editorChange(newCssNodes);
+  }
+  function formateTitle(title) {
+    if (title.endsWith('hover')) {
+      return '悬浮态样式';
+    } else if (title.endsWith('active')) {
+      return '点击态样式';
+    } else if (title.endsWith('disabled')) {
+      return '禁用态样式';
+    }
+    return '常规态样式';
+  }
+  return React__default["default"].createElement("div", {
+    className: "ThemeCssCode-editor"
+  }, React__default["default"].createElement("div", {
+    className: "ThemeCssCode-editor-title"
+  }, "\u7F16\u8F91\u6837\u5F0F\u6E90\u7801"), React__default["default"].createElement("div", {
+    className: "ThemeCssCode-editor-close"
+  }, React__default["default"].createElement(amisUi.Button, {
+    onClick: props.onHide,
+    level: "link"
+  }, React__default["default"].createElement(amisEditorCore.Icon, {
+    icon: "close",
+    className: "icon"
+  }))), React__default["default"].createElement("div", {
+    className: "ThemeCssCode-editor-content"
+  }, React__default["default"].createElement("div", {
+    className: "ThemeCssCode-editor-content-header"
+  }, cssNodes.map(function (node, index) {
+    return React__default["default"].createElement("div", {
+      key: index,
+      onClick: function () {
+        return setTabId(index);
+      },
+      className: cx__default["default"]('ThemeCssCode-editor-content-header-title', index === tabId && 'ThemeCssCode-editor-content-header-title--active')
+    }, node.name);
+  })), React__default["default"].createElement("div", {
+    className: "ThemeCssCode-editor-content-main"
+  }, cssNodes.map(function (node, i) {
+    var children = node.children;
+    return React__default["default"].createElement("div", {
+      key: i,
+      className: cx__default["default"](i !== tabId && 'ThemeCssCode-editor-content-body--hidden')
+    }, children.map(function (css, j) {
+      return React__default["default"].createElement("div", {
+        className: "ThemeCssCode-editor-content-body",
+        key: "".concat(i, "-").concat(j, "-").concat(css.selector),
+        id: "".concat(i, "-").concat(j, "-").concat(css.selector)
+      }, children.length > 1 ? React__default["default"].createElement("div", {
+        className: "ThemeCssCode-editor-content-body-title"
+      }, formateTitle(css.selector)) : null, React__default["default"].createElement("div", {
+        className: "ThemeCssCode-editor-content-body-editor"
+      }, React__default["default"].createElement(amisUi.Editor, {
+        value: css.value,
+        editorFactory: themeLanguage["default"],
+        options: {
+          onChange: function (value) {
+            return handleChange(value, i, j);
+          }
+        }
+      })));
+    }));
+  }))));
+}
+function AmisStyleCodeEditor(props) {
+  var data = props.data,
+    onBulkChange = props.onBulkChange;
+  var style = data.style;
+  var _a = tslib.__read(React.useState(''), 2),
+    value = _a[0],
+    setValue = _a[1];
+  function getCssAndSetValue(data) {
+    if (_.isEmpty(data)) {
+      return '';
+    }
+    var str = '';
+    for (var key in data) {
+      if (key === 'radius') {
+        str += "border-radius: ".concat(data.radius['top-left-border-radius'] + ' ' + data.radius['top-right-border-radius'] + ' ' + data.radius['bottom-right-border-radius'] + ' ' + data.radius['bottom-left-border-radius'], ";\n");
+      } else {
+        str += "".concat(amisCore.styleMap[key] || key, ": ").concat(data[key], ";\n");
+      }
+    }
+    return str;
+  }
+  React.useEffect(function () {
+    var res = getCssAndSetValue(style);
+    setValue(res);
+  }, []);
+  var editorChange = _.debounce(function (value) {
+    var newStyle = {};
+    try {
+      var style_1 = amisPostcss.parse(value);
+      style_1.nodes.forEach(function (node) {
+        var prop = node.prop,
+          value = node.value;
+        if (value) {
+          if (prop === 'border-radius') {
+            var radius = value.split(' ');
+            newStyle['radius'] = {
+              'top-left-border-radius': radius[0] || '',
+              'top-right-border-radius': radius[1] || '',
+              'bottom-right-border-radius': radius[2] || '',
+              'bottom-left-border-radius': radius[3] || ''
+            };
+          } else {
+            newStyle[valueMap[prop] || prop] = value;
+          }
+        }
+      });
+      onBulkChange && onBulkChange({
+        style: newStyle
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  });
+  function handleChange(value) {
+    editorChange(value);
+    setValue(value);
+  }
+  return React__default["default"].createElement("div", {
+    className: "ThemeCssCode-editor"
+  }, React__default["default"].createElement("div", {
+    className: "ThemeCssCode-editor-title"
+  }, "\u7F16\u8F91\u6837\u5F0F\u6E90\u7801"), React__default["default"].createElement("div", {
+    className: "ThemeCssCode-editor-close"
+  }, React__default["default"].createElement(amisUi.Button, {
+    onClick: props.onHide,
+    level: "link"
+  }, React__default["default"].createElement(amisEditorCore.Icon, {
+    icon: "close",
+    className: "icon"
+  }))), React__default["default"].createElement("div", {
+    className: "ThemeCssCode-editor-content"
+  }, React__default["default"].createElement(amisUi.Editor, {
+    value: value,
+    editorFactory: themeLanguage["default"],
+    options: {
+      onChange: handleChange
+    }
+  })));
+}
+function ThemeCssCode(props) {
+  var ref = React.useRef(null);
+  var _a = tslib.__read(React.useState(false), 2),
+    showEditor = _a[0],
+    setShowEditor = _a[1];
+  function handleShowEditor() {
+    setShowEditor(true);
+  }
+  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
+    ref: ref,
+    className: "ThemeCssCode"
+  }, React__default["default"].createElement(amisUi.Button, {
+    onClick: handleShowEditor,
+    className: ":ThemeCssCode-button"
+  }, React__default["default"].createElement(amisEditorCore.Icon, {
+    icon: "theme-css",
+    className: "icon"
+  }), " \u7F16\u8F91\u6837\u5F0F\u6E90\u7801")), React__default["default"].createElement(amisUi.Overlay, {
+    container: document.body,
+    placement: "left",
+    target: ref.current,
+    show: showEditor,
+    rootClose: false
+  }, React__default["default"].createElement(amisUi.PopOver, {
+    overlay: true,
+    onHide: function () {
+      return setShowEditor(false);
+    }
+  }, props.isLayout ? React__default["default"].createElement(AmisStyleCodeEditor, tslib.__assign({}, props, {
+    onHide: function () {
+      return setShowEditor(false);
+    }
+  })) : React__default["default"].createElement(AmisThemeCssCodeEditor, tslib.__assign({}, props, {
+    onHide: function () {
+      return setShowEditor(false);
+    }
+  })))));
+}
+/** @class */(function (_super) {
+  tslib.__extends(ThemeCssCodeRenderer, _super);
+  function ThemeCssCodeRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  ThemeCssCodeRenderer.prototype.render = function () {
+    return React__default["default"].createElement(ThemeCssCode, tslib.__assign({}, this.props));
+  };
+  ThemeCssCodeRenderer = tslib.__decorate([amisCore.FormItem({
+    type: 'theme-cssCode',
+    strictMode: false
+  })], ThemeCssCodeRenderer);
+  return ThemeCssCodeRenderer;
+})(React__default["default"].Component);

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

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

package/lib/renderer/style-control/helper.d.ts

@@ -0,0 +1,2 @@
+export declare const inputStateTpl: (className: string, path?: string) => any[];
+export declare const inputStateFunc: (visibleOn: string, state: string, className: string, path: string, options?: any) => any[];

package/lib/renderer/style-control/helper.js

@@ -0,0 +1,76 @@
+/**
+ * amis-editor v5.2.5-alpha.12
+ * Copyright 2018-2023 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var amisEditorCore = require('amis-editor-core');
+var i18nRuntime = require('i18n-runtime');
+
+var inputStateTpl = function (className, path) {
+  if (path === void 0) {
+    path = '';
+  }
+  return tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([{
+    type: 'select',
+    name: 'editorState',
+    label: i18nRuntime.i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
+    selectFirst: true,
+    options: [{
+      label: i18nRuntime.i18n("22b777e6fcb613b8ba83ced9594cd07e"),
+      value: 'default'
+    }, {
+      label: i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
+      value: 'hover'
+    }, {
+      label: i18nRuntime.i18n("4363c17ebb346b646af55bd8c8075915"),
+      value: 'active'
+    }]
+  }, {
+    type: 'hidden',
+    name: 'editorPath',
+    value: path
+  }], tslib.__read(inputStateFunc("${editorState == 'default' || !editorState}", 'default', className, path)), false), tslib.__read(inputStateFunc("${editorState == 'hover'}", 'hover', className, path)), false), tslib.__read(inputStateFunc("${editorState == 'active'}", 'active', className, path)), false);
+};
+var inputStateFunc = function (visibleOn, state, className, path, options) {
+  if (options === void 0) {
+    options = [];
+  }
+  return tslib.__spreadArray([amisEditorCore.getSchemaTpl('theme:font', {
+    label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
+    name: "".concat(className, ".font:").concat(state),
+    visibleOn: visibleOn,
+    editorThemePath: "".concat(path, ".").concat(state, ".body.font"),
+    state: state
+  }), amisEditorCore.getSchemaTpl('theme:colorPicker', {
+    label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
+    name: "".concat(className, ".background:").concat(state),
+    labelMode: 'input',
+    needGradient: true,
+    visibleOn: visibleOn,
+    editorThemePath: "".concat(path, ".").concat(state, ".body.bg-color"),
+    state: state
+  }), amisEditorCore.getSchemaTpl('theme:border', {
+    name: "".concat(className, ".border:").concat(state),
+    visibleOn: visibleOn,
+    editorThemePath: "".concat(path, ".").concat(state, ".body.border"),
+    state: state
+  }), amisEditorCore.getSchemaTpl('theme:paddingAndMargin', {
+    name: "".concat(className, ".padding-and-margin:").concat(state),
+    visibleOn: visibleOn,
+    editorThemePath: "".concat(path, ".").concat(state, ".body.padding-and-margin"),
+    state: state
+  }), amisEditorCore.getSchemaTpl('theme:radius', {
+    name: "".concat(className, ".radius:").concat(state),
+    visibleOn: visibleOn,
+    editorThemePath: "".concat(path, ".").concat(state, ".body.border"),
+    state: state
+  })], tslib.__read(options), false);
+};
+
+exports.inputStateFunc = inputStateFunc;
+exports.inputStateTpl = inputStateTpl;

package/lib/renderer/style-control/themeLanguage.d.ts

@@ -0,0 +1 @@
+export default function editorFactory(containerElement: HTMLElement, monaco: any, options: any): any;