DatePicker: showDatePickerPopup should be public (microsoft#13981)

* showDatePickerPopup as public api * Change files * make method public * api file update * add showdatepicker to interface * build fix
pompomon · Jul 10, 2020 · ec36a5c · ec36a5c
1 parent d07846f
commit ec36a5c
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 13 deletions.
diff --git a/change/@uifabric-date-time-2020-07-09-22-36-12-shrallap-datepickercalloutopenpublic.json b/change/@uifabric-date-time-2020-07-09-22-36-12-shrallap-datepickercalloutopenpublic.json
@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "enable datepicker callout open ",
+  "packageName": "@uifabric/date-time",
+  "email": "shrallap@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-07-10T05:36:12.334Z"
+}
diff --git a/packages/date-time/etc/date-time.api.md b/packages/date-time/etc/date-time.api.md
@@ -49,6 +49,8 @@ export class DatePickerBase extends React.Component<IDatePickerProps, IDatePicke
     // (undocumented)
     reset(): void;
     // (undocumented)
+    showDatePickerPopup(): void;
+    // (undocumented)
     UNSAFE_componentWillReceiveProps(nextProps: IDatePickerProps): void;
     }
 
@@ -241,6 +243,7 @@ export interface ICalendarStyles {
 export interface IDatePicker {
     focus(): void;
     reset(): void;
+    showDatePickerPopup(): void;
 }
 
 // @public (undocumented)

diff --git a/packages/date-time/src/components/DatePicker/DatePicker.base.tsx b/packages/date-time/src/components/DatePicker/DatePicker.base.tsx
@@ -311,6 +311,15 @@ export class DatePickerBase extends React.Component<IDatePickerProps, IDatePicke
     this.setState(this._getDefaultState());
   }
 
+  public showDatePickerPopup(): void {
+    if (!this.state.isDatePickerShown) {
+      this._preventFocusOpeningPicker = true;
+      this.setState({
+        isDatePickerShown: true,
+      });
+    }
+  }
+
   private _onSelectDate = (date: Date): void => {
     const { formatDate, onSelectDate } = this.props;
 
@@ -350,7 +359,7 @@ export class DatePickerBase extends React.Component<IDatePickerProps, IDatePicke
 
     if (!this.props.allowTextInput) {
       if (!this._preventFocusOpeningPicker) {
-        this._showDatePickerPopup();
+        this.showDatePickerPopup();
       } else {
         this._preventFocusOpeningPicker = false;
       }
@@ -392,7 +401,7 @@ export class DatePickerBase extends React.Component<IDatePickerProps, IDatePicke
         ev.stopPropagation();
         if (!this.state.isDatePickerShown) {
           this._validateTextInput();
-          this._showDatePickerPopup();
+          this.showDatePickerPopup();
         } else {
           // When DatePicker allows input date string directly,
           // it is expected to hit another enter to close the popup
@@ -413,7 +422,7 @@ export class DatePickerBase extends React.Component<IDatePickerProps, IDatePicke
 
   private _onTextFieldClick = (ev: React.MouseEvent<HTMLElement>): void => {
     if (!this.props.disableAutoFocus && !this.state.isDatePickerShown && !this.props.disabled) {
-      this._showDatePickerPopup();
+      this.showDatePickerPopup();
       return;
     }
     if (this.props.allowTextInput) {
@@ -424,21 +433,12 @@ export class DatePickerBase extends React.Component<IDatePickerProps, IDatePicke
   private _onIconClick = (ev: React.MouseEvent<HTMLElement>): void => {
     ev.stopPropagation();
     if (!this.state.isDatePickerShown && !this.props.disabled) {
-      this._showDatePickerPopup();
+      this.showDatePickerPopup();
     } else if (this.props.allowTextInput) {
       this._dismissDatePickerPopup();
     }
   };
 
-  private _showDatePickerPopup(): void {
-    if (!this.state.isDatePickerShown) {
-      this._preventFocusOpeningPicker = true;
-      this.setState({
-        isDatePickerShown: true,
-      });
-    }
-  }
-
   private _dismissDatePickerPopup = (): void => {
     if (this.state.isDatePickerShown) {
       this.setState(

diff --git a/packages/date-time/src/components/DatePicker/DatePicker.types.ts b/packages/date-time/src/components/DatePicker/DatePicker.types.ts
@@ -16,6 +16,9 @@ export interface IDatePicker {
 
   /** Reset the state of the picker to the default */
   reset(): void;
+
+  /** Open the datepicker callout */
+  showDatePickerPopup(): void;
 }
 
 /**