diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts index 4305228320..25fd1e23b8 100644 --- a/packages/core/src/common/classes.ts +++ b/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()}`; } diff --git a/packages/core/src/common/errors.ts b/packages/core/src/common/errors.ts index cb1b082a79..07e334207b 100644 --- a/packages/core/src/common/errors.ts +++ b/packages/core/src/common/errors.ts @@ -72,7 +72,6 @@ export const SLIDER_ZERO_LABEL_STEP = ns + ` labelStepSize must be grea export const RANGESLIDER_NULL_VALUE = ns + ` 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 + ` iconName is ignored if title is omitted.`; export const DIALOG_WARN_NO_HEADER_CLOSE_BUTTON = diff --git a/packages/core/src/common/intent.ts b/packages/core/src/common/intent.ts index c2be82b703..8764b2810a 100644 --- a/packages/core/src/common/intent.ts +++ b/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", } diff --git a/packages/core/src/common/position.ts b/packages/core/src/common/position.ts index b2ad9a09bb..772a51a2e5 100644 --- a/packages/core/src/common/position.ts +++ b/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) { diff --git a/packages/core/src/common/tetherUtils.ts b/packages/core/src/common/tetherUtils.ts index ef3d29934c..f847cd7964 100644 --- a/packages/core/src/common/tetherUtils.ts +++ b/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.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.TOP_LEFT]: "bottom left", [Position.TOP]: "bottom center", [Position.TOP_RIGHT]: "bottom right", diff --git a/packages/core/src/components/collapse/collapse.tsx b/packages/core/src/components/collapse/collapse.tsx index 8ed87dce24..398ce4cc38 100644 --- a/packages/core/src/components/collapse/collapse.tsx +++ b/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", } /* diff --git a/packages/core/src/components/collapsible-list/collapsibleList.tsx b/packages/core/src/components/collapsible-list/collapsibleList.tsx index f9f3b8c135..ce2a411369 100644 --- a/packages/core/src/components/collapsible-list/collapsibleList.tsx +++ b/packages/core/src/components/collapsible-list/collapsibleList.tsx @@ -18,8 +18,8 @@ import { IPopoverProps, Popover } from "../popover/popover"; type CollapsibleItem = React.ReactElement; export enum CollapseFrom { - START, - END, + START = "start", + END = "end", } export interface ICollapsibleListProps extends IProps { diff --git a/packages/core/src/components/hotkeys/hotkeysEvents.ts b/packages/core/src/components/hotkeys/hotkeysEvents.ts index 4f0d705963..5cf6a2cce1 100644 --- a/packages/core/src/components/hotkeys/hotkeysEvents.ts +++ b/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 { diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx index 178dfc2c65..a0778b90a6 100644 --- a/packages/core/src/components/popover/popover.tsx +++ b/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 { diff --git a/packages/core/src/components/toast/toaster.tsx b/packages/core/src/components/toast/toaster.tsx index 77036a1ff9..74bc2f8f60 100644 --- a/packages/core/src/components/toast/toaster.tsx +++ b/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 ); } - protected validateProps(props: IToasterProps) { - if (props.position === Position.LEFT || props.position === Position.RIGHT) { - console.warn(TOASTER_WARN_LEFT_RIGHT); - } - } - private renderToast(toast: IToastOptions) { return ; } @@ -179,7 +182,7 @@ export class Toaster extends AbstractPureComponent } 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()}`); } diff --git a/packages/core/test/popover/arrowsTests.ts b/packages/core/test/popover/arrowsTests.ts index 49c062c8fc..7e165df102 100644 --- a/packages/core/test/popover/arrowsTests.ts +++ b/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> = { [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> = { [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, diff --git a/packages/datetime/src/common/dateUtils.ts b/packages/datetime/src/common/dateUtils.ts index cfdaf4aa32..738b60ca45 100644 --- a/packages/datetime/src/common/dateUtils.ts +++ b/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) { diff --git a/packages/datetime/src/common/months.ts b/packages/datetime/src/common/months.ts index 2e7dd0c51a..2836657315 100644 --- a/packages/datetime/src/common/months.ts +++ b/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, } diff --git a/packages/datetime/src/timePicker.tsx b/packages/datetime/src/timePicker.tsx index e27d435bb1..a22acc6942 100644 --- a/packages/datetime/src/timePicker.tsx +++ b/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 = { [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.HOUR]: DEFAULT_MAX_HOUR, [TimeUnit.MINUTE]: DEFAULT_MAX_MINUTE, [TimeUnit.SECOND]: DEFAULT_MAX_SECOND, diff --git a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx b/packages/docs-app/src/examples/core-examples/buttonsExample.tsx index 1346413b19..dcb2256896 100644 --- a/packages/docs-app/src/examples/core-examples/buttonsExample.tsx +++ b/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 { 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; diff --git a/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx b/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx index 67501accb9..75aaa7c0f4 100644 --- a/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx +++ b/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 this.setState({ collapseFrom })); + private handleChangeCollapse = handleStringChange((collapseFrom: CollapseFrom) => this.setState({ collapseFrom })); protected renderExample() { return ( diff --git a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx b/packages/docs-app/src/examples/core-examples/editableTextExample.tsx index 8419c4e704..6ccc67a820 100644 --- a/packages/docs-app/src/examples/core-examples/editableTextExample.tsx +++ b/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 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 })); diff --git a/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx b/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx index 468210da93..066d869581 100644 --- a/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx +++ b/packages/docs-app/src/examples/core-examples/numericInputBasicExample.tsx @@ -7,7 +7,7 @@ import * as classNames from "classnames"; import * as React from "react"; import { Classes, Intent, NumericInput, Position, Switch } from "@blueprintjs/core"; -import { BaseExample, handleBooleanChange, handleNumberChange } from "@blueprintjs/docs-theme"; +import { BaseExample, handleBooleanChange, handleNumberChange, handleStringChange } from "@blueprintjs/docs-theme"; import { IntentSelect } from "./common/intentSelect"; @@ -85,7 +85,7 @@ export class NumericInputBasicExample extends BaseExample this.setState({ maxValueIndex })); private handleMinValueChange = handleNumberChange(minValueIndex => this.setState({ minValueIndex })); - private handleIntentChange = handleNumberChange((intent: Intent) => this.setState({ intent })); + private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent })); private handleButtonPositionChange = handleNumberChange(buttonPositionIndex => { this.setState({ buttonPositionIndex }); diff --git a/packages/docs-app/src/examples/core-examples/popover2Example.tsx b/packages/docs-app/src/examples/core-examples/popover2Example.tsx index 4ab727a8e3..d455e5a3cd 100644 --- a/packages/docs-app/src/examples/core-examples/popover2Example.tsx +++ b/packages/docs-app/src/examples/core-examples/popover2Example.tsx @@ -74,7 +74,7 @@ export class Popover2Example extends BaseExample { protected className = "docs-popover2-example"; private handleExampleIndexChange = handleNumberChange(exampleIndex => this.setState({ exampleIndex })); - private handleInteractionChange = handleNumberChange(interactionKind => { + private handleInteractionChange = handleStringChange((interactionKind: PopoverInteractionKind) => { const hasBackdrop = this.state.hasBackdrop && interactionKind === PopoverInteractionKind.CLICK; this.setState({ interactionKind, hasBackdrop }); }); diff --git a/packages/docs-app/src/examples/core-examples/popoverExample.tsx b/packages/docs-app/src/examples/core-examples/popoverExample.tsx index c0b4baeb30..1424c3a15d 100644 --- a/packages/docs-app/src/examples/core-examples/popoverExample.tsx +++ b/packages/docs-app/src/examples/core-examples/popoverExample.tsx @@ -88,11 +88,11 @@ export class PopoverExample extends BaseExample { this.setState({ tetherConstraints: JSON.parse(constraints) }); }); private handleExampleIndexChange = handleNumberChange(exampleIndex => this.setState({ exampleIndex })); - private handleInteractionChange = handleNumberChange(interactionKind => { + private handleInteractionChange = handleStringChange((interactionKind: PopoverInteractionKind) => { const isModal = this.state.isModal && interactionKind === PopoverInteractionKind.CLICK; this.setState({ interactionKind, isModal }); }); - private handlePositionChange = handleNumberChange(position => this.setState({ position })); + private handlePositionChange = handleStringChange((position: Position) => this.setState({ position })); private toggleArrows = handleBooleanChange(useSmartArrowPositioning => { this.setState({ useSmartArrowPositioning }); diff --git a/packages/docs-app/src/examples/core-examples/progressExample.tsx b/packages/docs-app/src/examples/core-examples/progressExample.tsx index 00de2dc37b..453095f435 100644 --- a/packages/docs-app/src/examples/core-examples/progressExample.tsx +++ b/packages/docs-app/src/examples/core-examples/progressExample.tsx @@ -7,7 +7,8 @@ import * as React from "react"; import { Intent, ProgressBar, Slider, 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 IProgressExampleState { @@ -26,7 +27,7 @@ export class ProgressExample extends BaseExample { protected className = "docs-progress-example"; private handleIndeterminateChange = handleBooleanChange(hasValue => this.setState({ hasValue })); - private handleModifierChange = handleNumberChange(intent => this.setState({ intent })); + private handleModifierChange = handleStringChange((intent: Intent) => this.setState({ intent })); protected renderExample() { const { hasValue, intent, value } = this.state; diff --git a/packages/docs-app/src/examples/core-examples/toastExample.tsx b/packages/docs-app/src/examples/core-examples/toastExample.tsx index a566b3a14a..c6c77b6ed4 100644 --- a/packages/docs-app/src/examples/core-examples/toastExample.tsx +++ b/packages/docs-app/src/examples/core-examples/toastExample.tsx @@ -17,8 +17,9 @@ import { ProgressBar, Switch, Toaster, + ToasterPosition, } from "@blueprintjs/core"; -import { BaseExample, handleBooleanChange, handleNumberChange } from "@blueprintjs/docs-theme"; +import { BaseExample, handleBooleanChange, handleStringChange } from "@blueprintjs/docs-theme"; type IToastDemo = IToastProps & { button: string }; @@ -88,7 +89,7 @@ export class ToastExample extends BaseExample { toaster: (ref: Toaster) => (this.toaster = ref), }; - private handlePositionChange = handleNumberChange(position => this.setState({ position })); + private handlePositionChange = handleStringChange((position: ToasterPosition) => this.setState({ position })); private toggleAutoFocus = handleBooleanChange(autoFocus => this.setState({ autoFocus })); private toggleEscapeKey = handleBooleanChange(canEscapeKeyClear => this.setState({ canEscapeKeyClear })); diff --git a/packages/table-dev-app/src/features.tsx b/packages/table-dev-app/src/features.tsx index d16f7267fd..40d3a6a867 100644 --- a/packages/table-dev-app/src/features.tsx +++ b/packages/table-dev-app/src/features.tsx @@ -418,13 +418,15 @@ class AdjustableColumnsTable extends React.Component<{}, {}> { ReactDOM.render(, document.getElementById("table-cols")); +const intentRows: Intent[] = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.WARNING, Intent.DANGER]; + ReactDOM.render( getTableComponent( 3, 7, { cellRenderer(rowIndex: number, columnIndex: number) { - return {Utils.toBase26Alpha(columnIndex) + (rowIndex + 1)}; + return {Utils.toBase26Alpha(columnIndex) + (rowIndex + 1)}; }, }, { diff --git a/packages/table-dev-app/src/mutableTable.tsx b/packages/table-dev-app/src/mutableTable.tsx index 1b7702266a..5fd322d060 100644 --- a/packages/table-dev-app/src/mutableTable.tsx +++ b/packages/table-dev-app/src/mutableTable.tsx @@ -45,15 +45,15 @@ import { LocalStore } from "./localStore"; import { SlowLayoutStack } from "./slowLayoutStack"; export enum FocusStyle { - TAB, - TAB_OR_CLICK, + TAB = "tab", + TAB_OR_CLICK = "tab-or-click", } export enum CellContent { - EMPTY, - CELL_NAMES, - LONG_TEXT, - LARGE_JSON, + EMPTY = "empty", + CELL_NAMES = "cell-names", + LONG_TEXT = "long-text", + LARGE_JSON = "large-json", } type IMutableStateUpdateCallback = ( diff --git a/packages/table/src/cell/formats/truncatedFormat.tsx b/packages/table/src/cell/formats/truncatedFormat.tsx index 57762159aa..7cc4f86241 100644 --- a/packages/table/src/cell/formats/truncatedFormat.tsx +++ b/packages/table/src/cell/formats/truncatedFormat.tsx @@ -20,10 +20,10 @@ import { Locator } from "../../locator"; const CONTENT_DIV_WIDTH_DELTA = 25; export enum TruncatedPopoverMode { - ALWAYS, - NEVER, - WHEN_TRUNCATED, - WHEN_TRUNCATED_APPROX, + ALWAYS = "always", + NEVER = "never", + WHEN_TRUNCATED = "when-truncated", + WHEN_TRUNCATED_APPROX = "when-truncated-approx", } export interface ITrucatedFormateMeasureByApproximateOptions { diff --git a/packages/table/src/common/direction.ts b/packages/table/src/common/direction.ts index 932ee52a29..9c97ac90ef 100644 --- a/packages/table/src/common/direction.ts +++ b/packages/table/src/common/direction.ts @@ -5,8 +5,8 @@ */ export enum Direction { - UP, - DOWN, - LEFT, - RIGHT, + UP = "up", + DOWN = "down", + LEFT = "left", + RIGHT = "right", } diff --git a/packages/table/src/common/renderMode.ts b/packages/table/src/common/renderMode.ts index a91870d3e1..7e83bd2b31 100644 --- a/packages/table/src/common/renderMode.ts +++ b/packages/table/src/common/renderMode.ts @@ -11,7 +11,7 @@ export enum RenderMode { * the UI, but it also introduces a noticeable scan-line rendering artifact * as successive batches of cells finish rendering. */ - BATCH, + BATCH = "batch", /** * Renders all cells synchronously on initial mount, then renders cells in @@ -19,12 +19,12 @@ export enum RenderMode { * remove visual rendering artifacts when the table is first rendered, * wihout slowing scrolling performance to a crawl. */ - BATCH_ON_UPDATE, + BATCH_ON_UPDATE = "batch-on-update", /** * Disables the batch-rendering behavior, rendering all cells synchronously * at once. This may result in degraded performance on large tables and/or * on tables with complex cells. */ - NONE, + NONE = "none", } diff --git a/packages/table/src/quadrants/tableQuadrant.tsx b/packages/table/src/quadrants/tableQuadrant.tsx index dacad8815a..dfba1105ed 100644 --- a/packages/table/src/quadrants/tableQuadrant.tsx +++ b/packages/table/src/quadrants/tableQuadrant.tsx @@ -16,23 +16,23 @@ export enum QuadrantType { /** * The main quadrant beneath any frozen rows or columns. */ - MAIN, + MAIN = "main", /** * The top quadrant, containing column headers and frozen rows. */ - TOP, + TOP = "top", /** * The left quadrant, containing row headers and frozen columns. */ - LEFT, + LEFT = "left", /** - * The top-left quadrant, containing the headers and cells common to both the frozen columns and - * frozen rows. + * The top-left quadrant, containing the headers and cells common to both + * the frozen columns and frozen rows. */ - TOP_LEFT, + TOP_LEFT = "top-left", } export interface ITableQuadrantProps extends IProps { diff --git a/packages/table/src/quadrants/tableQuadrantStack.tsx b/packages/table/src/quadrants/tableQuadrantStack.tsx index c09aa24926..f56ff1811b 100644 --- a/packages/table/src/quadrants/tableQuadrantStack.tsx +++ b/packages/table/src/quadrants/tableQuadrantStack.tsx @@ -258,7 +258,7 @@ export class TableQuadrantStack extends AbstractComponent = { [QuadrantType.MAIN]: {}, [QuadrantType.TOP]: {}, [QuadrantType.LEFT]: {}, diff --git a/packages/table/src/regions.ts b/packages/table/src/regions.ts index c589c880f7..dc0be154d8 100644 --- a/packages/table/src/regions.ts +++ b/packages/table/src/regions.ts @@ -17,22 +17,22 @@ export enum RegionCardinality { /** * A region that contains a finite rectangular group of table cells */ - CELLS, + CELLS = "cells", /** * A region that represents all cells within 1 or more rows. */ - FULL_ROWS, + FULL_ROWS = "full-rows", /** * A region that represents all cells within 1 or more columns. */ - FULL_COLUMNS, + FULL_COLUMNS = "full-columns", /** * A region that represents all cells in the table. */ - FULL_TABLE, + FULL_TABLE = "full-table", } /** @@ -53,24 +53,21 @@ export const SelectionModes = { ROWS_ONLY: [RegionCardinality.FULL_ROWS], }; -export type ColumnLoadingOption = "cells" | "column-header"; -export const ColumnLoadingOption = { - CELLS: "cells" as ColumnLoadingOption, - HEADER: "column-header" as ColumnLoadingOption, -}; +export enum ColumnLoadingOption { + CELLS = "cells", + HEADER = "column-header", +} -export type RowLoadingOption = "cells" | "row-header"; -export const RowLoadingOption = { - CELLS: "cells" as RowLoadingOption, - HEADER: "row-header" as RowLoadingOption, -}; +export enum RowLoadingOption { + CELLS = "cells", + HEADER = "row-header", +} -export type TableLoadingOption = ColumnLoadingOption | RowLoadingOption; -export const TableLoadingOption = { - CELLS: "cells" as TableLoadingOption, - COLUMN_HEADERS: ColumnLoadingOption.HEADER as TableLoadingOption, - ROW_HEADERS: RowLoadingOption.HEADER as TableLoadingOption, -}; +export enum TableLoadingOption { + CELLS = "cells", + COLUMN_HEADERS = "column-header", + ROW_HEADERS = "row-header", +} export interface IStyledRegionGroup { className?: string; @@ -112,29 +109,26 @@ export class Regions { * an unbounded interval. Therefore, an example of a region containing the * second and third columns would be: * - * { - * rows: null, - * cols: [1, 2] - * } + * ```js + * { rows: null, cols: [1, 2] } + * ``` * * In this case, this method would return `RegionCardinality.FULL_COLUMNS`. * * If both rows and columns are unbounded, then the region covers the * entire table. Therefore, a region like this: * - * { - * rows: null, - * cols: null - * } + * ```js + * { rows: null, cols: null } + * ``` * * will return `RegionCardinality.FULL_TABLE`. * * An example of a region containing a single cell in the table would be: * - * { - * rows: [5, 5], - * cols: [2, 2] - * } + * ```js + * { rows: [5, 5], cols: [2, 2] } + * ``` * * In this case, this method would return `RegionCardinality.CELLS`. */ diff --git a/packages/table/test/loadingOptionsTests.tsx b/packages/table/test/loadingOptionsTests.tsx index a8a84bee3d..bf78f7aa65 100644 --- a/packages/table/test/loadingOptionsTests.tsx +++ b/packages/table/test/loadingOptionsTests.tsx @@ -181,7 +181,7 @@ function testLoadingOptionOverrides( columnLoadingOptions != null ) { // cast is safe because cellType is guaranteed to not be TableLoadingOption.ROW_HEADERS - const loading = columnLoadingOptions.indexOf(cellType as ColumnLoadingOption) >= 0; + const loading = columnLoadingOptions.indexOf((cellType as any) as ColumnLoadingOption) >= 0; expectCellLoading(cell, cellType, loading); } else if (tableLoadingOptions != null) { expectCellLoading(cell, cellType, tableLoadingOptions.indexOf(cellType) >= 0); diff --git a/packages/test-commons/src/utils.ts b/packages/test-commons/src/utils.ts index 162853ef00..f8857bd232 100644 --- a/packages/test-commons/src/utils.ts +++ b/packages/test-commons/src/utils.ts @@ -38,12 +38,12 @@ export function dispatchTestKeyboardEvent(target: EventTarget, eventType: string * Enum of possible browsers */ enum Browser { - CHROME, - EDGE, - FIREFOX, - IE, - UNKNOWN, - WEBKIT, + CHROME = "Chrome", + EDGE = "Edge", + FIREFOX = "Firefox", + IE = "IE", + UNKNOWN = "unknown", + WEBKIT = "WebKit", } /**