filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-25 10:05:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(SceneFilesFolder): add filter components

Browse Source
This commit is contained in:
Aminejv 2021-09-24 18:18:05 +01:00
parent 0349657281
commit 5aa62e9af0
1 changed files with 51 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
scenes/SceneFilesFolder.js
View File

@ -1,70 +1,69 @@
import * as React from "react"; import * as React from "react";
import * as Constants from "~/common/constants"; import * as Constants from "~/common/constants";
import * as Filter from "~/components/core/Filter";
import * as Styles from "~/common/styles";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
import { FileTypeGroup } from "~/components/core/FileTypeIcon";
import { GlobalCarousel } from "~/components/system/components/GlobalCarousel"; import { GlobalCarousel } from "~/components/system/components/GlobalCarousel";
import ScenePage from "~/components/core/ScenePage"; import ScenePage from "~/components/core/ScenePage";
import DataView from "~/components/core/DataView";
import EmptyState from "~/components/core/EmptyState";
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper"; import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
const STYLES_SCENE_PAGE = css` const STYLES_SCENE_PAGE = css`
padding: 20px 24px 44px; padding: 0px;
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
padding: 31px 16px 44px; padding: 0px;
} }
`; `;
export default class SceneFilesFolder extends React.Component { const STYLES_FILTER_TITLE_WRAPPER = css`
state = { position: absolute;
index: -1, top: 50%;
}; left: 50%;
transform: translate(-50%, -50%);
`;
render() { export default function SceneFilesFolder({ viewer, page, onAction, isMobile }) {
let files = this.props.viewer?.library; const [index, setIndex] = React.useState(-1);
const tab = this.props.page.params?.tab || "grid";
return ( let objects = viewer.library;
<WebsitePrototypeWrapper // const tab = page.params?.tab || "grid";
title={`${this.props.page.pageTitle} • Slate`}
url={`${Constants.hostname}${this.props.page.pathname}`}
>
<ScenePage css={STYLES_SCENE_PAGE}>
<GlobalCarousel
carouselType="DATA"
viewer={this.props.viewer}
objects={files}
onAction={this.props.onAction}
isMobile={this.props.isMobile}
params={this.props.page.params}
isOwner={true}
index={this.state.index}
onChange={(index) => this.setState({ index })}
/>
{files.length ? ( return (
<DataView <WebsitePrototypeWrapper
key="scene-files-folder" title={`${page.pageTitle} • Slate`}
onAction={this.props.onAction} url={`${Constants.hostname}${page.pathname}`}
viewer={this.props.viewer} >
items={files} <ScenePage css={STYLES_SCENE_PAGE}>
view={tab} <GlobalCarousel
isOwner={true} carouselType="DATA"
page={this.props.page} viewer={viewer}
/> objects={objects}
) : ( onAction={onAction}
<EmptyState> isMobile={isMobile}
<FileTypeGroup /> params={page.params}
<div style={{ marginTop: 24 }}> isOwner={true}
Drag and drop files into Slate to upload, or press the plus button to save a file or index={index}
link onChange={(index) => setIndex(index)}
</div> />
</EmptyState> <Filter.Provider viewer={viewer}>
)} <Filter.NavbarPortal>
</ScenePage> <div css={Styles.CONTAINER_CENTERED}>
</WebsitePrototypeWrapper> <Filter.SidebarTrigger />
); <Filter.Breadcrumb style={{ marginLeft: 16 }} />
} </div>
<div css={STYLES_FILTER_TITLE_WRAPPER}>
<Filter.Title />
</div>
<Filter.Actions />
</Filter.NavbarPortal>
<div css={Styles.HORIZONTAL_CONTAINER}>
<Filter.Sidebar />
<Filter.Content onAction={onAction} viewer={viewer} page={page} />
</div>
</Filter.Provider>
</ScenePage>
</WebsitePrototypeWrapper>
);
} }