filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-23 14:07:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

global notifications refactor and code text refactor

Browse Source
This commit is contained in:
Martina 2020-07-13 21:28:18 -07:00
parent c23a4182cf
commit a8033e120e
20 changed files with 662 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
common/constants.js
View File

@ -48,4 +48,4 @@ export const theme = {
ctaBackground: system.brand,
pageBackground: system.foreground,
pageText: system.black,
};
};

108
components/system/components/GlobalNotification.js Normal file
View File

@ -0,0 +1,108 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/components/system/svg";
import * as Strings from "~/common/strings";
import { css } from "@emotion/react";
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
const STYLES_NOTIFICATION_LIST = css`
position: fixed;
display: flex;
flex-direction: column;
`;
const STYLES_NOTIFICATION = css`
box-sizing: border-box;
font-family: ${Constants.font.text};
background-color: ${Constants.system.white};
border-radius: 4px;
padding: 16px;
padding-bottom: 4px;
position: relative;
margin: 4px;
`;
const NOTIF_COLOR_MAP = {
SUCCESS: Constants.system.green,
ERROR: Constants.system.red,
WARNING: Constants.system.yellow,
INFO: Constants.system.brand,
GENERIC: Constants.system.black,
};
export class GlobalNotification extends React.Component {
state = {
order: [],
notifs: {},
};
componentDidMount = () => {
window.addEventListener("create-notification", this._handleCreate);
window.addEventListener("delete-notification", this._handleDelete);
};
componentWillUnmount = () => {
window.removeEventListener("create-notification", this._handleCreate);
window.removeEventListener("delete-notification", this._handleDelete);
};
_handleCreate = (e) => {
let notifs = this.state.notifs;
notifs[e.detail.id] = e.detail;
if (e.detail.timeout) {
setTimeout(() => this._dispatchDelete(e.detail.id), e.detail.timeout);
}
this.setState({
order: [...this.state.order, e.detail.id],
notifs,
});
};
_handleDelete = (e) => {
let notifs = this.state.notifs;
let order = this.state.order;
delete notifs[e.detail.id];
order.splice(order.indexOf(e.detail.id), 1);
this.setState({ order, notifs });
};
_dispatchDelete = (id) => {
let event = new CustomEvent("delete-notification", { detail: { id: id } });
window.dispatchEvent(event);
};
render() {
return (
<div css={STYLES_NOTIFICATION_LIST} style={this.props.style}>
{this.state.order.map((id) => {
let notif = this.state.notifs[id];
return (
<div
css={STYLES_NOTIFICATION}
style={
notif.dark
? {
backgroundColor: Constants.system.black,
color: Constants.system.white,
boxShadow: `0 1px 4px rgba(0, 0, 0, 0.07), inset 0 0 0 2px ${NOTIF_COLOR_MAP["GENERIC"]}`,
}
: {
boxShadow: `0 1px 4px rgba(0, 0, 0, 0.07), inset 0 0 0 2px ${
NOTIF_COLOR_MAP[notif.status || "GENERIC"]
}`,
}
}
>
<DescriptionGroup
label={notif.label}
description={notif.description}
/>
</div>
);
})}
</div>
);
}
}

128
components/system/components/Notification.js
View File

@ -1,128 +0,0 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import * as SVG from "~/components/system/svg";
import * as Strings from "~/common/strings";
import { css } from "@emotion/react";
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
const STYLES_NOTIFICATION = css`
box-sizing: border-box;
font-family: ${Constants.font.text};
background-color: ${Constants.system.white};
border-radius: 5px;
padding: 15px 15px 3px 15px;
display: grid;
grid-template-columns: 35px 1fr;
position: relative;
width: 500px;
`;
const STYLES_ICON = css`
box-sizing: border-box;
position: relative;
bottom: 2px;
margin-bottom: 8px;
`;
const STYLES_CLOSE = css`
box-sizing: border-box;
height: 18px;
position: absolute;
top: 8px;
right: 8px;
cursor: pointer;
`;
const NOTIF_COLOR_MAP = {
SUCCESS: Constants.system.green,
ERROR: Constants.system.red,
WARNING: Constants.system.yellow,
INFO: Constants.system.brand,
};
const ICON_MAP = {
SUCCESS: (
<SVG.CheckCircle
css={STYLES_ICON}
height="24px"
style={{
color: `${NOTIF_COLOR_MAP["SUCCESS"]}`,
}}
/>
),
ERROR: (
<SVG.XCircle
css={STYLES_ICON}
height="24px"
style={{
color: `${NOTIF_COLOR_MAP["ERROR"]}`,
}}
/>
),
WARNING: (
<SVG.AlertCircle
css={STYLES_ICON}
height="24px"
style={{
color: `${NOTIF_COLOR_MAP["WARNING"]}`,
}}
/>
),
INFO: (
<SVG.InfoCircle
css={STYLES_ICON}
height="24px"
style={{
color: `${NOTIF_COLOR_MAP["INFO"]}`,
}}
/>
),
};
export class Notification extends React.Component {
componentDidMount = () => {
this.startInterval();
};
componentWillUnmount = () => {
this.stopInterval();
};
stopInterval = () => {
clearInterval(this.interval);
};
startInterval = () => {
if (this.props.interval) {
this.interval = setInterval(this.props.onClose, this.props.interval);
}
};
render() {
return (
<div
css={STYLES_NOTIFICATION}
style={{
boxShadow: `0 1px 4px rgba(0, 0, 0, 0.07), inset 0 0 0 2px ${
NOTIF_COLOR_MAP[this.props.status || "INFO"]
}`,
}}
onMouseEnter={this.stopInterval}
onMouseLeave={this.startInterval}
>
{ICON_MAP[this.props.status || "INFO"]}
<DescriptionGroup
tooltip={this.props.tooltip}
label={this.props.label}
description={this.props.description}
style={{ marginBottom: "0" }}
/>
{this.props.onClose ? (
<SVG.X css={STYLES_CLOSE} onClick={this.props.onClose} />
) : null}
</div>
);
}
}

2
components/system/components/fragments/CodeText.js
View File

@ -22,7 +22,7 @@ const STYLES_CODE = css`
font-size: 0.95em;
background-color: ${Constants.system.white};
border-radius: 4px;
padding: 0.2em;
padding: 0.1em 0.2em;
border: 1px solid ${Constants.system.border};
`;

11
components/system/components/fragments/TableComponents.js
View File

@ -4,6 +4,7 @@ import * as SVG from "~/components/system/svg";
import * as OldSVG from "~/common/svg";
import * as Strings from "~/common/strings";
import { CodeText } from "~/components/system/components/fragments/CodeText";
import { css } from "@emotion/react";
import { Tooltip } from "react-tippy";
@ -69,6 +70,14 @@ const COMPONENTS_TRANSACTION_STATUS = {
),
};
const COMPONENTS_OBJECT_TYPE = (text) => {
if (Array.isArray(text)) {
text = text.map((item) => <CodeText nowrap>{item}</CodeText>);
return text;
}
return <CodeText nowrap>{text}</CodeText>;
};
const STYLES_COLUMN = css`
box-sizing: border-box;
display: inline-flex;
@ -188,6 +197,8 @@ export const TableContent = ({
return COMPONENTS_TRANSACTION_DIRECTION[text];
case "TRANSACTION_STATUS":
return COMPONENTS_TRANSACTION_STATUS[text];
case "OBJECT_TYPE":
return COMPONENTS_OBJECT_TYPE(text);
case "ICON":
return COMPONENTS_ICON[text];
case "AVATAR":

6
components/system/index.js
View File

@ -22,9 +22,10 @@ import { CheckBox } from "~/components/system/components/CheckBox";
import { CodeBlock } from "~/components/system/components/CodeBlock";
import { CodeTextarea } from "~/components/system/components/CodeTextarea";
import { DatePicker } from "~/components/system/components/DatePicker";
import { GlobalModal } from "~/components/system/components/GlobalModal";
import { GlobalNotification } from "~/components/system/components/GlobalNotification";
import { Input } from "~/components/system/components/Input";
import { ListEditor } from "~/components/system/components/ListEditor";
import { Notification } from "~/components/system/components/Notification";
import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
import { RadioGroup } from "~/components/system/components/RadioGroup";
import {
@ -72,9 +73,10 @@ export {
CodeText,
CodeTextarea,
DatePicker,
GlobalModal,
GlobalNotification,
Input,
ListEditor,
Notification,
PopoverNavigation,
RadioGroup,
SelectCountryMenu,

8
components/system/modules/FilecoinBalancesList.js
View File

@ -23,21 +23,27 @@ export const FilecoinBalancesList = (props) => {
columns: [
{
key: "address",
name: "Address",
},
{
key: "name",
name: "Name",
},
{
key: "type",
name: "Type",
},
{
key: "balance",
name: "Address",
},
],
rows: props.data.map((each) => {
return {
id: each.addr.addr,
balance: Strings.formatAsFilecoin(each.balance),
balance: Strings.formatAsFilecoin(
Strings.formatNumber(each.balance)
),
address: each.addr.addr,
name: each.addr.name,
type: each.addr.type,

2
pages/experiences/filecoin-wallet-balances.js
View File

@ -38,7 +38,7 @@ export default class SystemPageFilecoinWalletBalances extends React.Component {
name: "Wallet B",
type: "secp256k1",
},
balance: 500,
balance: 5000,
},
];

10
pages/system/card-tabs.js
View File

@ -149,7 +149,7 @@ class ExampleTwo extends React.Component {
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
@ -161,7 +161,7 @@ class ExampleTwo extends React.Component {
onChange
</span>
),
b: <System.CodeText nowrap>function</System.CodeText>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
@ -172,7 +172,7 @@ class ExampleTwo extends React.Component {
value
</span>
),
b: <System.CodeText nowrap>boolean</System.CodeText>,
b: "boolean",
c: "false",
d:
"The value that is currently selected. Can be used to assign default values as well",
@ -184,7 +184,7 @@ class ExampleTwo extends React.Component {
options
</span>
),
b: <System.CodeText nowrap>Array</System.CodeText>,
b: "Array",
c: "[]",
d:
"An array of options, each of which has a value and a label",
@ -192,7 +192,7 @@ class ExampleTwo extends React.Component {
{
id: 4,
a: "name",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Input name",
},

8
pages/system/checkboxes.js
View File

@ -138,7 +138,7 @@ class ExampleTwo extends React.Component {
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
@ -150,7 +150,7 @@ class ExampleTwo extends React.Component {
onChange
</span>
),
b: <System.CodeText nowrap>function</System.CodeText>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
@ -161,7 +161,7 @@ class ExampleTwo extends React.Component {
value
</span>
),
b: <System.CodeText nowrap>boolean</System.CodeText>,
b: "boolean",
c: "false",
d:
"The value of the checkbox. Can be used to assign default values as well",
@ -169,7 +169,7 @@ class ExampleTwo extends React.Component {
{
id: 3,
a: "name",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Input name",
},

35
pages/system/datepicker.js
View File

@ -200,7 +200,7 @@ const weekdaysOnly = (date) => {
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
@ -212,7 +212,7 @@ const weekdaysOnly = (date) => {
onChange
</span>
),
b: <System.CodeText nowrap>function</System.CodeText>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
@ -223,12 +223,7 @@ const weekdaysOnly = (date) => {
value
</span>
),
b: (
<div>
<System.CodeText nowrap>string</System.CodeText>
<System.CodeText nowrap>Date</System.CodeText>
</div>
),
b: ["string", "Date"],
c: "null",
d:
"The value of the datepicker. Can be used to assign default values as well",
@ -236,59 +231,49 @@ const weekdaysOnly = (date) => {
{
id: 3,
a: "name",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Input name",
},
{
id: 4,
a: "label",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Label text",
},
{
id: 5,
a: "description",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Description text",
},
{
id: 6,
a: "tooltip",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Tooltip text",
},
{
id: 7,
a: "min",
b: (
<div>
<System.CodeText nowrap>string</System.CodeText>
<System.CodeText nowrap>Date</System.CodeText>
</div>
),
b: ["string", "Date"],
c: "null",
d: "Earliest date allowed. String must be in yyyy-mm-dd form",
},
{
id: 8,
a: "max",
b: (
<div>
<System.CodeText nowrap>string</System.CodeText>
<System.CodeText nowrap>Date</System.CodeText>
</div>
),
b: ["string", "Date"],
c: "null",
d: "Latest date allowed. String must be in yyyy-mm-dd form",
},
{
id: 9,
a: "isDisabled",
b: <System.CodeText nowrap>function</System.CodeText>,
b: "function",
c: "null",
d:
"Function that accepts a Date object and returns true if the date should be disabled (cannot be selected), false otherwise",

20
pages/system/dropdowns.js
View File

@ -219,7 +219,7 @@ class ExampleTwo extends React.Component {
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
@ -231,7 +231,7 @@ class ExampleTwo extends React.Component {
options
</span>
),
b: <System.CodeText nowrap>Array</System.CodeText>,
b: "Array",
c: "[]",
d:
"Array of options to select from. Each object in the array should have a name and value",
@ -243,7 +243,7 @@ class ExampleTwo extends React.Component {
onChange
</span>
),
b: <System.CodeText nowrap>function</System.CodeText>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
@ -254,7 +254,7 @@ class ExampleTwo extends React.Component {
value
</span>
),
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d:
"The value that the dropdown takes. Can be used to assign default values as well.",
@ -262,42 +262,42 @@ class ExampleTwo extends React.Component {
{
id: 4,
a: "name",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Input name",
},
{
id: 5,
a: "label",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Label text",
},
{
id: 6,
a: "description",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Description text",
},
{
id: 7,
a: "tooltip",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Tooltip text",
},
{
id: 8,
a: "full",
b: <System.CodeText nowrap>boolean</System.CodeText>,
b: "boolean",
c: "false",
d: "Sets width to 100% if true",
},
{
id: 9,
a: "category",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Category text",
},

22
pages/system/inputs.js
View File

@ -328,7 +328,7 @@ class ExampleError extends React.Component {
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
@ -340,7 +340,7 @@ class ExampleError extends React.Component {
onChange
</span>
),
b: <System.CodeText nowrap>function</System.CodeText>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
@ -351,7 +351,7 @@ class ExampleError extends React.Component {
value
</span>
),
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d:
"The value that the dropdown takes. Can be used to assign default values as well.",
@ -359,49 +359,49 @@ class ExampleError extends React.Component {
{
id: 3,
a: "name",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Input name",
},
{
id: 4,
a: "label",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Label text",
},
{
id: 5,
a: "description",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Description text",
},
{
id: 6,
a: "tooltip",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Tooltip text",
},
{
id: 7,
a: "max",
b: <System.CodeText nowrap>int</System.CodeText>,
b: "int",
c: "null",
d: "Max number of input characters",
},
{
id: 8,
a: "validation",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Validation style. Use: SUCCESS, WARNING or ERROR",
},
{
id: 9,
a: "icon",
b: <System.CodeText nowrap>SVG</System.CodeText>,
b: "SVG",
c: "null",
d:
"Icon on the right side of the input box. If an onSubmit is specified, it will trigger on click. Specifying an icon overrides copyable",
@ -409,7 +409,7 @@ class ExampleError extends React.Component {
{
id: 10,
a: "onSubmit",
b: <System.CodeText nowrap>function</System.CodeText>,
b: "function",
c: "null",
d:
"Function called when the enter key is pressed and when the icon (if present) is clicked",

12
pages/system/list-editor.js
View File

@ -123,7 +123,7 @@ import { ListEditor } from 'slate-react-system';`}
onChange
</span>
),
b: <System.CodeText nowrap>function</System.CodeText>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
@ -134,7 +134,7 @@ import { ListEditor } from 'slate-react-system';`}
options
</span>
),
b: <System.CodeText nowrap>Array</System.CodeText>,
b: "Array",
c: "null",
d:
"Values to choose from and reorder. Can be used to specify the default value. An array of strings.",
@ -142,28 +142,28 @@ import { ListEditor } from 'slate-react-system';`}
{
id: 2,
a: "name",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Input name",
},
{
id: 3,
a: "label",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Label text",
},
{
id: 4,
a: "description",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Description text",
},
{
id: 5,
a: "tooltip",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Tooltip text",
},

622
pages/system/notifications.js
View File

@ -8,13 +8,18 @@ import ViewSourceLink from "~/components/system/ViewSourceLink";
export default class SystemPageNotifications extends React.Component {
state = {
exampleOne: true,
exampleTwo: true,
exampleThree: true,
count: 0,
};
_handleChange = (name) => {
this.setState({ [name]: false });
_createNotif = (detail) => {
let event = new CustomEvent("create-notification", { detail });
window.dispatchEvent(event);
this.setState({ count: this.state.count + 1 });
};
_deleteNotif = (detail) => {
let event = new CustomEvent("delete-notification", { detail });
window.dispatchEvent(event);
};
render() {
@ -40,182 +45,373 @@ export default class SystemPageNotifications extends React.Component {
<br />
<System.P>Import React and the Notification Component.</System.P>
<br />
<br />
<System.CodeBlock>
{`import * as React from 'react';
import { Notification } from 'slate-react-system';`}
</System.CodeBlock>
<br />
<br />
<System.H2>Notification with status</System.H2>
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.Notification
label="Info Notification"
description="Here is the description"
status="INFO"
/>
<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.Notification
label="Success Notification"
description="Here is the description"
status="SUCCESS"
/>
<System.P>
Use <System.CodeText>style</System.CodeText> to specify placement of
the fixed positioning notification list
</System.P>
<br />
<System.Notification
label="Warning Notification"
description="Here is the description"
status="WARNING"
/>
<br />
<System.Notification
label="Error Notification"
description="Whoops that doesn't look good"
status="ERROR"
/>
<System.CodeBlock>
{`function App() {
return (
<React.Fragment>
<GlobalNotification style={{ bottom: 0, right: 0 }} />
{this.props.children}
</React.Fragment>
)
}`}
</System.CodeBlock>
<System.GlobalNotification style={{ bottom: 0, right: 0 }} />
<br />
<br />
<System.P>Declare the Notification component with a status.</System.P>
<br />
<System.H2>Notification</System.H2>
<hr />
<br />
<System.ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This is a regular notification",
})
}
>
Click for notification
</System.ButtonSecondaryFull>
<br />
<System.ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This is a dark notification",
dark: true,
})
}
>
Click for dark style notification
</System.ButtonSecondaryFull>
<br />
<System.ButtonPrimaryFull
onClick={() => {
for (let i = 0; i <= this.state.count; i++) {
this._deleteNotif({ i });
}
}}
>
Click to clear notifications
</System.ButtonPrimaryFull>
<br />
<System.P>
A notification will only appear once you trigger it by creating a
custom event with the title{" "}
<System.CodeText>"create-notification"</System.CodeText>. It can be
removed with a custom event entitled{" "}
<System.CodeText>"delete-notification"</System.CodeText>.
</System.P>
<br />
<System.P>
Multiple stacked notifications can be created using a single
Notification component.{" "}
<strong>Each co-existing notification must have a unique id.</strong>
</System.P>
<br />
<System.CodeBlock>
{`class ExampleOne extends React.Component {
render() {
return(
<Notification
label="Info Notification"
description="Here is the description"
status="INFO"
/>
<br />
<Notification
label="Success Notification"
description="Here is the description"
status="SUCCESS"
/>
<br />
<Notification
label="Warning Notification"
description="Here is the description"
status="WARNING"
/>
<br />
<Notification
label="Error Notification"
description="Whoops that doesn't look good"
status="ERROR"
/>
)
}
}`}
</System.CodeBlock>
<br />
<br />
<br />
<System.H2>Notification with content</System.H2>
<hr />
<br />
<System.Notification
label="Doge demands your attention"
description={
<div style={{ display: "grid", gridTemplateColumns: "1fr 5fr" }}>
<img
src="https://upload.wikimedia.org/wikipedia/en/5/5f/Original_Doge_meme.jpg"
alt="doge"
style={{ height: "50px", display: "inline-block" }}
/>
You can style the description how you like and even add photos or
other components.
</div>
}
/>
<br />
<br />
<System.P>
Declare the Notification component with components in the description
</System.P>
<br />
<System.CodeBlock>
{`let imgLink= "https://upload.wikimedia.org/wikipedia/en/5/5f/Original_Doge_meme.jpg"
class ExampleTwo extends React.Component {
render() {
return(
<Notification
label="Doge demands your attention"
description={
<div style={{
display: "grid",
gridTemplateColumns: "1fr 5fr"
}}
>
<img src={imgLink}
alt="doge"
style={{ height: "50px", display: "inline-block" }}
/>
You can style the description how you like and
even add photos or other components.
</div>
}
/>
)
}
}`}
</System.CodeBlock>
<br />
<br />
<br />
<System.H2>Notification with onClose function and timer</System.H2>
<hr />
<br />
{this.state.exampleOne ? (
<System.Notification
label="Notification with a timer and a close function"
description="This notification disappears after 1 minute"
interval={60000}
onClose={() => this._handleChange("exampleOne")}
/>
) : (
<System.P>
This notification disappeared after 1 minute. Refresh the page to
see it.
</System.P>
)}
<br />
<br />
<System.P>
Declare the Notification component with an onClose function which is
triggered when the x is clicked.
</System.P>
<br />
<System.P>
You can include an interval in milliseconds, after which onClose is
automatically called. If the user mouses over the notification, the
timer restarts.
</System.P>
<br />
<System.CodeBlock>
{`class exampleOne extends React.Component {
state = { exampleOne: true }
state = {
count: 0,
};
render() {
return(
{this.state.exampleOne ? (
<Notification
label="Notification with a timer and a close function"
description="This notification disappears after 5 minutes"
interval={180000}
onClose={() => this._handleChange("exampleOne")}
/>
) : (
<div>This notification disappeared after 5 minutes</div>
)}
)
}
_createNotif = (detail) => {
let event = new CustomEvent("create-notification", { detail });
window.dispatchEvent(event);
this.setState({ count: this.state.count + 1 });
};
_deleteNotif = (detail) => {
let event = new CustomEvent("delete-notification", { detail });
window.dispatchEvent(event);
};
render() {
return(
<ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This is notification number " + this.state.count,
})
}
>
Click for notification
</ButtonSecondaryFull>
<br />
<ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This is a dark notification",
dark: true,
})
}
>
Click for dark style notification
</ButtonSecondaryFull>
<ButtonPrimaryFull
onClick={() => {
for (let i = 0; i <= this.state.count; i++) {
this._deleteNotif({ i });
}
}}
>
Click to clear notifications
</ButtonPrimaryFull>
)
}
}`}
</System.CodeBlock>
<br />
<br />
<br />
<System.H2>Notification with timeout</System.H2>
<hr />
<br />
<System.ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This disappears after 5 seconds",
timeout: 5000,
})
}
>
Click for disappearing notification
</System.ButtonSecondaryFull>
<br />
<System.ButtonPrimaryFull
onClick={() => {
for (let i = 0; i <= this.state.count; i++) {
this._deleteNotif({ i });
}
}}
>
Click to clear notifications
</System.ButtonPrimaryFull>
<br />
<System.P>
You can declare the Notification component with a{" "}
<System.CodeText>timeout</System.CodeText> (in milliseconds) after
which it will automatically disappear.
</System.P>
<br />
<System.CodeBlock>
{`class ExampleTwo extends React.Component {
state = {
count: 0,
};
_createNotif = (detail) => {
let event = new CustomEvent("create-notification", { detail });
window.dispatchEvent(event);
this.setState({ count: this.state.count + 1 });
};
render() {
return(
<ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This disappears after 5 seconds",
timeout: 5000,
})
}
>
Click for disappearing notification
</System.ButtonSecondaryFull>
<ButtonPrimaryFull
onClick={() => {
for (let i = 0; i <= this.state.count; i++) {
this._deleteNotif({ i });
}
}}
>
Click to clear notifications
</ButtonPrimaryFull>
)
}
}`}
</System.CodeBlock>
<br />
<br />
<br />
<System.H2>Notification with status</System.H2>
<hr />
<br />
<System.ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This is an info notification",
status: "INFO",
})
}
>
Click for info style notification
</System.ButtonSecondaryFull>
<br />
<System.ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This is a success notification",
status: "SUCCESS",
})
}
>
Click for success style notification
</System.ButtonSecondaryFull>
<br />
<System.ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This is a warning notification",
status: "WARNING",
})
}
>
Click for warning style notification
</System.ButtonSecondaryFull>
<br />
<System.ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This is an error notification",
status: "ERROR",
})
}
>
Click for error style notification
</System.ButtonSecondaryFull>
<br />
<System.ButtonPrimaryFull
onClick={() => {
for (let i = 0; i <= this.state.count; i++) {
this._deleteNotif({ i });
}
}}
>
Click to clear notifications
</System.ButtonPrimaryFull>
<br />
<br />
<System.P>
Declare the Notification component with a{" "}
<System.CodeText>status</System.CodeText> to style it accordingly.
This is overridden if <System.CodeText>dark</System.CodeText> is set
to true.
</System.P>
<br />
<System.CodeBlock>
{`class ExampleThree extends React.Component {
state = {
count: 0,
};
_createNotif = (detail) => {
let event = new CustomEvent("create-notification", { detail });
window.dispatchEvent(event);
this.setState({ count: this.state.count + 1 });
};
_deleteNotif = (detail) => {
let event = new CustomEvent("delete-notification", { detail });
window.dispatchEvent(event);
};
render() {
return(
<ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This is an info notification",
status: "INFO",
})
}
>
Click for info style notification
</ButtonSecondaryFull>
<ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This is a success notification",
status: "SUCCESS",
})
}
>
Click for success style notification
</ButtonSecondaryFull>
<ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This is a warning notification",
status: "WARNING",
})
}
>
Click for warning style notification
</ButtonSecondaryFull>
<ButtonSecondaryFull
onClick={() =>
this._createNotif({
id: this.state.count,
description: "This is an error notification",
status: "ERROR",
})
}
>
Click for error style notification
</ButtonSecondaryFull>
<ButtonPrimaryFull
onClick={() => {
for (let i = 0; i <= this.state.count; i++) {
this._deleteNotif({ i });
}
}}
>
Click to clear notifications
</ButtonPrimaryFull>
)
}
}`}
</System.CodeBlock>
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
@ -224,60 +420,126 @@ class ExampleTwo extends React.Component {
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px" },
{ 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: "onClose",
b: <System.CodeText nowrap>function</System.CodeText>,
a: "style",
b: "Object",
c: "{}",
d:
"Style object used to style the notification list positioning on the page",
},
],
}}
/>
</Group>
<br />
<br />
<br />
<System.H2>
Accepted <i>Create</i> Notification 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 }}>
id
</span>
),
b: ["string", "number"],
c: "null",
d:
"Function called when the 'x' is clicked or the interval (if specified) runs out",
"Notification id, must be unique for simultaneously existing notifications or the latter will overwrite the former",
},
{
id: 2,
a: "status",
b: <System.CodeText nowrap>string</System.CodeText>,
c: "INFO",
b: "string",
c: "null",
d:
"Status which determines the styling and color of the notification. Use INFO, SUCCESS, WARNING, or ERROR",
},
{
id: 3,
a: "interval",
b: <System.CodeText nowrap>int</System.CodeText>,
a: "timeout",
b: "int",
c: "null",
d:
"Number of milliseconds before onClose is automatically called. Interval resets if user mouses over the notification",
"Number of milliseconds before the notification automatically disappears",
},
{
id: 4,
a: "label",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Label text",
},
{
id: 5,
a: "description",
b: (
<div>
<System.CodeText nowrap>string</System.CodeText>
<System.CodeText nowrap>Component</System.CodeText>
</div>
),
b: "string",
c: "null",
d: "Description text",
},
],
}}
/>
</Group>
<br />
<br />
<br />
<System.H2>
Accepted <i>Delete</i> Notification 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: 6,
a: "tooltip",
b: <System.CodeText nowrap>string</System.CodeText>,
id: 1,
a: (
<span style={{ fontFamily: Constants.font.semiBold }}>
id
</span>
),
b: ["string", "number"],
c: "null",
d: "Tooltip text",
d:
"Notification id of the notification that is to be deleted",
},
],
}}

16
pages/system/radios.js
View File

@ -157,7 +157,7 @@ import { RadioGroup } from 'slate-react-system';`}
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
@ -169,7 +169,7 @@ import { RadioGroup } from 'slate-react-system';`}
onChange
</span>
),
b: <System.CodeText nowrap>function</System.CodeText>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
@ -180,7 +180,7 @@ import { RadioGroup } from 'slate-react-system';`}
selected
</span>
),
b: <System.CodeText nowrap>boolean</System.CodeText>,
b: "boolean",
c: "false",
d:
"The value that is currently selected. Can be used to assign default values as well",
@ -192,7 +192,7 @@ import { RadioGroup } from 'slate-react-system';`}
options
</span>
),
b: <System.CodeText nowrap>Array</System.CodeText>,
b: "Array",
c: "[]",
d:
"An array of options, each of which has a value and a label",
@ -200,28 +200,28 @@ import { RadioGroup } from 'slate-react-system';`}
{
id: 4,
a: "name",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Input name",
},
{
id: 5,
a: "label",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Label text",
},
{
id: 6,
a: "description",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Description text",
},
{
id: 7,
a: "tooltip",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Tooltip text",
},

36
pages/system/tables.js
View File

@ -127,7 +127,7 @@ import { TableContent, TableColumn } from 'slate-react-system';`}
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
@ -135,112 +135,112 @@ import { TableContent, TableColumn } from 'slate-react-system';`}
{
id: 1,
a: "key",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Column key value",
},
{
id: 2,
a: "id",
b: <System.CodeText nowrap>number</System.CodeText>,
b: "number",
c: "null",
d: "Row ID value",
},
{
id: 3,
a: "name",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Name of the column",
},
{
id: 4,
a: "text",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Table content text",
},
{
id: 5,
a: "data",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Table content data",
},
{
id: 6,
a: "tooltip",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "If not null, a tooltip will be visible",
},
{
id: 7,
a: "copyable",
b: <System.CodeText nowrap>boolean</System.CodeText>,
b: "boolean",
c: "false",
d: "If true, a copyable icon will be visible",
},
{
id: 8,
a: "type",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Use FILE_LINK to add a linkable column",
},
{
id: 9,
a: "width",
b: <System.CodeText nowrap>number</System.CodeText>,
b: "number",
c: "null",
d: "Width of the column",
},
{
id: 10,
a: "action",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Row action",
},
{
id: 11,
a: "hideLabel",
b: <System.CodeText nowrap>boolean</System.CodeText>,
b: "boolean",
c: "false",
d: "If true, column label will be hidden",
},
{
id: 12,
a: "children",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Row child value",
},
{
id: 13,
a: "onNavigateTo",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "onNavigateTo function binding",
},
{
id: 14,
a: "onAction",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "onAction function binding",
},
{
id: 15,
a: "onChange",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "onChange function binding",
},
{
id: 16,
a: "selectedRowId",
b: <System.CodeText nowrap>number</System.CodeText>,
b: "number",
c: "null",
d: "ID value of the selected row",
},
@ -334,7 +334,7 @@ import { TableContent, TableColumn } from 'slate-react-system';`}
data={{
columns: [
{ key: 'a', name: 'Name', width: '184px' },
{ key: 'b', name: 'Type', width: '88px' },
{ key: 'b', name: 'Type', width: '88px', type: "OBJECT_TYPE" },
{ key: 'c', name: 'Description', width: '100%' },
],
rows: [

10
pages/system/tabs.js
View File

@ -155,7 +155,7 @@ class ExampleTwo extends React.Component {
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
@ -167,7 +167,7 @@ class ExampleTwo extends React.Component {
onChange
</span>
),
b: <System.CodeText nowrap>function</System.CodeText>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
@ -178,7 +178,7 @@ class ExampleTwo extends React.Component {
value
</span>
),
b: <System.CodeText nowrap>boolean</System.CodeText>,
b: "boolean",
c: "false",
d:
"The value that is currently selected. Can be used to assign default values as well",
@ -190,7 +190,7 @@ class ExampleTwo extends React.Component {
options
</span>
),
b: <System.CodeText nowrap>Array</System.CodeText>,
b: "Array",
c: "[]",
d:
"An array of options, each of which has a value and a label",
@ -198,7 +198,7 @@ class ExampleTwo extends React.Component {
{
id: 4,
a: "name",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Input name",
},

14
pages/system/toggles.js
View File

@ -118,7 +118,7 @@ class ExampleTwo extends React.Component {
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
@ -130,7 +130,7 @@ class ExampleTwo extends React.Component {
onChange
</span>
),
b: <System.CodeText nowrap>function</System.CodeText>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
@ -141,7 +141,7 @@ class ExampleTwo extends React.Component {
active
</span>
),
b: <System.CodeText nowrap>boolean</System.CodeText>,
b: "boolean",
c: "false",
d:
"The value that the dropdown takes. Can be used to assign default values as well.",
@ -149,28 +149,28 @@ class ExampleTwo extends React.Component {
{
id: 3,
a: "name",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Input name",
},
{
id: 4,
a: "label",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Label text",
},
{
id: 5,
a: "description",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Description text",
},
{
id: 6,
a: "tooltip",
b: <System.CodeText nowrap>string</System.CodeText>,
b: "string",
c: "null",
d: "Tooltip text",
},

6
pages/system/tooltips.js
View File

@ -67,7 +67,7 @@ import { TooltipAnchor } from 'slate-react-system';`}
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
@ -75,14 +75,14 @@ import { TooltipAnchor } from 'slate-react-system';`}
{
id: 1,
a: "tooltip",
b: <System.CodeText>string</System.CodeText>,
b: "string",
c: "null",
d: "Output text on the tooltip",
},
{
id: 2,
a: "height",
b: <System.CodeText>number</System.CodeText>,
b: "number",
c: "24px",
d: "Height of the tooltip",
},