feat: Add more customize icon support

react-component · Nov 28, 2019 · acfb384 · acfb384 · vercel · Nov 28, 2019
1 parent faaea0d
commit acfb384
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 5 deletions.
diff --git a/src/Picker.tsx b/src/Picker.tsx
@@ -46,6 +46,10 @@ export interface PickerSharedProps<DateType> {
   // Render
   suffixIcon?: React.ReactNode;
   clearIcon?: React.ReactNode;
+  prevIcon?: React.ReactNode;
+  nextIcon?: React.ReactNode;
+  superPrevIcon?: React.ReactNode;
+  superNextIcon?: React.ReactNode;
   getPopupContainer?: (node: HTMLElement) => HTMLElement;
 
   // Events

diff --git a/src/interface.ts b/src/interface.ts
@@ -68,6 +68,11 @@ export interface PanelSharedProps<DateType> {
   locale: Locale;
   disabledDate?: (date: DateType) => boolean;
 
+  prevIcon?: React.ReactNode;
+  nextIcon?: React.ReactNode;
+  superPrevIcon?: React.ReactNode;
+  superNextIcon?: React.ReactNode;
+
   /**
    * Typescript can not handle generic type so we can not use `forwardRef` here.
    * Thus, move ref into operationRef.

diff --git a/src/panels/DatePanel/DateHeader.tsx b/src/panels/DatePanel/DateHeader.tsx
@@ -77,6 +77,7 @@ function DateHeader<DateType>(props: DateHeaderProps<DateType>) {
 
   return (
     <Header
+      {...props}
       prefixCls={headerPrefixCls}
       onSuperPrev={onPrevYear}
       onPrev={onPrevMonth}

diff --git a/src/panels/DecadePanel/DecadeHeader.tsx b/src/panels/DecadePanel/DecadeHeader.tsx
@@ -29,6 +29,7 @@ function DecadeHeader<DateType>(props: YearHeaderProps<DateType>) {
 
   return (
     <Header
+      {...props}
       prefixCls={headerPrefixCls}
       onSuperPrev={onPrevDecades}
       onSuperNext={onNextDecades}

diff --git a/src/panels/Header.tsx b/src/panels/Header.tsx
@@ -2,6 +2,13 @@ import * as React from 'react';
 
 export interface HeaderProps {
   prefixCls: string;
+
+  // Icons
+  prevIcon?: React.ReactNode;
+  nextIcon?: React.ReactNode;
+  superPrevIcon?: React.ReactNode;
+  superNextIcon?: React.ReactNode;
+
   /** Last one step */
   onPrev?: () => void;
   /** Next one step */
@@ -16,6 +23,10 @@ export interface HeaderProps {
 
 function Header({
   prefixCls,
+  prevIcon = '\u2039',
+  nextIcon = '\u203A',
+  superPrevIcon = '\u00AB',
+  superNextIcon = '\u00BB',
   onSuperPrev,
   onSuperNext,
   onPrev,
@@ -31,7 +42,7 @@ function Header({
           tabIndex={-1}
           className={`${prefixCls}-super-prev-btn`}
         >
-          {'\u00AB'}
+          {superPrevIcon}
         </button>
       )}
       {onPrev && (
@@ -41,7 +52,7 @@ function Header({
           tabIndex={-1}
           className={`${prefixCls}-prev-btn`}
         >
-          {'\u2039'}
+          {prevIcon}
         </button>
       )}
       <div className={`${prefixCls}-view`}>{children}</div>
@@ -52,7 +63,7 @@ function Header({
           tabIndex={-1}
           className={`${prefixCls}-next-btn`}
         >
-          {'\u203A'}
+          {nextIcon}
         </button>
       )}
       {onSuperNext && (
@@ -62,7 +73,7 @@ function Header({
           tabIndex={-1}
           className={`${prefixCls}-super-next-btn`}
         >
-          {'\u00BB'}
+          {superNextIcon}
         </button>
       )}
     </div>

diff --git a/src/panels/TimePanel/TimeBody.tsx b/src/panels/TimePanel/TimeBody.tsx
@@ -26,7 +26,7 @@ export interface BodyOperationRef {
   onUpDown: (diff: number) => void;
 }
 
-export interface TimeBodyProps<DateType> extends SharedTimeProps {
+export interface TimeBodyProps<DateType> extends SharedTimeProps<DateType> {
   prefixCls: string;
   locale: Locale;
   generateConfig: GenerateConfig<DateType>;

diff --git a/src/panels/YearPanel/YearHeader.tsx b/src/panels/YearPanel/YearHeader.tsx
@@ -32,6 +32,7 @@ function YearHeader<DateType>(props: YearHeaderProps<DateType>) {
 
   return (
     <Header
+      {...props}
       prefixCls={headerPrefixCls}
       onSuperPrev={onPrevDecade}
       onSuperNext={onNextDecade}