From a8033e120e23f3a25aeb22b6690c2f9801690417 Mon Sep 17 00:00:00 2001 From: Martina Date: Mon, 13 Jul 2020 21:28:18 -0700 Subject: [PATCH] global notifications refactor and code text refactor --- common/constants.js | 2 +- .../system/components/GlobalNotification.js | 108 +++ components/system/components/Notification.js | 128 ---- .../system/components/fragments/CodeText.js | 2 +- .../components/fragments/TableComponents.js | 11 + components/system/index.js | 6 +- .../system/modules/FilecoinBalancesList.js | 8 +- pages/experiences/filecoin-wallet-balances.js | 2 +- pages/system/card-tabs.js | 10 +- pages/system/checkboxes.js | 8 +- pages/system/datepicker.js | 35 +- pages/system/dropdowns.js | 20 +- pages/system/inputs.js | 22 +- pages/system/list-editor.js | 12 +- pages/system/notifications.js | 622 +++++++++++++----- pages/system/radios.js | 16 +- pages/system/tables.js | 36 +- pages/system/tabs.js | 10 +- pages/system/toggles.js | 14 +- pages/system/tooltips.js | 6 +- 20 files changed, 662 insertions(+), 416 deletions(-) create mode 100644 components/system/components/GlobalNotification.js delete mode 100644 components/system/components/Notification.js diff --git a/common/constants.js b/common/constants.js index 9f910569..ae15d8c2 100644 --- a/common/constants.js +++ b/common/constants.js @@ -48,4 +48,4 @@ export const theme = { ctaBackground: system.brand, pageBackground: system.foreground, pageText: system.black, -}; \ No newline at end of file +}; diff --git a/components/system/components/GlobalNotification.js b/components/system/components/GlobalNotification.js new file mode 100644 index 00000000..d56d0a77 --- /dev/null +++ b/components/system/components/GlobalNotification.js @@ -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 ( +
+ {this.state.order.map((id) => { + let notif = this.state.notifs[id]; + return ( +
+ +
+ ); + })} +
+ ); + } +} diff --git a/components/system/components/Notification.js b/components/system/components/Notification.js deleted file mode 100644 index f5cbf611..00000000 --- a/components/system/components/Notification.js +++ /dev/null @@ -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: ( - - ), - ERROR: ( - - ), - WARNING: ( - - ), - 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 ( -
- {ICON_MAP[this.props.status || "INFO"]} - - {this.props.onClose ? ( - - ) : null} -
- ); - } -} diff --git a/components/system/components/fragments/CodeText.js b/components/system/components/fragments/CodeText.js index 5ec5072c..0475d259 100644 --- a/components/system/components/fragments/CodeText.js +++ b/components/system/components/fragments/CodeText.js @@ -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}; `; diff --git a/components/system/components/fragments/TableComponents.js b/components/system/components/fragments/TableComponents.js index 9f88d561..9ad5d740 100644 --- a/components/system/components/fragments/TableComponents.js +++ b/components/system/components/fragments/TableComponents.js @@ -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) => {item}); + return text; + } + return {text}; +}; + 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": diff --git a/components/system/index.js b/components/system/index.js index 3c9d2ea4..b8744592 100644 --- a/components/system/index.js +++ b/components/system/index.js @@ -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, diff --git a/components/system/modules/FilecoinBalancesList.js b/components/system/modules/FilecoinBalancesList.js index 1b9e5905..16a01995 100644 --- a/components/system/modules/FilecoinBalancesList.js +++ b/components/system/modules/FilecoinBalancesList.js @@ -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, diff --git a/pages/experiences/filecoin-wallet-balances.js b/pages/experiences/filecoin-wallet-balances.js index 2d8a75dc..0f10d27b 100644 --- a/pages/experiences/filecoin-wallet-balances.js +++ b/pages/experiences/filecoin-wallet-balances.js @@ -38,7 +38,7 @@ export default class SystemPageFilecoinWalletBalances extends React.Component { name: "Wallet B", type: "secp256k1", }, - balance: 500, + balance: 5000, }, ]; diff --git a/pages/system/card-tabs.js b/pages/system/card-tabs.js index 1b9efe8b..f5bd2e30 100644 --- a/pages/system/card-tabs.js +++ b/pages/system/card-tabs.js @@ -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 ), - b: function, + b: "function", c: "null", d: "Function called upon an onChange event", }, @@ -172,7 +172,7 @@ class ExampleTwo extends React.Component { value ), - b: boolean, + 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 ), - b: Array, + 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: string, + b: "string", c: "null", d: "Input name", }, diff --git a/pages/system/checkboxes.js b/pages/system/checkboxes.js index 58dd07ac..dfa60d13 100644 --- a/pages/system/checkboxes.js +++ b/pages/system/checkboxes.js @@ -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 ), - b: function, + b: "function", c: "null", d: "Function called upon an onChange event", }, @@ -161,7 +161,7 @@ class ExampleTwo extends React.Component { value ), - b: boolean, + 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: string, + b: "string", c: "null", d: "Input name", }, diff --git a/pages/system/datepicker.js b/pages/system/datepicker.js index a362ee67..ff5155aa 100644 --- a/pages/system/datepicker.js +++ b/pages/system/datepicker.js @@ -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 ), - b: function, + b: "function", c: "null", d: "Function called upon an onChange event", }, @@ -223,12 +223,7 @@ const weekdaysOnly = (date) => { value ), - b: ( -
- string - Date -
- ), + 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: string, + b: "string", c: "null", d: "Input name", }, { id: 4, a: "label", - b: string, + b: "string", c: "null", d: "Label text", }, { id: 5, a: "description", - b: string, + b: "string", c: "null", d: "Description text", }, { id: 6, a: "tooltip", - b: string, + b: "string", c: "null", d: "Tooltip text", }, { id: 7, a: "min", - b: ( -
- string - Date -
- ), + b: ["string", "Date"], c: "null", d: "Earliest date allowed. String must be in yyyy-mm-dd form", }, { id: 8, a: "max", - b: ( -
- string - Date -
- ), + b: ["string", "Date"], c: "null", d: "Latest date allowed. String must be in yyyy-mm-dd form", }, { id: 9, a: "isDisabled", - b: function, + 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", diff --git a/pages/system/dropdowns.js b/pages/system/dropdowns.js index 42aa69b1..5a22e3ef 100644 --- a/pages/system/dropdowns.js +++ b/pages/system/dropdowns.js @@ -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 ), - b: Array, + 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 ), - b: function, + b: "function", c: "null", d: "Function called upon an onChange event", }, @@ -254,7 +254,7 @@ class ExampleTwo extends React.Component { value ), - b: string, + 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: string, + b: "string", c: "null", d: "Input name", }, { id: 5, a: "label", - b: string, + b: "string", c: "null", d: "Label text", }, { id: 6, a: "description", - b: string, + b: "string", c: "null", d: "Description text", }, { id: 7, a: "tooltip", - b: string, + b: "string", c: "null", d: "Tooltip text", }, { id: 8, a: "full", - b: boolean, + b: "boolean", c: "false", d: "Sets width to 100% if true", }, { id: 9, a: "category", - b: string, + b: "string", c: "null", d: "Category text", }, diff --git a/pages/system/inputs.js b/pages/system/inputs.js index a10a8ca4..ed83c2b1 100644 --- a/pages/system/inputs.js +++ b/pages/system/inputs.js @@ -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 ), - b: function, + b: "function", c: "null", d: "Function called upon an onChange event", }, @@ -351,7 +351,7 @@ class ExampleError extends React.Component { value ), - b: string, + 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: string, + b: "string", c: "null", d: "Input name", }, { id: 4, a: "label", - b: string, + b: "string", c: "null", d: "Label text", }, { id: 5, a: "description", - b: string, + b: "string", c: "null", d: "Description text", }, { id: 6, a: "tooltip", - b: string, + b: "string", c: "null", d: "Tooltip text", }, { id: 7, a: "max", - b: int, + b: "int", c: "null", d: "Max number of input characters", }, { id: 8, a: "validation", - b: string, + b: "string", c: "null", d: "Validation style. Use: SUCCESS, WARNING or ERROR", }, { id: 9, a: "icon", - b: SVG, + 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: function, + b: "function", c: "null", d: "Function called when the enter key is pressed and when the icon (if present) is clicked", diff --git a/pages/system/list-editor.js b/pages/system/list-editor.js index c97acd3e..5a5239ff 100644 --- a/pages/system/list-editor.js +++ b/pages/system/list-editor.js @@ -123,7 +123,7 @@ import { ListEditor } from 'slate-react-system';`} onChange ), - b: function, + b: "function", c: "null", d: "Function called upon an onChange event", }, @@ -134,7 +134,7 @@ import { ListEditor } from 'slate-react-system';`} options ), - b: Array, + 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: string, + b: "string", c: "null", d: "Input name", }, { id: 3, a: "label", - b: string, + b: "string", c: "null", d: "Label text", }, { id: 4, a: "description", - b: string, + b: "string", c: "null", d: "Description text", }, { id: 5, a: "tooltip", - b: string, + b: "string", c: "null", d: "Tooltip text", }, diff --git a/pages/system/notifications.js b/pages/system/notifications.js index abb83b3a..35eed345 100644 --- a/pages/system/notifications.js +++ b/pages/system/notifications.js @@ -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 {
Import React and the Notification Component.
-
{`import * as React from 'react'; import { Notification } from 'slate-react-system';`}

- Notification with status +
+ Usage

- + + 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. +
- + + Use style to specify placement of + the fixed positioning notification list +
- -
- + + {`function App() { + return ( + + + {this.props.children} + + ) +}`} + +

- Declare the Notification component with a status. +
+ Notification +
+
+ + this._createNotif({ + id: this.state.count, + description: "This is a regular notification", + }) + } + > + Click for notification + +
+ + this._createNotif({ + id: this.state.count, + description: "This is a dark notification", + dark: true, + }) + } + > + Click for dark style notification + +
+ { + for (let i = 0; i <= this.state.count; i++) { + this._deleteNotif({ i }); + } + }} + > + Click to clear notifications + +
+ + A notification will only appear once you trigger it by creating a + custom event with the title{" "} + "create-notification". It can be + removed with a custom event entitled{" "} + "delete-notification". + +
+ + Multiple stacked notifications can be created using a single + Notification component.{" "} + Each co-existing notification must have a unique id. +
{`class ExampleOne extends React.Component { - render() { - return( - -
- -
- -
- - ) - } -}`} - -
-
-
- Notification with content -
-
- - doge - You can style the description how you like and even add photos or - other components. - - } - /> -
-
- - Declare the Notification component with components in the description - -
- - {`let imgLink= "https://upload.wikimedia.org/wikipedia/en/5/5f/Original_Doge_meme.jpg" - -class ExampleTwo extends React.Component { - render() { - return( - - doge - You can style the description how you like and - even add photos or other components. - - } - /> - ) - } -}`} - -
-
-
- Notification with onClose function and timer -
-
- {this.state.exampleOne ? ( - this._handleChange("exampleOne")} - /> - ) : ( - - This notification disappeared after 1 minute. Refresh the page to - see it. - - )} -
-
- - Declare the Notification component with an onClose function which is - triggered when the x is clicked. - -
- - You can include an interval in milliseconds, after which onClose is - automatically called. If the user mouses over the notification, the - timer restarts. - -
- - {`class exampleOne extends React.Component { - state = { exampleOne: true } + state = { + count: 0, + }; - render() { - return( - {this.state.exampleOne ? ( - this._handleChange("exampleOne")} - /> - ) : ( -
This notification disappeared after 5 minutes
- )} - ) - } + _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( + + this._createNotif({ + id: this.state.count, + description: "This is notification number " + this.state.count, + }) + } + > + Click for notification + +
+ + this._createNotif({ + id: this.state.count, + description: "This is a dark notification", + dark: true, + }) + } + > + Click for dark style notification + + + { + for (let i = 0; i <= this.state.count; i++) { + this._deleteNotif({ i }); + } + }} + > + Click to clear notifications + + ) + } }`}


+ Notification with timeout +
+
+ + this._createNotif({ + id: this.state.count, + description: "This disappears after 5 seconds", + timeout: 5000, + }) + } + > + Click for disappearing notification + +
+ { + for (let i = 0; i <= this.state.count; i++) { + this._deleteNotif({ i }); + } + }} + > + Click to clear notifications + +
+ + You can declare the Notification component with a{" "} + timeout (in milliseconds) after + which it will automatically disappear. + +
+ + {`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( + + this._createNotif({ + id: this.state.count, + description: "This disappears after 5 seconds", + timeout: 5000, + }) + } + > + Click for disappearing notification + + + { + for (let i = 0; i <= this.state.count; i++) { + this._deleteNotif({ i }); + } + }} + > + Click to clear notifications + + ) + } +}`} + +
+
+
+ Notification with status +
+
+ + this._createNotif({ + id: this.state.count, + description: "This is an info notification", + status: "INFO", + }) + } + > + Click for info style notification + +
+ + this._createNotif({ + id: this.state.count, + description: "This is a success notification", + status: "SUCCESS", + }) + } + > + Click for success style notification + +
+ + this._createNotif({ + id: this.state.count, + description: "This is a warning notification", + status: "WARNING", + }) + } + > + Click for warning style notification + +
+ + this._createNotif({ + id: this.state.count, + description: "This is an error notification", + status: "ERROR", + }) + } + > + Click for error style notification + +
+ { + for (let i = 0; i <= this.state.count; i++) { + this._deleteNotif({ i }); + } + }} + > + Click to clear notifications + +
+
+ + Declare the Notification component with a{" "} + status to style it accordingly. + This is overridden if dark is set + to true. + +
+ + {`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( + + this._createNotif({ + id: this.state.count, + description: "This is an info notification", + status: "INFO", + }) + } + > + Click for info style notification + + + + this._createNotif({ + id: this.state.count, + description: "This is a success notification", + status: "SUCCESS", + }) + } + > + Click for success style notification + + + + this._createNotif({ + id: this.state.count, + description: "This is a warning notification", + status: "WARNING", + }) + } + > + Click for warning style notification + + + + this._createNotif({ + id: this.state.count, + description: "This is an error notification", + status: "ERROR", + }) + } + > + Click for error style notification + + + { + for (let i = 0; i <= this.state.count; i++) { + this._deleteNotif({ i }); + } + }} + > + Click to clear notifications + + ) + } +}`} + +
+
Accepted React Properties

@@ -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: function, + a: "style", + b: "Object", + c: "{}", + d: + "Style object used to style the notification list positioning on the page", + }, + ], + }} + /> + +
+
+
+ + Accepted Create Notification Properties + +
+
+ + Note that these properties are passed through a custom event rather + than as react properties. + +
+ + + id + + ), + 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: string, - 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: int, + 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: string, + b: "string", c: "null", d: "Label text", }, { id: 5, a: "description", - b: ( -
- string - Component -
- ), + b: "string", c: "null", d: "Description text", }, + ], + }} + /> + +
+
+
+ + Accepted Delete Notification Properties + +
+
+ + Note that these properties are passed through a custom event rather + than as react properties. + +
+ + string, + id: 1, + a: ( + + id + + ), + b: ["string", "number"], c: "null", - d: "Tooltip text", + d: + "Notification id of the notification that is to be deleted", }, ], }} diff --git a/pages/system/radios.js b/pages/system/radios.js index b075f60b..669013bc 100644 --- a/pages/system/radios.js +++ b/pages/system/radios.js @@ -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 ), - b: function, + b: "function", c: "null", d: "Function called upon an onChange event", }, @@ -180,7 +180,7 @@ import { RadioGroup } from 'slate-react-system';`} selected ), - b: boolean, + 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 ), - b: Array, + 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: string, + b: "string", c: "null", d: "Input name", }, { id: 5, a: "label", - b: string, + b: "string", c: "null", d: "Label text", }, { id: 6, a: "description", - b: string, + b: "string", c: "null", d: "Description text", }, { id: 7, a: "tooltip", - b: string, + b: "string", c: "null", d: "Tooltip text", }, diff --git a/pages/system/tables.js b/pages/system/tables.js index e19ca7e0..71035d4b 100644 --- a/pages/system/tables.js +++ b/pages/system/tables.js @@ -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: string, + b: "string", c: "null", d: "Column key value", }, { id: 2, a: "id", - b: number, + b: "number", c: "null", d: "Row ID value", }, { id: 3, a: "name", - b: string, + b: "string", c: "null", d: "Name of the column", }, { id: 4, a: "text", - b: string, + b: "string", c: "null", d: "Table content text", }, { id: 5, a: "data", - b: string, + b: "string", c: "null", d: "Table content data", }, { id: 6, a: "tooltip", - b: string, + b: "string", c: "null", d: "If not null, a tooltip will be visible", }, { id: 7, a: "copyable", - b: boolean, + b: "boolean", c: "false", d: "If true, a copyable icon will be visible", }, { id: 8, a: "type", - b: string, + b: "string", c: "null", d: "Use FILE_LINK to add a linkable column", }, { id: 9, a: "width", - b: number, + b: "number", c: "null", d: "Width of the column", }, { id: 10, a: "action", - b: string, + b: "string", c: "null", d: "Row action", }, { id: 11, a: "hideLabel", - b: boolean, + b: "boolean", c: "false", d: "If true, column label will be hidden", }, { id: 12, a: "children", - b: string, + b: "string", c: "null", d: "Row child value", }, { id: 13, a: "onNavigateTo", - b: string, + b: "string", c: "null", d: "onNavigateTo function binding", }, { id: 14, a: "onAction", - b: string, + b: "string", c: "null", d: "onAction function binding", }, { id: 15, a: "onChange", - b: string, + b: "string", c: "null", d: "onChange function binding", }, { id: 16, a: "selectedRowId", - b: number, + 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: [ diff --git a/pages/system/tabs.js b/pages/system/tabs.js index 3e8b8b07..d2f0ab04 100644 --- a/pages/system/tabs.js +++ b/pages/system/tabs.js @@ -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 ), - b: function, + b: "function", c: "null", d: "Function called upon an onChange event", }, @@ -178,7 +178,7 @@ class ExampleTwo extends React.Component { value ), - b: boolean, + 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 ), - b: Array, + 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: string, + b: "string", c: "null", d: "Input name", }, diff --git a/pages/system/toggles.js b/pages/system/toggles.js index a5547d14..aa0e6012 100644 --- a/pages/system/toggles.js +++ b/pages/system/toggles.js @@ -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 ), - b: function, + b: "function", c: "null", d: "Function called upon an onChange event", }, @@ -141,7 +141,7 @@ class ExampleTwo extends React.Component { active ), - b: boolean, + 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: string, + b: "string", c: "null", d: "Input name", }, { id: 4, a: "label", - b: string, + b: "string", c: "null", d: "Label text", }, { id: 5, a: "description", - b: string, + b: "string", c: "null", d: "Description text", }, { id: 6, a: "tooltip", - b: string, + b: "string", c: "null", d: "Tooltip text", }, diff --git a/pages/system/tooltips.js b/pages/system/tooltips.js index ad0f3942..dc62e585 100644 --- a/pages/system/tooltips.js +++ b/pages/system/tooltips.js @@ -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: string, + b: "string", c: "null", d: "Output text on the tooltip", }, { id: 2, a: "height", - b: number, + b: "number", c: "24px", d: "Height of the tooltip", },