Skip to content

Commit 8846ba6

Browse files
zombieJzombieJ
committed
feat: Support hideHeader
1 parent 87a3336 commit 8846ba6

File tree

8 files changed

+80
-24
lines changed

8 files changed

+80
-24
lines changed

‎src/Picker.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,15 +73,18 @@ export interface PickerSharedProps<DateType> extends React.AriaAttributes {
7373

7474
export interface PickerBaseProps<DateType>
7575
extends PickerSharedProps<DateType>,
76-
Omit<PickerPanelBaseProps<DateType>, 'onChange'> {}
76+
Omit<PickerPanelBaseProps<DateType>, 'onChange' | 'hideHeader'> {}
7777

7878
export interface PickerDateProps<DateType>
7979
extends PickerSharedProps<DateType>,
80-
Omit<PickerPanelDateProps<DateType>, 'onChange'> {}
80+
Omit<PickerPanelDateProps<DateType>, 'onChange' | 'hideHeader'> {}
8181

8282
export interface PickerTimeProps<DateType>
8383
extends PickerSharedProps<DateType>,
84-
Omit<PickerPanelTimeProps<DateType>, 'onChange' | 'format'> {}
84+
Omit<
85+
PickerPanelTimeProps<DateType>,
86+
'onChange' | 'format' | 'hideHeader'
87+
> {}
8588

8689
export type PickerProps<DateType> =
8790
| PickerBaseProps<DateType>

‎src/PickerPanel.tsx‎

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,9 @@ export interface PickerPanelSharedProps<DateType> {
5858
onChange?: (value: DateType) => void;
5959
onPanelChange?: OnPanelChange<DateType>;
6060
onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
61+
62+
/** @private This is internal usage. Do not use in your production env */
63+
hideHeader?: boolean;
6164
}
6265

6366
export interface PickerPanelBaseProps<DateType>
@@ -112,6 +115,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
112115
showTime,
113116
showToday,
114117
renderExtraFooter,
118+
hideHeader,
115119
onSelect,
116120
onChange,
117121
onPanelChange,
@@ -130,9 +134,10 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
130134
}
131135

132136
// ============================ State =============================
133-
const { operationRef, panelRef: panelDivRef } = React.useContext(
134-
PanelContext,
135-
);
137+
138+
const panelContext = React.useContext(PanelContext);
139+
const { operationRef, panelRef: panelDivRef } = panelContext;
140+
136141
const { extraFooterSelections } = React.useContext(RangeContext);
137142
const panelRef = React.useRef<PanelRefProps>({});
138143

@@ -413,24 +418,32 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
413418
}
414419

415420
return (
416-
<div
417-
tabIndex={tabIndex}
418-
className={classNames(`${prefixCls}-panel`, className)}
419-
style={style}
420-
onKeyDown={onInternalKeyDown}
421-
onBlur={onInternalBlur}
422-
onMouseDown={onMouseDown}
423-
ref={panelDivRef}
421+
<PanelContext.Provider
422+
value={{
423+
...panelContext,
424+
hideHeader:
425+
'hideHeader' in props ? hideHeader : panelContext.hideHeader,
426+
}}
424427
>
425-
{panelNode}
426-
{extraFooter || todayNode || extraSelectionNode ? (
427-
<div className={`${prefixCls}-footer`}>
428-
{extraFooter}
429-
{extraSelectionNode}
430-
{todayNode}
431-
</div>
432-
) : null}
433-
</div>
428+
<div
429+
tabIndex={tabIndex}
430+
className={classNames(`${prefixCls}-panel`, className)}
431+
style={style}
432+
onKeyDown={onInternalKeyDown}
433+
onBlur={onInternalBlur}
434+
onMouseDown={onMouseDown}
435+
ref={panelDivRef}
436+
>
437+
{panelNode}
438+
{extraFooter || todayNode || extraSelectionNode ? (
439+
<div className={`${prefixCls}-footer`}>
440+
{extraFooter}
441+
{extraSelectionNode}
442+
{todayNode}
443+
</div>
444+
) : null}
445+
</div>
446+
</PanelContext.Provider>
434447
);
435448
}
436449

‎src/panels/DatePanel/DateHeader.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import Header from '../Header';
33
import { Locale } from '../../interface';
44
import { GenerateConfig } from '../../generate';
5+
import PanelContext from '../../PanelContext';
56

67
export interface DateHeaderProps<DateType> {
78
prefixCls: string;
@@ -31,6 +32,12 @@ function DateHeader<DateType>(props: DateHeaderProps<DateType>) {
3132
onYearClick,
3233
onMonthClick,
3334
} = props;
35+
36+
const { hideHeader } = React.useContext(PanelContext);
37+
if (hideHeader) {
38+
return null;
39+
}
40+
3441
const headerPrefixCls = `${prefixCls}-header`;
3542

3643
const monthsLocale: string[] =

‎src/panels/DecadePanel/DecadeHeader.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import Header from '../Header';
33
import { GenerateConfig } from '../../generate';
44
import { DECADE_DISTANCE_COUNT } from '.';
5+
import PanelContext from '../../PanelContext';
56

67
export interface YearHeaderProps<DateType> {
78
prefixCls: string;
@@ -20,6 +21,11 @@ function DecadeHeader<DateType>(props: YearHeaderProps<DateType>) {
2021
onPrevDecades,
2122
onNextDecades,
2223
} = props;
24+
const { hideHeader } = React.useContext(PanelContext);
25+
if (hideHeader) {
26+
return null;
27+
}
28+
2329
const headerPrefixCls = `${prefixCls}-header`;
2430

2531
const yearNumber = generateConfig.getYear(viewDate);

‎src/panels/MonthPanel/MonthHeader.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import Header from '../Header';
33
import { Locale } from '../../interface';
44
import { GenerateConfig } from '../../generate';
5+
import PanelContext from '../../PanelContext';
56

67
export interface MonthHeaderProps<DateType> {
78
prefixCls: string;
@@ -24,6 +25,11 @@ function MonthHeader<DateType>(props: MonthHeaderProps<DateType>) {
2425
onPrevYear,
2526
onYearClick,
2627
} = props;
28+
const { hideHeader } = React.useContext(PanelContext);
29+
if (hideHeader) {
30+
return null;
31+
}
32+
2733
const headerPrefixCls = `${prefixCls}-header`;
2834

2935
return (

‎src/panels/TimePanel/TimeHeader.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,14 @@ export interface TimeHeaderProps<DateType> {
1414

1515
function TimeHeader<DateType>(props: TimeHeaderProps<DateType>) {
1616
const { hideHeader } = React.useContext(PanelContext);
17+
if (hideHeader) {
18+
return null;
19+
}
20+
1721
const { prefixCls, generateConfig, locale, value, format } = props;
1822
const headerPrefixCls = `${prefixCls}-header`;
1923

20-
return hideHeader ? null : (
24+
return (
2125
<Header prefixCls={headerPrefixCls}>
2226
{value
2327
? generateConfig.locale.format(locale.locale, value, format)

‎src/panels/YearPanel/YearHeader.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import Header from '../Header';
33
import { GenerateConfig } from '../../generate';
44
import { YEAR_DECADE_COUNT } from '.';
5+
import PanelContext from '../../PanelContext';
56

67
export interface YearHeaderProps<DateType> {
78
prefixCls: string;
@@ -23,6 +24,11 @@ function YearHeader<DateType>(props: YearHeaderProps<DateType>) {
2324
onNextDecade,
2425
onDecadeClick,
2526
} = props;
27+
const { hideHeader } = React.useContext(PanelContext);
28+
if (hideHeader) {
29+
return null;
30+
}
31+
2632
const headerPrefixCls = `${prefixCls}-header`;
2733

2834
const yearNumber = generateConfig.getYear(viewDate);

‎tests/panel.spec.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -389,4 +389,15 @@ describe('Panel', () => {
389389

390390
errSpy.mockRestore();
391391
});
392+
393+
describe('hideHeader', () => {
394+
['decade', 'year', 'month', 'date', 'time'].forEach(mode => {
395+
it(mode, () => {
396+
const wrapper = mount(
397+
<MomentPickerPanel mode={mode as any} hideHeader />,
398+
);
399+
expect(wrapper.find('.rc-picker-header')).toHaveLength(0);
400+
});
401+
});
402+
});
392403
});

0 commit comments

Comments
 (0)