slate/components/core/Slate.js
2020-09-04 21:45:50 -07:00

274 lines
6.4 KiB
JavaScript

import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import * as Actions from "~/common/actions";
import { Responsive, WidthProvider } from "react-grid-layout";
import { css } from "@emotion/react";
import { LoaderSpinner } from "~/components/system/components/Loaders";
import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview";
import CircleButtonGray from "~/components/core/CircleButtonGray";
// NOTE(jim): I broke my own rules to do this. Sorry.
const STYLES_ITEM = css`
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
:hover {
figure {
visibility: visible;
opacity: 1;
}
img,
article {
opacity: 0.4;
}
}
`;
const STYLES_CONTAINER = css`
padding: 24px;
`;
const STYLES_ACTIONS = css`
z-index: ${Constants.zindex.navigation};
bottom: 16px;
right: 8px;
position: absolute;
flex-direction: column;
display: flex;
`;
const STYLES_BUTTON = css`
opacity: 0;
visibility: hidden;
transition: 200ms ease all;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
`;
const STYLES_ACTION_BUTTON = css`
font-family: ${Constants.font.code};
font-size: 10px;
text-transform: uppercase;
user-select: none;
height: 32px;
padding: 0 16px 0 16px;
border-radius: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: ${Constants.zindex.modal};
background: ${Constants.system.pitchBlack};
transition: 200ms ease all;
color: ${Constants.system.white};
cursor: pointer;
margin: auto;
margin: 4px 16px 4px 16px;
flex-shrink: 0;
text-decoration: none;
:hover {
background-color: ${Constants.system.black};
}
`;
const ResponsiveReactGridLayout = WidthProvider(Responsive);
const COLUMN_MAP = { lg: 12, md: 8, sm: 6, xs: 4, xxs: 2 };
export const generateLayout = (items) => {
if (!items) {
return [];
}
if (!items.length) {
return [];
}
return items.map((item, i) => {
var y = Math.ceil(Math.random() * 4) + 1;
return {
x: (i * 2) % 10,
y: 0,
w: 2,
h: 2,
minW: 2,
minH: 2,
// NOTE(jim): Library quirk thats required.
i: i.toString(),
};
});
};
export default class Slate extends React.Component {
static defaultProps = {
onLayoutChange: () => {},
};
state = {
currentBreakpoint: "lg",
compactType: "vertical",
};
_handleResetLayout = () => {
if (!this.props.editing) {
return null;
}
if (!window.confirm("Are you sure you want to reset your layout?")) {
return null;
}
const layouts = { lg: generateLayout(this.props.items) };
this.props.onLayoutChange(null, layouts);
};
_handleSaveLayout = async () => {
if (!this.props.editing) {
return null;
}
await this.props.onLayoutSave();
};
_handleSelect = (e, index) => {
// TODO(jim): Test this again in React 17
e.preventDefault();
e.stopPropagation();
this.props.onSelect(index);
};
_handleDeepLink = async (e, object) => {
// TODO(jim): Test this again in React 17
e.preventDefault();
e.stopPropagation();
const response = await Actions.getSlateBySlatename({
query: object.deeplink,
deeplink: true,
});
if (!response.data) {
alert("TODO: Can not find deeplink");
}
if (!response.data.slate) {
alert("TODO: Can not find deeplink");
}
return window.open(
`/${response.data.slate.user.username}/${response.data.slate.slatename}`
);
};
generateDOM = () => {
return this.props.layouts.lg.map((each, index) => {
const data = this.props.items[each.i];
if (!data) {
return <div key={index} />;
}
return (
<div key={index} css={STYLES_ITEM}>
<SlateMediaObjectPreview
charCap={70}
type={data.type}
url={data.url}
title={data.title || data.name}
/>
<figure css={STYLES_BUTTON}>
<CircleButtonGray
style={{ margin: 8 }}
onMouseUp={(e) => this._handleSelect(e, index)}
onTouchEnd={(e) => this._handleSelect(e, index)}
>
<SVG.Eye height="16px" />
</CircleButtonGray>
{data.deeplink ? (
<CircleButtonGray
style={{ margin: 8 }}
onMouseUp={(e) => this._handleDeepLink(e, data)}
onTouchEnd={(e) => this._handleDeepLink(e, data)}
>
<SVG.DeepLink height="16px" />
</CircleButtonGray>
) : null}
</figure>
</div>
);
});
};
onBreakpointChange = (breakpoint) => {
this.setState({
currentBreakpoint: breakpoint,
});
};
onLayoutChange = (layout, layouts) => {
this.props.onLayoutChange(layout, layouts);
};
render() {
return (
<div css={STYLES_CONTAINER}>
<ResponsiveReactGridLayout
columns={COLUMN_MAP}
layouts={this.props.layouts}
isDraggable={!!this.props.editing}
isResizable={!!this.props.editing}
onBreakpointChange={this.onBreakpointChange}
onLayoutChange={this.onLayoutChange}
measureBeforeMount={false}
useCSSTransforms={false}
compactType={this.state.compactType}
preventCollision={false}
margin={[24, 24]}
>
{this.generateDOM()}
</ResponsiveReactGridLayout>
{this.props.editing ? (
<div css={STYLES_ACTIONS}>
<span css={STYLES_ACTION_BUTTON} onClick={this._handleResetLayout}>
Reset Layout
</span>
<span
css={STYLES_ACTION_BUTTON}
onMouseUp={this._handleSaveLayout}
onTouchEnd={this._handleSaveLayout}
style={{
backgroundColor:
this.props.saving === "IDLE" ? Constants.system.brand : null,
}}
>
{this.props.saving === "SAVING" ? (
<LoaderSpinner style={{ height: 16, width: 16 }} />
) : this.props.saving === "IDLE" ? (
"Save"
) : (
"Saved"
)}
</span>
</div>
) : null}
</div>
);
}
}