FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(OptionsMenu): Options Menu Component Typescript Conversion by nicolethoen · Pull Request #2002 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

feat(OptionsMenu): Options Menu Component Typescript Conversion #2002

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
redallen merged 16 commits into from
May 30, 2019
Conversation 35 Commits 16 Checks 0 Files changed
Merged

feat(OptionsMenu): Options Menu Component Typescript Conversion #2002

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f693a4c
beginning of Options Menu Typescript Conversion
nicolethoen May 2, 2019
1801e90
fix OptionsMenuToggle component
nicolethoen May 14, 2019
124a5ac
beginning of Options Menu Typescript Conversion
nicolethoen May 2, 2019
c396eb4
fix OptionsMenuToggle component
nicolethoen May 14, 2019
37d9f31
beginning of Options Menu Typescript Conversion
nicolethoen May 2, 2019
a85180c
fix OptionsMenuToggle component
nicolethoen May 14, 2019
f251212
next commit
nicolethoen May 15, 2019
894e933
another commit
nicolethoen May 15, 2019
ed022bc
modify docs css to allow overflow from examples
nicolethoen May 15, 2019
c7f1d6e
update props to avoid breaking changes
nicolethoen May 15, 2019
c0055d2
change enum to const, fix lint errors
nicolethoen May 15, 2019
25aae04
use enum instaead of const
nicolethoen May 16, 2019
5ab93dc
Changes per PR comments
nicolethoen May 22, 2019
c6384d0
latest updates per PR comments
nicolethoen May 29, 2019
26130de
another round of changes to address PR comments
nicolethoen May 29, 2019
0bfbbe2
more PR comment changes
nicolethoen May 29, 2019
File filter

Filter by extension

Filter by extension .js  (9) .md  (1) .scss  (1) .snap  (1) .ts  (12) .tsx  (7) All 6 file types selected
Deleted files Viewed files
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Unified
Split
Hide whitespace
Diff view
Unified
Split
Hide whitespace
19 changes: 0 additions & 19 deletions packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.d.ts
Show comments
View file
Open in desktop

This file was deleted.

72 changes: 0 additions & 72 deletions packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.js
Show comments
View file
Open in desktop

This file was deleted.

103 changes: 36 additions & 67 deletions packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.md
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
title: "Options menu"
cssPrefix: "pf-c-options-menu"
propComponents: ['OptionsMenu', 'OptionsMenuItem', 'OptionsMenuSeparator', 'OptionsMenuToggle', 'OptionsMenuToggleWithText']
typescript: true
---
import React from 'react';
import {
Expand All @@ -26,9 +27,7 @@ class SingleOption extends React.Component {
super(props);
this.state = {
isOpen: false,
toggleTemplateProps: {
text: "Options menu"
},
toggleTemplateText: "Options menu",
Comment thread
redallen marked this conversation as resolved.
selectedOption: "singleOption1"
};

Expand All @@ -44,21 +43,16 @@ class SingleOption extends React.Component {
return { selectedOption: id };
});
};

this.toggleTemplate = ({toggleTemplateProps}) => {
const { text } = toggleTemplateProps;
return <React.Fragment>{text}</React.Fragment>
};
}

render() {
const { isOpen, toggleTemplateProps } = this.state;
const { selectedOption, toggleTemplateText, isOpen } = this.state;
const menuItems = [
<OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.selectedOption === "singleOption1"} id="singleOption1" key="option 1">Option 1</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.selectedOption === "singleOption2"} id="singleOption2" key="option 2">Option 2</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.selectedOption === "singleOption3"} id="singleOption3" key="option 3">Option 3</OptionsMenuItem>
<OptionsMenuItem onSelect={this.onSelect} isSelected={selectedOption === "singleOption1"} id="singleOption1" key="option 1">Option 1</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={selectedOption === "singleOption2"} id="singleOption2" key="option 2">Option 2</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={selectedOption === "singleOption3"} id="singleOption3" key="option 3">Option 3</OptionsMenuItem>
];
const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={this.toggleTemplate} toggleTemplateProps={toggleTemplateProps}/>
const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={toggleTemplateText} />

return (
<OptionsMenu
Expand All @@ -81,9 +75,7 @@ class MultipleOptions extends React.Component {
super(props);
this.state = {
isOpen: false,
toggleTemplateProps: {
text: "Sort by"
},
toggleTemplateText: "Sort by",
sortColumn: "date",
sortDirection: "ascending"
};
Expand All @@ -107,29 +99,24 @@ class MultipleOptions extends React.Component {
return { sortDirection: id };
});
};

this.toggleTemplate = ({toggleTemplateProps}) => {
const { text } = toggleTemplateProps;
return <React.Fragment>{text}</React.Fragment>
};
}

render() {
const { isOpen, toggleTemplateProps } = this.state;
const { sortColumn, sortDirection, toggleTemplateText, isOpen } = this.state;
const menuItems = [
<OptionsMenuItemGroup key="first group" aria-label="Sort Column">
<OptionsMenuItem onSelect={this.onSelectColumn} isSelected={this.state.sortColumn === "name"} id="name" key="name">Name</OptionsMenuItem>
<OptionsMenuItem onSelect={this.onSelectColumn} isSelected={this.state.sortColumn === "date"} id="date" key="date">Date</OptionsMenuItem>
<OptionsMenuItem isDisabled onSelect={this.onSelectColumn} isSelected={this.state.sortColumn === "disabled"} id="disabled" key="disabled">Disabled</OptionsMenuItem>
<OptionsMenuItem onSelect={this.onSelectColumn} isSelected={this.state.sortColumn === "size"} id="size" key="size">Size</OptionsMenuItem>
<OptionsMenuItem onSelect={this.onSelectColumn} isSelected={sortColumn === "name"} id="name" key="name">Name</OptionsMenuItem>
<OptionsMenuItem onSelect={this.onSelectColumn} isSelected={sortColumn === "date"} id="date" key="date">Date</OptionsMenuItem>
<OptionsMenuItem isDisabled onSelect={this.onSelectColumn} isSelected={sortColumn === "disabled"} id="disabled" key="disabled">Disabled</OptionsMenuItem>
<OptionsMenuItem onSelect={this.onSelectColumn} isSelected={sortColumn === "size"} id="size" key="size">Size</OptionsMenuItem>
</OptionsMenuItemGroup>,
<OptionsMenuSeparator key="separator"/>,
<OptionsMenuItemGroup key="second group" aria-label="Sort Direction">
<OptionsMenuItem onSelect={this.onSelectDirection} isSelected={this.state.sortDirection === "ascending"} id="ascending" key="ascending">Ascending</OptionsMenuItem>
<OptionsMenuItem onSelect={this.onSelectDirection} isSelected={this.state.sortDirection === "descending"} id="descending" key="descending">Descending</OptionsMenuItem>
<OptionsMenuItem onSelect={this.onSelectDirection} isSelected={sortDirection === "ascending"} id="ascending" key="ascending">Ascending</OptionsMenuItem>
<OptionsMenuItem onSelect={this.onSelectDirection} isSelected={sortDirection === "descending"} id="descending" key="descending">Descending</OptionsMenuItem>
</OptionsMenuItemGroup>
];
const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={this.toggleTemplate} toggleTemplateProps={toggleTemplateProps}/>
const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={toggleTemplateText} />

return (
<OptionsMenu
Expand Down Expand Up @@ -170,22 +157,18 @@ class Plain extends React.Component {
return { [id]: !prevState[id] };
});
};

this.toggleTemplate = () => {
return <React.Fragment>
<SortAmountDownIcon aria-hidden="true"/>
</React.Fragment>;
}
}

render() {
const { isOpen } = this.state;
const { isOpen, plainOption1, plainOption2, plainOption3 } = this.state
const menuItems = [
<OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.plainOption1} id="plainOption1" key="option 1">Option 1</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.plainOption2} id="plainOption2" key="option 2">Option 2</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.plainOption3} id="plainOption3" key="option 3">Option 3</OptionsMenuItem>
<OptionsMenuItem onSelect={this.onSelect} isSelected={plainOption1} id="plainOption1" key="option 1">Option 1</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={plainOption2} id="plainOption2" key="option 2">Option 2</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={plainOption3} id="plainOption3" key="option 3">Option 3</OptionsMenuItem>
];
const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={this.toggleTemplate} aria-label="Sort by" hideCaret/>
const toggleTemplate = <SortAmountDownIcon aria-hidden="true"/>

const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={toggleTemplate} aria-label="Sort by" hideCaret/>

return (
<OptionsMenu id="options-menu-plain-example"
Expand All @@ -208,9 +191,7 @@ class Top extends React.Component {
super(props);
this.state = {
isOpen: false,
toggleTemplateProps: {
text: "Options menu"
},
toggleTemplateText: "Options menu",
topOption1: false,
topOption2: false,
topOption3: false
Expand All @@ -228,21 +209,16 @@ class Top extends React.Component {
return { [id]: !prevState[id] };
});
};

this.toggleTemplate = ({toggleTemplateProps}) => {
const { text } = toggleTemplateProps;
return <React.Fragment>{text}</React.Fragment>
};
}

render() {
const { toggleTemplateProps, isOpen } = this.state;
const { isOpen, topOption1, topOption2, topOption3, toggleTemplateText } = this.state
const menuItems = [
<OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.topOption1} id="topOption1" key="option 1">Option 1</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.topOption2} id="topOption2" key="option 2">Option 2</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.topOption3} id="topOption3" key="option 3">Option 3</OptionsMenuItem>
<OptionsMenuItem onSelect={this.onSelect} isSelected={topOption1} id="topOption1" key="option 1">Option 1</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={topOption2} id="topOption2" key="option 2">Option 2</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={topOption3} id="topOption3" key="option 3">Option 3</OptionsMenuItem>
];
const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={this.toggleTemplate} toggleTemplateProps={toggleTemplateProps}/>
const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={toggleTemplateText} />

return (
<OptionsMenu
Expand All @@ -266,9 +242,7 @@ class AlignRight extends React.Component {
super(props);
this.state = {
isOpen: false,
toggleTemplateProps: {
text: "Align right"
},
toggleTemplateText: "Align right",
rightOption1: true,
rightOption2: false,
rightOption3: false
Expand All @@ -286,21 +260,16 @@ class AlignRight extends React.Component {
return { [id]: !prevState[id] };
});
};

this.toggleTemplate = ({toggleTemplateProps}) => {
const { text } = toggleTemplateProps;
return <React.Fragment>{text}</React.Fragment>
};
}

render() {
const { toggleTemplateProps, isOpen } = this.state;
const { isOpen, toggleTemplateText, rightOption1, rightOption2, rightOption3 } = this.state;
const menuItems = [
<OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.rightOption1} id="rightOption1" key="option 1">Right option 1</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.rightOption2} id="rightOption2" key="option 2">Right option 2</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={this.state.rightOption3} id="rightOption3" key="option 3">Right option 3</OptionsMenuItem>
<OptionsMenuItem onSelect={this.onSelect} isSelected={rightOption1} id="rightOption1" key="option 1">Right option 1</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={rightOption2} id="rightOption2" key="option 2">Right option 2</OptionsMenuItem>,
<OptionsMenuItem onSelect={this.onSelect} isSelected={rightOption3} id="rightOption3" key="option 3">Right option 3</OptionsMenuItem>
];
const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={this.toggleTemplate} toggleTemplateProps={toggleTemplateProps}/>
const toggle = <OptionsMenuToggle onToggle={this.onToggle} toggleTemplate={toggleTemplateText} />

return (
<OptionsMenu
Expand Down
13 changes: 6 additions & 7 deletions packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.test.js
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import React from 'react';
import { mount } from 'enzyme';
import OptionsMenu 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';
import { OptionsMenu, OptionsMenuDirection, OptionsMenuPosition } from './OptionsMenu';
import { OptionsMenuToggle } from './OptionsMenuToggle';
import { OptionsMenuItemGroup } from './OptionsMenuItemGroup';
import { OptionsMenuItem } from './OptionsMenuItem';
import { OptionsMenuSeparator } from './OptionsMenuSeparator';
import { OptionsMenuToggleWithText } from './OptionsMenuToggleWithText';

const menuItems = [
<OptionsMenuItemGroup key="first group">
Expand Down
69 changes: 69 additions & 0 deletions packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenu.tsx
Show comments
View file
Open in desktop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import * as React from 'react';
import styles from '@patternfly/patternfly/components/OptionsMenu/options-menu.css';
import { css, getModifier } from '@patternfly/react-styles';

export enum OptionsMenuPosition {
right = 'right',
left = 'left'
}

export enum OptionsMenuDirection {
up = 'up',
down = 'down'
}

export interface OptionsMenuProps extends React.HTMLProps<HTMLDivElement>{
Comment thread
redallen marked this conversation as resolved.
/** Classes applied to root element of the Options menu */
className?: string;
/** Id of the root element of the Options menu */
id: string;
/** Array of OptionsMenuItem and/or OptionMenuItemGroup nodes that will be rendered in the Options menu list */
menuItems: React.ReactNode[];
/** Either an OptionsMenuToggle or an OptionsMenuToggleWithText to use to toggle the Options menu */
toggle: React.ReactElement;
Comment thread
dlabaj marked this conversation as resolved.
/** Flag to indicate the toggle has no border or background */
isPlain?: boolean;
/** Flag to indicate if menu is open */
isOpen?: boolean;
/** Provides an accessible name for the Options menu */
ariaLabelMenu?: string;
/** Indicates where menu will be aligned horizontally */
position?: 'right' | 'left';
/** Menu will open up or open down from the Options menu toggle */
direction?: 'up' | 'down';
}

export const OptionsMenu: React.FunctionComponent<OptionsMenuProps> = ({
className = '',
isOpen = false,
isPlain = false,
ariaLabelMenu = '',
direction = OptionsMenuDirection.down,
position = OptionsMenuPosition.left,
id,
menuItems,
toggle,
...props
}: OptionsMenuProps) => (
<div id={id}
className={
css(styles.optionsMenu,
direction === OptionsMenuDirection.up && getModifier(styles, 'top'),
position === OptionsMenuPosition.right && getModifier(styles, 'align-right'),
isOpen && getModifier(styles, 'expanded'),
className)}
{...props}>
{React.Children.map(toggle, oneToggle =>
React.cloneElement(oneToggle, {
parentId: id,
isOpen,
isPlain,
}))}
{isOpen &&
<ul className={css(styles.optionsMenuMenu,
position === OptionsMenuPosition.right && getModifier(styles, 'align-right'))}
{...ariaLabelMenu ? {'aria-label': ariaLabelMenu} : {'aria-labelledby': `${id}-toggle`}}>
{menuItems}
</ul>}
</div>
);
14 changes: 0 additions & 14 deletions packages/patternfly-4/react-core/src/components/OptionsMenu/OptionsMenuItem.d.ts
Show comments
View file
Open in desktop

This file was deleted.

Loading
Back | FazBrowse Home | New Git URL