/
Alert-UpdatingMessagePriority.json
59 lines (59 loc) · 6.45 KB
/
Alert-UpdatingMessagePriority.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
{
"public/index.html": {
"content": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n />\n <meta name=\"theme-color\" content=\"#000000\" />\n <link\n rel=\"stylesheet\"\n href=\"https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro\"\n />\n <link\n rel=\"stylesheet\"\n href=\"https://unpkg.com/react-md@{{RMD_VERSION}}/dist/css/react-md.teal-pink-200-light.min.css\"\n />\n <title>Alert Example - Updating Message Priority</title>\n </head>\n <body>\n <noscript>You need to enable JavaScript to run this app.</noscript>\n <div id=\"root\"></div>\n </body>\n</html>\n",
"isBinary": false
},
"src/index.tsx": {
"content": "import React from \"react\";\nimport { render } from \"react-dom\";\nimport { Configuration } from \"@react-md/layout\";\n\nimport Demo from \"./Demo\";\n\nconst App = () => (\n <Configuration>\n <Demo />\n </Configuration>\n);\n\nrender(<App />, document.getElementById(\"root\"));\n",
"isBinary": false
},
"src/styles.scss": {
"content": "@import \"variables\";\n@import \"~@react-md/alert/dist/mixins\";\n@import \"~@react-md/button/dist/mixins\";\n@import \"~@react-md/elevation/dist/mixins\";\n@import \"~@react-md/form/dist/mixins\";\n@import \"~@react-md/layout/dist/mixins\";\n@import \"~@react-md/states/dist/mixins\";\n@import \"~@react-md/theme/dist/mixins\";\n@import \"~@react-md/typography/dist/mixins\";\n@import \"~@react-md/utils/dist/mixins\";\n\n@include react-md-utils;\n",
"isBinary": false
},
"src/_variables.scss": {
"content": "@import \"~@react-md/theme/dist/color-palette\";\n\n$rmd-theme-light: true;\n$rmd-theme-primary: $rmd-teal-500;\n$rmd-theme-secondary: $rmd-pink-a-200;\n",
"isBinary": false
},
"package.json": {
"content": {
"title": "Alert Example - Updating Message Priority",
"description": "Example from https://react-md.dev/packages/alert/demos#updating-message-priority",
"main": "src/index.tsx",
"dependencies": {
"@react-md/alert": "{{RMD_VERSION}}",
"@react-md/button": "{{RMD_VERSION}}",
"@react-md/elevation": "{{RMD_VERSION}}",
"@react-md/form": "{{RMD_VERSION}}",
"@react-md/layout": "{{RMD_VERSION}}",
"@react-md/states": "{{RMD_VERSION}}",
"@react-md/theme": "{{RMD_VERSION}}",
"@react-md/typography": "{{RMD_VERSION}}",
"@react-md/utils": "{{RMD_VERSION}}",
"react": "latest",
"react-dom": "latest"
},
"devDependencies": {
"@types/jest": "latest",
"@types/node": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"node-sass": "latest",
"react-scripts": "latest",
"typescript": "latest"
},
"scripts": {
"start": "react-scripts start"
}
},
"isBinary": false
},
"src/Demo.tsx": {
"content": "import React, {\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useState,\n} from \"react\";\nimport {\n Message,\n MessagePriority,\n MessageQueue,\n useAddMessage,\n useQueue,\n} from \"@react-md/alert\";\nimport { Button } from \"@react-md/button\";\nimport { Fieldset, Form, Radio, useChoice } from \"@react-md/form\";\nimport { Text } from \"@react-md/typography\";\n\nimport styles from \"./UpdatingMessagePriority.module.scss\";\n\ninterface ExampleMessage\n extends Required<Pick<Message, \"messageId\" | \"messagePriority\">> {\n children: string;\n}\n\nconst PRIORITIES: MessagePriority[] = [\"next\", \"immediate\", \"replace\"];\n\nconst Demo: FC = () => {\n const addMessage = useAddMessage<ExampleMessage>();\n const [priority, handlePriorityChange] = useChoice<MessagePriority>(\"next\");\n const queue = useQueue<ExampleMessage>();\n const [running, setRunning] = useState(false);\n\n if (running && !queue.length) {\n setRunning(false);\n }\n\n const exampleNextFlow = useCallback(() => {\n addMessage({\n messageId: \"message-1\",\n children: \"First normal message\",\n messagePriority: \"normal\",\n });\n addMessage({\n messageId: \"message-2\",\n children: \"Second normal message\",\n messagePriority: \"normal\",\n });\n setRunning(true);\n }, [addMessage]);\n\n useEffect(() => {\n if (!running) {\n return;\n }\n\n const timeout = window.setTimeout(() => {\n addMessage({\n messageId: priority === \"replace\" ? \"message-1\" : \"message-3\",\n children: \"Incoming Message!\",\n messagePriority: priority,\n });\n }, 2000);\n\n return () => {\n window.clearTimeout(timeout);\n };\n\n // only want to run on running chagnes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [running]);\n\n return (\n <>\n <div className={styles.output}>\n <Text type=\"headline-6\" margin=\"bottom\">\n Message queue:\n </Text>\n {queue.map((message, i) => (\n // actually want to disable it since when the immediate flow is triggered, there will be two messageId\n // with \"message-1\" for a few milliseconds\n <pre key={i}>{JSON.stringify(message, null, 2)}</pre>\n ))}\n </div>\n <Form onSubmit={exampleNextFlow}>\n <Fieldset legend=\"Priority\">\n {PRIORITIES.map((p) => (\n <Radio\n key={p}\n id={`priority-${p}`}\n name=\"messagePriority\"\n label={`Example with \"${p}\" priority`}\n value={p}\n checked={p === priority}\n onChange={handlePriorityChange}\n />\n ))}\n </Fieldset>\n <Button\n id=\"update-message-priority-submit\"\n type=\"submit\"\n disabled={queue.length > 0}\n >\n Create message\n </Button>\n </Form>\n </>\n );\n};\n\nexport default (): ReactElement => (\n <MessageQueue<ExampleMessage> id=\"updating-message-priority\">\n <UpdatingMessagePriority />\n </MessageQueue>\n);\n",
"isBinary": false
},
"src/UpdatingMessagePriority.module.scss": {
"content": "@import \"~@react-md/elevation/dist/mixins\";\n@import \"~@react-md/utils/dist/mixins\";\n\n.output {\n @include rmd-elevation(4);\n @include rmd-utils-scroll;\n\n height: 25rem;\n margin-bottom: 2rem;\n padding: 1rem;\n}\n",
"isBinary": false
}
}