Merge pull request #25 from misteinb/bugfix/expose-callback-for-datepicker-expand

expose expanded callback for datepicker

Author: misteinb

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v3.0.2
+### Fixed
+- expose callback for clicking calendar icon in date picker. includes next visible state.
+- blur handler for form field tooltip so it will close when focus leaves the field
+
 ## v3.0.1
 ### Fixed
 - blur listener for datepicker was too greedy.

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}
             />

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>
 ```

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

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}
                         />

lib/components/Field/FormField.tsx

@@ -79,6 +79,7 @@ export class FormField extends React.PureComponent<FormFieldProps, FormFieldStat
     constructor(props: FormFieldProps) {
         super(props);
         this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleBlur = this.handleBlur.bind(this);
         this._self = React.createRef();
         this.state = {
             tooltipVisible: false
@@ -100,6 +101,14 @@ export class FormField extends React.PureComponent<FormFieldProps, FormFieldStat
         }
     }
 
+    handleBlur(e: FocusEvent) {
+        if (!!e.relatedTarget && !this._self.current.contains(e.relatedTarget as HTMLElement)) {
+            this.setState({
+                tooltipVisible: false
+            });
+        }
+    }
+
     render() {
         const props = this.props;
         const containerClass = css('input-container', {
@@ -113,7 +122,12 @@ export class FormField extends React.PureComponent<FormFieldProps, FormFieldStat
         }
 
         return (
-            <Attr.div methodRef={this._self} className={containerClass} attr={props.attr.fieldContainer}>
+            <Attr.div
+                methodRef={this._self}
+                className={containerClass}
+                attr={props.attr.fieldContainer}
+                onBlur={this.handleBlur}
+            >
                 {(!!props.label) && <FormLabel
                     name={props.name}
                     icon='info'

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",