plain-design 0.0.97 → 1.0.0-beta.2

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

@@ -0,0 +1,316 @@
+import {computed, getComponentCls, onMounted, onUpdated, reactive, useClasses, useStyles, watch} from "plain-design-composition";
+import {delay} from "plain-utils/utils/delay";
+import './virtual-list.scss';
+import Scroll from "../Scroll";
+import {unit} from "plain-utils/string/unit";
+
+interface DataNode {
+  top: number;
+  bottom: number;
+  height: number;
+
+  data: any;
+  index: number;
+}
+
+export function useVirtualList(
+  {
+    props,
+    refs,
+    emit,
+    transform,
+  }: {
+    props: {
+      data: any[],
+      size: number,
+      disabled?: boolean,
+      dynamicSize?: boolean,
+      width?: string | number,
+    },
+    refs: {
+      scroll?: typeof Scroll.use.class | null,
+      content?: HTMLDivElement | null,
+    },
+    emit: {
+      onScroll: (e: Event) => void,
+      onPageIndexChange: (data: { pageIndex: number, start: number }) => void,
+    },
+    transform?: boolean,
+  }
+) {
+
+  /*非响应式属性*/
+  const freezeState = {
+    scrollTop: 0,                               // 实时的scrollTop值
+    current: {                                  // 当前的页面信息
+      pageIndex: 0,
+      start: 0,
+      end: 0,
+    },
+  };
+  /*响应式属性*/
+  const state = reactive({
+    nodes: [] as DataNode[],                    // 格式化的data数组数据
+    scrollTop: 0,                               // 当前滚动scrollTop（非实时的）
+    pageSize: 0,                                // 页大小
+  });
+
+  /**
+   * 计算得到的在虚拟列表当前要渲染的数组数据
+   * @author  韦胜健
+   * @date    2020/11/15 9:28
+   */
+  const offsetData = computed((): { list: { item: any, index: number }[], startPageIndex: number, start: number } => {
+    const { pageSize, scrollTop } = state;
+    const data = props.data || [];
+    if (!pageSize) {
+      return { list: [], startPageIndex: 0, start: 0 };
+    }
+    if (props.disabled) {
+      return {
+        list: data.map((item, index) => ({ item, index })),
+        start: 0,
+        startPageIndex: 0,
+      };
+    }
+    const { start, end, pageIndex } = utils.getPageIndex(scrollTop, pageSize);
+    return {
+      list: data.map((item, index) => ({ item, index })).slice(start, end),
+      startPageIndex: pageIndex,
+      start,
+    };
+  });
+
+  /*---------------------------------------style-------------------------------------------*/
+
+  /**
+   * 跟节点Scroll的class
+   * @author  韦胜健
+   * @date    2020/12/16 10:48
+   */
+  const classes = useClasses(() => [
+    getComponentCls('virtual-list'),
+    { 'virtual-list-disabled': props.disabled, }
+  ]);
+
+  /**
+   * 占位节点strut的样式
+   * @author  韦胜健
+   * @date    2020/12/16 10:48
+   */
+  const strutStyles = useStyles(style => {
+    if (!state.pageSize) {
+      return;
+    }
+    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`;
+    } else {
+      style.height = `${state.nodes[state.nodes.length - 1].bottom}px`;
+    }
+  });
+
+  /**
+   * 内容（位移）节点的样式
+   * @author  韦胜健
+   * @date    2020/12/16 10:48
+   */
+  const contentStyles = useStyles(style => {
+
+    if (!state.pageSize) {
+      return;
+    }
+    if (props.disabled) {
+      return;
+    }
+
+    const { start } = offsetData.value;
+
+    let top;
+    if (!props.dynamicSize) {
+      top = start * props.size;
+    } else {
+      top = state.nodes[start].top;
+    }
+
+    if (transform !== false) {
+      /*transform定位*/
+      style.transform = `translateY(${top}px)`;
+    } else {
+      /*top定位*/
+      style.top = `${top}px`;
+    }
+  });
+
+  /*---------------------------------------utils-------------------------------------------*/
+
+  const utils = {
+    /**
+     * 根据top值，对比DataNodes中节点的top以及bottom得到在data nodes中的位置索引
+     * @author  韦胜健
+     * @date    2020/11/15 9:29
+     */
+    getIndex: (top: number) => {
+      if (!props.dynamicSize) {
+        // console.log('not dynamic》》》getIndex', top / props.size)
+        return Math.floor(top / props.size);
+      } else {
+        const { nodes } = state;
+        let start = 0;
+        let end = nodes.length - 1;
+        let temp = 0;
+        while (start <= end) {
+          let middle = Math.floor((start + end) / 2);
+          let middleBottom = nodes[middle].bottom;
+          if (middleBottom === top) {
+            return middle + 1;
+          } else if (middleBottom < top) {
+            start = middle + 1;
+          } else if (middleBottom > top) {
+            if (!temp || temp > middle) {
+              temp = middle;
+            }
+            end = middle - 1;
+          }
+        }
+        // console.log('is dynamic》》》getIndex', temp)
+        return temp;
+      }
+    },
+    /**
+     * 根据scrollTop以及pageSize获取当前的pageIndex
+     * @author  韦胜健
+     * @date    2020/12/14 22:44
+     */
+    getPageIndex: (scrollTop: number, pageSize: number) => {
+      const data = props.data || [];
+      /*当前scrollTop对应的数据中数据的索引*/
+      let scrollIndex = utils.getIndex(scrollTop);
+      let pageIndex = Math.floor(scrollIndex / pageSize);
+      let start = pageIndex === 0 ? 0 : (pageIndex - 1) * pageSize;
+      let end = start + pageSize * 3;
+      /*console.log({
+          scrollIndex,
+          pageIndex,
+          start,
+          end,
+      })*/
+      const exceed = end - data.length;
+      if (exceed > 0) {
+        end = data.length;
+        start -= exceed;
+        if (start < 0) {
+          start = 0;
+        }
+      }
+      pageIndex = Math.floor(start / pageSize);
+      return {
+        data,
+        start,
+        end,
+        pageIndex,
+      };
+    },
+    /**
+     * 格式化props.data为 DataNode数组
+     * @author  韦胜健
+     * @date    2020/11/15 9:29
+     */
+    resetData: (data: any[]) => {
+      // console.log('resetData')
+      state.nodes = data.map((item, index) => ({
+        data: item,
+        index,
+        top: props.size * index,
+        height: props.size,
+        bottom: props.size * (index + 1),
+      }));
+    }
+  };
+
+  /*---------------------------------------handler-------------------------------------------*/
+
+  const handler = {
+    onScroll: (e: Event) => {
+      emit.onScroll(e);
+      if (props.disabled) {
+        return;
+      }
+      freezeState.scrollTop = (e.target as HTMLDivElement).scrollTop;
+      const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop, state.pageSize);
+      if (freezeState.current.pageIndex != current.pageIndex || freezeState.current.start != current.start) {
+        state.scrollTop = (e.target as HTMLDivElement).scrollTop;
+        freezeState.current = current;
+        emit.onPageIndexChange(current);
+      }
+    }
+  };
+
+  watch(() => props.data, (data: any[]) => {
+    if (props.disabled) {
+      return;
+    }
+    if (!props.dynamicSize) {
+      return;
+    }
+    !!refs.scroll && refs.scroll.methods.scrollTop(0, 0);
+    /*如果是动态高度，则刷state.nodes*/
+    utils.resetData(data);
+  });
+
+  onMounted(() => {
+    const hostHeight = refs.scroll!.refs.host!.offsetHeight;
+    state.pageSize = Math.ceil(hostHeight / props.size);
+    if (props.dynamicSize && !props.disabled) {
+      utils.resetData(props.data);
+    }
+  });
+
+  onUpdated(async () => {
+    if (props.disabled) {
+      return;
+    }
+    if (!props.dynamicSize) {
+      return;
+    }
+    await delay();
+    // console.log('dynamic scan height')
+    const elNodes = (Array.from(refs.content!.childNodes || []) as HTMLElement[]).filter(node => node.nodeType !== 3);
+    for (let i = 0; i < elNodes.length; i++) {
+      const el = elNodes[i];
+      const { offsetHeight: height } = el;
+      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"');
+      }
+      vid = Number(vid);
+      const prevNode = state.nodes[vid];
+      const prevHeight = prevNode.height;
+      let deltaHeight = prevHeight - height;
+      if (deltaHeight !== 0) {
+        prevNode.height = height;
+        prevNode.bottom = prevNode.bottom - deltaHeight;
+        for (let j = vid + 1; j < state.nodes!.length; j++) {
+          state.nodes![j].top = state.nodes![j - 1].bottom;
+          state.nodes![j].bottom = state.nodes![j].bottom - deltaHeight;
+        }
+      }
+    }
+  });
+
+  return {
+    virtual: {
+      offsetData,
+      classes,
+      strutStyles,
+      contentStyles,
+      handler,
+    }
+  };
+}

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

@@ -0,0 +1,35 @@
+@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;
+      //overflow: hidden;
+
+      .virtual-list-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        //overflow: hidden;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,201 @@
+import {computed, designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {PlainObject} from "plain-utils/utils/event";
+import {Scroll} from "../Scroll";
+import {useVirtualList} from "../VirtualList/useVirtualList";
+import {unit} from "plain-utils/string/unit";
+import './virtual-table.scss';
+import i18n from "../i18n";
+import {doNothing} from "../../utils/doNothing";
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+
+export const VirtualTable = designComponent({
+  name: 'virtual-table',
+  props: {
+    data: { type: Array as PropType<PlainObject[]>, require: true, default: [] },// 要渲染的长数据
+    headData: { type: Array as PropType<PlainObject[][]> },       // 表头数据
+    size: { type: Number, require: true, default: 40 },           // 每一行高度
+    headSize: { type: Number, require: true, default: 40 },       // 表头高度
+    dynamicSize: { type: Boolean },                               // 标识列表中的每一行高度不是固定的，但是还是需要提供 size 属性，而且size属性不能与每一行的高度差距太多；
+    disabled: { type: Boolean },                                  // 禁用虚拟滚动
+    summaryData: { type: Array as PropType<PlainObject[]> },      // 合计行数据
+    width: { type: Number },                                      // 宽度
+    height: { type: Number },                                     // 高度
+    showRows: { type: Number },                                   // 显示的行数，用来控制bodyTableWrapper的最小高度
+  },
+  inheritPropsType: HTMLDivElement,
+  emits: {
+    onScroll: (e: Event) => true,
+    onPageIndexChange: (data: { pageIndex: number, start: number }) => true,
+  },
+  slots: ['colgroup', 'head', 'headColgroup'],
+  scopeSlots: {
+    default: (scope: { item: any, index: number, virtualIndex: number }) => {},
+  },
+  setup({ props, slots, scopeSlots, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({
+      scroll: Scroll,
+      content: HTMLDivElement,
+      body: HTMLDivElement,
+      summary: HTMLDivElement,
+      head: HTMLDivElement,
+    });
+
+    const headHeight = computed(() => {
+      if (!props.headData || props.headData.length === 0) {return null;}
+      return props.headData.length * props.headSize;
+    });
+
+    /*虚拟滚动时让出顶部距离显示表头*/
+    const { virtual } = useVirtualList({ props, refs: refs as any, emit, transform: false });
+
+    /*---------------------------------------computed-------------------------------------------*/
+    const styles = useStyles(style => {
+      style.height = unit(props.height);
+    });
+    const tableStyles = useStyles((style) => {
+      !!props.width && (style.width = unit(props.width));
+    });
+
+    const summaryTableStyles = useStyles((styles) => {
+      Object.assign(styles, tableStyles.value);
+      styles.height = `${!props.summaryData ? 0 : props.summaryData.length * props.size}px`;
+    });
+
+    const headTableStyles = useStyles(styles => {
+      Object.assign(styles, tableStyles.value);
+      headHeight.value != null && (styles.height = `${headHeight.value}px`);
+    });
+
+    const strutStyles = useStyles(style => {
+      Object.assign(style, virtual.strutStyles.value);
+      !!props.width && (style.width = unit(props.width));
+      style.minHeight = bodyTableWrapperStyles.value.minHeight
+    });
+
+    const contentStyles = useStyles(style => {
+      Object.assign(style, virtual.contentStyles.value);
+      if (!props.disabled) {style.paddingBottom = (summaryTableStyles.value as any).height;}
+    });
+
+    const bodyTableWrapperStyles = useStyles(style => {
+      /**
+       * body wrapper给一个最小高度，避免数据不够时合集行数据没有固定在底部。如果不像要这个效果可以注释掉下面这段代码
+       * @author  韦胜健
+       * @date    2023.1.20 20:48
+       */
+      !!props.showRows && (style.minHeight = `${props.size * props.showRows}px`);
+    });
+
+    const classes = useClasses(() => [
+      getComponentCls("scroll-table"),
+      getComponentCls('virtual-table'),
+      {
+        'virtual-table-has-summary': !!props.summaryData && props.summaryData.length > 0
+      }
+    ]);
+
+    const handler = {
+      onScroll: (e: any) => {
+        virtual.handler.onScroll(e);
+        !!refs.summary && (refs.summary.scrollLeft = e.target.scrollLeft);
+        !!refs.head && (refs.head.scrollLeft = e.target.scrollLeft);
+      },
+      onWheelBody: (e: WheelEvent) => {
+        if (e.altKey) {
+          e.preventDefault();
+          e.stopPropagation();
+          refs.scroll?.methods.scrollLeft(refs.scroll?.freezeState.wrapperScrollLeft + (e.deltaX + e.deltaY) * 3, 100);
+        }
+      },
+      onWheelHead: (e: WheelEvent) => {
+        refs.scroll?.methods.scrollLeft(refs.scroll?.freezeState.wrapperScrollLeft + (e.deltaX + e.deltaY) * 3, 100);
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      /*onWheelSummary: (e: WheelEvent) => {
+        refs.scroll?.methods.scroll({
+          x: refs.scroll?.freezeState.wrapperScrollLeft + e.deltaX * 3,
+          y: refs.scroll?.freezeState.wrapperScrollTop + e.deltaY * 2
+        }, 100);
+        e.stopPropagation();
+        e.preventDefault();
+      },*/
+    };
+
+    useWatchAutoClear(() => !!refs.head, flag => {
+      if (!flag) {return doNothing;}
+      refs.head?.addEventListener('wheel', handler.onWheelHead);
+      return () => refs.head?.removeEventListener('wheel', handler.onWheelHead);
+    });
+
+    useWatchAutoClear(() => !!refs.body, flag => {
+      if (!flag) {return doNothing;}
+      refs.body?.addEventListener('wheel', handler.onWheelBody);
+      return () => refs.head?.removeEventListener('wheel', handler.onWheelBody);
+    });
+
+    return {
+      refer: {
+        refs
+      },
+      render: () => {
+        const { list } = virtual.offsetData.value;
+        return (
+          <div style={styles.value} className={classes.value}>
+            <Scroll
+              refreshState={props.width}
+              ref={onRef.scroll}
+              onScroll={handler.onScroll}
+              scrollX
+              className={virtual.classes.value}
+              horizontalScrollbarTooltip={i18n('table.tableScrollTips').d('推荐【表头使用鼠标滚轮】，或者【表体Alt键+鼠标滚轮】横向滚动')}
+              disableTransitionWhenScroll={!props.disabled}
+            >
+              {{
+                default: () => (
+                  <>
+                    {!!headHeight.value && (
+                      <div className="virtual-table-head-table-wrapper" ref={onRef.head}>
+                        <table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs}>
+                          {slots.headColgroup()}
+                          <thead>{slots.head()}</thead>
+                        </table>
+                      </div>
+                    )}
+                    <div className="virtual-list-strut" style={strutStyles.value}>
+                      <div className="virtual-list-content" ref={onRef.content} style={contentStyles.value}>
+                        <div className="virtual-table-body-table-wrapper" ref={onRef.body} style={bodyTableWrapperStyles.value}>
+                          <table className="virtual-table-body-table" {...{ ...PublicTableAttrs, style: tableStyles.value }}>
+                            {slots.colgroup()}
+                            <tbody>{list.map((node, virtualIndex) => scopeSlots.default({ ...node, virtualIndex }))}</tbody>
+                          </table>
+                        </div>
+                      </div>
+                    </div>
+                    {!!props.summaryData?.length && (
+                      <div className="virtual-table-summary-table-wrapper" ref={onRef.summary}>
+                        <table className="virtual-table-summary-table" style={summaryTableStyles.value}{...PublicTableAttrs}>
+                          {slots.colgroup()}
+                          <tbody>{!props.summaryData ? null : props.summaryData.map((item, index) => scopeSlots.default({ item, index, virtualIndex: index }))}</tbody>
+                        </table>
+                      </div>
+                    )}
+                  </>
+                ),
+              }}
+            </Scroll>
+          </div>
+        );
+      }
+    };
+  },
+});
+
+const PublicTableAttrs = {
+  cellPadding: 0,
+  cellSpacing: 0,
+  border: 0,
+};
+
+export default VirtualTable;