Skip to content

Commit 6be3a21

Browse files
rvsiarvsia
committed
Update codeExample heading and url to github
1 parent 92118ea commit 6be3a21

File tree

1 file changed

+56
-33
lines changed

1 file changed

+56
-33
lines changed

‎packages/react-renderer-demo/src/components/code-example.js

Lines changed: 56 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react/prop-types */
12
import React, { Fragment, useEffect, useState, useRef } from 'react';
23
import Grid from '@material-ui/core/Grid';
34
import { makeStyles } from '@material-ui/core/styles';
@@ -16,10 +17,55 @@ import IconButton from '@material-ui/core/IconButton';
1617
import { getParameters } from 'codesandbox/lib/api/define';
1718
import Tooltip from '@material-ui/core/Tooltip';
1819
import dynamic from 'next/dynamic';
20+
import { useRouter } from 'next/router';
1921

2022
import GhIcon from './common/gh-svg-icon';
2123
import CodesandboxIcon from './common/code-sandbox-svg-icon';
2224
import CodeEditor from './code-editor';
25+
import { headerToId } from '../helpers/list-of-contents';
26+
import ShareButton from './mdx/share-button';
27+
28+
const useHeadingStyles = makeStyles((theme) => ({
29+
anchor: {
30+
textDecoration: 'none',
31+
color: 'inherit',
32+
fontWeight: 'inherit'
33+
},
34+
wrapper: {
35+
flexGrow: 1,
36+
display: 'flex'
37+
},
38+
heading: {
39+
paddingTop: 4,
40+
fontSize: theme.typography.pxToRem(20),
41+
fontWeight: theme.typography.fontWeightRegular,
42+
display: 'flex',
43+
alignItems: 'center',
44+
'& button': {
45+
visibility: 'hidden'
46+
},
47+
'&:hover button': {
48+
visibility: 'initial'
49+
}
50+
}
51+
}));
52+
53+
export const Heading = ({ level, children, component }) => {
54+
const router = useRouter();
55+
const classes = useHeadingStyles();
56+
const id = headerToId(children);
57+
const path = `${router.asPath}#${id}`;
58+
return (
59+
<div id={id} className={classes.wrapper} data-scroll="true">
60+
<Typography id={`heading-${id}`} className={classes.heading} variant={`h${level}`} component={component}>
61+
<a href={path} className={classes.anchor} data-mdlink="md-heading">
62+
{children}
63+
<ShareButton path={path} />
64+
</a>
65+
</Typography>
66+
</div>
67+
);
68+
};
2369

2470
const useStyles = makeStyles((theme) => ({
2571
container: {
@@ -36,17 +82,6 @@ const useStyles = makeStyles((theme) => ({
3682
componentPanel: {
3783
padding: 16
3884
},
39-
heading: {
40-
fontSize: theme.typography.pxToRem(20),
41-
fontWeight: theme.typography.fontWeightRegular,
42-
flexGrow: 1,
43-
display: 'flex',
44-
alignItems: 'center'
45-
},
46-
secondaryHeading: {
47-
fontSize: theme.typography.pxToRem(15),
48-
color: theme.palette.text.secondary
49-
},
5085
expansionPanel: {
5186
border: 'none',
5287
boxShadow: 'none',
@@ -55,20 +90,10 @@ const useStyles = makeStyles((theme) => ({
5590
},
5691
expansionPanelSummary: {
5792
padding: 0
58-
},
59-
pf4: {
60-
padding: 32,
61-
'& form': {
62-
width: '100%'
63-
}
6493
}
6594
}));
6695

67-
/**
68-
* Generates html markup for the sandbox
69-
* @param {String} type either MUI or PF4
70-
*/
71-
const generateIndex = (type) => `<!DOCTYPE html>
96+
const index = `<!DOCTYPE html>
7297
<html lang="en">
7398
<head>
7499
<meta charset="utf-8" />
@@ -92,12 +117,12 @@ const generateIndex = (type) => `<!DOCTYPE html>
92117
</html>
93118
`;
94119

95-
const getPayload = (type, code, sourceFiles = {}) =>
120+
const getPayload = (code, sourceFiles = {}) =>
96121
getParameters({
97122
files: {
98123
...sourceFiles,
99124
'public/index.html': {
100-
content: generateIndex(type)
125+
content: index
101126
},
102127
'package.json': {
103128
content: {
@@ -135,7 +160,7 @@ const getPayload = (type, code, sourceFiles = {}) =>
135160
}
136161
});
137162

138-
const CodeExample = ({ source, mode, mapper }) => {
163+
const CodeExample = ({ source, mode }) => {
139164
const [name, setName] = useState('');
140165
const [codeSource, setCodeSource] = useState('');
141166
const { current: Component } = useRef(
@@ -171,21 +196,21 @@ const CodeExample = ({ source, mode, mapper }) => {
171196
}
172197
>
173198
{Component && (
174-
<Typography className={classes.heading} component="h4" variant="h3">
199+
<Heading component="h3" level="5">
175200
{name}
176-
</Typography>
201+
</Heading>
177202
)}
178203
<Box display="flex">
179204
<form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank">
180-
<input type="hidden" name="parameters" value={getPayload(mapper, codeSource, sourceFiles)} />
205+
<input type="hidden" name="parameters" value={getPayload(codeSource, sourceFiles)} />
181206
<Tooltip title="Edit in codesandbox">
182207
<IconButton disableFocusRipple type="submit" onClick={(event) => event.stopPropagation()}>
183208
<CodesandboxIcon />
184209
</IconButton>
185210
</Tooltip>
186211
</form>
187212
<Link
188-
href={`https://github.com/data-driven-forms/react-forms/tree/master/packages/react-renderer-demo/src/app/examples/${source}.js`}
213+
href={`https://github.com/data-driven-forms/react-forms/tree/master/packages/react-renderer-demo/src/examples/${source}.js`}
189214
target="_blank"
190215
rel="noopener noreferrer"
191216
onClick={(event) => event.stopPropagation()}
@@ -237,13 +262,11 @@ const CodeExample = ({ source, mode, mapper }) => {
237262

238263
CodeExample.propTypes = {
239264
source: PropTypes.string.isRequired,
240-
mode: PropTypes.oneOf(['code', 'preview']),
241-
mapper: PropTypes.oneOf(['pf4', 'mui'])
265+
mode: PropTypes.oneOf(['code', 'preview'])
242266
};
243267

244268
CodeExample.defaultProps = {
245-
mode: 'code',
246-
mapper: 'pf4'
269+
mode: 'code'
247270
};
248271

249272
export default CodeExample;

0 commit comments

Comments
 (0)