🚧 mount List components

This commit is contained in:
ghalestrilo 2020-07-28 11:33:38 -03:00
parent 96b0ed4471
commit 57ee6f0b8b
4 changed files with 48 additions and 13 deletions

View file

@ -34,7 +34,8 @@ class App extends React.Component {
render() { render() {
return ( return (
<div className="app"> <div className="app">
{this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />} {/* FIXME: remove false */}
{false && this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
{this.props.children} {this.props.children}
</div> </div>
); );

View file

@ -7,9 +7,13 @@ import IconButton from '../../components/mobile/IconButton';
import { ExitIcon } from '../../common/icons'; import { ExitIcon } from '../../common/icons';
import Footer from '../../components/mobile/Footer'; import Footer from '../../components/mobile/Footer';
import { prop, remSize } from '../../theme'; import { prop, remSize } from '../../theme';
import SketchList from '../IDE/components/SketchList';
import CollectionList from '../IDE/components/CollectionList';
import AssetList from '../IDE/components/AssetList';
import Content from './MobileViewContent';
const FooterTab = styled.div` const FooterTab = styled.div`
background: ${props => prop(`MobilePanel.default.${props.selected ? 'background' : 'foreground'}`)}; background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)}; color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
padding: ${remSize(16)}; padding: ${remSize(16)};
width: 100%; width: 100%;
@ -19,24 +23,49 @@ const FooterTab = styled.div`
const FooterTabContainer = styled.div` const FooterTabContainer = styled.div`
display: flex; display: flex;
h3 { text-align: center; width: 100%;} h3 { text-align: center; width: 100%; }
`; `;
// switch (tabKey) {
// case TabKey.assets:
// return <AssetList key={username} username={username} />;
// case TabKey.collections:
// return <CollectionList key={username} username={username} />;
// case TabKey.sketches:
// default:
// return <SketchList key={username} username={username} />;
// }
const Panels = {
Sketches: () => <SketchList />,
Collections: () => <CollectionList />,
Assets: () => <AssetList />
};
const MobileExamples = () => { const MobileExamples = () => {
const tabs = ['Sketches', 'Collections', 'Assets']; // const tabs = ['Sketches', 'Collections', 'Assets'];
const [selected, selectTab] = useState(tabs[0]); const Tabs = Object.keys(Panels);
const [selected, selectTab] = useState(Tabs[0]);
return ( return (
<Screen fullscreen> <Screen fullscreen>
<Header inverted title="My Stuff"> <Header inverted title="My Stuff">
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" /> <IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
</Header> </Header>
<Content>
{Panels[selected] && Panels[selected]()}
</Content>
<Footer> <Footer>
<FooterTabContainer> <FooterTabContainer>
{Tabs.map(tab => (
{tabs.map(tab => ( <FooterTab
<FooterTab selected={tab === selected} onClick={() => selectTab(tab)}> key={`tab-${tab}`}
selected={tab === selected}
onClick={() => selectTab(tab)}
>
<h3>{tab}</h3> <h3>{tab}</h3>
</FooterTab>)) </FooterTab>))
} }

View file

@ -19,11 +19,7 @@ import { getHTMLFile } from '../IDE/reducers/files';
import { ExitIcon } from '../../common/icons'; import { ExitIcon } from '../../common/icons';
import { remSize } from '../../theme'; import { remSize } from '../../theme';
import Footer from '../../components/mobile/Footer'; import Footer from '../../components/mobile/Footer';
import Content from './MobileViewContent';
const Content = styled.div`
z-index: 0;
margin-top: ${remSize(68)};
`;
const MobileSketchView = (props) => { const MobileSketchView = (props) => {
const { files, ide, preferences } = useSelector(state => state); const { files, ide, preferences } = useSelector(state => state);

View file

@ -0,0 +1,9 @@
import React from 'react';
import styled from 'styled-components';
import { remSize } from '../../theme';
export default styled.div`
z-index: 0;
margin-top: ${remSize(68)};
`;