mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix: ConfigProvider getPopupContainer invalid (#23594)

Browse Source 
* fix: ConfigProvider getPopupContainer invalid

* slider getPopupContainer

* Create container.test.js

* Update container.test.js
This commit is contained in:
Tom Xu 2020-04-25 22:46:21 +08:00 committed by GitHub
parent 8f30a14790
commit 8cdf1c017a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 74 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/config-provider/__tests__/container.test.js Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import { mount } from 'enzyme';
import ConfigProvider from '..';
import DatePicker from '../../date-picker';
import Slider from '../../slider';
describe('ConfigProvider.GetPopupContainer', () => {
it('Datepicker', () => {
const getPopupContainer = jest.fn(node => node.parentNode);
mount(
<ConfigProvider getPopupContainer={getPopupContainer}>
<DatePicker open />
</ConfigProvider>,
);
expect(getPopupContainer).toHaveBeenCalled();
});
it('Slider', () => {
const getPopupContainer = jest.fn(node => node.parentNode);
const wrapper = mount(
<ConfigProvider getPopupContainer={getPopupContainer}>
<Slider />
</ConfigProvider>,
);
wrapper.find('.ant-slider-handle').first().simulate('mouseenter');
expect(getPopupContainer).toHaveBeenCalled();
});
});

4
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -49,9 +49,10 @@ export default function generateRangePicker<DateType>(
};
renderPicker = (locale: PickerLocale) => {
const { getPrefixCls, direction } = this.context;
const { getPrefixCls, direction, getPopupContainer } = this.context;
const {
prefixCls: customizePrefixCls,
getPopupContainer: customGetPopupContainer,
className,
size: customizeSize,
bordered = true,
@ -94,6 +95,7 @@ export default function generateRangePicker<DateType>(
{...additionalOverrideProps}
locale={locale!.lang}
prefixCls={prefixCls}
getPopupContainer={customGetPopupContainer || getPopupContainer}
generateConfig={generateConfig}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}

4
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -62,9 +62,10 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
};
renderPicker = (locale: PickerLocale) => {
const { getPrefixCls, direction } = this.context;
const { getPrefixCls, direction, getPopupContainer } = this.context;
const {
prefixCls: customizePrefixCls,
getPopupContainer: customizeGetPopupContainer,
className,
size: customizeSize,
bordered = true,
@ -115,6 +116,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
[`${prefixCls}-borderless`]: !bordered,
})}
prefixCls={prefixCls}
getPopupContainer={customizeGetPopupContainer || getPopupContainer}
generateConfig={generateConfig}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}

12
components/slider/index.tsx
View File

@ -5,7 +5,7 @@ import RcHandle from 'rc-slider/lib/Handle';
import classNames from 'classnames';
import { TooltipPlacement } from '../tooltip';
import SliderTooltip from './SliderTooltip';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
export interface SliderMarks {
[key: number]:
@ -60,6 +60,7 @@ export interface SliderProps {
export type Visibles = { [index: number]: boolean };
const Slider = React.forwardRef<unknown, SliderProps>((props, ref) => {
const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext);
const [visibles, setVisibles] = React.useState<Visibles>({});
const toggleTooltipVisible = (index: number, visible: boolean) => {
@ -91,7 +92,7 @@ const Slider = React.forwardRef<unknown, SliderProps>((props, ref) => {
transitionName="zoom-down"
key={index}
overlayClassName={`${prefixCls}-tooltip`}
getPopupContainer={getTooltipPopupContainer || (() => document.body)}
getPopupContainer={getTooltipPopupContainer || getPopupContainer || (() => document.body)}
>
<RcHandle
{...restProps}
@ -102,8 +103,6 @@ const Slider = React.forwardRef<unknown, SliderProps>((props, ref) => {
</SliderTooltip>
);
};
const renderSlider = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
const {
prefixCls: customizePrefixCls,
tooltipPrefixCls: customizeTooltipPrefixCls,
@ -154,11 +153,10 @@ const Slider = React.forwardRef<unknown, SliderProps>((props, ref) => {
tooltipPrefixCls={tooltipPrefixCls}
/>
);
};
return <ConfigConsumer>{renderSlider}</ConfigConsumer>;
});
Slider.displayName = 'Slider';
Slider.defaultProps = {
tipFormatter(value: number) {
return typeof value === 'number' ? value.toString() : '';