plain-design 1.0.0-beta.19 → 1.0.0-beta.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.19",
+  "version": "1.0.0-beta.20",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

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

@@ -3,6 +3,7 @@ import {delay} from "plain-utils/utils/delay";
 import './virtual-list.scss';
 import Scroll from "../Scroll";
 import {unit} from "plain-utils/string/unit";
+import {createEnum} from "plain-utils/utils/createEnum";
 
 interface DataNode {
   top: number;
@@ -13,6 +14,8 @@ interface DataNode {
   index: number;
 }
 
+const ScrollDirection = createEnum(['up', 'down', 'none'] as const);
+
 export function useVirtualList(
   {
     props,
@@ -53,6 +56,7 @@ export function useVirtualList(
     nodes: [] as DataNode[],                    // 格式化的data数组数据
     scrollTop: 0,                               // 当前滚动scrollTop（非实时的）
     pageSize: 0,                                // 页大小
+    scrollDirection: ScrollDirection.none as typeof ScrollDirection.TYPE,
   });
 
   /**
@@ -189,18 +193,37 @@ export function useVirtualList(
      * @date    2020/12/14 22:44
      */
     getPageIndex: (scrollTop: number, pageSize: number) => {
+      if (scrollTop < 0) {
+        scrollTop = 0;
+      }
       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;
+      let start = (() => {
+        if (state.scrollDirection === 'none') {
+          return scrollIndex - Math.floor(pageSize * 0.5);
+        } else if (state.scrollDirection === 'up') {
+          return scrollIndex - pageSize;
+        } else {
+          return scrollIndex;
+        }
+      })();
+      let end = start + pageSize * 2;
+      start -= 1;
+      end += 1;
+      if (start < 0) {
+        end -= start;
+        start = 0;
+      }
       /*console.log({
-          scrollIndex,
-          pageIndex,
-          start,
-          end,
-      })*/
+        scrollIndex,
+        pageIndex,
+        start,
+        end,
+        pageSize,
+        scrollDirection: state.scrollDirection
+      });*/
       const exceed = end - data.length;
       if (exceed > 0) {
         end = data.length;
@@ -242,13 +265,13 @@ export function useVirtualList(
       if (props.disabled) {
         return;
       }
-      freezeState.scrollTop = (e.target as HTMLDivElement).scrollTop;
+      const newScrollTop = (e.target as HTMLDivElement).scrollTop;
+      state.scrollDirection = newScrollTop > freezeState.scrollTop ? ScrollDirection.down : ScrollDirection.up;
+      freezeState.scrollTop = newScrollTop;
       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);
-      }
+      state.scrollTop = (e.target as HTMLDivElement).scrollTop;
+      freezeState.current = current;
+      emit.onPageIndexChange(current);
     }
   };
 
@@ -265,8 +288,17 @@ export function useVirtualList(
   });
 
   onMounted(() => {
-    const hostHeight = refs.scroll!.refs.host!.offsetHeight;
-    state.pageSize = Math.ceil(hostHeight / props.size);
+    let hostHeight = refs.scroll!.refs.host!.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;
+    }
+    if (!!footEl) {
+      hostHeight -= footEl.offsetHeight;
+    }
+
+    state.pageSize = Math.floor(hostHeight / props.size);
     if (props.dynamicSize && !props.disabled) {
       utils.resetData(props.data);
     }

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

@@ -157,7 +157,7 @@ export const VirtualTable = designComponent({
                   <>
                     {!!headHeight.value && (
                       <div className="virtual-table-head-table-wrapper" ref={onRef.head}>
-                        <table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs}>
+                        <table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs} data-virtual-head>
                           {slots.headColgroup()}
                           <thead>{slots.head()}</thead>
                         </table>
@@ -175,7 +175,7 @@ export const VirtualTable = designComponent({
                     </div>
                     {!!props.summaryData?.length && (
                       <div className="virtual-table-summary-table-wrapper" ref={onRef.summary}>
-                        <table className="virtual-table-summary-table" style={summaryTableStyles.value}{...PublicTableAttrs}>
+                        <table className="virtual-table-summary-table" style={summaryTableStyles.value}{...PublicTableAttrs} data-virtual-foot>
                           {slots.colgroup()}
                           <tbody>{!props.summaryData ? null : props.summaryData.map((item, index) => scopeSlots.default({ item, index, virtualIndex: index }))}</tbody>
                         </table>

package/src/packages/components/usePopup/PopupItem.tsx

@@ -82,6 +82,7 @@ export const PopupItem = designComponent({
         'popup-item-is-dark': !application.value.theme.dark && !state.option.status && !!state.option.dark,
         [`popup-item-status-${state.option.status}`]: !!state.option.status,
         'popup-item-dark-app': application.value.theme.dark,
+        'popup-item-no-interactive': !state.option.interactive,
       }
     ]);
 

package/src/packages/components/usePopup/popup-item.scss

@@ -112,6 +112,10 @@
   &.popup-item-no-border {
     filter: none !important;
   }
+
+  &.popup-item-no-interactive {
+    pointer-events: none;
+  }
   /*---------------------------------------animation-------------------------------------------*/
 
   &.popup-item-animation-fade {