cloud-b2b 1.0.0 → 1.0.3

package/es/Viewer/ImageViews.js

@@ -0,0 +1,311 @@
+import _Reflect$construct from "@babel/runtime-corejs3/core-js-stable/reflect/construct";
+import _Icon from "antd/es/icon";
+import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
+import _createClass from "@babel/runtime-corejs3/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime-corejs3/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime-corejs3/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _JSON$stringify from "@babel/runtime-corejs3/core-js-stable/json/stringify";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from "react";
+import variables from '../variables';
+
+var addEvent = function addEvent(el, event, handler) {
+  if (!el) return;
+
+  if (el.attachEvent) {
+    el.attachEvent('on' + event, handler);
+  } else if (el.addEventListener) {
+    el.addEventListener(event, handler, false);
+  } else {
+    el['on' + event] = handler;
+  }
+};
+
+var removeEvent = function removeEvent(el, event, handler) {
+  if (!el) return;
+
+  if (el.detachEvent) {
+    el.detachEvent('on' + event, handler);
+  } else if (el.removeEventListener) {
+    el.removeEventListener(event, handler, false);
+  } else {
+    el['on' + event] = null;
+  }
+};
+
+var getCss = function getCss(o, key) {
+  return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o)[key];
+}; // 获取元素旋转的角度
+
+
+var getRotateDeg = function getRotateDeg(target) {
+  var rotateMatrix = getCss(target, 'transform');
+
+  var _rotateMatrix$split$ = rotateMatrix.split('(')[1].split(')')[0].split(','),
+      _rotateMatrix$split$2 = _slicedToArray(_rotateMatrix$split$, 2),
+      a = _rotateMatrix$split$2[0],
+      b = _rotateMatrix$split$2[1];
+
+  return Math.round(Math.atan2(b, a) * (180 / Math.PI));
+};
+
+var ImageViews = /*#__PURE__*/function (_React$Component) {
+  _inherits(ImageViews, _React$Component);
+
+  var _super = _createSuper(ImageViews);
+
+  function ImageViews(props) {
+    var _this;
+
+    _classCallCheck(this, ImageViews);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "_onwheel", function (e) {
+      var zoom = _this.state.zoom;
+      /*事件兼容*/
+
+      var event = e || window.event;
+      var imageDOM = _this.imgRef;
+      var delta;
+
+      if (event.nativeEvent.wheelDelta) {
+        delta = event.nativeEvent.wheelDelta / 1200;
+      } else if (event.nativeEvent.deltaY) {
+        delta = -event.nativeEvent.deltaY / 1200;
+      }
+
+      var zoomVal = zoom + delta;
+
+      if (zoomVal >= 0.2) {
+        imageDOM.style.transform = "translate(-50%,-50%) scale(".concat(zoomVal, ")");
+      } else {
+        zoomVal = 0.2;
+        imageDOM.style.transform = "translate(-50%,-50%) scale(".concat(zoomVal, ")");
+      }
+
+      _this.setState({
+        zoom: zoomVal
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_onMouseDown", function (e) {
+      /*事件兼容*/
+      var event = e || window.event;
+      var imageDOM = _this.imgRef;
+      event.preventDefault(); //阻止浏览器的默认事件
+
+      var startTouch = {};
+      startTouch.initiated = true; //initiated为true表示开始滑动
+
+      /*获取鼠标按下的地方距离元素左侧和上侧的距离*/
+
+      startTouch.startX = event.nativeEvent.clientX - imageDOM.offsetLeft;
+      startTouch.startY = event.nativeEvent.clientY - imageDOM.offsetTop;
+
+      _this.setState({
+        startTouch: startTouch
+      });
+
+      addEvent(document, 'mousemove', _this._onMouseMove);
+      addEvent(document, 'mouseup', _this._onMouseUp);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_onMouseMove", function (e) {
+      var event = e || window.event;
+      var imageDOM = _this.imgRef;
+      var startTouch = _this.state.startTouch;
+      if (!startTouch.initiated) return; //滑动距离
+
+      var deltaX = event.clientX - startTouch.startX;
+      var deltaY = event.clientY - startTouch.startY;
+      imageDOM.style.left = "".concat(deltaX, "px");
+      imageDOM.style.top = "".concat(deltaY, "px");
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_onMouseUp", function () {
+      var startTouch = _this.state.startTouch;
+      if (!startTouch.initiated) return;
+      var endTouch = JSON.parse(_JSON$stringify(startTouch));
+      endTouch.initiated = false;
+
+      _this.setState({
+        startTouch: startTouch
+      });
+
+      removeEvent(document, 'mousemove', _this._onMouseMove);
+      removeEvent(document, 'mouseup', _this._onMouseDown);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_onPlus", function (event) {
+      var zoom = _this.state.zoom;
+      var imageDOM = _this.imgRef;
+      var zoomVal = zoom + 0.1;
+      var originDeg = getRotateDeg(imageDOM);
+      event.stopPropagation();
+
+      if (zoomVal >= 0.2) {
+        var _context;
+
+        imageDOM.style.transform = _concatInstanceProperty(_context = "translate(-50%,-50%) scale(".concat(zoomVal, ") rotate(")).call(_context, originDeg, "deg)");
+      }
+
+      _this.setState({
+        zoom: zoomVal
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_onMinus", function () {
+      var _context2;
+
+      var zoom = _this.state.zoom;
+      var imageDOM = _this.imgRef;
+      var zoomVal = zoom - 0.1;
+      var originDeg = getRotateDeg(imageDOM);
+
+      if (zoomVal < 0.2) {
+        zoomVal = 0.2;
+      }
+
+      imageDOM.style.transform = _concatInstanceProperty(_context2 = "translate(-50%,-50%) scale(".concat(zoomVal, ") rotate(")).call(_context2, originDeg, "deg)");
+
+      _this.setState({
+        zoom: zoomVal
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_reload", function () {
+      var imageDOM = _this.imgRef;
+      imageDOM.style.transform = "translate(-50%,-50%) scale(1) rotate(0deg)";
+      imageDOM.style.left = "50%";
+      imageDOM.style.top = "50%";
+
+      _this.setState({
+        zoom: 1
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_arrowLeft", function () {
+      var onLeft = _this.props.onLeft;
+      onLeft && onLeft();
+      var imageDOM = _this.imgRef;
+      imageDOM.style.transform = "translate(-50%,-50%) scale(1) rotate(0deg)";
+      imageDOM.style.left = "50%";
+      imageDOM.style.top = "50%";
+
+      _this.setState({
+        zoom: 1
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_arrowRight", function () {
+      var onRight = _this.props.onRight;
+      onRight && onRight();
+      var imageDOM = _this.imgRef;
+      imageDOM.style.transform = "translate(-50%,-50%) scale(1) rotate(0deg)";
+      imageDOM.style.left = "50%";
+      imageDOM.style.top = "50%";
+
+      _this.setState({
+        zoom: 1
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "rotate", function (isLeft) {
+      return function () {
+        var _context3;
+
+        var imageDOM = _this.imgRef;
+        var originDeg = getRotateDeg(imageDOM);
+        var zoom = _this.state.zoom;
+        var rotateDeg = isLeft ? originDeg - 90 : originDeg + 90;
+        imageDOM.style.transform = _concatInstanceProperty(_context3 = "translate(-50%,-50%) rotate(".concat(rotateDeg, "deg) scale(")).call(_context3, zoom, ")");
+      };
+    });
+
+    _this.state = {
+      zoom: 1,
+      startTouch: {}
+    };
+    return _this;
+  }
+
+  _createClass(ImageViews, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var image = this.props.image;
+      return /*#__PURE__*/React.createElement("div", {
+        className: variables('ImageViews')
+      }, /*#__PURE__*/React.createElement("div", {
+        role: "imgWrapper"
+      }, /*#__PURE__*/React.createElement("img", {
+        src: image.src,
+        alt: image.alt,
+        ref: function ref(imgRef) {
+          _this2.imgRef = imgRef;
+        },
+        onWheel: this._onwheel //缩放事件
+        ,
+        onMouseDown: this._onMouseDown //拖拽事件
+
+      })), /*#__PURE__*/React.createElement("div", {
+        className: variables('ImageViews').footer
+      }, /*#__PURE__*/React.createElement("div", {
+        className: variables('ImageViews').toolBar
+      }, /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
+        title: "\u653E\u5927",
+        onClick: this._onPlus,
+        onDoubleClick: function onDoubleClick(event) {
+          return event.preventDefault();
+        }
+      }, /*#__PURE__*/React.createElement(_Icon, {
+        type: "plus"
+      })), /*#__PURE__*/React.createElement("li", {
+        title: "\u7F29\u5C0F",
+        onClick: this._onMinus
+      }, /*#__PURE__*/React.createElement(_Icon, {
+        type: "minus"
+      })), /*#__PURE__*/React.createElement("li", {
+        title: "\u4E0A\u4E00\u5F20",
+        onClick: this._arrowLeft
+      }, /*#__PURE__*/React.createElement(_Icon, {
+        type: "arrow-left"
+      })), /*#__PURE__*/React.createElement("li", {
+        title: "\u4E0B\u4E00\u5F20",
+        onClick: this._arrowRight
+      }, /*#__PURE__*/React.createElement(_Icon, {
+        type: "arrow-right"
+      })), /*#__PURE__*/React.createElement("li", {
+        title: "\u5411\u5DE6\u65CB\u8F6C",
+        onClick: this.rotate(true)
+      }, /*#__PURE__*/React.createElement(_Icon, {
+        type: "pld-rotateleft"
+      })), /*#__PURE__*/React.createElement("li", {
+        title: "\u5411\u53F3\u65CB\u8F6C",
+        onClick: this.rotate(false)
+      }, /*#__PURE__*/React.createElement(_Icon, {
+        type: "pld-rotateright"
+      })), /*#__PURE__*/React.createElement("li", {
+        title: "\u590D\u539F",
+        onClick: this._reload
+      }, /*#__PURE__*/React.createElement(_Icon, {
+        type: "delete"
+      }))))));
+    }
+  }]);
+
+  return ImageViews;
+}(React.Component);
+
+export default ImageViews;

package/es/Viewer/Viewer.js

@@ -0,0 +1,149 @@
+import _Reflect$construct from "@babel/runtime-corejs3/core-js-stable/reflect/construct";
+import _Icon from "antd/es/icon";
+import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
+import _createClass from "@babel/runtime-corejs3/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime-corejs3/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime-corejs3/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImageViews from "./ImageViews";
+import variables from '../variables';
+
+var Viewers = /*#__PURE__*/function (_React$Component) {
+  _inherits(Viewers, _React$Component);
+
+  var _super = _createSuper(Viewers);
+
+  function Viewers(props) {
+    var _this;
+
+    _classCallCheck(this, Viewers);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
+      _this.timeout = null;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closeViewers", function () {
+      var _this$props = _this.props,
+          onCancel = _this$props.onCancel,
+          onClose = _this$props.onClose;
+      _this.containerRef.style['opacity'] = 0;
+      _this.timeout = _setTimeout(function () {
+        onCancel && onCancel(onClose);
+      }, 1000);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_onLeft", function () {
+      var imageIndex = _this.state.imageIndex;
+      var images = _this.props.images;
+      var index = imageIndex - 1;
+
+      if (index < 0) {
+        index = images.length - 1;
+      }
+
+      _this.setState({
+        imageIndex: index
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_onRight", function () {
+      var imageIndex = _this.state.imageIndex;
+      var images = _this.props.images;
+      var index = imageIndex + 1;
+
+      if (index > images.length - 1) {
+        index = 0;
+      }
+
+      _this.setState({
+        imageIndex: index
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_onSelect", function (index) {
+      _this.setState({
+        imageIndex: index
+      });
+    });
+
+    _this.state = {
+      imageIndex: props.imageIndex
+    };
+    return _this;
+  } //修复Warning报错
+
+
+  _createClass(Viewers, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          visible = _this$props2.visible,
+          images = _this$props2.images,
+          titles = _this$props2.titles;
+      var imageIndex = this.state.imageIndex;
+      return /*#__PURE__*/React.createElement("div", null, visible ? /*#__PURE__*/React.createElement("div", {
+        className: variables('Viewers'),
+        ref: function ref(container) {
+          _this2.containerRef = container;
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: variables('Viewers').mask
+      }), /*#__PURE__*/React.createElement("div", {
+        className: variables('Viewers').title
+      }, _mapInstanceProperty(titles).call(titles, function (item, index) {
+        var _context;
+
+        return /*#__PURE__*/React.createElement("div", {
+          key: index,
+          onClick: _bindInstanceProperty(_context = _this2._onSelect).call(_context, _this2, index),
+          className: index === imageIndex ? s.selectTitle : ''
+        }, item);
+      })), /*#__PURE__*/React.createElement(ImageViews, {
+        image: images[imageIndex],
+        onLeft: this._onLeft,
+        onRight: this._onRight
+      }), /*#__PURE__*/React.createElement("div", {
+        className: variables('Viewers').close,
+        onClick: function onClick() {
+          return _this2.closeViewers();
+        }
+      }, /*#__PURE__*/React.createElement(_Icon, {
+        type: "close"
+      }))) : null);
+    }
+  }]);
+
+  return Viewers;
+}(React.Component);
+
+_defineProperty(Viewers, "propTypes", {
+  /** viewer是否可见 */
+  visible: PropTypes.bool.isRequired,
+
+  /** 点击关闭按钮的回调 */
+  onCancel: PropTypes.func.isRequired,
+
+  /** 需要进行浏览的图片地址集合 */
+  images: PropTypes.array.isRequired,
+
+  /** 需要进行浏览的图片名称集合 */
+  titles: PropTypes.array.isRequired
+});
+
+export default Viewers;

package/es/Viewer/Viewer.less

@@ -0,0 +1,67 @@
+@import '../variables.less';
+
+html, body {
+  width: 100vw;
+  overflow: hidden;
+}
+
+.@{cloudlink-prefix}-Viewers {
+  font-size: 13px;
+  opacity: 1;
+  transition: opacity 1s;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  z-index: 1001;
+  .mask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background: rgba(55, 55, 55, 0.9);
+    overflow: hidden;
+  }
+  .close{
+    position: fixed;
+    right: 0;
+    top: 0;
+    height: 60px;
+    width: 60px;
+    border-radius: 0 0 0 60px;
+    background: rgba(0,0,0,0.6);
+    z-index: 1050;
+    i{
+      position: absolute;
+      left: 30px;
+      top: 15px;
+      color: white;
+      font-size: 16px;
+    }
+  }
+  .title{
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    z-index: 2000;
+
+    > div {
+      color: white;
+      font-weight: bold;
+      font-size: 24px;
+      cursor: pointer;
+    }
+
+    .selectTitle {
+      color: #4db5ff;
+    }
+  }
+}
+

package/es/Viewer/imgView.less

@@ -0,0 +1,59 @@
+@import '../variables.less';
+
+.@{cloudlink-prefix}-ImageViews {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: hidden;
+  z-index: 1050;
+  img{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    transform-origin: center center;
+    cursor: pointer;
+  }
+  .footer{
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 50px;
+    height: 52px;
+    z-index: 1100;
+    .toolBar{
+      display: flex;
+      height: 58px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-around;
+      >span{
+        font-size: 18px;
+        opacity:0.8;
+        line-height: 15px;
+        color: #ccc;
+      }
+      >ul{
+        overflow: hidden;
+        display: flex;
+        flex-direction: row;
+        >li{
+          height: 36px;
+          width: 36px;
+          border-radius: 50%;
+          background: rgba(0, 0, 0, 1);
+          margin-left: 5px;
+          text-align: center;
+          line-height: 36px;
+          cursor: pointer;
+          i{
+            color: white;
+          }
+        }
+      }
+    }
+  }
+}
+

package/es/Viewer/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "Viewer",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Viewer"
+}
+

package/es/WingBlank/WingBlank.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React from 'react';
+import variables from '../variables';
+
+function WingBlank(_ref) {
+  var _context;
+
+  var className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: _concatInstanceProperty(_context = "".concat(className, " ")).call(_context, variables('DragTable'))
+  }, props), /*#__PURE__*/React.createElement("div", null, children));
+}
+
+export default WingBlank;

package/es/WingBlank/WingBlank.less

@@ -0,0 +1,12 @@
+@import '../variables';
+
+.@{cloudlink-prefix}-WingBlank {
+  padding-left: @padding;
+  padding-right: @padding;
+
+  > * {
+    max-width: @max-width;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}

package/es/WingBlank/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "WingBlank",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./WingBlank.js"
+}