chore(ui): optimize calculate position

Author: xiejay97

packages/ui/src/components/_date-input/DateInput.tsx

@@ -8,6 +8,7 @@ import ReactDOM from 'react-dom';
 import { useAsync, useElement, useEvent, useEventCallback, useForkRef, useResize } from '@react-devui/hooks';
 import { CloseCircleFilled, SwapRightOutlined } from '@react-devui/icons';
 import { checkNodeExist, getClassName, getOriginalSize, getVerticalSidePosition } from '@react-devui/utils';
+import { POSITION_CONFIG } from '@react-devui/utils/position/config';
 
 import { usePrefixConfig, useTranslation, useMaxIndex, useLayout } from '../../hooks';
 import { TTANSITION_DURING_POPUP } from '../../utils';
@@ -129,7 +130,9 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
   const updatePosition = useEventCallback(() => {
     if (dVisible) {
       if (boxRef.current && popupRef.current) {
-        const { width, height } = getOriginalSize(popupRef.current);
+        const { height } = getOriginalSize(popupRef.current);
+        const maxWidth = window.innerWidth - POSITION_CONFIG.space * 2;
+        const width = Math.min(popupRef.current.scrollWidth, maxWidth);
         const { top, left, transformOrigin } = getVerticalSidePosition(
           boxRef.current,
           { width, height },
@@ -141,6 +144,7 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
         setPopupPositionStyle({
           top,
           left,
+          maxWidth,
         });
         setTransformOrigin(transformOrigin);
       }

packages/ui/src/components/auto-complete/AutoComplete.tsx

@@ -107,11 +107,12 @@ function AutoComplete<T extends DAutoCompleteItem>(
       const popupEl = popupRef.current;
       if (boxEl && popupEl) {
         const boxWidth = boxEl.getBoundingClientRect().width;
-        const minWidth = Math.min(boxWidth, window.innerWidth - POSITION_CONFIG.space * 2);
-        const { width, height } = getOriginalSize(popupEl);
+        const { height } = getOriginalSize(popupEl);
+        const maxWidth = window.innerWidth - POSITION_CONFIG.space * 2;
+        const width = Math.min(Math.max(popupEl.scrollWidth, boxWidth), maxWidth);
         const { top, left, transformOrigin } = getVerticalSidePosition(
           boxEl,
-          { width: Math.max(width, minWidth), height },
+          { width, height },
           {
             placement: 'bottom-left',
             inWindow: true,
@@ -121,7 +122,8 @@ function AutoComplete<T extends DAutoCompleteItem>(
         setPopupPositionStyle({
           top,
           left,
-          minWidth,
+          minWidth: Math.min(boxWidth, maxWidth),
+          maxWidth,
         });
         setTransformOrigin(transformOrigin);
       }

packages/ui/src/components/cascader/Cascader.tsx

@@ -11,6 +11,7 @@ import React, { useCallback, useState, useId, useMemo, useRef } from 'react';
 import { useEventNotify } from '@react-devui/hooks';
 import { CloseOutlined, LoadingOutlined } from '@react-devui/icons';
 import { findNested, getClassName, getOriginalSize, getVerticalSidePosition } from '@react-devui/utils';
+import { POSITION_CONFIG } from '@react-devui/utils/position/config';
 
 import { usePrefixConfig, useComponentConfig, useGeneralContext, useDValue, useTranslation } from '../../hooks';
 import { registerComponentMate } from '../../utils';
@@ -379,7 +380,9 @@ function Cascader<V extends DId, T extends DCascaderItem<V>>(
           }}
           dInputRef={dInputRef}
           dUpdatePosition={(boxEl, popupEl) => {
-            const { width, height } = getOriginalSize(popupEl);
+            const { height } = getOriginalSize(popupEl);
+            const maxWidth = window.innerWidth - POSITION_CONFIG.space * 2;
+            const width = Math.min(popupEl.scrollWidth, maxWidth);
             const { top, left, transformOrigin } = getVerticalSidePosition(
               boxEl,
               { width, height },
@@ -393,6 +396,7 @@ function Cascader<V extends DId, T extends DCascaderItem<V>>(
               position: {
                 top,
                 left,
+                maxWidth,
               },
               transformOrigin,
             };

packages/ui/src/components/select/Select.tsx

@@ -8,6 +8,7 @@ import React, { useState, useId, useCallback, useMemo, useRef } from 'react';
 
 import { CloseOutlined, LoadingOutlined, PlusOutlined } from '@react-devui/icons';
 import { findNested, getClassName, getOriginalSize, getVerticalSidePosition } from '@react-devui/utils';
+import { POSITION_CONFIG } from '@react-devui/utils/position/config';
 
 import { usePrefixConfig, useComponentConfig, useTranslation, useGeneralContext, useDValue } from '../../hooks';
 import { registerComponentMate } from '../../utils';
@@ -444,7 +445,7 @@ function Select<V extends DId, T extends DSelectItem<V>>(
           }}
           dInputRef={dInputRef}
           dUpdatePosition={(boxEl, popupEl) => {
-            const width = boxEl.getBoundingClientRect().width;
+            const width = Math.min(boxEl.getBoundingClientRect().width, window.innerWidth - POSITION_CONFIG.space * 2);
             const { height } = getOriginalSize(popupEl);
             const { top, left, transformOrigin } = getVerticalSidePosition(
               boxEl,

packages/ui/src/components/table/TableFilter.tsx

@@ -248,6 +248,7 @@ function TableFilter<V extends DId, T extends DTableFilterItem<V>>(
       dTrigger="click"
       dPlacement="bottom-right"
       dArrow={false}
+      dInWindow
       dContent={
         <>
           {dSearchable && (

packages/ui/src/components/table/TableSearch.tsx

@@ -67,6 +67,7 @@ function TableSearch(props: DTableSearchProps, ref: React.ForwardedRef<DTableSea
       dTrigger="click"
       dPlacement="bottom-right"
       dArrow={false}
+      dInWindow
       dContent={
         <DInput
           className={`${dPrefix}table__filter-search`}

packages/ui/src/components/tree-select/TreeSelect.tsx

@@ -410,11 +410,12 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
           dInputRef={dInputRef}
           dUpdatePosition={(boxEl, popupEl) => {
             const boxWidth = boxEl.getBoundingClientRect().width;
-            const minWidth = Math.min(boxWidth, window.innerWidth - POSITION_CONFIG.space * 2);
-            const { width, height } = getOriginalSize(popupEl);
+            const { height } = getOriginalSize(popupEl);
+            const maxWidth = window.innerWidth - POSITION_CONFIG.space * 2;
+            const width = Math.min(Math.max(popupEl.scrollWidth, boxWidth), maxWidth);
             const { top, left, transformOrigin } = getVerticalSidePosition(
               boxEl,
-              { width: Math.max(width, minWidth), height },
+              { width, height },
               {
                 placement: 'bottom-left',
                 inWindow: true,
@@ -425,7 +426,8 @@ function TreeSelect<V extends DId, T extends DTreeItem<V>>(
               position: {
                 top,
                 left,
-                minWidth,
+                minWidth: Math.min(boxWidth, maxWidth),
+                maxWidth,
               },
               transformOrigin,
             };

packages/ui/src/styles/_variables.scss

@@ -16,10 +16,8 @@ $colors: (
   'black': #000,
 ) !default;
 
-$popover-space: 10px !default;
-
-$placeholder-color: rgb(var(--#{$variable-prefix}text-color-rgb) / 24%);
-$placeholder-disabled-color: rgb(var(--#{$variable-prefix}text-color-rgb) / 8%);
+$placeholder-color: rgb(var(--#{$variable-prefix}text-color-rgb) / 24%) !default;
+$placeholder-disabled-color: rgb(var(--#{$variable-prefix}text-color-rgb) / 8%) !default;
 
 :root {
   /** z-index **/

packages/ui/src/styles/components/auto-complete.scss

@@ -2,7 +2,6 @@ $auto-complete-option-height: 32px;
 
 @include b(auto-complete) {
   position: fixed;
-  max-width: calc(100vw - #{$popover-space} * 2);
   background-color: var(--#{$variable-prefix}background-color);
   border-radius: var(--#{$variable-prefix}border-radius);
   box-shadow: var(--#{$variable-prefix}shadow-popup);

packages/ui/src/styles/components/cascader.scss

@@ -35,7 +35,6 @@ $cascader-option-height: 32px;
 
   @include e(popup) {
     position: fixed;
-    max-width: calc(100vw - #{$popover-space} * 2);
     overflow: auto hidden;
     white-space: nowrap;
     background-color: var(--#{$variable-prefix}background-color);