Skip to content

Commit 994570f

Browse files
KeroVieuxKeroVieux
committed
updated
2 parents 2368740 + 1c02c42 commit 994570f

21 files changed

+160
-185
lines changed

‎playground/app.js

Lines changed: 6 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ class GeoPosition extends Component {
158158
<div className="col-sm-6">
159159
<label>Latitude</label>
160160
<input
161-
className="form-control"
161+
className="ant-input"
162162
type="number"
163163
value={lat}
164164
step="0.00001"
@@ -168,7 +168,7 @@ class GeoPosition extends Component {
168168
<div className="col-sm-6">
169169
<label>Longitude</label>
170170
<input
171-
className="form-control"
171+
className="ant-input"
172172
type="number"
173173
value={lon}
174174
step="0.00001"
@@ -280,42 +280,6 @@ function ThemeSelector({ theme, select }) {
280280
);
281281
}
282282

283-
class CopyLink extends Component {
284-
onCopyClick = event => {
285-
this.input.select();
286-
document.execCommand("copy");
287-
};
288-
289-
render() {
290-
const { shareURL, onShare } = this.props;
291-
if (!shareURL) {
292-
return (
293-
<button className="btn btn-default" type="button" onClick={onShare}>
294-
Share
295-
</button>
296-
);
297-
}
298-
return (
299-
<div className="input-group">
300-
<input
301-
type="text"
302-
ref={input => (this.input = input)}
303-
className="form-control"
304-
defaultValue={shareURL}
305-
/>
306-
<span className="input-group-btn">
307-
<button
308-
className="btn btn-default"
309-
type="button"
310-
onClick={this.onCopyClick}>
311-
<i className="glyphicon glyphicon-copy" />
312-
</button>
313-
</span>
314-
</div>
315-
);
316-
}
317-
}
318-
319283
class App extends Component {
320284
constructor(props) {
321285
super(props);
@@ -421,20 +385,20 @@ class App extends Component {
421385
return (
422386
<div className="container-fluid">
423387
<div className="page-header">
424-
<h1>react-jsonschema-form</h1>
388+
<h1>create-form</h1>
425389
<div className="row">
426390
<div className="col-sm-8">
427391
<Selector onSelected={this.load} />
428392
</div>
429-
<div className="col-sm-2">
393+
<div className="col-sm-2" style={{ display: "none" }}>
430394
<Form
431395
schema={liveSettingsSchema}
432396
formData={liveSettings}
433397
onChange={this.setLiveSettings}>
434398
<div />
435399
</Form>
436400
</div>
437-
<div className="col-sm-2">
401+
<div className="col-sm-2" style={{ display: "none" }}>
438402
<ThemeSelector theme={theme} select={this.onThemeSelected} />
439403
</div>
440404
</div>
@@ -491,16 +455,10 @@ class App extends Component {
491455
onError={log("errors")}>
492456
<div className="row">
493457
<div className="col-sm-3">
494-
<button className="btn btn-primary" type="submit">
458+
<button className="ant-btn ant-btn-primary" type="submit">
495459
Submit
496460
</button>
497461
</div>
498-
<div className="col-sm-9 text-right">
499-
<CopyLink
500-
shareURL={this.state.shareURL}
501-
onShare={this.onShare}
502-
/>
503-
</div>
504462
</div>
505463
</Form>
506464
)}

‎playground/index.html

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,13 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>react-jsonschema-form playground</title>
7+
<title>create form playground</title>
88
<link rel="stylesheet" id="theme" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
9+
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
10+
<link href="https://cdn.bootcss.com/antd/3.12.3/antd.min.css" rel="stylesheet">
911
</head>
1012
<body>
1113
<div id="app"></div>
12-
<p style="text-align:center">
13-
Powered by
14-
<a href="https://github.com/mozilla-services/react-jsonschema-form">react-jsonschema-form</a>.
15-
Bootstrap themes courtsesy of
16-
<a href="http://bootswatch.com/">Bootswatch</a> and
17-
<a href="https://github.com/aalpern/bootstrap-solarized/">bootstrap-solarized</a>.
18-
</p>
1914
<script src="/static/bundle.js"></script>
2015
</body>
2116
</html>

‎playground/index.prod.html

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,14 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>react-jsonschema-form playground</title>
7+
<title>create form playground</title>
88
<link rel="stylesheet" id="theme" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
9+
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
10+
<link href="https://cdn.bootcss.com/antd/3.12.3/antd.min.css" rel="stylesheet">
911
<link rel="stylesheet" href="./styles.css">
1012
</head>
1113
<body>
1214
<div id="app"></div>
13-
<p style="text-align:center">
14-
Powered by
15-
<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>.
19-
</p>
2015
<script src="./bundle.js"></script>
2116
</body>
2217
</html>

‎playground/samples/simple.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module.exports = {
22
schema: {
3+
formLayout: "horizontal",
34
title: "A registration form",
45
description: "A simple form example.",
56
type: "object",
@@ -42,7 +43,7 @@ module.exports = {
4243
age: {
4344
"ui:widget": "updown",
4445
"ui:title": "Age of person",
45-
"ui:description": "(earthian year)",
46+
"ui:help": "(earthian year)",
4647
},
4748
bio: {
4849
"ui:widget": "textarea",

‎playground/samples/widgets.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ module.exports = {
120120
const { backgroundColor } = options;
121121
return (
122122
<input
123-
className="form-control"
123+
className="ant-input"
124124
onChange={event => onChange(event.target.value)}
125125
style={{ backgroundColor }}
126126
value={value}
@@ -136,7 +136,7 @@ module.exports = {
136136
const { enumOptions, backgroundColor } = options;
137137
return (
138138
<select
139-
className="form-control"
139+
className="ant-input"
140140
style={{ backgroundColor }}
141141
value={value}
142142
onChange={event => onChange(event.target.value)}>

‎src/components/AddButton.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import React from "react";
2-
import IconButton from "./IconButton";
32

43
export default function AddButton({ className, onClick, disabled }) {
54
return (
65
<div className="row">
76
<p className={`col-xs-3 col-xs-offset-9 text-right ${className}`}>
8-
<IconButton
9-
type="info"
10-
icon="plus"
11-
className="btn-add col-xs-12"
7+
<button
8+
type="button"
129
tabIndex="0"
1310
onClick={onClick}
1411
disabled={disabled}
15-
/>
12+
className="ant-btn ant-btn-primary">
13+
<i className="fa fa-plus" />
14+
</button>
1615
</p>
1716
</div>
1817
);

‎src/components/Form.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,9 @@ export default class Form extends Component {
218218

219219
return (
220220
<form
221-
className={className ? className : "rjsf"}
221+
className={`ant-form ant-form-${schema.formLayout} ${
222+
className ? className : ""
223+
}`}
222224
id={id}
223225
name={name}
224226
method={method}
@@ -250,11 +252,11 @@ export default class Form extends Component {
250252
{children ? (
251253
children
252254
) : (
253-
<div>
254-
<button type="submit" className="btn btn-info">
255-
Submit
255+
<p>
256+
<button type="submit" className="ant-btn ant-btn-primary">
257+
提交
256258
</button>
257-
</div>
259+
</p>
258260
)}
259261
</form>
260262
);

‎src/components/IconButton.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ export default function IconButton(props) {
55
return (
66
<button
77
type="button"
8-
className={`btn btn-${type} ${className}`}
9-
{...otherProps}>
10-
<i className={`glyphicon glyphicon-${icon}`} />
11-
</button>
8+
icon={icon}
9+
className={`ant-btn ant-btn-${type} ${className}`}
10+
{...otherProps}
11+
/>
1212
);
1313
}

‎src/components/fields/ArrayField.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,13 +86,13 @@ function DefaultArrayItem(props) {
8686
{props.hasRemove && (
8787
<IconButton
8888
type="danger"
89-
icon="remove"
9089
className="array-item-remove"
9190
tabIndex="-1"
9291
style={btnStyle}
9392
disabled={props.disabled || props.readonly}
94-
onClick={props.onDropIndexClick(props.index)}
95-
/>
93+
onClick={props.onDropIndexClick(props.index)}>
94+
<i className="fa fa-remove" />
95+
</IconButton>
9696
)}
9797
</div>
9898
</div>

‎src/components/fields/DescriptionField.js

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,11 @@ function DescriptionField(props) {
77
// See #312: Ensure compatibility with old versions of React.
88
return <div />;
99
}
10-
if (typeof description === "string") {
11-
return (
12-
<p id={id} className="field-description">
13-
{description}
14-
</p>
15-
);
16-
} else {
17-
return (
18-
<div id={id} className="field-description">
19-
{description}
20-
</div>
21-
);
22-
}
10+
return (
11+
<div id={id} className="ant-form-extra" style={{ marginBottom: "20px" }}>
12+
{description}
13+
</div>
14+
);
2315
}
2416

2517
if (process.env.NODE_ENV !== "production") {

‎src/components/fields/MultiSchemaField.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,10 +144,10 @@ class AnyOfField extends Component {
144144
}
145145

146146
return (
147-
<div className="panel panel-default panel-body">
148-
<div className="form-group">
147+
<div className="ant-card ant-card-bordered">
148+
<div className="ant-form-item">
149149
<select
150-
className="form-control"
150+
className="ant-input"
151151
onChange={this.onOptionChange}
152152
value={selectedOption}
153153
id={`${idSchema.$id}_anyof_select`}>

‎src/components/fields/ObjectField.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { Component } from "react";
33
import * as types from "../../types";
44

55
import {
6+
uuid,
67
orderProperties,
78
retrieveSchema,
89
getDefaultRegistry,
@@ -30,7 +31,7 @@ function DefaultObjectFieldTemplate(props) {
3031

3132
const { TitleField, DescriptionField } = props;
3233
return (
33-
<fieldset id={props.idSchema.$id}>
34+
<fieldset id={`${props.idSchema.$id}__${uuid()}`}>
3435
{(props.uiSchema["ui:title"] || props.title) && (
3536
<TitleField
3637
id={`${props.idSchema.$id}__title`}
@@ -230,6 +231,7 @@ class ObjectField extends Component {
230231
name={name}
231232
required={this.isRequired(name)}
232233
schema={schema.properties[name]}
234+
formLayout={schema.formLayout}
233235
uiSchema={uiSchema[name]}
234236
errorSchema={errorSchema[name]}
235237
idSchema={idSchema[name]}

0 commit comments

Comments
 (0)