@fonixtree/magic-design 0.0.26 → 0.0.28

package/lib/core/Designer/QuickMenuBar/index.js

@@ -7,10 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _antd = require("antd");
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _storeUtil = require("../../../utils/storeUtil");
+
+var _mobx = require("../../../mobx");
+
 var _Button = _interopRequireDefault(require("../../../common/Button"));
 
 var _Iconfont = _interopRequireDefault(require("../../../common/Iconfont"));
@@ -52,12 +58,12 @@ var __extends = void 0 && (void 0).__extends || function () {
 }();
 
 var langBook = {
-  Indonesian: {
+  id: {
     text: 'Indonesian',
     color: '#FF8541',
     backColor: '#FFF8F0'
   },
-  English: {
+  en: {
     text: 'English',
     color: '#00AC5A',
     backColor: '#DFF3EA'
@@ -72,9 +78,19 @@ function (_super) {
   function QuickMenuBar() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
+    _this.state = {
+      language: _mobx.store.language
+    };
+
     _this.onBtnClick = function (event) {
       var code = event.currentTarget.dataset.code;
 
+      if (code === _constants.quickMenuCode.SAVE || code === _constants.quickMenuCode.PUBLISH) {
+        _mobx.store.setState({
+          clickedFloor: ''
+        });
+      }
+
       if (_this.props.device === _constants.deviceTypeMap.PC) {}
 
       _this.props.onBtnClick(code);
@@ -83,12 +99,29 @@ function (_super) {
     return _this;
   }
 
+  QuickMenuBar.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.destory = (0, _mobx.autorun)(function () {
+      if (_this.state.language != _mobx.store.language) {
+        _this.setState({
+          language: _mobx.store.language
+        });
+      }
+    });
+  };
+
+  QuickMenuBar.prototype.componentWillUnmount = function () {
+    if (this.destory) this.destory();
+  };
+
   QuickMenuBar.prototype.render = function () {
+    var language = this.state.language;
     var _a = this.props,
         device = _a.device,
         undoDisable = _a.undoDisable,
-        redoDisable = _a.redoDisable,
-        language = _a.language;
+        redoDisable = _a.redoDisable;
+    var selectLanguage = langBook[language || 'en'];
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "quick_menu_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -96,8 +129,8 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: "language",
       style: {
-        color: langBook[language].color,
-        background: langBook[language].backColor
+        color: selectLanguage.color,
+        background: selectLanguage.backColor
       }
     }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       size: "20px",
@@ -105,7 +138,25 @@ function (_super) {
         marginRight: '8px'
       },
       type: "icon-language"
-    }), langBook[language].text)), /*#__PURE__*/_react["default"].createElement("div", {
+    }), /*#__PURE__*/_react["default"].createElement(_antd.Dropdown, {
+      overlay: /*#__PURE__*/_react["default"].createElement(_antd.Menu, {
+        items: Object.keys(langBook).map(function (key) {
+          return {
+            onClick: function onClick() {
+              /** 持久化国际化配置 */
+              (0, _storeUtil.setStore)(_constants.STORAGE_KEY.LANGUAGE, key);
+
+              _mobx.store.setState({
+                language: key
+              });
+            },
+            label: langBook[key].text,
+            key: key
+          };
+        })
+      }),
+      trigger: ['click']
+    }, /*#__PURE__*/_react["default"].createElement("span", null, selectLanguage.text)))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "menu_center"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "device_group"

package/lib/core/Designer/QuickMenuBar/index.less

@@ -1,4 +1,4 @@
-.quick_menu_wrap{
+.quick_menu_wrap {
   flex-shrink: 0;
   height: 80px;
   width: 100%;
@@ -8,7 +8,8 @@
   padding-left: 24px;
   padding-right: 28px;
   background-color: #FFF;
-  .menu_left{
+
+  .menu_left {
     .language {
       display: flex;
       align-items: center;
@@ -17,16 +18,20 @@
       border-radius: 8px;
       padding: 12px;
       font-size: 16px;
+      cursor: pointer;
     }
   }
-  .menu_center{
+
+  .menu_center {
     display: flex;
     align-items: center;
     justify-content: center;
+
     .device_group {
       display: flex;
       align-items: center;
       justify-content: center;
+
       .device_pc {
         cursor: pointer;
         height: 48px;
@@ -38,6 +43,7 @@
         border-bottom-left-radius: 8px;
         text-align: center;
       }
+
       .device_phone {
         cursor: pointer;
         height: 48px;
@@ -49,18 +55,21 @@
         border-bottom-right-radius: 8px;
         text-align: center;
       }
+
       .active {
         background: #E9F0FF;
       }
     }
+
     .redo_undo {
       display: flex;
       align-items: center;
       justify-content: center;
       margin-left: 24px;
-      
+
     }
   }
+
   .menu_right {
     display: flex;
   }

package/lib/core/Designer/index.js

@@ -342,7 +342,6 @@ function (_super) {
     _this.renderHeader = function () {
       return /*#__PURE__*/_react["default"].createElement(_QuickMenuBar["default"], {
         device: _this.state.device,
-        language: _this.props.language,
         onBtnClick: _this.onQuickMenuClick,
         redoDisable: !_this.history.redoAble(),
         undoDisable: !_this.history.undoAble()
@@ -350,12 +349,21 @@ function (_super) {
     };
 
     var pageData = props.pageData,
-        config = props.config;
+        config = props.config,
+        defaultLanguage = props.defaultLanguage;
     var MPageData = pageData.childNodes || [];
 
     _mobx.store.setState({
       MPageData: MPageData
     });
+    /** 如果没有配置国际化 则使用默认国际化 */
+
+
+    if (!_mobx.store.language) {
+      _mobx.store.setState({
+        language: defaultLanguage
+      });
+    }
 
     _this.configRef = /*#__PURE__*/_react["default"].createRef();
     _this.viewAreaRef = /*#__PURE__*/_react["default"].createRef();
@@ -370,7 +378,9 @@ function (_super) {
   }
 
   Designer.prototype.componentDidMount = function () {
-    // 复合组件点击事件
+    var _this = this; // 复合组件点击事件
+
+
     window.document.addEventListener('component-click', this.componentClick); // 复合组件重新渲染事件
 
     window.document.addEventListener('render-view', this.reRenderViewArea);
@@ -378,6 +388,14 @@ function (_super) {
     // setTimeout(() => {
     //   this.onQuickMenuClick(quickMenuCode.SAVE);
     // }, 60 * 1000);
+
+    this.destory = (0, _mobx.autorun)(function () {
+      if (_this.state.language != _mobx.store.language) {
+        _this.setState({
+          language: _mobx.store.language
+        });
+      }
+    });
   };
 
   Designer.prototype.componentWillReceiveProps = function (nextProps) {
@@ -396,6 +414,10 @@ function (_super) {
     setDesignConfig(config);
   };
 
+  Designer.prototype.componentWillUnmount = function () {
+    if (this.destory) this.destory();
+  };
+
   Designer.prototype.onComponentClick = function (data) {
     if (_mobx.store.clickedFloor === data.id) return;
 

package/lib/locale/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.i18n = i18n;
+
+var _en = _interopRequireDefault(require("./en/en.json"));
+
+var _id = _interopRequireDefault(require("./id/id.json"));
+
+var _mobx = require("../mobx");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var localeMap = {
+  en: _en["default"],
+  id: _id["default"]
+};
+/** 国际化 */
+
+function i18n(key, args) {
+  if (args === void 0) {
+    args = {};
+  }
+
+  var tempString = localeMap[_mobx.store.language || 'en'][key];
+  Object.keys(args).map(function (key) {
+    var reg = new RegExp("{" + key + "}", 'g');
+    tempString.replace(reg, args[key]);
+  });
+  return tempString;
+}

package/lib/meta-comp/components/Image/index.js

@@ -74,6 +74,7 @@ function (_super) {
           hoverState = _a.hoverState,
           maxHeight = _a.maxHeight,
           maxWidth = _a.maxWidth,
+          minWidth = _a.minWidth,
           limitWidthHeight = _a.limitWidthHeight,
           scale = _a.scale;
       var hoverImgSrc = _this.state.hoverImgSrc;
@@ -92,6 +93,10 @@ function (_super) {
         obj.maxWidth = maxWidth;
       }
 
+      if (minWidth) {
+        obj.minWidth = minWidth;
+      }
+
       if (limitWidthHeight) {
         if ((0, _coreUtil.isPc)()) {
           if (data.content.pcImgWidth) obj.width = data.content.pcImgWidth * scale;

package/lib/mobx/Store.js

@@ -7,12 +7,18 @@ exports.Store = void 0;
 
 var _mobx = require("mobx");
 
+var _constants = require("../constants");
+
+var _storeUtil = require("../utils/storeUtil");
+
 var debug = require('debug')('worker:mobx');
 
 var Store =
 /** @class */
 function () {
   function Store() {
+    this.language = (0, _storeUtil.getStore)(_constants.STORAGE_KEY.LANGUAGE); // 国际化语言
+
     this.hoveredMeta = ''; // hover的元组件Id
 
     this.clickedMeta = ''; // 点击的元组件Id
@@ -28,6 +34,7 @@ function () {
     this.CarouselStore = {}; // 轮播组件暂存数据
 
     (0, _mobx.makeObservable)(this, {
+      language: _mobx.observable,
       hoveredMeta: _mobx.observable,
       clickedMeta: _mobx.observable,
       clickedGroup: _mobx.observable,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",
@@ -34,6 +34,84 @@
     "replace": "^1.2.1",
     "slick-carousel": "^1.8.1"
   },
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@svgr/webpack": "^5.5.0",
+    "@types/axios": "^0.14.0",
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^17.0.36",
+    "@types/react": "^18.0.9",
+    "@types/react-color": "^3.0.6",
+    "@types/react-dom": "^18.0.5",
+    "@types/uuid": "^8.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "add": "^2.0.6",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-named-asset-import": "^0.3.8",
+    "babel-preset-react-app": "^10.0.1",
+    "bfj": "^7.0.2",
+    "browserslist": "^4.18.1",
+    "camelcase": "^6.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "child_process": "^1.0.2",
+    "classnames": "^2.3.1",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.2.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
+    "eslint": "7",
+    "eslint-config-next": "^12.1.6",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-webpack-plugin": "^3.1.1",
+    "extract-zip": "^2.0.1",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "http-proxy-middleware": "^2.0.6",
+    "identity-obj-proxy": "^3.0.0",
+    "less": "3.13.1",
+    "less-loader": "^11.0.0",
+    "mini-css-extract-plugin": "^2.4.5",
+    "mv": "^2.1.1",
+    "ora": "^4.1.1",
+    "postcss": "^8.4.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
+    "postcss-px-to-viewport": "^1.1.1",
+    "postcss-selector-namespace": "^3.0.1",
+    "prompts": "^2.4.2",
+    "rc-tools": "^9.6.1-alpha.1",
+    "react-app-polyfill": "^3.0.0",
+    "react-dev-utils": "^12.0.1",
+    "react-refresh": "^0.11.0",
+    "resolve": "^1.20.0",
+    "resolve-url-loader": "^4.0.0",
+    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-styles": "^4.0.0",
+    "rollup-plugin-typescript2": "^0.32.1",
+    "sass-loader": "^12.3.0",
+    "semver": "^7.3.5",
+    "source-map-loader": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.2",
+    "terser-webpack-plugin": "^5.2.5",
+    "typescript": "^4.7.2",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.64.4",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-manifest-plugin": "^4.0.2",
+    "workbox-webpack-plugin": "^6.4.1"
+  },
   "files": [
     "es",
     "lib",