2020-09-09 07:12:54 +03:00
|
|
|
import * as React from "react";
|
|
|
|
import * as Constants from "~/common/constants";
|
2020-10-24 00:28:53 +03:00
|
|
|
import * as Strings from "~/common/strings";
|
2020-09-27 07:43:25 +03:00
|
|
|
import * as Actions from "~/common/actions";
|
2020-10-24 00:28:53 +03:00
|
|
|
import * as SVG from "~/common/svg";
|
|
|
|
import * as Window from "~/common/window";
|
2020-09-09 07:12:54 +03:00
|
|
|
|
2020-11-04 20:55:48 +03:00
|
|
|
import { css } from "@emotion/core";
|
2020-10-24 00:28:53 +03:00
|
|
|
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";
|
2020-09-09 07:12:54 +03:00
|
|
|
|
2020-10-24 00:28:53 +03:00
|
|
|
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);
|
2020-10-24 00:28:53 +03:00
|
|
|
${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};
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-09-09 07:12:54 +03:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-09-09 07:31:38 +03:00
|
|
|
const STYLES_META = css`
|
2020-09-27 07:43:25 +03:00
|
|
|
padding: 14px 0px 8px 0px;
|
2020-09-09 07:31:38 +03:00
|
|
|
overflow-wrap: break-word;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_META_TITLE = css`
|
2020-09-27 07:43:25 +03:00
|
|
|
font-family: ${Constants.font.semiBold};
|
2020-10-24 00:28:53 +03:00
|
|
|
color: ${Constants.system.white};
|
2020-09-27 07:43:25 +03:00
|
|
|
font-size: ${Constants.typescale.lvl2};
|
2020-09-14 00:38:44 +03:00
|
|
|
text-decoration: none;
|
|
|
|
|
|
|
|
:hover {
|
|
|
|
color: ${Constants.system.blue};
|
|
|
|
}
|
2020-09-09 07:31:38 +03:00
|
|
|
`;
|
|
|
|
|
2020-09-27 07:43:25 +03:00
|
|
|
const STYLES_TAG = css`
|
2020-09-09 07:31:38 +03:00
|
|
|
margin-right: 24px;
|
2020-09-27 07:43:25 +03:00
|
|
|
padding: 0px 2px;
|
|
|
|
border-radius: 2px;
|
2020-10-24 00:28:53 +03:00
|
|
|
border: 1px solid ${Constants.system.darkGray};
|
2020-09-09 07:31:38 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_META_DETAILS = css`
|
2020-10-24 00:28:53 +03:00
|
|
|
color: ${Constants.system.darkGray};
|
2020-09-09 07:31:38 +03:00
|
|
|
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-09 07:31:38 +03:00
|
|
|
`;
|
|
|
|
|
2020-09-27 07:43:25 +03:00
|
|
|
const STYLES_ACTIONS = css`
|
2020-10-24 00:28:53 +03:00
|
|
|
color: ${Constants.system.white};
|
|
|
|
border: 1px solid #3c3c3c;
|
2020-09-27 07:43:25 +03:00
|
|
|
border-radius: 4px;
|
2020-10-24 00:28:53 +03:00
|
|
|
background-color: transparent;
|
2020-09-27 07:43:25 +03:00
|
|
|
margin-bottom: 48px;
|
2020-09-09 07:12:54 +03:00
|
|
|
`;
|
|
|
|
|
2020-09-27 07:43:25 +03:00
|
|
|
const STYLES_ACTION = css`
|
|
|
|
cursor: pointer;
|
|
|
|
padding: 12px 16px;
|
2020-10-24 00:28:53 +03:00
|
|
|
border-bottom: 1px solid #3c3c3c;
|
2020-09-13 03:53:36 +03:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-09-09 07:12:54 +03:00
|
|
|
|
2020-09-27 07:43:25 +03:00
|
|
|
:hover {
|
|
|
|
color: ${Constants.system.brand};
|
|
|
|
}
|
|
|
|
|
|
|
|
:last-child {
|
|
|
|
border: none;
|
|
|
|
}
|
2020-09-09 07:12:54 +03:00
|
|
|
`;
|
|
|
|
|
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-09 07:12:54 +03:00
|
|
|
`;
|
|
|
|
|
2020-09-27 07:43:25 +03:00
|
|
|
const STYLES_HIDDEN = css`
|
|
|
|
position: absolute;
|
|
|
|
opacity: 0;
|
|
|
|
pointer-events: none;
|
2020-09-09 07:12:54 +03:00
|
|
|
`;
|
|
|
|
|
2020-10-24 00:28:53 +03:00
|
|
|
export default class CarouselSidebarData extends React.Component {
|
2020-09-27 07:43:25 +03:00
|
|
|
_ref = null;
|
2020-09-09 07:12:54 +03:00
|
|
|
|
2020-09-27 07:43:25 +03:00
|
|
|
state = {
|
|
|
|
selected: {},
|
|
|
|
isPublic: false,
|
|
|
|
copyValue: "",
|
2020-11-13 01:36:20 +03:00
|
|
|
loading: false,
|
2020-09-27 07:43:25 +03:00
|
|
|
};
|
2020-09-09 07:12:54 +03:00
|
|
|
|
2020-09-27 07:43:25 +03:00
|
|
|
componentDidMount = () => {
|
2020-11-13 01:36:20 +03:00
|
|
|
window.addEventListener("data-global-carousel-loading", this._handleSetLoading);
|
2020-09-27 07:43:25 +03:00
|
|
|
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 });
|
|
|
|
};
|
2020-09-09 07:12:54 +03:00
|
|
|
|
2020-11-13 01:36:20 +03:00
|
|
|
componentWillUnmount = () => {
|
|
|
|
window.removeEventListener("data-global-carousel-loading", this._handleSetLoading);
|
|
|
|
};
|
|
|
|
|
|
|
|
_handleSetLoading = (e) => {
|
|
|
|
console.log("set loading to:");
|
|
|
|
console.log(e.detail.loading);
|
|
|
|
this.setState({ loading: e.detail.loading });
|
|
|
|
};
|
|
|
|
|
2020-10-24 00:28:53 +03:00
|
|
|
_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-10-24 00:28:53 +03:00
|
|
|
};
|
|
|
|
|
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-09 07:12:54 +03:00
|
|
|
|
2020-09-27 07:43:25 +03:00
|
|
|
_handleAdd = (slate) => {
|
2020-10-24 09:36:52 +03:00
|
|
|
//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]) {
|
2020-10-24 09:36:52 +03:00
|
|
|
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 {
|
2020-10-24 09:36:52 +03:00
|
|
|
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 });
|
2020-11-13 01:36:20 +03:00
|
|
|
}, 1000);
|
2020-09-27 07:43:25 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
_handleDelete = async (cid) => {
|
2020-10-24 09:36:52 +03:00
|
|
|
//NOTE(martina): triggers action through DataView.js (which is always mounted if this carousel is open)
|
2020-11-13 01:36:20 +03:00
|
|
|
await this.setState({ loading: cid });
|
2020-09-27 07:43:25 +03:00
|
|
|
dispatchCustomEvent({
|
2020-10-24 09:36:52 +03:00
|
|
|
name: "remote-data-deletion",
|
|
|
|
detail: { cid },
|
2020-09-09 07:12:54 +03:00
|
|
|
});
|
2020-09-27 07:43:25 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const { cid, file, type, size, url } = this.props.data;
|
2020-10-24 00:28:53 +03:00
|
|
|
const elements = [];
|
2020-09-09 07:12:54 +03:00
|
|
|
|
2020-10-24 00:28:53 +03:00
|
|
|
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(
|
2020-10-24 09:36:52 +03:00
|
|
|
<div key="s-2" css={STYLES_CONTAINER}>
|
2020-09-09 07:31:38 +03:00
|
|
|
<div css={STYLES_META}>
|
2020-10-24 00:28:53 +03:00
|
|
|
<a css={STYLES_META_TITLE} target="_blank" href={Strings.getCIDGatewayURL(cid)}>
|
2020-09-27 07:43:25 +03:00
|
|
|
{file}
|
2020-09-14 00:38:44 +03:00
|
|
|
</a>
|
2020-09-09 07:31:38 +03:00
|
|
|
<div css={STYLES_META_DETAILS}>
|
2020-10-24 00:28:53 +03:00
|
|
|
<span css={STYLES_TAG}>{type}</span> <span>{Strings.bytesToSize(size)}</span>
|
2020-09-09 07:31:38 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-27 07:43:25 +03:00
|
|
|
<div css={STYLES_ACTIONS}>
|
2020-10-24 00:28:53 +03:00
|
|
|
<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 }}>
|
2020-10-24 00:28:53 +03:00
|
|
|
{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>
|
2020-11-07 01:22:57 +03:00
|
|
|
<div css={STYLES_ACTION} onClick={() => this._handleCopy(url, "gatewayUrlCopying")}>
|
|
|
|
<SVG.Data height="24px" />
|
2020-09-27 23:11:04 +03:00
|
|
|
<span style={{ marginLeft: 16 }}>
|
2020-11-07 01:22:57 +03:00
|
|
|
{this.state.loading === "gatewayUrlCopying" ? "Copied!" : "Copy gateway URL"}
|
2020-09-27 23:11:04 +03:00
|
|
|
</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-11-13 01:36:20 +03:00
|
|
|
{this.state.loading === cid ? (
|
2020-10-24 00:28:53 +03:00
|
|
|
<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
|
2020-10-24 00:28:53 +03:00
|
|
|
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}
|
2020-10-24 00:28:53 +03:00
|
|
|
selectedColor={Constants.system.white}
|
2020-09-27 07:43:25 +03:00
|
|
|
/>
|
2020-09-27 08:38:19 +03:00
|
|
|
<div css={STYLES_SECTION_HEADER} style={{ margin: "48px 0px 8px 0px" }}>
|
|
|
|
Privacy
|
|
|
|
</div>
|
2020-10-24 00:28:53 +03:00
|
|
|
<div style={{ color: Constants.system.darkGray, lineHeight: "1.5" }}>
|
2020-09-27 08:38:19 +03:00
|
|
|
{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}
|
|
|
|
/>
|
2020-09-09 07:31:38 +03:00
|
|
|
</div>
|
|
|
|
);
|
2020-10-24 00:28:53 +03:00
|
|
|
|
|
|
|
if (!elements.length) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div css={STYLES_SIDEBAR} style={{ display: this.props.display }}>
|
|
|
|
{elements}
|
|
|
|
</div>
|
|
|
|
);
|
2020-09-09 07:12:54 +03:00
|
|
|
}
|
|
|
|
}
|