change enum to const, fix lint errors

patternfly · May 15, 2019 · 92ac1aa · 92ac1aa
1 parent 9e8a767
commit 92ac1aa
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 64 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.test.js b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.test.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { OptionsMenu } from './OptionsMenu';
+import { OptionsMenu, OptionsMenuDirection, OptionsMenuPosition } from './OptionsMenu';
 import { OptionsMenuToggle } from './OptionsMenuToggle';
 import { OptionsMenuItemGroup } from './OptionsMenuItemGroup';
 import { OptionsMenuItem } from './OptionsMenuItem';
 import { OptionsMenuSeparator } from './OptionsMenuSeparator';
-import { OptionsMenuDirection, OptionsMenuPosition } from './optionsMenuConstants';
 import { OptionsMenuToggleWithText } from './OptionsMenuToggleWithText';
 
 const menuItems = [

diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.tsx b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.tsx
@@ -1,9 +1,16 @@
 import * as React from 'react';
 import styles from '@patternfly/patternfly/components/OptionsMenu/options-menu.css';
 import { css, getModifier } from '@patternfly/react-styles';
-import { OptionsMenuDirection, OptionsMenuPosition } from './optionsMenuConstants';
-import { OneOf } from '../../helpers';
-import { DropdownDirection, DropdownPosition } from '../Dropdown';
+
+export const OptionsMenuPosition = {
+  right: 'right',
+  left: 'left'
+};
+
+export const OptionsMenuDirection = {
+  up: 'up',
+  down: 'down'
+};
 
 export interface OptionsMenuProps extends React.HTMLProps<HTMLDivElement>{
   /** Classes applied to root element of the Options menu */
@@ -21,9 +28,9 @@ export interface OptionsMenuProps extends React.HTMLProps<HTMLDivElement>{
   /** Provides an accessible name for the Options menu */
   ariaLabelMenu?: string;
   /** Indicates where menu will be aligned horizontally */
-  position?: OneOf<typeof DropdownPosition, keyof typeof DropdownPosition>;
-  /** Display menu above or below Options menu toggle */
-  direction?: OneOf<typeof DropdownDirection, keyof typeof DropdownDirection>;
+  position?: 'right' | 'left';
+  /** Menu will open up or open down from the Options menu toggle */
+  direction?: 'up' | 'down';
 }
 
 export class OptionsMenu extends React.Component<OptionsMenuProps> {

diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItem.tsx b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItem.tsx
@@ -27,7 +27,7 @@ export class OptionsMenuItem extends React.Component<OptionsMenuItemProps> {
     className: '',
     isSelected: false,
     isDisabled: false,
-    onSelect: () => {},
+    onSelect: () => null as any,
     id: '',
   };
 
@@ -38,7 +38,9 @@ export class OptionsMenuItem extends React.Component<OptionsMenuItemProps> {
   onKeyDown = (event:React.KeyboardEvent) => {
     // Detected key press on this item, notify the menu parent so that the appropriate
     // item can be focused
-    if (event.keyCode === KEY_CODES.TAB) return;
+    if (event.keyCode === KEY_CODES.TAB) {
+      return;
+    }
     event.preventDefault();
     if (event.keyCode === KEY_CODES.ENTER) {
       this.props.onSelect(event);
@@ -47,18 +49,20 @@ export class OptionsMenuItem extends React.Component<OptionsMenuItemProps> {
 
   render() {
     const { onSelect, isDisabled, isSelected, className, children, id, ...props } = this.props;
-    return <li>
-      <button
-        className={css(styles.optionsMenuMenuItem, isDisabled && getModifier(styles, 'disabled'), className)}
-        aria-disabled={isDisabled}
-        onClick={onSelect}
-        onKeyDown={this.onKeyDown}
-        aria-selected={isSelected}
-        id={id}
-        {...props}>
-        {children}
-        <i className={css(styles.optionsMenuMenuItemIcon)} aria-hidden={true} hidden={!isSelected}><CheckIcon/></i>
-      </button>
-    </li>
+    return (
+      <li>
+        <button
+          className={css(styles.optionsMenuMenuItem, isDisabled && getModifier(styles, 'disabled'), className)}
+          aria-disabled={isDisabled}
+          onClick={onSelect}
+          onKeyDown={this.onKeyDown}
+          aria-selected={isSelected}
+          id={id}
+          {...props}>
+          {children}
+          <i className={css(styles.optionsMenuMenuItemIcon)} aria-hidden hidden={!isSelected}><CheckIcon/></i>
+        </button>
+      </li>
+    );
   }
 }
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggle.tsx b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggle.tsx
@@ -20,15 +20,15 @@ export interface OptionsMenuToggleProps  extends React.HTMLProps<HTMLButtonEleme
   isActive?: boolean;
   /** hide the toggle caret */
   hideCaret?: boolean;
-  /** Provides an accessible name for the button when an icon is used instead of text*/
-  "aria-label"?: string;
+  /** Provides an accessible name for the button when an icon is used instead of text */
+  'aria-label'?: string;
   /** Content to be rendered in the Options menu toggle button */
   toggleTemplate?: React.ReactElement
 }
 
 export const OptionsMenuToggle: React.FunctionComponent<OptionsMenuToggleProps> = ({
     parentId = '',
-    onToggle = () => {},
+    onToggle = () => null as any,
     isOpen = false,
     isPlain = false,
     isHovered = false,
@@ -39,22 +39,24 @@ export const OptionsMenuToggle: React.FunctionComponent<OptionsMenuToggleProps>
     'aria-label': ariaLabel = 'Options menu',
 }: OptionsMenuToggleProps) => {
 
-  return <button
-    className={css(styles.optionsMenuToggle,
-      isPlain && getModifier(styles, 'plain'),
-      isHovered && getModifier(styles, 'hover'),
-      isActive && getModifier(styles, 'active'),
-      isFocused && getModifier(styles, 'focus')
-    )}
-    id={`${parentId}-toggle`}
-    aria-haspopup="listbox"
-    aria-label={ariaLabel}
-    aria-expanded={isOpen}
-    onClick={onToggle}
-  >
-    {toggleTemplate && (!isPlain
-      ? <span className={css(styles.optionsMenuToggleText)}>{toggleTemplate}</span>
-      : <React.Fragment>{toggleTemplate}</React.Fragment>)}
-    {!hideCaret && <CaretDownIcon aria-hidden className={css(styles.optionsMenuToggleIcon)}/>}
-  </button>
+  return (
+    <button
+      className={css(styles.optionsMenuToggle,
+        isPlain && getModifier(styles, 'plain'),
+        isHovered && getModifier(styles, 'hover'),
+        isActive && getModifier(styles, 'active'),
+        isFocused && getModifier(styles, 'focus')
+      )}
+      id={`${parentId}-toggle`}
+      aria-haspopup="listbox"
+      aria-label={ariaLabel}
+      aria-expanded={isOpen}
+      onClick={onToggle}
+    >
+      {toggleTemplate && (!isPlain
+        ? <span className={css(styles.optionsMenuToggleText)}>{toggleTemplate}</span>
+        : <React.Fragment>{toggleTemplate}</React.Fragment>)}
+      {!hideCaret && <CaretDownIcon aria-hidden className={css(styles.optionsMenuToggleIcon)}/>}
+    </button>
+  );
 };
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx
@@ -5,9 +5,9 @@ import styles from '@patternfly/patternfly/components/OptionsMenu/options-menu.c
 export interface OptionsMenuToggleWithTextProps extends React.HTMLProps<HTMLDivElement> {
   /** Id of the parent Options menu component */
   parentId?: string;
-  /** Content to be rendered inside the Options menu toggle as text or another non-interactive element*/
+  /** Content to be rendered inside the Options menu toggle as text or another non-interactive element */
   toggleText: React.ReactNode;
-  /** classes to be added to the Options menu toggle text*/
+  /** classes to be added to the Options menu toggle text */
   toggleTextClassName?: string;
   /** Content to be rendered inside the Options menu toggle button */
   toggleButtonContents: React.ReactNode;
@@ -26,7 +26,7 @@ export interface OptionsMenuToggleWithTextProps extends React.HTMLProps<HTMLDivE
   /** Forces display of the active state of the Options menu button */
   isActive?: boolean;
   /** Provides an accessible name for the button when an icon is used instead of text */
-  "aria-label"?: string;
+  'aria-label'?: string;
 }
 
 export const OptionsMenuToggleWithText: React.FunctionComponent<OptionsMenuToggleWithTextProps> = ({
@@ -35,13 +35,13 @@ export const OptionsMenuToggleWithText: React.FunctionComponent<OptionsMenuToggl
   toggleTextClassName = '',
   toggleButtonContents,
   toggleButtonContentsClassName = '',
-  onToggle = () => {},
+  onToggle = () => null as any,
   isOpen = false,
   isPlain = false,
   isHovered = false,
   isActive = false,
   isFocused = false,
-  "aria-label": ariaLabel = 'Options menu'
+  'aria-label': ariaLabel = 'Options menu'
 }: OptionsMenuToggleWithTextProps) => (
 
   <div className={css(styles.optionsMenuToggle,

diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/index.ts b/packages/patternfly-4/react-core/src/components/OptionsMenu/index.ts
@@ -3,5 +3,4 @@ export * from './OptionsMenuToggle';
 export * from './OptionsMenuItemGroup';
 export * from './OptionsMenuItem';
 export * from './OptionsMenuSeparator';
-export * from './optionsMenuConstants';
 export * from './OptionsMenuToggleWithText';
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/optionsMenuConstants.tsx b/packages/patternfly-4/react-core/src/components/OptionsMenu/optionsMenuConstants.tsx
diff --git a/...-4/react-integration/demo-app-ts/src/components/demos/OptionsMenuDemo/OptionsMenuDemo.tsx b/...-4/react-integration/demo-app-ts/src/components/demos/OptionsMenuDemo/OptionsMenuDemo.tsx
@@ -60,9 +60,6 @@ export class OptionsMenuDemo extends React.Component<React.HTMLProps<HTMLDivElem
         onToggle={this.singleOptionOnToggle}
         toggleTemplate={<React.Fragment>{this.state.toggleTemplateText}</React.Fragment>} />,
       isOpen: this.state.singleOptionIsOpen,
-      isPlain: true,
-      direction: OptionsMenuDirection.up,
-      position: OptionsMenuPosition.right,
     };
 
     const myModifiedMenuProps: OptionsMenuProps = {
@@ -82,8 +79,8 @@ export class OptionsMenuDemo extends React.Component<React.HTMLProps<HTMLDivElem
         onToggle={this.modifiedOnToggle} />,
       isOpen: this.state.modifiedIsOpen,
       isPlain: true,
-      direction: OptionsMenuDirection.up,
-      position: OptionsMenuPosition.right,
+      direction: "up",
+      position: "right",
     };
 
     return (