p5.js-web-editor/client/modules/Mobile/MobileExamples.jsx

78 lines
2.3 KiB
React
Raw Normal View History

2020-07-24 21:43:07 +00:00
import React, { useState } from 'react';
import { bindActionCreators } from 'redux';
2020-07-24 21:43:07 +00:00
import styled from 'styled-components';
import Screen from '../../components/mobile/MobileScreen';
import Header from '../../components/mobile/Header';
import IconButton from '../../components/mobile/IconButton';
import { ExitIcon } from '../../common/icons';
2020-07-24 21:43:07 +00:00
import Footer from '../../components/mobile/Footer';
import { prop, remSize } from '../../theme';
2020-07-28 14:33:38 +00:00
import SketchList from '../IDE/components/SketchList';
import CollectionList from '../IDE/components/CollectionList';
import AssetList from '../IDE/components/AssetList';
import Content from './MobileViewContent';
2020-07-24 21:43:07 +00:00
const FooterTab = styled.div`
2020-07-28 14:33:38 +00:00
background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
2020-07-24 21:43:07 +00:00
color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
padding: ${remSize(16)};
width: 100%;
display: flex;
`;
const FooterTabContainer = styled.div`
display: flex;
2020-07-28 14:33:38 +00:00
h3 { text-align: center; width: 100%; }
2020-07-24 21:43:07 +00:00
`;
2020-07-28 14:33:38 +00:00
// 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 />
};
2020-07-24 21:43:07 +00:00
const MobileExamples = () => {
2020-07-28 14:33:38 +00:00
// const tabs = ['Sketches', 'Collections', 'Assets'];
const Tabs = Object.keys(Panels);
const [selected, selectTab] = useState(Tabs[0]);
2020-07-24 21:43:07 +00:00
return (
<Screen fullscreen>
<Header inverted title="My Stuff">
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
</Header>
2020-07-28 14:33:38 +00:00
<Content>
{Panels[selected] && Panels[selected]()}
</Content>
2020-07-24 21:43:07 +00:00
<Footer>
<FooterTabContainer>
2020-07-28 14:33:38 +00:00
{Tabs.map(tab => (
<FooterTab
key={`tab-${tab}`}
selected={tab === selected}
onClick={() => selectTab(tab)}
>
2020-07-24 21:43:07 +00:00
<h3>{tab}</h3>
</FooterTab>))
}
</FooterTabContainer>
</Footer>
</Screen>);
};
export default MobileExamples;