plain-design 1.0.0-beta.31 → 1.0.0-beta.32

package/src/packages/components/VirtualList/useVirtualList.tsx

@@ -4,17 +4,25 @@ import './virtual-list.scss';
 import Scroll from "../Scroll";
 import {unit} from "plain-utils/string/unit";
 import {createEnum} from "plain-utils/utils/createEnum";
+import {PlainObject} from "plain-utils/utils/event";
 
 interface DataNode {
-  top: number;
-  bottom: number;
-  height: number;
+  start: number;
+  end: number;
+  size: number;
   item: any;
   id: string;
   index: number,
 }
 
-const ScrollDirection = createEnum(['up', 'down', 'none'] as const);
+/**
+ * 滚动的方向
+ * 纵向：start表示往上滚动，end表示往下滚动
+ * 横向：start表示往左滚动，end表示往右滚动
+ * @author  韦胜健
+ * @date    2024/1/10 14:37
+ */
+const ScrollDirection = createEnum(['start', 'end', 'none'] as const);
 
 const nextRowId = createCounter('__v__');
 
@@ -30,7 +38,12 @@ export function useVirtualList(
       size: number,
       disabled?: boolean,
       dynamicSize?: boolean,
+      /*纵向虚拟滚动，需要横向滚动的时候必须指定宽度*/
       width?: string | number,
+      /*横向虚拟滚动，需要纵向滚动的时候必须指定高度*/
+      height?: string | number,
+      /*启用横向虚拟滚动*/
+      horizontal?: boolean,
     },
     refs: {
       scroll?: typeof Scroll.use.class | null,
@@ -38,7 +51,7 @@ export function useVirtualList(
     },
     emit: {
       onScroll: (e: Event) => void,
-      onPageIndexChange: (data: { pageIndex: number, start: number }) => void,
+      onPageIndexChange: (data: { pageIndex: number, startIndex: number, endIndex: number }) => void,
     },
     transform?: boolean,
   }
@@ -46,38 +59,38 @@ export function useVirtualList(
 
   /*非响应式属性*/
   const freezeState = {
-    scrollTop: 0,                               // 实时的scrollTop值
-    current: {                                  // 当前的页面信息
+    scrollValue: 0,                               // 实时的scrollTop值
+    current: {                                    // 当前的页面信息
       pageIndex: 0,
-      start: 0,
-      end: 0,
+      startIndex: 0,
+      endIndex: 0,
     },
   };
   /*响应式属性*/
   const state = reactive({
-    scrollTop: 0,                               // 当前滚动scrollTop（非实时的）
+    scrollValue: 0,                               // 当前滚动scrollTop（非实时的）
     pageSize: 0,                                // 页大小
     scrollDirection: ScrollDirection.none as typeof ScrollDirection.TYPE,
-    id2height: {} as Record<string, number | undefined>,
-    avgHeight: props.size
+    id2size: {} as Record<string, number | undefined>,
+    avgSize: props.size
   });
 
-  const idMap = new WeakMap<object, string>();
-  let prevBottom = 0;
+  const idMap = new WeakMap<PlainObject, string>();
+  let prevEnd = 0;
 
   const nodes = computed(() => {
-    prevBottom = 0;
+    prevEnd = 0;
     return props.data.map((item, index): DataNode => {
       let id = idMap.get(item);
       if (!id) {
         id = nextRowId();
         idMap.set(item, id);
       }
-      const height: number = state.id2height[id] || state.avgHeight;
-      let top = prevBottom;
-      let bottom = top + height;
-      prevBottom = bottom;
-      return { id: id!, item, height, top, bottom, index };
+      const size: number = state.id2size[id] || state.avgSize;
+      let start = prevEnd;
+      let end = start + size;
+      prevEnd = end;
+      return { id: id!, item, size, start, end, index };
     });
   });
 
@@ -86,23 +99,23 @@ export function useVirtualList(
    * @author  韦胜健
    * @date    2020/11/15 9:28
    */
-  const offsetData = computed((): { list: { item: any, id: string, index: number }[], startPageIndex: number, start: number } => {
-    const { pageSize, scrollTop } = state;
+  const offsetData = computed((): { list: { item: any, id: string, index: number }[], startPageIndex: number, startIndex: number } => {
+    const { pageSize, scrollValue } = state;
     if (!pageSize) {
-      return { list: [], startPageIndex: 0, start: 0 };
+      return { list: [], startPageIndex: 0, startIndex: 0 };
     }
     if (props.disabled) {
       return {
         list: nodes.value,
-        start: 0,
+        startIndex: 0,
         startPageIndex: 0,
       };
     }
-    const { start, end, pageIndex } = utils.getPageIndex(scrollTop, pageSize);
+    const { startIndex, endIndex, pageIndex } = utils.getPageIndex(scrollValue, pageSize);
     return {
-      list: nodes.value.slice(start, end),
+      list: nodes.value.slice(startIndex, endIndex),
       startPageIndex: pageIndex,
-      start,
+      startIndex,
     };
   });
 
@@ -115,7 +128,10 @@ export function useVirtualList(
    */
   const classes = useClasses(() => [
     getComponentCls('virtual-list'),
-    { 'virtual-list-disabled': props.disabled, }
+    {
+      'virtual-list-disabled': props.disabled,
+      'virtual-list-horizontal': props.horizontal,
+    },
   ]);
 
   /**
@@ -130,14 +146,28 @@ export function useVirtualList(
     if (props.disabled) {
       return;
     }
-    if (!!props.width) {
-      style.width = unit(props.width);
-      style.minWidth = '100%';
-    }
-    if (!props.dynamicSize) {
-      style.height = `${(props.data || []).length * props.size}px`;
+    if (!props.horizontal) {
+      /*纵向*/
+      if (!!props.width) {
+        style.width = unit(props.width);
+        style.minWidth = '100%';
+      }
+      if (!props.dynamicSize) {
+        style.height = `${(props.data || []).length * props.size}px`;
+      } else {
+        style.height = `${nodes.value[nodes.value.length - 1].end}px`;
+      }
     } else {
-      style.height = `${nodes.value[nodes.value.length - 1].bottom}px`;
+      /*横向*/
+      if (!!props.height) {
+        style.height = unit(props.height);
+        style.minHeight = '100%';
+      }
+      if (!props.dynamicSize) {
+        style.width = `${(props.data || []).length * props.size}px`;
+      } else {
+        style.width = `${nodes.value[nodes.value.length - 1].end}px`;
+      }
     }
   });
 
@@ -155,21 +185,33 @@ export function useVirtualList(
       return;
     }
 
-    const { start } = offsetData.value;
+    const { startIndex } = offsetData.value;
 
-    let top;
+    let start;
     if (!props.dynamicSize) {
-      top = start * props.size;
+      start = startIndex * props.size;
     } else {
-      top = nodes.value[start].top;
+      start = nodes.value[startIndex].start;
     }
 
-    if (transform !== false) {
-      /*transform定位*/
-      style.transform = `translateY(${top}px)`;
+    if (!props.horizontal) {
+      /*纵向定位*/
+      if (transform !== false) {
+        /*transform定位*/
+        style.transform = `translateY(${start}px)`;
+      } else {
+        /*top定位*/
+        style.top = `${start}px`;
+      }
     } else {
-      /*top定位*/
-      style.top = `${top}px`;
+      /*横向定位*/
+      if (transform !== false) {
+        /*transform定位*/
+        style.transform = `translateX(${start}px)`;
+      } else {
+        /*top定位*/
+        style.left = `${start}px`;
+      }
     }
   });
 
@@ -181,10 +223,10 @@ export function useVirtualList(
      * @author  韦胜健
      * @date    2020/11/15 9:29
      */
-    getIndex: (top: number) => {
+    getIndex: (scrollValue: number) => {
       if (!props.dynamicSize) {
         // console.log('not dynamic》》》getIndex', top / props.size)
-        return Math.floor(top / props.size);
+        return Math.floor(scrollValue / props.size);
       } else {
         const _nodes = nodes.value;
         let start = 0;
@@ -192,12 +234,12 @@ export function useVirtualList(
         let temp = 0;
         while (start <= end) {
           let middle = Math.floor((start + end) / 2);
-          let middleBottom = _nodes[middle].bottom;
-          if (middleBottom === top) {
+          let middleBottom = _nodes[middle].end;
+          if (middleBottom === scrollValue) {
             return middle + 1;
-          } else if (middleBottom < top) {
+          } else if (middleBottom < scrollValue) {
             start = middle + 1;
-          } else if (middleBottom > top) {
+          } else if (middleBottom > scrollValue) {
             if (!temp || temp > middle) {
               temp = middle;
             }
@@ -213,29 +255,30 @@ export function useVirtualList(
      * @author  韦胜健
      * @date    2020/12/14 22:44
      */
-    getPageIndex: (scrollTop: number, pageSize: number) => {
-      if (scrollTop < 0) {
-        scrollTop = 0;
+    getPageIndex: (scrollValue: number, pageSize: number) => {
+      if (scrollValue < 0) {
+        scrollValue = 0;
       }
       const data = props.data || [];
       /*当前scrollTop对应的数据中数据的索引*/
-      let scrollIndex = utils.getIndex(scrollTop);
+      let scrollIndex = utils.getIndex(scrollValue);
       let pageIndex = Math.floor(scrollIndex / pageSize);
-      let start = (() => {
+      let startIndex = (() => {
         if (state.scrollDirection === 'none') {
           return scrollIndex - Math.floor(pageSize * 0.5);
-        } else if (state.scrollDirection === 'up') {
-          return scrollIndex - pageSize;
+        } else if (state.scrollDirection === ScrollDirection.start) {
+          /*这里多减去2，避免出现空白的间隙*/
+          return scrollIndex - (pageSize - 2);
         } else {
           return scrollIndex;
         }
       })();
-      let end = start + pageSize * 2;
-      start -= 1;
-      end += 1;
-      if (start < 0) {
-        end -= start;
-        start = 0;
+      let endIndex = startIndex + pageSize * 2;
+      startIndex -= 1;
+      endIndex += 1;
+      if (startIndex < 0) {
+        endIndex -= startIndex;
+        startIndex = 0;
       }
       /*console.log({
         scrollIndex,
@@ -245,19 +288,19 @@ export function useVirtualList(
         pageSize,
         scrollDirection: state.scrollDirection
       });*/
-      const exceed = end - data.length;
+      const exceed = endIndex - data.length;
       if (exceed > 0) {
-        end = data.length;
-        start -= exceed;
-        if (start < 0) {
-          start = 0;
+        endIndex = data.length;
+        startIndex -= exceed;
+        if (startIndex < 0) {
+          startIndex = 0;
         }
       }
-      pageIndex = Math.floor(start / pageSize);
+      pageIndex = Math.floor(startIndex / pageSize);
       return {
         data,
-        start,
-        end,
+        startIndex,
+        endIndex,
         pageIndex,
       };
     },
@@ -271,11 +314,11 @@ export function useVirtualList(
       if (props.disabled) {
         return;
       }
-      const newScrollTop = (e.target as HTMLDivElement).scrollTop;
-      state.scrollDirection = newScrollTop > freezeState.scrollTop ? ScrollDirection.down : ScrollDirection.up;
-      freezeState.scrollTop = newScrollTop;
+      const newScrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
+      state.scrollDirection = newScrollValue > freezeState.scrollValue ? ScrollDirection.end : ScrollDirection.start;
+      freezeState.scrollValue = newScrollValue;
       const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop, state.pageSize);
-      state.scrollTop = (e.target as HTMLDivElement).scrollTop;
+      state.scrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
       freezeState.current = current;
       emit.onPageIndexChange(current);
     }
@@ -293,17 +336,17 @@ export function useVirtualList(
 
   onMounted(async () => {
     await delay(23);
-    let hostHeight = refs.scroll!.refs.host!.offsetHeight;
+    let hostSize = refs.scroll!.refs.host![props.horizontal ? 'offsetWidth' : 'offsetHeight'];
     const headEl = refs.scroll!.refs.host!.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
     const footEl = refs.scroll!.refs.host!.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
     if (!!headEl) {
-      hostHeight -= headEl.offsetHeight;
+      hostSize -= headEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
     }
     if (!!footEl) {
-      hostHeight -= footEl.offsetHeight;
+      hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
     }
 
-    state.pageSize = Math.floor(hostHeight / props.size);
+    state.pageSize = Math.floor(hostSize / props.size);
   });
 
   onUpdated(async () => {
@@ -316,23 +359,23 @@ export function useVirtualList(
     await delay();
     // console.log('dynamic scan height')
     const elNodes = (refs.content?.querySelectorAll('[data-vid],[vid]') || []) as HTMLElement[];
-    let newAvgHeight = state.avgHeight;
+    let newAvgSize = state.avgSize;
 
     for (let i = 0; i < elNodes.length; i++) {
       const el = elNodes[i];
-      const { offsetHeight: height } = el;
+      const size = el[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
       let vid = el.getAttribute('vid') || el.getAttribute('data-vid') as null | number | string;
       if (vid == null) {
         throw new Error('Each item of the virtual-list must have an attribute named "vid", please set :vid="index" or :data-vid="index"');
       }
-      if (state.id2height[vid] != height) {
-        state.id2height[vid] = height;
-        newAvgHeight = Number(((state.avgHeight + height) / 2).toFixed(0));
+      if (state.id2size[vid] != size) {
+        state.id2size[vid] = size;
+        newAvgSize = Number(((state.avgSize + size) / 2).toFixed(0));
       }
     }
 
-    if (newAvgHeight != state.avgHeight) {
-      state.avgHeight = newAvgHeight;
+    if (newAvgSize != state.avgSize) {
+      state.avgSize = newAvgSize;
     }
   });
 

package/src/packages/components/VirtualList/virtual-list.scss

@@ -1,23 +1,6 @@
-@include comp(virtual-table) {
-  @include comp(virtual-list) {
-    & > .scroll-wrapper {
-      & > .scroll-content {
-        overflow-y: unset;
-      }
-    }
-  }
-}
-
 @include comp(virtual-list) {
   position: relative;
 
-  & > .scroll-wrapper {
-    & > .scroll-content {
-      overflow-y: hidden;
-      min-width: 100%;
-    }
-  }
-
   &:not(.virtual-list-disabled) {
     .virtual-list-strut {
       position: relative;
@@ -32,4 +15,35 @@
       }
     }
   }
+
+  &:not(.virtual-list-horizontal) {
+    & > .scroll-wrapper {
+      & > .scroll-content {
+        overflow-y: hidden;
+        min-width: 100%;
+      }
+    }
+  }
+
+  &.virtual-list-horizontal {
+    & > .scroll-wrapper {
+      & > .scroll-content {
+        overflow-x: hidden;
+        min-height: 100%;
+      }
+    }
+  }
+}
+
+
+@include comp(virtual-table) {
+  @include comp(virtual-list) {
+    &.virtual-list-horizontal, &:not(.virtual-list-horizontal) {
+      & > .scroll-wrapper {
+        & > .scroll-content {
+          overflow-y: unset;
+        }
+      }
+    }
+  }
 }

package/src/packages/components/VirtualTable/index.tsx

@@ -25,7 +25,7 @@ export const VirtualTable = designComponent({
   inheritPropsType: HTMLDivElement,
   emits: {
     onScroll: (e: Event) => true,
-    onPageIndexChange: (data: { pageIndex: number, start: number }) => true,
+    onPageIndexChange: (data: { pageIndex: number, startIndex: number }) => true,
   },
   slots: ['colgroup', 'head', 'headColgroup'],
   scopeSlots: {

package/src/packages/entry.tsx

@@ -32,8 +32,8 @@ export {Segment} from "./components/Segment";
 export {SegmentGroup} from "./components/SegmentGroup";
 export {InputGroup} from "./components/InputGroup";
 export {Card} from "./components/Card";
+export {CarouselItem} from "./components/CarouselItem";
 export {Carousel} from "./components/Carousel";
-export {CarouselGroup} from "./components/CarouselGroup";
 export {CollapseGroup} from "./components/CollapseGroup";
 export {Collapse} from "./components/Collapse";
 export {ProgressBar} from "./components/ProgressBar";
@@ -108,6 +108,10 @@ export {useAutoScrollUtils} from './components/useAutoScrollUtils';
 export {ClientZoom} from './components/ClientZoom';
 export {Layout} from './components/Layout';
 export {LayoutSection} from './components/LayoutSection';
+export {$previewer} from './components/$previewer';
+export {StackCard} from './components/StackCard';
+export {StackCardItem} from './components/StackCardItem';
+export {SortList} from './components/SortList';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';

package/src/packages/uses/useDragHorizontalScroll.ts

@@ -0,0 +1,82 @@
+import {createEffects} from "plain-utils/utils/createEffects";
+import {ClientZoom} from "../utils/ClientZoom";
+import {watch} from "plain-design-composition";
+
+export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined, config?: { onDragStart: () => void, onDragEnd: () => void }) {
+
+  const staticState = {
+    isDragging: false,
+    el: null as null | undefined | HTMLElement,
+    start: {
+      x: 0,
+      left: 0,
+      width: 0,
+    },
+    move: {
+      x: 0
+    }
+  };
+
+  const { effects } = createEffects();
+
+  const handler = {
+    mousedown: (e: MouseEvent) => {
+      const { clientX } = ClientZoom.getClientPosition(e);
+      staticState.isDragging = false;
+      staticState.start = {
+        x: clientX,
+        left: staticState.el!.scrollLeft,
+        width: staticState.el!.scrollWidth,
+      };
+      document.documentElement.addEventListener('mousemove', handler.mousemove, true);
+      document.documentElement.addEventListener('mouseup', handler.mouseup, true);
+    },
+    mousemove: (e: MouseEvent) => {
+      const { clientX } = ClientZoom.getClientPosition(e);
+      staticState.move.x = clientX;
+      const durX = staticState.move.x - staticState.start.x;
+      if (!staticState.isDragging) {
+        if (Math.abs(durX) > 5) {
+          staticState.isDragging = true;
+          config?.onDragStart();
+        }
+      }
+      if (!staticState.isDragging) {
+        return;
+      }
+      staticState.el!.scrollLeft = staticState.start.left - durX;
+    },
+    mouseup: () => {
+      config?.onDragEnd();
+      document.documentElement.removeEventListener('mousemove', handler.mousemove, true);
+      document.documentElement.removeEventListener('mouseup', handler.mouseup, true);
+    },
+    onWheel: (e: WheelEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      const el = e.currentTarget as HTMLElement;
+      const delta = e.deltaX + e.deltaY;
+      el.scrollLeft += delta;
+    },
+  };
+
+  effects.push(watch(() => getEl(), el => {
+    if (!!staticState.el) {
+      staticState.el.removeEventListener('mousedown', handler.mousedown);
+      staticState.el.removeEventListener('wheel', handler.onWheel);
+    }
+    staticState.el = el;
+    if (!staticState.el) {return;}
+    staticState.el.addEventListener('mousedown', handler.mousedown);
+    staticState.el.addEventListener('wheel', handler.onWheel);
+  }));
+
+  effects.push(() => {
+    if (!!staticState.el) {
+      staticState.el.removeEventListener('mousedown', handler.mousedown);
+      staticState.el.removeEventListener('wheel', handler.onWheel);
+    }
+  });
+
+  return effects.clear;
+}

package/src/packages/utils/ComponentUtils.ts

@@ -0,0 +1,10 @@
+export const ComponentUtils = {
+  /**
+   * 适配taro ui的一些写法
+   * @author  韦胜健
+   * @date    2024/1/3 16:48
+   */
+  getElInfo: async (selector: string) => {
+    return document.querySelector(selector)!.getBoundingClientRect();
+  },
+};

package/src/packages/utils/buildCycleIndexList.ts

@@ -0,0 +1,31 @@
+export function buildCycleIndexList({ length, current }: { length: number, current: number }) {
+
+  const sourceList = new Array(length).fill(null).map((_, index) => index);
+  const cycleIndexList = (() => {
+
+    if (sourceList.length <= 2) {
+      return sourceList;
+    }
+
+    const leftList = sourceList.slice(0, current);
+    const rightList = sourceList.slice(current + 1);
+
+    while (Math.abs(leftList.length - rightList.length) >= 2) {
+      if (leftList.length > rightList.length) {
+        rightList.push(leftList.shift()!);
+      } else {
+        leftList.unshift(rightList.pop()!);
+      }
+    }
+    return [...leftList, current, ...rightList];
+  })();
+
+  const currentIndexInCycle = cycleIndexList.indexOf(current);
+
+  const index2distance = cycleIndexList.reduce((prev, item, cycleIndex) => {
+    prev[item] = cycleIndex - currentIndexInCycle;
+    return prev;
+  }, {} as Record<number, number>);
+
+  return { cycleIndexList, currentIndexInCycle, index2distance };
+}