linkmore-design 1.0.98 → 1.0.100

package/es/LmImgList/body/Banner.js

@@ -0,0 +1,121 @@
+import React, { useMemo, useCallback } from 'react';
+import { Carousel } from 'linkmore-design';
+var BannerItem = /*#__PURE__*/React.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 = 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 = useMemo(function () {
+    if (getIsVideo(item)) {
+      return (
+        /*#__PURE__*/
+        // @ts-ignore
+        React.createElement("video", {
+          width: "100%",
+          height: "100%",
+          controls: "controls"
+        }, /*#__PURE__*/React.createElement("source", {
+          src: item,
+          type: "video/mp4"
+        }), /*#__PURE__*/React.createElement("source", {
+          src: item,
+          type: "video/webm"
+        }), /*#__PURE__*/React.createElement("source", {
+          src: item,
+          type: "video/ogg"
+        }), "\u89C6\u9891\u64AD\u653E\u5931\u8D25\uFF01")
+      );
+    }
+
+    return /*#__PURE__*/React.createElement("img", {
+      loading: "lazy",
+      alt: "",
+      src: item,
+      style: transformProps
+    });
+  }, [getIsVideo, item, transformProps]);
+  return /*#__PURE__*/React.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 = 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.createElement("div", {
+    className: "lm_imglist_banner",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onWheel: onWheel
+  }, /*#__PURE__*/React.createElement(Carousel, Object.assign({
+    ref: bodyRef
+  }, config), dataSource.map(function (v, idx) {
+    return /*#__PURE__*/React.createElement(BannerItem, {
+      key: v || idx,
+      index: idx,
+      item: v,
+      instance: instance
+    });
+  })));
+};
+
+export default /*#__PURE__*/React.memo(BigImg);

package/es/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/es/LmImgList/body/Thumb.js

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react';
+import cn from 'classnames';
+import { IconFont } from 'linkmore-design';
+var ThumbItem = /*#__PURE__*/React.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 = useMemo(function () {
+    if (getIsVideo(item)) {
+      return /*#__PURE__*/React.createElement(IconFont, {
+        type: "lmweb-video",
+        className: "thumb_item_icon"
+      });
+    }
+
+    return /*#__PURE__*/React.createElement("img", {
+      loading: "lazy",
+      src: item,
+      alt: ""
+    });
+  }, [getIsVideo, item]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn('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 = useMemo(function () {
+    return {
+      gridTemplateColumns: "repeat(".concat(dataSource.length, ", 90px)")
+    };
+  }, [dataSource.length]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "lm_imglist_thumb",
+    style: thumbProps,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, dataSource.map(function (v, idx) {
+    return /*#__PURE__*/React.createElement(ThumbItem, {
+      key: v || idx,
+      index: idx,
+      item: v,
+      instance: instance
+    });
+  }));
+};
+
+export default /*#__PURE__*/React.memo(Thumb);

package/es/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/es/LmImgList/fns/index.js

@@ -0,0 +1,106 @@
+import { useCallback, useEffect } from 'react';
+
+var useCoreOptions = function useCoreOptions(_ref) {
+  var state = _ref.state,
+      dispatch = _ref.dispatch,
+      props = _ref.props,
+      bodyRef = _ref.bodyRef;
+  // 获取是否为视频格式
+  var getIsVideo = useCallback(function (url) {
+    var fileExtension = url.replace(/.*\./, '').toLowerCase();
+    return ['mp4', 'm2v', 'mkv', 'ogm', 'webm'].includes(fileExtension);
+  }, []);
+  var setTransform = 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 = useCallback(function (from, currentIndex) {
+    dispatch({
+      type: 'changeCurrent',
+      current: {
+        currentIndex: currentIndex
+      }
+    });
+  }, []); // 切换轮播后的回调
+
+  var afterChange = useCallback(function (currentIndex) {
+    dispatch({
+      type: 'changeCurrent',
+      current: {
+        currentIndex: currentIndex
+      }
+    });
+  }, []); // 转到指定的轮播图, 直接跳转, 不展示动画
+
+  var slickGoTo = useCallback(function (currentIndex) {
+    bodyRef.current.goTo(currentIndex, true);
+  }, []); // 转到下一张轮播图
+
+  var slickNext = useCallback(function () {
+    bodyRef.current.next();
+  }, []); // 转到上一张轮播图
+
+  var slickPrev = useCallback(function () {
+    bodyRef.current.prev();
+  }, []); // 初始化图片索引
+
+  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
+  };
+};
+
+export default useCoreOptions;

package/es/LmImgList/index.d.ts

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

package/es/LmImgList/index.js

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

package/es/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/es/LmImgList/interface.js

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

package/es/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/es/LmImgList/style/index.js

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

package/es/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/es/LmImgList/style/variables.js

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

package/es/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/es/LmImgList/wrapper/Container.js

@@ -0,0 +1,56 @@
+import React, { useRef, useLayoutEffect, useEffect, useCallback } from 'react';
+import Banner from '../body/Banner';
+import Thumb from '../body/Thumb';
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+var Container = /*#__PURE__*/React.memo(function (_ref) {
+  var instance = _ref.instance;
+  var dispatch = instance.dispatch,
+      height = instance.height;
+  var boxContainerRef = useRef(null); // 获取盒子容器的大小
+
+  /** TODO: 没设默认值会导致打包失败 */
+
+  var getResize = 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.createElement("div", {
+    ref: boxContainerRef,
+    className: "lm_imglist_container",
+    style: {
+      height: height
+    }
+  }, /*#__PURE__*/React.createElement(Banner, {
+    instance: instance
+  }), /*#__PURE__*/React.createElement(Thumb, {
+    instance: instance
+  }));
+});
+export default Container;

package/es/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;

package/es/LmImgList/wrapper/Root.js

@@ -0,0 +1,44 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useMemo, useRef, useReducer, forwardRef, useImperativeHandle } from 'react';
+import reducer, { initialState as initReducerState } from './reducer';
+import useCoreOptions from '../fns';
+import Wrapper from './Wrapper';
+var Root = /*#__PURE__*/forwardRef(function (props, ref) {
+  var bodyRef = useRef(null);
+  var initialState = useMemo(function () {
+    return initReducerState(props);
+  }, []);
+
+  var _useReducer = useReducer(reducer, initialState),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1]; // 获取核心Methods
+
+
+  var _useCoreOptions = useCoreOptions({
+    state: state,
+    dispatch: dispatch,
+    props: props,
+    bodyRef: bodyRef
+  }),
+      CoreMethods = _useCoreOptions.CoreMethods,
+      RefMethods = _useCoreOptions.RefMethods;
+
+  var instance = Object.assign(Object.assign(Object.assign(Object.assign({}, props), CoreMethods), RefMethods), {
+    bodyRef: bodyRef,
+    state: state,
+    dispatch: dispatch
+  }); // 向外暴露出的方法
+
+  useImperativeHandle(ref, function () {
+    return Object.assign(Object.assign({}, RefMethods), {
+      getState: function getState() {
+        return state;
+      }
+    });
+  });
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    instance: instance
+  });
+});
+export default Root;

package/es/LmImgList/wrapper/Wrapper.d.ts

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

package/es/LmImgList/wrapper/Wrapper.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import LmBoxContainer from './Container';
+var LmBoxWrapper = /*#__PURE__*/React.memo(function (_ref) {
+  var instance = _ref.instance;
+  return /*#__PURE__*/React.createElement(LmBoxContainer, {
+    instance: instance
+  });
+});
+export default LmBoxWrapper;

package/es/LmImgList/wrapper/reducer.d.ts

@@ -0,0 +1,14 @@
+export declare const reducer: (state: any, action: any) => any;
+export declare const initialState: (props: any) => {
+    currentIndex: any;
+    resize: {
+        width: number;
+        height: number;
+    };
+    currentUrl: string;
+    transform: {
+        scale: number;
+        rotateZ: number;
+    };
+};
+export default reducer;