@fonixtree/magic-design 0.0.4 → 0.0.7

package/lib/common/Slider/index.js

@@ -1,151 +0,0 @@
-"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

@@ -1,45 +0,0 @@
-.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

@@ -1,216 +0,0 @@
-"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

@@ -1,40 +0,0 @@
-.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

@@ -1,119 +0,0 @@
-"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

@@ -1,72 +0,0 @@
-.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;
-      }
-    }
-  }
-}