fix: DatePicker PurePanel placement (#41901)

* fix: DatePicker PurePanel placement

* chore: fix type
This commit is contained in:
二货爱吃白萝卜 2023-04-19 23:07:47 +08:00 committed by GitHub
parent fdb1a4a837
commit 5ea9ea8e6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 17 deletions

View File

@ -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>
); );

View File

@ -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 & {

View File

@ -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,