2020-08-21 10:07:39 +03:00
|
|
|
import * as React from "react";
|
|
|
|
import * as Constants from "~/common/constants";
|
2020-08-21 10:42:29 +03:00
|
|
|
import * as Strings from "~/common/strings";
|
2020-08-21 10:07:39 +03:00
|
|
|
|
|
|
|
import { css } from "@emotion/react";
|
|
|
|
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
|
|
|
|
|
|
|
import TextareaAutoSize from "~/vendor/react-textarea-autosize";
|
|
|
|
|
|
|
|
const STYLES_SIDEBAR_INPUT = css`
|
|
|
|
position: relative;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_SIDEBAR_TEXTAREA = css`
|
|
|
|
resize: none;
|
|
|
|
box-sizing: border-box;
|
|
|
|
line-height: 1.255;
|
|
|
|
font-size: 16px;
|
|
|
|
outline: 0;
|
|
|
|
border: 0;
|
|
|
|
background: transparent;
|
|
|
|
width: 100%;
|
|
|
|
white-space: pre-wrap;
|
|
|
|
padding: 48px 24px 24px 24px;
|
|
|
|
color: ${Constants.system.white};
|
|
|
|
font-family: ${Constants.font.text};
|
|
|
|
scrollbar-width: none;
|
|
|
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_SIDEAR_INPUT_LABEL = css`
|
|
|
|
font-family: ${Constants.font.code};
|
|
|
|
letter-spacing: 0.1px;
|
|
|
|
color: #999;
|
|
|
|
font-size: 10px;
|
|
|
|
text-transform: uppercase;
|
|
|
|
width: 100%;
|
|
|
|
position: absolute;
|
|
|
|
padding: 16px 24px 0px 24px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
class SidebarInput extends React.Component {
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div css={STYLES_SIDEBAR_INPUT}>
|
2020-08-21 10:57:52 +03:00
|
|
|
<label
|
|
|
|
htmlFor={`sidebar-label-${this.props.name}`}
|
|
|
|
css={STYLES_SIDEAR_INPUT_LABEL}
|
|
|
|
>
|
2020-08-21 10:07:39 +03:00
|
|
|
{this.props.name}
|
|
|
|
</label>
|
|
|
|
<TextareaAutoSize
|
|
|
|
value={this.props.value}
|
|
|
|
name={this.props.name}
|
|
|
|
onChange={this.props.onChange}
|
|
|
|
id={`sidebar-label-${this.props.name}`}
|
|
|
|
placeholder="..."
|
|
|
|
style={this.props.style}
|
|
|
|
css={STYLES_SIDEBAR_TEXTAREA}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const STYLES_SIDEBAR = css`
|
2020-08-21 10:42:29 +03:00
|
|
|
width: 420px;
|
2020-08-21 10:07:39 +03:00
|
|
|
flex-shrink: 0;
|
|
|
|
height: 100%;
|
|
|
|
background-color: ${Constants.system.pitchBlack};
|
|
|
|
border-left: 1px solid #222;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: flex-start;
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_BUTTON = css`
|
|
|
|
border-top: 1px solid #222222;
|
|
|
|
flex-shrink: 0;
|
|
|
|
color: ${Constants.system.white};
|
|
|
|
width: 100%;
|
|
|
|
padding: 16px 24px 16px 24px;
|
2020-08-21 10:11:42 +03:00
|
|
|
min-height: 56px;
|
2020-08-21 10:07:39 +03:00
|
|
|
font-size: 14px;
|
|
|
|
font-family: ${Constants.font.semiBold};
|
|
|
|
transition: 200ms ease all;
|
|
|
|
cursor: pointer;
|
|
|
|
overflow-wrap: break-word;
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
|
|
:hover {
|
|
|
|
background-color: ${Constants.system.brand};
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_SIDEBAR_SECTION = css`
|
|
|
|
flex-shrink: 0;
|
|
|
|
width: 100%;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_SIDEBAR_CONTENT = css`
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
overflow-y: scroll;
|
|
|
|
scrollbar-width: none;
|
|
|
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-08-21 10:42:29 +03:00
|
|
|
const STYLES_HEADING = css`
|
|
|
|
font-family: ${Constants.font.medium};
|
|
|
|
font-size: 16px;
|
|
|
|
line-height: 1.225;
|
|
|
|
font-weight: 400;
|
|
|
|
padding: 16px 24px 24px 24px;
|
2020-08-21 10:57:52 +03:00
|
|
|
overflow-wrap: break-word;
|
|
|
|
white-space: pre-wrap;
|
2020-08-21 10:42:29 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_BODY = css`
|
|
|
|
font-size: 16px;
|
|
|
|
line-height: 1.225;
|
|
|
|
padding: 24px;
|
2020-08-21 10:57:52 +03:00
|
|
|
overflow-wrap: break-word;
|
|
|
|
white-space: pre-wrap;
|
2020-08-21 10:42:29 +03:00
|
|
|
`;
|
|
|
|
|
2020-08-21 10:07:39 +03:00
|
|
|
export default class SlateMediaObjectSidebar extends React.Component {
|
2020-08-21 10:11:42 +03:00
|
|
|
state = {
|
|
|
|
title: this.props.data.title ? this.props.data.title : "",
|
|
|
|
body: this.props.data.body ? this.props.data.body : "",
|
|
|
|
source: this.props.data.source ? this.props.data.source : "",
|
|
|
|
author: this.props.data.author ? this.props.data.author : "",
|
|
|
|
};
|
2020-08-21 10:07:39 +03:00
|
|
|
|
|
|
|
_handleChange = (e) => {
|
|
|
|
this.setState({ [e.target.name]: e.target.value });
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const elements = [];
|
|
|
|
|
2020-08-21 10:42:29 +03:00
|
|
|
if (this.props.data) {
|
|
|
|
if (this.props.onObjectSave) {
|
|
|
|
elements.push(
|
|
|
|
<React.Fragment key="sidebar-media-object-info">
|
|
|
|
<div css={STYLES_SIDEBAR_SECTION}>
|
|
|
|
<SidebarInput
|
|
|
|
name="title"
|
|
|
|
value={this.state.title}
|
|
|
|
onChange={this._handleChange}
|
|
|
|
style={{ fontFamily: Constants.font.medium, fontSize: 16 }}
|
|
|
|
/>
|
|
|
|
</div>
|
2020-08-21 10:57:52 +03:00
|
|
|
<div
|
|
|
|
css={STYLES_SIDEBAR_CONTENT}
|
|
|
|
style={{ borderTop: `1px solid #222222` }}
|
|
|
|
>
|
|
|
|
<SidebarInput
|
|
|
|
name="body"
|
|
|
|
value={this.state.body}
|
|
|
|
onChange={this._handleChange}
|
|
|
|
/>
|
2020-08-21 10:42:29 +03:00
|
|
|
</div>
|
2020-08-21 10:57:52 +03:00
|
|
|
<div
|
|
|
|
css={STYLES_SIDEBAR_SECTION}
|
|
|
|
style={{ borderTop: `1px solid #222222` }}
|
|
|
|
>
|
|
|
|
<SidebarInput
|
|
|
|
name="source"
|
|
|
|
value={this.state.source}
|
|
|
|
onChange={this._handleChange}
|
|
|
|
/>
|
2020-08-21 10:42:29 +03:00
|
|
|
</div>
|
2020-08-21 10:57:52 +03:00
|
|
|
<div
|
|
|
|
css={STYLES_SIDEBAR_SECTION}
|
|
|
|
style={{ borderTop: `1px solid #222222` }}
|
|
|
|
>
|
|
|
|
<SidebarInput
|
|
|
|
name="author"
|
|
|
|
value={this.state.author}
|
|
|
|
onChange={this._handleChange}
|
|
|
|
/>
|
2020-08-21 10:42:29 +03:00
|
|
|
</div>{" "}
|
|
|
|
</React.Fragment>
|
|
|
|
);
|
|
|
|
|
|
|
|
elements.push(
|
|
|
|
<span
|
|
|
|
key="sidebar-media-save-button"
|
|
|
|
css={STYLES_BUTTON}
|
2020-08-21 10:57:52 +03:00
|
|
|
onClick={() =>
|
|
|
|
this.props.onObjectSave({ ...this.props.data, ...this.state })
|
|
|
|
}
|
|
|
|
>
|
2020-08-21 10:42:29 +03:00
|
|
|
{this.props.saving ? (
|
|
|
|
<LoaderSpinner style={{ height: 16, width: 16 }} />
|
|
|
|
) : (
|
|
|
|
<span>Save ⭢</span>
|
|
|
|
)}
|
|
|
|
</span>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
const hasTitle = !Strings.isEmpty(this.props.data.title);
|
2020-08-21 11:03:15 +03:00
|
|
|
const hasBody = !Strings.isEmpty(this.props.data.body);
|
|
|
|
const hasSource = !Strings.isEmpty(this.props.data.source);
|
|
|
|
const hasAuthor = !Strings.isEmpty(this.props.data.author);
|
|
|
|
|
2020-08-21 10:42:29 +03:00
|
|
|
if (hasTitle) {
|
|
|
|
elements.push(
|
|
|
|
<div key="sidebar-media-info-title" css={STYLES_SIDEBAR_SECTION}>
|
|
|
|
<h1 css={STYLES_HEADING}>{this.props.data.title}</h1>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-08-21 11:03:15 +03:00
|
|
|
if (hasBody || hasTitle || hasSource || hasAuthor) {
|
2020-08-21 10:42:29 +03:00
|
|
|
elements.push(
|
|
|
|
<div key="sidebar-media-info-body" css={STYLES_SIDEBAR_CONTENT}>
|
|
|
|
<p css={STYLES_BODY}>{this.props.data.body}</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (hasSource) {
|
|
|
|
elements.push(
|
|
|
|
<div key="sidebar-media-info-source" css={STYLES_SIDEBAR_SECTION}>
|
2020-08-21 10:57:52 +03:00
|
|
|
<div
|
|
|
|
css={STYLES_SIDEAR_INPUT_LABEL}
|
|
|
|
style={{ position: "relative" }}
|
|
|
|
>
|
2020-08-21 10:42:29 +03:00
|
|
|
Source
|
|
|
|
</div>
|
|
|
|
<p css={STYLES_BODY}>{this.props.data.source}</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (hasAuthor) {
|
|
|
|
elements.push(
|
|
|
|
<div key="sidebar-media-info-author" css={STYLES_SIDEBAR_SECTION}>
|
2020-08-21 10:57:52 +03:00
|
|
|
<div
|
|
|
|
css={STYLES_SIDEAR_INPUT_LABEL}
|
|
|
|
style={{ position: "relative" }}
|
|
|
|
>
|
2020-08-21 10:42:29 +03:00
|
|
|
Author
|
|
|
|
</div>
|
|
|
|
<p css={STYLES_BODY}>{this.props.data.source}</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.props.renderPlaceholder) {
|
2020-08-21 10:57:52 +03:00
|
|
|
elements.push(
|
|
|
|
<div
|
|
|
|
key="sidebar-media-info-placeholder"
|
|
|
|
css={STYLES_SIDEBAR_CONTENT}
|
|
|
|
/>
|
|
|
|
);
|
2020-08-21 10:42:29 +03:00
|
|
|
}
|
|
|
|
}
|
2020-08-21 10:07:39 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if (this.props.cid) {
|
|
|
|
elements.push(
|
|
|
|
<a
|
|
|
|
key="sidebar-media-open-file"
|
|
|
|
css={STYLES_BUTTON}
|
2020-08-25 21:08:42 +03:00
|
|
|
href={Strings.getCIDGatewayURL(this.props.cid)}
|
2020-08-21 10:57:52 +03:00
|
|
|
target="_blank"
|
|
|
|
>
|
2020-08-21 10:07:39 +03:00
|
|
|
Open file in a new browser tab ⭢
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
|
|
|
|
elements.push(
|
|
|
|
<a
|
|
|
|
key="sidebar-media-download-file"
|
|
|
|
css={STYLES_BUTTON}
|
2020-08-25 21:08:42 +03:00
|
|
|
href={Strings.getCIDGatewayURL(this.props.cid)}
|
2020-08-21 10:07:39 +03:00
|
|
|
target="_blank"
|
2020-08-21 10:57:52 +03:00
|
|
|
download={this.props.cid}
|
|
|
|
>
|
2020-08-21 10:07:39 +03:00
|
|
|
Download file ⭢
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.props.onDelete) {
|
2020-08-21 10:11:42 +03:00
|
|
|
elements.push(
|
2020-08-21 10:57:52 +03:00
|
|
|
<span
|
|
|
|
key="sidebar-media-object-delete"
|
|
|
|
css={STYLES_BUTTON}
|
|
|
|
onClick={() => this.props.onDelete(this.props.id)}
|
|
|
|
>
|
2020-08-21 10:11:42 +03:00
|
|
|
{this.props.loading ? (
|
|
|
|
<LoaderSpinner style={{ height: 16, width: 16 }} />
|
|
|
|
) : (
|
|
|
|
<span>Delete Slate object ⭢</span>
|
|
|
|
)}
|
|
|
|
</span>
|
|
|
|
);
|
2020-08-21 10:07:39 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
if (!elements.length) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
return <div css={STYLES_SIDEBAR}>{elements}</div>;
|
|
|
|
}
|
|
|
|
}
|