feat: Support hideHeader

react-component · Nov 30, 2019 · 8846ba6 · 8846ba6 · vercel · Nov 30, 2019
1 parent 87a3336
commit 8846ba6
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 24 deletions.
diff --git a/src/Picker.tsx b/src/Picker.tsx
@@ -73,15 +73,18 @@ export interface PickerSharedProps<DateType> extends React.AriaAttributes {
 
 export interface PickerBaseProps<DateType>
   extends PickerSharedProps<DateType>,
-    Omit<PickerPanelBaseProps<DateType>, 'onChange'> {}
+    Omit<PickerPanelBaseProps<DateType>, 'onChange' | 'hideHeader'> {}
 
 export interface PickerDateProps<DateType>
   extends PickerSharedProps<DateType>,
-    Omit<PickerPanelDateProps<DateType>, 'onChange'> {}
+    Omit<PickerPanelDateProps<DateType>, 'onChange' | 'hideHeader'> {}
 
 export interface PickerTimeProps<DateType>
   extends PickerSharedProps<DateType>,
-    Omit<PickerPanelTimeProps<DateType>, 'onChange' | 'format'> {}
+    Omit<
+      PickerPanelTimeProps<DateType>,
+      'onChange' | 'format' | 'hideHeader'
+    > {}
 
 export type PickerProps<DateType> =
   | PickerBaseProps<DateType>

diff --git a/src/PickerPanel.tsx b/src/PickerPanel.tsx
@@ -58,6 +58,9 @@ export interface PickerPanelSharedProps<DateType> {
   onChange?: (value: DateType) => void;
   onPanelChange?: OnPanelChange<DateType>;
   onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+
+  /** @private This is internal usage. Do not use in your production env */
+  hideHeader?: boolean;
 }
 
 export interface PickerPanelBaseProps<DateType>
@@ -112,6 +115,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
     showTime,
     showToday,
     renderExtraFooter,
+    hideHeader,
     onSelect,
     onChange,
     onPanelChange,
@@ -130,9 +134,10 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
   }
 
   // ============================ 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<PanelRefProps>({});
 
@@ -413,24 +418,32 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
   }
 
   return (
-    <div
-      tabIndex={tabIndex}
-      className={classNames(`${prefixCls}-panel`, className)}
-      style={style}
-      onKeyDown={onInternalKeyDown}
-      onBlur={onInternalBlur}
-      onMouseDown={onMouseDown}
-      ref={panelDivRef}
+    <PanelContext.Provider
+      value={{
+        ...panelContext,
+        hideHeader:
+          'hideHeader' in props ? hideHeader : panelContext.hideHeader,
+      }}
     >
-      {panelNode}
-      {extraFooter || todayNode || extraSelectionNode ? (
-        <div className={`${prefixCls}-footer`}>
-          {extraFooter}
-          {extraSelectionNode}
-          {todayNode}
-        </div>
-      ) : null}
-    </div>
+      <div
+        tabIndex={tabIndex}
+        className={classNames(`${prefixCls}-panel`, className)}
+        style={style}
+        onKeyDown={onInternalKeyDown}
+        onBlur={onInternalBlur}
+        onMouseDown={onMouseDown}
+        ref={panelDivRef}
+      >
+        {panelNode}
+        {extraFooter || todayNode || extraSelectionNode ? (
+          <div className={`${prefixCls}-footer`}>
+            {extraFooter}
+            {extraSelectionNode}
+            {todayNode}
+          </div>
+        ) : null}
+      </div>
+    </PanelContext.Provider>
   );
 }
 

diff --git 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<DateType> {
   prefixCls: string;
@@ -31,6 +32,12 @@ function DateHeader<DateType>(props: DateHeaderProps<DateType>) {
     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
@@ -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<DateType> {
   prefixCls: string;
@@ -20,6 +21,11 @@ function DecadeHeader<DateType>(props: YearHeaderProps<DateType>) {
     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
@@ -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<DateType> {
   prefixCls: string;
@@ -24,6 +25,11 @@ function MonthHeader<DateType>(props: MonthHeaderProps<DateType>) {
     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
@@ -14,10 +14,14 @@ export interface TimeHeaderProps<DateType> {
 
 function TimeHeader<DateType>(props: TimeHeaderProps<DateType>) {
   const { hideHeader } = React.useContext(PanelContext);
+  if (hideHeader) {
+    return null;
+  }
+
   const { prefixCls, generateConfig, locale, value, format } = props;
   const headerPrefixCls = `${prefixCls}-header`;
 
-  return hideHeader ? null : (
+  return (
     <Header prefixCls={headerPrefixCls}>
       {value
         ? generateConfig.locale.format(locale.locale, value, format)

diff --git 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<DateType> {
   prefixCls: string;
@@ -23,6 +24,11 @@ function YearHeader<DateType>(props: YearHeaderProps<DateType>) {
     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
@@ -389,4 +389,15 @@ describe('Panel', () => {
 
     errSpy.mockRestore();
   });
+
+  describe('hideHeader', () => {
+    ['decade', 'year', 'month', 'date', 'time'].forEach(mode => {
+      it(mode, () => {
+        const wrapper = mount(
+          <MomentPickerPanel mode={mode as any} hideHeader />,
+        );
+        expect(wrapper.find('.rc-picker-header')).toHaveLength(0);
+      });
+    });
+  });
 });