2020-07-22 23:48:24 +02:00
|
|
|
import React, { useRef, useEffect } from 'react';
|
2020-06-09 21:51:57 +02:00
|
|
|
import PropTypes from 'prop-types';
|
2020-06-15 22:46:56 +02:00
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { withRouter } from 'react-router';
|
|
|
|
import { useState } from 'react';
|
2020-07-15 22:24:12 +02:00
|
|
|
import styled from 'styled-components';
|
2020-06-12 21:09:30 +02:00
|
|
|
|
2020-06-15 22:46:56 +02:00
|
|
|
// Imports to be Refactored
|
|
|
|
import { bindActionCreators } from 'redux';
|
|
|
|
import * as FileActions from '../actions/files';
|
|
|
|
import * as IDEActions from '../actions/ide';
|
|
|
|
import * as ProjectActions from '../actions/project';
|
|
|
|
import * as EditorAccessibilityActions from '../actions/editorAccessibility';
|
|
|
|
import * as PreferencesActions from '../actions/preferences';
|
|
|
|
import * as UserActions from '../../User/actions';
|
|
|
|
import * as ToastActions from '../actions/toast';
|
|
|
|
import * as ConsoleActions from '../actions/console';
|
|
|
|
import { getHTMLFile } from '../reducers/files';
|
|
|
|
|
|
|
|
// Local Imports
|
|
|
|
import Editor from '../components/Editor';
|
2020-07-21 23:33:10 +02:00
|
|
|
import { PreferencesIcon, PlayIcon, ExitIcon, MoreIcon } from '../../../common/icons';
|
2020-06-15 22:46:56 +02:00
|
|
|
|
2020-06-16 22:38:43 +02:00
|
|
|
import IconButton from '../../../components/mobile/IconButton';
|
|
|
|
import Header from '../../../components/mobile/Header';
|
|
|
|
import Screen from '../../../components/mobile/MobileScreen';
|
|
|
|
import Footer from '../../../components/mobile/Footer';
|
2020-06-18 21:01:13 +02:00
|
|
|
import IDEWrapper from '../../../components/mobile/IDEWrapper';
|
2020-07-15 22:24:12 +02:00
|
|
|
import Console from '../components/Console';
|
|
|
|
import { remSize } from '../../../theme';
|
2020-07-22 00:03:22 +02:00
|
|
|
import Dropdown from '../../../components/Dropdown';
|
2020-06-16 22:23:49 +02:00
|
|
|
|
2020-06-15 23:59:21 +02:00
|
|
|
const isUserOwner = ({ project, user }) => (project.owner && project.owner.id === user.id);
|
|
|
|
|
2020-07-20 23:51:42 +02:00
|
|
|
const BottomBarContent = styled.h2`
|
|
|
|
padding: ${remSize(12)};
|
|
|
|
padding-left: ${remSize(32)};
|
|
|
|
`;
|
|
|
|
|
2020-07-22 00:03:22 +02:00
|
|
|
|
|
|
|
// TODO: Move to new file?
|
|
|
|
// const overlays = {};
|
|
|
|
// const OverlayManager = name => overlays[name] || null;
|
|
|
|
|
2020-07-22 23:48:24 +02:00
|
|
|
const OverlayManager = ({ ref, overlay, hideOverlay }) => {
|
|
|
|
useEffect(() => {
|
|
|
|
const handleClickOutside = ({ target }) => {
|
|
|
|
if (ref && ref.current && !ref.current.contains(target)) { hideOverlay(); console.log('click'); }
|
|
|
|
};
|
|
|
|
|
|
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
|
|
return () => { document.removeEventListener('mousedown', handleClickOutside); };
|
|
|
|
}, [ref]);
|
|
|
|
|
|
|
|
const headerNavOptions = [
|
|
|
|
{ icon: PreferencesIcon, title: 'Preferences', href: '/mobile/preferences' },
|
|
|
|
{ icon: PreferencesIcon, title: 'Examples', href: '/mobile/examples' },
|
|
|
|
{ icon: PreferencesIcon, title: 'Original View', href: '/mobile/preferences' }
|
|
|
|
];
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div ref={(r) => { if (ref) { ref.current = r; } }}>
|
|
|
|
{(overlay === 'dropdown') && <Dropdown items={headerNavOptions} />}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const refPropType = PropTypes.oneOfType([
|
|
|
|
PropTypes.func,
|
|
|
|
PropTypes.shape({ current: PropTypes.instanceOf(Element) })
|
|
|
|
]);
|
|
|
|
|
|
|
|
OverlayManager.propTypes = {
|
|
|
|
ref: refPropType.isRequired,
|
|
|
|
overlay: PropTypes.string,
|
|
|
|
hideOverlay: PropTypes.func.isRequired
|
|
|
|
};
|
|
|
|
|
|
|
|
OverlayManager.defaultProps = { overlay: null };
|
|
|
|
|
2020-07-22 00:03:22 +02:00
|
|
|
|
2020-06-22 20:10:20 +02:00
|
|
|
const MobileIDEView = (props) => {
|
2020-06-15 22:59:11 +02:00
|
|
|
const {
|
2020-06-29 19:45:17 +02:00
|
|
|
preferences, ide, editorAccessibility, project, updateLintMessage, clearLintMessage,
|
|
|
|
selectedFile, updateFileContent, files,
|
|
|
|
closeEditorOptions, showEditorOptions, showKeyboardShortcutModal, setUnsavedChanges,
|
|
|
|
startRefreshSketch, stopSketch, expandSidebar, collapseSidebar, clearConsole, console,
|
|
|
|
showRuntimeErrorWarning, hideRuntimeErrorWarning, startSketch
|
2020-06-15 22:59:11 +02:00
|
|
|
} = props;
|
2020-06-12 21:09:30 +02:00
|
|
|
|
2020-06-29 19:45:17 +02:00
|
|
|
const [tmController, setTmController] = useState(null); // eslint-disable-line
|
2020-07-22 23:48:24 +02:00
|
|
|
const [overlayName, setOverlay] = useState(null); // eslint-disable-line
|
2020-06-16 21:25:40 +02:00
|
|
|
|
2020-07-22 23:48:24 +02:00
|
|
|
// TODO: Move this to OverlayController (?)
|
|
|
|
const hideOverlay = () => setOverlay(null);
|
|
|
|
const overlayRef = useRef();
|
2020-07-22 00:03:22 +02:00
|
|
|
|
2020-07-22 20:37:44 +02:00
|
|
|
|
2020-06-15 22:46:56 +02:00
|
|
|
return (
|
2020-07-22 23:48:24 +02:00
|
|
|
<Screen fullscreen >
|
2020-07-01 00:11:48 +02:00
|
|
|
<Header
|
|
|
|
title={project.name}
|
|
|
|
subtitle={selectedFile.name}
|
|
|
|
leftButton={
|
2020-07-01 21:44:19 +02:00
|
|
|
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to original editor" />
|
2020-07-01 00:11:48 +02:00
|
|
|
}
|
|
|
|
>
|
2020-07-01 21:44:19 +02:00
|
|
|
<IconButton
|
2020-07-22 00:03:22 +02:00
|
|
|
// to="/mobile/preferences"
|
|
|
|
onClick={() => setOverlay('dropdown')}
|
2020-07-21 23:33:10 +02:00
|
|
|
icon={MoreIcon}
|
2020-07-22 00:03:22 +02:00
|
|
|
aria-label="Options"
|
2020-07-01 21:44:19 +02:00
|
|
|
/>
|
|
|
|
<IconButton to="/mobile/preview" onClick={() => { startSketch(); }} icon={PlayIcon} aria-label="Run sketch" />
|
2020-06-15 22:59:11 +02:00
|
|
|
</Header>
|
2020-06-12 21:09:30 +02:00
|
|
|
|
2020-06-18 21:01:13 +02:00
|
|
|
<IDEWrapper>
|
2020-06-15 22:59:11 +02:00
|
|
|
<Editor
|
2020-06-15 23:47:08 +02:00
|
|
|
lintWarning={preferences.lintWarning}
|
|
|
|
linewrap={preferences.linewrap}
|
|
|
|
lintMessages={editorAccessibility.lintMessages}
|
|
|
|
updateLintMessage={updateLintMessage}
|
|
|
|
clearLintMessage={clearLintMessage}
|
|
|
|
file={selectedFile}
|
|
|
|
updateFileContent={updateFileContent}
|
|
|
|
fontSize={preferences.fontSize}
|
|
|
|
lineNumbers={preferences.lineNumbers}
|
|
|
|
files={files}
|
|
|
|
editorOptionsVisible={ide.editorOptionsVisible}
|
|
|
|
showEditorOptions={showEditorOptions}
|
|
|
|
closeEditorOptions={closeEditorOptions}
|
|
|
|
showKeyboardShortcutModal={showKeyboardShortcutModal}
|
|
|
|
setUnsavedChanges={setUnsavedChanges}
|
|
|
|
isPlaying={ide.isPlaying}
|
|
|
|
theme={preferences.theme}
|
|
|
|
startRefreshSketch={startRefreshSketch}
|
|
|
|
stopSketch={stopSketch}
|
|
|
|
autorefresh={preferences.autorefresh}
|
|
|
|
unsavedChanges={ide.unsavedChanges}
|
|
|
|
projectSavedTime={project.updatedAt}
|
|
|
|
isExpanded={ide.sidebarIsExpanded}
|
|
|
|
expandSidebar={expandSidebar}
|
|
|
|
collapseSidebar={collapseSidebar}
|
2020-06-15 23:59:21 +02:00
|
|
|
isUserOwner={isUserOwner(props)}
|
2020-06-15 23:47:08 +02:00
|
|
|
clearConsole={clearConsole}
|
|
|
|
consoleEvents={console}
|
|
|
|
showRuntimeErrorWarning={showRuntimeErrorWarning}
|
|
|
|
hideRuntimeErrorWarning={hideRuntimeErrorWarning}
|
|
|
|
runtimeErrorWarningVisible={ide.runtimeErrorWarningVisible}
|
2020-06-15 22:59:11 +02:00
|
|
|
provideController={setTmController}
|
|
|
|
/>
|
2020-06-18 21:01:13 +02:00
|
|
|
</IDEWrapper>
|
2020-07-22 20:37:44 +02:00
|
|
|
|
2020-07-22 23:48:24 +02:00
|
|
|
{/* TODO: Create Overlay Manager */}
|
|
|
|
{<OverlayManager
|
|
|
|
ref={overlayRef}
|
|
|
|
overlay={overlayName}
|
|
|
|
hideOverlay={hideOverlay}
|
|
|
|
/>}
|
2020-06-15 22:46:56 +02:00
|
|
|
</Screen>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
|
2020-06-22 20:10:20 +02:00
|
|
|
MobileIDEView.propTypes = {
|
2020-06-15 22:46:56 +02:00
|
|
|
|
|
|
|
preferences: PropTypes.shape({
|
|
|
|
fontSize: PropTypes.number.isRequired,
|
|
|
|
autosave: PropTypes.bool.isRequired,
|
|
|
|
linewrap: PropTypes.bool.isRequired,
|
|
|
|
lineNumbers: PropTypes.bool.isRequired,
|
|
|
|
lintWarning: PropTypes.bool.isRequired,
|
|
|
|
textOutput: PropTypes.bool.isRequired,
|
|
|
|
gridOutput: PropTypes.bool.isRequired,
|
|
|
|
soundOutput: PropTypes.bool.isRequired,
|
|
|
|
theme: PropTypes.string.isRequired,
|
|
|
|
autorefresh: PropTypes.bool.isRequired
|
|
|
|
}).isRequired,
|
|
|
|
|
|
|
|
ide: PropTypes.shape({
|
|
|
|
isPlaying: PropTypes.bool.isRequired,
|
|
|
|
isAccessibleOutputPlaying: PropTypes.bool.isRequired,
|
|
|
|
consoleEvent: PropTypes.array,
|
|
|
|
modalIsVisible: PropTypes.bool.isRequired,
|
|
|
|
sidebarIsExpanded: PropTypes.bool.isRequired,
|
|
|
|
consoleIsExpanded: PropTypes.bool.isRequired,
|
|
|
|
preferencesIsVisible: PropTypes.bool.isRequired,
|
|
|
|
projectOptionsVisible: PropTypes.bool.isRequired,
|
|
|
|
newFolderModalVisible: PropTypes.bool.isRequired,
|
|
|
|
shareModalVisible: PropTypes.bool.isRequired,
|
|
|
|
shareModalProjectId: PropTypes.string.isRequired,
|
|
|
|
shareModalProjectName: PropTypes.string.isRequired,
|
|
|
|
shareModalProjectUsername: PropTypes.string.isRequired,
|
|
|
|
editorOptionsVisible: PropTypes.bool.isRequired,
|
|
|
|
keyboardShortcutVisible: PropTypes.bool.isRequired,
|
|
|
|
unsavedChanges: PropTypes.bool.isRequired,
|
|
|
|
infiniteLoop: PropTypes.bool.isRequired,
|
|
|
|
previewIsRefreshing: PropTypes.bool.isRequired,
|
|
|
|
infiniteLoopMessage: PropTypes.string.isRequired,
|
|
|
|
projectSavedTime: PropTypes.string,
|
|
|
|
previousPath: PropTypes.string.isRequired,
|
|
|
|
justOpenedProject: PropTypes.bool.isRequired,
|
|
|
|
errorType: PropTypes.string,
|
|
|
|
runtimeErrorWarningVisible: PropTypes.bool.isRequired,
|
|
|
|
uploadFileModalVisible: PropTypes.bool.isRequired
|
|
|
|
}).isRequired,
|
|
|
|
|
|
|
|
editorAccessibility: PropTypes.shape({
|
|
|
|
lintMessages: PropTypes.array.isRequired,
|
|
|
|
}).isRequired,
|
|
|
|
|
|
|
|
project: PropTypes.shape({
|
|
|
|
id: PropTypes.string,
|
|
|
|
name: PropTypes.string.isRequired,
|
|
|
|
owner: PropTypes.shape({
|
|
|
|
username: PropTypes.string,
|
|
|
|
id: PropTypes.string
|
|
|
|
}),
|
|
|
|
updatedAt: PropTypes.string
|
|
|
|
}).isRequired,
|
|
|
|
|
2020-06-19 03:00:24 +02:00
|
|
|
startSketch: PropTypes.func.isRequired,
|
|
|
|
|
2020-06-15 22:46:56 +02:00
|
|
|
updateLintMessage: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
clearLintMessage: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
selectedFile: PropTypes.shape({
|
|
|
|
id: PropTypes.string.isRequired,
|
|
|
|
content: PropTypes.string.isRequired,
|
|
|
|
name: PropTypes.string.isRequired
|
|
|
|
}).isRequired,
|
|
|
|
|
|
|
|
updateFileContent: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
files: PropTypes.arrayOf(PropTypes.shape({
|
|
|
|
id: PropTypes.string.isRequired,
|
|
|
|
name: PropTypes.string.isRequired,
|
|
|
|
content: PropTypes.string.isRequired
|
|
|
|
})).isRequired,
|
|
|
|
|
|
|
|
closeEditorOptions: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
showEditorOptions: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
showKeyboardShortcutModal: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
setUnsavedChanges: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
startRefreshSketch: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
stopSketch: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
expandSidebar: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
collapseSidebar: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
clearConsole: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
console: PropTypes.arrayOf(PropTypes.shape({
|
|
|
|
method: PropTypes.string.isRequired,
|
|
|
|
args: PropTypes.arrayOf(PropTypes.string)
|
|
|
|
})).isRequired,
|
|
|
|
|
|
|
|
showRuntimeErrorWarning: PropTypes.func.isRequired,
|
|
|
|
|
|
|
|
hideRuntimeErrorWarning: PropTypes.func.isRequired,
|
|
|
|
|
2020-06-15 23:59:21 +02:00
|
|
|
user: PropTypes.shape({
|
|
|
|
authenticated: PropTypes.bool.isRequired,
|
|
|
|
id: PropTypes.string,
|
|
|
|
username: PropTypes.string
|
|
|
|
}).isRequired,
|
2020-06-15 22:46:56 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
function mapStateToProps(state) {
|
|
|
|
return {
|
|
|
|
files: state.files,
|
|
|
|
selectedFile: state.files.find(file => file.isSelectedFile) ||
|
|
|
|
state.files.find(file => file.name === 'sketch.js') ||
|
|
|
|
state.files.find(file => file.name !== 'root'),
|
|
|
|
htmlFile: getHTMLFile(state.files),
|
|
|
|
ide: state.ide,
|
|
|
|
preferences: state.preferences,
|
|
|
|
editorAccessibility: state.editorAccessibility,
|
|
|
|
user: state.user,
|
|
|
|
project: state.project,
|
|
|
|
toast: state.toast,
|
|
|
|
console: state.console
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
function mapDispatchToProps(dispatch) {
|
|
|
|
return bindActionCreators(
|
|
|
|
Object.assign(
|
|
|
|
{},
|
|
|
|
EditorAccessibilityActions,
|
|
|
|
FileActions,
|
|
|
|
ProjectActions,
|
|
|
|
IDEActions,
|
|
|
|
PreferencesActions,
|
|
|
|
UserActions,
|
|
|
|
ToastActions,
|
|
|
|
ConsoleActions
|
|
|
|
),
|
|
|
|
dispatch
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2020-06-22 20:10:20 +02:00
|
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobileIDEView));
|