Skip to content

Commit d3ac2b1

Browse files
author
Christopher Whatley
committed
Switch to outlining. Fix up structure.
1 parent 0041a11 commit d3ac2b1

21 files changed

+379
-505
lines changed

‎package-lock.json‎

Lines changed: 18 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"cs-check": "prettier -l $npm_package_prettierOptions '{playground,src,test}/**/*.js'",
1111
"cs-format": "prettier --jsx-bracket-same-line --trailing-comma es5 --use-tabs false --semi --tab-width 2 '{playground,src,test}/**/*.js' --write",
1212
"dist": "npm run build:lib && npm run build:dist",
13-
"lint": "eslint src test playground",
13+
"lint": "eslint --format unix src test playground",
1414
"prepare": "npm run dist",
1515
"precommit": "lint-staged",
1616
"publish-to-gh-pages": "npm run build:playground && gh-pages --dist build/",
@@ -43,9 +43,9 @@
4343
"react-dom": ">=16.6.3"
4444
},
4545
"dependencies": {
46-
"@material-ui/core": "^3.5.1",
46+
"@material-ui/core": "^3.7.0",
4747
"@material-ui/icons": "^3.0.1",
48-
"@material-ui/lab": "^3.0.0-alpha.25",
48+
"@material-ui/lab": "^3.0.0-alpha.26",
4949
"ajv": "^5.2.3",
5050
"babel-runtime": "^6.26.0",
5151
"core-js": "^2.5.7",

‎playground/app.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ class Editor extends Component {
274274
return (
275275
<Card>
276276
<CardContent>
277-
<Typography variant="title" gutterBottom>
277+
<Typography variant="h6" gutterBottom>
278278
{" " + title}
279279
</Typography>
280280
<CodeMirror
@@ -484,7 +484,7 @@ class _App extends Component {
484484
<div className={classes.root}>
485485
<AppBar position="fixed" className={classes.appBar}>
486486
<Toolbar className={classes.toolbar}>
487-
<Typography variant="title">
487+
<Typography variant="h6">
488488
React JsonSchema Form - Material UI
489489
</Typography>
490490
</Toolbar>

‎playground/index.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@
1313
<p style="text-align:center">
1414
Powered by
1515
<a href="https://github.com/mozilla-services/react-jsonschema-form">react-jsonschema-form</a>.
16-
Bootstrap themes courtsesy of
17-
<a href="http://bootswatch.com/">Bootswatch</a> and
18-
<a href="https://github.com/aalpern/bootstrap-solarized/">bootstrap-solarized</a>.
16+
Material UI customization by Chris Whatley in <a href="https://github.com/cwhatley/material-ui-react-jsonschema-form">material-ui-react-jsonschema-form</a> using @material-ui/core and @material-ui/lab.
1917
</p>
2018
<script src="/static/bundle.js"></script>
2119
</body>

‎src/AddButton.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,13 @@ import { Button, Icon } from "@material-ui/core";
44
function _AddButton(props) {
55
const { icon, className, ...otherProps } = props;
66
return (
7-
<Button {...otherProps} variant="contained" color="secondary" size="small">
8-
<Icon>{icon}</Icon>
7+
<Button
8+
{...otherProps}
9+
variant="outlined"
10+
color="secondary"
11+
size="small"
12+
style={{ margin: "16px" }}>
13+
<Icon>{icon}</Icon> Add Item
914
</Button>
1015
);
1116
}

‎src/ArrayFieldTemplate.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@ function DefaultArrayItem(props) {
4444
fontWeight: "bold",
4545
};
4646
return (
47-
<Grid container spacing={16} key={props.index}>
48-
<Grid item xs={props.hasToolbar ? 9 : 12}>
47+
<Grid container key={props.index} alignItems="center">
48+
<Grid item xs>
4949
{props.children}
5050
</Grid>
5151

5252
{props.hasToolbar && (
53-
<Grid item xs={3} className="array-item-toolbox">
53+
<Grid item className="array-item-toolbox">
5454
{(props.hasMoveUp || props.hasMoveDown) && (
5555
<IconButton
5656
icon="arrow-up"
@@ -154,22 +154,22 @@ function DefaultNormalArrayFieldTemplate(props) {
154154

155155
<Grid
156156
container
157-
spacing={16}
157+
spacing={8}
158158
className="array-item-list"
159+
style={{ paddingLeft: "12px", paddingRight: "12px" }}
159160
key={`array-item-list-${props.idSchema.$id}`}>
160161
{props.items && props.items.map(p => DefaultArrayItem(p))}
161162

162163
{props.canAdd && (
163-
<React.Fragment>
164-
<Grid item xs={10} />
165-
<Grid item xs={2}>
164+
<Grid container justify="flex-end">
165+
<Grid item>
166166
<AddButton
167167
className="array-item-add"
168168
onClick={props.onAddClick}
169169
disabled={props.disabled || props.readonly}
170170
/>
171171
</Grid>
172-
</React.Fragment>
172+
</Grid>
173173
)}
174174
</Grid>
175175
</Paper>

‎src/ErrorList.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,14 @@ import {
1010
} from "@material-ui/core";
1111

1212
export default function ErrorList(props) {
13-
const { errors, schema } = props;
13+
const { errors } = props;
1414
return (
1515
<Paper style={{ padding: "12px", margin: "12px" }}>
1616
<Typography variant="h6" component="h6">
1717
Form Errors
1818
</Typography>
1919
<List dense={true}>
2020
{errors.map((error, i) => {
21-
console.log("error", error, schema);
2221
return (
2322
<ListItem key={i}>
2423
<ListItemIcon>

‎src/FieldTemplate.js‎

Lines changed: 28 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { ADDITIONAL_PROPERTY_FLAG } from "react-jsonschema-form/lib/utils";
22
import React from "react";
33
import {
44
TextField,
5-
FormControl,
65
FormLabel,
76
Typography,
87
FormHelperText,
@@ -11,7 +10,6 @@ import {
1110
export default function DefaultTemplate(props) {
1211
const {
1312
id,
14-
classNames,
1513
label,
1614
children,
1715
rawErrors,
@@ -21,67 +19,56 @@ export default function DefaultTemplate(props) {
2119
required,
2220
displayLabel,
2321
onKeyChange,
24-
//schema,
22+
schema,
2523
uiSchema,
2624
} = props;
2725
if (hidden) {
2826
return children;
2927
}
3028

31-
function suppress_label() {
32-
let l = uiSchema["ui:widget"];
33-
let map = {
34-
textarea: true,
35-
checkboxes: true,
36-
range: true,
37-
};
38-
console.log("mapped", map[l]);
39-
return !map[l];
40-
}
41-
4229
let help_text = uiSchema["ui:help"];
4330
let help_is_object = typeof help_text == "object";
4431
let actual_help = help;
4532
//console.log('help_text', typeof help_text, help_text)
4633
if (help_text && !help_is_object) {
4734
//console.log('replacing help', help_text);
48-
actual_help = <Typography variant="caption">{help_text}</Typography>;
35+
actual_help = (
36+
<Typography variant="caption" color="textSecondary">
37+
{help_text}
38+
</Typography>
39+
);
4940
} else if (help_is_object) {
5041
actual_help = "";
5142
}
5243

53-
const additional = props.schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
44+
const additional = schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
5445
const keyLabel = `${label} Key`;
55-
const forceLabelHide = suppress_label();
5646
//console.log('schema', schema);
57-
//console.log('schema', uiSchema);
58-
//console.log('hiding label', forceLabelHide);
59-
return (
60-
<div className={classNames}>
61-
{additional && (
62-
<React.Fragment>
63-
<FormLabel required={required} id={`${id}-key`}>
64-
{keyLabel}xX
65-
</FormLabel>
66-
<TextField
67-
required={required}
68-
id={`${id}-key`}
69-
onChange={onKeyChange}
70-
/>
71-
</React.Fragment>
72-
)}
73-
<FormControl fullWidth={true} margin="normal" error={!!rawErrors}>
74-
{!forceLabelHide && displayLabel && (
75-
<FormLabel required={required} id={`${id}-key`}>
76-
{label}
77-
</FormLabel>
47+
//console.log('uiSchema', uiSchema);
48+
49+
function inner() {
50+
return (
51+
<React.Fragment>
52+
{additional && (
53+
<React.Fragment>
54+
<FormLabel required={required} id={`${id}-key`}>
55+
{keyLabel}
56+
</FormLabel>
57+
<TextField
58+
required={required}
59+
id={`${id}-key`}
60+
onChange={onKeyChange}
61+
/>
62+
</React.Fragment>
7863
)}
7964
{children}
8065
{displayLabel && description ? description : null}
8166
{rawErrors &&
8267
rawErrors.map(e => <FormHelperText error={true}>{e}</FormHelperText>)}
8368
{actual_help}
84-
</FormControl>
85-
</div>
86-
);
69+
</React.Fragment>
70+
);
71+
}
72+
73+
return inner();
8774
}

‎src/IconButton.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { IconButton, Icon } from "@material-ui/core";
2+
import { Button, Icon } from "@material-ui/core";
33

44
let mappings = {
55
remove: "delete",
@@ -12,8 +12,8 @@ export default function _IconButton(props) {
1212
// was type = "default" in props
1313
const { icon, className, ...otherProps } = props;
1414
return (
15-
<IconButton {...otherProps}>
15+
<Button {...otherProps} size="small">
1616
<Icon>{mappings[icon] || icon}</Icon>
17-
</IconButton>
17+
</Button>
1818
);
1919
}

‎src/ObjectFieldTemplate.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { Paper } from "@material-ui/core";
3-
3+
import AddButton from "./AddButton";
44
import { getUiOptions } from "react-jsonschema-form/lib/utils";
55

66
export default function MuiObjectFieldTemplate(props) {
@@ -25,7 +25,8 @@ export default function MuiObjectFieldTemplate(props) {
2525
return (
2626
<Paper
2727
className={props.className}
28-
style={{ padding: "18px", margin: "12px" }}>
28+
style={{ padding: "12px", marginTop: "8px" }}
29+
elevation={1}>
2930
{(props.uiSchema["ui:title"] || props.title) && (
3031
<TitleField
3132
id={`${props.idSchema.$id}__title`}

0 commit comments

Comments
 (0)