修复 Table 在表头有分组的情况下,固定列样式有些问题

This commit is contained in:
2betop 2020-05-14 17:00:24 +08:00
parent d40074ca7f
commit cc203adb89

View File

@ -140,7 +140,7 @@ export default class Table extends React.Component<TableProps, object> {
'popOverContainer', 'popOverContainer',
'headerToolbarClassName', 'headerToolbarClassName',
'toolbarClassName', 'toolbarClassName',
'footerToolbarClassName', 'footerToolbarClassName'
]; ];
static defaultProps: Partial<TableProps> = { static defaultProps: Partial<TableProps> = {
className: '', className: '',
@ -279,9 +279,9 @@ export default class Table extends React.Component<TableProps, object> {
} }
componentDidMount() { componentDidMount() {
let parent: HTMLElement | Window | null = getScrollParent(findDOMNode( let parent: HTMLElement | Window | null = getScrollParent(
this findDOMNode(this) as HTMLElement
) as HTMLElement); );
if (!parent || parent === document.body) { if (!parent || parent === document.body) {
parent = window; parent = window;
@ -404,7 +404,11 @@ export default class Table extends React.Component<TableProps, object> {
saveImmediately?: boolean | any, saveImmediately?: boolean | any,
savePristine?: boolean savePristine?: boolean
) { ) {
const {onSave, saveImmediately: propsSaveImmediately, primaryField} = this.props; const {
onSave,
saveImmediately: propsSaveImmediately,
primaryField
} = this.props;
item.change(values, savePristine); item.change(values, savePristine);
@ -542,7 +546,7 @@ export default class Table extends React.Component<TableProps, object> {
const dom = findDOMNode(this) as HTMLElement; const dom = findDOMNode(this) as HTMLElement;
const clip = (this.table as HTMLElement).getBoundingClientRect(); const clip = (this.table as HTMLElement).getBoundingClientRect();
const offsetY = const offsetY =
this.props.affixOffsetTop ?? this.props.env.affixOffsetTop ?? 0; this.props.affixOffsetTop || this.props.env.affixOffsetTop || 0;
const affixed = clip.top < offsetY && clip.top + clip.height - 40 > offsetY; const affixed = clip.top < offsetY && clip.top + clip.height - 40 > offsetY;
const affixedDom = dom.querySelector(`.${ns}Table-fixedTop`) as HTMLElement; const affixedDom = dom.querySelector(`.${ns}Table-fixedTop`) as HTMLElement;
@ -761,7 +765,11 @@ export default class Table extends React.Component<TableProps, object> {
'tr[data-index]' 'tr[data-index]'
) as HTMLElement; ) as HTMLElement;
if (!tr || !this.props.itemActions) { if (
!tr ||
!this.props.itemActions ||
!this.props.itemActions.filter(item => !item.hiddenOnHover).length
) {
return; return;
} }
@ -963,9 +971,7 @@ export default class Table extends React.Component<TableProps, object> {
<div className={cx('Table-heading', headingClassName)} key="heading"> <div className={cx('Table-heading', headingClassName)} key="heading">
{!saveImmediately && store.modified && !hideQuickSaveBtn ? ( {!saveImmediately && store.modified && !hideQuickSaveBtn ? (
<span> <span>
{`当前有 ${ {`当前有 ${store.modified} 条记录修改了内容, 但并没有提交。请选择:`}
store.modified
} , :`}
<button <button
type="button" type="button"
className={cx('Button Button--xs Button--success m-l-sm')} className={cx('Button Button--xs Button--success m-l-sm')}
@ -1037,7 +1043,9 @@ export default class Table extends React.Component<TableProps, object> {
checked={store.someChecked} checked={store.someChecked}
onChange={this.handleCheckAll} onChange={this.handleCheckAll}
/> />
) : null} ) : (
'\u00A0'
)}
</th> </th>
); );
} else if (column.type === '__dragme') { } else if (column.type === '__dragme') {
@ -1373,11 +1381,19 @@ export default class Table extends React.Component<TableProps, object> {
<thead> <thead>
{store.columnGroup.length ? ( {store.columnGroup.length ? (
<tr> <tr>
{store.columnGroup.map((item, index) => ( {store.columnGroup.map((item, index) => {
<th key={index} data-index={item.index} colSpan={item.colSpan}> const renderColumns = columns.filter(a => ~item.has.indexOf(a));
{item.label ? render('tpl', item.label) : null}
</th> return renderColumns.length ? (
))} <th
key={index}
data-index={item.index}
colSpan={renderColumns.length}
>
{'\u00A0'}
</th>
) : null;
})}
</tr> </tr>
) : null} ) : null}
<tr> <tr>
@ -1609,7 +1625,11 @@ export default class Table extends React.Component<TableProps, object> {
const toolbarNode = const toolbarNode =
actions || child || store.dragging ? ( actions || child || store.dragging ? (
<div <div
className={cx('Table-toolbar Table-headToolbar', toolbarClassName, headerToolbarClassName)} className={cx(
'Table-toolbar Table-headToolbar',
toolbarClassName,
headerToolbarClassName
)}
key="header-toolbar" key="header-toolbar"
> >
{actions} {actions}
@ -1669,7 +1689,11 @@ export default class Table extends React.Component<TableProps, object> {
const toolbarNode = const toolbarNode =
actions || child ? ( actions || child ? (
<div <div
className={cx('Table-toolbar Table-footToolbar', toolbarClassName, footerToolbarClassName)} className={cx(
'Table-toolbar Table-footToolbar',
toolbarClassName,
footerToolbarClassName
)}
key="footer-toolbar" key="footer-toolbar"
> >
{actions} {actions}
@ -1771,9 +1795,12 @@ export default class Table extends React.Component<TableProps, object> {
renderItemActions() { renderItemActions() {
const {itemActions, render, store, classnames: cx} = this.props; const {itemActions, render, store, classnames: cx} = this.props;
const finnalActions = Array.isArray(itemActions)
? itemActions.filter(action => !action.hiddenOnHover)
: [];
const rowIndex = store.hoverIndex; const rowIndex = store.hoverIndex;
if (!~rowIndex || !itemActions || !itemActions.length) { if (!~rowIndex || !finnalActions.length) {
return null; return null;
} }
@ -1798,22 +1825,20 @@ export default class Table extends React.Component<TableProps, object> {
}} }}
> >
<div className={cx('Table-itemActions')}> <div className={cx('Table-itemActions')}>
{itemActions.map((action, index) => {finnalActions.map((action, index) =>
action.hiddenOnHover render(
? null `itemAction/${index}`,
: render( {
`itemAction/${index}`, ...(action as any),
{ isMenuItem: true
...(action as any), },
isMenuItem: true {
}, key: index,
{ item: store.rows[rowIndex],
key: index, data: store.rows[rowIndex].locals,
item: store.rows[rowIndex], rowIndex
data: store.rows[rowIndex].locals, }
rowIndex )
}
)
)} )}
</div> </div>
</div> </div>