[Labs] Timezone Picker

.vscode/settings.json

@@ -5,5 +5,10 @@
         "**/dist": true,
         "**/coverage": true,
         "docs": true
+    },
+    "editor.insertSpaces": true,
+    "editor.tabSize": 4,
+    "[scss]": {
+        "editor.tabSize": 2
     }
 }

packages/core/src/common/index.ts

@@ -12,8 +12,8 @@ export * from "./position";
 export * from "./props";
 export * from "./tetherUtils";
 
-import * as classes from "../common/classes";
-import * as keys from "../common/keys";
+import * as classes from "./classes";
+import * as keys from "./keys";
 import * as utils from "./utils";
 
 export const Classes = classes;

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/index.ts

@@ -12,3 +12,4 @@ export * from "./selectExample";
 export * from "./suggestExample";
 export * from "./tagInputExample";
 export * from "./tooltip2Example";
+export * from "./timezonePickerExample";

packages/labs/examples/suggestExample.tsx

@@ -8,7 +8,7 @@
 import * as classNames from "classnames";
 import * as React from "react";
 
-import { Button, Classes, MenuItem, Switch } from "@blueprintjs/core";
+import { Classes, MenuItem, Switch } from "@blueprintjs/core";
 import { BaseExample } from "@blueprintjs/docs";
 import { ISelectItemRendererProps, Suggest } from "../src";
 import { Film, TOP_100_FILMS } from "./data";

packages/labs/examples/timezonePickerExample.tsx

@@ -0,0 +1,94 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
+ * of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
+ * and https://github.com/palantir/blueprint/blob/master/PATENTS
+ */
+
+import * as React from "react";
+
+import { Radio, RadioGroup, Switch } from "@blueprintjs/core";
+import { BaseExample, handleBooleanChange, handleStringChange } from "@blueprintjs/docs";
+
+import { TimezoneDisplayFormat, TimezonePicker } from "../src";
+
+export interface ITimezonePickerExampleState {
+    date?: Date;
+    disabled?: boolean;
+    showLocalTimezone?: boolean;
+    targetDisplayFormat?: TimezoneDisplayFormat;
+    timezone?: string;
+}
+
+export class TimezonePickerExample extends BaseExample<ITimezonePickerExampleState> {
+    public state: ITimezonePickerExampleState = {
+        date: new Date(),
+        disabled: false,
+        showLocalTimezone: true,
+        targetDisplayFormat: TimezoneDisplayFormat.OFFSET,
+        timezone: "",
+    };
+
+    private handleDisabledChange = handleBooleanChange(disabled => this.setState({ disabled }));
+    private handleShowLocalTimezoneChange = handleBooleanChange(showLocalTimezone =>
+        this.setState({ showLocalTimezone }),
+    );
+    private handleFormatChange = handleStringChange((targetDisplayFormat: TimezoneDisplayFormat) =>
+        this.setState({ targetDisplayFormat }),
+    );
+
+    protected renderExample() {
+        const { date, timezone, targetDisplayFormat, disabled, showLocalTimezone } = this.state;
+
+        return (
+            <TimezonePicker
+                date={date}
+                value={timezone}
+                onChange={this.handleTimezoneChange}
+                valueDisplayFormat={targetDisplayFormat}
+                showLocalTimezone={showLocalTimezone}
+                disabled={disabled}
+            />
+        );
+    }
+
+    protected renderOptions() {
+        return [
+            [
+                <Switch
+                    checked={this.state.showLocalTimezone}
+                    label="Show local timezone in initial list"
+                    key="show-local-timezone"
+                    onChange={this.handleShowLocalTimezoneChange}
+                />,
+                <Switch
+                    checked={this.state.disabled}
+                    label="Disabled"
+                    key="disabled"
+                    onChange={this.handleDisabledChange}
+                />,
+            ],
+            [this.renderDisplayFormatOption()],
+        ];
+    }
+
+    private renderDisplayFormatOption() {
+        return (
+            <RadioGroup
+                key="display-format"
+                label="Display format"
+                onChange={this.handleFormatChange}
+                selectedValue={this.state.targetDisplayFormat}
+            >
+                <Radio label="Abbreviation" value={TimezoneDisplayFormat.ABBREVIATION} />
+                <Radio label="Name" value={TimezoneDisplayFormat.NAME} />
+                <Radio label="Offset" value={TimezoneDisplayFormat.OFFSET} />
+                <Radio label="Composite" value={TimezoneDisplayFormat.COMPOSITE} />
+            </RadioGroup>
+        );
+    }
+
+    private handleTimezoneChange = (timezone: string) => {
+        this.setState({ timezone });
+    };
+}

packages/labs/examples/tsconfig.json

@@ -18,10 +18,8 @@
         "target": "es5",
         "paths": {
             "@blueprintjs/labs": ["../dist/index"],
-            "@blueprintjs/docs": ["../../docs/dist/index"]
+            "@blueprintjs/docs": ["../../docs/dist/index"],
+            "@blueprintjs/datetime": ["../../datetime/dist/index"]
         }
-    },
-    "include": [
-        "../types/*"
-    ]
+    }
 }

packages/labs/package.json

@@ -9,12 +9,17 @@
   "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",
     "pure-render-decorator": "^1.2.1",
     "react-popper": "^0.7.2",
     "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",
     "react-addons-css-transition-group": "^15.6.0",

packages/labs/src/common/classes.ts

@@ -14,3 +14,5 @@ export const SELECT = "pt-select";
 export const SELECT_POPOVER = `${SELECT}-popover`;
 export const TAG_INPUT = "pt-tag-input";
 export const TAG_INPUT_ICON = `${TAG_INPUT}-icon`;
+export const TIMEZONE_PICKER = "pt-timezone-picker";
+export const TIMEZONE_PICKER_POPOVER = `${TIMEZONE_PICKER}-popover`;

packages/labs/src/components/_index.scss

@@ -9,3 +9,4 @@
 @import "select/multi-select";
 @import "select/select";
 @import "tag-input/tag-input";
+@import "timezone-picker/timezone-picker";

packages/labs/src/components/index.ts

@@ -13,3 +13,4 @@ export * from "./select/multiSelect";
 export * from "./select/select";
 export * from "./select/suggest";
 export * from "./tag-input/tagInput";
+export * from "./timezone-picker/timezonePicker";

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

@@ -79,6 +79,12 @@ export interface ISelectProps<T> extends IListItemsProps<T> {
      * @default false
      */
     resetOnClose?: boolean;
+
+    /**
+     * Callback invoked when the query value changes,
+     * through user input or when the filter is reset.
+     */
+    onQueryChange?: (query: string) => void;
 }
 
 export interface ISelectItemRendererProps<T> {
@@ -115,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 {
@@ -149,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();
@@ -291,10 +309,17 @@ export class Select<T> extends React.Component<ISelectProps<T>, ISelectState<T>>
     };
 
     private handleQueryChange = (event: React.FormEvent<HTMLInputElement>) => {
-        const { inputProps = {} } = this.props;
-        this.setState({ query: event.currentTarget.value });
+        const { inputProps = {}, onQueryChange } = this.props;
+        const query = event.currentTarget.value;
+        this.setState({ query });
         Utils.safeInvoke(inputProps.onChange, event);
+        Utils.safeInvoke(onQueryChange, query);
     };
 
-    private resetQuery = () => this.setState({ activeItem: this.props.items[0], 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/_timezone-picker.scss

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
+ * of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
+ * and https://github.com/palantir/blueprint/blob/master/PATENTS
+ */
+
+@import "~@blueprintjs/core/src/common/variables";
+@import "~@blueprintjs/core/src/components/forms/common";
+@import "~@blueprintjs/core/src/components/tag/common";
+
+.pt-timezone-picker-popover {
+  min-width: 370px;
+}

packages/labs/src/components/timezone-picker/timezone-picker.md

@@ -0,0 +1,63 @@
+@# TimezonePicker
+
+`TimezonePicker` allows the user to select from a list of timezones.
+
+@reactExample TimezonePickerExample
+
+@## JavaScript API
+
+[Moment Timezone](http://momentjs.com/timezone/) is used internally
+for the list of available timezones and timezone metadata.
+
+This component can be used in controlled or uncontrolled mode.
+Use the `onChange` prop to listen for changes to the selected timezone.
+You can control the selected timezone by setting the `value` prop.
+Or, use the component in uncontrolled mode and specify an initial timezone by setting `defaultValue`.
+
+The `date` prop is used to determine the timezone offsets.
+This is because a timezone usually has more than one offset from UTC due to daylight saving time.
+See [here](https://momentjs.com/guides/#/lib-concepts/timezone-offset/)
+and [here](http://momentjs.com/timezone/docs/#/using-timezones/parsing-ambiguous-inputs/)
+for more information.
+
+The initial list (shown before filtering) shows one timezone per timezone offset,
+using the most populous location for each offset.
+Moment Timezone uses a similar heuristic for
+[guessing](http://momentjs.com/timezone/docs/#/using-timezones/guessing-user-timezone/) the user's timezone.
+
+<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
+    <h5>Local timezone detection</h5>
+    We detect the local timezone when the `showLocalTimezone` prop is used.
+    We cannot guarantee that we'll get the correct local timezone in all browsers.
+    In supported browsers, the [i18n API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/resolvedOptions) is used.
+    In other browsers, `Date` methods and a population heuristic are used.
+    See [Moment Timezone's documentation](https://momentjs.com/timezone/docs/#/using-timezones/guessing-user-timezone/)
+    for more information.
+</div>
+
+```tsx
+import { TimezonePicker } from "@blueprintjs/labs";
+
+export interface ITimezoneExampleState {
+    timezone: string;
+}
+
+export class TimezoneExample extends React.PureComponent<{}, ITimezoneExampleState> {
+    public state: ITimezoneExampleState = {
+        timezone: "",
+    };
+
+    public render() {
+        return (
+            <TimezonePicker
+                value={this.state.timezone}
+                onChange={this.handleTimezoneChange}
+            />
+        );
+    }
+
+    private handleTimezoneChange = (timezone: string) => this.setState({ timezone });
+}
+```
+
+@interface ITimezonePickerProps