@fonixtree/magic-design 0.0.55 → 0.0.58

package/lib/locale/id/id.json

@@ -1,4 +1,12 @@
 {
+  "ADD_BUTTON": "Add Button",
+  "BUTTON_TAG": "Button Tag",
+  "ADD_TAG": "Add Tag",
+  "LAST_CATEGORY": "Last Category",
+  "SECONDARY_CATEGORY": "Secondary Category",
+  "FIRST_CATEGORY": "First Category",
+  "ALL_CATEGORY": "All Category",
+  "HOME": "Home",
   "ADD_CLICKABLE_AREA": "Add Clickable Area",
   "ADD_AREA": "Add Area",
   "CLICKABLE_AREA": "Clickable Area",
@@ -87,7 +95,6 @@
   "INPUT_FIELD": "Input Field",
   "CONFIRMATION": "Confirmation",
   "IMAGE_TAG": "Image Tag",
-  "BUTTON_TAG": "Button Tag",
   "SECONDARY_BUTTON_TAG": "Secondary Button Tag",
   "TITLE": "Title",
   "HOVER": "Hover",

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

@@ -90,14 +90,14 @@ function (_super) {
 
     _this.preData = '';
     return _this;
-  }
+  } // 会影响到 button 的 hover style 失效
+  // shouldComponentUpdate(nextProps) {
+  //   const should1 = JSON.stringify(nextProps.data) != this.preData;
+  //   const should2 = window.magicDesign.device != this.preDevice;
+  //   const result = should1 || should2;
+  //   return result;
+  // }
 
-  Button.prototype.shouldComponentUpdate = function (nextProps) {
-    var should1 = JSON.stringify(nextProps.data) != this.preData;
-    var should2 = window.magicDesign.device != this.preDevice;
-    var result = should1 || should2;
-    return result;
-  };
 
   Button.prototype.render = function () {
     var _this = this;

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

@@ -86,7 +86,7 @@ function (_super) {
 
       if (data.hover.open && data.hover.backgroundType === 'enlarge' && (hoverState || hoverImgSrc)) {
         // return { transform: `scale(${data.hover.magnification})` };
-        obj.transform = "scale(" + data.hover.magnification / 2 + ")";
+        obj.transform = "scale(" + data.hover.magnification + ")";
       }
 
       if (maxHeight) {

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

@@ -102,7 +102,8 @@ var contentStyle = function contentStyle(content) {
     color: content.color,
     backgroundColor: content.backgroundColor,
     textAlign: content.textAlign,
-    width: window.magicDesign.device == 'mobile' ? '100%' : content.width || 'fit-content'
+    // width: (window.magicDesign.device == 'pc' ? content.pcWidth :  content.width) || 'fit-content',
+    width: (window.magicDesign.device == 'pc' ? content.pcWidth : content.width) || '100%'
   };
 };
 /** 从父级数组中 分离出 片段数组 */
@@ -256,7 +257,8 @@ var initSelectionEvent = function initSelectionEvent() {
         }
 
         findSelectionTarget.refresh();
-      }
+      } // todo 不知道干什么用的
+
 
       triggerTextConfigRender();
     }, 500);
@@ -429,12 +431,21 @@ function (_super) {
         className = _a.className,
         readonly = _a.readonly,
         onTextInput = _a.onTextInput;
+    var style = contentStyle(data.content);
+
+    if (data.underline) {
+      style = __assign(__assign({}, style), {
+        textDecorationLine: data.underline.open ? 'underline' : 'none',
+        textDecorationColor: data.underline.textDecorationColor,
+        textDecorationStyle: data.underline.textDecorationStyle
+      });
+    } // const style: React.CSSProperties = {
+    //   ...contentStyle(data.content),
+    //   textDecorationLine: data?.underline.open ? 'underline' : 'none',
+    //   textDecorationColor: data?.underline.textDecorationColor,
+    //   textDecorationStyle: data?.underline.textDecorationStyle,
+    // };
 
-    var style = __assign(__assign({}, contentStyle(data.content)), {
-      textDecorationLine: data.underline.open ? 'underline' : 'none',
-      textDecorationColor: data.underline.textDecorationColor,
-      textDecorationStyle: data.underline.textDecorationStyle
-    });
 
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.textRef,

package/lib/meta-comp/config-panels/BaseConfig.js

@@ -48,14 +48,6 @@ function (_super) {
 
   function BaseConfig() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
-    /**
-     *重新渲染展示区域
-     */
-
-
-    _this.reRenderViewArea = function () {
-      (0, _coreUtil.renderPreview)();
-    };
     /**
      * 重新渲染一级配置面板
      */
@@ -67,10 +59,16 @@ function (_super) {
      */
 
 
-    _this.selfRender = function () {
+    _this.selfRender = function (data) {
+      var changeHistory = true;
+
+      if (data && data.type === 'text-render') {
+        changeHistory = false;
+      }
+
       _this.setState({});
 
-      _this.reRenderViewArea();
+      (0, _coreUtil.renderPreview)(changeHistory);
     };
 
     return _this;

package/lib/meta-comp/config-panels/TextConfig/index.js

@@ -15,6 +15,8 @@ require("./index.less");
 
 var _locale = require("../../../locale");
 
+var _constants = require("../../../constants");
+
 var _common = require("../../../common");
 
 var _SpacingConfig = _interopRequireDefault(require("../../../composite-comp/common/config-panels/SpacingConfig"));
@@ -273,17 +275,22 @@ function (_super) {
         })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
           title: (0, _locale.i18n)('CONTENT_WIDTH')
         }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
-          maxVal: 1760,
+          maxVal: _constants.deviceTypeWidthMap[window.magicDesign.device],
           minVal: 0,
           onChange: function onChange(_a) {
             var count = _a.count;
-            textData.width = count;
+
+            if (window.magicDesign.device == 'pc') {
+              textData.pcWidth = count;
+            } else {
+              textData.width = count;
+            }
 
             _this.selfRender();
           },
           unit: "px",
           value: {
-            count: textData.width
+            count: window.magicDesign.device == 'pc' ? textData.pcWidth : textData.width
           }
         })))
       }, {

package/lib/mobx/Store.js

@@ -34,6 +34,7 @@ function () {
     this.CarouselStore = {}; // 轮播组件暂存数据
 
     (0, _mobx.makeObservable)(this, {
+      MPageData: _mobx.observable,
       locale: _mobx.observable,
       hoveredMeta: _mobx.observable,
       clickedMeta: _mobx.observable,
@@ -87,15 +88,6 @@ function () {
     return componentFloor.id;
   };
 
-  Store.prototype.getFloorInfo = function () {
-    var _this = this;
-
-    var componentFloor = this.MPageData.find(function (floor) {
-      return floor.id === _this.clickedFloor;
-    });
-    return componentFloor;
-  };
-
   return Store;
 }();
 

package/lib/utils/coreUtil.js

@@ -53,10 +53,15 @@ var setMagicDesign = function setMagicDesign(magicDesignObj) {
 
 exports.setMagicDesign = setMagicDesign;
 
-var renderPreview = function renderPreview() {
+var renderPreview = function renderPreview(changeHistory) {
+  if (changeHistory === void 0) {
+    changeHistory = true;
+  }
+
   var evt = new Event('render-view', {
     bubbles: false
   });
+  evt.changeHistory = changeHistory;
   window.document.dispatchEvent(evt);
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.55",
+  "version": "0.0.58",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",
@@ -36,91 +36,6 @@
     "shortid": "^2.2.16",
     "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",
-    "gulp": "4.0.2",
-    "gulp-less": "5.0.0",
-    "gulp-postcss": "9.0.1",
-    "gulp-rename": "2.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-less": "6.0.0",
-    "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": "^16.11.0",
-    "react-app-polyfill": "^3.0.0",
-    "react-dev-utils": "^12.0.1",
-    "react-dom": "^16.11.0",
-    "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"
-  },
   "peerDependencies": {
     "react": ">=16.11.0",
     "react-dom": ">=16.11.0"

package/README.md

@@ -1,320 +0,0 @@
-# 快捷指令使用
-
-## 1、发布 -- npm run pub
-
-## 2、新增国际化 -- npm run cl "Hello world"
-
-## 3、更新iconfont -- npm run iconfont
-
-
-# 设计器二期
-
-## 1、基本概念
-
-### 1.1、元组件：构成复合组件的最小单位
-
-Text、Image、Button、Divider、Video 等
-
-### 1.2、复合组件：由若干个元组件构成的一个大组件
-
-Text、Banner、Image Gallery、Image and Text、Carousel、Reward、Newsletter 等
-
-### 1.3、业务公共组件：项目中复用的公共组件
-
-所有的公共组件需要开放 value 和 onChange Api（除 Button、Iconfont）
-
-Button、Iconfont、AlignSelecter、Collapse、ColorPicker、ImagePicker、LayoutSelecter、Slider、UrlPicker
-
-## 2、元组件
-
-### 2.1
-
-元组件类型：
-
-TEXT、IMAGE、BUTTON、DIVIDER、VIDEO
-
-元组件报文格式：
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'TYPE', //元组件类型
-  style:{
-  	fontFamily:'xxx', //字体
-  	...css  //属性名称尽量使用标准css名称
-	},
-	hoverStyle:{
-
-  }
-}
-```
-
-动态设置 hover 效果
-
-onMouseEnter={e => { e.target.style.color = 'red'; }}
-
-onMouseLeave={e => { e.target.style.color = 'white'; }}
-
-文本可编辑
-
-contenteditable="true"
-
-### 2.2 、元组件报文
-
-#### Text
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'TYPE', //元组件类型
-  content:'this is text',
-  style:{
-    fontFamily:'xxx', //字体
-    fontSize: '14px',
-    width: '200px',
-    ...css
-	}
-}
-```
-
-#### Image
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'IMAGE', //元组件类型
-  name:'123.png',
-  src:'../image.png', //图片地址
-  url:'www.baidu.com', //图片跳转地址
-  style:{
-    width: '200px',
-    ...css
-	},
-	hoverStyle:{     //hover 类型为new时保存src，类型为enlarge时保存scale
-    scale: '2',
-    src:'../image1.png',
-  }
-}
-```
-
-#### Button
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'BUTTON', //元组件类型
-  name:'Submit',
-  url: 'www.baidu.com',
-  style:{
-  	buttonIconSrc:'../img.png',
- 	  buttonIconPlace: 'left',
-  	color:'#FEFEFE',
-  	border: '1px solid red',
-  	borderRadius:'10px',
-    fontFamily:'xxx', //字体
-    fontSize: '14px',
-    ...css
-	},
-	hoverStyle {
-    color:'#FEFEFE',
-  	border: '1px solid red',
-    fontFamily:'xxx', //字体
-    fontSize: '14px',
-    ...css
-  }
-}
-```
-
-## 2、复合组件
-
-### 2.1
-
-元组件类型：
-
-TEXT、BANNER、IMAGE_GALLERT、IMAGE_TEXT、CAROUSEL、REWARD、NEWSLETTER
-
-复合组件报文格式：
-
-```json
-{
-  id:'xxxx' //复合组件key
-  type: 'TYPE', //复合组件类型
-  setting:{     //开关类型的配置及属性配置放在这里
-  	autoplays: 3, //3秒轮播
-	},
-	groupSource:[],  //元组件集合组数据放在这里
-	metas:{
-    title:{
-      open:false,
-      type:'IMAGE'
-      ...metaCompJson
-    },
-    subTitle:{
-      open:false,
-        type:'IMAGE'
-        ...metaCompJson
-    }
-  },
-	customize:{
-    layout:'',
-    background:{
-
-    }
-  }
-}
-```
-
-#### Text
-
-```js
-{
-	id: 'xxxx', //复合组件key
-  type: 'TEXT', //复合组件类型
-  setting:{
-    layout:'left', // 模块布局 left/center/right ，每一个layout可能都是一个不同的组件
-    title:{
-      type:'TEXT'
-       ...metaCompJson
-    },
-    subtitle:{
-      type:'TEXT'
-       ...metaCompJson
-    },
-  },
-  source:[
-    {                   //此处可以抽出业务组件
-      title:{
-        type:'TEXT'
-       ...metaCompJson
-      },
-      content:{
-        type:'TEXT'
-       ...metaCompJson
-      }
-    }
-  ],
-  style:{
-  	align:'left',  //文本布局 left/center/right
-  	backgroundColor: 'red',
-  	backgroundImage:'../image.png'
-	}
-}
-```
-
-#### Banner
-
-modifySetting
-
-```json
-{
-  "comositeId": "1111",
-
-  "value": {
-    "autoplays": 4
-  }
-}
-```
-
-```json
-{
-	id: 'xxxx',
-	type: 'BANNER',
-	setting:{
-    open:false
-  	autoplays: 3, //3秒轮播
-    arrows:{      // 滚动箭头
-    	open:false,
-    	color:'red',
-    	size:'',
-    	hoverSize:'',
-      hoverColor:'green',
-  	},
-    dots:{       //面板指示点
-      open:false,
-      color: 'red',
-      size:'',
-      hoverSize:''
-      hoverColor:'green',
-    },
-	},
-  groupSource:[
-    {                     //此处可以作为一个业务组件
-      id:'xxxxx',
-      image:{
-        open:false,
-        type:'IMAGE'
-        ...metaCompJson
-      },
-      title:{
-        open:false,
-        type:'TEXT',
-        ...metaCompJson
-      },
-      content:{
-        open:false,
-        type:'TEXT',
-        ...metaCompJson
-      },
-      button:{
-        type:'BUTTON',
-        ...metaCompJson
-      },
-      secondaryButton:{
-        type:'BUTTON',
-        ...metaCompJson
-      },
-      layout:'center',
-      align:'left',
-      //文本布局 left/center/right
-    }
-  ]
-}
-```
-
-#### Image Gallery
-
-```json
-
-```
-
-#### Image and Text
-
-```json
-{
-  id:'xxxx'
-  type: 'IMAGE_TEXT',
-  setting:{
-  	layout:'left',
-  	title:{},
-		subtitle:{},
-		button:{},
-		secondaryButton:{}
-	},
-	source:[
-
-  ],
-  style:{
-    align:'left',
-    backgroundColor:'red',
-    backgroundImage:'./img.png'
-  }
-}
-```
-
-疑问：
-
-Text 元组件
-
-文字链接配置好之后，怎么删除
-
-链接配置的规则，按单词还是字符
-
-image 元组件
-
-属性控制进度条和输入框是否要限制最大最小值
-
-button 元组件
-
-是否需要 icon 的 hover 效果
-
-banner 中的 text Align 放在元组件里？