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

209 lines
5.5 KiB
React
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
2020-07-24 23:43:07 +02:00
import styled from 'styled-components';
import { useSelector } from 'react-redux';
import { withRouter } from 'react-router';
import Screen from '../../components/mobile/MobileScreen';
import Header from '../../components/mobile/Header';
import IconButton from '../../components/mobile/IconButton';
import { ExitIcon, MoreIcon } from '../../common/icons';
2020-07-24 23:43:07 +02:00
import Footer from '../../components/mobile/Footer';
import { remSize, prop } from '../../theme';
2020-07-28 16:33:38 +02: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-31 14:09:35 +02:00
import { SketchSearchbar, CollectionSearchbar } from '../IDE/components/Searchbar';
import Button from '../../common/Button';
import useAsModal from '../../components/useAsModal';
import Dropdown from '../../components/Dropdown';
import FooterTabSwitcher from '../../components/mobile/TabSwitcher';
import FooterTab from '../../components/mobile/Tab';
2020-08-11 21:56:56 +02:00
import Loader from '../App/components/loader';
const EXAMPLE_USERNAME = 'p5';
const ContentWrapper = styled(Content)`
table {
table-layout: fixed;
}
td ,thead button {
font-size: ${remSize(10)};
text-align: left;
};
tbody th {
font-size: ${remSize(16)};
width: 100%;
padding-right: ${remSize(12)};
font-weight: bold;
display: flex;
grid-area: name;
};
tbody td, thead th {
justify-self: center;
align-self: flex-end;
color: ${prop('primaryTextColor')}
}
2020-08-11 23:38:52 +02:00
2020-08-11 21:30:48 +02:00
thead th svg { margin-left: ${remSize(8)} }
2020-08-11 23:38:52 +02:00
tbody td { justify-self: start; text-align: start; padding: 0 }
tbody td:nth-child(2) { justify-self: start; text-align: start; padding-left: ${remSize(12)}};
tbody td:last-child { justify-self: end; text-align: end; };
2020-08-11 23:38:52 +02:00
.sketch-list__dropdown-column { width: auto; };
tbody { height: ${remSize(48)}; }
.sketches-table-container {
padding-bottom: ${remSize(160)};
background: ${prop('SketchList.background')};
}
.sketches-table__row {
2020-08-11 23:38:52 +02:00
background: ${prop('SketchList.card.background')} !important;
height: auto
}
2020-08-11 23:38:52 +02:00
tr {
align-self: start;
display: grid;
box-shadow: 0 0 18px 0 ${prop('shadowColor')};
};
2020-08-11 21:37:26 +02:00
2020-08-11 21:56:56 +02:00
thead tr {
grid-template-columns: 1fr 1fr 1fr 0fr;
2020-08-11 21:56:56 +02:00
}
tbody tr {
padding: ${remSize(8)};
border-radius: ${remSize(4)};
2020-08-11 23:38:52 +02:00
grid-template-columns: 5fr 5fr 1fr;
2020-08-11 21:56:56 +02:00
grid-template-areas: "name name name" "content content content";
}
2020-08-11 21:37:26 +02:00
2020-08-11 21:56:56 +02:00
.loader-container { position: fixed ; padding-bottom: 32% }
`;
const Subheader = styled.div`
display: flex;
flex-direction: row;
* { border-radius: 0px; }
.searchbar {
display: flex;
width: 100%;
}
.searchbar__input { width: 100%; }
`;
const SubheaderButton = styled(Button)`
border-radius: 0px !important;
`;
2020-07-28 16:33:38 +02:00
const Panels = {
2020-07-31 14:04:48 +02:00
sketches: SketchList,
collections: CollectionList,
assets: AssetList
2020-07-28 16:33:38 +02:00
};
2020-07-24 23:43:07 +02:00
const navOptions = username => [
{ title: 'Create Sketch', href: '/mobile' },
{ title: 'Create Collection', href: `/mobile/${username}/collections/create` }
];
2020-07-31 14:04:48 +02:00
const getPanel = (pathname) => {
const pathparts = pathname ? pathname.split('/') : [];
const matches = Object.keys(Panels).map(part => part.toLowerCase()).filter(part => pathparts.includes(part));
return matches && matches.length > 0 && matches[0];
};
const NavItem = styled.li`
position: relative;
`;
const isOwner = (user, params) => user && params && user.username === params.username;
const renderPanel = (name, props) => (Component => (Component && <Component {...props} mobile />))(Panels[name]);
const MobileDashboard = ({ params, location }) => {
const user = useSelector(state => state.user);
const { username: paramsUsername } = params;
2020-07-31 14:04:48 +02:00
const { pathname } = location;
const Tabs = Object.keys(Panels);
const isExamples = paramsUsername === EXAMPLE_USERNAME;
2020-07-31 14:04:48 +02:00
const panel = getPanel(pathname);
const [toggleNavDropdown, NavDropdown] = useAsModal(<Dropdown
items={navOptions(user.username)}
align="right"
/>);
2020-07-24 23:43:07 +02:00
return (
2020-07-31 14:04:48 +02:00
<Screen fullscreen key={pathname}>
<Header slim inverted title={isExamples ? 'Examples' : 'My Stuff'}>
<NavItem>
<IconButton
onClick={toggleNavDropdown}
icon={MoreIcon}
aria-label="Options"
/>
<NavDropdown />
</NavItem>
2020-07-24 23:43:07 +02:00
<IconButton to="/mobile" icon={ExitIcon} aria-label="Return to ide view" />
</Header>
2020-07-28 16:33:38 +02:00
<ContentWrapper slimheader>
<Subheader>
2020-07-31 14:09:35 +02:00
{panel === Tabs[0] && <SketchSearchbar />}
{panel === Tabs[1] && <CollectionSearchbar />}
</Subheader>
{renderPanel(panel, { username: paramsUsername, key: pathname })}
</ContentWrapper>
2020-07-24 23:43:07 +02:00
<Footer>
{!isExamples &&
<FooterTabSwitcher>
{Tabs.map(tab => (
<FooterTab
key={`tab-${tab}`}
2020-07-31 14:04:48 +02:00
selected={tab === panel}
to={pathname.replace(panel, tab)}
>
2020-07-31 14:04:48 +02:00
<h3>{(isExamples && tab === 'Sketches') ? 'Examples' : tab}</h3>
</FooterTab>))
}
</FooterTabSwitcher>
}
2020-07-24 23:43:07 +02:00
</Footer>
</Screen>);
};
MobileDashboard.propTypes = {
2020-07-31 14:04:48 +02:00
location: PropTypes.shape({
pathname: PropTypes.string.isRequired
}).isRequired,
params: PropTypes.shape({
username: PropTypes.string.isRequired
})
};
MobileDashboard.defaultProps = { params: {} };
export default withRouter(MobileDashboard);