amis-editor 5.2.0-beta.1 → 5.2.0-beta.2

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

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.1
+ * amis-editor v5.2.0-beta.2
  * Copyright 2018-2022 @fex
  */
 
@@ -12,6 +12,7 @@ var React = require('react');
 var mapValues = require('lodash/mapValues');
 var amis = require('amis');
 var transformation = require('./transformation.js');
+var i18nRuntime = require('i18n-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,100 +27,104 @@ var mapValues__default = /*#__PURE__*/_interopDefaultLegacy(mapValues);
  * x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色
  * 插页(阴影向内) | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色
  */
+
 function BoxShadow(_a) {
-    var _b = _a.value, value = _b === void 0 ? '' : _b, onChange = _a.onChange;
-    var boxShadowContext = mapValues__default["default"](transformation.parseBoxShadow(typeof value !== 'string' ? '' : value), function (value, key, collection) {
-        return key === 'color' || key === 'inset' ? value : { length: value, unit: 'px' };
-    });
-    // style-box-shadow组件name需要具体指定，比如style.boxShadow，否则取不到值
-    var handleSubmit = function (formValue, action) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(transformation.normalizeBoxShadow(formValue).boxShadow);
+  var _b = _a.value,
+      value = _b === void 0 ? '' : _b,
+      onChange = _a.onChange,
+      render = _a.render;
+  var boxShadowContext = mapValues__default["default"](transformation.parseBoxShadow(typeof value !== 'string' ? '' : value), function (value, key, collection) {
+    return key === 'color' || key === 'inset' ? value : {
+      length: value,
+      unit: 'px'
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, amis.render({
-        type: 'form',
-        wrapWithPanel: false,
-        panelClassName: 'border-none shadow-none mb-0',
-        bodyClassName: 'p-none',
-        actionsClassName: 'border-none mt-2.5',
-        wrapperComponent: 'div',
-        formLazyChange: true,
-        preventEnterSubmit: true,
-        submitOnChange: true,
-        body: tslib.__spreadArray(tslib.__spreadArray([], [
-            {
-                name: 'X轴偏移量',
-                field: 'x'
-            },
-            {
-                name: 'Y轴偏移量',
-                field: 'y'
-            },
-            {
-                name: '模糊半径',
-                field: 'blur'
-            },
-            {
-                name: '扩散半径',
-                field: 'spread'
-            }
-        ].map(function (item) { return ({
-            type: 'combo',
-            name: item.field,
-            label: item.name,
-            formClassName: 'ae-BoxShadow-group',
-            items: [
-                {
-                    type: 'input-range',
-                    label: false,
-                    name: 'length',
-                    max: 120,
-                    min: 0,
-                    step: 1
-                },
-                {
-                    type: 'select',
-                    label: false,
-                    name: 'unit',
-                    columnClassName: 'ae-BoxShadow-unit',
-                    size: 'xs',
-                    options: ['px']
-                    // TODO: 暂时先支持px
-                    // options: ['px', 'em', 'rem', 'vw', 'vh']
-                }
-            ]
-        }); }), true), [
-            {
-                type: 'switch',
-                name: 'inset',
-                label: '内阴影',
-                mode: 'row',
-                inputClassName: 'inline-flex justify-between flex-row-reverse'
-            },
-            {
-                type: 'input-color',
-                name: 'color',
-                label: '阴影颜色',
-                placeholder: '设置阴影颜色',
-                mode: 'row'
-            }
-        ], false)
+  }); // style-box-shadow组件name需要具体指定，比如style.boxShadow，否则取不到值
+
+  var handleSubmit = function (formValue, action) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(transformation.normalizeBoxShadow(formValue).boxShadow);
+  };
+
+  return React__default["default"].createElement(React__default["default"].Fragment, null, render('inner', {
+    type: 'form',
+    wrapWithPanel: false,
+    panelClassName: 'border-none shadow-none mb-0',
+    bodyClassName: 'p-none',
+    actionsClassName: 'border-none mt-2.5',
+    wrapperComponent: 'div',
+    formLazyChange: true,
+    preventEnterSubmit: true,
+    submitOnChange: true,
+    body: tslib.__spreadArray(tslib.__spreadArray([], [{
+      name: i18nRuntime.i18n("af208c560d926f0daf4b2ce2d396505d"),
+      field: 'x'
+    }, {
+      name: i18nRuntime.i18n("b6b46126bfb0851ca10e74541c5d7be1"),
+      field: 'y'
+    }, {
+      name: i18nRuntime.i18n("4a32b29da68a6ee204b3743e0fab8bb3"),
+      field: 'blur'
+    }, {
+      name: i18nRuntime.i18n("22d460dcddb7fda718bc62034c459158"),
+      field: 'spread'
+    }].map(function (item) {
+      return {
+        type: 'combo',
+        name: item.field,
+        label: item.name,
+        formClassName: 'ae-BoxShadow-group',
+        items: [{
+          type: 'input-range',
+          label: false,
+          name: 'length',
+          max: 120,
+          min: 0,
+          step: 1
+        }, {
+          type: 'select',
+          label: false,
+          name: 'unit',
+          columnClassName: 'ae-BoxShadow-unit',
+          size: 'xs',
+          options: ['px'] // TODO: 暂时先支持px
+          // options: ['px', 'em', 'rem', 'vw', 'vh']
+
+        }]
+      };
+    }), true), [{
+      type: 'switch',
+      name: 'inset',
+      label: i18nRuntime.i18n("b24a723b73f96ab3340fe9502370ee13"),
+      mode: 'row',
+      inputClassName: 'inline-flex justify-between flex-row-reverse'
     }, {
-        data: boxShadowContext,
-        onSubmit: handleSubmit
-    })));
+      type: 'input-color',
+      name: 'color',
+      label: i18nRuntime.i18n("1cbac849ccc41edb12271d9fe9b65b5f"),
+      placeholder: i18nRuntime.i18n("e94d6fc08a97892ff9d8c8d9a8d9e0ab"),
+      mode: 'row'
+    }], false)
+  }, {
+    data: boxShadowContext,
+    onSubmit: handleSubmit
+  }));
 }
-/** @class */ ((function (_super) {
-    tslib.__extends(BoxShadowRenderer, _super);
-    function BoxShadowRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    BoxShadowRenderer.prototype.render = function () {
-        return React__default["default"].createElement(BoxShadow, tslib.__assign({}, this.props));
-    };
-    BoxShadowRenderer = tslib.__decorate([
-        amis.FormItem({ type: 'style-box-shadow' })
-    ], BoxShadowRenderer);
-    return BoxShadowRenderer;
-})(React__default["default"].Component));
+
+/** @class */
+(function (_super) {
+  tslib.__extends(BoxShadowRenderer, _super);
+
+  function BoxShadowRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  BoxShadowRenderer.prototype.render = function () {
+    return React__default["default"].createElement(BoxShadow, tslib.__assign({}, this.props));
+  };
+
+  BoxShadowRenderer = tslib.__decorate([amis.FormItem({
+    type: 'style-box-shadow'
+  })], BoxShadowRenderer);
+  return BoxShadowRenderer;
+})(React__default["default"].Component);
 
 exports["default"] = BoxShadow;

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

@@ -1,5 +1,5 @@
 /**
- * amis-editor v5.2.0-beta.1
+ * amis-editor v5.2.0-beta.2
  * Copyright 2018-2022 @fex
  */
 
@@ -10,7 +10,8 @@ var React = require('react');
 var pick = require('lodash/pick');
 var mapValues = require('lodash/mapValues');
 var amis = require('amis');
-var AMisCodeEditor = require('amis-editor-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 }; }
 
@@ -22,212 +23,179 @@ var mapValues__default = /*#__PURE__*/_interopDefaultLegacy(mapValues);
  * @file Display
  * @description 布局展示相关控件
  */
+
 var Display = function (props) {
-    var onChange = props.onChange, value = props.value;
-    // 下拉菜单通用渲染
-    var menuTpl = {
-        type: 'html',
-        html: "<span>${label}</span><code class='ae-Code'>${value}</code>",
-        className: 'ae-selection-code'
-    };
-    var displayContext = pick__default["default"](AMisCodeEditor.isObject(value) ? value : {}, [
-        'display',
-        'flexWrap',
-        'flexDirection',
-        'justifyContent',
-        'alignItems'
-    ]);
-    if (!displayContext.display) {
-        displayContext.display = 'default';
-    }
-    var handleSubmit = function (form, action) {
-        var displayValue = form.display === 'flex'
-            ? form
-            : mapValues__default["default"](displayContext, function (value, key) {
-                // 非flex布局/默认布局需要把不相关的参数干掉
-                return key !== 'display' || (key === 'display' && form[key] === 'default')
-                    ? undefined
-                    : form[key];
-            });
-        onChange === null || onChange === void 0 ? void 0 : onChange(tslib.__assign(tslib.__assign({}, value), displayValue));
-    };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, amis.render({
-        type: 'form',
-        wrapWithPanel: false,
-        panelClassName: 'border-none shadow-none mb-0',
-        bodyClassName: 'p-none',
-        actionsClassName: 'border-none mt-2.5',
-        wrapperComponent: 'div',
-        formLazyChange: true,
-        preventEnterSubmit: true,
-        submitOnChange: true,
-        body: [
-            {
-                label: '显示类型',
-                name: 'display',
-                type: 'select',
-                mode: 'row',
-                menuTpl: menuTpl,
-                options: [
-                    {
-                        label: '默认',
-                        value: 'default'
-                    },
-                    {
-                        label: '区块',
-                        icon: 'display-block',
-                        value: 'block'
-                    },
-                    {
-                        label: '行内区块',
-                        icon: 'display-inline-block',
-                        value: 'inline-block'
-                    },
-                    {
-                        label: '行内元素',
-                        icon: 'display-inline',
-                        value: 'inline'
-                    },
-                    {
-                        label: '弹性布局',
-                        icon: 'display-flex',
-                        value: 'flex'
-                    }
-                ]
-            },
-            {
-                type: 'wrapper',
-                visibleOn: "this.display === 'flex'",
-                className: 'ae-Display-group',
-                body: [
-                    {
-                        type: 'tpl',
-                        tpl: '弹性布局配置',
-                        className: 'text-base font-bold mb-1'
-                    },
-                    {
-                        label: '自动换行',
-                        name: 'flexWrap',
-                        type: 'switch',
-                        trueValue: 'wrap',
-                        falseValue: 'nowrap',
-                        mode: 'row',
-                        inputClassName: 'inline-flex justify-between flex-row-reverse',
-                        clearValueOnHidden: true
-                    },
-                    {
-                        label: '主轴方向',
-                        name: 'flexDirection',
-                        type: 'select',
-                        clearValueOnHidden: true,
-                        menuTpl: menuTpl,
-                        options: [
-                            {
-                                label: '默认水平',
-                                value: 'row',
-                                icon: 'drow'
-                            },
-                            {
-                                label: '默认垂直',
-                                value: 'column',
-                                icon: 'dcolumn'
-                            },
-                            {
-                                label: '水平反向',
-                                value: 'row-reverse',
-                                icon: 'drowReverse'
-                            },
-                            {
-                                label: '垂直反向',
-                                value: 'column-reverse',
-                                icon: 'dcolumnReverse'
-                            }
-                        ]
-                    },
-                    {
-                        label: '主轴对齐方式',
-                        type: 'select',
-                        name: 'justifyContent',
-                        clearValueOnHidden: true,
-                        menuTpl: menuTpl,
-                        options: [
-                            {
-                                label: '起始端对齐',
-                                value: 'flex-start'
-                            },
-                            {
-                                label: '居中对齐',
-                                value: 'center'
-                            },
-                            {
-                                label: '末尾端对齐',
-                                value: 'flex-end'
-                            },
-                            {
-                                label: '首尾留空',
-                                value: 'space-around'
-                            },
-                            {
-                                label: '首尾对齐',
-                                value: 'space-between'
-                            },
-                            {
-                                label: '元素等间距',
-                                value: 'space-evenly'
-                            },
-                            {
-                                label: '自动拉伸',
-                                value: 'stretch'
-                            }
-                        ]
-                    },
-                    {
-                        label: '交叉轴对齐方式',
-                        type: 'select',
-                        name: 'alignItems',
-                        clearValueOnHidden: true,
-                        menuTpl: menuTpl,
-                        options: [
-                            {
-                                label: '起始端对齐',
-                                value: 'flex-start'
-                            },
-                            {
-                                label: '居中对齐',
-                                value: 'center'
-                            },
-                            {
-                                label: '末尾端对齐',
-                                value: 'flex-end'
-                            },
-                            {
-                                label: '基线对齐',
-                                value: 'baseline'
-                            },
-                            {
-                                label: '自动拉伸',
-                                value: 'stretch'
-                            }
-                        ]
-                    }
-                ]
-            }
-        ]
+  var onChange = props.onChange,
+      value = props.value,
+      render = props.render; // 下拉菜单通用渲染
+
+  var menuTpl = {
+    type: 'html',
+    html: "<span>${label}</span><code class='ae-Code'>${value}</code>",
+    className: 'ae-selection-code'
+  };
+  var displayContext = pick__default["default"](amisEditorCore.isObject(value) ? value : {}, ['display', 'flexWrap', 'flexDirection', 'justifyContent', 'alignItems']);
+
+  if (!displayContext.display) {
+    displayContext.display = 'default';
+  }
+
+  var handleSubmit = function (form, action) {
+    var displayValue = form.display === 'flex' ? form : mapValues__default["default"](displayContext, function (value, key) {
+      // 非flex布局/默认布局需要把不相关的参数干掉
+      return key !== 'display' || key === 'display' && form[key] === 'default' ? undefined : form[key];
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(tslib.__assign(tslib.__assign({}, value), displayValue));
+  };
+
+  return React__default["default"].createElement(React__default["default"].Fragment, null, render('inner', {
+    type: 'form',
+    wrapWithPanel: false,
+    panelClassName: 'border-none shadow-none mb-0',
+    bodyClassName: 'p-none',
+    actionsClassName: 'border-none mt-2.5',
+    wrapperComponent: 'div',
+    formLazyChange: true,
+    preventEnterSubmit: true,
+    submitOnChange: true,
+    body: [{
+      label: i18nRuntime.i18n("a5d833839a610994dc4752e2d91f4192"),
+      name: 'display',
+      type: 'select',
+      mode: 'row',
+      menuTpl: menuTpl,
+      options: [{
+        label: i18nRuntime.i18n("18c63459a2c069022c7790430f761214"),
+        value: 'default'
+      }, {
+        label: i18nRuntime.i18n("2c86d897c71cc9c2e648222a200d5bbb"),
+        icon: 'display-block',
+        value: 'block'
+      }, {
+        label: i18nRuntime.i18n("0b0052c532b457b2d032c9f56af9e4e5"),
+        icon: 'display-inline-block',
+        value: 'inline-block'
+      }, {
+        label: i18nRuntime.i18n("70d457cd36de1acefe7d9587f3f862c9"),
+        icon: 'display-inline',
+        value: 'inline'
+      }, {
+        label: i18nRuntime.i18n("b5f55e5c7101d9be5218d63850e1ad8b"),
+        icon: 'display-flex',
+        value: 'flex'
+      }]
     }, {
-        data: displayContext,
-        onSubmit: handleSubmit
-    })));
+      type: 'wrapper',
+      visibleOn: "this.display === 'flex'",
+      className: 'ae-Display-group',
+      body: [{
+        type: 'tpl',
+        tpl: i18nRuntime.i18n("a648bd0b9eb3c86e39cabeac484917a5"),
+        className: 'text-base font-bold mb-1'
+      }, {
+        label: i18nRuntime.i18n("452dba7c65211630f8066b070fdf157f"),
+        name: 'flexWrap',
+        type: 'switch',
+        trueValue: 'wrap',
+        falseValue: 'nowrap',
+        mode: 'row',
+        inputClassName: 'inline-flex justify-between flex-row-reverse',
+        clearValueOnHidden: true
+      }, {
+        label: i18nRuntime.i18n("098d946b6f0cc85110c54cfac8691cc3"),
+        name: 'flexDirection',
+        type: 'select',
+        clearValueOnHidden: true,
+        menuTpl: menuTpl,
+        options: [{
+          label: i18nRuntime.i18n("aee1aeb8d65547f8a368bd7364cacf12"),
+          value: 'row',
+          icon: 'drow'
+        }, {
+          label: i18nRuntime.i18n("4c38eb0fea71a9506fd434a7ac5cb1c2"),
+          value: 'column',
+          icon: 'dcolumn'
+        }, {
+          label: i18nRuntime.i18n("ae07817b441091793c8af39256908373"),
+          value: 'row-reverse',
+          icon: 'drowReverse'
+        }, {
+          label: i18nRuntime.i18n("618515fd68ecfc4a5b58462f0cb9666b"),
+          value: 'column-reverse',
+          icon: 'dcolumnReverse'
+        }]
+      }, {
+        label: i18nRuntime.i18n("58554717be87c1f8a6d6c769f74f0679"),
+        type: 'select',
+        name: 'justifyContent',
+        clearValueOnHidden: true,
+        menuTpl: menuTpl,
+        options: [{
+          label: i18nRuntime.i18n("4ba6c2256050d805ae5cd1e0e84737cf"),
+          value: 'flex-start'
+        }, {
+          label: i18nRuntime.i18n("56c17ba6a56c01706ae00a31611deb03"),
+          value: 'center'
+        }, {
+          label: i18nRuntime.i18n("abeb360ab1e66534a041fb8b44e1a00e"),
+          value: 'flex-end'
+        }, {
+          label: i18nRuntime.i18n("dfc71567fb75f5c73da377013a223168"),
+          value: 'space-around'
+        }, {
+          label: i18nRuntime.i18n("eb5ec10ef70689996dd5cd66e17a64aa"),
+          value: 'space-between'
+        }, {
+          label: i18nRuntime.i18n("ba3a7db7cc1ac5a908358f62fdbb21de"),
+          value: 'space-evenly'
+        }, {
+          label: i18nRuntime.i18n("7ac1519928de413cfe36f5d2e0610430"),
+          value: 'stretch'
+        }]
+      }, {
+        label: i18nRuntime.i18n("f6cbf29fdb5e94052a22986533c7267f"),
+        type: 'select',
+        name: 'alignItems',
+        clearValueOnHidden: true,
+        menuTpl: menuTpl,
+        options: [{
+          label: i18nRuntime.i18n("4ba6c2256050d805ae5cd1e0e84737cf"),
+          value: 'flex-start'
+        }, {
+          label: i18nRuntime.i18n("56c17ba6a56c01706ae00a31611deb03"),
+          value: 'center'
+        }, {
+          label: i18nRuntime.i18n("abeb360ab1e66534a041fb8b44e1a00e"),
+          value: 'flex-end'
+        }, {
+          label: i18nRuntime.i18n("ed97c73866617b40a7b1215867e0f489"),
+          value: 'baseline'
+        }, {
+          label: i18nRuntime.i18n("7ac1519928de413cfe36f5d2e0610430"),
+          value: 'stretch'
+        }]
+      }]
+    }]
+  }, {
+    data: displayContext,
+    onSubmit: handleSubmit
+  }));
 };
-/** @class */ ((function (_super) {
-    tslib.__extends(DisplayRenderer, _super);
-    function DisplayRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DisplayRenderer.prototype.render = function () {
-        return React__default["default"].createElement(Display, tslib.__assign({}, this.props));
-    };
-    DisplayRenderer = tslib.__decorate([
-        amis.FormItem({ type: 'style-display' })
-    ], DisplayRenderer);
-    return DisplayRenderer;
-})(React__default["default"].Component));
+
+/** @class */
+(function (_super) {
+  tslib.__extends(DisplayRenderer, _super);
+
+  function DisplayRenderer() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  DisplayRenderer.prototype.render = function () {
+    return React__default["default"].createElement(Display, tslib.__assign({}, this.props));
+  };
+
+  DisplayRenderer = tslib.__decorate([amis.FormItem({
+    type: 'style-display'
+  })], DisplayRenderer);
+  return DisplayRenderer;
+})(React__default["default"].Component);