@fonixtree/magic-design 0.0.1

package/lib/common/Slider/index.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _antd = require("antd");
+
+require("./index.less");
+
+var _InputNumber = _interopRequireDefault(require("../InputNumber"));
+
+var _ColorPickerInput = _interopRequireDefault(require("../ColorPickerInput"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var SliderInput =
+/** @class */
+function (_super) {
+  __extends(SliderInput, _super);
+
+  function SliderInput() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {};
+    _this.colorRef = /*#__PURE__*/_react["default"].createRef();
+    _this.colorPickerRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+
+  SliderInput.prototype.render = function () {
+    var _a = this.props,
+        value = _a.value,
+        minVal = _a.minVal,
+        _onChange = _a.onChange,
+        maxVal = _a.maxVal,
+        needColor = _a.needColor,
+        inputType = _a.inputType,
+        step = _a.step,
+        unit = _a.unit; // 在step 未传的情况下： 若类型为 int or percent 则step默认为1； 类型为float，则step默认为0.1
+
+    var _step = step || 1;
+
+    if (inputType == 'float') {
+      _step = step || 0.1;
+    }
+
+    var _unit = unit || (inputType === 'percent' ? '%' : '');
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "m-slider-input"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Slider, {
+      className: (0, _classnames["default"])('slider', {
+        colorAndSlider: needColor
+      }),
+      max: maxVal,
+      min: minVal,
+      onChange: function onChange(v) {
+        return _onChange(__assign(__assign({}, value), {
+          count: v
+        }));
+      },
+      step: _step,
+      value: value.count
+    }), /*#__PURE__*/_react["default"].createElement(_InputNumber["default"], {
+      max: maxVal,
+      min: minVal,
+      onChange: function onChange(v) {
+        return _onChange(__assign(__assign({}, value), {
+          count: v
+        }));
+      },
+      step: _step,
+      unit: _unit,
+      value: value.count
+    }), needColor && /*#__PURE__*/_react["default"].createElement(_ColorPickerInput["default"], {
+      colorType: "rgba",
+      onChange: function onChange(color) {
+        _onChange(__assign(__assign({}, value), {
+          color: color
+        }));
+      },
+      placement: "bottomLeft",
+      type: "dot",
+      value: value.color
+    }));
+  };
+
+  SliderInput.defaultProps = {
+    value: {
+      count: 1
+    },
+    onChange: function onChange() {},
+    minVal: 1,
+    maxVal: 100,
+    needColor: false,
+    inputType: 'int',
+    unit: ''
+  };
+  return SliderInput;
+}(_react["default"].Component);
+
+var _default = SliderInput;
+exports["default"] = _default;

package/lib/common/Slider/index.less

@@ -0,0 +1,45 @@
+.m-slider-input {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  
+  .slider {
+    border-radius: 100px;
+    flex: 1;
+    margin-right: 20px;
+
+    // .ant-slider-rail {
+    //   background-color: #E9F0FF;
+    // }
+
+    // .ant-slider-track {
+    //   background-color: #2F54EB;
+    // }
+  }
+
+  .sketchWrap {
+    border: 1px solid #EDF0F4;
+    border-radius: 8px;
+    width: 34px;
+    cursor: pointer;
+    height: 34px;
+    margin-left: 10px;
+    flex-shrink: 0;
+  }
+
+  .colorWrap {
+    position: absolute;
+    right: 2px;
+    top: 40px;
+    z-index: 2;
+  }
+
+  .m-color-picker-input {
+    .input-color {
+      height: auto !important;
+      padding: 0 0 0 12px !important;
+    }
+  }
+}

package/lib/common/SwitchCollapse/index.js

@@ -0,0 +1,216 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _antd = require("antd");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
+var Panel = _antd.Collapse.Panel;
+
+var SwitchCollapse =
+/** @class */
+function (_super) {
+  __extends(SwitchCollapse, _super);
+
+  function SwitchCollapse() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      activeKey: []
+    }; // switch 模式展开第一个open状态，checkbox模式展开所有open状态
+
+    _this.openSwitch = function (source) {
+      var type = _this.props.type;
+      var activeSource = [];
+
+      if (source.length === 0) {
+        return;
+      }
+
+      if (type === 'checkout') {
+        activeSource = source.filter(function (src) {
+          return src.metaOption.open;
+        }).map(function (src) {
+          return src.key;
+        });
+      } else {
+        var openMeta = source.find(function (meta) {
+          return meta.metaOption.open;
+        });
+
+        if (openMeta) {
+          activeSource.push(openMeta.key);
+        }
+      }
+
+      _this.setState({
+        activeKey: activeSource
+      });
+    };
+
+    _this.onSwitchChange = function (checked, panelInfo) {
+      panelInfo.metaOption.open = checked;
+
+      if (checked) {
+        _this.setState({
+          activeKey: panelInfo.key
+        });
+      } else {
+        _this.setState({
+          activeKey: null
+        });
+      }
+
+      _this.props.onRefresh();
+    };
+
+    _this.onCheckBoxChange = function (e, panelInfo) {
+      var checked = e.target.checked;
+      panelInfo.metaOption.open = checked;
+      var activeKey = _this.state.activeKey;
+
+      if (checked) {
+        _this.setState({
+          activeKey: activeKey ? __spreadArrays(activeKey, [panelInfo.key]) : [panelInfo.key]
+        });
+      } else {
+        _this.setState({
+          activeKey: activeKey.find(function (key) {
+            return key !== panelInfo.key;
+          })
+        });
+      }
+
+      _this.props.onRefresh();
+    };
+
+    _this.getSwitchButton = function (panelInfo) {
+      var type = _this.props.type;
+
+      if (type === 'switch') {
+        return /*#__PURE__*/_react["default"].createElement(_antd.Switch, {
+          checked: panelInfo.metaOption.open,
+          onChange: function onChange(checked) {
+            return _this.onSwitchChange(checked, panelInfo);
+          },
+          size: "small"
+        });
+      } else {
+        return /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
+          checked: panelInfo.metaOption.open,
+          onChange: function onChange(e) {
+            return _this.onCheckBoxChange(e, panelInfo);
+          }
+        });
+      }
+    };
+
+    _this.getHeader = function (name, index) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "header_wrap"
+      }, index !== 0 && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "meta_header_divider"
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        className: "switchcollapse_header_name"
+      }, name));
+    };
+
+    return _this;
+  }
+
+  SwitchCollapse.prototype.componentWillMount = function () {
+    this.openSwitch(this.props.source);
+  };
+
+  SwitchCollapse.prototype.componentWillReceiveProps = function (nextProps) {
+    this.openSwitch(nextProps.source);
+  };
+
+  SwitchCollapse.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        source = _a.source,
+        accordion = _a.accordion,
+        type = _a.type;
+    var activeKey = this.state.activeKey;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: type + "_collapse_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Collapse, {
+      accordion: accordion,
+      activeKey: activeKey,
+      ghost: true,
+      onChange: function onChange(value) {
+        return _this.setState({
+          activeKey: value
+        });
+      }
+    }, source.map(function (panelInfo, index) {
+      return /*#__PURE__*/_react["default"].createElement(Panel, {
+        key: panelInfo.key,
+        collapsible: panelInfo.metaOption.open ? 'header' : 'disabled',
+        extra: _this.getSwitchButton(panelInfo),
+        header: _this.getHeader(panelInfo.name, index),
+        showArrow: false
+      }, panelInfo.value);
+    })));
+  };
+
+  SwitchCollapse.defaultProps = {
+    source: [],
+    accordion: true,
+    type: 'switch'
+  };
+  return SwitchCollapse;
+}(_react["default"].Component);
+
+var _default = SwitchCollapse;
+exports["default"] = _default;

package/lib/common/SwitchCollapse/index.less

@@ -0,0 +1,40 @@
+.switch_collapse_wrap {
+  .ant-collapse {
+    .ant-collapse-item {
+      padding-bottom: 1px !important;
+      // &:first-child {
+      //   .ant-collapse-header{
+      //     padding-top: 0 !important;
+      //   }
+      // }
+    }
+
+    .header_wrap {
+      position: relative;
+
+      .switchcollapse_header_name {
+        font-family: 'Open Sans' !important;
+        font-style: normal !important;
+        font-weight: 700 !important;
+        font-size: 16px;
+        line-height: 24px !important;
+        color: #232F46 !important;
+        height: 24px
+      }
+
+      .meta_header_divider {
+        position: absolute;
+        height: 1px;
+        width: 306px;
+        border-bottom: 1px solid #D2D9E5;
+        top: -20px;
+      }
+    }
+  }
+}
+
+.checkbox_collapse_wrap {
+  .switchcollapse_header_name {
+    font-size: 14px !important;
+  }
+}

package/lib/common/UrlPicker/index.js

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./index.less");
+
+var _LinkModal = _interopRequireDefault(require("../LinkModal"));
+
+var _Iconfont = _interopRequireDefault(require("../Iconfont"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+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 onChange(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["default"], {
+      color: "#000",
+      onClick: function onClick() {
+        return _this.setState({
+          visible: true
+        });
+      },
+      size: "20px",
+      type: "icon-URLguanli"
+    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: "#FF4141",
+      onClick: function onClick() {
+        return _onChange('');
+      },
+      size: "20px",
+      type: "icon-delete1"
+    }))), visible && /*#__PURE__*/_react["default"].createElement(_LinkModal["default"], {
+      onClose: function onClose() {
+        return _this.setState({
+          visible: false
+        });
+      },
+      onConfirm: function onConfirm(value) {
+        _onChange(value);
+
+        _this.setState({
+          visible: false
+        });
+      },
+      visible: visible
+    }));
+  };
+
+  UrlPicker.defaultProps = {
+    value: '',
+    onChange: function onChange() {}
+  };
+  return UrlPicker;
+}(_react["default"].Component);
+
+var _default = UrlPicker;
+exports["default"] = _default;

package/lib/common/UrlPicker/index.less

@@ -0,0 +1,72 @@
+.m-url-picker {
+
+  .input-url {
+    width: 100%;
+    height: 40px;
+    background: #FFFFFF;
+    border: 1px solid #D2D9E5;
+    border-radius: 8px;
+    display: flex;
+    padding: 9px 14px;
+    display: flex;
+    align-items: center;
+
+    input {
+      border: none;
+      outline: none;
+      height: 24px;
+      flex-grow: 1;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: #232F46;
+    }
+
+    /* 使用webkit内核的浏览器 */
+    input::-webkit-input-placeholder {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: #8493AF;
+    }
+
+    /* Firefox版本4-18 */
+    input:-moz-placeholder {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: #8493AF;
+    }
+
+    /* Firefox版本19+ */
+    input::-moz-placeholder {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: #8493AF;
+    }
+
+    /* IE浏览器 */
+    input:-ms-input-placeholder {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: #8493AF;
+    }
+
+    .icon-btns {
+      display: flex;
+      align-items: center;
+
+      &>span {
+        margin-left: 12px;
+        cursor: pointer;
+      }
+    }
+  }
+}