@fonixtree/magic-design 0.0.7 → 0.0.10

package/src/components/common/UrlPicker/index.js

@@ -0,0 +1,81 @@
+import { __extends } from '../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import './index.less.js';
+import LinkModal from '../LinkModal/index.js';
+import Iconfont from '../Iconfont/index.js';
+
+var UrlPicker =
+/** @class */
+function (_super) {
+  __extends(UrlPicker, _super);
+
+  function UrlPicker() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      visible: false
+    };
+    return _this;
+  }
+
+  UrlPicker.prototype.render = function () {
+    var _this = this;
+
+    var visible = this.state.visible;
+    var _a = this.props,
+        value = _a.value,
+        onChange = _a.onChange;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "m-url-picker"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "input-url"
+    }, /*#__PURE__*/React__default.createElement("input", {
+      onChange: function (e) {
+        return onChange(e.target.value);
+      },
+      placeholder: "Please add a link",
+      type: "text",
+      value: value
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: "icon-btns"
+    }, /*#__PURE__*/React__default.createElement(Iconfont, {
+      color: "#000",
+      onClick: function () {
+        return _this.setState({
+          visible: true
+        });
+      },
+      size: "20px",
+      type: "icon-URLguanli"
+    }), /*#__PURE__*/React__default.createElement(Iconfont, {
+      color: "#FF4141",
+      onClick: function () {
+        return onChange('');
+      },
+      size: "20px",
+      type: "icon-delete1"
+    }))), visible && /*#__PURE__*/React__default.createElement(LinkModal, {
+      onClose: function () {
+        return _this.setState({
+          visible: false
+        });
+      },
+      onConfirm: function (value) {
+        onChange(value);
+
+        _this.setState({
+          visible: false
+        });
+      },
+      visible: visible
+    }));
+  };
+
+  UrlPicker.defaultProps = {
+    value: '',
+    onChange: function () {}
+  };
+  return UrlPicker;
+}(React__default.Component);
+
+export { UrlPicker as default };

package/src/components/common/UrlPicker/index.less.js

@@ -0,0 +1,4 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index_m-url-picker__p9VJx .index_input-url__E-Mfy {\n  width: 100%;\n  height: 40px;\n  background: #FFFFFF;\n  border: 1px solid #D2D9E5;\n  border-radius: 8px;\n  padding: 9px 14px;\n  display: flex;\n  align-items: center;\n  /* 使用webkit内核的浏览器 */\n  /* Firefox版本4-18 */\n  /* Firefox版本19+ */\n  /* IE浏览器 */\n}\n.index_m-url-picker__p9VJx .index_input-url__E-Mfy input {\n  border: none;\n  outline: none;\n  height: 24px;\n  flex-grow: 1;\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  color: #232F46;\n}\n.index_m-url-picker__p9VJx .index_input-url__E-Mfy input::-webkit-input-placeholder {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  color: #8493AF;\n}\n.index_m-url-picker__p9VJx .index_input-url__E-Mfy input:-moz-placeholder {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  color: #8493AF;\n}\n.index_m-url-picker__p9VJx .index_input-url__E-Mfy input::-moz-placeholder {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  color: #8493AF;\n}\n.index_m-url-picker__p9VJx .index_input-url__E-Mfy input:-ms-input-placeholder {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  color: #8493AF;\n}\n.index_m-url-picker__p9VJx .index_input-url__E-Mfy .index_icon-btns__kjcKv {\n  display: flex;\n  align-items: center;\n}\n.index_m-url-picker__p9VJx .index_input-url__E-Mfy .index_icon-btns__kjcKv > span {\n  margin-left: 12px;\n  cursor: pointer;\n}\n";
+styleInject(css_248z);

package/src/components/composite-comp/bol/components/Banner/defaultJSON.js

@@ -0,0 +1,258 @@
+import uuid_1 from '../../../../../../node_modules/uuid/index.js';
+import img from './imgs/banner.png.js';
+
+var bannerGroupSourceJSON = function () {
+  var groupId = uuid_1.v4();
+  return {
+    id: groupId,
+    image: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'IMAGE',
+      content: {
+        h5Name: 'name2',
+        pcName: 'name2',
+        h5ImgSrc: img,
+        pcImgSrc: img,
+        clickUrl: ''
+      },
+      hover: {
+        open: false,
+        backgroundType: 'enlarge',
+        magnification: 1.5,
+        pcImgHoverUrl: '',
+        h5ImgHoverUrl: ''
+      }
+    },
+    title: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'TEXT',
+      text: 'Title use, click modify text.',
+      specialContent: [],
+      content: {
+        // sizeType: 'Headline 1',
+        fontFamily: 'Open Sans',
+        fontWeight: 700,
+        fontSize: 28,
+        color: '#FFFFFF',
+        width: 400
+      },
+      underline: {
+        open: false,
+        textDecorationColor: '',
+        textDecorationStyle: 'solid'
+      },
+      vertical: {}
+    },
+    text: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'TEXT',
+      specialContent: [],
+      text: 'For the text area, you can enter a subtitle or description, the default width is the same as title.',
+      content: {
+        // sizeType: 'Headline 1',
+        fontFamily: 'Open Sans',
+        fontWeight: 400,
+        fontSize: 18,
+        color: '#FFFFFF',
+        width: 500
+      },
+      underline: {},
+      vertical: {}
+    },
+    button: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'BUTTON',
+      text: 'Button',
+      content: {
+        url: '',
+        backgroundColor: '#2F54EB'
+      },
+      buttonText: {
+        // sizeType: 'Headline 1',
+        fontFamily: 'Open Sans',
+        fontWeight: 600,
+        fontSize: 14,
+        fontStyle: 'normal',
+        color: '#fff'
+      },
+      buttonBorder: {
+        open: true,
+        borderColor: '',
+        borderRadius: 6
+      },
+      spacing: {
+        pc: {
+          paddingTop: 9,
+          paddingBottom: 9,
+          paddingLeft: 20,
+          paddingRight: 20
+        },
+        mobile: {
+          paddingTop: 9,
+          paddingBottom: 9,
+          paddingLeft: 20,
+          paddingRight: 20
+        }
+      },
+      buttonIcon: {
+        iconUrl: '',
+        layout: 'right'
+      },
+      hover: {
+        open: false,
+        content: {
+          backgroundColor: '#0d39ed'
+        },
+        buttonText: {
+          // sizeType: 'Headline 1',
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 14,
+          fontStyle: 'normal',
+          color: '#fff'
+        },
+        buttonBorder: {
+          open: true,
+          borderColor: '',
+          borderRadius: 6
+        },
+        buttonIcon: {
+          iconUrl: '',
+          layout: 'right'
+        }
+      }
+    },
+    secondButton: {
+      parentId: groupId,
+      id: uuid_1.v4(),
+      open: true,
+      type: 'BUTTON',
+      text: 'More',
+      content: {
+        url: '',
+        backgroundColor: '#fff'
+      },
+      buttonText: {
+        // sizeType: 'Headline 1',
+        fontFamily: 'Open Sans',
+        fontWeight: 600,
+        fontSize: 14,
+        fontStyle: 'normal',
+        color: '#2F54EB'
+      },
+      buttonBorder: {
+        open: true,
+        borderColor: '#2F54EB',
+        borderRadius: 6
+      },
+      spacing: {
+        pc: {
+          paddingTop: 9,
+          paddingBottom: 9,
+          paddingLeft: 20,
+          paddingRight: 20
+        },
+        mobile: {
+          paddingTop: 9,
+          paddingBottom: 9,
+          paddingLeft: 20,
+          paddingRight: 20
+        }
+      },
+      buttonIcon: {
+        iconUrl: '',
+        layout: 'right'
+      },
+      hover: {
+        open: false,
+        content: {
+          backgroundColor: '#E9F0FF'
+        },
+        buttonText: {
+          // sizeType: 'Headline 1',
+          fontFamily: 'Open Sans',
+          fontWeight: 600,
+          fontSize: 14,
+          fontStyle: 'normal',
+          color: '#2F54EB'
+        },
+        buttonBorder: {
+          open: true,
+          borderColor: '#2F54EB',
+          borderRadius: 6
+        },
+        buttonIcon: {
+          iconUrl: '',
+          layout: 'right'
+        }
+      }
+    },
+    customize: {
+      layout: 'left',
+      align: 'left'
+    },
+    background: {
+      opacity: 100,
+      color: '#232F46',
+      image: '',
+      bgType: 'color'
+    }
+  };
+};
+var getDefaultJSON = function () {
+  return {
+    id: uuid_1.v4(),
+    type: 'BANNER',
+    setting: {
+      pcHeight: 360,
+      mobileHeight: 386,
+      // 自动轮播
+      autoplay: {
+        open: false,
+        interval: 4 // 滚动事件
+
+      },
+      // 切换按钮
+      navigation: {
+        open: true,
+        size: 16,
+        hoverSize: 16,
+        color: '#aaa',
+        hoverColor: '#fff' // 悬浮颜色
+
+      },
+      // 面板指示点
+      dots: {
+        open: true,
+        color: '#fff',
+        hoverColor: '#fff',
+        size: 16,
+        hoverSize: 16 // 悬浮大小
+
+      }
+    },
+    groupSource: [bannerGroupSourceJSON()],
+    spacing: {
+      pc: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        marginBottom: 0
+      },
+      mobile: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        marginBottom: 0
+      }
+    }
+  };
+};
+
+export { bannerGroupSourceJSON, getDefaultJSON };