123 lines
3.5 KiB
JavaScript
123 lines
3.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Link } from 'react-router';
|
|
import { connect } from 'react-redux';
|
|
import styled from 'styled-components';
|
|
import Header from '../../components/mobile/Header';
|
|
import PreviewFrame from '../IDE/components/PreviewFrame';
|
|
import Screen from '../../components/mobile/MobileScreen';
|
|
import { getHTMLFile, getJSFiles, getCSSFiles } from '../IDE/reducers/files';
|
|
|
|
import { ExitIcon } from '../../common/Icons';
|
|
import { remSize } from '../../theme';
|
|
|
|
|
|
const Content = styled.div`
|
|
z-index: 0;
|
|
margin-top: ${remSize(48)};
|
|
`;
|
|
|
|
const IconLinkWrapper = styled(Link)`
|
|
width: 2rem;
|
|
margin-right: 1.25rem;
|
|
margin-left: none;
|
|
`;
|
|
|
|
const noop = () => {};
|
|
|
|
const MobileSketchView = (props) => {
|
|
const [overlay, setOverlay] = useState(null);
|
|
|
|
// TODO: useSelector requires react-redux ^7.1.0
|
|
// const htmlFile = useSelector(state => getHTMLFile(state.files));
|
|
// const jsFiles = useSelector(state => getJSFiles(state.files));
|
|
// const cssFiles = useSelector(state => getCSSFiles(state.files));
|
|
// const files = useSelector(state => state.files);
|
|
|
|
const {
|
|
htmlFile, jsFiles, cssFiles, files
|
|
} = props;
|
|
|
|
return (
|
|
<Screen>
|
|
<Header>
|
|
<IconLinkWrapper to="/mobile" aria-label="Return to original editor">
|
|
<ExitIcon viewBox="0 0 16 16" />
|
|
</IconLinkWrapper>
|
|
<div>
|
|
<h2>Hello</h2>
|
|
{/* <h3>{selectedFile.name}</h3> */}
|
|
</div>
|
|
|
|
{/* <div style={{ marginLeft: '2rem' }}>
|
|
<IconButton onClick={() => setOverlay('preferences')}>
|
|
<PreferencesIcon focusable="false" aria-hidden="true" />
|
|
</IconButton>
|
|
<IconButton onClick={() => setOverlay('runSketch')}>
|
|
<PlayIcon viewBox="-1 -1 7 7" focusable="false" aria-hidden="true" />
|
|
</IconButton>
|
|
</div> */}
|
|
</Header>
|
|
<Content>
|
|
<h1>Hello</h1>
|
|
<PreviewFrame
|
|
htmlFile={htmlFile}
|
|
jsFiles={jsFiles}
|
|
cssFiles={cssFiles}
|
|
files={files}
|
|
head={
|
|
<link type="text/css" rel="stylesheet" href="/preview-styles.css" />
|
|
}
|
|
fullView
|
|
isPlaying
|
|
isAccessibleOutputPlaying={false}
|
|
textOutput={false}
|
|
gridOutput={false}
|
|
soundOutput={false}
|
|
dispatchConsoleEvent={noop}
|
|
endSketchRefresh={noop}
|
|
previewIsRefreshing={false}
|
|
setBlobUrl={noop}
|
|
stopSketch={noop}
|
|
expandConsole={noop}
|
|
clearConsole={noop}
|
|
/>
|
|
</Content>
|
|
</Screen>);
|
|
};
|
|
|
|
MobileSketchView.propTypes = {
|
|
htmlFile: PropTypes.shape({
|
|
id: PropTypes.string.isRequired,
|
|
content: PropTypes.string.isRequired,
|
|
name: PropTypes.string.isRequired
|
|
}).isRequired,
|
|
jsFiles: PropTypes.arrayOf(PropTypes.shape({
|
|
id: PropTypes.string.isRequired,
|
|
content: PropTypes.string.isRequired,
|
|
name: PropTypes.string.isRequired
|
|
})).isRequired,
|
|
cssFiles: PropTypes.arrayOf(PropTypes.shape({
|
|
id: PropTypes.string.isRequired,
|
|
content: PropTypes.string.isRequired,
|
|
name: PropTypes.string.isRequired
|
|
})).isRequired,
|
|
files: PropTypes.arrayOf(PropTypes.shape({
|
|
id: PropTypes.string.isRequired,
|
|
content: PropTypes.string.isRequired,
|
|
name: PropTypes.string.isRequired
|
|
})).isRequired,
|
|
};
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
htmlFile: getHTMLFile(state.files),
|
|
jsFiles: getJSFiles(state.files),
|
|
cssFiles: getCSSFiles(state.files),
|
|
files: state.files
|
|
};
|
|
}
|
|
|
|
|
|
export default connect(mapStateToProps)(MobileSketchView);
|