Add an active property to control pickers from outside

components/date_picker/DatePicker.js

@@ -14,6 +14,7 @@ import datePickerDialogFactory from './DatePickerDialog.js';
 const factory = (Input, DatePickerDialog) => {
   class DatePicker extends Component {
     static propTypes = {
+      active: PropTypes.bool,
       autoOk: PropTypes.bool,
       className: PropTypes.string,
       error: PropTypes.string,
@@ -47,14 +48,21 @@ const factory = (Input, DatePickerDialog) => {
     };
 
     static defaultProps = {
+      active: false,
       locale: 'en',
       sundayFirstDayOfWeek: false
     };
 
     state = {
-      active: false
+      active: this.props.active
     };
 
+    componentWillReceiveProps (nextProps) {
+      if (this.state.active !== nextProps.active) {
+        this.setState({ active: nextProps.active });
+      }
+    }
+
     handleDismiss = () => {
       this.setState({active: false});
     };
@@ -88,7 +96,8 @@ const factory = (Input, DatePickerDialog) => {
     };
 
     render () {
-      const { autoOk, inputClassName, inputFormat, locale, maxDate, minDate,
+      const { active, // eslint-disable-line
+        autoOk, inputClassName, inputFormat, locale, maxDate, minDate,
         onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
         ...others } = this.props;
       const finalInputFormat = inputFormat || time.formatDate;

components/date_picker/readme.md

@@ -46,6 +46,7 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 
 | Name            | Type            | Default       | Description |
 |:-----|:-----|:-----|:-----|
+| `active`        | `Boolean`       | `false`       | Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. |
 | `autoOk`        | `Boolean`       | `false`       | Automatically selects a date upon clicking on a day. |
 | `className`     | `String`        |               | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
 | `inputClassName`| `String`        |               | This class will be applied to `Input` component of `DatePicker`. |

components/time_picker/TimePicker.js

@@ -11,6 +11,7 @@ import timePickerDialogFactory from './TimePickerDialog.js';
 const factory = (TimePickerDialog, Input) => {
   class TimePicker extends Component {
     static propTypes = {
+      active: PropTypes.bool,
       className: PropTypes.string,
       error: PropTypes.string,
       format: PropTypes.oneOf(['24hr', 'ampm']),
@@ -29,14 +30,21 @@ const factory = (TimePickerDialog, Input) => {
     };
 
     static defaultProps = {
+      active: false,
       className: '',
       format: '24hr'
     };
 
     state = {
-      active: false
+      active: this.props.active
     };
 
+    componentWillReceiveProps (nextProps) {
+      if (this.state.active !== nextProps.active) {
+        this.setState({ active: nextProps.active });
+      }
+    }
+
     handleDismiss = () => {
       this.setState({active: false});
     };
@@ -70,8 +78,10 @@ const factory = (TimePickerDialog, Input) => {
     };
 
     render () {
-      const { value, format, inputClassName, onEscKeyDown, onOverlayClick,
-        readonly, ...others } = this.props;
+      const {
+        active, // eslint-disable-line
+        format, inputClassName, onEscKeyDown, onOverlayClick, readonly, value, ...others
+      } = this.props;
       const formattedTime = value ? time.formatTime(value, format) : '';
       return (
         <div data-react-toolbox='time-picker'>

components/time_picker/readme.md

@@ -35,6 +35,7 @@ If you want to provide a theme via context, the component key is `RTTimePicker`.
 
 | Name            | Type        | Default     | Description|
 |:-----|:-----|:-----|:-----|
+| `active`        | `Boolean`       | `false`       | Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. |
 | `className`     | `String`    |             | This class will be placed at the top of the `TimePickerDialog` component so you can provide custom styles.|
 | `error`         | `String`    |             | Provide error text which will be displayed under the field.|
 | `inputClassName`| `String`        |         | This class will be applied to `Input` component of `TimePicker`. |

spec/components/pickers.js

@@ -12,15 +12,21 @@ datetime.setMinutes(28);
 class PickersTest extends React.Component {
   state = {
     date2: datetime,
+    firstActive: false,
     time2: datetime
   };
 
   handleChange = (item, value) => {
     const newState = {};
+    newState.firstActive = false;
     newState[item] = value;
     this.setState(newState);
   };
 
+  makeFirstUnactive = () => {
+    this.setState({ firstActive: false });
+  };
+
   localeExample = {
     months: 'urtarrila_otsaila_martxoa_apirila_maiatza_ekaina_uztaila_abuztua_iraila_urria_azaroa_abendua'.split('_'),
     monthsShort: 'urt._ots._mar._api._mai._eka._uzt._abu._ira._urr._aza._abe.'.split('_'),
@@ -36,10 +42,11 @@ class PickersTest extends React.Component {
         <p>Date pickers and time pickers with Material flavour.</p>
 
         <DatePicker
+          active={this.state.firstActive}
           label='Birthdate'
           onChange={this.handleChange.bind(this, 'date1')}
-          onEscKeyDown={() => console.log('esc key down')}
-          onOverlayClick={() => console.log('overlay click')}
+          onEscKeyDown={this.makeFirstUnactive}
+          onOverlayClick={this.makeFirstUnactive}
           value={this.state.date1}
           sundayFirstDayOfWeek
         />