fan-standard-comp 3.2.0 → 3.2.2

package/es/ImageGallery/Thumbnail.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Thumbnail: (props: any) => React.JSX.Element;
+export default Thumbnail;

package/es/ImageGallery/Thumbnail.js

@@ -0,0 +1,296 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useRef, useEffect, useState } from 'react';
+import classNames from "classnames";
+var isDragging = false;
+var translateX = 0;
+var thumbDragUtils = {
+  cords: {
+    startX: 0,
+    endX: 0
+  },
+  isMoved: false,
+  newTranslateX: 0,
+  startTime: new Date(),
+  endTime: new Date(),
+  touchMoveTime: 0
+};
+var thumbClickable = true;
+var thumbnailSwipeThreshold = 10;
+var Thumbnail = function Thumbnail(props) {
+  var _props$thumbWidth = props.thumbWidth,
+    thumbWidth = _props$thumbWidth === void 0 ? 100 : _props$thumbWidth,
+    _props$thumbMargin = props.thumbMargin,
+    thumbMargin = _props$thumbMargin === void 0 ? 5 : _props$thumbMargin,
+    thumbCurrent = props.thumbCurrent,
+    children = props.children,
+    galleryCount = props.galleryCount,
+    onClickThumbItem = props.onClickThumbItem,
+    _props$currentPagerPo = props.currentPagerPosition,
+    currentPagerPosition = _props$currentPagerPo === void 0 ? 'middle' : _props$currentPagerPo;
+  var $thumbOuter = useRef();
+  var $thumbGroup = useRef();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    thumbOuterWidth = _useState2[0],
+    setThumbOuterWidth = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    thumbTotalWidth = _useState4[0],
+    setThumbTotalWidth = _useState4[1];
+  var init = function init() {
+    var _a;
+    setThumbOuterWidth((_a = $thumbOuter === null || $thumbOuter === void 0 ? void 0 : $thumbOuter.current) === null || _a === void 0 ? void 0 : _a.clientWidth);
+    setThumbTotalWidth(galleryCount * (thumbWidth + thumbMargin));
+    // Thumbnail animation value
+    translateX = 0;
+  };
+  var destroy = function destroy() {
+    thumbDragUtils = {
+      cords: {
+        startX: 0,
+        endX: 0
+      },
+      isMoved: false,
+      newTranslateX: 0,
+      startTime: new Date(),
+      endTime: new Date(),
+      touchMoveTime: 0
+    };
+  };
+  var onThumbMouseDown = function onThumbMouseDown(e) {
+    if (thumbTotalWidth > thumbOuterWidth) {
+      // execute only on .lg-object
+      e.preventDefault();
+      thumbDragUtils.cords.startX = e.pageX;
+      thumbDragUtils.startTime = new Date();
+      thumbClickable = false;
+      isDragging = true;
+      //
+      // // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
+      // this.core.outer.get().scrollLeft += 1;
+      // this.core.outer.get().scrollLeft -= 1;
+      //
+      if ($thumbOuter.current) {
+        $thumbOuter.current.classList.remove('spec-image-preview-grab');
+        $thumbOuter.current.classList.add('spec-image-preview-grabbing');
+      }
+    }
+  };
+  var onThumbMouseMove = function onThumbMouseMove(e) {
+    if (isDragging) {
+      thumbDragUtils.cords.endX = e.pageX;
+      thumbDragUtils = onThumbTouchMove(thumbDragUtils);
+    }
+  };
+  var onThumbMouseUp = function onThumbMouseUp(e) {
+    var _a, _b;
+    if (thumbDragUtils.isMoved) {
+      thumbDragUtils = onThumbTouchEnd(thumbDragUtils);
+    } else {
+      thumbClickable = true;
+    }
+    if (isDragging) {
+      isDragging = false;
+      (_a = $thumbOuter === null || $thumbOuter === void 0 ? void 0 : $thumbOuter.current) === null || _a === void 0 ? void 0 : _a.classList.remove('spec-image-preview-grabbing');
+      (_b = $thumbOuter === null || $thumbOuter === void 0 ? void 0 : $thumbOuter.current) === null || _b === void 0 ? void 0 : _b.classList.add('spec-image-preview-grab');
+    }
+  };
+  var onThumbTouchMove = function onThumbTouchMove(thumbDragUtils) {
+    thumbDragUtils.newTranslateX = translateX;
+    thumbDragUtils.isMoved = true;
+    thumbDragUtils.touchMoveTime = new Date().valueOf();
+    thumbDragUtils.newTranslateX -= thumbDragUtils.cords.endX - thumbDragUtils.cords.startX;
+    thumbDragUtils.newTranslateX = getPossibleTransformX(thumbDragUtils.newTranslateX);
+    // move current slide
+    setTranslate(thumbDragUtils.newTranslateX);
+    $thumbOuter.current.classList.add('spec-image-preview-dragging');
+    return thumbDragUtils;
+  };
+  var onTouchStart = function onTouchStart(e) {
+    if (thumbTotalWidth > thumbOuterWidth) {
+      e.preventDefault();
+      thumbDragUtils.cords.startX = e.targetTouches[0].pageX;
+      thumbClickable = false;
+      thumbDragUtils.startTime = new Date();
+    }
+  };
+  var onTouchMove = function onTouchMove(e) {
+    if (thumbTotalWidth > thumbOuterWidth) {
+      e.preventDefault();
+      thumbDragUtils.cords.endX = e.targetTouches[0].pageX;
+      thumbDragUtils = onThumbTouchMove(thumbDragUtils);
+    }
+  };
+  var onTouchEnd = function onTouchEnd() {
+    if (thumbDragUtils.isMoved) {
+      thumbDragUtils = onThumbTouchEnd(thumbDragUtils);
+    } else {
+      thumbClickable = true;
+    }
+  };
+  var onThumbTouchEnd = function onThumbTouchEnd(thumbDragUtils) {
+    thumbDragUtils.isMoved = false;
+    thumbDragUtils.endTime = new Date();
+    $thumbOuter.current.classList.remove('spec-image-preview-dragging');
+    var touchDuration = thumbDragUtils.endTime.valueOf() - thumbDragUtils.startTime.valueOf();
+    var distanceXnew = thumbDragUtils.cords.endX - thumbDragUtils.cords.startX;
+    var speedX = Math.abs(distanceXnew) / touchDuration;
+    // Some magical numbers
+    // Can be improved
+    if (speedX > 0.15 && thumbDragUtils.endTime.valueOf() - thumbDragUtils.touchMoveTime < 30) {
+      speedX += 1;
+      if (speedX > 2) {
+        speedX += 1;
+      }
+      speedX = speedX + speedX * (Math.abs(distanceXnew) / thumbOuterWidth);
+      $thumbGroup.current.style.transitionDuration = Math.min(speedX - 1, 2) + 'settings';
+      distanceXnew = distanceXnew * speedX;
+      translateX = getPossibleTransformX(translateX - distanceXnew);
+      setTranslate(translateX);
+    } else {
+      translateX = thumbDragUtils.newTranslateX;
+    }
+    if (Math.abs(thumbDragUtils.cords.endX - thumbDragUtils.cords.startX) < thumbnailSwipeThreshold) {
+      thumbClickable = true;
+    }
+    return thumbDragUtils;
+  };
+  var getPossibleTransformX = function getPossibleTransformX(left) {
+    if (left > thumbTotalWidth - thumbOuterWidth) {
+      left = thumbTotalWidth - thumbOuterWidth;
+    }
+    if (left < 0) {
+      left = 0;
+    }
+    return left;
+  };
+  var setTranslate = function setTranslate(value) {
+    // console.log('偏移量', -value)
+    $thumbGroup.current.style.transform = 'translate3d(-' + value + 'px, 0px, 0px)';
+  };
+  var animateThumb = function animateThumb(index) {
+    // $thumbGroup.current.style.transitionDuration = '400ms'
+    var position = 0;
+    switch (currentPagerPosition) {
+      case 'left':
+        position = 0;
+        break;
+      case 'middle':
+        position = thumbOuterWidth / 2 - thumbWidth / 2;
+        break;
+      case 'right':
+        position = thumbOuterWidth - thumbWidth;
+    }
+    translateX = (thumbWidth + thumbMargin) * index - 1 - position;
+    if (translateX > thumbTotalWidth - thumbOuterWidth) {
+      translateX = thumbTotalWidth - thumbOuterWidth;
+    }
+    if (translateX < 0) {
+      translateX = 0;
+    }
+    setTranslate(translateX);
+  };
+  useEffect(function () {
+    init();
+    return function () {
+      destroy();
+    };
+  }, [$thumbOuter === null || $thumbOuter === void 0 ? void 0 : $thumbOuter.current, $thumbGroup === null || $thumbGroup === void 0 ? void 0 : $thumbGroup.current, thumbWidth, thumbMargin, galleryCount]);
+  // 计算转到中间位置
+  // const slideThumbToMiddle = () => {
+  //   const order = thumbCurrent + 1
+  //   // 当前图片块距离
+  //   const halfWidth = (thumbWidth + thumbMargin) / 2
+  //   const curDistance = order * (thumbWidth + thumbMargin) - halfWidth
+  //   const pageNum = Math.ceil((order * (thumbWidth + thumbMargin) / thumbOuterWidth))
+  //   const totalPage = Math.ceil(thumbTotalWidth / thumbOuterWidth)
+  //   const centerPosition = thumbOuterWidth / 2  // 中心点
+  //   if (isNaN(pageNum)) {
+  //     return
+  //   }
+  //   if (curDistance < centerPosition) {
+  //     console.log('Rule1，位置小于中心点，不设偏移量')
+  //     thumbDragUtils.newTranslateX = 0
+  //   } else {
+  //     console.log('thumbTotalWidth - curDistance', thumbTotalWidth - curDistance)
+  //     if ((thumbTotalWidth - curDistance) < centerPosition) {
+  //       console.log('Rule3,已经不足空间转到中间点了')
+  //       thumbDragUtils.newTranslateX = thumbTotalWidth - thumbOuterWidth
+  //     } else {
+  //       console.log('Rule2,直接跳转到中间点')
+  //       thumbDragUtils.newTranslateX = curDistance - centerPosition
+  //     }
+  //   }
+  //   setTranslate(thumbDragUtils.newTranslateX)
+  // }
+  useEffect(function () {
+    // 判断是不是在中间
+    animateThumb(thumbCurrent);
+  }, [thumbCurrent, thumbTotalWidth, thumbOuterWidth, thumbMargin]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'spec-image-preview-thumb-outer spec-image-preview-thumb-align-middle spec-image-preview-grab  spec-image-preview-animate-thumb',
+    ref: $thumbOuter
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'spec-image-preview-thumb spec-image-preview-thumb-group',
+    style: {
+      transitionDuration: '300ms',
+      width: galleryCount * (thumbWidth + thumbMargin) + 'px',
+      position: 'relative',
+      transform: 'translate3d(0px, 0px, 0px)'
+    },
+    ref: $thumbGroup,
+    onMouseDown: onThumbMouseDown,
+    onMouseUp: onThumbMouseUp,
+    onMouseMove: onThumbMouseMove,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd
+  }, React.Children.map(children, function (item, index) {
+    var imgNode; // = item.type !== 'img' ? item.props.children : item
+    if (item.type === 'img') {
+      imgNode = item;
+    } else if (item.props.children) {
+      if (Object.prototype.toString.call(item.props.children) === '[object Array]') {
+        // 多个子节点，只取img标签
+        imgNode = item.props.children.find(function (cItem) {
+          return cItem.type === 'img';
+        });
+      }
+      if (Object.prototype.toString.call(item.props.children) === '[object Object]') {
+        imgNode = item.props.children;
+      }
+    } else {
+      // 没有标签
+      imgNode = {};
+    }
+    // 单个子节点
+    // console.log('children=>item', item.props.children)
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('spec-image-preview-thumb-item', thumbCurrent === index ? 'active' : ''),
+      "data-item-id": index,
+      style: {
+        width: thumbWidth + 'px',
+        height: '80px',
+        marginRight: '5px'
+      },
+      onClick: function onClick(e) {
+        if (thumbClickable) {
+          onClickThumbItem === null || onClickThumbItem === void 0 ? void 0 : onClickThumbItem('number', index);
+        }
+      }
+    }, /*#__PURE__*/React.createElement("img", Object.assign({
+      src: item.props['data-src' || 'src']
+    }, imgNode.props, {
+      "data-item-id": index,
+      onMouseDown: function onMouseDown(evt) {
+        return evt.preventDefault();
+      }
+    })));
+  })));
+};
+export default Thumbnail;

package/es/ImageGallery/hook/uniqueId.d.ts

@@ -0,0 +1 @@
+export declare const useUniqueId: (prefix?: string) => string;

package/es/ImageGallery/hook/uniqueId.js

@@ -0,0 +1,10 @@
+import React from 'react';
+var uniqueId = 0;
+export var useUniqueId = function useUniqueId() {
+  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var id = React.useRef("".concat(prefix, "-").concat(uniqueId++));
+  React.useEffect(function () {
+    uniqueId++;
+  }, []);
+  return id.current;
+};

package/es/ImageGallery/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './style/index.less';
+declare const ImageGallery: (props: any) => React.JSX.Element;
+export default ImageGallery;

package/es/ImageGallery/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import ImagePreview from './ImagePreview';
+import { useUniqueId } from "./hook/uniqueId";
+import './style/index.less';
+var ImageGallery = function ImageGallery(props) {
+  var children = props.children,
+    _props$hasThumbnail = props.hasThumbnail,
+    hasThumbnail = _props$hasThumbnail === void 0 ? true : _props$hasThumbnail,
+    items = props.items,
+    height = props.height;
+  var prefixCls = 'spec-image-gallery';
+  var coreId = useUniqueId(prefixCls);
+  // useEffect(() => {
+  //   console.log('  document.getElementById(ImageGalleryId)', document.getElementById(ImageGalleryId))
+  // }, [])
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefixCls,
+    style: {
+      height: height
+    },
+    id: coreId
+  }, /*#__PURE__*/React.createElement(ImagePreview, {
+    hasThumbnail: hasThumbnail,
+    mode: 'inline',
+    showToolbar: false,
+    galleryItems: items
+  }, children));
+};
+export default ImageGallery;

package/es/ImageGallery/style/index.less

@@ -0,0 +1,5 @@
+.spec-image-gallery {
+  position: relative;
+  height: 100%;
+  z-index: 1000;
+}

package/es/ImageGallery/types.d.ts

@@ -0,0 +1,5 @@
+export type SlideDirection = 'next' | 'prev';
+export interface Coords {
+    pageX: number;
+    pageY: number;
+}

package/es/ImageGallery/types.js

@@ -0,0 +1 @@
+export {};