test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
style: 修复 table 在 safari 里面设置 width 无效问题 Close: #9486
This commit is contained in:
hsm-lv 2024-02-29 15:15:13 +08:00 committed by GitHub
commit 412d04a156
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/amis-core/src/store/table.ts
View File

@ -1288,7 +1288,7 @@ export const TableStore = iRendererStore
typeof column.pristine.width === 'number' typeof column.pristine.width === 'number'
? `width: ${column.pristine.width}px;` ? `width: ${column.pristine.width}px;`
: column.pristine.width : column.pristine.width
? `width: ${column.pristine.width};` ? `width: ${column.pristine.width};min-width: ${column.pristine.width};`
: '' // todo 可能需要让修改过列宽的保持相应宽度，目前这样相当于重置了 : '' // todo 可能需要让修改过列宽的保持相应宽度，目前这样相当于重置了
}`; }`;
}); });

7
packages/amis-core/src/utils/browser.ts
View File

@ -2,3 +2,10 @@ export const chromeVersion = (function getChromeVersion() {
const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./); const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
return raw ? parseInt(raw[2], 10) : false; 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;

2
packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
View File

@ -448,7 +448,7 @@ exports[`Renderer:input table add 1`] = `
<th <th
class="is-sticky is-sticky-right is-sticky-first-right cxd-Table-operationCell" class="is-sticky is-sticky-right is-sticky-first-right cxd-Table-operationCell"
data-index="5" data-index="5"
style="right: 0px;" style="width: 150px; min-width: 150px;"
> >
<div <div
class="cxd-TableCell--title v-middle nowrap" class="cxd-TableCell--title v-middle nowrap"

11
packages/amis/src/renderers/Table/ColGroup.tsx
View File

@ -1,5 +1,10 @@
import React from 'react'; 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'; import {observer} from 'mobx-react';
export function ColGroup({ export function ColGroup({
@ -37,7 +42,9 @@ export function ColGroup({
// 低版本同时设置 thead>th // 低版本同时设置 thead>th
// The problem is min-width CSS property. // The problem is min-width CSS property.
// Before Chrome 91, min-width was ignored on COL elements. 91 no longer ignores it. // 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(() => { React.useEffect(() => {
if (domRef.current) { if (domRef.current) {
const ths = [].slice.call( const ths = [].slice.call(

2
packages/amis/src/renderers/Table/index.tsx
View File

@ -1302,8 +1302,8 @@ export default class Table extends React.Component<TableProps, object> {
if (this.resizeLine) { if (this.resizeLine) {
return; return;
} }
this.props.store.syncTableWidth();
this.props.store.initTableWidth(); this.props.store.initTableWidth();
this.props.store.syncTableWidth();
this.handleOutterScroll(); this.handleOutterScroll();
callback && setTimeout(callback, 20); callback && setTimeout(callback, 20);
} }