mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
fix: DatePicker PurePanel placement (#41901)
* fix: DatePicker PurePanel placement * chore: fix type
This commit is contained in:
parent
fdb1a4a837
commit
5ea9ea8e6a
@ -11,9 +11,12 @@ export interface BaseProps {
|
|||||||
export default function genPurePanel<ComponentProps extends BaseProps>(
|
export default function genPurePanel<ComponentProps extends BaseProps>(
|
||||||
Component: any,
|
Component: any,
|
||||||
defaultPrefixCls?: string,
|
defaultPrefixCls?: string,
|
||||||
getDropdownCls?: (prefixCls: string) => string,
|
getDropdownCls?: null | ((prefixCls: string) => string),
|
||||||
|
postProps?: (props: ComponentProps) => ComponentProps,
|
||||||
) {
|
) {
|
||||||
return function PurePanel(props: Omit<ComponentProps, 'open' | 'visible'> & { open?: boolean }) {
|
type WrapProps = Omit<ComponentProps, 'open' | 'visible'> & { open?: boolean };
|
||||||
|
|
||||||
|
return function PurePanel(props: WrapProps) {
|
||||||
const { prefixCls: customizePrefixCls, style } = props;
|
const { prefixCls: customizePrefixCls, style } = props;
|
||||||
|
|
||||||
const holderRef = React.useRef<HTMLDivElement>(null);
|
const holderRef = React.useRef<HTMLDivElement>(null);
|
||||||
@ -56,6 +59,21 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
|
|||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
let mergedProps: WrapProps = {
|
||||||
|
...props,
|
||||||
|
style: {
|
||||||
|
...style,
|
||||||
|
margin: 0,
|
||||||
|
},
|
||||||
|
open,
|
||||||
|
visible: open,
|
||||||
|
getPopupContainer: () => holderRef.current!,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (postProps) {
|
||||||
|
mergedProps = postProps(mergedProps as ComponentProps);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ConfigProvider
|
<ConfigProvider
|
||||||
theme={{
|
theme={{
|
||||||
@ -75,16 +93,7 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
|
|||||||
minWidth: popupWidth,
|
minWidth: popupWidth,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Component
|
<Component {...mergedProps} />
|
||||||
{...props}
|
|
||||||
style={{
|
|
||||||
...style,
|
|
||||||
margin: 0,
|
|
||||||
}}
|
|
||||||
open={open}
|
|
||||||
visible={open}
|
|
||||||
getPopupContainer={() => holderRef.current!}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
);
|
);
|
||||||
|
@ -2,11 +2,12 @@ import type { Dayjs } from 'dayjs';
|
|||||||
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
|
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
|
||||||
import genPurePanel from '../_util/PurePanel';
|
import genPurePanel from '../_util/PurePanel';
|
||||||
import type {
|
import type {
|
||||||
|
RangePickerProps as BaseRangePickerProps,
|
||||||
PickerDateProps,
|
PickerDateProps,
|
||||||
PickerProps,
|
PickerProps,
|
||||||
RangePickerProps as BaseRangePickerProps,
|
|
||||||
} from './generatePicker';
|
} from './generatePicker';
|
||||||
import generatePicker from './generatePicker';
|
import generatePicker from './generatePicker';
|
||||||
|
import { transPlacement2DropdownAlign } from './util';
|
||||||
|
|
||||||
export type DatePickerProps = PickerProps<Dayjs>;
|
export type DatePickerProps = PickerProps<Dayjs>;
|
||||||
export type MonthPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'>;
|
export type MonthPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'>;
|
||||||
@ -15,11 +16,23 @@ export type RangePickerProps = BaseRangePickerProps<Dayjs>;
|
|||||||
|
|
||||||
const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
|
const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
|
||||||
|
|
||||||
|
function postPureProps(props: DatePickerProps) {
|
||||||
|
const dropdownAlign = transPlacement2DropdownAlign(props.direction, props.placement);
|
||||||
|
|
||||||
|
dropdownAlign.overflow!.adjustY = false;
|
||||||
|
dropdownAlign.overflow!.adjustX = false;
|
||||||
|
|
||||||
|
return {
|
||||||
|
...props,
|
||||||
|
dropdownAlign,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
// We don't care debug panel
|
// We don't care debug panel
|
||||||
/* istanbul ignore next */
|
/* istanbul ignore next */
|
||||||
const PurePanel = genPurePanel(DatePicker, 'picker');
|
const PurePanel = genPurePanel(DatePicker, 'picker', null, postPureProps);
|
||||||
(DatePicker as any)._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
|
(DatePicker as any)._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
|
||||||
const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'picker');
|
const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'picker', null, postPureProps);
|
||||||
(DatePicker as any)._InternalRangePanelDoNotUseOrYouWillBeFired = PureRangePanel;
|
(DatePicker as any)._InternalRangePanelDoNotUseOrYouWillBeFired = PureRangePanel;
|
||||||
|
|
||||||
export default DatePicker as typeof DatePicker & {
|
export default DatePicker as typeof DatePicker & {
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
|
import type { AlignType } from '@rc-component/trigger';
|
||||||
import type { PickerMode } from 'rc-picker/lib/interface';
|
import type { PickerMode } from 'rc-picker/lib/interface';
|
||||||
import type { DirectionType } from '../config-provider';
|
|
||||||
import type { SelectCommonPlacement } from '../_util/motion';
|
import type { SelectCommonPlacement } from '../_util/motion';
|
||||||
|
import type { DirectionType } from '../config-provider';
|
||||||
import type { PickerLocale } from './generatePicker';
|
import type { PickerLocale } from './generatePicker';
|
||||||
|
|
||||||
export function getPlaceholder(
|
export function getPlaceholder(
|
||||||
@ -60,7 +61,7 @@ export function getRangePlaceholder(
|
|||||||
export function transPlacement2DropdownAlign(
|
export function transPlacement2DropdownAlign(
|
||||||
direction: DirectionType,
|
direction: DirectionType,
|
||||||
placement?: SelectCommonPlacement,
|
placement?: SelectCommonPlacement,
|
||||||
) {
|
): AlignType {
|
||||||
const overflow = {
|
const overflow = {
|
||||||
adjustX: 1,
|
adjustX: 1,
|
||||||
adjustY: 1,
|
adjustY: 1,
|
||||||
|
Loading…
Reference in New Issue
Block a user