diff --git a/src/PickerPanel/PanelHeader.tsx b/src/PickerPanel/PanelHeader.tsx index 4abeec235..6233ec4dd 100644 --- a/src/PickerPanel/PanelHeader.tsx +++ b/src/PickerPanel/PanelHeader.tsx @@ -32,8 +32,13 @@ function PanelHeader(props: HeaderProps) { const headerPrefixCls = `${prefixCls}-header`; - const { hidePrev, hideNext } = React.useContext(PickerHackContext); + const { hidePrev, hideNext, hideHeader } = React.useContext(PickerHackContext); + if (hideHeader) { + return null; + } + + // ========================= Render ========================= return (
{onSuperOffset && ( diff --git a/src/PickerPanel/context.ts b/src/PickerPanel/context.ts index a94d4ca87..9a42cd593 100644 --- a/src/PickerPanel/context.ts +++ b/src/PickerPanel/context.ts @@ -96,6 +96,7 @@ export function useInfo( export interface PickerHackContextProps { hidePrev?: boolean; hideNext?: boolean; + hideHeader?: boolean; onCellDblClick?: () => void; } diff --git a/src/PickerPanel/index.tsx b/src/PickerPanel/index.tsx index ea067b06b..688e84cfa 100644 --- a/src/PickerPanel/index.tsx +++ b/src/PickerPanel/index.tsx @@ -19,6 +19,7 @@ import PickerContext from '../PickerInput/context'; import useCellRender from '../PickerInput/hooks/useCellRender'; import { isSame } from '../utils/dateUtil'; import { pickProps, toArray } from '../utils/miscUtil'; +import { PickerHackContext } from './context'; import DatePanel from './DatePanel'; import DateTimePanel from './DateTimePanel'; import DecadePanel from './DecadePanel'; @@ -110,6 +111,9 @@ export interface BasePickerPanelProps // Components components?: Components; + + /** @private This is internal usage. Do not use in your production env */ + hideHeader?: boolean; } export interface SinglePickerPanelProps @@ -172,6 +176,8 @@ function PickerPanel( // Components components = {}, + + hideHeader, } = props; const mergedPrefixCls = React.useContext(PickerContext)?.prefixCls || prefixCls || 'rc-picker'; @@ -345,6 +351,13 @@ function PickerPanel( DefaultComponents[internalMode] || DatePanel) as typeof DatePanel; + // ======================== Context ========================= + const parentHackContext = React.useContext(PickerHackContext); + const pickerPanelContext = React.useMemo( + () => ({ ...parentHackContext, hideHeader }), + [parentHackContext, hideHeader], + ); + // ======================== Warnings ======================== if (process.env.NODE_ENV !== 'production') { warning( @@ -374,38 +387,40 @@ function PickerPanel( ]); return ( -
- { - setPickerValue(nextPickerValue, true); - }} - value={mergedValue[0]} - onSelect={onPanelValueSelect} - values={mergedValue} - // Render - cellRender={onInternalCellRender} - // Hover - hoverRangeValue={hoverRangeDate} - hoverValue={hoverValue} - /> -
+ +
+ { + setPickerValue(nextPickerValue, true); + }} + value={mergedValue[0]} + onSelect={onPanelValueSelect} + values={mergedValue} + // Render + cellRender={onInternalCellRender} + // Hover + hoverRangeValue={hoverRangeDate} + hoverValue={hoverValue} + /> +
+
); } diff --git a/tests/internal.spec.tsx b/tests/internal.spec.tsx new file mode 100644 index 000000000..e06c1dc50 --- /dev/null +++ b/tests/internal.spec.tsx @@ -0,0 +1,23 @@ +import { render } from '@testing-library/react'; +import React from 'react'; +import { DayPickerPanel, getMoment } from './util/commonUtil'; + +// Note: Props tested in this file is safe to remove when refactor +describe('Picker.Internal', () => { + beforeEach(() => { + jest.useFakeTimers().setSystemTime(getMoment('1990-09-03 00:00:00').valueOf()); + }); + + afterEach(() => { + jest.clearAllTimers(); + jest.useRealTimers(); + }); + + it('hideHeader', async () => { + const { container, rerender } = render(); + expect(container.querySelector('.rc-picker-header')).toBeTruthy(); + + rerender(); + expect(container.querySelector('.rc-picker-header')).toBeFalsy(); + }); +});