linkmore-design 1.0.99 → 1.1.0

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;

package/es/LmImgList/wrapper/reducer.js

@@ -0,0 +1,52 @@
+// 初始化状态值
+var defaultState = {
+  // 容器盒子大小
+  resize: {
+    width: 0,
+    height: 0
+  },
+  currentIndex: 0,
+  currentUrl: '',
+  // 当前选中的图片变换
+  transform: {
+    scale: 1,
+    rotateZ: 0 // Z轴旋转方向
+
+  }
+}; // 状态管理操作
+
+export var reducer = function reducer(state, action) {
+  var resize = action.resize,
+      transform = action.transform,
+      current = action.current;
+
+  switch (action.type) {
+    case 'changeResize':
+      return Object.assign(Object.assign({}, state), {
+        resize: resize
+      });
+
+    case 'changeTransform':
+      // 改变转换
+      return Object.assign(Object.assign({}, state), {
+        transform: Object.assign(Object.assign({}, state.transform), transform)
+      });
+
+    case 'changeCurrent':
+      // 改变当前选中的图片
+      return Object.assign(Object.assign(Object.assign({}, state), current), {
+        transform: defaultState.transform
+      });
+
+    default:
+      throw new Error();
+  }
+}; // 仅在初始化时触发一次
+
+export var initialState = function initialState(props) {
+  var initialIndex = props.initialIndex;
+  return Object.assign(Object.assign({}, defaultState), {
+    currentIndex: initialIndex
+  });
+};
+export default reducer;

package/es/LmSelect/useCheckboxOptions.d.ts

@@ -1,4 +1,4 @@
-export declare const useCheckboxOptions: (options: any, { value, onChange }: {
+export declare const useCheckboxOptions: (options: any, { value, onChange: onCheckChange }: {
     value?: any[];
     onChange: any;
 }, filter?: string) => JSX.Element;