From e8b816e68a64b1155947aa6727173db33868e2c0 Mon Sep 17 00:00:00 2001 From: TrickyPi <33021497+TrickyPi@users.noreply.github.com> Date: Wed, 20 Apr 2022 12:00:16 +0800 Subject: [PATCH 1/2] fix(Typography): change less function to less variable in danger style (#35113) --- components/typography/style/index.less | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/components/typography/style/index.less b/components/typography/style/index.less index a9cd963663..4469781712 100644 --- a/components/typography/style/index.less +++ b/components/typography/style/index.less @@ -24,9 +24,12 @@ color: @error-color; a&:active, - a&:focus, + a&:focus { + color: @error-color-active; + } + a&:hover { - color: ~`colorPalette('@{error-color}', 5) `; + color: @error-color-hover; } } From b666bfd3d1910c274fd0a9149172c692fc578daf Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 20 Apr 2022 12:13:11 +0800 Subject: [PATCH 2/2] refactor: wrap Spin with FC (#35114) * refactor: wrap Spin with FC * chore: code clean --- components/spin/__tests__/delay.test.js | 20 +++++++--- components/spin/__tests__/index.test.js | 7 ++-- components/spin/index.tsx | 52 ++++++++++++++++++------- 3 files changed, 56 insertions(+), 23 deletions(-) diff --git a/components/spin/__tests__/delay.test.js b/components/spin/__tests__/delay.test.js index beeb347534..9ecc0708a9 100644 --- a/components/spin/__tests__/delay.test.js +++ b/components/spin/__tests__/delay.test.js @@ -1,8 +1,14 @@ import React from 'react'; import { mount } from 'enzyme'; +// eslint-disable-next-line import/no-named-as-default +import { render } from '@testing-library/react'; +import debounce from 'lodash/debounce'; import Spin from '..'; import { sleep } from '../../../tests/utils'; +jest.mock('lodash/debounce'); +debounce.mockImplementation(jest.requireActual('lodash/debounce')); + describe('delay spinning', () => { it("should render with delay when it's mounted with spinning=true and delay", () => { const wrapper = mount(); @@ -23,11 +29,13 @@ describe('delay spinning', () => { }); it('should cancel debounce function when unmount', async () => { - const wrapper = mount(); - const spy = jest.spyOn(wrapper.find(Spin).instance().updateSpinning, 'cancel'); - expect(wrapper.find(Spin).instance().updateSpinning.cancel).toEqual(expect.any(Function)); - expect(spy).not.toHaveBeenCalled(); - wrapper.unmount(); - expect(spy).toHaveBeenCalled(); + const debouncedFn = jest.fn(); + const cancel = jest.fn(); + debouncedFn.cancel = cancel; + debounce.mockReturnValueOnce(debouncedFn); + const { unmount } = render(); + expect(cancel).not.toHaveBeenCalled(); + unmount(); + expect(cancel).toHaveBeenCalled(); }); }); diff --git a/components/spin/__tests__/index.test.js b/components/spin/__tests__/index.test.js index 64ca76d7a7..27d5250baf 100644 --- a/components/spin/__tests__/index.test.js +++ b/components/spin/__tests__/index.test.js @@ -1,9 +1,10 @@ import React from 'react'; import { mount } from 'enzyme'; +// eslint-disable-next-line import/no-named-as-default +import { render } from '@testing-library/react'; import Spin from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; -import { render } from '../../../tests/utils'; describe('Spin', () => { mountTest(Spin); @@ -27,9 +28,9 @@ describe('Spin', () => { it('should be controlled by spinning', () => { const { container, rerender } = render(); - expect(container.querySelector('.ant-spin')).not.toHaveClass('ant-spin-spinning'); + expect(container.querySelector('.ant-spin-spinning')).toBeFalsy(); rerender(); - expect(container.querySelector('.ant-spin')).toHaveClass('ant-spin-spinning'); + expect(container.querySelector('.ant-spin-spinning')).toBeTruthy(); }); it('if indicator set null should not be render default indicator', () => { diff --git a/components/spin/index.tsx b/components/spin/index.tsx index 32d115b8d7..08b223dbcc 100644 --- a/components/spin/index.tsx +++ b/components/spin/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; import debounce from 'lodash/debounce'; -import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +import { ConfigConsumer, ConfigConsumerProps, ConfigContext } from '../config-provider'; import { tuple } from '../_util/type'; import { isValidElement, cloneElement } from '../_util/reactNode'; @@ -23,6 +23,14 @@ export interface SpinProps { children?: React.ReactNode; } +export interface SpinClassProps extends SpinProps { + spinPrefixCls: string; +} + +export type SpinFCType = React.FC & { + setDefaultIndicator: (indicator: React.ReactNode) => void; +}; + export interface SpinState { spinning?: boolean; notCssAnimationSupported?: boolean; @@ -31,7 +39,7 @@ export interface SpinState { // Render indicator let defaultIndicator: React.ReactNode = null; -function renderIndicator(prefixCls: string, props: SpinProps): React.ReactNode { +function renderIndicator(prefixCls: string, props: SpinClassProps): React.ReactNode { const { indicator } = props; const dotClassName = `${prefixCls}-dot`; @@ -66,20 +74,16 @@ function shouldDelay(spinning?: boolean, delay?: number): boolean { return !!spinning && !!delay && !isNaN(Number(delay)); } -class Spin extends React.Component { +class Spin extends React.Component { static defaultProps = { spinning: true, size: 'default' as SpinSize, wrapperClassName: '', }; - static setDefaultIndicator(indicator: React.ReactNode) { - defaultIndicator = indicator; - } - originalUpdateSpinning: () => void; - constructor(props: SpinProps) { + constructor(props: SpinClassProps) { super(props); const { spinning, delay } = props; @@ -104,7 +108,7 @@ class Spin extends React.Component { this.cancelExistingSpin(); } - debouncifyUpdateSpinning = (props?: SpinProps) => { + debouncifyUpdateSpinning = (props?: SpinClassProps) => { const { delay } = props || this.props; if (delay) { this.cancelExistingSpin(); @@ -131,9 +135,9 @@ class Spin extends React.Component { return !!(this.props && typeof this.props.children !== 'undefined'); } - renderSpin = ({ getPrefixCls, direction }: ConfigConsumerProps) => { + renderSpin = ({ direction }: ConfigConsumerProps) => { const { - prefixCls: customizePrefixCls, + spinPrefixCls: prefixCls, className, size, tip, @@ -143,7 +147,6 @@ class Spin extends React.Component { } = this.props; const { spinning } = this.state; - const prefixCls = getPrefixCls('spin', customizePrefixCls); const spinClassName = classNames( prefixCls, { @@ -157,7 +160,7 @@ class Spin extends React.Component { ); // fix https://fb.me/react-unknown-prop - const divProps = omit(restProps, ['spinning', 'delay', 'indicator']); + const divProps = omit(restProps, ['spinning', 'delay', 'indicator', 'prefixCls']); const spinElement = (
{ } } -export default Spin; +const SpinFC: SpinFCType = (props: SpinProps) => { + const { prefixCls: customizePrefixCls } = props; + const { getPrefixCls } = React.useContext(ConfigContext); + + const spinPrefixCls = getPrefixCls('spin', customizePrefixCls); + + const spinClassProps: SpinClassProps = { + ...props, + spinPrefixCls, + }; + return ; +}; + +SpinFC.setDefaultIndicator = (indicator: React.ReactNode) => { + defaultIndicator = indicator; +}; + +if (process.env.NODE_ENV !== 'production') { + SpinFC.displayName = 'Spin'; +} + +export default SpinFC;