mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-20 10:47:18 +03:00
boundary component
This commit is contained in:
parent
392dc7c1ee
commit
1c62572b60
@ -6,10 +6,18 @@ import { css, keyframes } from "@emotion/react";
|
||||
import moment from "moment";
|
||||
|
||||
import { Input } from "~/components/system/components/Input";
|
||||
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
|
||||
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
||||
|
||||
const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map(
|
||||
(day, i) => <div key={i}>{day}</div>
|
||||
);
|
||||
const weekdays = [
|
||||
"Sun",
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri",
|
||||
"Sat",
|
||||
].map((day, i) => <div key={i}>{day}</div>);
|
||||
|
||||
const expand = keyframes`
|
||||
0% {
|
||||
@ -310,56 +318,66 @@ export class DatePicker extends React.Component {
|
||||
));
|
||||
}
|
||||
return (
|
||||
<div css={STYLES_DATE_INPUT}>
|
||||
<input
|
||||
ref={this.myInput}
|
||||
disabled
|
||||
css={STYLES_HIDDEN_INPUT}
|
||||
type="date"
|
||||
name={this.props.name}
|
||||
value={this.props.value}
|
||||
onChange={this.props.onChange}
|
||||
<div>
|
||||
<DescriptionGroup
|
||||
tooltip={this.props.tooltip}
|
||||
label={this.props.label}
|
||||
description={this.props.description}
|
||||
/>
|
||||
<div>
|
||||
<Input
|
||||
label={this.props.label}
|
||||
description={this.props.description}
|
||||
tooltip={this.props.tooltip}
|
||||
icon={SVG.Calendar}
|
||||
max={10}
|
||||
value={this.state.value}
|
||||
placeholder="MM/DD/YYYY"
|
||||
pattern="^[0-9\/]*$"
|
||||
validation={this.state.validation}
|
||||
onChange={this._handleChange}
|
||||
onBlur={this._handleBlur}
|
||||
onSubmit={this._handleCalendar}
|
||||
/>
|
||||
{this.state.cal ? (
|
||||
<div css={STYLES_CALENDAR}>
|
||||
<div css={STYLES_MONTH_CONTAINER}>
|
||||
<SVG.ChevronLeft
|
||||
height="20px"
|
||||
css={STYLES_ICON}
|
||||
onClick={() => this._incrementCal(-1)}
|
||||
/>
|
||||
<div css={STYLES_MONTH}>
|
||||
{this.state.cal.isSame(moment(), "year")
|
||||
? this.state.cal.format("MMMM")
|
||||
: this.state.cal.format("MMMM YYYY")}
|
||||
<Boundary
|
||||
enabled={this.state.cal}
|
||||
onOutsideRectEvent={this._handleCalendar}
|
||||
style={{ maxWidth: "480px" }}
|
||||
>
|
||||
<div css={STYLES_DATE_INPUT}>
|
||||
<input
|
||||
ref={this.myInput}
|
||||
disabled
|
||||
css={STYLES_HIDDEN_INPUT}
|
||||
type="date"
|
||||
name={this.props.name}
|
||||
value={this.props.value}
|
||||
onChange={this.props.onChange}
|
||||
/>
|
||||
<div>
|
||||
<Input
|
||||
icon={SVG.Calendar}
|
||||
max={10}
|
||||
value={this.state.value}
|
||||
placeholder="MM/DD/YYYY"
|
||||
pattern="^[0-9\/]*$"
|
||||
validation={this.state.validation}
|
||||
onChange={this._handleChange}
|
||||
onBlur={this._handleBlur}
|
||||
onSubmit={this._handleCalendar}
|
||||
/>
|
||||
{this.state.cal ? (
|
||||
<div css={STYLES_CALENDAR}>
|
||||
<div css={STYLES_MONTH_CONTAINER}>
|
||||
<SVG.ChevronLeft
|
||||
height="20px"
|
||||
css={STYLES_ICON}
|
||||
onClick={() => this._incrementCal(-1)}
|
||||
/>
|
||||
<div css={STYLES_MONTH}>
|
||||
{this.state.cal.isSame(moment(), "year")
|
||||
? this.state.cal.format("MMMM")
|
||||
: this.state.cal.format("MMMM YYYY")}
|
||||
</div>
|
||||
<SVG.ChevronRight
|
||||
height="20px"
|
||||
css={STYLES_ICON}
|
||||
onClick={() => this._incrementCal(1)}
|
||||
style={{ justifySelf: "end" }}
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_WEEKDAYS}>{weekdays}</div>
|
||||
<div css={STYLES_DATES}>{month}</div>
|
||||
</div>
|
||||
<SVG.ChevronRight
|
||||
height="20px"
|
||||
css={STYLES_ICON}
|
||||
onClick={() => this._incrementCal(1)}
|
||||
style={{ justifySelf: "end" }}
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_WEEKDAYS}>{weekdays}</div>
|
||||
<div css={STYLES_DATES}>{month}</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</Boundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -4,6 +4,7 @@ import * as SVG from "~/components/system/svg";
|
||||
import * as Strings from "~/common/strings";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
||||
|
||||
const STYLES_BACKGROUND = css`
|
||||
position: fixed;
|
||||
@ -63,15 +64,17 @@ export class GlobalModal extends React.Component {
|
||||
render() {
|
||||
if (!this.state.modal) return null;
|
||||
return (
|
||||
<div
|
||||
css={STYLES_BACKGROUND}
|
||||
style={this.props.backgroundStyle}
|
||||
onClick={this._handleDelete}
|
||||
>
|
||||
<div css={STYLES_MODAL} style={this.props.style}>
|
||||
{this.state.modal}
|
||||
<SVG.Close css={STYLES_CLOSE_ICON} onClick={this._handleDelete} />
|
||||
</div>
|
||||
<div css={STYLES_BACKGROUND} style={this.props.backgroundStyle}>
|
||||
<Boundary
|
||||
enabled
|
||||
onOutsideRectEvent={this._handleDelete}
|
||||
isDataMenuCaptured={true}
|
||||
>
|
||||
<div css={STYLES_MODAL} style={this.props.style}>
|
||||
{this.state.modal}
|
||||
<SVG.Dismiss css={STYLES_CLOSE_ICON} onClick={this._handleDelete} />
|
||||
</div>
|
||||
</Boundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -7,6 +7,8 @@ import Draggable from "react-draggable";
|
||||
|
||||
import { Input } from "~/components/system/components/Input";
|
||||
import { ButtonPrimary } from "~/components/system/components/Buttons";
|
||||
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
|
||||
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
||||
|
||||
const ITEM_HEIGHT = 30;
|
||||
|
||||
@ -24,7 +26,7 @@ const expand = keyframes`
|
||||
const STYLES_INPUT = css`
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
width: calc(100% - 80px);
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const STYLES_INPUT_HIDDEN = css`
|
||||
@ -33,7 +35,6 @@ const STYLES_INPUT_HIDDEN = css`
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
height: 0;
|
||||
`;
|
||||
|
||||
const STYLES_MODAL_BACKGROUND = css`
|
||||
@ -66,8 +67,7 @@ const STYLES_DELETE = css`
|
||||
const STYLES_REORDER = css`
|
||||
box-sizing: border-box;
|
||||
height: 14px;
|
||||
margin-top: 4px;
|
||||
cursor: grab;
|
||||
margin-top: 1px;
|
||||
color: ${Constants.system.darkGray};
|
||||
justify-self: start;
|
||||
|
||||
@ -77,6 +77,7 @@ const STYLES_REORDER = css`
|
||||
`;
|
||||
|
||||
const STYLES_LIST = css`
|
||||
cursor: grab;
|
||||
box-sizing: border-box;
|
||||
max-width: 480px;
|
||||
min-width: 188px;
|
||||
@ -89,6 +90,9 @@ const STYLES_LIST = css`
|
||||
border-radius: 4px;
|
||||
animation: ${expand} 500ms ease-out 1;
|
||||
position: absolute;
|
||||
:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LIST_ITEM = css`
|
||||
@ -97,7 +101,7 @@ const STYLES_LIST_ITEM = css`
|
||||
height: 30px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 2fr 30fr 1fr;
|
||||
grid-template-columns: 24px 1fr 24px;
|
||||
border-radius: 4px;
|
||||
padding: 0 5px;
|
||||
background-color: ${Constants.system.white};
|
||||
@ -115,9 +119,14 @@ export class ListEditor extends React.Component {
|
||||
|
||||
_handleToggle = () => {
|
||||
if (this.state.expand) {
|
||||
this.props.onChange({ name: this.props.name, value: this.state.options });
|
||||
this.props.onChange({
|
||||
target: { name: this.props.name, value: this.state.options },
|
||||
});
|
||||
}
|
||||
this.setState({ expand: !this.state.expand });
|
||||
this.setState({ expand: !this.state.expand }),
|
||||
() => {
|
||||
console.log(this.state.expand);
|
||||
};
|
||||
};
|
||||
|
||||
_handleDelete = (i) => {
|
||||
@ -194,48 +203,50 @@ export class ListEditor extends React.Component {
|
||||
>
|
||||
<SVG.Reorder className="cursor" css={STYLES_REORDER} />
|
||||
<div>{item}</div>
|
||||
<SVG.Close
|
||||
<SVG.Dismiss
|
||||
css={STYLES_DELETE}
|
||||
onClick={() => this._handleDelete(i)}
|
||||
/>
|
||||
</div>
|
||||
</Draggable>
|
||||
));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
css={this.state.expand ? STYLES_INPUT_HIDDEN : STYLES_INPUT}
|
||||
onFocus={this._handleToggle}
|
||||
<DescriptionGroup
|
||||
tooltip={this.props.tooltip}
|
||||
label={this.props.label}
|
||||
description={this.props.description}
|
||||
/>
|
||||
<Boundary
|
||||
enabled={this.state.expand}
|
||||
onOutsideRectEvent={this._handleToggle}
|
||||
style={{
|
||||
maxWidth: "480px",
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
name={this.props.name}
|
||||
style={{ cursor: "pointer" }}
|
||||
value={this.state.options}
|
||||
readOnly
|
||||
tooltip={this.props.tooltip}
|
||||
label={this.props.label}
|
||||
description={this.props.description}
|
||||
/>
|
||||
</div>
|
||||
{this.state.expand ? (
|
||||
<div css={STYLES_MODAL_BACKGROUND} onClick={this._handleToggle} />
|
||||
) : null}
|
||||
<div css={this.state.expand ? STYLES_INPUT : STYLES_INPUT_HIDDEN}>
|
||||
<Input
|
||||
value={this.state.search}
|
||||
tooltip={this.props.tooltip}
|
||||
label={this.props.label}
|
||||
placeholder={this.props.placeholder}
|
||||
description={this.props.description}
|
||||
icon={SVG.Search}
|
||||
onChange={this._handleChange}
|
||||
onSubmit={this._handleAdd}
|
||||
/>
|
||||
</div>
|
||||
<ButtonPrimary css={STYLES_BUTTON} onClick={this._handleToggle}>
|
||||
{this.state.expand ? "Save" : "Edit"}
|
||||
</ButtonPrimary>
|
||||
{this.state.expand ? <div css={STYLES_LIST}>{options}</div> : null}
|
||||
<div
|
||||
css={this.state.expand ? STYLES_INPUT_HIDDEN : STYLES_INPUT}
|
||||
onFocus={this._handleToggle}
|
||||
>
|
||||
<Input
|
||||
name={this.props.name}
|
||||
style={{ cursor: "pointer" }}
|
||||
value={this.state.options}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<div css={this.state.expand ? STYLES_INPUT : STYLES_INPUT_HIDDEN}>
|
||||
<Input
|
||||
value={this.state.search}
|
||||
placeholder={this.props.placeholder}
|
||||
icon={this.state.search ? SVG.Plus : null}
|
||||
onChange={this._handleChange}
|
||||
onSubmit={this._handleAdd}
|
||||
/>
|
||||
<div css={STYLES_LIST}>{options}</div>
|
||||
</div>
|
||||
</Boundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
108
components/system/components/fragments/Boundary.js
Normal file
108
components/system/components/fragments/Boundary.js
Normal file
@ -0,0 +1,108 @@
|
||||
import * as React from "react";
|
||||
|
||||
export class Boundary extends React.PureComponent {
|
||||
static defaultProps = {
|
||||
className: undefined,
|
||||
captureResize: false,
|
||||
captureScroll: false,
|
||||
children: null,
|
||||
enabled: false,
|
||||
isDataMenuCaptured: false,
|
||||
onOutsideRectEvent: () => {},
|
||||
};
|
||||
|
||||
_root = undefined;
|
||||
|
||||
componentDidMount() {
|
||||
if (!this.props.enabled) {
|
||||
return;
|
||||
}
|
||||
this._addListeners();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this._removeListeners();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.enabled != prevProps.enabled) {
|
||||
if (this.props.enabled) {
|
||||
this._addListeners();
|
||||
return;
|
||||
}
|
||||
this._removeListeners();
|
||||
}
|
||||
}
|
||||
|
||||
_addListeners = () => {
|
||||
this._removeListeners();
|
||||
|
||||
// NOTE(jim): Ensures the execution of these methods since setTimeout clears the call stack and fires this.
|
||||
window.setTimeout(() => {
|
||||
if (this.props.onOutsideRectEvent) {
|
||||
window.addEventListener("click", this._handleOutsideClick);
|
||||
}
|
||||
if (this.props.captureResize) {
|
||||
window.addEventListener("resize", this._handleWindowResize);
|
||||
}
|
||||
if (this.props.captureScroll) {
|
||||
window.addEventListener("scroll", this._handleWindowScroll);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
_handleOutsideClick = (e) => {
|
||||
// NOTE(jim): anything with `data-menu` is also ignored...
|
||||
if (!e.target) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
this.props.isDataMenuCaptured &&
|
||||
typeof e.target.hasAttribute === "function" &&
|
||||
e.target.hasAttribute("data-menu")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
this.props.isDataMenuCaptured &&
|
||||
e.target.parentNode &&
|
||||
typeof e.target.parentNode.hasAttribute === "function" &&
|
||||
e.target.parentNode.hasAttribute("data-menu")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._root && !this._root.contains(e.target)) {
|
||||
this._handleOutsideRectEvent(e);
|
||||
}
|
||||
};
|
||||
|
||||
_handleWindowResize = (e) => this._handleOutsideRectEvent(e);
|
||||
_handleWindowScroll = (e) => this._handleOutsideRectEvent(e);
|
||||
|
||||
_removeListeners = () => {
|
||||
window.removeEventListener("click", this._handleOutsideClick);
|
||||
window.removeEventListener("resize", this._handleWindowResize);
|
||||
window.removeEventListener("scroll", this._handleWindowScroll);
|
||||
};
|
||||
|
||||
_handleOutsideRectEvent = (e) => {
|
||||
this.props.onOutsideRectEvent(e);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
className={this.props.className}
|
||||
ref={(c) => {
|
||||
this._root = c;
|
||||
}}
|
||||
style={this.props.style}
|
||||
>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
@ -55,6 +55,7 @@ import { Toggle } from "~/components/system/components/Toggle";
|
||||
import { H1, H2, H3, H4, P, UL, OL, LI } from "~/components/system/components/Typography";
|
||||
|
||||
// NOTE(jim): Fragments
|
||||
import { Boundary } from "~/components/system/components/fragments/Boundary";
|
||||
import { CodeText } from "~/components/system/components/fragments/CodeText";
|
||||
import { TooltipAnchor } from "~/components/system/components/fragments/TooltipAnchor";
|
||||
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
|
||||
@ -114,6 +115,7 @@ export {
|
||||
OL,
|
||||
LI,
|
||||
// NOTE(jim): Fragments, not meant to be used.
|
||||
Boundary,
|
||||
TooltipAnchor,
|
||||
DescriptionGroup,
|
||||
TableContent,
|
||||
|
@ -9,6 +9,7 @@ export const Dismiss = (props) => (
|
||||
strokeLinejoin="round"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
{...props}
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
@ -21,6 +22,7 @@ export const Privacy = (props) => (
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
{...props}
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
@ -44,6 +46,7 @@ export const FileImage = (props) => (
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
{...props}
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
@ -89,6 +92,7 @@ export const Logo = (props) => (
|
||||
height={props.height}
|
||||
style={props.style}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="m71.4 57.6c-.7 3.3-1.3 6.4-2 9.8 5.9.9 11.7 1.7 17.7 2.6-.5 1.6-.9 3.1-1.4 4.8-5.8-.8-11.5-1.7-17.3-2.5-1.1 4.2-2 8.3-3.3 12.2-1.4 4.4-3 8.7-5 12.9-2.6 5.2-6.8 8.9-12.7 10.1-3.5.7-7 .4-10-1.9-.9-.7-1.8-1.8-1.9-2.8-.1-1.1.5-2.7 1.4-3.3.6-.5 2.3-.1 3.1.5 1.1.8 1.8 2.1 2.6 3.3 1.8 2.5 4.4 2.9 6.8.8 2.9-2.5 4.4-5.8 5.3-9.3 1.9-7.3 3.6-14.8 5.3-22.2.1-.3 0-.7 0-1.3-5.4-.8-10.8-1.7-16.5-2.5.2-1.6.4-3 .6-4.8 5.6.8 11.1 1.6 17 2.4.8-3.2 1.5-6.4 2.3-9.7-6-.9-11.7-1.8-17.8-2.7.2-1.6.4-3.2.6-4.8 6.1.9 12 1.7 18.2 2.6.5-1.8.9-3.5 1.4-5.1 1.7-5.6 3.2-11.3 6.8-16.2s8.1-8.1 14.5-7.8c2.8.1 5.5.9 7.5 3.2.4.5 1 1.1 1 1.6-.1 1.2 0 2.9-.8 3.6-1.1 1.1-2.8.5-4-.6-.9-.9-1.6-1.9-2.3-2.9-1.8-2.4-4.7-2.9-6.8-.7-1.6 1.7-3.2 3.7-3.9 5.9-2.1 6.6-3.8 13.2-5.8 20.2 5.9.9 11.4 1.7 17.1 2.5-.5 1.6-.9 3.1-1.3 4.7-5.5-1.1-10.9-1.9-16.4-2.6z"
|
||||
@ -133,169 +137,160 @@ export const CheckBox = (props) => {
|
||||
|
||||
export const CopyAndPaste = (props) => {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m9.5 21.5h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-16 .00000015c-.00000008-.552285.447715-1 1-1h2" />
|
||||
<path d="m13.5 3.5h2-.00000004c.552285-.00000002 1 .447715 1 1v3.5" />
|
||||
<path d="m9.56066.93834c.585786.585786.585786 1.53553 0 2.12132-.585786.585786-1.53553.585786-2.12132 0-.585786-.585786-.585786-1.53553 0-2.12132.585786-.585786 1.53553-.585786 2.12132 0" />
|
||||
<path d="m9.915 2.5h2.585-.00000004c.552285-.00000002 1 .447715 1 1v1c0 .552285-.447715 1-1 1h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-1 .00000015c-.00000008-.552285.447715-1 1-1h2.585" />
|
||||
<path d="m22.5 22.5c0 .552285-.447715 1-1 1h-9-.00000004c-.552285-.00000002-1-.447715-1-1v-11.5.00000015c-.00000008-.552285.447715-1 1-1h7.086.00000001c.265195.00005664.519507.105451.707.293l1.914 1.914-.00000002-.00000002c.187549.187493.292943.441805.293.707z" />
|
||||
<path d="m14.5 14.5h5" />
|
||||
<path d="m14.5 17.5h5" />
|
||||
</g>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
<path d="m9.5 21.5h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-16 .00000015c-.00000008-.552285.447715-1 1-1h2" />
|
||||
<path d="m13.5 3.5h2-.00000004c.552285-.00000002 1 .447715 1 1v3.5" />
|
||||
<path d="m9.56066.93834c.585786.585786.585786 1.53553 0 2.12132-.585786.585786-1.53553.585786-2.12132 0-.585786-.585786-.585786-1.53553 0-2.12132.585786-.585786 1.53553-.585786 2.12132 0" />
|
||||
<path d="m9.915 2.5h2.585-.00000004c.552285-.00000002 1 .447715 1 1v1c0 .552285-.447715 1-1 1h-8-.00000004c-.552285-.00000002-1-.447715-1-1v-1 .00000015c-.00000008-.552285.447715-1 1-1h2.585" />
|
||||
<path d="m22.5 22.5c0 .552285-.447715 1-1 1h-9-.00000004c-.552285-.00000002-1-.447715-1-1v-11.5.00000015c-.00000008-.552285.447715-1 1-1h7.086.00000001c.265195.00005664.519507.105451.707.293l1.914 1.914-.00000002-.00000002c.187549.187493.292943.441805.293.707z" />
|
||||
<path d="m14.5 14.5h5" />
|
||||
<path d="m14.5 17.5h5" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const BandwidthDown = (props) => {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<path d="m20.25 17.25h-.00000013c1.65685-.00000007 3 1.34315 3 3 .00000007 1.65685-1.34315 3-3 3h-16.5-.00000013c-1.65685-.00000007-3-1.34315-3-3 .00000007-1.65685 1.34315-3 3-3z" />
|
||||
<path d="m7.5 6.751h-1.356-.00000002c-1.39991-.00004099-2.61375.968129-2.925 2.333l-2.394 10.499" />
|
||||
<path d="m23.175 19.583-2.394-10.5.00000014.0000006c-.311246-1.36487-1.52509-2.33304-2.925-2.333h-1.356" />
|
||||
<path d="m19.125 19.875h-.00000002c-.207107.00000001-.375.167893-.375.375.00000001.207107.167893.375.375.375.207107-.00000001.375-.167893.375-.375 0-.207107-.167893-.375-.375-.375" />
|
||||
<path d="m9.75 20.25h-5.25" />
|
||||
<path d="m9 9.75 3 3 3-3" />
|
||||
<path d="m12 12.75v-12" />
|
||||
</g>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<path d="m20.25 17.25h-.00000013c1.65685-.00000007 3 1.34315 3 3 .00000007 1.65685-1.34315 3-3 3h-16.5-.00000013c-1.65685-.00000007-3-1.34315-3-3 .00000007-1.65685 1.34315-3 3-3z" />
|
||||
<path d="m7.5 6.751h-1.356-.00000002c-1.39991-.00004099-2.61375.968129-2.925 2.333l-2.394 10.499" />
|
||||
<path d="m23.175 19.583-2.394-10.5.00000014.0000006c-.311246-1.36487-1.52509-2.33304-2.925-2.333h-1.356" />
|
||||
<path d="m19.125 19.875h-.00000002c-.207107.00000001-.375.167893-.375.375.00000001.207107.167893.375.375.375.207107-.00000001.375-.167893.375-.375 0-.207107-.167893-.375-.375-.375" />
|
||||
<path d="m9.75 20.25h-5.25" />
|
||||
<path d="m9 9.75 3 3 3-3" />
|
||||
<path d="m12 12.75v-12" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const BandwidthUp = (props) => {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<path d="m20.25 17.25h-.00000013c1.65685-.00000007 3 1.34315 3 3 .00000007 1.65685-1.34315 3-3 3h-16.5-.00000013c-1.65685-.00000007-3-1.34315-3-3 .00000007-1.65685 1.34315-3 3-3z" />
|
||||
<path d="m7.5 6.751h-1.356-.00000002c-1.39991-.00004099-2.61375.968129-2.925 2.333l-2.394 10.499" />
|
||||
<path d="m23.175 19.583-2.394-10.5.00000014.0000006c-.311246-1.36487-1.52509-2.33304-2.925-2.333h-1.356" />
|
||||
<path d="m19.125 19.875h-.00000002c-.207107.00000001-.375.167893-.375.375.00000001.207107.167893.375.375.375.207107-.00000001.375-.167893.375-.375 0-.207107-.167893-.375-.375-.375" />
|
||||
<path d="m9.75 20.25h-5.25" />
|
||||
<path d="m15 3.75-3-3-3 3" />
|
||||
<path d="m12 .75v12" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const Close = (props) => {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</g>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<path d="m20.25 17.25h-.00000013c1.65685-.00000007 3 1.34315 3 3 .00000007 1.65685-1.34315 3-3 3h-16.5-.00000013c-1.65685-.00000007-3-1.34315-3-3 .00000007-1.65685 1.34315-3 3-3z" />
|
||||
<path d="m7.5 6.751h-1.356-.00000002c-1.39991-.00004099-2.61375.968129-2.925 2.333l-2.394 10.499" />
|
||||
<path d="m23.175 19.583-2.394-10.5.00000014.0000006c-.311246-1.36487-1.52509-2.33304-2.925-2.333h-1.356" />
|
||||
<path d="m19.125 19.875h-.00000002c-.207107.00000001-.375.167893-.375.375.00000001.207107.167893.375.375.375.207107-.00000001.375-.167893.375-.375 0-.207107-.167893-.375-.375-.375" />
|
||||
<path d="m9.75 20.25h-5.25" />
|
||||
<path d="m15 3.75-3-3-3 3" />
|
||||
<path d="m12 .75v12" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const Search = (props) => {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</g>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const Reorder = (props) => {
|
||||
return (
|
||||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<path d="M2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44772 8 1 8.44772 1 9C1 9.55228 1.44772 10 2 10Z" />
|
||||
<path d="M2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2C1 2.55228 1.44772 3 2 3Z" />
|
||||
<path d="M9 10C9.55228 10 10 9.55228 10 9C10 8.44772 9.55228 8 9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10Z" />
|
||||
<path d="M9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2C8 2.55228 8.44772 3 9 3Z" />
|
||||
</g>
|
||||
<svg
|
||||
viewBox="0 0 14 14"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<path d="M2 10C2.55228 10 3 9.55228 3 9C3 8.44772 2.55228 8 2 8C1.44772 8 1 8.44772 1 9C1 9.55228 1.44772 10 2 10Z" />
|
||||
<path d="M2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2C1 2.55228 1.44772 3 2 3Z" />
|
||||
<path d="M9 10C9.55228 10 10 9.55228 10 9C10 8.44772 9.55228 8 9 8C8.44772 8 8 8.44772 8 9C8 9.55228 8.44772 10 9 10Z" />
|
||||
<path d="M9 3C9.55228 3 10 2.55228 10 2C10 1.44772 9.55228 1 9 1C8.44772 1 8 1.44772 8 2C8 2.55228 8.44772 3 9 3Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const Calendar = (props) => {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="16" y1="2" x2="16" y2="6"></line>
|
||||
<line x1="8" y1="2" x2="8" y2="6"></line>
|
||||
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||||
</g>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="16" y1="2" x2="16" y2="6"></line>
|
||||
<line x1="8" y1="2" x2="8" y2="6"></line>
|
||||
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const ChevronRight = (props) => {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6"></polyline>
|
||||
</g>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<polyline points="9 18 15 12 9 6"></polyline>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const ChevronLeft = (props) => {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<polyline points="15 18 9 12 15 6"></polyline>
|
||||
</g>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
{...props}
|
||||
>
|
||||
<polyline points="15 18 9 12 15 6"></polyline>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
@ -221,7 +221,7 @@ import { Input, Textarea } from 'slate-react-system';`}
|
||||
<System.Input
|
||||
label="Icon and submit function"
|
||||
name="exampleFive"
|
||||
icon={SVG.Close}
|
||||
icon={SVG.Dismiss}
|
||||
onSubmit={() => {
|
||||
this.setState({ exampleFive: "" });
|
||||
}}
|
||||
@ -242,7 +242,7 @@ import { Input, Textarea } from 'slate-react-system';`}
|
||||
<Input
|
||||
label="Icon with submit function"
|
||||
name="exampleFive"
|
||||
icon={SVG.Close}
|
||||
icon={SVG.Dismiss}
|
||||
onSubmit={() => {
|
||||
this.setState({ exampleFive: "" });
|
||||
}}
|
||||
|
@ -59,16 +59,13 @@ import { ListEditor } from 'slate-react-system';`}
|
||||
<hr />
|
||||
<br />
|
||||
<System.ListEditor
|
||||
placeholder="Add a flavor"
|
||||
name="flavors"
|
||||
options={this.state.flavors}
|
||||
onChange={this._handleListChange}
|
||||
/>
|
||||
<br />
|
||||
<System.P>
|
||||
Define the List Editor component. Note that the _handleListChange
|
||||
takes a different shape than the other onChange functions in this
|
||||
design system.
|
||||
</System.P>
|
||||
<System.P>Define the List Editor component.</System.P>
|
||||
<br />
|
||||
<CodeBlock>
|
||||
{`class ExampleOne extends React.Component {
|
||||
@ -84,16 +81,17 @@ import { ListEditor } from 'slate-react-system';`}
|
||||
]
|
||||
}
|
||||
|
||||
_handleListChange = ({ name, value }) => {
|
||||
this.setState({ [name]: value });
|
||||
_handleChange = (e) => {
|
||||
this.setState({ [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
render() {
|
||||
return(
|
||||
<ListEditor
|
||||
placeholder="Add a flavor"
|
||||
name="flavors"
|
||||
options={this.state.flavors}
|
||||
onChange={this._handleListChange}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user