From 92ac1aaac7154ab3a761f98505936c3235a16637 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 15 May 2019 15:56:58 -0400 Subject: [PATCH] change enum to const, fix lint errors --- .../OptionsMenu/OptionsMenu.test.js | 3 +- .../components/OptionsMenu/OptionsMenu.tsx | 19 +++++--- .../OptionsMenu/OptionsMenuItem.tsx | 34 +++++++------- .../OptionsMenu/OptionsMenuToggle.tsx | 44 ++++++++++--------- .../OptionsMenu/OptionsMenuToggleWithText.tsx | 10 ++--- .../src/components/OptionsMenu/index.ts | 1 - .../OptionsMenu/optionsMenuConstants.tsx | 9 ---- .../demos/OptionsMenuDemo/OptionsMenuDemo.tsx | 7 +-- 8 files changed, 63 insertions(+), 64 deletions(-) delete mode 100644 packages/patternfly-4/react-core/src/components/OptionsMenu/optionsMenuConstants.tsx 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 index 2b0103ed49a..91f8a741128 100644 --- 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 index 345ad2bca8b..713e24daf57 100644 --- 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{ /** Classes applied to root element of the Options menu */ @@ -21,9 +28,9 @@ export interface OptionsMenuProps extends React.HTMLProps{ /** Provides an accessible name for the Options menu */ ariaLabelMenu?: string; /** Indicates where menu will be aligned horizontally */ - position?: OneOf; - /** Display menu above or below Options menu toggle */ - direction?: OneOf; + position?: 'right' | 'left'; + /** Menu will open up or open down from the Options menu toggle */ + direction?: 'up' | 'down'; } export class OptionsMenu extends React.Component { diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItem.tsx b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItem.tsx index 7cab876792d..e5820986e64 100644 --- 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 { className: '', isSelected: false, isDisabled: false, - onSelect: () => {}, + onSelect: () => null as any, id: '', }; @@ -38,7 +38,9 @@ export class OptionsMenuItem extends React.Component { 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 { render() { const { onSelect, isDisabled, isSelected, className, children, id, ...props } = this.props; - return
  • - -
  • + return ( +
  • + +
  • + ); } } diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggle.tsx b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggle.tsx index 59934294eef..3ad158e6043 100644 --- 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 = ({ parentId = '', - onToggle = () => {}, + onToggle = () => null as any, isOpen = false, isPlain = false, isHovered = false, @@ -39,22 +39,24 @@ export const OptionsMenuToggle: React.FunctionComponent 'aria-label': ariaLabel = 'Options menu', }: OptionsMenuToggleProps) => { - return + return ( + + ); }; diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx b/packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx index b03dce04ae5..b98ab4da5e4 100644 --- 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 { /** 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 = ({ @@ -35,13 +35,13 @@ export const OptionsMenuToggleWithText: React.FunctionComponent {}, + 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) => (
    {this.state.toggleTemplateText}} />, 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, isOpen: this.state.modifiedIsOpen, isPlain: true, - direction: OptionsMenuDirection.up, - position: OptionsMenuPosition.right, + direction: "up", + position: "right", }; return (