Feature/iss 64

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y0c/react-datepicker",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Flexible, Reusable, Mobile friendly DatePicker Component",
   "author": "y0c",
   "license": "MIT",

src/components/Calendar.tsx

@@ -33,7 +33,7 @@ class Calendar extends React.Component<Props, State> {
   };
 
   public render() {
-    const { showMonthCnt } = this.props;
+    const { showMonthCnt, format, prevIcon, nextIcon } = this.props;
     const { base } = this.state;
 
     return (
@@ -45,9 +45,12 @@ class Calendar extends React.Component<Props, State> {
                 {...this.props}
                 base={this.state.base}
                 current={dayjs(base).add(idx, 'month')}
-                prevIcon={idx === 0}
-                nextIcon={idx === showMonthCnt! - 1}
+                shouldShowPrevIcon={idx === 0}
+                shouldShowNextIcon={idx === showMonthCnt! - 1}
                 setBase={this.setBase}
+                format={format}
+                prevIcon={prevIcon}
+                nextIcon={nextIcon}
               />
             </div>
           ))}

src/components/CalendarContainer.tsx

@@ -16,13 +16,19 @@ interface CalendarContainerProps {
   /** Calendar Show or Hide */
   show?: boolean;
   /** PrevIcon Show or Hide */
-  prevIcon?: boolean;
+  shouldShowPrevIcon?: boolean;
   /** NextIcon Show or Hide */
-  nextIcon?: boolean;
+  shouldShowNextIcon?: boolean;
   /** Event for Calendar day click */
   onChange?: (date: dayjs.Dayjs) => void;
   /** TodayPanel show or hide */
   showToday?: boolean;
+  /** Format of calendar header title */
+  format?: string;
+  /** Custom prevIcon */
+  prevIcon?: React.ReactNode;
+  /** Custom nextIcon */
+  nextIcon?: React.ReactNode;
 }
 
 interface PrivateProps {
@@ -61,12 +67,12 @@ class CalendarContainer extends React.Component<Props, State> {
   }
 
   public getHeaderTitle = () => {
-    const { current } = this.props;
+    const { current, format = 'YYYY.MM' } = this.props;
     const year = dayjs(current).year();
     return {
       [IDatePicker.ViewMode.YEAR]: `${year - 4} - ${year + 5}`,
       [IDatePicker.ViewMode.MONTH]: `${year}`,
-      [IDatePicker.ViewMode.DAY]: dayjs(current).format('YYYY.MM'),
+      [IDatePicker.ViewMode.DAY]: dayjs(current).format(format),
     }[this.state.viewMode];
   };
 
@@ -132,15 +138,17 @@ class CalendarContainer extends React.Component<Props, State> {
   };
 
   public renderCalendarHead = () => {
-    const { prevIcon, nextIcon } = this.props;
+    const { shouldShowPrevIcon, shouldShowNextIcon, prevIcon, nextIcon } = this.props;
     return (
       <CalendarHead
         onPrev={this.handleBase('subtract')}
         onNext={this.handleBase('add')}
-        prevIcon={prevIcon}
-        nextIcon={nextIcon}
+        shouldShowPrevIcon={shouldShowPrevIcon}
+        shouldShowNextIcon={shouldShowNextIcon}
         onTitleClick={this.handleTitleClick}
         title={this.getHeaderTitle()}
+        prevIcon={prevIcon}
+        nextIcon={nextIcon}
       />
     );
   };

src/components/CalendarHead.tsx

@@ -9,11 +9,15 @@ interface Props {
   /** Calenar Title Click Event */
   onTitleClick?: () => void;
   /** Prev Icon show or Hide */
-  prevIcon?: boolean;
+  shouldShowPrevIcon?: boolean;
   /** Next icon show or hide */
-  nextIcon?: boolean;
+  shouldShowNextIcon?: boolean;
   /** Title to show in calendar  */
   title?: string;
+  /** Custom prevIcon */
+  prevIcon?: React.ReactNode;
+  /** Custom nextIcon */
+  nextIcon?: React.ReactNode;
 }
 
 const defaultProps = {
@@ -23,6 +27,8 @@ const defaultProps = {
 const CalendarHead: React.FunctionComponent<Props> = ({
   onPrev,
   onNext,
+  shouldShowPrevIcon,
+  shouldShowNextIcon,
   prevIcon,
   nextIcon,
   title,
@@ -31,19 +37,19 @@ const CalendarHead: React.FunctionComponent<Props> = ({
   return (
     <div className="calendar__head">
       <div className="calendar__head--prev">
-        {prevIcon && (
+        {shouldShowPrevIcon && (
           <button onClick={onPrev} className="calendar__head--button">
-	          <SVGIcon id="left-arrow"/>
+	          {prevIcon ? prevIcon : <SVGIcon id="left-arrow"/>}
           </button>
         )}
       </div>
       <h2 className="calendar__head--title" onClick={onTitleClick}>
         {title}
       </h2>
       <div className="calendar__head--next">
-        {nextIcon && (
+        {shouldShowNextIcon && (
           <button onClick={onNext} className="calendar__head--button">
-	          <SVGIcon id="right-arrow"/>
+	          {nextIcon ? nextIcon : <SVGIcon id="right-arrow"/>}
           </button>
         )}
       </div>

src/components/PickerInput.tsx

@@ -27,6 +27,12 @@ export interface Props {
   className?: string;
   /** Picker Input Placeholder */
   placeholder?: string;
+  /** input custom styles */
+  inputStyles?: {
+    [style: string]: string
+  }
+  /** input clear icon */
+  clearIcon?: React.ReactNode;
 }
 
 class PickerInput extends React.Component<Props> {
@@ -62,6 +68,7 @@ class PickerInput extends React.Component<Props> {
       onClick,
       onBlur,
       placeholder,
+      inputStyles = {},
     } = this.props;
 
     return (
@@ -78,13 +85,15 @@ class PickerInput extends React.Component<Props> {
         placeholder={placeholder}
         style={{
           paddingLeft: icon ? '32px' : '10px',
+          ...inputStyles
         }}
       />
     );
   };
 
   public renderClear = () => {
-    return (
+    const { clearIcon } = this.props;
+    return clearIcon ? clearIcon : (
       <span className="picker-input__clear" onClick={this.handleClear}>
         <SVGIcon id="clear" />
       </span>

src/components/RangeDatePicker.tsx

@@ -198,7 +198,7 @@ class RangeDatePicker extends React.Component<Props, State> {
   };
 
   public renderRangePickerInput = () => {
-    const { startPlaceholder, endPlaceholder, readOnly, disabled, clear, onChange } = this.props;
+    const { startPlaceholder, endPlaceholder, readOnly, disabled, clear, icon } = this.props;
     const { startValue, endValue } = this.state;
     return (
       <RangePickerInput
@@ -212,12 +212,13 @@ class RangeDatePicker extends React.Component<Props, State> {
         onChange={this.handleInputChange}
         onBlur={this.handleInputBlur}
         onClear={this.handleInputClear}
+        icon={icon}
       />
     );
   };
 
   public renderCalendar = (actions: PickerAction) => {
-    const { showMonthCnt, initialDate, wrapper } = this.props;
+    const { showMonthCnt, initialDate, wrapper, format, prevIcon, nextIcon } = this.props;
     const { start, end } = this.state;
     let component: JSX.Element;
 
@@ -232,6 +233,9 @@ class RangeDatePicker extends React.Component<Props, State> {
         onMouseOver={this.handleMouseOver}
         customDayText={this.handleCalendarText}
         customDayClass={this.handleCalendarClass}
+        format={format}
+        prevIcon={prevIcon}
+        nextIcon={nextIcon}
       />
     );
 

src/components/RangePickerInput.tsx

@@ -31,6 +31,8 @@ export type InputProps = Merge<
     startPlaceholder?: string;
     /** end input placeholder */
     endPlaceholder?: string;
+    /** Custom icon between input triggers */
+    icon?: React.ReactNode;
   }
 >;
 
@@ -73,12 +75,15 @@ class RangePickerInput extends React.Component<Props> {
   };
 
   public render() {
+    const { icon } = this.props;
     return (
       <div className="range-picker-input">
         <span className="range-picker-input__start">{this.renderStartInput()}</span>
-        <span className="range-picker-input__icon">
-	        <SVGIcon id="right-arrow"/>
-        </span>
+        {icon ? icon : (
+          <span className="range-picker-input__icon">
+            <SVGIcon id="right-arrow"/>
+          </span>
+        )}
         <span className="range-picker-input__end">{this.renderEndInput()}</span>
       </div>
     );

src/components/TableMatrixView.tsx

@@ -22,7 +22,7 @@ const TableMatrixView: React.FunctionComponent<Props> = ({ className, matrix, ce
       )}
       <tbody>
         {matrix.map((row, i) => (
-          <tr key={i}>{row.map((v, j) => cell(v, i + j))}</tr>
+          <tr key={i}>{row.map((v, j) => cell(v, i * matrix[i].length + j))}</tr>
         ))}
       </tbody>
     </table>

stories/RangeDatePicker.stories.tsx

@@ -8,6 +8,32 @@ import LayoutDecorator from './decorator/LayoutDecorator';
 storiesOf('RangeDatePicker', module)
   .addDecorator(LayoutDecorator)
   .add('default', () => <RangeDatePicker />)
+  .add('with custom header format', () => <RangeDatePicker format={'MMMM YYYY'} />)
+  .add('with custom icon between input triggers', () => {
+    return (
+      <RangeDatePicker
+        icon={
+          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+            -
+          </div>
+        }
+      />)
+  })
+  .add('with custom prev and next icons', () => {
+    return (
+      <RangeDatePicker
+        prevIcon={
+          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+            -
+          </div>
+        }
+        nextIcon={
+          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+            +
+          </div>
+        }
+      />)
+  })
   .add('initial Start & End Date', () => {
     return (
       <RangeDatePicker initialStartDate={dayjs().subtract(7, 'day')} initialEndDate={dayjs()} />