Skip to content

Commit

Permalink
finish implementing classnames
Browse files Browse the repository at this point in the history
  • Loading branch information
@mobot11
mobot11 committed Jan 16, 2019
1 parent bc2960f commit 97b05ac
Show file tree
Hide file tree
Showing 20 changed files with 5,799 additions and 5,522 deletions.
7,596 changes: 3,798 additions & 3,798 deletions package-lock.json
View file

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions src/MegaMenu/MegaMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export class MegaMenuList extends Component {
this.setState({ selectedItem: id });
};

getListItemLinkClasses = ({id, hasChild}) => {
getLinkClasses = ({id, hasChild}) => {
return classnames(
'fd-mega-menu__link',
{
Expand All @@ -76,7 +76,7 @@ export class MegaMenuList extends Component {
);
}

getSelectedSublinkClasses = ({id}) => {
getSubLinkClasses = ({id}) => {
return classnames(
'fd-mega-menu__sublink',
{
Expand All @@ -101,7 +101,7 @@ export class MegaMenuList extends Component {
<li className='fd-mega-menu__item' key={item.id}>
{item.link ? (
<Link
className={this.getListItemLinkClasses(item)}
className={this.getLinkClasses(item)}
key={item.id}
onClick={e => this.handleSelect(e, item.id)}
to={{ pathname: item.link }}>
Expand All @@ -111,7 +111,7 @@ export class MegaMenuList extends Component {

{item.url ? (
<a
className={this.getListItemLinkClasses(item)}
className={this.getLinkClasses(item)}
href={item.url}
key={item.id}
onClick={e => this.handleSelect(e, item.id)}>
Expand All @@ -130,7 +130,7 @@ export class MegaMenuList extends Component {
<li className='fd-mega-menu__subitem' key={ch.id}>
{ch.link ? (
<Link
className={this.getSelectedSublinkClasses(ch.id)}
className={this.getSubLinkClasses(ch.id)}
key={ch.id}
onClick={e => this.handleSelectChild(e, ch.id)}
to={{ pathname: ch.link }}>
Expand All @@ -139,7 +139,7 @@ export class MegaMenuList extends Component {
) : null}
{ch.url ? (
<a
className={this.getSelectedSublinkClasses(ch.id)}
className={this.getSubLinkClasses(ch.id)}
href={ch.url}
key={ch.id}
onClick={e => this.handleSelectChild(e, ch.id)}>
Expand Down
38 changes: 32 additions & 6 deletions src/Menu/Menu.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,20 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Link } from 'react-router-dom';

// ------------------------------------------- Menu ------------------------------------------
export const Menu = ({ addonBefore, children, className, ...props }) => {
const menuClasses = classnames(
'fd-menu',
{
'fd-menu--addon-before': addonBefore
},
className
);

return (
<nav className={`fd-menu${addonBefore ? ' fd-menu--addon-before' : ''}${className ? ' ' + className : ''}`} {...props}>
<nav className={menuClasses} {...props}>
{children}
</nav>
);
Expand All @@ -18,24 +27,36 @@ Menu.propTypes = {

// ---------------------------------------- Menu List ----------------------------------------
export const MenuList = ({ children, className, ...props }) => {
return <ul className={`fd-menu__list${className ? ' ' + className : ''}`} {...props}>{children}</ul>;
const menuListClasses = classnames(
'fd-menu__list',
className
);

return <ul className={menuListClasses} {...props}>{children}</ul>;
};

// ---------------------------------------- Menu Item ----------------------------------------
export const MenuItem = ({ url, link, isLink, separator, addon, children, onclick, className, ...props }) => {
const menuItemLinkClasses = classnames(
'fd-menu__item',
{
'fd-menu__link': isLink
}
);

return (
<React.Fragment>
<li className={className} {...props}>
{addon &&
<div className='fd-menu__addon-before'>{<span className={'sap-icon--' + addon} />}</div>
<div className='fd-menu__addon-before'>{<span className={`sap-icon--${addon}`} />}</div>
}
{link &&
<Link className={`fd-menu__item${isLink ? ' fd-menu__link' : ''}`} to={link}>
<Link className={menuItemLinkClasses} to={link}>
{children}
</Link>
}
{url &&
<a className={`fd-menu__item${isLink ? ' fd-menu__link' : ''}`} href={url}>
<a className={menuItemLinkClasses} href={url}>
{children}
</a>
}
Expand All @@ -56,8 +77,13 @@ MenuItem.propTypes = {

// ---------------------------------------- Menu Group ----------------------------------------
export const MenuGroup = ({ title, children, className, ...props }) => {
const menuGroupClasses = classnames(
'fd-menu__group',
className
);

return (
<div className={`fd-menu__group${className ? ' ' + className : ''}`} {...props}>
<div className={menuGroupClasses} {...props}>
<h1 className='fd-menu__title'>{title}</h1>
{children}
</div>
Expand Down
116 changes: 61 additions & 55 deletions src/Modal/Modal.js
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,76 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import classnames from 'classnames';

export class Modal extends Component {
// select body element to add Modal component too
bodyElm = document.querySelector('body');
// select body element to add Modal component too
bodyElm = document.querySelector('body');

handleCloseClick = () => {
this.props.onClose();
};
handleCloseClick = () => {
this.props.onClose();
};

// check for Escape key press
handleKeyPress = event => {
if (event.key === 'Escape' || event.key === 'Esc') {
this.handleCloseClick();
}
};
// check for Escape key press
handleKeyPress = event => {
if (event.key === 'Escape' || event.key === 'Esc') {
this.handleCloseClick();
}
};

// add event listener for escape key
componentDidMount() {
document.addEventListener('keydown', this.handleKeyPress, false);
}
// add event listener for escape key
componentDidMount() {
document.addEventListener('keydown', this.handleKeyPress, false);
}

// remove event listener for escape key
componentWillUnmount() {
document.removeEventListener('keydown', this.handleKeyPress, false);
}
// remove event listener for escape key
componentWillUnmount() {
document.removeEventListener('keydown', this.handleKeyPress, false);
}

render() {
const { children, title, actions, className, show, ...rest } = this.props;
render() {
const { children, title, actions, className, show, ...rest } = this.props;

if (!show) {
return null;
}
if (!show) {
return null;
}

return ReactDOM.createPortal(
<div
className={`fd-ui__overlay fd-overlay fd-overlay--modal${
className ? ' ' + className : ''
}`}
{...rest}>
<div className='modal-demo-bg'>
<div className='fd-modal'>
<div className='fd-modal__content' role='document'>
<div className='fd-modal__header'>
<h1 className='fd-modal__title'>{title}</h1>
<button
aria-label='close'
className='fd-button--light fd-modal__close'
onClick={this.handleCloseClick} />
</div>
<div className='fd-modal__body'>{children}</div>
{actions ? (
<footer className='fd-modal__footer'>
<div className='fd-modal__actions'>{actions}</div>
</footer>
) : (
''
)}
</div>
</div>
</div>
</div>,
this.bodyElm
);
}
const modalClasses = classnames(
'fd-ui__overlay',
'fd-overlay',
'fd-overlay--modal',
className
);

return ReactDOM.createPortal(
<div
className={modalClasses}
{...rest}>
<div className='modal-demo-bg'>
<div className='fd-modal'>
<div className='fd-modal__content' role='document'>
<div className='fd-modal__header'>
<h1 className='fd-modal__title'>{title}</h1>
<button
aria-label='close'
className='fd-button--light fd-modal__close'
onClick={this.handleCloseClick} />
</div>
<div className='fd-modal__body'>{children}</div>
{actions ? (
<footer className='fd-modal__footer'>
<div className='fd-modal__actions'>{actions}</div>
</footer>
) : (
''
)}
</div>
</div>
</div>
</div>,
this.bodyElm
);
}
}

Modal.propTypes = {
Expand Down
Loading

0 comments on commit 97b05ac

Please sign in to comment.