feat(inputs): Adding support to custom todayButtonText

Author: arthurdenner

src/components/button/today.js

@@ -17,9 +17,7 @@ const TodayButton = ({ selectable, selected, today, ...rest }) => {
       today={today.toString()}
       style={{ marginTop: 10 }}
       {...otherProps}
-    >
-      Today
-    </Button>
+    />
   );
 };
 

src/components/calendar/calendar.js

@@ -18,6 +18,7 @@ const Calendar = ({
   selected,
   selectedClassName,
   showToday,
+  todayButtonText,
   weekdayNames,
 }) => (
   <Segment className="clndr-calendars-segment">
@@ -115,7 +116,7 @@ const Calendar = ({
           dateObj: getToday(selected, minDate, maxDate),
         })}
       >
-        Today
+        {todayButtonText}
       </TodayButton>
     )}
   </Segment>
@@ -133,6 +134,7 @@ Calendar.propTypes = {
   selected: PropTypes.instanceOf(Date),
   selectedClassName: PropTypes.string,
   showToday: PropTypes.bool,
+  todayButtonText: PropTypes.string.isRequired,
   weekdayNames: PropTypes.array.isRequired,
 };
 

src/inputs/range.js

@@ -20,6 +20,7 @@ class RangeInput extends BaseInput {
     monthNames: PropTypes.array,
     onDateChange: PropTypes.func.isRequired,
     placeholder: PropTypes.string,
+    todayButtonText: PropTypes.string,
     weekdayNames: PropTypes.array,
   };
 
@@ -28,6 +29,7 @@ class RangeInput extends BaseInput {
     format: 'YYYY-MM-DD',
     monthNames: monthNamesEng,
     placeholder: null,
+    todayButtonText: 'Today',
     weekdayNames: weekdayNamesEng,
   };
 
@@ -81,7 +83,7 @@ class RangeInput extends BaseInput {
 
   render() {
     const { isVisible, selectedDate, selectedDateFormatted } = this.state;
-    const { date, monthNames } = this.props;
+    const { date, monthNames, todayButtonText } = this.props;
 
     return (
       <div
@@ -109,6 +111,7 @@ class RangeInput extends BaseInput {
               <Calendar
                 {...props}
                 monthNames={monthNames}
+                todayButtonText={todayButtonText}
                 weekdayNames={this.weekdayNames}
               />
             )}

src/inputs/simple.js

@@ -20,6 +20,7 @@ class SimpleInput extends BaseInput {
     monthNames: PropTypes.array,
     onDateChange: PropTypes.func.isRequired,
     placeholder: PropTypes.string,
+    todayButtonText: PropTypes.string,
     weekdayNames: PropTypes.array,
   };
 
@@ -28,6 +29,7 @@ class SimpleInput extends BaseInput {
     format: 'YYYY-MM-DD',
     monthNames: monthNamesEng,
     placeholder: null,
+    todayButtonText: 'Today',
     weekdayNames: weekdayNamesEng,
   };
 
@@ -76,7 +78,7 @@ class SimpleInput extends BaseInput {
 
   render() {
     const { isVisible, selectedDate, selectedDateFormatted } = this.state;
-    const { date, monthNames } = this.props;
+    const { date, monthNames, todayButtonText } = this.props;
 
     return (
       <div
@@ -103,6 +105,7 @@ class SimpleInput extends BaseInput {
               <Calendar
                 {...props}
                 monthNames={monthNames}
+                todayButtonText={todayButtonText}
                 weekdayNames={this.weekdayNames}
               />
             )}

stories/index.js

@@ -52,7 +52,9 @@ storiesOf('Examples', module)
   .add('Simple with brazilian labels', () => (
     <Simple
       onDateChange={console.log}
+      format="DD/MM/YYYY"
       monthNames={brazilianMonths}
+      todayButtonText="Hoje"
       weekdayNames={brazilianWeek}
     />
   ));