[Labs] Timezone Picker

packages/core/src/components/menu/menuItem.tsx

@@ -136,12 +136,9 @@ export class MenuItem extends AbstractComponent<IMenuItemProps, IMenuItemState>
         if (hasSubmenu) {
             const measureSubmenu = this.props.useSmartPositioning ? this.measureSubmenu : null;
             const submenuElement = <Menu ref={measureSubmenu}>{this.renderChildren()}</Menu>;
-            const popoverClasses = classNames(
-                Classes.MINIMAL,
-                Classes.MENU_SUBMENU,
-                popoverProps.popoverClassName,
-                { [Classes.ALIGN_LEFT]: this.state.alignLeft },
-            );
+            const popoverClasses = classNames(Classes.MINIMAL, Classes.MENU_SUBMENU, popoverProps.popoverClassName, {
+                [Classes.ALIGN_LEFT]: this.state.alignLeft,
+            });
 
             content = (
                 <Popover

packages/core/test/menu/menuTests.tsx

@@ -119,7 +119,13 @@ describe("MenuItem", () => {
         );
         assert.strictEqual(wrapper.find(Popover).prop("inline"), popoverProps.inline);
         assert.strictEqual(wrapper.find(Popover).prop("interactionKind"), popoverProps.interactionKind);
-        assert.notStrictEqual(wrapper.find(Popover).prop("popoverClassName").indexOf(popoverProps.popoverClassName), 0);
+        assert.notStrictEqual(
+            wrapper
+                .find(Popover)
+                .prop("popoverClassName")
+                .indexOf(popoverProps.popoverClassName),
+            0,
+        );
         assert.notStrictEqual(wrapper.find(Popover).prop("content"), popoverProps.content);
     });
 

packages/labs/examples/timezonePickerExample.tsx

@@ -29,20 +29,16 @@ export class TimezonePickerExample extends BaseExample<ITimezonePickerExampleSta
         timezone: "",
     };
 
-    private handleDisabledChange = handleBooleanChange((disabled) => this.setState({ disabled }));
-    private handleShowLocalTimezoneChange = handleBooleanChange((showLocalTimezone) =>
-        this.setState({ showLocalTimezone }));
+    private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled }));
+    private handleShowLocalTimezoneChange = handleBooleanChange(showLocalTimezone =>
+        this.setState({ showLocalTimezone }),
+    );
     private handleFormatChange = handleStringChange((targetDisplayFormat: TimezoneDisplayFormat) =>
-        this.setState({ targetDisplayFormat }));
+        this.setState({ targetDisplayFormat }),
+    );
 
     protected renderExample() {
-        const {
-            date,
-            timezone,
-            targetDisplayFormat,
-            disabled,
-            showLocalTimezone,
-        } = this.state;
+        const { date, timezone, targetDisplayFormat, disabled, showLocalTimezone } = this.state;
 
         return (
             <TimezonePicker
@@ -72,9 +68,7 @@ export class TimezonePickerExample extends BaseExample<ITimezonePickerExampleSta
                     onChange={this.handleDisabledChange}
                 />,
             ],
-            [
-                this.renderDisplayFormatOption(),
-            ],
+            [this.renderDisplayFormatOption()],
         ];
     }
 
@@ -96,5 +90,5 @@ export class TimezonePickerExample extends BaseExample<ITimezonePickerExampleSta
 
     private handleTimezoneChange = (timezone: string) => {
         this.setState({ timezone });
-    }
+    };
 }

packages/labs/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@blueprintjs/core": "^1.26.0",
     "classnames": "^2.2",
+    "fuzzaldrin-plus": "^0.5.0",
     "moment": "^2.14.1",
     "moment-timezone": "^0.5.13",
     "popper.js": "1.11.0",
@@ -17,6 +18,7 @@
     "tslib": "^1.5.0"
   },
   "devDependencies": {
+    "@types/fuzzaldrin-plus": "^0.0.1",
     "@types/moment-timezone": "^0.2.35",
     "bourbon": "^4.3.4",
     "react": "^15.6.1",

packages/labs/src/components/select/select.tsx

@@ -121,15 +121,20 @@ export class Select<T> extends React.Component<ISelectProps<T>, ISelectState<T>>
         return Select as new () => Select<T>;
     }
 
-    public state: ISelectState<T> = { isOpen: false, query: "" };
-
     private TypedQueryList = QueryList.ofType<T>();
     private list: QueryList<T>;
     private refHandlers = {
         queryList: (ref: QueryList<T>) => (this.list = ref),
     };
     private previousFocusedElement: HTMLElement;
 
+    constructor(props?: ISelectProps<T>, context?: any) {
+        super(props, context);
+
+        const query = props && props.inputProps && props.inputProps.value !== undefined ? props.inputProps.value : "";
+        this.state = { isOpen: false, query };
+    }
+
     public render() {
         // omit props specific to this component, spread the rest.
         const {
@@ -155,6 +160,13 @@ export class Select<T> extends React.Component<ISelectProps<T>, ISelectState<T>>
         );
     }
 
+    public componentWillReceiveProps(nextProps: ISelectProps<T>) {
+        const { inputProps: nextInputProps = {} } = nextProps;
+        if (nextInputProps.value !== undefined && this.state.query !== nextInputProps.value) {
+            this.setState({ query: nextInputProps.value });
+        }
+    }
+
     public componentDidUpdate(_prevProps: ISelectProps<T>, prevState: ISelectState<T>) {
         if (this.state.isOpen && !prevState.isOpen && this.list != null) {
             this.list.scrollActiveItemIntoView();
@@ -302,12 +314,12 @@ export class Select<T> extends React.Component<ISelectProps<T>, ISelectState<T>>
         this.setState({ query });
         Utils.safeInvoke(inputProps.onChange, event);
         Utils.safeInvoke(onQueryChange, query);
-    }
+    };
 
     private resetQuery = () => {
         const { items, onQueryChange } = this.props;
         const query = "";
         this.setState({ activeItem: items[0], query });
         Utils.safeInvoke(onQueryChange, query);
-    }
+    };
 }

packages/labs/src/components/timezone-picker/timezoneDisplayFormat.ts

@@ -10,13 +10,13 @@ import { getTimezoneMetadata } from "./timezoneMetadata";
 
 export type TimezoneDisplayFormat = "offset" | "abbreviation" | "name" | "composite";
 export const TimezoneDisplayFormat = {
-    /** Abbreviation format i.e. "GMT" */
+    /** Abbreviation format i.e. "HST" */
     ABBREVIATION: "abbreviation" as "abbreviation",
     /** Composite format i.e. "Pacific/Honolulu (HST) -10:00" */
     COMPOSITE: "composite" as "composite",
     /** Name format i.e. "Pacific/Honolulu" */
     NAME: "name" as "name",
-    /** Offset format i.e. "-07:00" */
+    /** Offset format i.e. "-10:00" */
     OFFSET: "offset" as "offset",
 };
 
@@ -32,7 +32,7 @@ export function formatTimezone(
     const { abbreviation, offsetAsString } = getTimezoneMetadata(timezone, date);
     switch (displayFormat) {
         case TimezoneDisplayFormat.ABBREVIATION:
-            // Fall back to the offset in regions where there is no abbreviation.
+            // Fall back to the offset when there is no abbreviation.
             return abbreviation ? abbreviation : offsetAsString;
         case TimezoneDisplayFormat.NAME:
             return timezone;

packages/labs/src/components/timezone-picker/timezoneItems.ts

@@ -10,24 +10,61 @@ import * as moment from "moment-timezone";
 import { getTimezoneMetadata, ITimezoneMetadata } from "./timezoneMetadata";
 import { getLocalTimezone } from "./timezoneUtils";
 
+/** Timezone-specific QueryList item */
 export interface ITimezoneItem {
+    /** Key to be used as the rendered react key. */
     key: string;
+    /** Text for the timezone. */
     text: string;
+    /** Label for the timezone. */
     label: string;
+    /** Optional icon for the timezone. */
     iconName?: IconName;
+    /** The actual timezone. */
     timezone: string;
 }
 
+/**
+ * Get a list of all timezone items.
+ * @param date the date to use when determining timezone offsets
+ */
 export function getTimezoneItems(date: Date): ITimezoneItem[] {
-    return moment.tz.names().map((timezone) => toTimezoneItem(timezone, date));
+    return moment.tz.names().map(timezone => toTimezoneItem(timezone, date));
 }
 
+/**
+ * Get a list of timezone items where there is one timezone per offset
+ * and optionally the local timezone as the first item.
+ * The most populous timezone for each offset is chosen.
+ * @param date the date to use when determining timezone offsets
+ * @param includeLocalTimezone whether to include the local timezone
+ */
 export function getInitialTimezoneItems(date: Date, includeLocalTimezone: boolean): ITimezoneItem[] {
     const populous = getPopulousTimezoneItems(date);
     const local = getLocalTimezoneItem(date);
-    return includeLocalTimezone && local !== undefined
-        ? [local, ...populous]
-        : populous;
+    return includeLocalTimezone && local !== undefined ? [local, ...populous] : populous;
+}
+
+/**
+ * Get the timezone item for the user's local timezone.
+ * @param date the date to use when determining timezone offsets
+ */
+export function getLocalTimezoneItem(date: Date): ITimezoneItem | undefined {
+    const timezone = getLocalTimezone();
+    if (timezone !== undefined) {
+        const timestamp = date.getTime();
+        const zonedDate = moment.tz(timestamp, timezone);
+        const offsetAsString = zonedDate.format("Z");
+        return {
+            iconName: "locate",
+            key: `${timezone}-local`,
+            label: offsetAsString,
+            text: "Current timezone",
+            timezone,
+        };
+    } else {
+        return undefined;
+    }
 }
 
 /**
@@ -37,7 +74,7 @@ export function getInitialTimezoneItems(date: Date, includeLocalTimezone: boolea
  */
 function getPopulousTimezoneItems(date: Date): ITimezoneItem[] {
     // Filter out noisy timezones. See https://github.com/moment/moment-timezone/issues/227
-    const timezones = moment.tz.names().filter((timezone) => /\//.test(timezone) && !/Etc\//.test(timezone));
+    const timezones = moment.tz.names().filter(timezone => /\//.test(timezone) && !/Etc\//.test(timezone));
 
     const timezoneToMetadata: { [timezone: string]: ITimezoneMetadata } = {};
     for (const timezone of timezones) {
@@ -73,24 +110,6 @@ function getPopulousTimezoneItems(date: Date): ITimezoneItem[] {
     return initialTimezones;
 }
 
-function getLocalTimezoneItem(date: Date): ITimezoneItem | undefined {
-    const timezone = getLocalTimezone();
-    if (timezone !== undefined) {
-        const timestamp = date.getTime();
-        const zonedDate = moment.tz(timestamp, timezone);
-        const offsetAsString = zonedDate.format("Z");
-        return {
-            iconName: "locate",
-            key: `${timezone}-local`,
-            label: offsetAsString,
-            text: "Current timezone",
-            timezone,
-        };
-    } else {
-        return undefined;
-    }
-}
-
 function toTimezoneItem(timezone: string, date: Date): ITimezoneItem {
     const { abbreviation, offsetAsString } = getTimezoneMetadata(timezone, date);
     return {

packages/labs/src/components/timezone-picker/timezoneMetadata.ts

@@ -23,9 +23,7 @@ export function getTimezoneMetadata(timezone: string, date: Date): ITimezoneMeta
     const offsetAsString = zonedDate.format("Z");
     const abbreviation = getAbbreviation(timezone, timestamp);
     // TODO: amend moment-timezone typings to include the population field
-    const population = zone && (zone as any).population !== undefined
-        ? (zone as any).population
-        : undefined;
+    const population = zone && (zone as any).population !== undefined ? (zone as any).population : undefined;
 
     return {
         timezone,

packages/labs/src/components/timezone-picker/timezonePicker.tsx

@@ -21,14 +21,11 @@ import {
     MenuItem,
     Utils,
 } from "@blueprintjs/core";
-import {
-    ISelectItemRendererProps,
-    Select,
-} from "..";
+import { ISelectItemRendererProps, Select } from "..";
 import * as Classes from "../../common/classes";
 import { formatTimezone, TimezoneDisplayFormat } from "./timezoneDisplayFormat";
 import { getInitialTimezoneItems, getTimezoneItems, ITimezoneItem } from "./timezoneItems";
-import { createTimezoneQueryEngine, IItemQueryEngine } from "./timezoneQueryEngine";
+import { filterWithQueryCandidates, getTimezoneQueryCandidates } from "./timezoneUtils";
 
 export { TimezoneDisplayFormat };
 
@@ -118,16 +115,16 @@ export class TimezonePicker extends AbstractComponent<ITimezonePickerProps, ITim
     };
 
     private timezoneItems: ITimezoneItem[];
-    private timezoneQueryEngine: IItemQueryEngine<ITimezoneItem>;
     private initialTimezoneItems: ITimezoneItem[];
 
     constructor(props: ITimezonePickerProps, context?: any) {
         super(props, context);
 
-        const { value, date = new Date(), showLocalTimezone } = props;
-        this.state = { date, value };
+        const { value, date = new Date(), showLocalTimezone, inputProps = {} } = props;
+        const query = inputProps.value !== undefined ? inputProps.value : "";
+        this.state = { date, value, query };
 
-        this.updateTimezones(date);
+        this.timezoneItems = getTimezoneItems(date);
         this.initialTimezoneItems = getInitialTimezoneItems(date, showLocalTimezone);
     }
 
@@ -165,11 +162,11 @@ export class TimezonePicker extends AbstractComponent<ITimezonePickerProps, ITim
     }
 
     public componentWillReceiveProps(nextProps: ITimezonePickerProps) {
-        const { date: nextDate = new Date() } = nextProps;
+        const { date: nextDate = new Date(), inputProps: nextInputProps = {} } = nextProps;
         const dateChanged = this.state.date.getTime() !== nextDate.getTime();
 
         if (dateChanged) {
-            this.updateTimezones(nextDate);
+            this.timezoneItems = getTimezoneItems(nextDate);
         }
         if (dateChanged || this.props.showLocalTimezone !== nextProps.showLocalTimezone) {
             this.initialTimezoneItems = getInitialTimezoneItems(nextDate, nextProps.showLocalTimezone);
@@ -182,6 +179,9 @@ export class TimezonePicker extends AbstractComponent<ITimezonePickerProps, ITim
         if (this.state.value !== nextProps.value) {
             nextState.value = nextProps.value;
         }
+        if (nextInputProps.value !== undefined && this.state.query !== nextInputProps.value) {
+            nextState.query = nextInputProps.value;
+        }
         this.setState(nextState);
     }
 
@@ -208,15 +208,19 @@ export class TimezonePicker extends AbstractComponent<ITimezonePickerProps, ITim
         );
     }
 
-    private updateTimezones(date: Date): void {
-        this.timezoneItems = getTimezoneItems(date);
-        this.timezoneQueryEngine = createTimezoneQueryEngine(date);
-    }
-
     private filterItems = (query: string, items: ITimezoneItem[]): ITimezoneItem[] => {
-        // Only filter and rank the non-initial items
-        return items === this.initialTimezoneItems ? items : this.timezoneQueryEngine.filterAndRankItems(query, items);
-    }
+        if (query === "") {
+            return items;
+        }
+
+        const { date } = this.state;
+        return filterWithQueryCandidates(
+            items,
+            query,
+            item => item.timezone,
+            item => getTimezoneQueryCandidates(item.timezone, date),
+        );
+    };
 
     private renderItem = (itemProps: ISelectItemRendererProps<ITimezoneItem>) => {
         const { item, isActive, handleClick } = itemProps;
@@ -236,16 +240,16 @@ export class TimezonePicker extends AbstractComponent<ITimezonePickerProps, ITim
                 shouldDismissPopover={false}
             />
         );
-    }
+    };
 
     private handleItemSelect = (timezone: ITimezoneItem) => {
         if (this.props.value === undefined) {
             this.setState({ value: timezone.timezone });
         }
         Utils.safeInvoke(this.props.onChange, timezone.timezone);
-    }
+    };
 
     private handleQueryChange = (query: string) => {
         this.setState({ query });
-    }
+    };
 }