-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
ApiDocs.js
132 lines (121 loc) · 3.66 KB
/
ApiDocs.js
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import PropTypes from 'prop-types';
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
const PrimaryHeading = styled(Typography)(({ theme }) => ({
fontSize: theme.typography.pxToRem(15),
flexBasis: '33.33%',
flexShrink: 0,
direction: 'ltr',
lineHeight: 1.4,
display: 'inline-block',
fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
WebkitFontSmoothing: 'subpixel-antialiased',
}));
const SecondaryHeading = styled(Typography)(({ theme }) => ({
fontSize: theme.typography.pxToRem(15),
color: theme.palette.text.secondary,
'& code': {
color: theme.palette.secondary.main,
},
[theme.breakpoints.down('sm')]: {
display: 'none',
},
}));
const PlanIcon = ({ plan }) => {
let href;
let title;
switch (plan) {
case 'pro':
href = 'https://mui.com/x/introduction/licensing/#pro-plan';
title = 'Pro plan';
break;
case 'premium':
href = 'https://mui.com/x/introduction/licensing/#premium-plan';
title = 'Premium plan';
break;
default: {
return null;
}
}
return (
<a href={href}>
<span className={`plan-${plan}`} title={title} />
</a>
);
};
PlanIcon.propTypes = {
plan: PropTypes.string,
};
const ApiProperty = ({ index, property, plan }) => {
return (
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`api-property-${index}-content`}
id={`api-property-${index}-header`}
>
<PrimaryHeading>
<React.Fragment>
{/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
{`${property.name}()`}
<PlanIcon plan={plan} />
</React.Fragment>
</PrimaryHeading>
<SecondaryHeading dangerouslySetInnerHTML={{ __html: property.description }} />
</AccordionSummary>
<AccordionDetails sx={{ display: 'block' }}>
{/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
<Typography variant="subtitle2">Signature:</Typography>
<HighlightedCode
code={`${property.name}: ${property.type}`}
language="tsx"
sx={{
'& pre': {
mb: 1,
},
}}
/>
</AccordionDetails>
</Accordion>
);
};
ApiProperty.propTypes = {
index: PropTypes.number.isRequired,
plan: PropTypes.string,
property: PropTypes.shape({
description: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
}).isRequired,
};
function ApiDocs(props) {
const { api, proApi = null, premiumApi = null } = props;
return (
<Box sx={{ width: '100%' }}>
{api.properties.map((property, index) => (
<ApiProperty key={index} property={property} index={index} />
))}
{proApi &&
proApi.properties.map((property, index) => (
<ApiProperty key={index} property={property} index={index} plan="pro" />
))}
{premiumApi &&
premiumApi.properties.map((property, index) => (
<ApiProperty key={index} property={property} index={index} plan="premium" />
))}
</Box>
);
}
ApiDocs.propTypes = {
api: PropTypes.object.isRequired,
premiumApi: PropTypes.object,
proApi: PropTypes.object,
};
export default ApiDocs;