plain-design 1.0.0-beta.3 → 1.0.0-beta.30

package/src/packages/components/TreeCore/createTreeDraggier.tsx

@@ -14,6 +14,8 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {onParentElementsScroll} from "../../utils/onParentElementsScroll";
 import {addClass} from "plain-utils/dom/addClass";
 import {iTreeHooks} from "./createTreeHooks";
+import {ClientZoom} from "../ClientZoom";
+import {delay} from "plain-utils/utils/delay";
 
 export function createTreeDraggier(
   {
@@ -108,6 +110,8 @@ export function createTreeDraggier(
    */
   const shadowTreeNode = (() => {
 
+    const reactiveState = reactive({ dragging: false, });
+
     let staticState = null as null | {
       startNode: iTreeNode,                           // 拖拽开始的时候节点
       rowElement: HTMLElement,                        // 拖拽开始的row对象
@@ -222,71 +226,78 @@ export function createTreeDraggier(
       if (!rowElement) {
         throw new Error(`tree draggier: can't find row element with selector: .${rowClass}`);
       }
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState = {
         startNode: node,
         rowElement,
         start: {
-          x: e.clientX,
-          y: e.clientY,
+          x: clientX,
+          y: clientY,
         },
         data: null,
       };
+      reactiveState.dragging = true;
       /**
        * 拖拽结束之后，处理拖拽数据
        * @author  韦胜健
        * @date    2023/6/1 21:13
        */
       draggierEffects.push(async () => {
-        if (!!staticState?.data) {
-          const { startNode, } = staticState;
-          const { moveNode, dropType, droppable, isHideDraggier } = staticState.data.move;
-          if (!droppable || isHideDraggier) {
-            return;
-          }
-          const newParentNode = moveNode.parent;
-          const oldParentNode = startNode.parent;
-          const newSiblings = dropType === eTreeDropType.inner ? methods.getReactiveChildrenData(moveNode) : methods.getParentChildrenData(moveNode);
-          const newSiblingsBak = [...newSiblings];
-          const oldSiblings = methods.getParentChildrenData(startNode);
-          const oldSiblingsBak = [...oldSiblings];
-
-          methods.removeSelf(startNode!);
-          switch (dropType) {
-            case eTreeDropType.prev:
-              methods.previousSibling(moveNode!, startNode!);
-              break;
-            case eTreeDropType.inner:
-              methods.unshiftChild(moveNode!, startNode!);
-              await methods.expand(moveNode!);
-              break;
-            case eTreeDropType.next:
-              methods.nextSibling(moveNode!, startNode!);
-              await methods.collapse(moveNode);
-              break;
+        await (async () => {
+          if (!!staticState?.data) {
+            const { startNode, } = staticState;
+            const { moveNode, dropType, droppable, isHideDraggier } = staticState.data.move;
+            if (!droppable || isHideDraggier) {
+              return;
+            }
+            const newParentNode = dropType === eTreeDropType.inner ? moveNode : moveNode.parent;
+            const oldParentNode = startNode.parent;
+            const newSiblings = dropType === eTreeDropType.inner ? methods.getReactiveChildrenData(moveNode) : methods.getParentChildrenData(moveNode);
+            const newSiblingsBak = [...newSiblings];
+            const oldSiblings = methods.getParentChildrenData(startNode);
+            const oldSiblingsBak = [...oldSiblings];
+
+            methods.removeSelf(startNode!);
+            switch (dropType) {
+              case eTreeDropType.prev:
+                methods.previousSibling(moveNode!, startNode!);
+                break;
+              case eTreeDropType.inner:
+                methods.unshiftChild(moveNode!, startNode!);
+                await methods.expand(moveNode!);
+                break;
+              case eTreeDropType.next:
+                methods.nextSibling(moveNode!, startNode!);
+                await methods.collapse(moveNode);
+                break;
+            }
+            await nextTick();
+            await Promise.all([
+              methods.refreshCheckStatus(startNode!.parent),
+              methods.refreshCheckStatus(moveNode!.parent)
+            ]);
+            await hooks.onDragChange.exec({
+              data: startNode.data,
+              newParent: newParentNode?.data,
+              oldParent: oldParentNode?.data,
+              node: startNode,
+              newParentNode,
+              oldParentNode,
+              newSiblings,
+              oldSiblings,
+              newSiblingsBak,
+              oldSiblingsBak,
+              undo: () => {
+                newSiblings.splice(0, newSiblings.length, ...newSiblingsBak);
+                oldSiblings.splice(0, oldSiblings.length, ...oldSiblingsBak);
+              },
+            });
           }
-          await nextTick();
-          await Promise.all([
-            methods.refreshCheckStatus(startNode!.parent),
-            methods.refreshCheckStatus(moveNode!.parent)
-          ]);
-          await hooks.onDragChange.exec({
-            data: startNode.data,
-            newParent: newParentNode?.data,
-            oldParent: oldParentNode?.data,
-            node: startNode,
-            newParentNode,
-            oldParentNode,
-            newSiblings,
-            oldSiblings,
-            newSiblingsBak,
-            oldSiblingsBak,
-            undo: () => {
-              newSiblings.splice(0, newSiblings.length, ...newSiblingsBak);
-              oldSiblings.splice(0, oldSiblings.length, ...oldSiblingsBak);
-            },
-          });
-        }
-        staticState = null;
+        })();
+        delay().then(() => {
+          staticState = null;
+          reactiveState.dragging = false;
+        });
       });
     };
 
@@ -302,7 +313,8 @@ export function createTreeDraggier(
 
       if (!isDragging) {
         /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        if (!!e && Math.abs(e.clientY - staticState.start.y) > 5) {
+        const { clientY } = ClientZoom.getClientPosition(e);
+        if (!!e && Math.abs(clientY - staticState.start.y) > 5) {
           isDragging = true;
           initDraggierState();
         }
@@ -323,9 +335,10 @@ export function createTreeDraggier(
         staticState.data.move.isHideDraggier = true;
         staticState.data.cloneTreeNode.style.opacity = '0';
       } else {
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
         staticState.data.move.isHideDraggier = false;
-        staticState.data.move.x = e.clientX;
-        staticState.data.move.y = e.clientY;
+        staticState.data.move.x = clientX;
+        staticState.data.move.y = clientY;
         staticState.data.move.moveNode = node;
         staticState.data.move.contentRect = (e.currentTarget as HTMLElement).querySelector(`.${contentClass}`)!.getBoundingClientRect();
         const percent = (staticState.data.move.y - staticState.data.move.contentRect.top) / staticState.data.move.contentRect.height;
@@ -366,7 +379,7 @@ export function createTreeDraggier(
       indicatorHandler.update();
     };
 
-    const isDragging = () => !staticState;
+    const isDragging = () => reactiveState.dragging;
 
     const getState = () => staticState;
 
@@ -384,7 +397,8 @@ export function createTreeDraggier(
         document.removeEventListener('mouseup', draggierEffects.clear);
       });
     },
-    onMousemoveRow: null as null | ((e: iMouseEvent, node: iTreeNode) => void)
+    onMousemoveRow: null as null | ((e: iMouseEvent, node: iTreeNode) => void),
+    isDragging: () => shadowTreeNode.isDragging(),
   });
 
   return ret;

package/src/packages/components/TreeCore/createTreeMethods.tsx

@@ -254,6 +254,7 @@ export function createTreeMethods(
      * @date    2022/9/22 19:56
      */
     refreshCheckStatus: async (keyOrNode: iTreeKeyOrNode, emitChange = true) => {
+      if (!props.multiple) {return;}
       const checkKeys: string[] = [];
       const unCheckKeys: string[] = [];
       await nextTick();

package/src/packages/components/TreeCore/createTreeProps.ts

@@ -29,9 +29,10 @@ export const TreePropsOptions = {
   defaultExpandAll: { type: Boolean as PropType<iTreeProps["defaultExpandAll"]> },
   getNodeIcon: { type: Function as PropType<iTreeProps["getNodeIcon"]> },
   draggable: { type: Boolean as PropType<iTreeProps["draggable"]> },
+  customDraggier: { type: Boolean as PropType<iTreeProps["customDraggier"]> },
   isAllowDraggable: { type: Function as PropType<iTreeProps["isAllowDraggable"]> },
   isAllowDroppable: { type: Function as PropType<iTreeProps["isAllowDroppable"]> },
-  leafIcon: { type: String as PropType<iTreeProps["leafIcon"]>, default: 'pi-file' as string },
+  leafIcon: { type: String as PropType<iTreeProps["leafIcon"]>, default: 'pi-drive-file' as string },
   folderCollapseIcon: { type: String as PropType<iTreeProps["folderCollapseIcon"]>, default: 'pi-caret-right' as string },
   folderExpandIcon: { type: String as PropType<iTreeProps["folderExpandIcon"]>, default: 'pi-down' as string },
   expanderCover: { type: Boolean as PropType<iTreeProps["expanderCover"]>, default: true },

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

@@ -0,0 +1,91 @@
+import {cacheComputed, ComponentPropsType, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClassCache, useRefs} from "plain-design-composition";
+import {Icon} from "../Icon";
+import {iTreeNode} from "../TreeCore/createTreeNode";
+import './tree-node-with-menu.scss';
+import {Tree} from "../Tree";
+import {useTooltip} from "../useTooltip";
+import {iTreeNodeWithMenuOption} from "./treeNodeWithMenu.utils";
+import {Dropdown} from "../Dropdown";
+import {DropdownOption} from "../DropdownOption";
+
+export const TreeNodeWithMenu = designComponent({
+  name: 'tree-node-with-menu',
+  props: {
+    treeNode: { type: Object as PropType<iTreeNode>, required: true },
+    dropdownOptions: { type: Array as PropType<iTreeNodeWithMenuOption[]> },
+    dropdownAttrs: { type: Object as PropType<ComponentPropsType<typeof Dropdown>> },
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ content: iHTMLDivElement });
+
+    const tree = Tree.use.inject();
+
+    const isDraggable = cacheComputed(() => tree.props.draggable && tree.utils.isAllowDraggable(props.treeNode));
+
+    const classes = useClassCache(() => [
+      getComponentCls('tree-node-with-menu'),
+      {
+        'tree-node-with-menu-draggable': isDraggable.value,
+      }
+    ]);
+
+    const dropdownAttrs = computed(() => {
+      return {
+        trigger: 'hover' as const,
+        placement: 'right-start' as const,
+        ...props.dropdownAttrs,
+      };
+    });
+
+    const handler = {
+      onMousedownDraggier: computed(() => !tree.draggier.value ? undefined : ((e: iMouseEvent) => {
+        tree.draggier.value!.onMousedownDraggier(e, props.treeNode);
+      })),
+    };
+
+    useTooltip({
+      overflow: true,
+      tooltip: () => ({
+        reference: refs.content,
+        message: props.treeNode.label()
+      }),
+    });
+
+    return () => (
+      <div className={classes.value}>
+        <div className="tree-node-with-menu-content" ref={onRef.content}>{props.treeNode.label()}</div>
+        {(() => {
+          let btn = (
+            <div className="tree-node-with-menu-button" onMouseDown={handler.onMousedownDraggier.value}>
+              <Icon icon="pi-drag-dot-vertical"/>
+            </div>
+          );
+          let ret = btn;
+          if (!!props.dropdownOptions?.length && !tree.draggier.value?.isDragging()) {
+            ret = (
+              <Dropdown
+                {...dropdownAttrs.value}
+                v-slots={{
+                  default: () => btn,
+                  popper: () => (
+                    props.dropdownOptions?.map((option, index) => {
+                      const { renderDefault, renderContent, ...leftOption } = option;
+                      const vSlots = {} as any;
+                      if (!!renderDefault) {vSlots.default = () => renderDefault();}
+                      if (!!renderContent) {vSlots.content = () => renderContent();}
+                      return <DropdownOption key={index} {...leftOption} v-slots={vSlots}/>;
+                    })
+                  )
+                }}
+              />
+            );
+          }
+          return ret;
+        })()}
+      </div>
+    );
+  },
+});
+
+export default TreeNodeWithMenu;

package/src/packages/components/TreeNodeWithMenu/tree-node-with-menu.scss

@@ -0,0 +1,39 @@
+@include comp(tree-node-with-menu) {
+  display: flex;
+  align-items: center;
+
+  .tree-node-with-menu-content {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tree-node-with-menu-button {
+    height: 1em;
+    width: 1em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    //transition: all ease 0.3s;
+  }
+
+  &.tree-node-with-menu-draggable {
+    .tree-node-with-menu-button {
+      cursor: row-resize;
+      padding-right: 6px;
+    }
+  }
+}
+
+@include comp(tree-node) {
+  &:not(:hover) {
+    .tree-node-with-menu-button {
+      opacity: 0;
+      width: 0;
+      pointer-events: none;
+    }
+  }
+}

package/src/packages/components/TreeNodeWithMenu/treeNodeWithMenu.utils.ts

@@ -0,0 +1,12 @@
+import {iMouseEvent, RenderNode} from "plain-design-composition";
+
+export interface iTreeNodeWithMenuOption {
+  label?: string,
+  disabled?: boolean,
+  readonly?: boolean,
+  icon?: string,
+  val?: any,
+  onClick?: (e: iMouseEvent) => void
+  renderDefault?: () => RenderNode,
+  renderContent?: () => RenderNode,
+}

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

@@ -19,7 +19,7 @@ export const VirtualList = designComponent({
     onPageIndexChange: (data: { pageIndex: number, start: number }) => true,
   },
   scopeSlots: {
-    default: (scope: { item: any, index: number, virtualIndex: number }) => {},
+    default: (scope: { item: any, index: number, vid: string, vIndex: number }) => {},
     content: (scope: { data: any[] }) => {},
   },
   setup({ props, scopeSlots, event: { emit } }) {
@@ -48,8 +48,8 @@ export const VirtualList = designComponent({
               <div className="virtual-list-content" style={virtual.contentStyles.value} ref={onRef.content}>
                 {scopeSlots.content.isExist() ?
                   scopeSlots.content({ data: list }, null) :
-                  list.map((node, virtualIndex) =>
-                    scopeSlots.default({ item: node.item, index: node.index, virtualIndex })
+                  list.map((node, vIndex) =>
+                    scopeSlots.default({ item: node.item, index: node.index, vid: node.id, vIndex })
                   )}
               </div>
             </div>

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

@@ -1,18 +1,23 @@
-import {computed, getComponentCls, onMounted, onUpdated, reactive, useClasses, useStyles, watch} from "plain-design-composition";
+import {computed, createCounter, 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";
+import {createEnum} from "plain-utils/utils/createEnum";
 
 interface DataNode {
   top: number;
   bottom: number;
   height: number;
-
-  data: any;
-  index: number;
+  item: any;
+  id: string;
+  index: number,
 }
 
+const ScrollDirection = createEnum(['up', 'down', 'none'] as const);
+
+const nextRowId = createCounter('__v__');
+
 export function useVirtualList(
   {
     props,
@@ -50,9 +55,30 @@ export function useVirtualList(
   };
   /*响应式属性*/
   const state = reactive({
-    nodes: [] as DataNode[],                    // 格式化的data数组数据
     scrollTop: 0,                               // 当前滚动scrollTop（非实时的）
     pageSize: 0,                                // 页大小
+    scrollDirection: ScrollDirection.none as typeof ScrollDirection.TYPE,
+    id2height: {} as Record<string, number | undefined>,
+    avgHeight: props.size
+  });
+
+  const idMap = new WeakMap<object, string>();
+  let prevBottom = 0;
+
+  const nodes = computed(() => {
+    prevBottom = 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 };
+    });
   });
 
   /**
@@ -60,22 +86,21 @@ export function useVirtualList(
    * @author  韦胜健
    * @date    2020/11/15 9:28
    */
-  const offsetData = computed((): { list: { item: any, index: number }[], startPageIndex: number, start: number } => {
+  const offsetData = computed((): { list: { item: any, id: string, 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 })),
+        list: nodes.value,
         start: 0,
         startPageIndex: 0,
       };
     }
     const { start, end, pageIndex } = utils.getPageIndex(scrollTop, pageSize);
     return {
-      list: data.map((item, index) => ({ item, index })).slice(start, end),
+      list: nodes.value.slice(start, end),
       startPageIndex: pageIndex,
       start,
     };
@@ -112,7 +137,7 @@ export function useVirtualList(
     if (!props.dynamicSize) {
       style.height = `${(props.data || []).length * props.size}px`;
     } else {
-      style.height = `${state.nodes[state.nodes.length - 1].bottom}px`;
+      style.height = `${nodes.value[nodes.value.length - 1].bottom}px`;
     }
   });
 
@@ -136,7 +161,7 @@ export function useVirtualList(
     if (!props.dynamicSize) {
       top = start * props.size;
     } else {
-      top = state.nodes[start].top;
+      top = nodes.value[start].top;
     }
 
     if (transform !== false) {
@@ -161,13 +186,13 @@ export function useVirtualList(
         // console.log('not dynamic》》》getIndex', top / props.size)
         return Math.floor(top / props.size);
       } else {
-        const { nodes } = state;
+        const _nodes = nodes.value;
         let start = 0;
-        let end = nodes.length - 1;
+        let end = _nodes.length - 1;
         let temp = 0;
         while (start <= end) {
           let middle = Math.floor((start + end) / 2);
-          let middleBottom = nodes[middle].bottom;
+          let middleBottom = _nodes[middle].bottom;
           if (middleBottom === top) {
             return middle + 1;
           } else if (middleBottom < top) {
@@ -189,18 +214,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;
@@ -217,21 +261,6 @@ export function useVirtualList(
         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-------------------------------------------*/
@@ -242,13 +271,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);
     }
   };
 
@@ -259,17 +288,22 @@ export function useVirtualList(
     if (!props.dynamicSize) {
       return;
     }
-    !!refs.scroll && refs.scroll.methods.scrollTop(0, 0);
-    /*如果是动态高度，则刷state.nodes*/
-    utils.resetData(data);
+    // !!refs.scroll && refs.scroll.methods.scrollTop(0, 0);
   });
 
-  onMounted(() => {
-    const hostHeight = refs.scroll!.refs.host!.offsetHeight;
-    state.pageSize = Math.ceil(hostHeight / props.size);
-    if (props.dynamicSize && !props.disabled) {
-      utils.resetData(props.data);
+  onMounted(async () => {
+    await delay(23);
+    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);
   });
 
   onUpdated(async () => {
@@ -281,7 +315,9 @@ export function useVirtualList(
     }
     await delay();
     // console.log('dynamic scan height')
-    const elNodes = (Array.from(refs.content!.childNodes || []) as HTMLElement[]).filter(node => node.nodeType !== 3);
+    const elNodes = (refs.content?.querySelectorAll('[data-vid],[vid]') || []) as HTMLElement[];
+    let newAvgHeight = state.avgHeight;
+
     for (let i = 0; i < elNodes.length; i++) {
       const el = elNodes[i];
       const { offsetHeight: height } = el;
@@ -289,19 +325,15 @@ export function useVirtualList(
       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;
-        }
+      if (state.id2height[vid] != height) {
+        state.id2height[vid] = height;
+        newAvgHeight = Number(((state.avgHeight + height) / 2).toFixed(0));
       }
     }
+
+    if (newAvgHeight != state.avgHeight) {
+      state.avgHeight = newAvgHeight;
+    }
   });
 
   return {