Allow DatePicker buttons to be overriden

sdelements · Apr 15, 2019 · 0ef82b0 · 0ef82b0
1 parent 292abac
commit 0ef82b0
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 3 deletions.
diff --git a/src/DatePicker/Calendar.js b/src/DatePicker/Calendar.js
@@ -315,11 +315,15 @@ class Calendar extends Component {
     const weekTitleDayStyle = prepareStyles(styles.weekTitleDay);
 
     const {
+      cancelClassName,
       cancelLabel,
+      cancelStyle,
       DateTimeFormat,
       firstDayOfWeek,
       locale,
+      okClassName,
       okLabel,
+      okStyle,
       onClickCancel, // eslint-disable-line no-unused-vars
       onClickOk, // eslint-disable-line no-unused-vars
       utils,
@@ -387,8 +391,12 @@ class Calendar extends Component {
           {okLabel &&
             <CalendarActionButtons
               autoOk={this.props.autoOk}
+              cancelClassName={cancelClassName}
               cancelLabel={cancelLabel}
+              cancelStyle={cancelStyle}
+              okClassName={okClassName}
               okLabel={okLabel}
+              okStyle={okStyle}
               onClickCancel={onClickCancel}
               onClickOk={onClickOk}
             />

diff --git a/src/DatePicker/CalendarActionButtons.js b/src/DatePicker/CalendarActionButtons.js
@@ -11,8 +11,21 @@ class CalendarActionButton extends Component {
     onClickOk: PropTypes.func,
   };
 
+  static defaultProps = {
+    okStyle: {},
+    cancelStyle: {},
+  };
+
   render() {
-    const {cancelLabel, okLabel} = this.props;
+    const {
+      cancelClassName,
+      cancelLabel,
+      cancelStyle,
+      okClassName,
+      okLabel,
+      okStyle,
+      wordings
+    } = this.props;
 
     const styles = {
       root: {
@@ -35,18 +48,20 @@ class CalendarActionButton extends Component {
     return (
       <div style={styles.root} >
         <FlatButton
+          className={cancelClassName}
           label={cancelLabel}
           onClick={this.props.onClickCancel}
           primary={true}
-          style={styles.flatButtons}
+          style={{...styles.flatButtons, ...cancelStyle}}
         />
         {!this.props.autoOk &&
           <FlatButton
+            className={okClassName}
             disabled={this.refs.calendar !== undefined && this.refs.calendar.isSelectedDateDisabled()}
             label={okLabel}
             onClick={this.props.onClickOk}
             primary={true}
-            style={styles.flatButtons}
+            style={{...styles.flatButtons, ...okStyle}}
           />
         }
       </div>

diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js
@@ -19,10 +19,18 @@ class DatePicker extends Component {
      * If true, automatically accept and close the picker on select a date.
      */
     autoOk: PropTypes.bool,
+    /**
+     * The css class name of the 'Cancel' button.
+     */
+    cancelClassName: PropTypes.string,
     /**
      * Override the default text of the 'Cancel' button.
      */
     cancelLabel: PropTypes.node,
+    /**
+     * Override the inline-styles of the 'Cancel' button.
+     */
+    cancelStyle: PropTypes.object,
     /**
      * The css class name of the root element.
      */
@@ -89,10 +97,18 @@ class DatePicker extends Component {
      * Tells the component to display the picker in portrait or landscape mode.
      */
     mode: PropTypes.oneOf(['portrait', 'landscape']),
+    /**
+     * The css class name of the 'OK' button
+     */
+    okClassName: PropTypes.string,
     /**
      * Override the default text of the 'OK' button.
      */
     okLabel: PropTypes.node,
+    /**
+     * Override the inline-styles of the 'OK' button.
+     */
+    okStyle: PropTypes.object,
     /**
      * Callback function that is fired when the date value changes.
      *
@@ -277,7 +293,9 @@ class DatePicker extends Component {
     const {
       DateTimeFormat,
       autoOk,
+      cancelClassName,
       cancelLabel,
+      cancelStyle,
       className,
       container,
       defaultDate, // eslint-disable-line no-unused-vars
@@ -289,7 +307,9 @@ class DatePicker extends Component {
       maxDate,
       minDate,
       mode,
+      okClassName,
       okLabel,
+      okStyle,
       onDismiss,
       onFocus, // eslint-disable-line no-unused-vars
       onShow,
@@ -319,7 +339,9 @@ class DatePicker extends Component {
         <DatePickerDialog
           DateTimeFormat={DateTimeFormat}
           autoOk={autoOk}
+          cancelClassName={cancelClassName}
           cancelLabel={cancelLabel}
+          cancelStyle={cancelStyle}
           container={container}
           containerStyle={dialogContainerStyle}
           disableYearSelection={disableYearSelection}
@@ -329,7 +351,9 @@ class DatePicker extends Component {
           maxDate={maxDate}
           minDate={minDate}
           mode={mode}
+          okClassName={okClassName}
           okLabel={okLabel}
+          okStyle={okStyle}
           onAccept={this.handleAccept}
           onShow={onShow}
           onDismiss={onDismiss}

diff --git a/src/DatePicker/DatePickerDialog.js b/src/DatePicker/DatePickerDialog.js
@@ -108,7 +108,9 @@ class DatePickerDialog extends Component {
     const {
       DateTimeFormat,
       autoOk,
+      cancelClassName,
       cancelLabel,
+      cancelStyle,
       container,
       containerStyle,
       disableYearSelection,
@@ -118,7 +120,9 @@ class DatePickerDialog extends Component {
       maxDate,
       minDate,
       mode,
+      okClassName,
       okLabel,
+      okStyle,
       onAccept, // eslint-disable-line no-unused-vars
       onDismiss, // eslint-disable-line no-unused-vars
       onShow, // eslint-disable-line no-unused-vars
@@ -166,7 +170,10 @@ class DatePickerDialog extends Component {
           <Calendar
             autoOk={autoOk}
             DateTimeFormat={DateTimeFormat}
+            cancelClassName={cancelClassName}
             cancelLabel={cancelLabel}
+            cancelStyle={cancelStyle}
+            DateTimeFormat={DateTimeFormat}
             disableYearSelection={disableYearSelection}
             firstDayOfWeek={firstDayOfWeek}
             initialDate={initialDate}
@@ -179,7 +186,9 @@ class DatePickerDialog extends Component {
             ref="calendar"
             onClickCancel={this.handleClickCancel}
             onClickOk={this.handleClickOk}
+            okClassName={okClassName}
             okLabel={okLabel}
+            okStyle={okStyle}
             openToYearSelection={openToYearSelection}
             shouldDisableDate={shouldDisableDate}
             hideCalendarDate={hideCalendarDate}