Merge pull request #24 from misteinb/bugfix/datepicker-event-listeners

fix blur listener to be less greedy

Author: misteinb

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v3.0.1
+### Fixed
+- blur listener for datepicker was too greedy.
+- shrink calendar
+- move date picker window listers to component mounting events
+
 ## v3.0.0
 ### Changed
 - calendar api changed. no longer extends drop down

lib/components/DateTime/Calendar.md

@@ -41,7 +41,7 @@ ______________________________________________________________________________
 ### Examples
 
 ```jsx
-<div style={{width: '320px', border: '1px solid #333'}}>
+<div style={{width: '260px', border: '1px solid #333'}}>
     <Calendar onChange={date => alert(date)} value={new Date(2017, 9, 12)} />
 </div>
 ```

lib/components/DateTime/Calendar.scss

@@ -2,14 +2,14 @@
 @import '../../common/mixins';
 @import '../../common/color.controls';
 
-$calendar-column-width: 10*$grid-size;
-$calendar-width: 52*$grid-size;
+$calendar-column-width: 8*$grid-size;
+$calendar-chevron-width: 10*$grid-size;
+$calendar-width: 40*$grid-size;
 
 $line-height-chevron: 4*$grid-size;
 $line-height-header: 4*$grid-size;
 $line-height-row: $calendar-column-width;
 
-
 .calendar {
     @include md-box(block, relative);
     font-family: $font-family-default;
@@ -20,8 +20,11 @@ $line-height-row: $calendar-column-width;
     }
     .calendar-header {
         @include md-box(block, relative);
-        margin-left: 4*$grid-size;
+        margin-left: 2*$grid-size;
         font-family: $font-family-light;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
 
         & button {
             text-decoration: none;
@@ -37,6 +40,12 @@ $line-height-row: $calendar-column-width;
             }
         }
 
+        .action-bar {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+        }
+
         .calendar-month {
             @include md-box(inline-block, relative);
             margin-top: 4*$grid-size;
@@ -46,18 +55,17 @@ $line-height-row: $calendar-column-width;
             font-size: $font-size-h5;
             line-height: $line-height-header;
             text-align: left;
-            width: $calendar-width;
             vertical-align: top;
+            width: 100%
         }
 
         .calendar-chevron {
             @include md-box(inline-block, relative);
             text-align: center;
             vertical-align: bottom;
             line-height: $line-height-chevron;
-            margin-left: $grid-size;
             padding-top: 2*$grid-size;
-            width: $calendar-column-width;
+            width: $calendar-chevron-width;
             text-decoration: none;
 
             &:visited {
@@ -78,7 +86,7 @@ $line-height-row: $calendar-column-width;
         @include md-box(block, relative);
         width: 100%;
         margin: 2*$grid-size 0px;
-        padding-left: 2*$grid-size;
+        padding-left: $grid-size;
         padding-bottom: 1.5*$grid-size;
         @include themify{
             border-bottom: 1px solid themed('color-border-rest');
@@ -96,7 +104,7 @@ $line-height-row: $calendar-column-width;
     }
 
     .calendar-row {
-        margin-left: 2*$grid-size;
+        margin-left: $grid-size;
 
         & > button.selected {
             @include themify{

lib/components/DateTime/Calendar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as classNames from 'classnames/bind';
-import { DivProps, SpanProps, ButtonProps, Elements as Attr } from '../../Attributes';
+import { DivProps, ButtonProps, Elements as Attr } from '../../Attributes';
 import { ActionTriggerButton, ActionTriggerButtonAttributes } from '../ActionTrigger/ActionTriggerButton';
 import { getLocalMonths, getLocalWeekdays } from './helpers';
 import { keyCode, MethodDate, weekLength } from '../../Common';
@@ -442,18 +442,20 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
                     >
                         {`${this.monthNames[curMonth]} ${curYear}`}
                     </Attr.div>
-                    <ActionTriggerButton
-                        className={css('calendar-chevron')}
-                        onClick={this.onPrevMonth}
-                        icon='chevronUp'
-                        attr={this.props.attr.prevMonthButton}
-                    />
-                    <ActionTriggerButton
-                        icon='chevronDown'
-                        className={css('calendar-chevron')}
-                        onClick={this.onNextMonth}
-                        attr={this.props.attr.nextMonthButton}
-                    />
+                    <div className={css('action-bar')}>
+                        <ActionTriggerButton
+                            className={css('calendar-chevron')}
+                            onClick={this.onPrevMonth}
+                            icon='chevronUp'
+                            attr={this.props.attr.prevMonthButton}
+                        />
+                        <ActionTriggerButton
+                            icon='chevronDown'
+                            className={css('calendar-chevron')}
+                            onClick={this.onNextMonth}
+                            attr={this.props.attr.nextMonthButton}
+                        />
+                    </div>
                 </Attr.div>
                 <Attr.div
                     className={css('calendar-days')}

lib/components/DateTime/DatePicker.scss

@@ -2,7 +2,7 @@
 @import '../../common/mixins';
 @import '../../common/color.controls';
 
-$date-picker-dropdown-width: 80*$grid-size;
+$date-picker-dropdown-width: 65*$grid-size;
 
 $line-height-text: 5*$grid-size;
 $line-height-icon: 4*$grid-size;

lib/components/DateTime/DatePicker.tsx

@@ -207,6 +207,16 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
         }
     }
 
+    componentDidMount() {
+        window.addEventListener('click', this.onOuterMouseEvent);
+        window.addEventListener('keydown', this.onKeydown);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('click', this.onOuterMouseEvent);
+        window.removeEventListener('keydown', this.onKeydown);
+    }
+
     parse(newValue: string) {
         let valid = true;
 
@@ -326,11 +336,6 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
     onIconClick = () => {
         const nextVisible = !this.state.visible;
 
-        if (nextVisible) {
-            window.addEventListener('click', this.onOuterMouseEvent);
-            window.addEventListener('keydown', this.onKeydown);
-        }
-
         this.setState({visible: nextVisible});
     }
 
@@ -344,26 +349,25 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
     }
 
     onOuterMouseEvent = (e: MouseEvent) => {
-        if (!this._containerRef.contains(e.target as HTMLElement)) {
-            window.removeEventListener('click', this.onOuterMouseEvent);
+        if (this.state.visible && !this._containerRef.contains(e.target as HTMLElement)) {
             this.setState({visible: false});
         }
     }
 
     onKeydown = (e: KeyboardEvent) => {
-        if (e.keyCode === keyCode.escape) {
+        if (this.state.visible && e.keyCode === keyCode.escape) {
             e.preventDefault();
             e.stopPropagation();
-            window.removeEventListener('keydown', this.onKeydown);
             this.setState({visible: false});
         }
     }
 
     onBlur = (e: React.FocusEvent<any>) => {
-        if (!this._containerRef.contains(e.relatedTarget as HTMLElement)) {
+        if (e.relatedTarget && !this._containerRef.contains(e.relatedTarget as HTMLElement)) {
             this.setState({visible: false});
         }
     }
+
     setContainerRef = (element: HTMLElement) => {
         this._containerRef = element;
     }

package.json

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