fix(adaptive): 修复开启自适应后 组件在 Safari 上无法渲染的问题 close #1164 (#1195)

lijinke666 · web-flow · commit c0414ec69479 · 2022-03-18T18:51:21.000+08:00
* fix(adaptive): 修复开启自适应后 组件在Safari上无法渲染的问题 close #1164 * fix(adaptive): 修复 lint
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -56,6 +56,7 @@ import {
   SheetType,
   PartDrillDown,
   PartDrillDownInfo,
+  Adaptive,
 } from '@/components';
 
 import './index.less';
@@ -148,7 +149,7 @@ function MainLayout() {
   const [showTotals, setShowTotals] = React.useState(false);
   const [themeCfg, setThemeCfg] = React.useState<ThemeCfg>({ name: 'default' });
   const [showCustomTooltip, setShowCustomTooltip] = React.useState(false);
-  const [adaptive, setAdaptive] = React.useState(false);
+  const [adaptive, setAdaptive] = React.useState<Adaptive>(true);
   const [options, setOptions] =
     React.useState<Partial<S2Options<React.ReactNode>>>(defaultOptions);
   const [dataCfg, setDataCfg] =
@@ -563,7 +564,7 @@ function MainLayout() {
                 <Switch
                   checkedChildren="容器宽高自适应开"
                   unCheckedChildren="容器宽高自适应关"
-                  defaultChecked={adaptive}
+                  defaultChecked={Boolean(adaptive)}
                   onChange={setAdaptive}
                 />
                 <Switch
diff --git a/packages/s2-react/src/hooks/useResize.ts b/packages/s2-react/src/hooks/useResize.ts
@@ -52,15 +52,22 @@ export const useResize = (params: UseResizeEffectParams) => {
       return;
     }
     const resizeObserver = new ResizeObserver(
-      debounce(([entry] = []) => {
+      debounce(([entry]: ResizeObserverEntry[] = []) => {
         if (entry) {
           const [size] = entry.borderBoxSize || [];
+
+          // Safari 不支持 borderBoxSize 属性
           const width = adaptiveWidth
-            ? Math.floor(size?.inlineSize)
+            ? Math.floor(
+                (size?.inlineSize || entry.contentRect?.width) ?? optionWidth,
+              )
             : optionWidth;
           const height = adaptiveHeight
-            ? Math.floor(container?.getBoundingClientRect().height) // 去除 header 和 page 后才是 sheet 真正的高度
+            ? Math.floor(
+                container?.getBoundingClientRect().height ?? optionHeight,
+              ) // 去除 header 和 page 后才是 sheet 真正的高度
             : optionHeight;
+
           if (!adaptiveWidth && !adaptiveHeight) {
             return;
           }
