mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
carousel initial draft
This commit is contained in:
Aminejvm
parent
8b5ec5c5df
commit
5854409e86
1
.gitignore
vendored
1
.gitignore
vendored
@ -3,6 +3,7 @@
|
||||
.DS_STORE
|
||||
DS_STORE
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
node_modules
|
||||
dist
|
||||
|
||||
|
||||
@ -258,6 +258,7 @@ export default class SystemPage extends React.Component {
|
||||
title="Notifications"
|
||||
/>
|
||||
<SidebarLink url={url} href="/system/modals" title="Modals" />
|
||||
<SidebarLink url={url} href="/system/carousel" title="Carousel" />
|
||||
<SidebarLink url={url} href="/system/loaders" title="Loaders" />
|
||||
<SidebarLink url={url} href="/system/typography" title="Typography" />
|
||||
|
||||
|
||||
130
components/system/components/GlobalCarousel.js
Normal file
130
components/system/components/GlobalCarousel.js
Normal file
@ -0,0 +1,130 @@
|
||||
import { css } from "@emotion/react";
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/components/system/svg";
|
||||
|
||||
const STYLES_BACKGROUND = css`
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: ${Constants.system.pitchBlack};
|
||||
color: ${Constants.system.white};
|
||||
z-index: ${Constants.zindex.modal};
|
||||
`;
|
||||
|
||||
const STYLES_CLOSE_ICON = css`
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const STYLES_PREVIOUS_ICON = css`
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 8px;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const STYLES_NEXT_ICON = css`
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 8px;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
export class GlobalCarousel extends React.Component {
|
||||
state = {
|
||||
slides: null,
|
||||
currentSlide: 0,
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
window.addEventListener("create-carousel", this._handleCreate);
|
||||
window.addEventListener("delete-carousel", this._handleDelete);
|
||||
|
||||
// Handle Key downs
|
||||
window.addEventListener("keydown", this._handleKeyDown);
|
||||
};
|
||||
|
||||
componentWillUnmount = () => {
|
||||
window.removeEventListener("create-carousel", this._handleCreate);
|
||||
window.removeEventListener("delete-carousel", this._handleDelete);
|
||||
|
||||
window.removeEventListener("keydown", this._handleKeyDown);
|
||||
};
|
||||
|
||||
_handleCreate = (e) => {
|
||||
this.setState({
|
||||
slides: e.detail.slides,
|
||||
currentSlide: e.detail.currentSlide || 0,
|
||||
});
|
||||
};
|
||||
|
||||
_handleDelete = (e) => {
|
||||
this.setState({ slides: null, currentSlide: 0 });
|
||||
};
|
||||
|
||||
_handleKeyDown = (e) => {
|
||||
switch (e.key) {
|
||||
case "Escape":
|
||||
this._handleDelete();
|
||||
break;
|
||||
case "Right": // Support Internet Explorer, Edge (16 and earlier), and Firefox (36 and earlier)
|
||||
case "ArrowRight":
|
||||
if (this._areMoreSlidesOnRight) this._handleNextSlide();
|
||||
break;
|
||||
case "Left": // Support Internet Explorer, Edge (16 and earlier), and Firefox (36 and earlier)
|
||||
case "ArrowLeft":
|
||||
if (this._areMoreSlidesOnLeft) this._handlePreviousSlide();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
_handleNextSlide = () => {
|
||||
this.setState((prev) => ({ currentSlide: prev.currentSlide + 1 }));
|
||||
};
|
||||
_handlePreviousSlide = () => {
|
||||
this.setState((prev) => ({ currentSlide: prev.currentSlide - 1 }));
|
||||
};
|
||||
|
||||
render() {
|
||||
this._slidesSize = this.state.slides?.length || 0;
|
||||
this._areMoreSlidesOnRight = this.state.currentSlide < this._slidesSize - 1;
|
||||
this._areMoreSlidesOnLeft = this.state.currentSlide > 0;
|
||||
|
||||
if (!this.state.slides) return null;
|
||||
return (
|
||||
<div css={STYLES_BACKGROUND} style={this.props.style}>
|
||||
<SVG.Dismiss css={STYLES_CLOSE_ICON} onClick={this._handleDelete} />
|
||||
{this._areMoreSlidesOnLeft && (
|
||||
<SVG.ChevronLeft
|
||||
css={STYLES_PREVIOUS_ICON}
|
||||
onClick={this._handlePreviousSlide}
|
||||
/>
|
||||
)}
|
||||
{this._areMoreSlidesOnRight && (
|
||||
<SVG.ChevronRight
|
||||
css={STYLES_NEXT_ICON}
|
||||
onClick={this._handleNextSlide}
|
||||
/>
|
||||
)}
|
||||
{Array.isArray(this.state.slides)
|
||||
? this.state.slides[this.state.currentSlide]
|
||||
: this.state.slides}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -29,6 +29,7 @@ import { CheckBox } from "~/components/system/components/CheckBox";
|
||||
import { CodeTextarea } from "~/components/system/components/CodeTextarea";
|
||||
import { DatePicker } from "~/components/system/components/DatePicker";
|
||||
import { GlobalModal } from "~/components/system/components/GlobalModal";
|
||||
import { GlobalCarousel } from "~/components/system/components/GlobalCarousel";
|
||||
import { GlobalNotification } from "~/components/system/components/GlobalNotification";
|
||||
import { Input } from "~/components/system/components/Input";
|
||||
import { ListEditor } from "~/components/system/components/ListEditor";
|
||||
@ -93,6 +94,7 @@ export {
|
||||
CodeTextarea,
|
||||
DatePicker,
|
||||
GlobalModal,
|
||||
GlobalCarousel,
|
||||
GlobalNotification,
|
||||
Input,
|
||||
ListEditor,
|
||||
|
||||
231
pages/system/carousel.js
Normal file
231
pages/system/carousel.js
Normal file
@ -0,0 +1,231 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as System from "~/components/system";
|
||||
import CodeBlock from "~/components/system/CodeBlock";
|
||||
import Group from "~/components/system/Group";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
export default class SystemPageCarousel extends React.Component {
|
||||
_handleCreate = (detail) => {
|
||||
System.dispatchCustomEvent({ name: "create-carousel", detail: detail });
|
||||
};
|
||||
|
||||
_handleDelete = () => {
|
||||
System.dispatchCustomEvent({ name: "delete-carousel", detail: {} });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SystemPage
|
||||
title="SDS: Carousel"
|
||||
description="..."
|
||||
url="https://slate.host/system/carousel"
|
||||
>
|
||||
<System.H1>
|
||||
Carousel <ViewSourceLink file="system/carousel.js" />
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>
|
||||
The carousel component is used to get a user's focus and require an
|
||||
action.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Imports</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>
|
||||
Import React and the Carousel Component, as well as the
|
||||
dispatchCustomEvent function.
|
||||
</System.P>
|
||||
<br />
|
||||
<CodeBlock>
|
||||
{`import * as React from 'react';
|
||||
import { GlobalCarousel, dispatchCustomEvent } from 'slate-react-system';`}
|
||||
</CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Usage</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>
|
||||
Declare the component at the root level of your document (e.g. in
|
||||
index.js or App.js) so it is accessible throughout and will not get
|
||||
buried in the DOM tree.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.P>
|
||||
Optionally, use <System.CodeText>style</System.CodeText> to style the
|
||||
background.
|
||||
</System.P>
|
||||
<br />
|
||||
<CodeBlock>
|
||||
{`class App extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<React.Fragment>
|
||||
<GlobalCarousel />
|
||||
{this.props.children}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}`}
|
||||
</CodeBlock>
|
||||
<System.GlobalCarousel />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Carousel</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._handleCreate({
|
||||
slides: [
|
||||
{
|
||||
src:
|
||||
"https://images.unsplash.com/photo-1428765048792-aa4bdde46fea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80",
|
||||
alt: "photo of grey and black ferris wheel during daytime",
|
||||
},
|
||||
{
|
||||
src:
|
||||
"https://images.unsplash.com/photo-1503914068268-5413b35b45ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
|
||||
alt: "pink road bike",
|
||||
},
|
||||
].map((props) => (
|
||||
<img {...props} style={{ maxHeight: "80vh" }} />
|
||||
)),
|
||||
})
|
||||
}
|
||||
>
|
||||
Open carousel
|
||||
</System.ButtonSecondaryFull>
|
||||
<br />
|
||||
<System.P>
|
||||
While the Carousel component is always present, a carousel will only
|
||||
appear once you trigger it by creating a custom event with the title{" "}
|
||||
<System.CodeText>"create-carousel"</System.CodeText>. It can be
|
||||
removed with a custom event entitled{" "}
|
||||
<System.CodeText>"delete-carousel"</System.CodeText>.
|
||||
</System.P>
|
||||
<br />
|
||||
<CodeBlock>
|
||||
{`class ExampleOne extends React.Component {
|
||||
_handleCreate = (detail) => {
|
||||
dispatchCustomEvent({ name: "create-carousel", detail: detail })
|
||||
};
|
||||
_handleDelete = () => {
|
||||
dispatchCustomEvent({ name: "delete-carousel", detail: {} });
|
||||
};
|
||||
render() {
|
||||
let carouselContent = [
|
||||
{
|
||||
src:
|
||||
"https://images.unsplash.com/photo-1428765048792-aa4bdde46fea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80",
|
||||
alt: "photo of grey and black ferris wheel during daytime",
|
||||
},
|
||||
{
|
||||
src:
|
||||
"https://images.unsplash.com/photo-1503914068268-5413b35b45ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
|
||||
alt: "pink road bike",
|
||||
},
|
||||
].map((props) => (
|
||||
<img {...props} style={{ maxHeight: "80vh" }} />
|
||||
)),
|
||||
return(
|
||||
<ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._handleCreate({ slides: carouselContent })
|
||||
}
|
||||
>
|
||||
Open Carousel
|
||||
</ButtonSecondaryFull>
|
||||
)
|
||||
}
|
||||
}`}
|
||||
</CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Accepted React Properties</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title="Notifications">
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: "a", name: "Name", width: "128px" },
|
||||
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
|
||||
{ key: "c", name: "Default", width: "88px" },
|
||||
{ key: "d", name: "Description", width: "100%" },
|
||||
],
|
||||
rows: [
|
||||
{
|
||||
id: 1,
|
||||
a: "style",
|
||||
b: "Object",
|
||||
c: "{}",
|
||||
d:
|
||||
"Style object used to style the carousel background (color, etc.)",
|
||||
}
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>
|
||||
Accepted <i>Create</i> Carousel Properties
|
||||
</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>
|
||||
Note that these properties are passed through a custom event rather
|
||||
than as react properties.
|
||||
</System.P>
|
||||
<br />
|
||||
<Group title="Notifications">
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: "a", name: "Name", width: "128px" },
|
||||
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
|
||||
{ key: "c", name: "Default", width: "88px" },
|
||||
{ key: "d", name: "Description", width: "100%" },
|
||||
],
|
||||
rows: [
|
||||
{
|
||||
id: 1,
|
||||
a: (
|
||||
<span style={{ fontFamily: Constants.font.semiBold }}>
|
||||
slides
|
||||
</span>
|
||||
),
|
||||
b: ["Component[]","Component"],
|
||||
c: "null",
|
||||
d: "Components to be rendered inside the carousel",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
a: (
|
||||
<span style={{ fontFamily: Constants.font.semiBold }}>
|
||||
currentSlide
|
||||
</span>
|
||||
),
|
||||
b: ["number"],
|
||||
c:0,
|
||||
d: "Index of the initial slide",
|
||||
}
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user