Skip to content

Commit 371e4cc

Browse files
ghalestriloghalestrilo
committed
⚗️ create <OverlayManager /> component
1 parent c58cdc2 commit 371e4cc

File tree

3 files changed

+57
-129
lines changed

3 files changed

+57
-129
lines changed

‎client/components/Dropdown.jsx

Lines changed: 7 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -6,119 +6,20 @@ import { remSize, prop, common } from '../theme';
66
import IconButton from './mobile/IconButton';
77
import Button from '../common/Button';
88

9-
10-
// <ul className="nav__dropdown">
11-
12-
13-
// <ul className="nav__dropdown">
14-
15-
// <li className="nav__dropdown-item">
16-
// <button
17-
// onFocus={this.handleFocusForLang}
18-
// onBlur={this.handleBlur}
19-
// value="it"
20-
// onClick={e => this.handleLangSelection(e)}
21-
// >
22-
// Italian (Test Fallback)
23-
// </button>
24-
// </li>
25-
// <li className="nav__dropdown-item">
26-
// <button
27-
// onFocus={this.handleFocusForLang}
28-
// onBlur={this.handleBlur}
29-
// value="en-US"
30-
// onClick={e => this.handleLangSelection(e)}
31-
// >English
32-
// </button>
33-
// </li>
34-
// <li className="nav__dropdown-item">
35-
// <button
36-
// onFocus={this.handleFocusForLang}
37-
// onBlur={this.handleBlur}
38-
// value="es-419"
39-
// onClick={e => this.handleLangSelection(e)}
40-
// >
41-
// Español
42-
// </button>
43-
// </li>
44-
// </ul>
45-
46-
// 'nav__item--open'
47-
48-
// %dropdown-open {
49-
// @include themify() {
50-
// background-color: map-get($theme-map, 'modal-background-color');
51-
// border: 1px solid map-get($theme-map, 'modal-border-color');
52-
// box-shadow: 0 0 18px 0 getThemifyVariable('shadow-color');
53-
// color: getThemifyVariable('primary-text-color');
54-
// }
55-
// text-align: left;
56-
// width: ${remSize(180)};
57-
// display: flex;
58-
// position: absolute;
59-
// flex-direction: column;
60-
// top: 95%;
61-
// height: auto;
62-
// z-index: 9999;
63-
// border-radius: ${remSize(6)};
64-
// & li:first-child {
65-
// border-radius: ${remSize(5)} ${remSize(5)} 0 0;
66-
// }
67-
// & li:last-child {
68-
// border-radius: 0 0 ${remSize(5)} ${remSize(5)};
69-
// }
70-
// -------------
71-
// & li {
72-
// & button,
73-
// & a {
74-
// @include themify() {
75-
// color: getThemifyVariable('primary-text-color');
76-
// }
77-
// width: 100%;
78-
// text-align: left;
79-
// padding: ${remSize(8)} ${remSize(16)};
80-
// }
81-
// height: ${remSize(35)};
82-
// cursor: pointer;
83-
// display: flex;
84-
// align-items: center;
85-
// }
86-
// & li:hover {
87-
// @include themify() {
88-
// background-color: getThemifyVariable('button-background-hover-color');
89-
// color: getThemifyVariable('button-hover-color')
90-
// }
91-
// & button, & a {
92-
// @include themify() {
93-
// color: getThemifyVariable('button-hover-color');
94-
// }
95-
// }
96-
// }
97-
// }
98-
99-
// %dropdown-open-left {
100-
// @extend %dropdown-open;
101-
// left: 0;
102-
// }
103-
104-
// %dropdown-open-right {
105-
// @extend %dropdown-open;
106-
// right: 0;
107-
// }
108-
109-
1109
const DropdownWrapper = styled.ul`
11110
background-color: ${prop('Modal.background')};
11211
border: 1px solid ${prop('Modal.border')};
11312
box-shadow: 0 0 18px 0 ${prop('shadowColor')};
11413
color: ${prop('primaryTextColor')};
11514
15+
position: absolute;
16+
top: ${remSize(64)};
17+
right: ${remSize(16)};
18+
11619
text-align: left;
11720
width: ${remSize(180)};
11821
display: flex;
119-
position: absolute;
12022
flex-direction: column;
121-
top: 95%;
12223
height: auto;
12324
z-index: 9999;
12425
border-radius: ${remSize(6)};
@@ -150,22 +51,18 @@ const DropdownWrapper = styled.ul`
15051
padding: ${remSize(8)} ${remSize(16)};
15152
}
15253
}
153-
15454
`;
15555

156-
// { onPress
157-
// ? <IconButton
158-
// : <Link to={to}>{title}</Link>}
159-
160-
const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
56+
// TODO: Add Icon to the left of the items in the menu
57+
// const MaybeIcon = (Element, label) => Element && <Element aria-label={label} />;
16158

16259
const Dropdown = ({ items }) => (
16360
<DropdownWrapper>
16461
{/* className="nav__items-left" */}
16562
{items && items.map(({ title, icon, href }) => (
16663
<li key={`nav-${title && title.toLowerCase()}`}>
16764
<Link to={href}>
168-
{MaybeIcon(icon, `Navigate to ${title}`)}
65+
{/* {MaybeIcon(icon, `Navigate to ${title}`)} */}
16966
{title}
17067
</Link>
17168
</li>

‎client/modules/App/App.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ class App extends React.Component {
3434
render() {
3535
return (
3636
<div className="app">
37-
{this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
37+
{/* FIXME: Remove && false */}
38+
{false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
3839
{this.props.children}
3940
</div>
4041
);

‎client/modules/IDE/pages/MobileIDEView.jsx

Lines changed: 48 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useRef, useEffect } from 'react';
22
import PropTypes from 'prop-types';
33
import { connect } from 'react-redux';
44
import { withRouter } from 'react-router';
@@ -42,6 +42,42 @@ const BottomBarContent = styled.h2`
4242
// const overlays = {};
4343
// const OverlayManager = name => overlays[name] || null;
4444

45+
const OverlayManager = ({ ref, overlay, hideOverlay }) => {
46+
useEffect(() => {
47+
const handleClickOutside = ({ target }) => {
48+
if (ref && ref.current && !ref.current.contains(target)) { hideOverlay(); console.log('click'); }
49+
};
50+
51+
document.addEventListener('mousedown', handleClickOutside);
52+
return () => { document.removeEventListener('mousedown', handleClickOutside); };
53+
}, [ref]);
54+
55+
const headerNavOptions = [
56+
{ icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences' },
57+
{ icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
58+
{ icon: PreferencesIcon, title: 'Original View', href: '/mobile/preferences' }
59+
];
60+
61+
return (
62+
<div ref={(r) => { if (ref) { ref.current = r; } }}>
63+
{(overlay === 'dropdown') && <Dropdown items={headerNavOptions} />}
64+
</div>
65+
);
66+
};
67+
68+
const refPropType = PropTypes.oneOfType([
69+
PropTypes.func,
70+
PropTypes.shape({ current: PropTypes.instanceOf(Element) })
71+
]);
72+
73+
OverlayManager.propTypes = {
74+
ref: refPropType.isRequired,
75+
overlay: PropTypes.string,
76+
hideOverlay: PropTypes.func.isRequired
77+
};
78+
79+
OverlayManager.defaultProps = { overlay: null };
80+
4581

4682
const MobileIDEView = (props) => {
4783
const {
@@ -53,18 +89,15 @@ const MobileIDEView = (props) => {
5389
} = props;
5490

5591
const [tmController, setTmController] = useState(null); // eslint-disable-line
56-
const [overlay, setOverlay] = useState(null); // eslint-disable-line
92+
const [overlayName, setOverlay] = useState(null); // eslint-disable-line
5793

58-
// const overlayActive = name => (overlay === name);
94+
// TODO: Move this to OverlayController (?)
95+
const hideOverlay = () => setOverlay(null);
96+
const overlayRef = useRef();
5997

60-
const headerNavOptions = [
61-
{ icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences' },
62-
{ icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
63-
{ icon: PreferencesIcon, title: 'Original View', href: '/mobile/preferences' }
64-
];
6598

6699
return (
67-
<Screen fullscreen>
100+
<Screen fullscreen >
68101
<Header
69102
title={project.name}
70103
subtitle={selectedFile.name}
@@ -81,10 +114,6 @@ const MobileIDEView = (props) => {
81114
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
82115
</Header>
83116

84-
85-
{/* TODO: Overlays */}
86-
<Dropdown items={headerNavOptions} />
87-
88117
<IDEWrapper>
89118
<Editor
90119
lintWarning={preferences.lintWarning}
@@ -122,11 +151,12 @@ const MobileIDEView = (props) => {
122151
/>
123152
</IDEWrapper>
124153

125-
{/*
126-
<Footer>
127-
<Console />
128-
<BottomBarContent>Bottom Bar</BottomBarContent>
129-
</Footer> */}
154+
{/* TODO: Create Overlay Manager */}
155+
{<OverlayManager
156+
ref={overlayRef}
157+
overlay={overlayName}
158+
hideOverlay={hideOverlay}
159+
/>}
130160
</Screen>
131161
);
132162
};

0 commit comments

Comments
 (0)