-
Notifications
You must be signed in to change notification settings - Fork 2.7k
/
ButtonPage.tsx
94 lines (86 loc) · 2.95 KB
/
ButtonPage.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
import * as React from 'react';
import { Checkbox } from 'office-ui-fabric-react';
import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage';
import { ButtonPageProps } from './ButtonPage.doc';
import * as exampleStylesImport from 'office-ui-fabric-react/lib/common/_exampleStyles.scss';
import { Platforms } from '../../../interfaces/Platforms';
import { IPageSectionProps } from '@uifabric/example-app-base/lib/index2';
const exampleStyles: any = exampleStylesImport;
const baseUrl = 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/apps/fabric-website/src/pages/Controls/ButtonPage/';
export class ButtonPage extends React.Component<
IControlsPageProps,
{
areButtonsDisabled: boolean;
areButtonsChecked: boolean;
}
> {
public constructor(props: IControlsPageProps) {
super(props);
this.state = {
areButtonsDisabled: false,
areButtonsChecked: false
};
}
public renderKnobs() {
const { areButtonsDisabled, areButtonsChecked } = this.state;
return (
<>
<Checkbox
className={exampleStyles.exampleCheckbox}
label="Disable buttons"
checked={areButtonsDisabled}
onChange={this._onDisabledChanged}
/>
<Checkbox
className={exampleStyles.exampleCheckbox}
label="Mark as checked"
checked={areButtonsChecked}
onChange={this._onToggledChanged}
/>
</>
);
}
public render() {
const { areButtonsDisabled, areButtonsChecked } = this.state;
const buttonPageProps = ButtonPageProps(areButtonsDisabled, areButtonsChecked);
return (
<ControlsAreaPage
{...this.props}
title="Button"
{...buttonPageProps[this.props.platform]}
exampleKnobs={this.renderKnobs()}
otherSections={this._otherSections(this.props.platform) as IPageSectionProps[]}
/>
);
}
private _otherSections(platform: Platforms): IPageSectionProps<Platforms>[] {
switch (platform) {
case 'ios':
return [
{
sectionName: 'Implementation',
editUrl: baseUrl + 'docs/ios/ButtonImplementation.md',
content: require('!raw-loader!@uifabric/fabric-website/src/pages/Controls/ButtonPage/docs/ios/ButtonImplementation.md') as string
}
];
case 'android':
return [
{
sectionName: 'Implementation',
editUrl: baseUrl + 'docs/android/ButtonImplementation.md',
content: require('!raw-loader!@uifabric/fabric-website/src/pages/Controls/ButtonPage/docs/android/ButtonImplementation.md') as string
}
];
}
}
private _onDisabledChanged = (ev: React.MouseEvent<HTMLElement>, disabled: boolean): void => {
this.setState({
areButtonsDisabled: disabled
});
};
private _onToggledChanged = (ev: React.MouseEvent<HTMLElement>, toggled: boolean): void => {
this.setState({
areButtonsChecked: toggled
});
};
}