-
Notifications
You must be signed in to change notification settings - Fork 2.7k
/
ElevationPage.tsx
123 lines (118 loc) · 3.49 KB
/
ElevationPage.tsx
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
import * as React from 'react';
import { css } from 'office-ui-fabric-react';
import { Markdown, Table, IPageSectionProps } from '@uifabric/example-app-base/lib/index2';
import { IStylesPageProps, StylesAreaPage } from '../StylesAreaPage';
import { ElevationPageProps, depthUsage } from './ElevationPage.doc';
import * as styles from './ElevationPage.module.scss';
import { Platforms } from '../../../interfaces/Platforms';
const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/apps/fabric-website/src/pages/Styles/ElevationPage/docs';
export const ElevationPage: React.StatelessComponent<IStylesPageProps> = props => {
const { platform } = props;
return <StylesAreaPage {...props} {...ElevationPageProps[platform]} otherSections={_otherSections(platform) as IPageSectionProps[]} />;
};
function _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
switch (platform) {
case 'web':
return [
{
sectionName: 'Depth',
editUrl: `${baseUrl}/web/ElevationDepth.md`,
content: (
<>
<Markdown>
{require('!raw-loader!@uifabric/fabric-website/src/pages/Styles/ElevationPage/docs/web/ElevationDepth.md') as string}
</Markdown>
<div style={{ marginTop: 12 }}>{_renderDepthsTable()}</div>
</>
)
},
{
sectionName: 'Implementation',
editUrl: `${baseUrl}/web/ElevationImplementation.md`,
content: (
<Markdown>
{require('!raw-loader!@uifabric/fabric-website/src/pages/Styles/ElevationPage/docs/web/ElevationImplementation.md') as string}
</Markdown>
)
}
];
default:
return [
{
sectionName: 'Coming Soon',
content: 'Coming Soon'
}
];
}
}
function _renderDepthsTable() {
return (
<Table
columns={[
{
title: 'Level',
rowProperty: 'level',
percentWidth: 8
},
{
title: 'Example',
overflow: 'visible'
},
{
title: 'Usage',
rowProperty: 'usage',
percentWidth: 25
},
{
title: 'Core class'
},
{
title: 'React variable',
overflowX: 'auto'
}
]}
rows={[
{
level: '4'
},
{
level: '8'
},
{
level: '16'
},
{
level: '64'
}
]}
/* tslint:disable-next-line jsx-no-lambda */
formatter={(column, row) => {
const depth = depthUsage.filter(x => x.level === row.level)[0];
switch (column.title) {
case 'Core class':
return `ms-depth-${row.level}`;
case 'React variable':
return `Depths.depth${row.level}`;
case 'Usage':
return (
<ul className={styles.usageList}>
{depth.usage.map((use, index) => (
<li key={index} className={styles.usageListItem}>
{use}
</li>
))}
</ul>
);
case 'Example':
return (
<div className={css(styles.example, styles.compact, `ms-depth-${row.level}`)}>
<span className={styles.caption}>Depth {row.level}</span>
</div>
);
default:
return row[column.rowProperty];
}
}}
/>
);
}