feat: Add more customize icon support

Author: zombieJ

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

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.

src/panels/DatePanel/DateHeader.tsx

@@ -77,6 +77,7 @@ function DateHeader<DateType>(props: DateHeaderProps<DateType>) {
 
   return (
     <Header
+      {...props}
       prefixCls={headerPrefixCls}
       onSuperPrev={onPrevYear}
       onPrev={onPrevMonth}

src/panels/DecadePanel/DecadeHeader.tsx

@@ -29,6 +29,7 @@ function DecadeHeader<DateType>(props: YearHeaderProps<DateType>) {
 
   return (
     <Header
+      {...props}
       prefixCls={headerPrefixCls}
       onSuperPrev={onPrevDecades}
       onSuperNext={onNextDecades}

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>

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>;

src/panels/YearPanel/YearHeader.tsx

@@ -32,6 +32,7 @@ function YearHeader<DateType>(props: YearHeaderProps<DateType>) {
 
   return (
     <Header
+      {...props}
       prefixCls={headerPrefixCls}
       onSuperPrev={onPrevDecade}
       onSuperNext={onNextDecade}