expose expanded callback for datepicker

Azure · Aug 10, 2018 · 5457cc6 · 5457cc6
1 parent df8b09b
commit 5457cc6
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v3.0.2
+### Fixed
+- expose callback for clicking calendar icon in date picker. includes next visible state.
+
 ## v3.0.1
 ### Fixed
 - blur listener for datepicker was too greedy.

diff --git a/lib/components/DateTime/DateField.tsx b/lib/components/DateTime/DateField.tsx
@@ -55,6 +55,11 @@ export interface DateFieldProps extends React.Props<DateFieldType> {
     /** Classname to append to top level element of TextInput */
     inputClassName?: string;
 
+    /**
+     * callback for clicking the calendar icon
+     */
+    onExpand?: (expanded: boolean) => void;
+
     attr?: DatePickerAttributes & FormFieldAttributes;
 }
 
@@ -117,6 +122,7 @@ export const DateField: React.StatelessComponent<DateFieldProps> = (props: DateF
                 disabled={props.disabled}
                 required={props.required}
                 onChange={props.onChange}
+                onExpand={props.onExpand}
                 className={props.inputClassName}
                 attr={dateAttr}
             />

diff --git a/lib/components/DateTime/DatePicker.md b/lib/components/DateTime/DatePicker.md
@@ -31,6 +31,7 @@ const initialState = {value: ''};
         name='date-picker'
         onChange={(newValue) => setState({value: newValue}) }
         initialValue={initialValue}
+        onExpand={(expanded) => {alert(`next expanded state: ${expanded}`)}}
     />
 </div>
 ```
@@ -75,7 +76,7 @@ const initialState = {value: ''};
         name='date-picker'
         onChange={(newValue) => setState({value: newValue}) }
         initialValue={initialValue}
-        disabled 
+        disabled
     />
 </div>
 ```
@@ -90,7 +91,7 @@ const initialState = {value: ''};
         name='date-picker'
         onChange={(newValue) => setState({value: newValue}) }
         initialValue={initialValue}
-        showAbove error 
+        showAbove error
     />
 </div>
 ```
diff --git a/lib/components/DateTime/DatePicker.tsx b/lib/components/DateTime/DatePicker.tsx
@@ -66,6 +66,11 @@ export interface DatePickerProps extends React.Props<DatePickerType> {
      */
     onPaste?: (newValue: string) => void;
 
+    /**
+     * callback for clicking the calendar icon.
+     */
+    onExpand?: (expanded: boolean) => void;
+
     /** Class to append to top level element */
     className?: string;
 
@@ -76,7 +81,7 @@ export interface DatePickerState {
     value: string;
     initialValue?: MethodDate;
 
-    visible?: boolean;
+    expanded?: boolean;
 }
 
 /**
@@ -118,7 +123,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
         const newState = this.getInitialState(props, '');
         this.state = {
             ...newState,
-            visible: false,
+            expanded: false,
         };
 
         this.paste = false;
@@ -333,14 +338,18 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
         }
     }
 
-    onIconClick = () => {
-        const nextVisible = !this.state.visible;
+    onExpand = () => {
+        const nextExpanded = !this.state.expanded;
 
-        this.setState({visible: nextVisible});
+        this.setState({expanded: nextExpanded});
+
+        if (typeof this.props.onExpand === 'function') {
+            this.props.onExpand(nextExpanded);
+        }
     }
 
     onSelect = (newValue: Date) => {
-        this.setState({visible: false});
+        this.setState({expanded: false});
         this.props.onChange(newValue.toJSON());
     }
 
@@ -349,22 +358,22 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
     }
 
     onOuterMouseEvent = (e: MouseEvent) => {
-        if (this.state.visible && !this._containerRef.contains(e.target as HTMLElement)) {
-            this.setState({visible: false});
+        if (this.state.expanded && !this._containerRef.contains(e.target as HTMLElement)) {
+            this.setState({expanded: false});
         }
     }
 
     onKeydown = (e: KeyboardEvent) => {
-        if (this.state.visible && e.keyCode === keyCode.escape) {
+        if (this.state.expanded && e.keyCode === keyCode.escape) {
             e.preventDefault();
             e.stopPropagation();
-            this.setState({visible: false});
+            this.setState({expanded: false});
         }
     }
 
     onBlur = (e: React.FocusEvent<any>) => {
         if (e.relatedTarget && !this._containerRef.contains(e.relatedTarget as HTMLElement)) {
-            this.setState({visible: false});
+            this.setState({expanded: false});
         }
     }
 
@@ -418,14 +427,14 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
                     <ActionTriggerButton
                         icon='calendar'
                         className={css('date-picker-calendar-icon')}
-                        onClick={this.onIconClick}
+                        onClick={this.onExpand}
                         disabled={this.props.disabled}
                         attr={this.props.attr.inputIcon}
                         aria-haspopup={true}
-                        aria-expanded={this.state.visible}
+                        aria-expanded={this.state.expanded}
                     />
                 </Attr.div>
-                {this.state.visible &&
+                {this.state.expanded &&
                     <Attr.div
                         className={css('date-picker-dropdown', {
                             'above': this.props.showAbove

diff --git a/lib/components/DateTime/DateTimeField.tsx b/lib/components/DateTime/DateTimeField.tsx
@@ -71,6 +71,11 @@ export interface DateTimeFieldProps extends React.Props<DateTimeFieldType> {
     /** Classname to append to top level element of DatePicker and TimeInput */
     inputClassName?: string;
 
+    /**
+     * callback for clicking calendar icon
+     */
+    onExpand?: (expanded: boolean) => void
+
     attr?: DateTimeFieldAttributes & FormFieldAttributes;
 }
 
@@ -371,6 +376,7 @@ export class DateTimeField extends React.Component<DateTimeFieldProps, Partial<D
                             required={this.props.required}
                             onPaste={this.onDatePaste}
                             onChange={this.onDateChange}
+                            onExpand={this.props.onExpand}
                             className={css('date-picker', this.props.inputClassName)}
                             attr={dateAttr}
                         />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@azure-iot/ux-fluent-controls",
-    "version": "3.0.1",
+    "version": "3.0.2",
     "description": "Azure IoT Fluent React Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",