fix: icon set dropdown style (#2602)

* fix(sheet): style issue

* chore: icon set dropdown scroll while height over viewport

* Revert "fix(sheet): style issue"

This reverts commit d293631.

* style: eslint issues

* chore: eslint issue

* chore: update style

packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/iconSet.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import set from 'lodash.set';
 import get from 'lodash.get';
 import { MoreDownSingle, SlashSingle } from '@univerjs/icons';
@@ -24,7 +24,7 @@ import { useDependency } from '@wendellhu/redi/react-bindings';
 
 import type { Workbook } from '@univerjs/core';
 import { createInternalEditorID, IUniverInstanceService, LocaleService, Tools, UniverInstanceType } from '@univerjs/core';
-import { TextEditor } from '@univerjs/ui';
+import { ILayoutService, TextEditor, useScrollYOverContainer } from '@univerjs/ui';
 import type { IIconSet, IIconType } from '@univerjs/sheets-conditional-formatting';
 import { CFNumberOperator, CFRuleType, CFSubRuleType, CFValueType, compareWithNumber, createDefaultValue, EMPTY_ICON_TYPE, getOppositeOperator, iconGroup, iconMap, SHEET_CONDITIONAL_FORMATTING_PLUGIN } from '@univerjs/sheets-conditional-formatting';
 import stylesBase from '../index.module.less';
@@ -84,17 +84,18 @@ const createDefaultConfigItem = (iconType: IIconType, index: number, list: unkno
     iconId: String(index),
 });
 
-const IconGroupList = (props: {
+interface IconGroupListProps {
     onClick: (iconType: IIconType) => void;
     iconType?: IIconType;
-}) => {
+};
+const IconGroupList = forwardRef<HTMLDivElement | null, IconGroupListProps>((props, ref) => {
     const localeService = useDependency(LocaleService);
 
     const handleClick = (iconType: IIconType) => {
         props.onClick(iconType);
     };
     return (
-        <div className={styles.iconGroupList}>
+        <div ref={ref} className={styles.iconGroupList}>
             {iconGroup.map((group, index) => {
                 return (
                     <div key={index} className={styles.group}>
@@ -116,7 +117,7 @@ const IconGroupList = (props: {
             })}
         </div>
     );
-};
+});
 
 const IconItemList = (props: { onClick: (iconType: IIconType, iconId: string) => void;iconType?: IIconType; iconId: string }) => {
     const list = useMemo(() => {
@@ -419,11 +420,16 @@ export const IconSet = (props: IStyleEditorProps<unknown, IIconSet>) => {
         });
         configListSet([...configList]);
     };
+    const layoutService = useDependency(ILayoutService);
+    const [iconGroupListEl, setIconGroupListEl] = useState<HTMLDivElement>();
+
+    useScrollYOverContainer(iconGroupListEl, layoutService.rootContainerElement);
+
     return (
         <div className={styles.iconSet}>
             <div className={stylesBase.title}>{localeService.t('sheet.cf.panel.styleRule')}</div>
             <div className={`${stylesBase.mTSm}`}>
-                <Dropdown overlay={<IconGroupList iconType={currentIconType} onClick={handleClickIconList} />}>
+                <Dropdown placement="bottomLeft" overlay={<IconGroupList ref={(el) => !iconGroupListEl && el && setIconGroupListEl(el)} iconType={currentIconType} onClick={handleClickIconList} />}>
                     <div className={styles.dropdownIcon} style={{ width: 'unset' }}>
                         {previewIcon}
                         <MoreDownSingle />

packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/index.module.less

@@ -81,7 +81,8 @@
 .icon-group-list {
     padding: var(--padding-base);
     font-size: var(--font-size-xs);
-    width: 314px;
+    box-sizing: border-box;
+    width: 328px;
     background-color: rgb(var(--bg-color-secondary));
     border: 1px solid rgb(var(--border-color));
     border-radius: var(--border-radius-lg);

packages/ui/src/components/hooks/layout.ts

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { useEffect, useRef } from 'react';
 import canUseDom from 'rc-util/lib/Dom/canUseDom';
+import { useEffect } from 'react';
 
 import type { Nullable } from '@univerjs/core';
 import { resizeObserverCtor } from '@univerjs/design';
@@ -33,60 +33,42 @@ import { useEvent } from './event';
  * @param container
  */
 export function useScrollYOverContainer(element: Nullable<HTMLElement>, container: Nullable<HTMLElement>) {
-    const initialRectRef = useRef({
-        width: 0,
-        height: 0,
-    });
     const updater = useEvent(() => {
         if (!element || !container) {
             return;
         }
 
         const elStyle = element.style;
         const elRect = element.getBoundingClientRect();
+        const { y } = elRect;
         const containerRect = container.getBoundingClientRect();
-        if (elRect.y < 0 && elRect.y + elRect.height <= 0) {
-            /* The element is hidden in viewport */
-            return;
-        }
-        if (Math.abs(elRect.y) < Math.abs(containerRect.y)) {
-            /* The position of element is higher than container  */
-            elStyle.overflowY = '';
-            elStyle.maxHeight = '';
-            return;
-        }
 
-        const relativeY = elRect.y - containerRect.y;
+        const scrolled = element.scrollHeight > elRect.height;
 
-        const initialHeight = initialRectRef.current?.height || 0;
+        const isOverViewport = y < 0 || (y + elRect.height > containerRect.height);
 
-        if (containerRect.height >= relativeY + initialHeight) {
+        if (!isOverViewport && !scrolled) {
             elStyle.overflowY = '';
             elStyle.maxHeight = '';
-        } else {
+            return;
+        }
+
+        if (isOverViewport) {
             elStyle.overflowY = 'scroll';
-            elStyle.maxHeight = `${containerRect.height - relativeY}px`;
+            elStyle.maxHeight = y < 0 ? `${element.scrollHeight + y}px` : `${containerRect.height - y}px`;
         }
     });
 
     useEffect(() => {
         if (!canUseDom() || !element || !container) {
             return;
         }
-        const rect = element.getBoundingClientRect();
-        initialRectRef.current = {
-            width: rect.width,
-            height: rect.height,
-        };
-
         updater();
 
         const resizeObserver = resizeObserverCtor(updater);
         resizeObserver.observe(element);
-        window.addEventListener('resize', updater);
         return () => {
             resizeObserver.unobserve(element);
-            window.removeEventListener('resize', updater);
         };
     }, [element, container]);
 }

packages/ui/src/components/index.ts

@@ -18,3 +18,4 @@ export * from './custom-label';
 export * from './font-family';
 export * from './font-size';
 export * from './menu';
+export { useScrollYOverContainer } from './hooks/layout';