Merge pull request baidu#9612 from 2betop/chore-table-safari

style: 修复 table 在 safari 里面设置 width 无效问题 Close: baidu#9486
lhtuling · Feb 29, 2024 · 412d04a · 412d04a
2 parents 8e8a784 + ad06c98
commit 412d04a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 5 deletions.
diff --git a/packages/amis-core/src/store/table.ts b/packages/amis-core/src/store/table.ts
@@ -1288,7 +1288,7 @@ export const TableStore = iRendererStore
           typeof column.pristine.width === 'number'
             ? `width: ${column.pristine.width}px;`
             : column.pristine.width
-            ? `width: ${column.pristine.width};`
+            ? `width: ${column.pristine.width};min-width: ${column.pristine.width};`
             : '' // todo 可能需要让修改过列宽的保持相应宽度，目前这样相当于重置了
         }`;
       });

diff --git a/packages/amis-core/src/utils/browser.ts b/packages/amis-core/src/utils/browser.ts
@@ -2,3 +2,10 @@ export const chromeVersion = (function getChromeVersion() {
   const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
   return raw ? parseInt(raw[2], 10) : false;
 })();
+
+export const isSafari =
+  navigator.vendor &&
+  navigator.vendor.indexOf('Apple') > -1 &&
+  navigator.userAgent &&
+  navigator.userAgent.indexOf('CriOS') == -1 &&
+  navigator.userAgent.indexOf('FxiOS') == -1;
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
@@ -448,7 +448,7 @@ exports[`Renderer:input table add 1`] = `
                         <th
                           class="is-sticky is-sticky-right is-sticky-first-right cxd-Table-operationCell"
                           data-index="5"
-                          style="right: 0px;"
+                          style="width: 150px; min-width: 150px;"
                         >
                           <div
                             class="cxd-TableCell--title v-middle nowrap"

diff --git a/packages/amis/src/renderers/Table/ColGroup.tsx b/packages/amis/src/renderers/Table/ColGroup.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
-import {chromeVersion, type IColumn, type ITableStore} from 'amis-core';
+import {
+  chromeVersion,
+  isSafari,
+  type IColumn,
+  type ITableStore
+} from 'amis-core';
 import {observer} from 'mobx-react';
 
 export function ColGroup({
@@ -37,7 +42,9 @@ export function ColGroup({
   // 低版本同时设置 thead>th
   // The problem is min-width CSS property.
   // Before Chrome 91, min-width was ignored on COL elements. 91 no longer ignores it.
-  if (typeof chromeVersion === 'number' && chromeVersion < 91) {
+  //
+  // 同时 safari 也存在类似问题，设置 colgroup>col 的 width 属性无效
+  if (isSafari || (typeof chromeVersion === 'number' && chromeVersion < 91)) {
     React.useEffect(() => {
       if (domRef.current) {
         const ths = [].slice.call(

diff --git a/packages/amis/src/renderers/Table/index.tsx b/packages/amis/src/renderers/Table/index.tsx
@@ -1302,8 +1302,8 @@ export default class Table extends React.Component<TableProps, object> {
     if (this.resizeLine) {
       return;
     }
-    this.props.store.syncTableWidth();
     this.props.store.initTableWidth();
+    this.props.store.syncTableWidth();
     this.handleOutterScroll();
     callback && setTimeout(callback, 20);
   }