mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-20 02:37:09 +03:00
global modals and documentation
This commit is contained in:
Martina
parent
3d1cd89a13
commit
e0ff55b768
@ -250,6 +250,7 @@ export default class SystemPage extends React.Component {
|
||||
href="/system/notifications"
|
||||
title="Notifications"
|
||||
/>
|
||||
<SidebarLink url={url} href="/system/modals" title="Modals" />
|
||||
|
||||
<div
|
||||
css={STYLES_SMALL_LINK}
|
||||
|
||||
77
components/system/components/GlobalModal.js
Normal file
77
components/system/components/GlobalModal.js
Normal file
@ -0,0 +1,77 @@
|
||||
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";
|
||||
|
||||
const STYLES_BACKGROUND = css`
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(45, 41, 38, 0.6);
|
||||
z-index: ${Constants.zindex.modal};
|
||||
`;
|
||||
|
||||
const STYLES_MODAL = css`
|
||||
width: 50vw;
|
||||
height: 60vh;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 4px;
|
||||
background-color: ${Constants.system.white};
|
||||
`;
|
||||
|
||||
const STYLES_X = css`
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
export class GlobalModal extends React.Component {
|
||||
state = {
|
||||
modal: null,
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
window.addEventListener("create-modal", this._handleCreate);
|
||||
window.addEventListener("delete-modal", this._handleDelete);
|
||||
};
|
||||
|
||||
componentWillUnmount = () => {
|
||||
window.removeEventListener("create-modal", this._handleCreate);
|
||||
window.removeEventListener("delete-modal", this._handleDelete);
|
||||
};
|
||||
|
||||
_handleCreate = (e) => {
|
||||
this.setState({ modal: e.detail.modal });
|
||||
};
|
||||
|
||||
_handleDelete = (e) => {
|
||||
this.setState({ modal: null });
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.modal) {
|
||||
return (
|
||||
<div
|
||||
css={STYLES_BACKGROUND}
|
||||
style={this.props.backgroundStyle}
|
||||
onClick={this._handleDelete}
|
||||
>
|
||||
<div css={STYLES_MODAL} style={this.props.style}>
|
||||
{this.state.modal}
|
||||
<SVG.X css={STYLES_X} onClick={this._handleDelete} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@ -22,6 +22,7 @@ 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";
|
||||
@ -72,6 +73,7 @@ export {
|
||||
CodeText,
|
||||
CodeTextarea,
|
||||
DatePicker,
|
||||
GlobalModal,
|
||||
GlobalNotification,
|
||||
Input,
|
||||
ListEditor,
|
||||
|
||||
238
pages/system/modals.js
Normal file
238
pages/system/modals.js
Normal file
@ -0,0 +1,238 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
import Group from "~/components/system/Group";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
export default class SystemPageNotifications extends React.Component {
|
||||
_handleCreate = (detail) => {
|
||||
let event = new CustomEvent("create-modal", { detail });
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
|
||||
_handleDelete = () => {
|
||||
let event = new CustomEvent("delete-modal", {});
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SystemPage
|
||||
title="SDS: Modals"
|
||||
description="..."
|
||||
url="https://fps.onrender.com/system/modals"
|
||||
>
|
||||
<System.H1>
|
||||
Modals <ViewSourceLink file="system/modals.js" />
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>
|
||||
The Modal 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 Modal Component.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`import * as React from 'react';
|
||||
import { GlobalModal } from 'slate-react-system';`}
|
||||
</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>backgroundStyle</System.CodeText> to
|
||||
style the background and <System.CodeText>style</System.CodeText> to
|
||||
style the modal itself.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`class App extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<React.Fragment>
|
||||
<GlobalModal style={{ padding: "10px" }}/>
|
||||
{this.props.children}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}`}
|
||||
</System.CodeBlock>
|
||||
<System.GlobalModal style={{ padding: "10px" }} />
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Modal</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._handleCreate({
|
||||
modal: (
|
||||
<div
|
||||
style={{
|
||||
textAlign: "center",
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
}}
|
||||
>
|
||||
<System.H2>Render whatever component you like here</System.H2>
|
||||
<br />
|
||||
<System.ButtonSecondary onClick={this._handleDelete}>
|
||||
Cancel
|
||||
</System.ButtonSecondary>
|
||||
</div>
|
||||
),
|
||||
})
|
||||
}
|
||||
>
|
||||
Click for modal popup
|
||||
</System.ButtonSecondaryFull>
|
||||
<br />
|
||||
<System.P>
|
||||
While the Modal component is always present, a modal will only appear
|
||||
once you trigger it by creating a custom event with the title{" "}
|
||||
<System.CodeText>"create-modal"</System.CodeText>. It can be removed
|
||||
with a custom event entitled{" "}
|
||||
<System.CodeText>"delete-modal"</System.CodeText>.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`class ExampleOne extends React.Component {
|
||||
_handleCreate = (detail) => {
|
||||
let event = new CustomEvent("create-modal", { detail });
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
|
||||
_handleDelete = () => {
|
||||
let event = new CustomEvent("delete-modal", {});
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
|
||||
render() {
|
||||
let modalContent = (
|
||||
<div
|
||||
style={{
|
||||
textAlign: "center",
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
}}
|
||||
>
|
||||
<H2>Render whatever component you like here</H2>
|
||||
<br />
|
||||
<ButtonSecondary onClick={this._handleDelete}>
|
||||
Cancel
|
||||
</ButtonSecondary>
|
||||
</div>
|
||||
)
|
||||
return(
|
||||
<ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._handleCreate({ modal: modalContent })
|
||||
}
|
||||
>
|
||||
Click for modal popup
|
||||
</ButtonSecondaryFull>
|
||||
)
|
||||
}
|
||||
}`}
|
||||
</System.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 modal (height and width, positioning, padding etc.)",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
a: "backgroundStyle",
|
||||
b: "Object",
|
||||
c: "{}",
|
||||
d:
|
||||
"Style object used to style the modal background (color, etc.)",
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>
|
||||
Accepted <i>Create</i> Modal 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 }}>
|
||||
modal
|
||||
</span>
|
||||
),
|
||||
b: "Component",
|
||||
c: "null",
|
||||
d: "Component to be rendered inside the modal",
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -11,13 +11,13 @@ export default class SystemPageNotifications extends React.Component {
|
||||
count: 0,
|
||||
};
|
||||
|
||||
_createNotif = (detail) => {
|
||||
_handleCreate = (detail) => {
|
||||
let event = new CustomEvent("create-notification", { detail });
|
||||
window.dispatchEvent(event);
|
||||
this.setState({ count: this.state.count + 1 });
|
||||
};
|
||||
|
||||
_deleteNotif = () => {
|
||||
_handleDelete = () => {
|
||||
let event = new CustomEvent("delete-notification", {});
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
@ -47,7 +47,7 @@ export default class SystemPageNotifications extends React.Component {
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`import * as React from 'react';
|
||||
import { Notification } from 'slate-react-system';`}
|
||||
import { GlobalNotification } from 'slate-react-system';`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
@ -63,7 +63,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
<br />
|
||||
<System.P>
|
||||
Use <System.CodeText>style</System.CodeText> to specify placement of
|
||||
the fixed positioning notification list
|
||||
the fixed positioning notification list. Default is bottom right.
|
||||
</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
@ -87,7 +87,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
<br />
|
||||
<System.ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This is a regular notification",
|
||||
})
|
||||
@ -98,7 +98,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
<br />
|
||||
<System.ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This is a dark notification",
|
||||
dark: true,
|
||||
@ -108,7 +108,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
Click for dark style notification
|
||||
</System.ButtonSecondaryFull>
|
||||
<br />
|
||||
<System.ButtonPrimaryFull onClick={this._deleteNotif}>
|
||||
<System.ButtonPrimaryFull onClick={this._handleDelete}>
|
||||
Click to clear notifications
|
||||
</System.ButtonPrimaryFull>
|
||||
<br />
|
||||
@ -132,13 +132,13 @@ import { Notification } from 'slate-react-system';`}
|
||||
count: 0,
|
||||
};
|
||||
|
||||
_createNotif = (detail) => {
|
||||
_handleCreate = (detail) => {
|
||||
let event = new CustomEvent("create-notification", { detail });
|
||||
window.dispatchEvent(event);
|
||||
this.setState({ count: this.state.count + 1 });
|
||||
};
|
||||
|
||||
_deleteNotif = (detail) => {
|
||||
_handleDelete = (detail) => {
|
||||
let event = new CustomEvent("delete-notification", { detail });
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
@ -147,7 +147,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
return(
|
||||
<ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This is notification number " + this.state.count,
|
||||
})
|
||||
@ -158,7 +158,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
<br />
|
||||
<ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This is a dark notification",
|
||||
dark: true,
|
||||
@ -168,7 +168,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
Click for dark style notification
|
||||
</ButtonSecondaryFull>
|
||||
|
||||
<ButtonPrimaryFull onClick={this._deleteNotif}>
|
||||
<ButtonPrimaryFull onClick={this._handleDelete}>
|
||||
Click to clear notifications
|
||||
</ButtonPrimaryFull>
|
||||
)
|
||||
@ -183,7 +183,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
<br />
|
||||
<System.ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This disappears after 5 seconds",
|
||||
timeout: 5000,
|
||||
@ -193,7 +193,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
Click for disappearing notification
|
||||
</System.ButtonSecondaryFull>
|
||||
<br />
|
||||
<System.ButtonPrimaryFull onClick={this._deleteNotif}>
|
||||
<System.ButtonPrimaryFull onClick={this._handleDelete}>
|
||||
Click to clear notifications
|
||||
</System.ButtonPrimaryFull>
|
||||
<br />
|
||||
@ -209,7 +209,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
count: 0,
|
||||
};
|
||||
|
||||
_createNotif = (detail) => {
|
||||
_handleCreate = (detail) => {
|
||||
let event = new CustomEvent("create-notification", { detail });
|
||||
window.dispatchEvent(event);
|
||||
this.setState({ count: this.state.count + 1 });
|
||||
@ -219,7 +219,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
return(
|
||||
<ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This disappears after 5 seconds",
|
||||
timeout: 5000,
|
||||
@ -229,7 +229,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
Click for disappearing notification
|
||||
</System.ButtonSecondaryFull>
|
||||
|
||||
<ButtonPrimaryFull onClick={this._deleteNotif}>
|
||||
<ButtonPrimaryFull onClick={this._handleDelete}>
|
||||
Click to clear notifications
|
||||
</ButtonPrimaryFull>
|
||||
)
|
||||
@ -244,7 +244,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
<br />
|
||||
<System.ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This is an info notification",
|
||||
status: "INFO",
|
||||
@ -256,7 +256,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
<br />
|
||||
<System.ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This is a success notification",
|
||||
status: "SUCCESS",
|
||||
@ -268,7 +268,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
<br />
|
||||
<System.ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This is a warning notification",
|
||||
status: "WARNING",
|
||||
@ -280,7 +280,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
<br />
|
||||
<System.ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This is an error notification",
|
||||
status: "ERROR",
|
||||
@ -290,7 +290,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
Click for error style notification
|
||||
</System.ButtonSecondaryFull>
|
||||
<br />
|
||||
<System.ButtonPrimaryFull onClick={this._deleteNotif}>
|
||||
<System.ButtonPrimaryFull onClick={this._handleDelete}>
|
||||
Click to clear notifications
|
||||
</System.ButtonPrimaryFull>
|
||||
<br />
|
||||
@ -308,13 +308,13 @@ import { Notification } from 'slate-react-system';`}
|
||||
count: 0,
|
||||
};
|
||||
|
||||
_createNotif = (detail) => {
|
||||
_handleCreate = (detail) => {
|
||||
let event = new CustomEvent("create-notification", { detail });
|
||||
window.dispatchEvent(event);
|
||||
this.setState({ count: this.state.count + 1 });
|
||||
};
|
||||
|
||||
_deleteNotif = (detail) => {
|
||||
_handleDelete = (detail) => {
|
||||
let event = new CustomEvent("delete-notification", { detail });
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
@ -323,7 +323,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
return(
|
||||
<ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This is an info notification",
|
||||
status: "INFO",
|
||||
@ -335,7 +335,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
|
||||
<ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This is a success notification",
|
||||
status: "SUCCESS",
|
||||
@ -347,7 +347,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
|
||||
<ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This is a warning notification",
|
||||
status: "WARNING",
|
||||
@ -359,7 +359,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
|
||||
<ButtonSecondaryFull
|
||||
onClick={() =>
|
||||
this._createNotif({
|
||||
this._handleCreate({
|
||||
id: this.state.count,
|
||||
description: "This is an error notification",
|
||||
status: "ERROR",
|
||||
@ -369,7 +369,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
Click for error style notification
|
||||
</ButtonSecondaryFull>
|
||||
|
||||
<ButtonPrimaryFull onClick={this._deleteNotif}>
|
||||
<ButtonPrimaryFull onClick={this._handleDelete}>
|
||||
Click to clear notifications
|
||||
</ButtonPrimaryFull>
|
||||
)
|
||||
@ -395,7 +395,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
id: 1,
|
||||
a: "style",
|
||||
b: "Object",
|
||||
c: "{}",
|
||||
c: "{ bottom: 0, right: 0 }",
|
||||
d:
|
||||
"Style object used to style the notification list positioning on the page",
|
||||
},
|
||||
@ -436,7 +436,7 @@ import { Notification } from 'slate-react-system';`}
|
||||
b: ["string", "number"],
|
||||
c: "null",
|
||||
d:
|
||||
"Notification id, must be unique for simultaneously existing notifications or the latter will overwrite the former",
|
||||
"Notification id, must be unique for simultaneously existing notifications",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@ -472,45 +472,6 @@ import { Notification } from 'slate-react-system';`}
|
||||
}}
|
||||
/>
|
||||
</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: 1,
|
||||
a: (
|
||||
<span style={{ fontFamily: Constants.font.semiBold }}>
|
||||
id
|
||||
</span>
|
||||
),
|
||||
b: ["string", "number"],
|
||||
c: "null",
|
||||
d:
|
||||
"Notification id of the notification that is to be deleted",
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user