@hi-ui/hiui 2.15.11 → 2.15.12

package/es/preview/index.js

@@ -0,0 +1,529 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _reactAddonsCssTransitionGroup = _interopRequireDefault(require("react-addons-css-transition-group"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _loading = _interopRequireDefault(require("../loading"));
+
+require("./style/index.js");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var Preview =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Preview, _Component);
+
+  function Preview(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Preview);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Preview).call(this, props));
+    _this.state = {
+      extraClass: '',
+      style: {
+        width: 0,
+        height: 0,
+        left: 0,
+        top: 0,
+        rotate: 0,
+        scaleX: 1,
+        scaleY: 1
+      },
+      compileStyle: {},
+      imgLoaded: false,
+      isLoaded: false,
+      isMouseDown: false,
+      mouseX: 0,
+      mouseY: 0,
+      zoomValue: 100,
+      rotateValue: 0,
+      activeIndex: props.activeIndex || 0,
+      visible: props.visible
+    };
+    _this.node = document.createElement('div');
+    document.body.appendChild(_this.node);
+    _this.imgRef = _react["default"].createRef();
+    _this.previewRef = _react["default"].createRef();
+    _this.handleMouseDown = _this.handleMouseDown.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleMouseMove = _this.handleMouseMove.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleMouseUp = _this.handleMouseUp.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.handleMouseWheel = _this.handleMouseWheel.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.imageMouseOver = _this.imageMouseOver.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.imageMouseOut = _this.imageMouseOut.bind((0, _assertThisInitialized2["default"])(_this));
+    _this.autoPlayTimer = null;
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Preview, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.loadImg(this.state.activeIndex);
+      this.addAutoPlayEvent();
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearInterval(this.autoPlayTimer);
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (nextProps.activeIndex !== this.state.activeIndex || nextProps.visible !== this.state.visible) {
+        this.loadImg(nextProps.activeIndex);
+        this.addAutoPlayEvent();
+        this.setState({
+          activeIndex: nextProps.activeIndex,
+          visible: nextProps.activeIndex
+        });
+      }
+    }
+    /**
+     * 自动滚动函数，目前 API 未暴露
+     */
+
+  }, {
+    key: "addAutoPlayEvent",
+    value: function addAutoPlayEvent() {
+      var _this2 = this;
+
+      var duration = this.props.duration;
+
+      if (duration && duration > 0) {
+        this.autoPlayTimer = setInterval(function () {
+          var activeIndex = _this2.state.activeIndex;
+
+          _this2.loadImg(activeIndex + 1);
+        }, duration);
+      }
+    }
+  }, {
+    key: "imageMouseOver",
+    value: function imageMouseOver() {
+      clearInterval(this.autoPlayTimer);
+    }
+  }, {
+    key: "imageMouseOut",
+    value: function imageMouseOut() {
+      clearInterval(this.autoPlayTimer);
+      this.addAutoPlayEvent();
+    }
+  }, {
+    key: "onClose",
+    value: function onClose(e) {
+      this.setState({
+        style: {},
+        extraClass: '',
+        imgLoaded: false
+      });
+      this.props.onClose && this.props.onClose();
+    }
+  }, {
+    key: "handleMouseWheel",
+    value: function handleMouseWheel(e) {
+      e.preventDefault();
+      var direct = e.deltaY;
+
+      if (direct !== 0) {
+        var x = e.clientX;
+        var y = e.clientY;
+        this.handleZoom(x, y, direct);
+      }
+    }
+  }, {
+    key: "handleMouseDown",
+    value: function handleMouseDown(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.setState({
+        isMouseDown: true,
+        mouseX: e.nativeEvent.clientX,
+        mouseY: e.nativeEvent.clientY
+      });
+    }
+  }, {
+    key: "handleMouseUp",
+    value: function handleMouseUp() {
+      this.setState({
+        isMouseDown: false
+      });
+    }
+  }, {
+    key: "handleMouseMove",
+    value: function handleMouseMove(e) {
+      if (this.state.isMouseDown) {
+        var diffX = e.clientX - this.state.mouseX;
+        var diffY = e.clientY - this.state.mouseY;
+        this.setState({
+          mouseX: e.clientX,
+          mouseY: e.clientY
+        });
+        this.changeImageState({
+          left: this.state.style.left + diffX,
+          top: this.state.style.top + diffY
+        });
+      }
+    }
+    /**
+     * 缩放事件
+     * @param {*} x 鼠标位置 x
+     * @param {*} y 鼠标位置 y
+     * @param {*} direct 方向
+     */
+
+  }, {
+    key: "handleZoom",
+    value: function handleZoom(x, y, direct) {
+      var speed = 0.05;
+      var imgCenterXY = this.getImageCenterXY();
+      var diffX = x - imgCenterXY.x;
+      var diffY = y - imgCenterXY.y;
+      var _this$state$style = this.state.style,
+          left = _this$state$style.left,
+          top = _this$state$style.top,
+          scaleX = _this$state$style.scaleX,
+          scaleY = _this$state$style.scaleY;
+      var directX = scaleX > 0 ? 1 : -1;
+      var directY = scaleY > 0 ? 1 : -1;
+
+      var _scaleX = scaleX + speed * direct * directX;
+
+      var _scaleY = scaleY + speed * direct * directY;
+
+      if (Math.abs(_scaleX) < 0.1 || Math.abs(_scaleY) < 0.1) {
+        return;
+      }
+
+      this.changeImageState({
+        scaleX: _scaleX,
+        scaleY: _scaleY,
+        top: top + -direct * diffY / scaleX * speed * directX,
+        left: left + -direct * diffX / scaleY * speed * directY
+      });
+    }
+  }, {
+    key: "handleRotate",
+    value: function handleRotate(isRight) {
+      var rotate = this.state.style.rotate;
+      this.changeImageState({
+        rotate: rotate + 90 * (isRight ? 1 : -1)
+      });
+    }
+  }, {
+    key: "getImageCenterXY",
+    value: function getImageCenterXY() {
+      var _this$state$style2 = this.state.style,
+          left = _this$state$style2.left,
+          top = _this$state$style2.top,
+          width = _this$state$style2.width,
+          height = _this$state$style2.height;
+      return {
+        x: left + width / 2,
+        y: top + height / 2
+      };
+    }
+    /**
+     * 修改图片样式
+     * @param {*} args 计算后的部分样式
+     */
+
+  }, {
+    key: "changeImageState",
+    value: function changeImageState(args) {
+      var _this3 = this;
+
+      var style = this.state.style;
+
+      var _style = Object.assign({}, style, _objectSpread({}, args));
+
+      this.setState({
+        style: _style
+      }, function () {
+        var compileStyle = {
+          width: _style.width,
+          height: _style.height,
+          transform: "translateX(".concat(_style.left, "px) translateY(").concat(_style.top, "px) rotate(").concat(_style.rotate, "deg) scaleX(").concat(_style.scaleX, ") scaleY(").concat(_style.scaleY, ")")
+        };
+
+        _this3.setState({
+          compileStyle: compileStyle
+        });
+      });
+    }
+    /**
+     * 加载图片 加载完成后生成计算样式
+     * @param {*} imageIndex 加载的图片索引
+     */
+
+  }, {
+    key: "loadImg",
+    value: function loadImg(imageIndex) {
+      var _this4 = this;
+
+      var _this$props = this.props,
+          images = _this$props.images,
+          simpleData = _this$props.simpleData,
+          onError = _this$props.onError;
+
+      if (!images || images.length === 0) {
+        return;
+      }
+
+      if (imageIndex >= images.length) {
+        imageIndex = 0;
+      }
+
+      if (imageIndex < 0) {
+        imageIndex = images.length - 1;
+      }
+
+      var currentImage = images[imageIndex];
+      var img = new window.Image();
+
+      img.onload = function () {
+        _this4.setState({
+          activeIndex: imageIndex,
+          isLoaded: true
+        });
+
+        _this4.getImgWidthHeight(img.width, img.height);
+      };
+
+      img.onerror = function () {
+        _this4.setState({
+          activeIndex: imageIndex,
+          isLoaded: true
+        });
+
+        _this4.props.visible && onError && onError(imageIndex);
+      };
+
+      img.src = simpleData ? currentImage : currentImage.url;
+    }
+  }, {
+    key: "getImgWidthHeight",
+    value: function getImgWidthHeight(imgWidth, imgHeight) {
+      var width = 0;
+      var height = 0;
+      var _window = window,
+          innerHeight = _window.innerHeight,
+          innerWidth = _window.innerWidth;
+      var maxWidth = innerWidth * 0.8;
+      var maxHeight = innerHeight * 0.8;
+      var style = {};
+      width = Math.min(maxWidth, imgWidth);
+      height = width / imgWidth * imgHeight;
+
+      if (height > maxHeight) {
+        height = maxHeight;
+        width = height / imgHeight * imgWidth;
+      }
+
+      style = {
+        width: width,
+        height: height,
+        left: (innerWidth - width) / 2,
+        top: (innerHeight - height) / 2,
+        scaleX: 1,
+        scaleY: 1,
+        rotate: 0
+      };
+      this.changeImageState(style);
+    }
+  }, {
+    key: "clickEvent",
+    value: function clickEvent(type, event) {
+      event.stopPropagation();
+      var activeIndex = this.state.activeIndex;
+
+      var _this$getImageCenterX = this.getImageCenterXY(),
+          x = _this$getImageCenterX.x,
+          y = _this$getImageCenterX.y;
+
+      switch (type) {
+        case 'zoomIn':
+          this.handleZoom(x, y, -1);
+          break;
+
+        case 'zoomOut':
+          this.handleZoom(x, y, 1);
+          break;
+
+        case 'reset':
+          this.loadImg(activeIndex);
+          break;
+
+        case 'leftRotate':
+          this.handleRotate();
+          break;
+
+        case 'rightRotate':
+          this.handleRotate(true);
+          break;
+
+        case 'prev':
+          this.loadImg(activeIndex - 1);
+          break;
+
+        case 'next':
+          this.loadImg(activeIndex + 1);
+          break;
+
+        case 'close':
+          this.onClose();
+          break;
+
+        default:
+          break;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          visible = _this$props2.visible,
+          images = _this$props2.images,
+          showArrow = _this$props2.showArrow,
+          showCount = _this$props2.showCount,
+          showBar = _this$props2.showBar,
+          simpleData = _this$props2.simpleData;
+      var _this$state = this.state,
+          extraClass = _this$state.extraClass,
+          compileStyle = _this$state.compileStyle,
+          isLoaded = _this$state.isLoaded,
+          activeIndex = _this$state.activeIndex;
+
+      if (images.length === 0) {
+        return null;
+      }
+
+      if (!visible) {
+        return null;
+      }
+
+      return (0, _reactDom.createPortal)(_react["default"].createElement(_reactAddonsCssTransitionGroup["default"], {
+        transitionName: "hi-preview",
+        transitionEnterTimeout: 50,
+        transitionLeaveTimeout: 50,
+        component: "div"
+      }, _react["default"].createElement("div", {
+        key: 1,
+        ref: this.previewRef,
+        className: (0, _classnames["default"])('hi-preview', extraClass, {
+          'hi-preview--hide': !visible
+        }),
+        onMouseMove: this.handleMouseMove
+      }, isLoaded ? _react["default"].createElement("img", {
+        ref: this.imgRef,
+        src: simpleData ? images[activeIndex] : images[activeIndex].url,
+        style: _objectSpread({}, compileStyle),
+        onMouseDown: this.handleMouseDown,
+        onMouseUp: this.handleMouseUp,
+        onMouseEnter: this.imageMouseOver,
+        onMouseLeave: this.imageMouseOut,
+        className: "hi-preview__image"
+      }) : _react["default"].createElement(_loading["default"], {
+        size: "small"
+      }), showBar && _react["default"].createElement("div", {
+        className: "hi-preview-toolbar",
+        onClick: function onClick(e) {
+          e.stopPropagation();
+        }
+      }, _react["default"].createElement(_icon["default"], {
+        name: "zoom-out",
+        onClick: this.clickEvent.bind(this, 'zoomOut')
+      }), _react["default"].createElement(_icon["default"], {
+        name: "zoom-in",
+        onClick: this.clickEvent.bind(this, 'zoomIn')
+      }), _react["default"].createElement(_icon["default"], {
+        name: "left",
+        onClick: this.clickEvent.bind(this, 'prev')
+      }), _react["default"].createElement(_icon["default"], {
+        name: "ratio",
+        onClick: this.clickEvent.bind(this, 'reset')
+      }), _react["default"].createElement(_icon["default"], {
+        name: "right",
+        onClick: this.clickEvent.bind(this, 'next')
+      }), _react["default"].createElement(_icon["default"], {
+        name: "rotate-left",
+        onClick: this.clickEvent.bind(this, 'leftRotate')
+      }), _react["default"].createElement(_icon["default"], {
+        name: "rotate-right",
+        onClick: this.clickEvent.bind(this, 'rightRotate')
+      })), _react["default"].createElement("div", {
+        className: "hi-preview__close",
+        onClick: this.onClose.bind(this)
+      }, _react["default"].createElement("img", {
+        src: "data:image/png;base64,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"
+      })), showArrow && _react["default"].createElement("div", {
+        className: "hi-preview__wrapper-arrow"
+      }, _react["default"].createElement(_icon["default"], {
+        name: "left",
+        onClick: this.clickEvent.bind(this, 'prev')
+      }), _react["default"].createElement(_icon["default"], {
+        name: "right",
+        onClick: this.clickEvent.bind(this, 'next')
+      })), showCount && _react["default"].createElement("div", {
+        className: "hi-preview__count"
+      }, _react["default"].createElement("span", null, activeIndex + 1), "\xA0/\xA0", _react["default"].createElement("span", null, images.length)))), this.node);
+    }
+  }]);
+  return Preview;
+}(_react.Component);
+
+Preview.propTypes = {
+  visible: _propTypes["default"].bool,
+  onClose: _propTypes["default"].func,
+  showArrow: _propTypes["default"].bool,
+  showCount: _propTypes["default"].bool,
+  images: _propTypes["default"].array,
+  simpleData: _propTypes["default"].bool,
+  activeIndex: _propTypes["default"].number
+};
+Preview.defaultProps = {
+  showArrow: false,
+  visible: false,
+  showCount: false,
+  showBar: true,
+  duration: false,
+  onClose: function onClose() {},
+  images: [],
+  simpleData: false,
+  activeIndex: 0
+};
+var _default = Preview;
+exports["default"] = _default;

package/es/preview/style/index.css

@@ -0,0 +1 @@
+.hi-preview{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.54);z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.hi-preview__image:hover{cursor:move}.hi-preview-toolbar{position:absolute;bottom:20px;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background:#fff;padding:0 32px;height:48px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:28px}.hi-preview-toolbar .hi-icon{margin:0 12px;font-size:20px;cursor:pointer}.hi-preview__close{position:absolute;right:10px;top:10px;width:36px;height:36px;line-height:1;border-radius:50%;text-align:center}.hi-preview__close img{width:100%;height:100%;cursor:pointer}.hi-preview__wrapper-arrow{position:absolute;font-size:72px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;color:#fff;width:100%;z-index:-1}.hi-preview__wrapper-arrow .hi-icon{cursor:pointer}.hi-preview__count{position:absolute;top:12px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:#fff;padding:4px 12px;border-radius:16px;min-width:48px;text-align:center}

package/es/preview/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.css");