Skip to content

Commit 3a6de26

Browse files
satya164satya164
committed
Show resulting action in playground
1 parent 786eb8a commit 3a6de26

File tree

3 files changed

+89
-57
lines changed

3 files changed

+89
-57
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"@docusaurus/plugin-google-analytics": "^2.0.0-alpha.37",
1717
"@docusaurus/preset-classic": "2.0.0-alpha.43",
1818
"@octokit/graphql": "^4.5.1",
19-
"@react-navigation/core": "^5.13.1",
19+
"@react-navigation/core": "^5.14.2",
2020
"classnames": "^2.2.6",
2121
"escape-html": "^1.0.3",
2222
"mkdirp": "^1.0.3",

‎src/components/LinkingTester.js

Lines changed: 79 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { getStateFromPath } from '@react-navigation/core';
2+
import { getActionFromState, getStateFromPath } from '@react-navigation/core';
33
import escape from 'escape-html';
44
import Editor from 'react-simple-code-editor';
55
import Highlight, { defaultProps } from 'prism-react-renderer';
@@ -10,6 +10,24 @@ import RouteMap from './RouteMap';
1010

1111
const parse = (value) => eval(`(function() { return ${value}; }())`);
1212

13+
function Code({ code, theme, language }) {
14+
return (
15+
<Highlight {...defaultProps} code={code} theme={theme} language={language}>
16+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
17+
<pre className={className} style={{ ...style, ...styles.json }}>
18+
{tokens.map((line, i) => (
19+
<div {...getLineProps({ line, key: i })}>
20+
{line.map((token, key) => (
21+
<span {...getTokenProps({ token, key })} />
22+
))}
23+
</div>
24+
))}
25+
</pre>
26+
)}
27+
</Highlight>
28+
);
29+
}
30+
1331
export default function LinkingTester() {
1432
const { isDarkTheme } = React.useContext(ThemeContext);
1533
const theme = isDarkTheme ? dracula : github;
@@ -38,12 +56,13 @@ export default function LinkingTester() {
3856

3957
const [path, setPath] = React.useState('/user/@vergil/edit');
4058
const [config, setConfig] = React.useState(() => parse(rawConfig));
41-
const [showJSON, setShowJSON] = React.useState(false);
59+
const [pane, setPane] = React.useState('chart');
4260

43-
let state;
61+
let state, action;
4462

4563
try {
4664
state = getStateFromPath(path.replace(/(^\w+:|^)\/\//, ''), config);
65+
action = getActionFromState(state, config);
4766
} catch (e) {
4867
// Ignore
4968
}
@@ -88,35 +107,51 @@ export default function LinkingTester() {
88107
style={{ ...styles.code, ...styles.editor }}
89108
/>
90109
<div style={styles.preview}>
91-
<button
92-
type="button"
93-
style={styles.button}
94-
onClick={() => setShowJSON((show) => !show)}
95-
>
96-
{showJSON ? 'Chart' : 'JSON'}
97-
</button>
98-
{showJSON ? (
99-
<Highlight
100-
{...defaultProps}
110+
<div style={styles.toggles}>
111+
<button
112+
type="button"
113+
style={styles.button}
114+
onClick={() => setPane('chart')}
115+
>
116+
Chart
117+
</button>
118+
<button
119+
type="button"
120+
style={styles.button}
121+
onClick={() => setPane('state')}
122+
>
123+
State
124+
</button>
125+
<button
126+
type="button"
127+
style={styles.button}
128+
onClick={() => setPane('action')}
129+
>
130+
Action
131+
</button>
132+
</div>
133+
{pane === 'state' ? (
134+
<Code
135+
theme={theme}
101136
code={JSON.stringify(state, null, 2) || ''}
137+
language="json"
138+
/>
139+
) : pane === 'action' ? (
140+
<Code
102141
theme={theme}
142+
code={JSON.stringify(action, null, 2) || ''}
103143
language="json"
104-
>
105-
{({ className, style, tokens, getLineProps, getTokenProps }) => (
106-
<pre className={className} style={{ ...style, ...styles.json }}>
107-
{tokens.map((line, i) => (
108-
<div {...getLineProps({ line, key: i })}>
109-
{line.map((token, key) => (
110-
<span {...getTokenProps({ token, key })} />
111-
))}
112-
</div>
113-
))}
114-
</pre>
115-
)}
116-
</Highlight>
117-
) : state ? (
118-
<RouteMap routes={state.routes} />
119-
) : <p style={styles.error}>Failed to parse the path. Make sure that the path matches the patterns specified in the config.</p>}
144+
/>
145+
) : pane === 'chart' ? (
146+
state ? (
147+
<RouteMap routes={state.routes} />
148+
) : (
149+
<p style={styles.error}>
150+
Failed to parse the path. Make sure that the path matches the
151+
patterns specified in the config.
152+
</p>
153+
)
154+
) : null}
120155
</div>
121156
</>
122157
);
@@ -145,26 +180,31 @@ const styles = {
145180
position: 'relative',
146181
border: '1px solid var(--ifm-contents-border-color)',
147182
borderRadius: 'var(--ifm-pre-border-radius)',
148-
minHeight: 70
183+
minHeight: 70,
149184
},
150185
json: {
151186
margin: 0,
152187
fontFamily: 'var(--ifm-font-family-monospace)',
153188
fontSize: 'var(--ifm-code-font-size)',
154189
borderRadius: 'var(--ifm-pre-border-radius)',
155190
padding: 'var(--ifm-pre-padding)',
156-
minHeight: 70
191+
minHeight: 70,
157192
},
158-
button: {
193+
toggles: {
159194
position: 'absolute',
195+
flexDirection: 'row',
160196
right: 0,
161-
border: '1px solid var(--ifm-contents-border-color)',
162-
borderRadius: '0 var(--ifm-pre-border-radius)',
163-
borderRight: 0,
164-
borderTop: 0,
197+
top: 0,
198+
borderBottom: '1px solid var(--ifm-contents-border-color)',
199+
},
200+
button: {
201+
border: 0,
202+
borderLeft: '1px solid var(--ifm-contents-border-color)',
203+
borderRadius: 0,
165204
cursor: 'pointer',
166-
display: 'block',
205+
display: 'inline-flex',
167206
fontSize: 12,
207+
margin: 0,
168208
padding: '4px 8px',
169209
color: 'inherit',
170210
background: 'none',
@@ -173,6 +213,6 @@ const styles = {
173213
},
174214
error: {
175215
margin: 24,
176-
color: '#A12027'
177-
}
216+
color: '#A12027',
217+
},
178218
};

‎yarn.lock

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1198,22 +1198,21 @@
11981198
dependencies:
11991199
"@types/node" ">= 8"
12001200

1201-
"@react-navigation/core@^5.13.1":
1202-
version "5.13.1"
1203-
resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.13.1.tgz#0d7047cea23aa4542d23c6bce38fdd723e6bf7fa"
1204-
integrity sha512-BkOqQyevlbcDFthZXGZ3AtIYGCwZHlY625PpXqH80Drh7WrnwZ2ExgGo8ULQGk2nyg4imr3T6lYR8dRkln+P2A==
1201+
"@react-navigation/core@^5.14.2":
1202+
version "5.14.2"
1203+
resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.14.2.tgz#973c4d63b934bf4eb5b0a933dc73b79298d0ce6b"
1204+
integrity sha512-gmEGo6Fr0ktg+4Ao5ogRAVWtSrCm2qQkn7GlQSe3hxDaTLVrlS3K30SAQHs88j11I7qtaFaMiFD0VN7F1gWXCw==
12051205
dependencies:
1206-
"@react-navigation/routers" "^5.5.1"
1206+
"@react-navigation/routers" "^5.6.2"
12071207
escape-string-regexp "^4.0.0"
12081208
nanoid "^3.1.15"
12091209
query-string "^6.13.6"
12101210
react-is "^16.13.0"
1211-
use-subscription "^1.5.0"
12121211

1213-
"@react-navigation/routers@^5.5.1":
1214-
version "5.5.1"
1215-
resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-5.5.1.tgz#ece34180e0734e453a7f30dbeeaf3856f25afa00"
1216-
integrity sha512-Unn2T5+xnolyGzEhiuFnHEGfgvh7+1OJ5KzBY7T65e4gHWT7E1CO8unRbDxRI0KYkXflmRPCfuDjobVTj5xepw==
1212+
"@react-navigation/routers@^5.6.2":
1213+
version "5.6.2"
1214+
resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-5.6.2.tgz#accc008c3b777f74d998e16cb2ea8e4c1fe8d9aa"
1215+
integrity sha512-XBcDKXS5s4MaHFufN44LtbXqFDH/nUHfHjbwG85fP3k772oRyPRgbnUb2mbw5MFGqORla9T7uymR6Gh6uwIwVw==
12171216
dependencies:
12181217
nanoid "^3.1.15"
12191218

@@ -8963,13 +8962,6 @@ url@^0.11.0:
89638962
punycode "1.3.2"
89648963
querystring "0.2.0"
89658964

8966-
use-subscription@^1.5.0:
8967-
version "1.5.0"
8968-
resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.0.tgz#0df66fdf97b9a340147ad72f76fac1db6f56d240"
8969-
integrity sha512-/FVRiB2I7NDjzWoNBYPt6YkkvleMm/lFtxj1hH6nX2TVrJ/5UTbovw9OE1efv2Zl0HoAYuTjM7zHd9OsABn5sg==
8970-
dependencies:
8971-
object-assign "^4.1.1"
8972-
89738965
use@^3.1.0:
89748966
version "3.1.1"
89758967
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

0 commit comments

Comments
 (0)