Skip to content

Commit 6956f3f

Browse files
danielopradodanieloprado
committed
update docs
Signed-off-by: danieloprado <[email protected]>
1 parent 94501fe commit 6956f3f

File tree

238 files changed

+762
-364
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

238 files changed

+762
-364
lines changed

‎docs/asset-manifest.json

Lines changed: 123 additions & 110 deletions
Large diffs are not rendered by default.

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/material-ui/manifest.json"><link rel="shortcut icon" href="/material-ui/favicon.ico"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"><title>React App</title><link href="/material-ui/static/css/main.3fdd5a02.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/material-ui/static/js/main.689248cc.js"></script></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/material-ui/manifest.json"><link rel="shortcut icon" href="/material-ui/favicon.ico"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"><title>React App</title><link href="/material-ui/static/css/main.e52650ce.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/material-ui/static/js/main.763546c1.js"></script></body></html>

‎docs/project/src/App.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import FormFieldsContext from '@react-form-fields/material-ui/components/Context
66
import ConfigBuilder from '@react-form-fields/material-ui/config/builder';
77
import { theme } from 'assets/theme';
88
import Pages from 'components/Pages';
9+
import Toast from 'components/Shared/Toast';
910
import React, { Fragment, PureComponent } from 'react';
1011

1112
const fieldConfig = new ConfigBuilder()
@@ -18,6 +19,9 @@ export default class App extends PureComponent {
1819
<FormFieldsContext config={fieldConfig}>
1920
<Fragment>
2021
<CssBaseline />
22+
23+
<Toast.Global />
24+
2125
<Pages />
2226
</Fragment>
2327
</FormFieldsContext>

‎docs/project/src/components/Code.tsx

Lines changed: 0 additions & 76 deletions
This file was deleted.

‎docs/project/src/components/Pages/Home/Examples/Usage.tsx

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import Button from '@material-ui/core/Button';
2+
import Card from '@material-ui/core/Card';
3+
import CardActions from '@material-ui/core/CardActions';
4+
import CardContent from '@material-ui/core/CardContent';
5+
import Grid from '@material-ui/core/Grid';
6+
import Typography from '@material-ui/core/Typography';
7+
import FormValidation from '@react-form-fields/material-ui/components/FormValidation';
8+
import FieldSelect from '@react-form-fields/material-ui/components/Select';
9+
import FieldText from '@react-form-fields/material-ui/components/Text';
10+
import React, { PureComponent } from 'react';
11+
12+
interface IState {
13+
model: any;
14+
message: string;
15+
validationOnChange: boolean;
16+
17+
}
18+
19+
export default class HomeExampleUsage extends PureComponent<{}, IState> {
20+
formValidation = React.createRef<FormValidation>();
21+
22+
constructor(props: {}) {
23+
super(props);
24+
25+
this.state = {
26+
model: {},
27+
message: null,
28+
validationOnChange: true
29+
};
30+
}
31+
32+
onSubmit = (isValid: boolean) => {
33+
event.preventDefault();
34+
const message = isValid ? `It's valid broto!` : `Invalid, sorry`;
35+
36+
this.setState({ message });
37+
}
38+
39+
handleClear = () => {
40+
this.formValidation.current.reset();
41+
this.setState({ model: {}, message: null });
42+
}
43+
44+
render() {
45+
const { model, message } = this.state;
46+
47+
return (
48+
<FormValidation onSubmit={this.onSubmit} ref={this.formValidation}>
49+
50+
<Card style={{ overflow: 'visible' }}>
51+
<CardContent>
52+
<Typography>{message}</Typography>
53+
54+
<FieldText
55+
label='Name'
56+
name='name'
57+
value={model.name}
58+
validation='required'
59+
onChange={(v => this.setState({ model: { ...model, name: v } }))}
60+
/>
61+
62+
<Grid container spacing={24}>
63+
64+
<Grid item xs={12} sm={6}>
65+
<FieldText
66+
label='Email'
67+
name='email'
68+
value={model.email}
69+
validation='required|email'
70+
onChange={(v => this.setState({ model: { ...model, email: v } }))}
71+
/>
72+
</Grid>
73+
74+
<Grid item xs={12} sm={6}>
75+
<FieldSelect
76+
label='Select'
77+
name='select'
78+
value={model.comboId}
79+
validation='required'
80+
emptyOption='Select one option...'
81+
options={[{ value: 1, label: 'Combo 1' }, { value: 2, label: 'Combo 2' }, { value: 3, label: 'Combo 3' }]}
82+
onChange={(v => this.setState({ model: { ...model, comboId: v } }))}
83+
/>
84+
</Grid>
85+
</Grid>
86+
87+
</CardContent>
88+
89+
<CardActions style={{ justifyContent: 'flex-end' }}>
90+
<Button onClick={this.handleClear}>Clear</Button>
91+
<Button type='submit' color='secondary' variant='contained'>Save</Button>
92+
</CardActions>
93+
</Card>
94+
95+
</FormValidation>
96+
);
97+
}
98+
}

‎docs/project/src/components/Pages/Home/index.tsx

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,36 @@
1-
import Code from 'components/Code';
1+
import HomeExampleUsageCode from '!raw-loader!./Examples/Usage';
2+
import Typography from '@material-ui/core/Typography';
23
import Toolbar from 'components/Layout/Toolbar';
4+
import Code from 'components/Shared/Code';
5+
import CodeExpansion from 'components/Shared/CodeExpansion';
36
import SectionTitle from 'components/Shared/SectionTitle';
47
import React, { Fragment, PureComponent } from 'react';
58

9+
import HomeExampleUsage from './Examples/Usage';
10+
611
export default class HomePage extends PureComponent {
712
render() {
813
return (
914
<Fragment>
1015
<Toolbar title='Getting Started' />
1116

17+
<SectionTitle title='Requirements' />
18+
<ul>
19+
<li><Typography>React >= 16.6.0</Typography></li>
20+
<li><Typography>Material-ui >= 3.0.0</Typography></li>
21+
</ul>
22+
1223
<SectionTitle title='Instalation' />
24+
<Code content={`yarn add @react-form-fields/material-ui`} lang='plaintext' />
25+
26+
<SectionTitle title='Usage' />
27+
28+
<CodeExpansion>
29+
<Code content={HomeExampleUsageCode} />
30+
</CodeExpansion>
31+
32+
<HomeExampleUsage />
1333

14-
<Code content='yarn add @react-form-fields/material-ui' lang='shell' />
1534
</Fragment>
1635
);
1736
}

‎docs/project/src/components/Pages/index.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,7 @@ interface IProps {
3030
export default class Pages extends PureComponent<IProps, {}> {
3131
mainContent: React.RefObject<HTMLMainElement> = React.createRef();
3232
menu: IMenu[] = [
33-
{
34-
path: '/', title: 'Getting Started',
35-
submenu: [
36-
{ path: '/#instalation', title: 'Instalation' }
37-
]
38-
}
33+
{ path: '/', title: 'Getting Started' }
3934
];
4035

4136
render() {

‎docs/project/src/components/Shared/Code.tsx

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import IconButton from '@material-ui/core/IconButton';
2+
import Typography from '@material-ui/core/Typography';
3+
import { IStyledProps } from '@react-form-fields/material-ui/decorators/withStyles';
4+
import CopyIcon from 'mdi-react/ContentCopyIcon';
5+
import * as monacoEditor from 'monaco-editor';
6+
import React, { ComponentType, PureComponent } from 'react';
7+
import { MonacoEditorProps } from 'react-monaco-editor';
8+
9+
import { WithStyles } from '../../decorators/withStyles';
10+
import Toast from './Toast';
11+
12+
interface IProps {
13+
content: string;
14+
lang?: string;
15+
classes?: any;
16+
}
17+
18+
@WithStyles(theme => ({
19+
container: {
20+
margin: '20px 0',
21+
backgroundColor: '#1e1e1e',
22+
color: '#c4c4c4',
23+
position: 'relative',
24+
paddingTop: 10,
25+
borderRadius: theme.shape.borderRadius,
26+
overflow: 'hidden'
27+
},
28+
buttons: {
29+
textAlign: 'right',
30+
position: 'absolute',
31+
top: 0,
32+
right: 0,
33+
zIndex: 1,
34+
}
35+
}))
36+
export default class Code extends PureComponent<IProps> {
37+
editorRef = React.createRef<any>();
38+
MonacoEditor: ComponentType<MonacoEditorProps & { ref?: any }>;
39+
options: monacoEditor.editor.IEditorConstructionOptions = {
40+
readOnly: true,
41+
minimap: { enabled: false },
42+
scrollBeyondLastLine: false,
43+
wordWrap: 'off',
44+
automaticLayout: true,
45+
lineNumbers: 'off',
46+
contextmenu: false,
47+
folding: false
48+
};
49+
50+
constructor(props: IProps) {
51+
super(props);
52+
console.log('codde');
53+
this.MonacoEditor = React.lazy(async () => {
54+
const monacoEditor = await import('monaco-editor');
55+
monacoEditor.languages.typescript.typescriptDefaults.setCompilerOptions({
56+
jsx: monacoEditor.languages.typescript.JsxEmit.React
57+
});
58+
59+
const MonacoEditor = await import('react-monaco-editor');
60+
return MonacoEditor;
61+
});
62+
}
63+
64+
get lineNumbers() {
65+
return this.props.content.split('\n').length;
66+
}
67+
68+
get height() {
69+
return (18 * this.props.content.split('\n').length) + 10;
70+
}
71+
72+
handleCopy = () => {
73+
this.editorRef.current.editor.focus();
74+
this.editorRef.current.editor.setSelection({ startColumn: 1, startLineNumber: 1, endLineNumber: this.lineNumbers + 1, endColumn: 999 });
75+
this.editorRef.current.editor.trigger('source', 'editor.action.clipboardCopyAction');
76+
this.editorRef.current.editor.setSelection({ startColumn: 1, startLineNumber: 1, endLineNumber: 1, endColumn: 1 });
77+
78+
Toast.show('Copiado');
79+
}
80+
81+
render() {
82+
const { content, classes, lang } = this.props;
83+
const { MonacoEditor } = this;
84+
85+
return (
86+
<div className={classes.container}>
87+
<React.Suspense fallback={<Loading />}>
88+
<div className={classes.buttons}>
89+
<IconButton color='inherit' onClick={this.handleCopy}>
90+
<CopyIcon size={16} />
91+
</IconButton>
92+
</div>
93+
94+
<MonacoEditor
95+
height={this.height}
96+
ref={this.editorRef}
97+
language={lang || 'typescript'}
98+
theme='vs-dark'
99+
value={content}
100+
options={this.options}
101+
/>
102+
</React.Suspense>
103+
</div>
104+
);
105+
}
106+
}
107+
108+
@WithStyles({
109+
text: { paddingBottom: 10, textAlign: 'center' }
110+
})
111+
class Loading extends PureComponent<IStyledProps> {
112+
render() {
113+
const { classes: { text } } = this.props;
114+
return <Typography color='inherit' className={text}>Carregando...</Typography>;
115+
}
116+
}

0 commit comments

Comments
 (0)