Unverified Commit 076f8518 authored by Iain Maitland's avatar Iain Maitland
Browse files

Revert "remove dependency on react-foundation-components library, refs #2253, #2303"

This reverts commit b48c1ed6.
parent 42ea2349
......@@ -101,6 +101,7 @@
"react-copy-to-clipboard": "4.3.1",
"react-dom": "15.6.2",
"react-dropzone": "3.13.4",
"react-foundation-components": "git+https://github.com/valzav/react-foundation-components.git#d14362c7c8eee946a4acc3b18d70271d5a82813e",
"react-highcharts": "8.4.2",
"react-intl": "2.4.0",
"react-medium-editor": "1.8.1",
......
......@@ -62,12 +62,7 @@ button, .button {
}
.close-button {
position: absolute;
cursor: pointer;
transition: color 0.2s ease-in-out;
top: 0.5rem;
font-size: 2em;
line-height: 1;
@include themify($themes) {
color: themed('textColorSecondary');
}
......@@ -124,17 +119,3 @@ tbody tr:nth-child(even) {
min-width: 100px;
}
}
.progress {
border: none;
width: 100%;
height: 8px;
border-radius: 3px;
background-color:$color-border-light;
div {
background-color: $color-teal;
border-radius: 3px;
border: none;
height: 8px;
}
}
......@@ -7,7 +7,7 @@ import TopRightMenu from 'app/components/modules/TopRightMenu';
import { browserHistory } from 'react-router';
import classNames from 'classnames';
import SidePanel from 'app/components/modules/SidePanel';
import CloseButton from 'app/components/elements/CloseButton';
import CloseButton from 'react-foundation-components/lib/global/close-button';
import Dialogs from 'app/components/modules/Dialogs';
import Modals from 'app/components/modules/Modals';
import Icon from 'app/components/elements/Icon';
......
......@@ -16,6 +16,7 @@
@import "./elements/ReplyEditor";
@import "./elements/NotifiCounter";
@import "./elements/DropdownMenu";
@import "./elements/FoundationDropdownMenu";
@import "./elements/VerticalMenu";
@import "./elements/HorizontalMenu";
@import "./elements/VotesAndComments";
......@@ -31,7 +32,6 @@
@import "./elements/UserNames";
@import "./elements/UserKeys";
@import "./elements/QrKeyView";
@import "./elements/Dropdown";
// modules
@import "./modules/Header";
......
......@@ -121,6 +121,12 @@
fill: themed('textColorSecondary');
}
}
a, .FoundationDropdownMenu__label {
font-size: 94%;
font-weight: 600;
@extend .link;
@extend .link--secondary;
}
.Voting {
//padding-right: 1rem;
//margin-right: 1rem;
......
......@@ -7,7 +7,7 @@ import PostSummary from 'app/components/cards/PostSummary';
import Post from 'app/components/pages/Post';
import LoadingIndicator from 'app/components/elements/LoadingIndicator';
import debounce from 'lodash.debounce';
import CloseButton from 'app/components/elements/CloseButton';
import CloseButton from 'react-foundation-components/lib/global/close-button';
import { findParent } from 'app/utils/DomUtils';
import Icon from 'app/components/elements/Icon';
import shouldComponentUpdate from 'app/utils/shouldComponentUpdate';
......
/* eslint react/prop-types: 0 */
import React from 'react';
import Reveal from 'app/components/elements/Reveal';
import CloseButton from 'app/components/elements/CloseButton';
import Reveal from 'react-foundation-components/lib/global/reveal';
import CloseButton from 'react-foundation-components/lib/global/close-button';
import TimeAgoWrapper from 'app/components/elements/TimeAgoWrapper';
import { browserHistory } from 'react-router';
import tt from 'counterpart';
......
import PropTypes from 'prop-types';
import React from 'react';
export const CloseButton = ({ className, ...restProps }) => {
return (
<button {...restProps} className="close-button" type="button">
&times;
</button>
);
};
CloseButton.propTypes = {
className: PropTypes.string,
};
export default CloseButton;
import React from 'react';
import { browserHistory } from 'react-router';
import Icon from 'app/components/elements/Icon';
import { findParent } from 'app/utils/DomUtils';
export default class Dropdown extends React.Component {
static propTypes = {
selected: React.PropTypes.string,
children: React.PropTypes.object,
className: React.PropTypes.string,
title: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object,
]),
href: React.PropTypes.string,
onHide: React.PropTypes.func.isRequired,
show: React.PropTypes.bool,
};
constructor(props) {
super(props);
this.state = {
shown: false,
selected: props.selected,
};
}
componentWillUnmount() {
document.removeEventListener('click', this.hide);
}
toggle = e => {
const { shown } = this.state;
if (shown) {
this.hide(e);
} else this.show(e);
};
show = e => {
e.preventDefault();
this.setState({ shown: true });
document.addEventListener('click', this.hide);
};
hide = e => {
// Do not hide the dropdown if there was a click within it.
const inside_dropdown = !!findParent(e.target, 'dropdown__content');
if (inside_dropdown) return;
e.preventDefault();
this.setState({ shown: false });
this.props.onHide();
document.removeEventListener('click', this.hide);
};
render() {
const { children, className, title, href, position } = this.props;
let entry = (
<a key="entry" href={href || '#'} onClick={this.toggle}>
{title}
</a>
);
const content = (
<div key="dropdown-content" className={'dropdown__content'}>
{children}
</div>
);
const cls =
'dropdown' +
(this.state.shown ? ' show' : '') +
(className ? ` ${className}` : '') +
(position ? ` ${position}` : '');
return React.createElement('div', { className: cls, key: 'dropdown' }, [
entry,
content,
]);
}
}
.dropdown {
position: relative;
display: inline-block;
.Icon.dropdown-arrow {
top: 2px;
margin-right: 0;
}
> .dropdown__content {
visibility: hidden;
min-width: 145px;
z-index: 1000;
display: block;
border-radius: $global-radius;
opacity: 0;
position: absolute;
top: 100%;
padding: 2px;
@include themify($themes) {
background-color: themed('backgroundColor');
border: themed('borderDark');
}
// width: auto;
transform: translateY(10%);
transition: all 0.3s ease 0s, visibility 0s linear 0.3s;
box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
}
&.show > .dropdown__content {
visibility: visible;
opacity: 1;
transform: translateX(0%);
transition-delay: 0s;
a {
transition: 0.2s all ease-in-out;
@include themify($themes) {
color: themed('textColorPrimary');
}
&:hover {
@include themify($themes) {
color: themed('textColorAccent');
}
}
}
}
&.left > .dropdown__content {
position: absolute;
right: 0%;
}
&.right > .dropdown__content {
position: absolute;
left: 0%;
}
}
\ No newline at end of file
......@@ -78,7 +78,6 @@ export default class DropdownMenu extends React.Component {
className,
title,
href,
position,
} = this.props;
const hasDropdown = items.length > 0;
......@@ -108,8 +107,7 @@ export default class DropdownMenu extends React.Component {
const cls =
'DropdownMenu' +
(this.state.shown ? ' show' : '') +
(className ? ` ${className}` : '') +
(position ? ` ${position}` : '');
(className ? ` ${className}` : '');
return React.createElement(el, { className: cls }, [entry, menu]);
}
}
......@@ -10,7 +10,6 @@
> .VerticalMenu {
visibility: hidden;
min-width: 145px;
width: max-content;
z-index: 1000;
display: block;
border-radius: $global-radius;
......@@ -28,7 +27,6 @@
transform: translateY(10%);
transition: all 0.3s ease 0s, visibility 0s linear 0.3s;
box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.75);
}
&.show > .VerticalMenu {
......@@ -50,14 +48,6 @@
}
}
&.left > .VerticalMenu {
position: absolute;
right: 0%;
}
&.right > .VerticalMenu {
position: absolute;
left: 0%;
}
.DropdownMenu.move-left {
.VerticalMenu {
left: -50%;
......
import React from 'react';
import { findParent } from 'app/utils/DomUtils';
import { Dropdown } from 'react-foundation-components/lib/global/dropdown';
export default class FoundationDropdown extends React.Component {
static propTypes = {
show: React.PropTypes.bool.isRequired,
className: React.PropTypes.string,
children: React.PropTypes.any,
onHide: React.PropTypes.func,
};
constructor(props) {
super(props);
this.state = { show: props.show };
this.closeOnOutsideClick = this.closeOnOutsideClick.bind(this);
}
componentDidUpdate(prevProps, prevState) {
const show = this.state.show;
if (show !== prevState.show) {
if (show)
document.body.addEventListener(
'mousedown',
this.closeOnOutsideClick
);
else
document.body.removeEventListener(
'mousedown',
this.closeOnOutsideClick
);
}
}
componentWillReceiveProps(newProps) {
if (
newProps.show !== this.props.show &&
newProps.show !== this.state.show
) {
this.setState({ show: newProps.show });
}
}
componentWillUnmount() {
document.body.removeEventListener(
'mousedown',
this.closeOnOutsideClick
);
}
closeOnOutsideClick(e) {
const inside_dropdown = findParent(e.target, 'FoundationDropdown');
// console.log('-- closeOnOutsideClick -->', e.target, inside_dropdown);
if (!inside_dropdown) {
this.setState({ show: false });
if (this.props.onHide) this.props.onHide();
}
}
render() {
if (!this.state.show) return null;
const { className } = this.props;
return (
<Dropdown className={`FoundationDropdown ${className}`}>
{this.props.children}
</Dropdown>
);
}
}
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, boolean } from '@storybook/addon-knobs';
import FoundationDropdown from './FoundationDropdown';
import { Center } from './Tooltip.story';
storiesOf('Elements', module)
.addDecorator(withKnobs)
.add('FoundationDropdown', () => (
<Center>
<h3> Use the Knob to toggle the Foundation Dropdown </h3>
<FoundationDropdown
show={boolean('Is Open?', false)}
onHide={() =>
alert(
'You clicked someplace that triggered the onHide prop.'
)
}
>
<div className="Voting__adjust_weight">
<h3> Cool Stuff </h3>
<p> Has a handler to detect outside clicks...</p>
</div>
</FoundationDropdown>
</Center>
));
import React from 'react';
import Icon from 'app/components/elements/Icon';
import { LinkWithDropdown } from 'react-foundation-components/lib/global/dropdown';
import VerticalMenu from 'app/components/elements/VerticalMenu';
const FoundationDropdownMenu = ({
menu,
icon,
label,
dropdownPosition,
dropdownAlignment,
className,
onClick,
}) => {
return (
<LinkWithDropdown
closeOnClickOutside
dropdownClassName={className}
dropdownPosition={dropdownPosition}
dropdownAlignment={dropdownAlignment}
dropdownContent={<VerticalMenu items={menu} />}
onClick={onClick}
>
<span className="FoundationDropdownMenu__label">
{icon && <Icon name="share" className="space-right" />}
{label}
<Icon name="dropdown-arrow" />
</span>
</LinkWithDropdown>
);
};
export default FoundationDropdownMenu;
.FoundationDropdownMenu__label {
cursor: pointer;
.Icon.dropdown-arrow {
position: relative;
top: 2px;
}
}
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, select } from '@storybook/addon-knobs';
import FoundationDropdownMenu from './FoundationDropdownMenu';
import { Center } from './Tooltip.story';
const positionOptions = ['bottom', 'top'];
const alignmentOptions = ['left', 'right'];
const mockMenu = [
{
value: 'transfer',
link: '#',
onClick: () => {},
},
{
value: 'transfer to savings',
link: '#',
onClick: () => {},
},
{
value: 'power up',
link: '#',
onClick: () => {},
},
];
storiesOf('Elements', module)
.addDecorator(withKnobs)
.add('FoundationDropdownMenu', () => (
<Center>
<h3> Foundation Dropdown Menu</h3>
<FoundationDropdownMenu
className="Wallet_dropdown"
dropdownPosition={select('position', positionOptions, 'bottom')}
dropdownAlignment={select(
'alignment',
alignmentOptions,
'right'
)}
label={8 + ' Jahweh'}
menu={mockMenu}
/>
</Center>
));
......@@ -3,7 +3,7 @@ import React from 'react';
class LoadingIndicator extends React.Component {
static propTypes = {
// html component attributes
type: React.PropTypes.oneOf(['dots', 'circle', 'circle-strong']),
type: React.PropTypes.oneOf(['dots', 'circle']),
inline: React.PropTypes.bool,
style: React.PropTypes.object,
};
......
import React from 'react';
import PropTypes from 'prop-types';
import Modal from 'react-overlays/lib/Modal';
import Transition from 'react-overlays/lib/Transition';
const Reveal = ({ children, onHide, show }) => {
const modalStyle = {
bottom: 0,
left: 0,
overflowY: 'scroll',
position: 'fixed',
right: 0,
top: 0,
display: 'block',
zIndex: 105,
};
return (
<Modal
backdrop={true}
transition={Transition}
onHide={onHide}
show={show}
backdropClassName={'reveal-overlay'}
backdropStyle={{ display: 'block' }}
style={modalStyle}
>
<div
className={'reveal fade in'}
role={'document'}
tabIndex={'-1'}
style={{ display: 'block' }}
>
{children}
</div>
</Modal>
);
};
Reveal.propTypes = {
show: PropTypes.bool.isRequired,
onHide: PropTypes.func.isRequired,
};
export default Reveal;
......@@ -25,7 +25,7 @@
text-decoration: none;
@include themify($themes) {
background-color: themed('backgroundColorOpaque');
}
}
}
> li.title {
......@@ -34,7 +34,7 @@
text-align:left;
padding-left: 16px;
@include themify($themes) {
border-bottom: themed('border');
border-bottom: themed('border');
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment