plain-design 1.0.0-beta.76 → 1.0.0-beta.77

package/package.json

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

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useClasses, useRefs} from "plain-design-composition";
+import {designComponent, Fragment, getComponentCls, useClasses, useRefs} from "plain-design-composition";
 import {FormItemValidatePropsOption} from "../Form/validate/validate.utils";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
@@ -109,7 +109,7 @@ export const FormItem = designComponent({
           <div className="form-item-content box-message-reference" style={formItemLayout.contentStyles.value}>
             {slots.prepend.isExist() && <div className="form-item-prepend-content">{slots.prepend()}</div>}
             <div className="form-item-content-inner">
-              {slots.default()}
+              <Fragment key="slot_default">{slots.default()}</Fragment>
               {/*校验消息放下边的时候放在 form-item-content-inner 内部使得与输入框左或者右对齐*/}
               {formItemLayout.validateMessagePosition.value !== 'right' && <FormItemValidateMessage message={formItemValidation.validateMessage.value!}/>}
             </div>

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, iHTMLDivElement, mergeAttrs, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, Fragment, getComponentCls, iHTMLDivElement, mergeAttrs, useClasses, useRefs, useStyles} from "plain-design-composition";
 import './index.scss';
 import {ThemeStatus, useStyle} from "../../uses/useStyle";
 import {useEdit} from "../../uses/useEdit";
@@ -134,7 +134,7 @@ export const Input = designComponent({
             {content}
 
             {inputSuffixIcon.render()}
-            {hooks.onRenderSuffix.exec(slots.suffix())}
+            {hooks.onRenderSuffix.exec(<Fragment key="slot_suffix">{slots.suffix()}</Fragment>)}
           </span>
         );
       },

package/src/packages/components/Table/standard/PlcExpand.tsx

@@ -133,13 +133,19 @@ export const PlcExpand = designComponent({
      * @author  韦胜健
      * @date    2022/11/17 14:15
      */
+    const weakMap = new WeakMap<PlainObject, (param: any) => any>();
     onBeforeUnmount(table.hooks.onTableMessyData.use(({ data }) => {
       const newData = [] as any[];
       data.forEach(item => {
         newData.push(item);
         if (typeof item === "function") {return;}
         if (utils.isExpand(item.data)) {
-          newData.push((param: any) => utils.renderExpand(item, param.vIndex, param.vid, param.index));
+          let dataFunc = weakMap.get(item.data);
+          if (!dataFunc) {
+            dataFunc = (param: any) => utils.renderExpand(item, param.vIndex, param.vid, param.index);
+            weakMap.set(item.data, dataFunc);
+          }
+          newData.push(dataFunc);
         }
       });
       return { data: newData };

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

@@ -75,12 +75,26 @@ export function useVirtualList(
     hostSize: null as null | number,              // 容器高度
     scrollDirection: ScrollDirection.none as typeof ScrollDirection.TYPE,
     id2size: {} as Record<string, number | undefined>,
-    avgSize: props.size
+  });
+
+  const _avgSize = computed((): number => {
+    const total = Object.values(state.id2size).reduce((prev, item) => {
+      if (item != null) {
+        prev.total += item;
+        prev.count++;
+      }
+      return prev;
+    }, { total: 0, count: 0 });
+    if (!!total.count) {
+      return Math.floor(total.total / total.count);
+    } else {
+      return props.size;
+    }
   });
 
   const _pageSize = computed(() => {
     if (state.hostSize == null) {return null;}
-    return Math.floor(state.hostSize / (state.avgSize == null ? props.size : state.avgSize));
+    return Math.floor(state.hostSize / _avgSize.value);
   });
 
   const idMap = new WeakMap<PlainObject, string>();
@@ -94,7 +108,7 @@ export function useVirtualList(
         id = nextRowId();
         idMap.set(item, id);
       }
-      const size: number = state.id2size[id] || state.avgSize;
+      const size: number = state.id2size[id] || _avgSize.value;
       let start = prevEnd;
       let end = start + size;
       prevEnd = end;
@@ -120,7 +134,7 @@ export function useVirtualList(
         startPageIndex: 0,
       };
     }
-    const { startIndex, endIndex, pageIndex } = utils.getPageIndex(scrollValue, pageSize);
+    const { startIndex, endIndex, pageIndex } = utils.getPageIndex(scrollValue);
     return {
       list: nodes.value.slice(startIndex, endIndex),
       startPageIndex: pageIndex,
@@ -264,10 +278,11 @@ export function useVirtualList(
      * @author  韦胜健
      * @date    2020/12/14 22:44
      */
-    getPageIndex: (scrollValue: number, pageSize: number | null | undefined) => {
+    getPageIndex: (scrollValue: number) => {
       if (scrollValue < 0) {
         scrollValue = 0;
       }
+      const pageSize = _pageSize.value;
       const data = dataModel.value || [];
       if (pageSize == null) {
         return {
@@ -322,18 +337,15 @@ export function useVirtualList(
       };
     },
     resetHostSize: () => {
-      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) {
-        hostSize -= headEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
-      }
-      if (!!footEl) {
-        hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
-      }
-      if (state.hostSize != hostSize) {
-        state.hostSize = hostSize;
-      }
+      const hostEl = refs.scroll?.refs.host;
+      if (!hostEl) {return;}
+      let hostSize = hostEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];
+      const headEl = hostEl.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
+      const footEl = hostEl.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
+      if (!!headEl) {hostSize -= headEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];}
+      if (!!footEl) {hostSize -= footEl[props.horizontal ? 'offsetWidth' : 'offsetHeight'];}
+
+      if (state.hostSize != hostSize) {state.hostSize = hostSize;}
     },
   };
 
@@ -348,7 +360,7 @@ export function useVirtualList(
       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, _pageSize.value);
+      const current = utils.getPageIndex((e.target as HTMLDivElement).scrollTop);
       state.scrollValue = (e.target as HTMLDivElement)[props.horizontal ? 'scrollLeft' : 'scrollTop'];
       freezeState.current = current;
       emit.onPageIndexChange(current);
@@ -387,7 +399,6 @@ export function useVirtualList(
     await delay();
     // console.log('dynamic scan height')
     const elNodes = (refs.content?.querySelectorAll('[data-vid],[vid]') || []) as HTMLElement[];
-    let newAvgSize = state.avgSize;
 
     for (let i = 0; i < elNodes.length; i++) {
       const el = elNodes[i];
@@ -398,13 +409,8 @@ export function useVirtualList(
       }
       if (state.id2size[vid] != size) {
         state.id2size[vid] = size;
-        newAvgSize = Number(((state.avgSize + size) / 2).toFixed(0));
       }
     }
-
-    if (newAvgSize != state.avgSize) {
-      state.avgSize = newAvgSize;
-    }
   });
 
   return {