@fonixtree/magic-design 0.0.8 → 0.0.9

package/src/components/meta-comp/config-panels/TextConfig/index.js

@@ -0,0 +1,391 @@
+import { __extends, __assign } from '../../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { Fragment } from 'react';
+import '../../../../../node_modules/antd/es/affix/index.js';
+import '../../../../../node_modules/antd/es/anchor/index.js';
+import '../../../../../node_modules/antd/es/auto-complete/index.js';
+import '../../../../../node_modules/antd/es/alert/index.js';
+import '../../../../../node_modules/antd/es/avatar/index.js';
+import '../../../../../node_modules/antd/es/back-top/index.js';
+import '../../../../../node_modules/antd/es/badge/index.js';
+import '../../../../../node_modules/antd/es/breadcrumb/Breadcrumb.js';
+import '../../../../../node_modules/antd/es/button/button.js';
+import '../../../../../node_modules/rc-picker/node_modules/moment/moment.js';
+import '../../../../../node_modules/rc-util/es/hooks/useMergedState.js';
+import 'classnames';
+import '../../../../../node_modules/lodash/_baseToString.js';
+import '../../../../../node_modules/lodash/_baseGetTag.js';
+import '../../../../../node_modules/rc-util/es/raf.js';
+import '../../../../../node_modules/rc-picker/es/panels/DatetimePanel/index.js';
+import '../../../../../node_modules/rc-trigger/es/index.js';
+import '../../../../../node_modules/antd/es/locale-provider/LocaleReceiver.js';
+import '../../../../../node_modules/antd/es/date-picker/locale/en_US.js';
+import '../../../../../node_modules/antd/es/config-provider/index.js';
+import '../../../../../node_modules/rc-field-form/es/index.js';
+import Select from '../../../../../node_modules/antd/es/select/index.js';
+import '../../../../../node_modules/antd/es/radio/index.js';
+import '../../../../../node_modules/antd/es/card/index.js';
+import '../../../../../node_modules/antd/es/collapse/Collapse.js';
+import '../../../../../node_modules/antd/es/carousel/index.js';
+import '../../../../../node_modules/antd/es/cascader/index.js';
+import '../../../../../node_modules/antd/es/checkbox/index.js';
+import '../../../../../node_modules/antd/es/grid/row.js';
+import '../../../../../node_modules/antd/es/grid/col.js';
+import '../../../../../node_modules/antd/es/comment/index.js';
+import '../../../../../node_modules/antd/es/date-picker/index.js';
+import '../../../../../_virtual/index2.js';
+import '../../../../../node_modules/antd/es/_util/warning.js';
+import '../../../../../node_modules/antd/es/divider/index.js';
+import '../../../../../node_modules/antd/es/dropdown/dropdown.js';
+import '../../../../../node_modules/antd/es/drawer/index.js';
+import '../../../../../node_modules/antd/es/empty/index.js';
+import '../../../../../node_modules/antd/es/form/index.js';
+import '../../../../../node_modules/antd/es/input/index.js';
+import '../../../../../node_modules/antd/es/image/index.js';
+import '../../../../../node_modules/antd/es/input-number/index.js';
+import '../../../../../node_modules/antd/es/layout/index.js';
+import '../../../../../node_modules/antd/es/list/index.js';
+import '../../../../../node_modules/antd/es/message/index.js';
+import '../../../../../node_modules/antd/es/menu/index.js';
+import '../../../../../node_modules/antd/es/mentions/index.js';
+import '../../../../../node_modules/antd/es/modal/index.js';
+import '../../../../../node_modules/antd/es/statistic/index.js';
+import '../../../../../node_modules/antd/es/notification/index.js';
+import '../../../../../node_modules/@ant-design/icons/es/icons/ArrowLeftOutlined.js';
+import '../../../../../node_modules/@ant-design/icons/es/icons/ArrowRightOutlined.js';
+import '../../../../../node_modules/rc-resize-observer/es/index.js';
+import '../../../../../node_modules/antd/es/space/index.js';
+import '../../../../../node_modules/antd/es/_util/transButton.js';
+import '../../../../../node_modules/antd/es/pagination/Pagination.js';
+import '../../../../../node_modules/antd/es/popconfirm/index.js';
+import '../../../../../node_modules/antd/es/popover/index.js';
+import '../../../../../node_modules/antd/es/progress/progress.js';
+import '../../../../../node_modules/antd/es/rate/index.js';
+import '../../../../../node_modules/antd/es/result/index.js';
+import '../../../../../node_modules/antd/es/segmented/index.js';
+import '../../../../../node_modules/antd/es/skeleton/Skeleton.js';
+import '../../../../../node_modules/antd/es/slider/index.js';
+import '../../../../../node_modules/antd/es/spin/index.js';
+import '../../../../../node_modules/antd/es/steps/index.js';
+import '../../../../../node_modules/antd/es/switch/index.js';
+import '../../../../../node_modules/antd/es/table/Table.js';
+import '../../../../../node_modules/antd/es/transfer/list.js';
+import '../../../../../node_modules/@ant-design/icons/es/icons/LeftOutlined.js';
+import '../../../../../node_modules/@ant-design/icons/es/icons/RightOutlined.js';
+import '../../../../../node_modules/@ant-design/icons/es/icons/SearchOutlined.js';
+import '../../../../../node_modules/antd/es/_util/statusUtils.js';
+import '../../../../../node_modules/antd/es/tree/Tree.js';
+import '../../../../../node_modules/antd/es/tree-select/index.js';
+import '../../../../../node_modules/antd/es/tabs/index.js';
+import '../../../../../node_modules/antd/es/tag/index.js';
+import '../../../../../node_modules/antd/es/time-picker/index.js';
+import '../../../../../node_modules/antd/es/timeline/Timeline.js';
+import '../../../../../node_modules/antd/es/tooltip/index.js';
+import '../../../../../node_modules/antd/es/typography/index.js';
+import '../../../../../node_modules/antd/es/upload/index.js';
+import './index.less.js';
+import '../../../common/LayoutSelector/index.js';
+import Field from '../../../common/Field/index.js';
+import UrlPicker from '../../../common/UrlPicker/index.js';
+import '../../../common/Iconfont/index.js';
+import '../../../common/Button/index.js';
+import '../../../common/AlignSelector/index.js';
+import CommonCollapse from '../../../common/Collapse/index.js';
+import ColorPickerInput from '../../../common/ColorPickerInput/index.js';
+import '../../../common/ImagePicker/index.js';
+import '../../../common/IconPicker/index.js';
+import '../../../common/SwitchCollapse/index.js';
+import SliderInput from '../../../common/Slider/index.js';
+import FontStyles from '../../../common/FontStyles/index.js';
+import '../../../common/ButtonIconLayout/index.js';
+import '../../../../../node_modules/axios/index.js';
+import '../../../../../node_modules/qs/lib/stringify.js';
+import '../../../../../node_modules/qs/lib/utils.js';
+import '../../../common/ProductModal/index.js';
+import '../../../common/ProductSource/index.less.js';
+import SpacingConfig from '../../../composite-comp/common/config-panels/SpacingConfig/index.js';
+import { store } from '../../../mobx/index.js';
+import BaseConfig from '../BaseConfig.js';
+
+/** 预设字体样式 */
+
+var sizeTypeList = [{
+  key: 'Customize font styles'
+}, {
+  key: 'Headline 1',
+  fontFamily: 'Montserrat',
+  pcFontSize: 50,
+  fontSize: 68,
+  fontWeight: 600
+}, {
+  key: 'Headline 2',
+  fontFamily: 'Montserrat',
+  pcFontSize: 32,
+  fontSize: 42,
+  fontWeight: 600
+}, {
+  key: 'Headline 3',
+  fontFamily: 'Montserrat',
+  pcFontSize: 30,
+  fontSize: 38,
+  fontWeight: 600
+}, {
+  key: 'Title 1',
+  fontFamily: 'Montserrat',
+  pcFontSize: 28,
+  fontSize: 32,
+  fontWeight: 400
+}, {
+  key: 'Title 2',
+  fontFamily: 'Montserrat',
+  pcFontSize: 20,
+  fontSize: 24,
+  fontWeight: 400
+}, {
+  key: 'Title 3',
+  fontFamily: 'Montserrat',
+  pcFontSize: 18,
+  fontSize: 20,
+  fontWeight: 400
+}, {
+  key: 'Body 1',
+  fontFamily: 'Open Sans',
+  pcFontSize: 16,
+  fontSize: 18,
+  fontWeight: 400
+}, {
+  key: 'Body 2',
+  fontFamily: 'Open Sans',
+  pcFontSize: 14,
+  fontSize: 16,
+  fontWeight: 400
+}, {
+  key: 'Body 3',
+  fontFamily: 'Open Sans',
+  pcFontSize: 12,
+  fontSize: 14,
+  fontWeight: 400
+}];
+
+var TextConfig =
+/** @class */
+function (_super) {
+  __extends(TextConfig, _super);
+
+  function TextConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+
+    _this.onSizeTypeChange = function (v, obj) {
+      Object.assign(obj, sizeTypeMap[v]);
+    };
+
+    return _this;
+  }
+
+  TextConfig.prototype.componentDidMount = function () {
+    window.document.addEventListener('text-render', this.selfRender);
+  };
+
+  TextConfig.prototype.componentWillUnmount = function () {
+    window.document.removeEventListener('text-render', this.selfRender);
+  };
+
+  TextConfig.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    var textData = store.textSelection ? store.textSelection : data.content;
+
+    if (!data.spacing) {
+      data.spacing = {
+        pc: {},
+        mobile: {}
+      };
+    } // const textData = data.content;
+
+
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "m-text-config"
+    }, /*#__PURE__*/React__default.createElement(CommonCollapse // divider="dashed"
+    // headerSize="small"
+    , {
+      onRefresh: this.selfRender,
+      source: [{
+        key: '1',
+        name: 'Content',
+        value: /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(Field, {
+          title: "Font Style"
+        }, /*#__PURE__*/React__default.createElement(Select, {
+          onChange: function (v) {
+            if (v == 'Customize font styles') {
+              textData.sizeType = v;
+            } else {
+              var findOne = sizeTypeList.find(function (t) {
+                return t.key == v;
+              });
+              Object.assign(textData, __assign(__assign({}, findOne), {
+                sizeType: findOne === null || findOne === void 0 ? void 0 : findOne.key
+              }));
+            }
+
+            _this.selfRender();
+          },
+          value: textData.sizeType
+        }, sizeTypeList.map(function (sizeType) {
+          return /*#__PURE__*/React__default.createElement(Select.Option, {
+            key: sizeType.key,
+            value: sizeType.key
+          }, sizeType.key);
+        }))), textData.sizeType == 'Customize font styles' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Field, {
+          title: "font Family"
+        }, /*#__PURE__*/React__default.createElement(Select, {
+          onChange: function (v) {
+            textData.fontFamily = v;
+
+            _this.selfRender();
+          },
+          value: textData.fontFamily
+        }, /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: "Montserrat"
+        }, "Montserrat"), /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: "Open Sans"
+        }, "Open Sans"))), /*#__PURE__*/React__default.createElement(Field, {
+          title: "font Weight"
+        }, /*#__PURE__*/React__default.createElement(Select, {
+          onChange: function (v) {
+            textData.fontWeight = v;
+
+            _this.selfRender();
+          },
+          value: textData.fontWeight
+        }, /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: 400
+        }, "Regular"), /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: 600
+        }, "Medium"))), /*#__PURE__*/React__default.createElement(Field, {
+          title: "Font Size"
+        }, /*#__PURE__*/React__default.createElement(SliderInput, {
+          onChange: function (_a) {
+            var count = _a.count;
+
+            if (window.magicDesign.device == 'pc') {
+              textData.pcFontSize = count;
+            } else {
+              textData.fontSize = count;
+            }
+
+            _this.selfRender();
+          },
+          unit: "px",
+          value: {
+            count: window.magicDesign.device == 'pc' ? textData.pcFontSize : textData.fontSize
+          }
+        }))), /*#__PURE__*/React__default.createElement(Field, {
+          title: ""
+        }, /*#__PURE__*/React__default.createElement(FontStyles, {
+          onChange: function (value) {
+            Object.assign(textData, value);
+
+            _this.selfRender();
+          },
+          showTextAlign: true,
+          value: textData
+        })), /*#__PURE__*/React__default.createElement(Field, {
+          split: true,
+          title: "URL"
+        }, /*#__PURE__*/React__default.createElement(UrlPicker, {
+          onChange: function (v) {
+            textData.clickUrl = v;
+
+            _this.selfRender();
+          },
+          value: data.content.clickUrl
+        })), /*#__PURE__*/React__default.createElement(Field, {
+          title: "Content Width"
+        }, /*#__PURE__*/React__default.createElement(SliderInput, {
+          maxVal: 1760,
+          minVal: 0,
+          onChange: function (_a) {
+            var count = _a.count;
+            textData.width = count;
+
+            _this.selfRender();
+          },
+          unit: "px",
+          value: {
+            count: textData.width
+          }
+        })))
+      }, {
+        key: '2',
+        name: 'Spacing',
+        value: /*#__PURE__*/React__default.createElement(SpacingConfig, {
+          data: data.spacing,
+          type: "button"
+        })
+      }, {
+        key: '3',
+        name: 'Underline Setting',
+        value: /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(Field, {
+          split: true,
+          title: "Underline Color"
+        }, /*#__PURE__*/React__default.createElement(ColorPickerInput, {
+          onChange: function (v) {
+            data.underline.textDecorationColor = v;
+
+            _this.selfRender();
+          },
+          value: data.underline.textDecorationColor
+        })), /*#__PURE__*/React__default.createElement(Field, {
+          title: "Underline Style"
+        }, /*#__PURE__*/React__default.createElement(Select, {
+          onChange: function (v) {
+            data.underline.textDecorationStyle = v;
+
+            _this.selfRender();
+          },
+          value: data.underline.textDecorationStyle
+        }, /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: "solid"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "line-config line-solid",
+          dangerouslySetInnerHTML: {
+            __html: ' '.repeat(50)
+          }
+        })), /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: "dashed"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "line-config dashed-line",
+          dangerouslySetInnerHTML: {
+            __html: ' '.repeat(50)
+          }
+        })), /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: "double"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "line-config double-line",
+          dangerouslySetInnerHTML: {
+            __html: ' '.repeat(50)
+          }
+        })), /*#__PURE__*/React__default.createElement(Select.Option, {
+          value: "wavy"
+        }, /*#__PURE__*/React__default.createElement("div", {
+          className: "line-config wavy-line",
+          dangerouslySetInnerHTML: {
+            __html: ' '.repeat(50)
+          }
+        }))))),
+        metaOption: data.underline,
+        toggleType: 'checkbox'
+      }],
+      type: "arrow"
+    }));
+  };
+
+  TextConfig.defaultProps = {
+    data: null
+  };
+  return TextConfig;
+}(BaseConfig);
+
+export { TextConfig as default, sizeTypeList };

package/src/components/meta-comp/config-panels/TextConfig/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_m-text-config__G10fc {\n  display: flex;\n  flex-direction: column;\n  padding: 0 12px;\n  background-color: #F5F6F7;\n}\n.index_m-text-config__G10fc .index_line-config__E1EJs {\n  text-decoration-line: line-through;\n  text-decoration-color: #000;\n  font-size: 14px;\n  font-weight: 600;\n}\n.index_m-text-config__G10fc .index_line-solid__fpZMp {\n  text-decoration-style: solid;\n}\n.index_m-text-config__G10fc .index_dashed-line__up9Nm {\n  text-decoration-style: dashed;\n}\n.index_m-text-config__G10fc .index_double-line__WGcsB {\n  text-decoration-style: double;\n}\n.index_m-text-config__G10fc .index_wavy-line__WUvJg {\n  text-decoration-style: wavy;\n}\n";
+styleInject(css_248z);

package/src/components/mobx/Store.js

@@ -0,0 +1,88 @@
+import { makeObservable, observable, action } from '../../../node_modules/mobx/dist/mobx.esm.js';
+
+var debug = require('debug')('worker:mobx');
+
+var Store =
+/** @class */
+function () {
+  function Store() {
+    this.hoveredMeta = ''; // hover的元组件Id
+
+    this.clickedMeta = ''; // 点击的元组件Id
+
+    this.clickedGroup = ''; // 点击的元组件组Id
+
+    this.clickedFloor = ''; // 点击的楼层Id
+
+    this.textSelection = null; // 文本元组件选中区域
+
+    this.MPageData = []; // 楼层数据
+
+    this.CarouselStore = {}; // 轮播组件暂存数据
+
+    makeObservable(this, {
+      hoveredMeta: observable,
+      clickedMeta: observable,
+      clickedGroup: observable,
+      clickedFloor: observable,
+      CarouselStore: observable,
+      setState: action.bound
+    });
+  }
+  /** 修改状态 */
+
+
+  Store.prototype.setState = function (data) {
+    var _this = this;
+
+    debug('magicDesign state', data);
+    var propertyList = Object.getOwnPropertyNames(data);
+    propertyList.forEach(function (field) {
+      _this[field] = data[field];
+    });
+  };
+  /**
+   *根据groupId 获取楼层Id
+   * @param id groupId
+   */
+
+
+  Store.prototype.getFloorIdByGroupId = function (id) {
+    var componentFloor = this.MPageData.find(function (floor) {
+      var _a;
+
+      var group = (_a = floor.groupSource) === null || _a === void 0 ? void 0 : _a.find(function (grp) {
+        return grp.id === id;
+      });
+      return !!group;
+    });
+    return componentFloor === null || componentFloor === void 0 ? void 0 : componentFloor.id;
+  };
+  /**
+   * 根据元组件Id 获取 楼层Id
+   * @param id
+   * @returns
+   */
+
+
+  Store.prototype.getFloorIdByMetaId = function (id) {
+    var componentFloor = this.MPageData.find(function (floor) {
+      var floorStr = JSON.stringify(floor);
+      return floorStr.includes(id);
+    });
+    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;
+}();
+
+export { Store };

package/src/components/mobx/index.js

@@ -0,0 +1,12 @@
+import { configure } from '../../../node_modules/mobx/dist/mobx.esm.js';
+export { $mobx, FlowCancellationError, ObservableMap, ObservableSet, Reaction, _allowStateChanges, _allowStateReadsEnd, _allowStateReadsStart, _autoAction, _endAction, _getAdministration, _startAction, action, autorun, comparer, computed, configure, createAtom, extendObservable, flow, getAtom, getDebugName, getDependencyTree, isAction, isFlow, isObservable, isObservableArray, isObservableMap, isObservableObject, isObservableSet, makeObservable, observable, onBecomeObserved, onBecomeUnobserved, spy, trace, transaction, untracked } from '../../../node_modules/mobx/dist/mobx.esm.js';
+import { Store } from './Store.js';
+
+/* 开启严格模式 */
+
+configure({
+  enforceActions: 'observed'
+});
+var store = new Store();
+
+export { store };

package/src/components/utils/androidUtil.js

@@ -0,0 +1,22 @@
+// 判断访问终端
+var browserVersion = function () {
+  var u = navigator.userAgent;
+  return {
+    trident: u.indexOf('Trident') > -1,
+    presto: u.indexOf('Presto') > -1,
+    webKit: u.indexOf('AppleWebKit') > -1,
+    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
+    mobile: !!u.match(/AppleWebKit.*Mobile.*/),
+    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
+    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
+    iPhone: u.indexOf('iPhone') > -1,
+    iPad: u.indexOf('iPad') > -1,
+    webApp: u.indexOf('Safari') == -1,
+    weixin: u.indexOf('MicroMessenger') > -1,
+    qq: u.match(/\sQQ/i) == ' qq',
+    isApp: u.indexOf('app/CYLON-APP') > -1 // 是否为CYLON-APP
+
+  };
+};
+
+export { browserVersion };