Skip to content

Commit e0a2f88

Browse files
gleknerglekner
committed
feat(Add Application Launcher Component):
fix #184
1 parent 4a69ebd commit e0a2f88

9 files changed

+254
-0
lines changed

‎src/components/ApplicationLauncher/ApplicationLauncher.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
import ApplicationLauncherToggle from './ApplicationLauncherToggle';
5+
import { Dropdown } from '../Dropdown';
6+
7+
class ApplicationLauncher extends React.Component {
8+
constructor(props) {
9+
super(props);
10+
11+
this.state = {
12+
showLauncher: false,
13+
type: props.type
14+
};
15+
}
16+
17+
componentWillReceiveProps = nextProps => {
18+
this.setState({ type: nextProps.type });
19+
};
20+
21+
toggleLauncher = () => {
22+
this.setState({ showLauncher: !this.state.showLauncher });
23+
};
24+
25+
render() {
26+
const classes = classNames(
27+
{
28+
'applauncher-pf applauncher-pf-block-list dropdown dropdown-kebab-pf':
29+
this.state.type === 'grid'
30+
},
31+
{
32+
'applauncher-pf dropdown dropdown-kebab-pf': this.state.type === 'list'
33+
},
34+
{ open: this.state.showLauncher }
35+
);
36+
return (
37+
<li className={classes}>
38+
<ApplicationLauncherToggle
39+
tooltipPlacement={this.props.tooltipPlacement}
40+
onClick={this.toggleLauncher}
41+
/>
42+
<Dropdown.Menu className="dropdown-menu-right">
43+
{this.props.children}
44+
</Dropdown.Menu>
45+
</li>
46+
);
47+
}
48+
}
49+
ApplicationLauncher.propTypes = {
50+
/** Children Node */
51+
children: PropTypes.node.isRequired,
52+
/** tooltipPlacement */
53+
tooltipPlacement: PropTypes.string,
54+
/** Application Launcher Type */
55+
type: PropTypes.string.isRequired
56+
};
57+
ApplicationLauncher.defaultProps = {
58+
tooltipPlacement: 'bottom'
59+
};
60+
61+
export default ApplicationLauncher;

‎src/components/ApplicationLauncher/ApplicationLauncher.stories.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { storiesOf } from '@storybook/react';
2+
import { withKnobs } from '@storybook/addon-knobs';
3+
import { VerticalNavAppLauncherStory } from './Stories/index';
4+
5+
const stories = storiesOf('ApplicationLauncher', module);
6+
stories.addDecorator(withKnobs);
7+
8+
VerticalNavAppLauncherStory(stories);

‎src/components/ApplicationLauncher/ApplicationLauncherItem.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import classNames from 'classnames';
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
4+
import { Tooltip } from '../Tooltip';
5+
import { OverlayTrigger } from '../OverlayTrigger';
6+
7+
const ApplicationLauncherItem = ({
8+
onClick,
9+
tooltip,
10+
title,
11+
icon,
12+
className,
13+
...props
14+
}) => {
15+
const classes = classNames('applauncher-pf-item', className);
16+
17+
return (
18+
<OverlayTrigger
19+
overlay={<Tooltip id="tooltip">{tooltip}</Tooltip>}
20+
placement="left"
21+
trigger={['hover', 'focus']}
22+
rootClose={false}
23+
>
24+
<li className={classes} role="menuitem">
25+
<a className="applauncher-pf-link" href="#" onClick={e => onClick(e)}>
26+
<i className={icon} aria-hidden="true" />
27+
28+
<span className="applauncher-pf-link-title">{title}</span>
29+
</a>
30+
</li>
31+
</OverlayTrigger>
32+
);
33+
};
34+
ApplicationLauncherItem.propTypes = {
35+
/** Additional element css classes */
36+
className: PropTypes.string,
37+
/** onClick func */
38+
onClick: PropTypes.func,
39+
/** Title String */
40+
title: PropTypes.string.isRequired,
41+
/** Icon Type */
42+
icon: PropTypes.string.isRequired,
43+
/** App Tooltip */
44+
tooltip: PropTypes.string.isRequired
45+
};
46+
ApplicationLauncherItem.defaultProps = {
47+
className: '',
48+
onClick: null
49+
};
50+
export default ApplicationLauncherItem;

‎src/components/ApplicationLauncher/ApplicationLauncherToggle.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { OverlayTrigger } from '../OverlayTrigger';
4+
import { Tooltip } from '../Tooltip';
5+
import { Icon } from '../Icon';
6+
import { Button } from '../Button';
7+
8+
const ApplicationLauncherToggle = ({ onClick, tooltipPlacement }) => {
9+
const tooltip = <Tooltip id="tooltip">Application Launcher</Tooltip>;
10+
11+
return (
12+
<OverlayTrigger
13+
placement={tooltipPlacement}
14+
id="applauncher-pf-block-list"
15+
overlay={tooltip}
16+
>
17+
<Button onClick={onClick} bsStyle="link" className="nav-item-iconic">
18+
<Icon
19+
className="fa fa-th applauncher-pf-icon"
20+
aria-describedby="tooltip"
21+
name=""
22+
/>
23+
</Button>
24+
</OverlayTrigger>
25+
);
26+
};
27+
ApplicationLauncherToggle.propTypes = {
28+
/** onClick func */
29+
onClick: PropTypes.func,
30+
/** tooltipPlacement */
31+
tooltipPlacement: PropTypes.string
32+
};
33+
ApplicationLauncherToggle.defaultProps = {
34+
onClick: null,
35+
tooltipPlacement: 'bottom'
36+
};
37+
38+
export default ApplicationLauncherToggle;

‎src/components/ApplicationLauncher/Stories/VerticalAppLauncherStory.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React from 'react';
2+
import { action } from '@storybook/addon-actions';
3+
import { boolean, select } from '@storybook/addon-knobs';
4+
import { inlineTemplate } from '../../../../storybook/decorators/storyTemplates';
5+
import { DOCUMENTATION_URL } from '../../../../storybook/constants';
6+
import ApplicationLauncher from '../ApplicationLauncher';
7+
import ApplicationLauncherItem from '../ApplicationLauncherItem';
8+
9+
const handleClick = e => {
10+
e.preventDefault();
11+
action('app clicked!')();
12+
};
13+
14+
const VerticalAppLauncherStory = stories => {
15+
stories.addWithInfo('Application Launcher', '', () => {
16+
const type = select(
17+
'Launcher Type',
18+
{ grid: 'Grid', list: 'List' },
19+
'grid'
20+
);
21+
22+
const iconBool = boolean('Icons', true);
23+
24+
const story = (
25+
<nav className="navbar navbar-pf-vertical">
26+
<nav className="collapse navbar-collapse">
27+
<ul className="nav navbar-nav navbar-right navbar-iconic">
28+
<ApplicationLauncher type={type} tooltipPlacement="left">
29+
<ApplicationLauncherItem
30+
icon={
31+
iconBool
32+
? 'applauncher-pf-link-icon pficon pficon-storage-domain'
33+
: ''
34+
}
35+
title="Recteque"
36+
tooltip="Tooltip!"
37+
onClick={handleClick}
38+
/>
39+
<ApplicationLauncherItem
40+
icon={
41+
iconBool
42+
? 'applauncher-pf-link-icon pficon pficon-virtual-machine'
43+
: ''
44+
}
45+
title="Ipsum"
46+
tooltip="Tooltip!"
47+
onClick={handleClick}
48+
/>
49+
<ApplicationLauncherItem
50+
icon={
51+
iconBool
52+
? 'applauncher-pf-link-icon pficon pficon-domain'
53+
: ''
54+
}
55+
title="Lorem"
56+
tooltip="Tooltip!"
57+
onClick={handleClick}
58+
/>
59+
<ApplicationLauncherItem
60+
icon={
61+
iconBool ? 'applauncher-pf-link-icon pficon pficon-home' : ''
62+
}
63+
title="Home"
64+
tooltip="Tooltip!"
65+
onClick={handleClick}
66+
/>
67+
</ApplicationLauncher>
68+
</ul>
69+
</nav>
70+
</nav>
71+
);
72+
return inlineTemplate({
73+
title: 'ApplicationLauncher',
74+
documentationLink: `${
75+
DOCUMENTATION_URL.PATTERNFLY_ORG_APPLICATION_FRAMEWORK
76+
}launcher/`,
77+
story
78+
});
79+
});
80+
};
81+
82+
export default VerticalAppLauncherStory;

‎src/components/ApplicationLauncher/Stories/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export {
2+
default as VerticalNavAppLauncherStory
3+
} from './VerticalAppLauncherStory';

‎src/components/ApplicationLauncher/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import ApplicationLauncherToggle from './ApplicationLauncherToggle';
2+
import ApplicationLauncher from './ApplicationLauncher';
3+
import ApplicationLauncherItem from './ApplicationLauncherItem';
4+
5+
ApplicationLauncher.Toggle = ApplicationLauncherToggle;
6+
ApplicationLauncher.Item = ApplicationLauncherItem;
7+
8+
export default { ApplicationLauncher };

‎src/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export { default as controlled } from './common/controlled';
22
export * from './common/helpers';
33
export * from './components/Alert';
44
export * from './components/AboutModal';
5+
export * from './components/ApplicationLauncher';
56
export * from './components/Badge';
67
export * from './components/Breadcrumb';
78
export * from './components/Button';

‎storybook/constants.js

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ export const BASE_URL = {
77
};
88

99
export const DOCUMENTATION_URL = {
10+
PATTERNFLY_ORG_APPLICATION_FRAMEWORK: `${
11+
BASE_URL.PATTERNFLY_LIBRARY
12+
}application-framework/`,
1013
PATTERNFLY_ORG_COMMUNICATION: `${BASE_URL.PATTERNFLY_LIBRARY}communication/`,
1114
PATTERNFLY_ORG_WIDGETS: `${BASE_URL.PATTERNFLY_LIBRARY}widgets/`,
1215
PATTERNFLY_ORG_STYLES: `${PATTERNFLY_ORG}styles/`,

0 commit comments

Comments
 (0)