mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

fix(grid): justify and align properties are not reactive for Row (#39704)

Browse Source 
Co-authored-by: 陈小祥 <xiaoxiang930601@163.com>
This commit is contained in:
ChenXiao 2022-12-21 14:16:41 +08:00 committed by GitHub
parent b5f27c8982
commit e5c60c89b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/grid/__tests__/index.test.tsx
View File

@ -1,9 +1,10 @@
import React from 'react';
import React, { useState } from 'react';
import { act } from 'react-dom/test-utils';
import { Col, Row } from '..';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import useBreakpoint from '../hooks/useBreakpoint';
import { render } from '../../../tests/utils';
import { render, fireEvent } from '../../../tests/utils';
// Mock for `responsiveObserve` to test `unsubscribe` call
jest.mock('../../_util/responsiveObserve', () => {
@ -209,4 +210,26 @@ describe('Grid', () => {
const { container: container3 } = render(<Row justify={{ lg: 'center' }} />);
expect(container3.innerHTML).not.toContain('ant-row-center');
});
// https://github.com/ant-design/ant-design/issues/39690
it('Justify and align properties should reactive for Row', () => {
const ReactiveTest = () => {
const [justify, setjustify] = useState<any>('start');
return (
<>
<Row justify={justify} align="bottom">
<div>button1</div>
<div>button</div>
</Row>
<span onClick={() => setjustify('end')} />
</>
);
};
const { container } = render(<ReactiveTest />);
expect(container.innerHTML).toContain('ant-row-start');
act(() => {
fireEvent.click(container.querySelector('span')!);
});
expect(container.innerHTML).toContain('ant-row-end');
});
});

3
components/grid/row.tsx
View File

@ -39,6 +39,9 @@ function useMergePropByScreen(oriProp: RowProps['align'] | RowProps['justify'],
const [prop, setProp] = React.useState(typeof oriProp === 'string' ? oriProp : '');
const clacMergeAlignOrJustify = () => {
if (typeof oriProp === 'string') {
setProp(oriProp);
}
if (typeof oriProp !== 'object') {
return;
}