diff --git a/src/Picker.tsx b/src/Picker.tsx index 5f8cc41de..875c9ee2d 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -73,15 +73,18 @@ export interface PickerSharedProps extends React.AriaAttributes { export interface PickerBaseProps extends PickerSharedProps, - Omit, 'onChange'> {} + Omit, 'onChange' | 'hideHeader'> {} export interface PickerDateProps extends PickerSharedProps, - Omit, 'onChange'> {} + Omit, 'onChange' | 'hideHeader'> {} export interface PickerTimeProps extends PickerSharedProps, - Omit, 'onChange' | 'format'> {} + Omit< + PickerPanelTimeProps, + 'onChange' | 'format' | 'hideHeader' + > {} export type PickerProps = | PickerBaseProps diff --git a/src/PickerPanel.tsx b/src/PickerPanel.tsx index 69823954d..68f43d089 100644 --- a/src/PickerPanel.tsx +++ b/src/PickerPanel.tsx @@ -58,6 +58,9 @@ export interface PickerPanelSharedProps { onChange?: (value: DateType) => void; onPanelChange?: OnPanelChange; onMouseDown?: React.MouseEventHandler; + + /** @private This is internal usage. Do not use in your production env */ + hideHeader?: boolean; } export interface PickerPanelBaseProps @@ -112,6 +115,7 @@ function PickerPanel(props: PickerPanelProps) { showTime, showToday, renderExtraFooter, + hideHeader, onSelect, onChange, onPanelChange, @@ -130,9 +134,10 @@ function PickerPanel(props: PickerPanelProps) { } // ============================ State ============================= - const { operationRef, panelRef: panelDivRef } = React.useContext( - PanelContext, - ); + + const panelContext = React.useContext(PanelContext); + const { operationRef, panelRef: panelDivRef } = panelContext; + const { extraFooterSelections } = React.useContext(RangeContext); const panelRef = React.useRef({}); @@ -413,24 +418,32 @@ function PickerPanel(props: PickerPanelProps) { } return ( -
- {panelNode} - {extraFooter || todayNode || extraSelectionNode ? ( -
- {extraFooter} - {extraSelectionNode} - {todayNode} -
- ) : null} -
+
+ {panelNode} + {extraFooter || todayNode || extraSelectionNode ? ( +
+ {extraFooter} + {extraSelectionNode} + {todayNode} +
+ ) : null} +
+ ); } diff --git a/src/panels/DatePanel/DateHeader.tsx b/src/panels/DatePanel/DateHeader.tsx index 19c6228e8..ededfae33 100644 --- a/src/panels/DatePanel/DateHeader.tsx +++ b/src/panels/DatePanel/DateHeader.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import Header from '../Header'; import { Locale } from '../../interface'; import { GenerateConfig } from '../../generate'; +import PanelContext from '../../PanelContext'; export interface DateHeaderProps { prefixCls: string; @@ -31,6 +32,12 @@ function DateHeader(props: DateHeaderProps) { onYearClick, onMonthClick, } = props; + + const { hideHeader } = React.useContext(PanelContext); + if (hideHeader) { + return null; + } + const headerPrefixCls = `${prefixCls}-header`; const monthsLocale: string[] = diff --git a/src/panels/DecadePanel/DecadeHeader.tsx b/src/panels/DecadePanel/DecadeHeader.tsx index 6134c4f06..1d3ffdcea 100644 --- a/src/panels/DecadePanel/DecadeHeader.tsx +++ b/src/panels/DecadePanel/DecadeHeader.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import Header from '../Header'; import { GenerateConfig } from '../../generate'; import { DECADE_DISTANCE_COUNT } from '.'; +import PanelContext from '../../PanelContext'; export interface YearHeaderProps { prefixCls: string; @@ -20,6 +21,11 @@ function DecadeHeader(props: YearHeaderProps) { onPrevDecades, onNextDecades, } = props; + const { hideHeader } = React.useContext(PanelContext); + if (hideHeader) { + return null; + } + const headerPrefixCls = `${prefixCls}-header`; const yearNumber = generateConfig.getYear(viewDate); diff --git a/src/panels/MonthPanel/MonthHeader.tsx b/src/panels/MonthPanel/MonthHeader.tsx index 99f935413..15571ddaa 100644 --- a/src/panels/MonthPanel/MonthHeader.tsx +++ b/src/panels/MonthPanel/MonthHeader.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import Header from '../Header'; import { Locale } from '../../interface'; import { GenerateConfig } from '../../generate'; +import PanelContext from '../../PanelContext'; export interface MonthHeaderProps { prefixCls: string; @@ -24,6 +25,11 @@ function MonthHeader(props: MonthHeaderProps) { onPrevYear, onYearClick, } = props; + const { hideHeader } = React.useContext(PanelContext); + if (hideHeader) { + return null; + } + const headerPrefixCls = `${prefixCls}-header`; return ( diff --git a/src/panels/TimePanel/TimeHeader.tsx b/src/panels/TimePanel/TimeHeader.tsx index 9378cf7f0..b988463f7 100644 --- a/src/panels/TimePanel/TimeHeader.tsx +++ b/src/panels/TimePanel/TimeHeader.tsx @@ -14,10 +14,14 @@ export interface TimeHeaderProps { function TimeHeader(props: TimeHeaderProps) { const { hideHeader } = React.useContext(PanelContext); + if (hideHeader) { + return null; + } + const { prefixCls, generateConfig, locale, value, format } = props; const headerPrefixCls = `${prefixCls}-header`; - return hideHeader ? null : ( + return (
{value ? generateConfig.locale.format(locale.locale, value, format) diff --git a/src/panels/YearPanel/YearHeader.tsx b/src/panels/YearPanel/YearHeader.tsx index e3de0e150..a9442a4a4 100644 --- a/src/panels/YearPanel/YearHeader.tsx +++ b/src/panels/YearPanel/YearHeader.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import Header from '../Header'; import { GenerateConfig } from '../../generate'; import { YEAR_DECADE_COUNT } from '.'; +import PanelContext from '../../PanelContext'; export interface YearHeaderProps { prefixCls: string; @@ -23,6 +24,11 @@ function YearHeader(props: YearHeaderProps) { onNextDecade, onDecadeClick, } = props; + const { hideHeader } = React.useContext(PanelContext); + if (hideHeader) { + return null; + } + const headerPrefixCls = `${prefixCls}-header`; const yearNumber = generateConfig.getYear(viewDate); diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx index a78a85b46..044da5a37 100644 --- a/tests/panel.spec.tsx +++ b/tests/panel.spec.tsx @@ -389,4 +389,15 @@ describe('Panel', () => { errSpy.mockRestore(); }); + + describe('hideHeader', () => { + ['decade', 'year', 'month', 'date', 'time'].forEach(mode => { + it(mode, () => { + const wrapper = mount( + , + ); + expect(wrapper.find('.rc-picker-header')).toHaveLength(0); + }); + }); + }); });