linkmore-design 1.0.99 → 1.1.0

package/lib/LmImgList/body/Banner.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var BannerItem = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var key = _ref.key,
+      index = _ref.index,
+      item = _ref.item,
+      instance = _ref.instance;
+  var state = instance.state,
+      getIsVideo = instance.getIsVideo;
+  var transformProps = (0, _react.useMemo)(function () {
+    if (index !== state.currentIndex) return {};
+    var _state$transform = state.transform,
+        scale = _state$transform.scale,
+        rotateZ = _state$transform.rotateZ;
+    return {
+      transform: "scale(".concat(scale, ") rotateZ(").concat(rotateZ, "deg)")
+    };
+  }, [state.currentIndex, state.transform]); // useEffect(() => {
+  //   // 1. 创建 IntersectionObserver对象
+  //   const ob = new IntersectionObserver(
+  //     (entry) => {
+  //       console.log('可见', entry[0].isIntersecting)
+  //       if (entry[0].isIntersecting) {
+  //         // 图片可见
+  //         if (imgRef.current) {
+  //           console.log('赋值src')
+  //           imgRef.current.src = item
+  //           setLoading(true)
+  //         }
+  //         ob.unobserve(imgRef.current!)
+  //       }
+  //     },
+  //     {
+  //       root: document.querySelector('.lm_imglist_banner'),
+  //     },
+  //   )
+  //   if (imgRef.current) {
+  //     // 2. 观察img
+  //     ob.observe(imgRef.current!)
+  //     return () => {
+  //       ob.disconnect()
+  //     }
+  //   }
+  // }, [])
+
+  var renderView = (0, _react.useMemo)(function () {
+    if (getIsVideo(item)) {
+      return (
+        /*#__PURE__*/
+        // @ts-ignore
+        _react.default.createElement("video", {
+          width: "100%",
+          height: "100%",
+          controls: "controls"
+        }, /*#__PURE__*/_react.default.createElement("source", {
+          src: item,
+          type: "video/mp4"
+        }), /*#__PURE__*/_react.default.createElement("source", {
+          src: item,
+          type: "video/webm"
+        }), /*#__PURE__*/_react.default.createElement("source", {
+          src: item,
+          type: "video/ogg"
+        }), "\u89C6\u9891\u64AD\u653E\u5931\u8D25\uFF01")
+      );
+    }
+
+    return /*#__PURE__*/_react.default.createElement("img", {
+      loading: "lazy",
+      alt: "",
+      src: item,
+      style: transformProps
+    });
+  }, [getIsVideo, item, transformProps]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "banner_item"
+  }, renderView);
+});
+
+var BigImg = function BigImg(_ref2) {
+  var instance = _ref2.instance;
+  var dataSource = instance.dataSource,
+      bodyRef = instance.bodyRef,
+      enableWheel = instance.enableWheel,
+      infinite = instance.infinite,
+      setTransform = instance.setTransform,
+      beforeChange = instance.beforeChange;
+  var onWheel = (0, _react.useCallback)(function (e) {
+    if (!enableWheel) return;
+
+    if ((e === null || e === void 0 ? void 0 : e.deltaY) <= 0) {
+      setTransform('zoomIn');
+    } else {
+      setTransform('zoomOut');
+    }
+  }, [enableWheel, setTransform]);
+  var config = {
+    dots: false,
+    infinite: infinite,
+    adaptiveHeight: false,
+    beforeChange: beforeChange
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_imglist_banner",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onWheel: onWheel
+  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Carousel, Object.assign({
+    ref: bodyRef
+  }, config), dataSource.map(function (v, idx) {
+    return /*#__PURE__*/_react.default.createElement(BannerItem, {
+      key: v || idx,
+      index: idx,
+      item: v,
+      instance: instance
+    });
+  })));
+};
+
+var _default = /*#__PURE__*/_react.default.memo(BigImg);
+
+exports.default = _default;

package/lib/LmImgList/body/Thumb.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<({ instance }: {
+    instance: any;
+}) => JSX.Element>;
+export default _default;

package/lib/LmImgList/body/Thumb.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var ThumbItem = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var index = _ref.index,
+      item = _ref.item,
+      instance = _ref.instance;
+  var state = instance.state,
+      slickGoTo = instance.slickGoTo,
+      getIsVideo = instance.getIsVideo;
+
+  var handleGoTo = function handleGoTo(e, number) {
+    e.preventDefault();
+    slickGoTo(number);
+  };
+
+  var renderView = (0, _react.useMemo)(function () {
+    if (getIsVideo(item)) {
+      return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+        type: "lmweb-video",
+        className: "thumb_item_icon"
+      });
+    }
+
+    return /*#__PURE__*/_react.default.createElement("img", {
+      loading: "lazy",
+      src: item,
+      alt: ""
+    });
+  }, [getIsVideo, item]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('thumb_item', state.currentIndex === index && 'active'),
+    onClick: function onClick(e) {
+      return handleGoTo(e, index);
+    }
+  }, renderView);
+});
+
+var Thumb = function Thumb(_ref2) {
+  var instance = _ref2.instance;
+  var dataSource = instance.dataSource;
+  var thumbProps = (0, _react.useMemo)(function () {
+    return {
+      gridTemplateColumns: "repeat(".concat(dataSource.length, ", 90px)")
+    };
+  }, [dataSource.length]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_imglist_thumb",
+    style: thumbProps,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, dataSource.map(function (v, idx) {
+    return /*#__PURE__*/_react.default.createElement(ThumbItem, {
+      key: v || idx,
+      index: idx,
+      item: v,
+      instance: instance
+    });
+  }));
+};
+
+var _default = /*#__PURE__*/_react.default.memo(Thumb);
+
+exports.default = _default;

package/lib/LmImgList/fns/index.d.ts

@@ -0,0 +1,20 @@
+declare const useCoreOptions: ({ state, dispatch, props, bodyRef }: {
+    state: any;
+    dispatch: any;
+    props: any;
+    bodyRef: any;
+}) => {
+    CoreMethods: {
+        getIsVideo: (url: any) => boolean;
+        setTransform: (type: any) => void;
+        beforeChange: (from: any, currentIndex: any) => void;
+        afterChange: (currentIndex: any) => void;
+    };
+    RefMethods: {
+        getState: () => any;
+        slickGoTo: (currentIndex: any) => void;
+        slickNext: () => void;
+        slickPrev: () => void;
+    };
+};
+export default useCoreOptions;

package/lib/LmImgList/fns/index.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var useCoreOptions = function useCoreOptions(_ref) {
+  var state = _ref.state,
+      dispatch = _ref.dispatch,
+      props = _ref.props,
+      bodyRef = _ref.bodyRef;
+  // 获取是否为视频格式
+  var getIsVideo = (0, _react.useCallback)(function (url) {
+    var fileExtension = url.replace(/.*\./, '').toLowerCase();
+    return ['mp4', 'm2v', 'mkv', 'ogm', 'webm'].includes(fileExtension);
+  }, []);
+  var setTransform = (0, _react.useCallback)(function (type) {
+    var scale = state.transform.scale * 100;
+    var rotateZ = state.transform.rotateZ;
+
+    switch (type) {
+      case 'zoomIn':
+        scale += 25;
+        break;
+
+      case 'zoomOut':
+        scale < 30 ? scale : scale -= 25;
+        break;
+
+      case 'rotateLeft':
+        rotateZ -= 90;
+        break;
+
+      case 'rotateRight':
+        rotateZ += 90;
+        break;
+
+      default:
+        break;
+    }
+
+    dispatch({
+      type: 'changeTransform',
+      transform: {
+        rotateZ: rotateZ,
+        scale: scale / 100
+      }
+    });
+  }, [state.transform]); // 切换轮播前的回调
+
+  var beforeChange = (0, _react.useCallback)(function (from, currentIndex) {
+    dispatch({
+      type: 'changeCurrent',
+      current: {
+        currentIndex: currentIndex
+      }
+    });
+  }, []); // 切换轮播后的回调
+
+  var afterChange = (0, _react.useCallback)(function (currentIndex) {
+    dispatch({
+      type: 'changeCurrent',
+      current: {
+        currentIndex: currentIndex
+      }
+    });
+  }, []); // 转到指定的轮播图, 直接跳转, 不展示动画
+
+  var slickGoTo = (0, _react.useCallback)(function (currentIndex) {
+    bodyRef.current.goTo(currentIndex, true);
+  }, []); // 转到下一张轮播图
+
+  var slickNext = (0, _react.useCallback)(function () {
+    bodyRef.current.next();
+  }, []); // 转到上一张轮播图
+
+  var slickPrev = (0, _react.useCallback)(function () {
+    bodyRef.current.prev();
+  }, []); // 初始化图片索引
+
+  (0, _react.useEffect)(function () {
+    slickGoTo(props.initialIndex);
+    dispatch({
+      type: 'changeCurrent',
+      current: {
+        currentIndex: props.initialIndex
+      }
+    });
+  }, [slickGoTo]);
+  var CoreMethods = {
+    getIsVideo: getIsVideo,
+    setTransform: setTransform,
+    beforeChange: beforeChange,
+    afterChange: afterChange
+  };
+  var RefMethods = {
+    getState: function getState() {
+      return state;
+    },
+    slickGoTo: slickGoTo,
+    slickNext: slickNext,
+    slickPrev: slickPrev
+  };
+  return {
+    CoreMethods: CoreMethods,
+    RefMethods: RefMethods
+  };
+};
+
+var _default = useCoreOptions;
+exports.default = _default;

package/lib/LmImgList/index.d.ts

@@ -0,0 +1,3 @@
+import LmImgList from './LmImgList';
+export * from './interface';
+export default LmImgList;

package/lib/LmImgList/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+
+var _LmImgList = _interopRequireDefault(require("./LmImgList"));
+
+var _interface = require("./interface");
+
+Object.keys(_interface).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _interface[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _interface[key];
+    }
+  });
+});
+var _default = _LmImgList.default;
+exports.default = _default;

package/lib/LmImgList/interface.d.ts

@@ -0,0 +1,14 @@
+export interface LmImgListProps {
+    ref?: any;
+    dataSource?: Array<string>;
+    type?: string;
+    height?: number | string | null;
+    initialIndex?: number;
+    infinite?: boolean;
+    enableWheel?: boolean;
+    enableScale?: boolean;
+    enableRotate?: boolean;
+}
+export interface LmImgListInstance {
+    instance: any;
+}

package/lib/LmImgList/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/LmImgList/style/index.css

@@ -0,0 +1,71 @@
+.lm_imglist_container {
+  position: relative;
+  display: grid;
+  grid-template-rows: auto 98px;
+  gap: var(--gap);
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+.lm_imglist_container .lm_imglist_banner {
+  overflow: hidden;
+  touch-action: none;
+}
+.lm_imglist_container .lm_imglist_banner div {
+  width: 100%;
+  height: 100%;
+}
+.lm_imglist_container .lm_imglist_banner .banner_item {
+  overflow: hidden;
+  text-align: center;
+  border-radius: 2px;
+}
+.lm_imglist_container .lm_imglist_banner .banner_item img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: 0.3s;
+}
+.lm_imglist_container .lm_imglist_thumb {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: repeat(14, 98px);
+  gap: var(--gap);
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+.lm_imglist_container .lm_imglist_thumb::-webkit-scrollbar-thumb {
+  visibility: hidden;
+  transition: 0.3s;
+}
+.lm_imglist_container .lm_imglist_thumb:hover::-webkit-scrollbar-thumb {
+  visibility: visible;
+}
+.lm_imglist_container .lm_imglist_thumb .thumb_item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 90px;
+  height: 100%;
+  text-align: center;
+  vertical-align: top;
+  background-color: var(--color-contrast);
+  border: 2px solid transparent;
+  border-radius: 2px;
+  transition: 0.3s;
+}
+.lm_imglist_container .lm_imglist_thumb .thumb_item .thumb_item_icon {
+  color: var(--color-45);
+  font-size: 34px;
+}
+.lm_imglist_container .lm_imglist_thumb .thumb_item img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.lm_imglist_container .lm_imglist_thumb .thumb_item.active {
+  border-color: var(--primary-color);
+}

package/lib/LmImgList/style/index.js

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

package/lib/LmImgList/style/variables.css

@@ -0,0 +1,71 @@
+.lm_imglist_container {
+  position: relative;
+  display: grid;
+  grid-template-rows: auto 98px;
+  gap: var(--gap);
+  width: 100%;
+  height: 100%;
+  user-select: none;
+}
+.lm_imglist_container .lm_imglist_banner {
+  overflow: hidden;
+  touch-action: none;
+}
+.lm_imglist_container .lm_imglist_banner div {
+  width: 100%;
+  height: 100%;
+}
+.lm_imglist_container .lm_imglist_banner .banner_item {
+  overflow: hidden;
+  text-align: center;
+  border-radius: 2px;
+}
+.lm_imglist_container .lm_imglist_banner .banner_item img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: 0.3s;
+}
+.lm_imglist_container .lm_imglist_thumb {
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: repeat(14, 98px);
+  gap: var(--gap);
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+}
+.lm_imglist_container .lm_imglist_thumb::-webkit-scrollbar-thumb {
+  visibility: hidden;
+  transition: 0.3s;
+}
+.lm_imglist_container .lm_imglist_thumb:hover::-webkit-scrollbar-thumb {
+  visibility: visible;
+}
+.lm_imglist_container .lm_imglist_thumb .thumb_item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 90px;
+  height: 100%;
+  text-align: center;
+  vertical-align: top;
+  background-color: var(--color-contrast);
+  border: 2px solid transparent;
+  border-radius: 2px;
+  transition: 0.3s;
+}
+.lm_imglist_container .lm_imglist_thumb .thumb_item .thumb_item_icon {
+  color: var(--color-45);
+  font-size: 34px;
+}
+.lm_imglist_container .lm_imglist_thumb .thumb_item img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.lm_imglist_container .lm_imglist_thumb .thumb_item.active {
+  border-color: var(--primary-color);
+}

package/lib/LmImgList/style/variables.js

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

package/lib/LmImgList/wrapper/Container.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { LmImgListInstance } from '..';
+declare const Container: React.FC<LmImgListInstance>;
+export default Container;

package/lib/LmImgList/wrapper/Container.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Banner = _interopRequireDefault(require("../body/Banner"));
+
+var _Thumb = _interopRequireDefault(require("../body/Thumb"));
+
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
+
+var Container = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var instance = _ref.instance;
+  var dispatch = instance.dispatch,
+      height = instance.height;
+  var boxContainerRef = (0, _react.useRef)(null); // 获取盒子容器的大小
+
+  /** TODO: 没设默认值会导致打包失败 */
+
+  var getResize = (0, _react.useCallback)(function () {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref2$blockSize = _ref2.blockSize,
+        blockSize = _ref2$blockSize === void 0 ? 0 : _ref2$blockSize,
+        _ref2$inlineSize = _ref2.inlineSize,
+        inlineSize = _ref2$inlineSize === void 0 ? 0 : _ref2$inlineSize;
+
+    dispatch({
+      type: 'changeResize',
+      resize: {
+        width: inlineSize,
+        height: blockSize
+      }
+    });
+  }, []); // 获取表格高度
+
+  useIsomorphicLayoutEffect(function () {
+    // 频繁变动可考虑增加防抖
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var borderbox = entries[0].borderBoxSize[0];
+      getResize(borderbox);
+    });
+
+    if (boxContainerRef.current) {
+      resizeObserver.observe(boxContainerRef.current);
+    }
+
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [getResize]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: boxContainerRef,
+    className: "lm_imglist_container",
+    style: {
+      height: height
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Banner.default, {
+    instance: instance
+  }), /*#__PURE__*/_react.default.createElement(_Thumb.default, {
+    instance: instance
+  }));
+});
+
+var _default = Container;
+exports.default = _default;

package/lib/LmImgList/wrapper/Root.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { LmImgListProps } from '..';
+declare const Root: React.FC<LmImgListProps>;
+export default Root;