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

fix(Typography): fix no change when switching locale (#51453)

Browse Source 
* fix(Typography): fix ConfigProvider locale settings

* add demo

* add test case

* Revert "add demo"

This reverts commit cf1d757f31.
This commit is contained in:
thinkasany 2024-11-01 16:53:48 +08:00 committed by GitHub
parent 3f8943e274
commit eb219058c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/typography/Base/index.tsx
View File

@ -462,7 +462,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
width={ellipsisWidth}
onEllipsis={onJsEllipsis}
expanded={expanded}
miscDeps={[copied, expanded, copyLoading, enableEdit, enableCopy]}
miscDeps={[copied, expanded, copyLoading, enableEdit, enableCopy, textLocale]}
>
{(node, canEllipsis) =>
wrapperDecorations(

50
components/typography/__tests__/ellipsis.test.tsx
View File

@ -11,7 +11,10 @@ import {
} from '../../../tests/utils';
import type { EllipsisConfig } from '../Base';
import Base from '../Base';
import ConfigProvider from '../../config-provider';
import type { ConfigProviderProps } from '../../config-provider';
import zhCN from '../../locale/zh_CN';
type Locale = ConfigProviderProps['locale'];
jest.mock('copy-to-clipboard');
jest.mock('../../_util/styleChecker', () => ({
@ -644,4 +647,49 @@ describe('Typography.Ellipsis', () => {
</Base>,
);
});
it('Switch locale', async () => {
const ref = React.createRef<HTMLElement>();
const App = () => {
const [locale, setLocal] = React.useState<Locale>();
return (
<ConfigProvider locale={locale}>
<div>
<button type="button" onClick={() => setLocal(zhCN)}>
zhcn
</button>
<Base
ellipsis={{
rows: 1,
expandable: 'collapsible',
expanded: false,
}}
ref={ref}
>
{'Ant Design, a design language for background applications, is refined by Ant UED Team.'.repeat(
20,
)}
</Base>
</div>
</ConfigProvider>
);
};
const { container } = render(<App />);
triggerResize(ref.current!);
await waitFakeTimer();
const expandButton = container.querySelector('.ant-typography-expand');
expect(expandButton).toHaveTextContent('Expand');
const button = container.querySelector('button')!;
fireEvent.click(button);
triggerResize(ref.current!);
await waitFakeTimer();
const expandButtonCN = container.querySelector('.ant-typography-expand');
expect(expandButtonCN).toHaveTextContent('展开');
expect(expandButtonCN).toBeInTheDocument();
});
});