slate/components/core/CarouselSidebarData.js

316 lines
8.3 KiB
JavaScript
Raw Normal View History

import * as React from "react";
import * as Constants from "~/common/constants";
import * as Strings from "~/common/strings";
2020-09-27 07:43:25 +03:00
import * as Actions from "~/common/actions";
import * as SVG from "~/common/svg";
import * as Window from "~/common/window";
import { css } from "@emotion/react";
import { LoaderSpinner } from "~/components/system/components/Loaders";
2020-09-27 07:43:25 +03:00
import { SlatePicker } from "~/components/core/SlatePicker";
import { dispatchCustomEvent } from "~/common/custom-events";
const STYLES_NO_VISIBLE_SCROLL = css`
overflow-y: scroll;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
::-webkit-scrollbar {
width: 0px;
display: none;
}
::-webkit-scrollbar-track {
background: ${Constants.system.foreground};
}
::-webkit-scrollbar-thumb {
background: ${Constants.system.darkGray};
}
`;
const STYLES_SIDEBAR = css`
width: 420px;
padding: 48px 24px 0px 24px;
flex-shrink: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
position: relative;
2020-10-24 22:55:19 +03:00
background-color: rgba(20, 20, 20, 0.8);
${STYLES_NO_VISIBLE_SCROLL}
@supports (
(-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))
) {
-webkit-backdrop-filter: blur(75px);
backdrop-filter: blur(75px);
background-color: rgba(150, 150, 150, 0.2);
}
@media (max-width: ${Constants.sizes.mobile}px) {
display: none;
}
`;
const STYLES_DISMISS_BOX = css`
position: absolute;
top: 16px;
right: 16px;
color: ${Constants.system.darkGray};
cursor: pointer;
:hover {
color: ${Constants.system.white};
}
`;
const STYLES_CONTAINER = css`
width: 100%;
height: 100%;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: -ms-autohiding-scrollbar;
padding-bottom: 88px;
::-webkit-scrollbar {
display: none;
}
`;
const STYLES_META = css`
2020-09-27 07:43:25 +03:00
padding: 14px 0px 8px 0px;
overflow-wrap: break-word;
`;
const STYLES_META_TITLE = css`
2020-09-27 07:43:25 +03:00
font-family: ${Constants.font.semiBold};
color: ${Constants.system.white};
2020-09-27 07:43:25 +03:00
font-size: ${Constants.typescale.lvl2};
text-decoration: none;
:hover {
color: ${Constants.system.blue};
}
`;
2020-09-27 07:43:25 +03:00
const STYLES_TAG = css`
margin-right: 24px;
2020-09-27 07:43:25 +03:00
padding: 0px 2px;
border-radius: 2px;
border: 1px solid ${Constants.system.darkGray};
`;
const STYLES_META_DETAILS = css`
color: ${Constants.system.darkGray};
text-transform: uppercase;
2020-09-27 07:43:25 +03:00
margin: 24px 0px;
font-family: ${Constants.font.medium};
font-size: 0.9rem;
`;
2020-09-27 07:43:25 +03:00
const STYLES_ACTIONS = css`
color: ${Constants.system.white};
border: 1px solid #3c3c3c;
2020-09-27 07:43:25 +03:00
border-radius: 4px;
background-color: transparent;
2020-09-27 07:43:25 +03:00
margin-bottom: 48px;
`;
2020-09-27 07:43:25 +03:00
const STYLES_ACTION = css`
cursor: pointer;
padding: 12px 16px;
border-bottom: 1px solid #3c3c3c;
display: flex;
align-items: center;
2020-09-27 07:43:25 +03:00
:hover {
color: ${Constants.system.brand};
}
:last-child {
border: none;
}
`;
2020-09-27 07:43:25 +03:00
const STYLES_SECTION_HEADER = css`
font-family: ${Constants.font.semiBold};
font-size: 1.1rem;
margin-bottom: 32px;
`;
2020-09-27 07:43:25 +03:00
const STYLES_HIDDEN = css`
position: absolute;
opacity: 0;
pointer-events: none;
`;
export default class CarouselSidebarData extends React.Component {
2020-09-27 07:43:25 +03:00
_ref = null;
2020-09-27 07:43:25 +03:00
state = {
selected: {},
isPublic: false,
copyValue: "",
};
2020-09-27 07:43:25 +03:00
componentDidMount = () => {
let isPublic = false;
let selected = {};
const id = this.props.data.id;
for (let slate of this.props.slates) {
if (slate.data.objects.some((o) => o.id === id)) {
if (slate.data.public) {
isPublic = true;
}
selected[slate.id] = true;
}
}
this.setState({ selected, isPublic });
};
_handleDownload = () => {
2020-10-25 22:20:33 +03:00
const filename = this.props.data.file;
let cid = this.props.data.cid || this.props.data.ipfs.replace("/ipfs/", "");
const uri = Strings.getCIDGatewayURL(cid);
Window.saveAs(uri, filename);
};
2020-09-27 07:43:25 +03:00
_handleCreateSlate = async () => {
this.props.onClose();
this.props.onAction({
type: "SIDEBAR",
value: "SIDEBAR_CREATE_SLATE",
data: { files: [this.props.data] },
});
};
2020-09-27 07:43:25 +03:00
_handleAdd = (slate) => {
//NOTE(martina): triggers action through DataView.js (which is always mounted if this carousel is open)
2020-09-27 07:43:25 +03:00
if (this.state.selected[slate.id]) {
dispatchCustomEvent({
name: "remote-slate-object-remove",
detail: { id: this.props.data.id, slate: slate, data: this.props.data },
2020-09-27 07:43:25 +03:00
});
this.setState({
selected: { ...this.state.selected, [slate.id]: false },
});
} else {
dispatchCustomEvent({
name: "remote-slate-object-add",
detail: { id: this.props.data.id, slate: slate, data: this.props.data },
2020-09-27 07:43:25 +03:00
});
this.setState({
selected: { ...this.state.selected, [slate.id]: slate },
});
}
};
2020-09-27 23:11:04 +03:00
_handleCopy = (copyValue, loading) => {
this.setState({ copyValue, loading }, () => {
2020-09-27 07:43:25 +03:00
this._ref.select();
document.execCommand("copy");
});
2020-09-27 23:11:04 +03:00
setTimeout(() => {
this.setState({ loading: false });
}, 10000);
2020-09-27 07:43:25 +03:00
};
_handleDelete = async (cid) => {
//NOTE(martina): triggers action through DataView.js (which is always mounted if this carousel is open)
2020-09-27 07:43:25 +03:00
dispatchCustomEvent({
name: "remote-data-deletion",
detail: { cid },
});
2020-09-27 07:43:25 +03:00
};
render() {
const { cid, file, type, size, url } = this.props.data;
const elements = [];
if (this.props.onClose) {
elements.push(
<div key="s-1" css={STYLES_DISMISS_BOX} onClick={this.props.onClose}>
<SVG.Dismiss height="24px" />
</div>
);
}
elements.push(
<div key="s-2" css={STYLES_CONTAINER}>
<div css={STYLES_META}>
<a css={STYLES_META_TITLE} target="_blank" href={Strings.getCIDGatewayURL(cid)}>
2020-09-27 07:43:25 +03:00
{file}
</a>
<div css={STYLES_META_DETAILS}>
<span css={STYLES_TAG}>{type}</span> <span>{Strings.bytesToSize(size)}</span>
</div>
</div>
2020-09-27 07:43:25 +03:00
<div css={STYLES_ACTIONS}>
<div css={STYLES_ACTION} onClick={() => this._handleCopy(cid, "cidCopying")}>
2020-09-27 07:43:25 +03:00
<SVG.CopyAndPaste height="24px" />
2020-09-27 23:11:04 +03:00
<span style={{ marginLeft: 16 }}>
{this.state.loading === "cidCopying" ? "Copied!" : "Copy file CID"}
2020-09-27 23:11:04 +03:00
</span>
2020-09-27 07:43:25 +03:00
</div>
<div css={STYLES_ACTION} onClick={() => this._handleCopy(url, "urlCopying")}>
2020-09-27 07:43:25 +03:00
<SVG.DeepLink height="24px" />
2020-09-27 23:11:04 +03:00
<span style={{ marginLeft: 16 }}>
{this.state.loading === "urlCopying" ? "Copied!" : "Copy link"}
</span>
2020-09-27 07:43:25 +03:00
</div>
2020-10-25 22:20:33 +03:00
<div css={STYLES_ACTION} onClick={this._handleDownload}>
<SVG.Download height="24px" />
<span style={{ marginLeft: 16 }}>Download</span>
</div>
2020-09-27 07:43:25 +03:00
<div css={STYLES_ACTION} onClick={() => this._handleDelete(cid)}>
<SVG.Trash height="24px" />
2020-10-24 23:00:21 +03:00
{this.props.loading === "deleting" ? (
<LoaderSpinner style={{ height: 20, width: 20, marginLeft: 16 }} />
2020-09-27 23:11:04 +03:00
) : (
<span style={{ marginLeft: 16 }}>Delete</span>
)}
2020-09-27 07:43:25 +03:00
</div>
</div>
<div css={STYLES_SECTION_HEADER}>Connected Slates</div>
<SlatePicker
dark
2020-09-27 07:43:25 +03:00
slates={this.props.slates}
selected={this.state.selected}
onAdd={this._handleAdd}
onCreateSlate={this._handleCreateSlate}
loading={this.props.loading}
selectedColor={Constants.system.white}
2020-09-27 07:43:25 +03:00
/>
<div css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
Privacy
</div>
<div style={{ color: Constants.system.darkGray, lineHeight: "1.5" }}>
{this.state.isPublic
? "Public. This file is currently visible to others and searchable within Slate through public slates."
: "Private. This file is currently not visible to others unless they have the link."}
</div>
2020-09-27 07:43:25 +03:00
<input
css={STYLES_HIDDEN}
ref={(c) => {
this._ref = c;
}}
readOnly
value={this.state.copyValue}
/>
</div>
);
if (!elements.length) {
return null;
}
return (
<div css={STYLES_SIDEBAR} style={{ display: this.props.display }}>
{elements}
</div>
);
}
}