@fonixtree/magic-design 0.0.61 → 0.0.62

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

@@ -11,8 +11,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _mobx = require("../../../mobx");
-
 var _Button = _interopRequireDefault(require("../../../common/Button"));
 
 var _Iconfont = _interopRequireDefault(require("../../../common/Iconfont"));
@@ -82,13 +80,9 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.onBtnClick = function (event) {
-      var code = event.currentTarget.dataset.code;
-
-      if (code === _constants.quickMenuCode.SAVE || code === _constants.quickMenuCode.PUBLISH) {
-        _mobx.store.setState({
-          clickedFloor: ''
-        });
-      }
+      var code = event.currentTarget.dataset.code; // if (code === quickMenuCode.SAVE || code === quickMenuCode.PUBLISH) {
+      //   store.setState({ clickedFloor: '' });
+      // }
 
       if (_this.props.device === _constants.deviceTypeMap.PC) {}
 

package/lib/core/Designer/index.js

@@ -97,11 +97,13 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
   return r;
 };
 
+window.magicDesign = {
+  mode: 'designer',
+  device: _constants.deviceTypeMap.PHONE
+};
+
 var setDesignConfig = function setDesignConfig(data) {
-  window.magicDesign = __assign(__assign({
-    mode: 'designer',
-    device: _constants.deviceTypeMap.PHONE
-  }, data), {
+  window.magicDesign = __assign(__assign(__assign({}, window.magicDesign), data), {
     MBaseUrl: data.MBaseUrl || ''
   });
 };

package/lib/decorator/metaDecorator.js

@@ -79,7 +79,8 @@ function metaDecorator(WrappedComponent) {
         event.preventDefault();
         event.stopPropagation();
         var parentId = (_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.parentId;
-        var metaId = (_b = _this.props.data) === null || _b === void 0 ? void 0 : _b.id;
+        var conentId = (_b = _this.props.data) === null || _b === void 0 ? void 0 : _b.contentId;
+        var metaId = (_c = _this.props.data) === null || _c === void 0 ? void 0 : _c.id;
         var floorId = null; // group中的元组件
 
         if (parentId) {
@@ -90,9 +91,10 @@ function metaDecorator(WrappedComponent) {
         }
 
         _mobx.store.setState({
-          clickedMeta: (_c = _this.props.data) === null || _c === void 0 ? void 0 : _c.id,
+          clickedMeta: metaId,
           clickedGroup: parentId,
-          clickedFloor: floorId
+          clickedFloor: floorId,
+          clickedMetaParent: conentId
         });
       };
 

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

@@ -4,7 +4,7 @@
   .btnContent {
     width: 100%;
     cursor: pointer;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
@@ -15,6 +15,9 @@
 
     .item {
       width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     img {

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

@@ -12,6 +12,7 @@
     object-fit: contain;
     transition: all .2s linear;
     vertical-align: initial;
+    max-width: 100%;
   }
 
   &.backgroundImg {

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

@@ -439,6 +439,14 @@ function (_super) {
         textDecorationColor: data.underline.textDecorationColor,
         textDecorationStyle: data.underline.textDecorationStyle
       });
+    }
+
+    if (data === null || data === void 0 ? void 0 : data.spacing) {
+      if ((0, _coreUtil.isPc)()) {
+        style = __assign(__assign({}, style), data.spacing.pc);
+      } else {
+        style = __assign(__assign({}, style), data.spacing.mobile);
+      }
     } // const style: React.CSSProperties = {
     //   ...contentStyle(data.content),
     //   textDecorationLine: data?.underline.open ? 'underline' : 'none',

package/lib/meta-comp/config-panels/ImageConfig/HotAreaConfig/index.js

@@ -53,12 +53,12 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var index =
+var HotAreaConfig =
 /** @class */
 function (_super) {
-  __extends(index, _super);
+  __extends(HotAreaConfig, _super);
 
-  function index() {
+  function HotAreaConfig() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
@@ -66,11 +66,14 @@ function (_super) {
     };
 
     _this.onCheckboxChange = function (e) {
-      var option = _this.props.option;
+      var _a = _this.props,
+          option = _a.option,
+          onChange = _a.onChange;
       console.log(e.target.checked);
-      option.openHotArea = e.target.checked;
+      option.clickUrl = '';
+      option.openHotArea = e.target.checked; // this.setState({});
 
-      _this.setState({});
+      onChange();
     };
 
     _this.onAddArea = function () {
@@ -100,7 +103,7 @@ function (_super) {
     return _this;
   }
 
-  index.prototype.render = function () {
+  HotAreaConfig.prototype.render = function () {
     var option = this.props.option;
     var visible = this.state.visible;
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -123,8 +126,8 @@ function (_super) {
     }));
   };
 
-  return index;
+  return HotAreaConfig;
 }(_react.Component);
 
-var _default = index;
+var _default = HotAreaConfig;
 exports["default"] = _default;

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

@@ -314,10 +314,14 @@ function (_super) {
       value: selectImg
     }), selectImg && /*#__PURE__*/_react["default"].createElement(_HotAreaConfig["default"], {
       imgUrl: selectImg,
+      onChange: function onChange() {
+        return _this.setState({});
+      },
       option: data.content
     }), /*#__PURE__*/_react["default"].createElement(_common.Field, {
       title: "URL"
     }, /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
+      disabled: data.content.openHotArea,
       onChange: function onChange(v) {
         data.content.clickUrl = v;
 

package/lib/mobx/Store.js

@@ -14,7 +14,7 @@ var _storeUtil = require("../utils/storeUtil");
 var debug = require('debug')('worker:mobx');
 
 var CACHE_KEY = 'STORE';
-var whiteList = ['hoveredMeta', 'clickedMeta', 'clickedGroup', 'clickedFloor', 'textSelection', 'MPageData'];
+var whiteList = ['hoveredMeta', 'clickedMeta', 'clickedGroup', 'clickedMetaParent', 'clickedFloor', 'textSelection', 'MPageData'];
 
 var Store =
 /** @class */
@@ -26,7 +26,9 @@ function () {
 
     this.clickedMeta = ''; // 点击的元组件Id
 
-    this.clickedGroup = ''; // 点击的元组件组Id
+    this.clickedGroup = ''; // 点击的元组的上一层Id,即groupSourceId(元组件在Group中)
+
+    this.clickedMetaParent = ''; // 点击的元组的上一层Id(元组件不在Group中，Recommend组件)
 
     this.clickedFloor = ''; // 点击的楼层Id
 
@@ -42,6 +44,7 @@ function () {
       hoveredMeta: _mobx.observable,
       clickedMeta: _mobx.observable,
       clickedGroup: _mobx.observable,
+      clickedMetaParent: _mobx.observable,
       clickedFloor: _mobx.observable,
       CarouselStore: _mobx.observable,
       setState: _mobx.action.bound

package/lib/utils/coreUtil.js

@@ -35,7 +35,7 @@ var _this = void 0;
 
 /** 根据楼层设置的终端类型，判断是否展示该楼层 */
 var isActiveFloor = function isActiveFloor(activeTerminal) {
-  return activeTerminal === 'ALL' || activeTerminal === window.magicDesign.device.toUpperCase();
+  return !activeTerminal || activeTerminal === 'ALL' || activeTerminal === window.magicDesign.device.toUpperCase();
 };
 
 exports.isActiveFloor = isActiveFloor;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "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 放在元组件里？