Enum Stringification

packages/core/src/common/classes.ts

@@ -202,8 +202,8 @@ export function iconClass(iconName?: string) {
 }
 
 export function intentClass(intent = Intent.NONE) {
-    if (intent === Intent.NONE || Intent[intent] == null) {
+    if (intent == null || intent === Intent.NONE) {
         return undefined;
     }
-    return `pt-intent-${Intent[intent].toLowerCase()}`;
+    return `pt-intent-${intent.toLowerCase()}`;
 }

packages/core/src/common/errors.ts

@@ -72,7 +72,6 @@ export const SLIDER_ZERO_LABEL_STEP = ns + ` <Slider> labelStepSize must be grea
 export const RANGESLIDER_NULL_VALUE = ns + ` <RangeSlider> value prop must be an array of two non-null numbers.`;
 
 export const TOASTER_WARN_INLINE = ns + ` Toaster.create() ignores inline prop as it always creates a new element.`;
-export const TOASTER_WARN_LEFT_RIGHT = ns + ` Toaster does not support LEFT or RIGHT positions.`;
 
 export const DIALOG_WARN_NO_HEADER_ICON = ns + ` <Dialog> iconName is ignored if title is omitted.`;
 export const DIALOG_WARN_NO_HEADER_CLOSE_BUTTON =

packages/core/src/common/intent.ts

@@ -8,9 +8,9 @@
  * The four basic intents.
  */
 export enum Intent {
-    NONE = -1,
-    PRIMARY,
-    SUCCESS,
-    WARNING,
-    DANGER,
+    NONE = "none",
+    PRIMARY = "primary",
+    SUCCESS = "success",
+    WARNING = "warning",
+    DANGER = "danger",
 }

packages/core/src/common/position.ts

@@ -5,18 +5,18 @@
  */
 
 export enum Position {
-    TOP_LEFT,
-    TOP,
-    TOP_RIGHT,
-    RIGHT_TOP,
-    RIGHT,
-    RIGHT_BOTTOM,
-    BOTTOM_RIGHT,
-    BOTTOM,
-    BOTTOM_LEFT,
-    LEFT_BOTTOM,
-    LEFT,
-    LEFT_TOP,
+    TOP_LEFT = "top-left",
+    TOP = "top",
+    TOP_RIGHT = "top-right",
+    RIGHT_TOP = "right-top",
+    RIGHT = "right",
+    RIGHT_BOTTOM = "right-bottom",
+    BOTTOM_RIGHT = "bottom-right",
+    BOTTOM = "bottom",
+    BOTTOM_LEFT = "bottom-left",
+    LEFT_BOTTOM = "left-bottom",
+    LEFT = "left",
+    LEFT_TOP = "left-top",
 }
 
 export function isPositionHorizontal(position: Position) {

packages/core/src/common/tetherUtils.ts

@@ -54,8 +54,8 @@ export function createTetherOptions(
 }
 
 /** @internal */
-export function getTargetAttachment(position: Position) {
-    const attachments: { [p: number]: string } = {
+export function getTargetAttachment(position: Position): string {
+    const attachments: Record<Position, string> = {
         [Position.TOP_LEFT]: "top left",
         [Position.TOP]: "top center",
         [Position.TOP_RIGHT]: "top right",
@@ -73,8 +73,8 @@ export function getTargetAttachment(position: Position) {
 }
 
 /** @internal */
-export function getPopoverAttachment(position: Position) {
-    const attachments: { [p: number]: string } = {
+export function getPopoverAttachment(position: Position): string {
+    const attachments: Record<Position, string> = {
         [Position.TOP_LEFT]: "bottom left",
         [Position.TOP]: "bottom center",
         [Position.TOP_RIGHT]: "bottom right",

packages/core/src/components/collapse/collapse.tsx

@@ -49,11 +49,11 @@ export interface ICollapseState {
 }
 
 export enum AnimationStates {
-    CLOSED,
-    OPENING,
-    OPEN,
-    CLOSING_START,
-    CLOSING_END,
+    CLOSED = "closed",
+    OPENING = "opening",
+    OPEN = "open",
+    CLOSING_START = "closing-start",
+    CLOSING_END = "closing-end",
 }
 
 /*

packages/core/src/components/collapsible-list/collapsibleList.tsx

@@ -18,8 +18,8 @@ import { IPopoverProps, Popover } from "../popover/popover";
 type CollapsibleItem = React.ReactElement<IMenuItemProps>;
 
 export enum CollapseFrom {
-    START,
-    END,
+    START = "start",
+    END = "end",
 }
 
 export interface ICollapsibleListProps extends IProps {

packages/core/src/components/hotkeys/hotkeysEvents.ts

@@ -15,8 +15,8 @@ import { hideHotkeysDialogAfterDelay, isHotkeysDialogShowing, showHotkeysDialog
 const SHOW_DIALOG_KEY = "?";
 
 export enum HotkeyScope {
-    LOCAL,
-    GLOBAL,
+    LOCAL = "local",
+    GLOBAL = "global",
 }
 
 export interface IHotkeyAction {

packages/core/src/components/popover/popover.tsx

@@ -35,10 +35,10 @@ const SMART_POSITIONING = {
 };
 
 export enum PopoverInteractionKind {
-    CLICK,
-    CLICK_TARGET_ONLY,
-    HOVER,
-    HOVER_TARGET_ONLY,
+    CLICK = "click",
+    CLICK_TARGET_ONLY = "click-target",
+    HOVER = "hover",
+    HOVER_TARGET_ONLY = "hover-target",
 }
 
 export interface IPopoverProps extends IOverlayableProps, IProps {

packages/core/src/components/toast/toaster.tsx

@@ -10,7 +10,7 @@ import * as ReactDOM from "react-dom";
 
 import { AbstractPureComponent } from "../../common/abstractPureComponent";
 import * as Classes from "../../common/classes";
-import { TOASTER_WARN_INLINE, TOASTER_WARN_LEFT_RIGHT } from "../../common/errors";
+import { TOASTER_WARN_INLINE } from "../../common/errors";
 import { ESCAPE } from "../../common/keys";
 import { Position } from "../../common/position";
 import { IProps } from "../../common/props";
@@ -19,6 +19,13 @@ import { Overlay } from "../overlay/overlay";
 import { IToastProps, Toast } from "./toast";
 
 export type IToastOptions = IToastProps & { key?: string };
+export type ToasterPosition =
+    | Position.TOP
+    | Position.TOP_LEFT
+    | Position.TOP_RIGHT
+    | Position.BOTTOM
+    | Position.BOTTOM_LEFT
+    | Position.BOTTOM_RIGHT;
 
 export interface IToaster {
     /** Show a new toast to the user. Returns the unique key of the new toast. */
@@ -66,11 +73,13 @@ export interface IToasterProps extends IProps {
     inline?: boolean;
 
     /**
-     * Position of `Toaster` within its container. Note that `LEFT` and `RIGHT` are disallowed
-     * because Toaster only supports the top and bottom edges.
+     * Position of `Toaster` within its container.
+     *
+     * Note that only `TOP` and `BOTTOM` are supported because Toaster only
+     * supports the top and bottom edge positioning.
      * @default Position.TOP
      */
-    position?: Position;
+    position?: ToasterPosition;
 }
 
 export interface IToasterState {
@@ -163,12 +172,6 @@ export class Toaster extends AbstractPureComponent<IToasterProps, IToasterState>
         );
     }
 
-    protected validateProps(props: IToasterProps) {
-        if (props.position === Position.LEFT || props.position === Position.RIGHT) {
-            console.warn(TOASTER_WARN_LEFT_RIGHT);
-        }
-    }
-
     private renderToast(toast: IToastOptions) {
         return <Toast {...toast} onDismiss={this.getDismissHandler(toast)} />;
     }
@@ -179,7 +182,7 @@ export class Toaster extends AbstractPureComponent<IToasterProps, IToasterState>
     }
 
     private getPositionClasses() {
-        const positions = Position[this.props.position].split("_");
+        const positions = this.props.position.split("-");
         // NOTE that there is no -center class because that's the default style
         return positions.map(p => `${Classes.TOAST_CONTAINER}-${p.toLowerCase()}`);
     }

packages/core/test/popover/arrowsTests.ts

@@ -19,7 +19,7 @@ describe("Arrows", () => {
     const marginTop = Arrows.MIN_ARROW_SPACING - (dimensions.height - arrowSize) / 2;
 
     describe("getPopoverTransformOrigin", () => {
-        const origins: { [pos: number]: string } = {
+        const origins: Partial<Record<Position, string>> = {
             [Position.TOP]: undefined,
             [Position.TOP_LEFT]: `${offsetX}px bottom`,
             [Position.TOP_RIGHT]: `calc(100% - ${offsetX}px) bottom`,
@@ -29,16 +29,16 @@ describe("Arrows", () => {
         };
 
         for (const key of Object.keys(origins)) {
-            const position: Position = +key;
+            const position = key as Position;
             const value: string = origins[position];
-            it(`Position.${Position[position]} => ${value}`, () => {
+            it(`${position} => ${value}`, () => {
                 assert.deepEqual(Arrows.getPopoverTransformOrigin(position, arrowSize, dimensions), value);
             });
         }
     });
 
     describe("getArrowPositionStyles", () => {
-        const styles: { [pos: number]: CSSProperties[] } = {
+        const styles: Partial<Record<Position, CSSProperties[]>> = {
             [Position.TOP_LEFT]: [{ left: offsetX }, { marginLeft: -0 }],
             [Position.TOP_RIGHT]: [{ right: offsetX }, { marginLeft: 0 }],
             [Position.BOTTOM_RIGHT]: [{ right: offsetX }, { marginLeft: 0 }],
@@ -47,8 +47,8 @@ describe("Arrows", () => {
         };
 
         for (const key of Object.keys(styles)) {
-            const position: Position = +key;
-            it(`Position.${Position[position]}`, () => {
+            const position = key as Position;
+            it(position, () => {
                 const [expectedArrow, expectedContainer] = styles[position];
                 const { arrow, container } = Arrows.getArrowPositionStyles(
                     position,

packages/datetime/src/common/dateUtils.ts

@@ -12,8 +12,8 @@ export type DateRange = [Date | undefined, Date | undefined];
 export type MomentDateRange = [moment.Moment, moment.Moment];
 
 export enum DateRangeBoundary {
-    START,
-    END,
+    START = "start",
+    END = "end",
 }
 
 export function areEqual(date1: Date, date2: Date) {

packages/datetime/src/common/months.ts

@@ -4,17 +4,23 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+/**
+ * Enumeration of calendar months.
+ *
+ * Note that the enum values are numbers (with January as `0`) so they can be
+ * easily compared to `date.getMonth()`.
+ */
 export const enum Months {
-    JANUARY,
-    FEBRUARY,
-    MARCH,
-    APRIL,
-    MAY,
-    JUNE,
-    JULY,
-    AUGUST,
-    SEPTEMBER,
-    OCTOBER,
-    NOVEMBER,
-    DECEMBER,
+    JANUARY = 0,
+    FEBRUARY = 1,
+    MARCH = 2,
+    APRIL = 3,
+    MAY = 4,
+    JUNE = 5,
+    JULY = 6,
+    AUGUST = 7,
+    SEPTEMBER = 8,
+    OCTOBER = 9,
+    NOVEMBER = 10,
+    DECEMBER = 11,
 }

packages/datetime/src/timePicker.tsx

@@ -13,9 +13,9 @@ import * as DateUtils from "./common/dateUtils";
 import * as Utils from "./common/utils";
 
 export enum TimePickerPrecision {
-    MINUTE,
-    SECOND,
-    MILLISECOND,
+    MINUTE = 0,
+    SECOND = 1,
+    MILLISECOND = 2,
 }
 
 export interface ITimePickerProps extends IProps {
@@ -382,10 +382,10 @@ export class TimePicker extends React.Component<ITimePickerProps, ITimePickerSta
 }
 
 enum TimeUnit {
-    HOUR,
-    MINUTE,
-    SECOND,
-    MS,
+    HOUR = "hour",
+    MINUTE = "minute",
+    SECOND = "second",
+    MS = "ms",
 }
 
 function formatTime(time: number, unit: TimeUnit) {
@@ -454,7 +454,7 @@ function loopTime(time: number, unit: TimeUnit) {
 }
 
 function minTime(unit: TimeUnit) {
-    const min: { [unit: number]: number } = {
+    const min: Record<TimeUnit, number> = {
         [TimeUnit.HOUR]: DEFAULT_MIN_HOUR,
         [TimeUnit.MINUTE]: DEFAULT_MIN_MINUTE,
         [TimeUnit.SECOND]: DEFAULT_MIN_SECOND,
@@ -464,7 +464,7 @@ function minTime(unit: TimeUnit) {
 }
 
 function maxTime(unit: TimeUnit) {
-    const max: { [unit: number]: number } = {
+    const max: Record<TimeUnit, number> = {
         [TimeUnit.HOUR]: DEFAULT_MAX_HOUR,
         [TimeUnit.MINUTE]: DEFAULT_MAX_MINUTE,
         [TimeUnit.SECOND]: DEFAULT_MAX_SECOND,

packages/docs-app/src/examples/core-examples/buttonsExample.tsx

@@ -8,7 +8,8 @@ import * as classNames from "classnames";
 import * as React from "react";
 
 import { AnchorButton, Button, Classes, Intent, Switch } from "@blueprintjs/core";
-import { BaseExample, handleBooleanChange, handleNumberChange } from "@blueprintjs/docs-theme";
+import { BaseExample, handleBooleanChange, handleStringChange } from "@blueprintjs/docs-theme";
+
 import { IntentSelect } from "./common/intentSelect";
 
 export interface IButtonsExampleState {
@@ -36,7 +37,7 @@ export class ButtonsExample extends BaseExample<IButtonsExampleState> {
     private handleLargeChange = handleBooleanChange(large => this.setState({ large }));
     private handleLoadingChange = handleBooleanChange(loading => this.setState({ loading }));
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
-    private handleIntentChange = handleNumberChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
 
     private wiggleTimeoutId: number;
 

packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx

@@ -16,7 +16,7 @@ import {
     RadioGroup,
     Slider,
 } from "@blueprintjs/core";
-import { BaseExample, handleNumberChange } from "@blueprintjs/docs-theme";
+import { BaseExample, handleStringChange } from "@blueprintjs/docs-theme";
 
 export interface ICollapsibleListExampleState {
     collapseFrom?: CollapseFrom;
@@ -34,7 +34,7 @@ export class CollapsibleListExample extends BaseExample<ICollapsibleListExampleS
         visibleItemCount: 3,
     };
 
-    private handleChangeCollapse = handleNumberChange(collapseFrom => this.setState({ collapseFrom }));
+    private handleChangeCollapse = handleStringChange((collapseFrom: CollapseFrom) => this.setState({ collapseFrom }));
 
     protected renderExample() {
         return (

packages/docs-app/src/examples/core-examples/editableTextExample.tsx

@@ -8,7 +8,8 @@ import * as classNames from "classnames";
 import * as React from "react";
 
 import { Classes, EditableText, Intent, NumericInput, Switch } from "@blueprintjs/core";
-import { BaseExample, handleBooleanChange, handleNumberChange } from "@blueprintjs/docs-theme";
+import { BaseExample, handleBooleanChange, handleStringChange } from "@blueprintjs/docs-theme";
+
 import { IntentSelect } from "./common/intentSelect";
 
 const INPUT_ID = "EditableTextExample-max-length";
@@ -28,7 +29,7 @@ export class EditableTextExample extends BaseExample<IEditableTextExampleState>
         selectAllOnFocus: false,
     };
 
-    private handleIntentChange = handleNumberChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
     private toggleSelectAll = handleBooleanChange(selectAllOnFocus => this.setState({ selectAllOnFocus }));
     private toggleSwap = handleBooleanChange(confirmOnEnterKey => this.setState({ confirmOnEnterKey }));