@fonixtree/magic-design 0.0.6 → 0.0.9

package/src/components/utils/dataTreeUtils.js

@@ -0,0 +1,93 @@
+import isEmpty_1 from '../../../node_modules/lodash/isEmpty.js';
+import isObject_1 from '../../../node_modules/lodash/isObject.js';
+import mapKeys_1 from '../../../node_modules/lodash/mapKeys.js';
+import cloneDeep_1 from '../../../node_modules/lodash/cloneDeep.js';
+
+/**
+ * 处理树相关的工具
+ */
+
+var treeUtils = {
+  /** 将一维数组转换为树结构 */
+  translateDataToTree: function (jsonData, id, pid, mapProps) {
+    var newData = cloneDeep_1(jsonData);
+    var result = [];
+    var temp = {};
+
+    for (var i = 0; i < newData.length; i += 1) {
+      temp[newData[i][id]] = newData[i]; // 以id作为索引存储元素，可以无需遍历直接定位元素
+    }
+
+    var _loop_1 = function (j) {
+      var currentElement = newData[j]; // 添加需要的属性
+
+      if (mapProps && isObject_1(mapProps) && !isEmpty_1(mapProps)) {
+        mapKeys_1(mapProps, function (value, key) {
+          currentElement[key] = currentElement[value];
+        });
+      }
+
+      var tempCurrentElementParent = temp[currentElement[pid]]; // 临时变量里面的当前元素的父元素
+
+      if (tempCurrentElementParent) {
+        // 如果存在父元素
+        if (!tempCurrentElementParent.children) {
+          // 如果父元素没有chindren键
+          tempCurrentElementParent.children = []; // 设上父元素的children键
+        }
+
+        tempCurrentElementParent.children.push(currentElement); // 给父元素加上当前元素作为子元素
+      } else {
+        // 不存在父元素，意味着当前元素是一级元素
+        result.push(currentElement);
+      }
+    };
+
+    for (var j = 0; j < newData.length; j += 1) {
+      _loop_1(j);
+    }
+
+    return result;
+  },
+
+  /**
+   * jsonData 输入数据
+   * 需要查找的id
+   * pk 主键的名称
+   * childKeys返回值
+   */
+  findChildKeys: function (jsonData, id, pk, childKeys) {
+    var target = {};
+    this.dsFilter(jsonData, id, pk, target);
+
+    if (target && JSON.stringify(target) !== '{}') {
+      childKeys.push(target[pk]);
+
+      if (target.children && target.children.length) {
+        this.getChildKey(target.children, pk, childKeys);
+      }
+    }
+  },
+  dsFilter: function (dealData, id, pk, target) {
+    for (var i = 0; i < dealData.length; i += 1) {
+      if (dealData[i].children && dealData[i].children.length) {
+        this.dsFilter(dealData[i].children, id, pk, target);
+      }
+
+      if (dealData[i][pk] === id) {
+        Object.assign(target, dealData[i]);
+      }
+    }
+  },
+  getChildKey: function (dealData, pk, childKeys) {
+    for (var i = 0; i < dealData.length; i += 1) {
+      if (dealData[i].children && dealData[i].children.length) {
+        this.getChildKey(dealData[i].children, pk, childKeys);
+      }
+
+      childKeys.push(dealData[i][pk]);
+    }
+  }
+};
+
+export { treeUtils as default };

package/src/components/utils/dateUtil.js

@@ -0,0 +1,30 @@
+import moment from '../../../node_modules/moment/moment.js';
+
+var dateFmt = 'YYYY-MM-DD';
+/**
+ * new Date 解决ios 安卓兼容问题
+ * @param {*} date 时间
+ */
+
+var newDate = function (date) {
+  if (date instanceof Date) {
+    return date;
+  }
+
+  if (date) {
+    var reg = /^[0-9]+.?[0-9]*$/;
+
+    if (reg.test(date)) {
+      return new Date(Number(date));
+    }
+
+    return new Date(date.replace(/-/g, '/'));
+  }
+
+  return new Date();
+};
+var formatDate = function (date) {
+  return moment(date).format(dateFmt);
+};
+
+export { formatDate, newDate };

package/src/components/utils/storeUtil.js

@@ -0,0 +1,113 @@
+import { ensure } from './commonUtil.js';
+import { formatDate } from './dateUtil.js';
+
+var debug = require('debug')('worker:store');
+/** 持久化渠道 */
+
+
+var CHANNEL = window.localStorage;
+/**
+ * 获取缓存数据 localStorage
+ * @param {*} key
+ * @param {*} isJson 是否是json 默认是
+ */
+
+var getStore = function (key, channel) {
+  if (channel === void 0) {
+    channel = CHANNEL;
+  }
+
+  return ensure(function () {
+    return JSON.parse(channel.getItem(key));
+  }, channel.getItem(key));
+};
+/**
+ * 设置缓存 localStorage
+ * @param {string} key 键
+ * @param {any} data 值
+ */
+
+var setStore = function (key, data, channel) {
+  if (channel === void 0) {
+    channel = CHANNEL;
+  }
+
+  if (data instanceof Object) {
+    channel.setItem(key, JSON.stringify(data));
+  } else {
+    channel.setItem(key, data);
+  }
+};
+/**
+ * 清空 localStorage
+ * @param {string} key 键
+ */
+
+var clearStore = function (key, channel) {
+  if (channel === void 0) {
+    channel = CHANNEL;
+  }
+
+  if (key) {
+    channel.removeItem(key);
+  } else {
+    channel.clear();
+  }
+};
+/** 设计器定制的 一套缓存机制 */
+
+/**
+ * 获取缓存数据 localStorage
+ * @param {*} key
+ * @param {*} isJson 是否是json 默认是
+ */
+// export const getStore = key => ensure(() => JSON.parse(CHANNEL.getItem(key)), CHANNEL.getItem(key));
+
+var localStorageKey = 'magicBoxCache';
+/** 清楚缓存 */
+
+var clearMagicStore = function () {
+  clearStore(localStorageKey);
+};
+/**
+ * 设置缓存 localStorage
+ * @param {string} key 键
+ * @param {any} data 值
+ */
+
+var setMagicStore = function (key, data) {
+  try {
+    var localStore = getStore(localStorageKey) || {
+      date: formatDate(),
+      data: {}
+    };
+    localStore.data[key] = data;
+    setStore(localStorageKey, localStore);
+  } catch (error) {
+    debug(error);
+    clearMagicStore();
+  }
+};
+/** 获取设计器缓存 */
+
+var getMagicStore = function (key) {
+  try {
+    var localStore = getStore(localStorageKey) || {
+      date: formatDate(),
+      data: {}
+    };
+
+    if (localStore.date !== formatDate()) {
+      throw new Error('清除设计器缓存');
+    }
+
+    return localStore.data[key];
+  } catch (error) {
+    debug(error);
+    clearMagicStore();
+  }
+
+  return null;
+};
+
+export { clearMagicStore, clearStore, getMagicStore, getStore, setMagicStore, setStore };

package/README.md

@@ -1,311 +0,0 @@
-# 设计器二期
-
-## 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 放在元组件里？