/
FormCheckbox.js
93 lines (85 loc) · 2.76 KB
/
FormCheckbox.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
import React from 'react';
import { Checkbox, Markdown, Panel, TabItem, withTheme } from 'dotnetify-elements';
import { TabsArticle, RenderCustomize, RenderExample } from '../../components';
const FormCheckbox = props => (
<TabsArticle vm="FormCheckbox" id="Overview">
<TabItem label="Overview" itemKey="Overview">
<Markdown id="Overview">
<CheckboxExample />
</Markdown>
</TabItem>
<TabItem label="API" itemKey="API">
<Markdown id="API" />
</TabItem>
<TabItem label="Customize">
<CheckboxCustomize />
</TabItem>
</TabsArticle>
);
class CheckboxExample extends React.Component {
render() {
const buildCode = props => `
\`\`\`jsx
import React from 'react';
import { VMContext, Checkbox } from 'dotnetify-elements';
const MyApp = _ => (
<VMContext vm="CheckboxExample">
<Checkbox id="Agree"${props} />
</VMContext>
);
\`\`\``;
const buildWebComponentCode = props => `
\`\`\`jsx
<d-vm-context vm="CheckboxExample">
<d-checkbox id="Agree"${props} />
</d-vm-context>
\`\`\``;
const setState = state => this.setState(state);
const propTypes = { enable: null, plainText: null, switch: null };
const setWebComponent = show => this.setState({ webComponent: show });
const webComponent = this.state && this.state.webComponent;
const selectBuildCode = webComponent ? buildWebComponentCode : buildCode;
return (
<RenderExample
vm="CheckboxExample"
propTypes={propTypes}
buildCode={selectBuildCode}
onChange={setState}
onWebComponent={setWebComponent}
>
<Panel style={{ minHeight: '4rem' }}>
{!webComponent ? (
<Checkbox id="Agree" {...this.state} />
) : (
<d-vm-context vm="CheckboxExample">
<d-checkbox id="Agree" {...this.state} />
</d-vm-context>
)}
</Panel>
</RenderExample>
);
}
}
class CheckboxCustomize extends React.Component {
state = { plainText: false, validationMessages: null };
render() {
const { plainText } = this.state;
const componentTypes = Checkbox.componentTypes;
const handleSelected = state => this.setState(state);
const select = value => ({
plainText: value === 'PlainTextComponent'
});
return (
<RenderCustomize
vm="CheckboxCustomize"
name="Checkbox"
componentTypes={componentTypes}
select={select}
onSelected={handleSelected}
>
<Checkbox id="MyCheckbox" plainText={plainText} />
</RenderCustomize>
);
}
}
export default withTheme(FormCheckbox);