mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-23 18:50:06 +08:00
fix(Table): preserve custom event handlers in row selection (#51661)
This commit is contained in:
parent
fb52fbbfd0
commit
4b186714d0
@ -1905,4 +1905,76 @@ describe('Table.rowSelection', () => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should trigger both custom and internal checkbox events', () => {
|
||||||
|
const onClickMock = jest.fn();
|
||||||
|
const onChangeMock = jest.fn();
|
||||||
|
|
||||||
|
const getCheckboxProps = () => ({
|
||||||
|
onClick: onClickMock,
|
||||||
|
onChange: onChangeMock,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { container } = render(
|
||||||
|
<Table
|
||||||
|
rowSelection={{
|
||||||
|
type: 'checkbox',
|
||||||
|
getCheckboxProps,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
const firstRowCheckbox = container.querySelector('tbody tr:first-child input[type="checkbox"]');
|
||||||
|
expect(firstRowCheckbox).toBeTruthy();
|
||||||
|
|
||||||
|
fireEvent.click(firstRowCheckbox!);
|
||||||
|
|
||||||
|
expect(onClickMock).toHaveBeenCalled();
|
||||||
|
expect(onClickMock.mock.calls.length).toBe(1);
|
||||||
|
|
||||||
|
expect(onChangeMock).toHaveBeenCalled();
|
||||||
|
expect(onChangeMock.mock.calls.length).toBe(1);
|
||||||
|
|
||||||
|
const changeEvent = onChangeMock.mock.calls[0][0];
|
||||||
|
expect(changeEvent).toHaveProperty('target');
|
||||||
|
expect(changeEvent.target).toHaveProperty('checked');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should trigger both custom and internal radio events', () => {
|
||||||
|
const onClickMock = jest.fn();
|
||||||
|
const onChangeMock = jest.fn();
|
||||||
|
|
||||||
|
const getCheckboxProps = () => ({
|
||||||
|
onClick: onClickMock,
|
||||||
|
onChange: onChangeMock,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { container } = render(
|
||||||
|
<Table
|
||||||
|
rowSelection={{
|
||||||
|
type: 'radio',
|
||||||
|
getCheckboxProps,
|
||||||
|
}}
|
||||||
|
columns={columns}
|
||||||
|
dataSource={data}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
const firstRowRadio = container.querySelector('tbody tr:first-child input[type="radio"]');
|
||||||
|
expect(firstRowRadio).toBeTruthy();
|
||||||
|
|
||||||
|
fireEvent.click(firstRowRadio!);
|
||||||
|
|
||||||
|
expect(onClickMock).toHaveBeenCalled();
|
||||||
|
expect(onClickMock.mock.calls.length).toBe(1);
|
||||||
|
|
||||||
|
expect(onChangeMock).toHaveBeenCalled();
|
||||||
|
expect(onChangeMock.mock.calls.length).toBe(1);
|
||||||
|
|
||||||
|
const changeEvent = onChangeMock.mock.calls[0][0];
|
||||||
|
expect(changeEvent).toHaveProperty('target');
|
||||||
|
expect(changeEvent.target).toHaveProperty('checked');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -496,17 +496,21 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
|
|||||||
renderCell = (_, record, index) => {
|
renderCell = (_, record, index) => {
|
||||||
const key = getRowKey(record, index);
|
const key = getRowKey(record, index);
|
||||||
const checked = keySet.has(key);
|
const checked = keySet.has(key);
|
||||||
|
const checkboxProps = checkboxPropsMap.get(key);
|
||||||
return {
|
return {
|
||||||
node: (
|
node: (
|
||||||
<Radio
|
<Radio
|
||||||
{...checkboxPropsMap.get(key)}
|
{...checkboxProps}
|
||||||
checked={checked}
|
checked={checked}
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
checkboxProps?.onClick?.(e);
|
||||||
|
}}
|
||||||
onChange={(event) => {
|
onChange={(event) => {
|
||||||
if (!keySet.has(key)) {
|
if (!keySet.has(key)) {
|
||||||
triggerSingleSelection(key, true, [key], event.nativeEvent);
|
triggerSingleSelection(key, true, [key], event.nativeEvent);
|
||||||
}
|
}
|
||||||
|
checkboxProps?.onChange?.(event);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
@ -538,8 +542,12 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
|
|||||||
indeterminate={mergedIndeterminate}
|
indeterminate={mergedIndeterminate}
|
||||||
checked={checked}
|
checked={checked}
|
||||||
skipGroup
|
skipGroup
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => {
|
||||||
onChange={({ nativeEvent }) => {
|
e.stopPropagation();
|
||||||
|
checkboxProps?.onClick?.(e);
|
||||||
|
}}
|
||||||
|
onChange={(event) => {
|
||||||
|
const { nativeEvent } = event;
|
||||||
const { shiftKey } = nativeEvent;
|
const { shiftKey } = nativeEvent;
|
||||||
const currentSelectedIndex = recordKeys.findIndex((item) => item === key);
|
const currentSelectedIndex = recordKeys.findIndex((item) => item === key);
|
||||||
const isMultiple = derivedSelectedKeys.some((item) => recordKeys.includes(item));
|
const isMultiple = derivedSelectedKeys.some((item) => recordKeys.includes(item));
|
||||||
@ -595,6 +603,7 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
|
|||||||
} else {
|
} else {
|
||||||
updatePrevSelectedIndex(currentSelectedIndex);
|
updatePrevSelectedIndex(currentSelectedIndex);
|
||||||
}
|
}
|
||||||
|
checkboxProps?.onChange?.(event);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
|
Loading…
Reference in New Issue
Block a user