mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-25 18:13:10 +03:00
feat(SceneFilesFolder): add filter components
This commit is contained in:
parent
0349657281
commit
5aa62e9af0
@ -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";
|
|
||||||
|
let objects = viewer.library;
|
||||||
|
// const tab = page.params?.tab || "grid";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<WebsitePrototypeWrapper
|
<WebsitePrototypeWrapper
|
||||||
title={`${this.props.page.pageTitle} • Slate`}
|
title={`${page.pageTitle} • Slate`}
|
||||||
url={`${Constants.hostname}${this.props.page.pathname}`}
|
url={`${Constants.hostname}${page.pathname}`}
|
||||||
>
|
>
|
||||||
<ScenePage css={STYLES_SCENE_PAGE}>
|
<ScenePage css={STYLES_SCENE_PAGE}>
|
||||||
<GlobalCarousel
|
<GlobalCarousel
|
||||||
carouselType="DATA"
|
carouselType="DATA"
|
||||||
viewer={this.props.viewer}
|
viewer={viewer}
|
||||||
objects={files}
|
objects={objects}
|
||||||
onAction={this.props.onAction}
|
onAction={onAction}
|
||||||
isMobile={this.props.isMobile}
|
isMobile={isMobile}
|
||||||
params={this.props.page.params}
|
params={page.params}
|
||||||
isOwner={true}
|
isOwner={true}
|
||||||
index={this.state.index}
|
index={index}
|
||||||
onChange={(index) => this.setState({ index })}
|
onChange={(index) => setIndex(index)}
|
||||||
/>
|
/>
|
||||||
|
<Filter.Provider viewer={viewer}>
|
||||||
{files.length ? (
|
<Filter.NavbarPortal>
|
||||||
<DataView
|
<div css={Styles.CONTAINER_CENTERED}>
|
||||||
key="scene-files-folder"
|
<Filter.SidebarTrigger />
|
||||||
onAction={this.props.onAction}
|
<Filter.Breadcrumb style={{ marginLeft: 16 }} />
|
||||||
viewer={this.props.viewer}
|
|
||||||
items={files}
|
|
||||||
view={tab}
|
|
||||||
isOwner={true}
|
|
||||||
page={this.props.page}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<EmptyState>
|
|
||||||
<FileTypeGroup />
|
|
||||||
<div style={{ marginTop: 24 }}>
|
|
||||||
Drag and drop files into Slate to upload, or press the plus button to save a file or
|
|
||||||
link
|
|
||||||
</div>
|
</div>
|
||||||
</EmptyState>
|
<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>
|
</ScenePage>
|
||||||
</WebsitePrototypeWrapper>
|
</WebsitePrototypeWrapper>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user