Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: legacy context with function and class nesting cause RHL patch failed #431

Open
wants to merge 1 commit into
base: 6.x
Choose a base branch
from
Open

fix: legacy context with function and class nesting cause RHL patch failed #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
180 changes: 91 additions & 89 deletions src/BodyTable.tsx
View file
Open in desktop
Expand Up @@ -15,105 +15,107 @@ export interface BodyTableProps<ValueType> {
isAnyColumnsFixed?: boolean;
}

export default function BodyTable<ValueType>(props: BodyTableProps<ValueType>, { table }) {
const { prefixCls, scroll } = table.props;
const {
columns,
fixed,
tableClassName,
getRowKey,
handleBodyScroll,
handleWheel,
expander,
isAnyColumnsFixed,
} = props;
const { saveRef } = table;
let { useFixedHeader } = table.props;
const bodyStyle = { ...table.props.bodyStyle };
const innerBodyStyle: React.CSSProperties = {};
export default class BodyTable<ValueType> extends React.PureComponent<BodyTableProps<ValueType>> {
static contextTypes = {
table: PropTypes.any,
};

if (scroll.x || fixed) {
bodyStyle.overflowX = bodyStyle.overflowX || 'scroll';
// Fix weird webkit render bug
// https://github.com/ant-design/ant-design/issues/7783
bodyStyle.WebkitTransform = 'translate3d (0, 0, 0)';
}
render() {
const { prefixCls, scroll } = this.context.table.props;
const {
columns,
fixed,
tableClassName,
getRowKey,
handleBodyScroll,
handleWheel,
expander,
isAnyColumnsFixed,
} = this.props;
const { saveRef } = this.context.table;
let { useFixedHeader } = this.context.table.props;
const bodyStyle = { ...this.context.table.props.bodyStyle };
const innerBodyStyle: React.CSSProperties = {};

if (scroll.y) {
// maxHeight will make fixed-Table scrolling not working
// so we only set maxHeight to body-Table here
if (fixed) {
innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
} else {
bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
if (scroll.x || fixed) {
bodyStyle.overflowX = bodyStyle.overflowX || 'scroll';
// Fix weird webkit render bug
// https://github.com/ant-design/ant-design/issues/7783
bodyStyle.WebkitTransform = 'translate3d (0, 0, 0)';
}
bodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
useFixedHeader = true;

// Add negative margin bottom for scroll bar overflow bug
const scrollbarWidth = measureScrollbar({ direction: 'vertical' });
if (scrollbarWidth > 0 && fixed) {
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
bodyStyle.paddingBottom = '0px';
if (scroll.y) {
// maxHeight will make fixed-Table scrolling not working
// so we only set maxHeight to body-Table here
if (fixed) {
innerBodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
} else {
bodyStyle.maxHeight = bodyStyle.maxHeight || scroll.y;
}
bodyStyle.overflowY = bodyStyle.overflowY || 'scroll';
useFixedHeader = true;

// Add negative margin bottom for scroll bar overflow bug
const scrollbarWidth = measureScrollbar({ direction: 'vertical' });
if (scrollbarWidth > 0 && fixed) {
bodyStyle.marginBottom = `-${scrollbarWidth}px`;
bodyStyle.paddingBottom = '0px';
}
}
}

const baseTable = (
<BaseTable
tableClassName={tableClassName}
hasHead={!useFixedHeader}
hasBody
fixed={fixed}
columns={columns}
expander={expander}
getRowKey={getRowKey}
isAnyColumnsFixed={isAnyColumnsFixed}
/>
);
const baseTable = (
<BaseTable
tableClassName={tableClassName}
hasHead={!useFixedHeader}
hasBody
fixed={fixed}
columns={columns}
expander={expander}
getRowKey={getRowKey}
isAnyColumnsFixed={isAnyColumnsFixed}
/>
);

if (fixed && columns.length) {
let refName: string;
if (columns[0].fixed === 'left' || columns[0].fixed === true) {
refName = 'fixedColumnsBodyLeft';
} else if (columns[0].fixed === 'right') {
refName = 'fixedColumnsBodyRight';
if (fixed && columns.length) {
let refName: string;
if (columns[0].fixed === 'left' || columns[0].fixed === true) {
refName = 'fixedColumnsBodyLeft';
} else if (columns[0].fixed === 'right') {
refName = 'fixedColumnsBodyRight';
}
delete bodyStyle.overflowX;
delete bodyStyle.overflowY;
return (
<div key="bodyTable" className={`${prefixCls}-body-outer`} style={{ ...bodyStyle }}>
<div
className={`${prefixCls}-body-inner`}
style={innerBodyStyle}
ref={saveRef(refName)}
onWheel={handleWheel}
onScroll={handleBodyScroll}
>
{baseTable}
</div>
</div>
);
}
delete bodyStyle.overflowX;
delete bodyStyle.overflowY;

// Should provides `tabIndex` if use scroll to enable keyboard scroll
const useTabIndex = scroll && (scroll.x || scroll.y);

return (
<div key="bodyTable" className={`${prefixCls}-body-outer`} style={{ ...bodyStyle }}>
<div
className={`${prefixCls}-body-inner`}
style={innerBodyStyle}
ref={saveRef(refName)}
onWheel={handleWheel}
onScroll={handleBodyScroll}
>
{baseTable}
</div>
<div
tabIndex={useTabIndex ? -1 : undefined}
key="bodyTable"
className={`${prefixCls}-body`}
style={bodyStyle}
ref={saveRef('bodyTable')}
onWheel={handleWheel}
onScroll={handleBodyScroll}
>
{baseTable}
</div>
);
}

// Should provides `tabIndex` if use scroll to enable keyboard scroll
const useTabIndex = scroll && (scroll.x || scroll.y);

return (
<div
tabIndex={useTabIndex ? -1 : undefined}
key="bodyTable"
className={`${prefixCls}-body`}
style={bodyStyle}
ref={saveRef('bodyTable')}
onWheel={handleWheel}
onScroll={handleBodyScroll}
>
{baseTable}
</div>
);
}

BodyTable.contextTypes = {
table: PropTypes.any,
};
67 changes: 34 additions & 33 deletions src/ColGroup.tsx
View file
Open in desktop
Expand Up @@ -9,37 +9,38 @@ export interface ColGroupProps {
columns?: ColumnType[];
}

const ColGroup: React.FC<ColGroupProps> = (props, { table }) => {
const { prefixCls, expandIconAsCell } = table.props;
const { fixed } = props;

let cols: React.ReactElement[] = [];

if (expandIconAsCell && fixed !== 'right') {
cols.push(<col className={`${prefixCls}-expand-icon-col`} key="rc-table-expand-icon-col" />);
}

let leafColumns: InternalColumnType[];

if (fixed === 'left') {
leafColumns = table.columnManager.leftLeafColumns();
} else if (fixed === 'right') {
leafColumns = table.columnManager.rightLeafColumns();
} else {
leafColumns = table.columnManager.leafColumns();
export default class ColGroup extends React.PureComponent<ColGroupProps> {
static contextTypes = {
table: PropTypes.any,
};

render() {
const { prefixCls, expandIconAsCell } = this.context.table.props;
const { fixed } = this.props;

let cols: React.ReactElement[] = [];

if (expandIconAsCell && fixed !== 'right') {
cols.push(<col className={`${prefixCls}-expand-icon-col`} key="rc-table-expand-icon-col" />);
}

let leafColumns: InternalColumnType[];

if (fixed === 'left') {
leafColumns = this.context.table.columnManager.leftLeafColumns();
} else if (fixed === 'right') {
leafColumns = this.context.table.columnManager.rightLeafColumns();
} else {
leafColumns = this.context.table.columnManager.leafColumns();
}

cols = cols.concat(
leafColumns.map(({ key, dataIndex, width, [INTERNAL_COL_DEFINE]: additionalProps }) => {
const mergedKey = key !== undefined ? key : dataIndex;
return <col key={mergedKey} style={{ width, minWidth: width }} {...additionalProps} />;
}),
);

return <colgroup>{cols}</colgroup>;
}
cols = cols.concat(
leafColumns.map(({ key, dataIndex, width, [INTERNAL_COL_DEFINE]: additionalProps }) => {
const mergedKey = key !== undefined ? key : dataIndex;
return <col key={mergedKey} style={{ width, minWidth: width }} {...additionalProps} />;
}),
);

return <colgroup>{cols}</colgroup>;
};

ColGroup.contextTypes = {
table: PropTypes.any,
};

export default ColGroup;
}
96 changes: 49 additions & 47 deletions src/HeadTable.tsx
View file
Open in desktop
Expand Up @@ -13,56 +13,58 @@ export interface HeadTableProps {
expander: Expander;
}

export default function HeadTable(props: HeadTableProps, { table }) {
const { prefixCls, scroll, showHeader } = table.props;
const { columns, fixed, tableClassName, handleBodyScrollLeft, expander } = props;
const { saveRef } = table;
let { useFixedHeader } = table.props;
const headStyle: React.CSSProperties = {};
const scrollbarWidth = measureScrollbar({ direction: 'vertical' });
export default class HeadTable extends React.PureComponent<HeadTableProps> {
static contextTypes = {
table: PropTypes.any,
};

if (scroll.y) {
useFixedHeader = true;
// https://github.com/ant-design/ant-design/issues/17051
const scrollbarWidthOfHeader = measureScrollbar({ direction: 'horizontal', prefixCls });
// Add negative margin bottom for scroll bar overflow bug
if (scrollbarWidthOfHeader > 0 && !fixed) {
headStyle.marginBottom = `-${scrollbarWidthOfHeader}px`;
headStyle.paddingBottom = '0px';
// https://github.com/ant-design/ant-design/pull/19986
headStyle.minWidth = `${scrollbarWidth}px`;
render() {
const { prefixCls, scroll, showHeader } = this.context.table.props;
const { columns, fixed, tableClassName, handleBodyScrollLeft, expander } = this.props;
const { saveRef } = this.context.table;
let { useFixedHeader } = this.context.table.props;
const headStyle: React.CSSProperties = {};
const scrollbarWidth = measureScrollbar({ direction: 'vertical' });

if (scroll.y) {
useFixedHeader = true;
// https://github.com/ant-design/ant-design/issues/17051
headStyle.overflowX = 'scroll';
headStyle.overflowY = scrollbarWidth === 0 ? 'hidden' : 'scroll';
const scrollbarWidthOfHeader = measureScrollbar({ direction: 'horizontal', prefixCls });
// Add negative margin bottom for scroll bar overflow bug
if (scrollbarWidthOfHeader > 0 && !fixed) {
headStyle.marginBottom = `-${scrollbarWidthOfHeader}px`;
headStyle.paddingBottom = '0px';
// https://github.com/ant-design/ant-design/pull/19986
headStyle.minWidth = `${scrollbarWidth}px`;
// https://github.com/ant-design/ant-design/issues/17051
headStyle.overflowX = 'scroll';
headStyle.overflowY = scrollbarWidth === 0 ? 'hidden' : 'scroll';
}
}
}

if (!useFixedHeader || !showHeader) {
return null;
}
if (!useFixedHeader || !showHeader) {
return null;
}

return (
<div
key="headTable"
ref={fixed ? null : saveRef('headTable')}
className={classNames(`${prefixCls}-header`, {
[`${prefixCls}-hide-scrollbar`]: scrollbarWidth > 0,
})}
style={headStyle}
onScroll={handleBodyScrollLeft}
>
<BaseTable
tableClassName={tableClassName}
hasHead
hasBody={false}
fixed={fixed}
columns={columns}
expander={expander}
/>
</div>
);
return (
<div
key="headTable"
ref={fixed ? null : saveRef('headTable')}
className={classNames(`${prefixCls}-header`, {
[`${prefixCls}-hide-scrollbar`]: scrollbarWidth > 0,
})}
style={headStyle}
onScroll={handleBodyScrollLeft}
>
<BaseTable
tableClassName={tableClassName}
hasHead
hasBody={false}
fixed={fixed}
columns={columns}
expander={expander}
/>
</div>
);
}
}

HeadTable.contextTypes = {
table: PropTypes.any,
};