Skip to content

Commit def42f7

Browse files
author
T_S_V
committed
Updated to Creator V2, core/react-ui
1 parent cac117a commit def42f7

11 files changed

+174
-214
lines changed

‎package.json

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
{
2-
"name": "surveyjs_react_quickstart_new",
3-
"version": "0.1.0",
2+
"name": "surveyjs_react_quickstart",
3+
"version": "0.2.0",
44
"private": true,
55
"dependencies": {
66
"bootstrap": "^3.3.7",
77
"jquery": "^3.3.1",
8+
"jspdf": "^2.5.1",
9+
"jspdf-autotable": "^3.5.23",
810
"react": "^17.0.2",
911
"react-dom": "^17.0.2",
1012
"react-router-dom": "^5.2.0",
11-
"react-scripts": "4.0.3",
13+
"react-scripts": "^5.0.0",
1214
"survey-analytics": "latest",
13-
"survey-creator": "latest",
15+
"survey-core": "latest",
16+
"survey-creator-core": "latest",
17+
"survey-creator-react": "latest",
1418
"survey-pdf": "latest",
15-
"survey-react": "latest",
19+
"survey-react-ui": "latest",
1620
"surveyjs-widgets": "latest",
17-
"xlsx": "^0.16.9",
18-
"jspdf": "1.5.3",
19-
"jspdf-autotable": "3.0.5"
21+
"xlsx": "^0.18.5"
2022
},
2123
"scripts": {
2224
"start": "react-scripts start",

‎src/App.css

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,22 @@
66
animation: App-logo-spin infinite 20s linear;
77
}
88

9+
.app-content {
10+
height: calc(100vh - 80px);
11+
overflow-y: auto;
12+
}
13+
14+
h2,
15+
h2+span {
16+
padding: 0 20px;
17+
}
18+
919
@keyframes App-logo-spin {
1020
from {
1121
transform: rotate(0deg);
1222
}
23+
1324
to {
1425
transform: rotate(360deg);
1526
}
16-
}
27+
}

‎src/App.js

Lines changed: 65 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,46 @@ import { AnalyticsDatatablesPage } from "./AnalyticsDatatables";
1111

1212
import "bootstrap/dist/css/bootstrap.css";
1313

14+
import * as Survey from "survey-core";
15+
16+
export { MyQuestion } from "./MyQuestion";
17+
18+
import "jquery-ui/themes/base/all.css";
19+
import "nouislider/distribute/nouislider.css";
20+
import "select2/dist/css/select2.css";
21+
import "bootstrap-slider/dist/css/bootstrap-slider.css";
22+
23+
import "jquery-bar-rating/dist/themes/css-stars.css";
24+
import "jquery-bar-rating/dist/themes/fontawesome-stars.css";
25+
26+
import $ from "jquery";
27+
// import "jquery-ui/ui/widgets/datepicker.js";
28+
import "select2/dist/js/select2.js";
29+
import "jquery-bar-rating";
30+
31+
//import "icheck/skins/square/blue.css";
32+
//require("icheck");
33+
import "pretty-checkbox/dist/pretty-checkbox.css";
34+
35+
import * as widgets from "surveyjs-widgets";
36+
37+
window["$"] = window["jQuery"] = $;
38+
require("jquery-ui/ui/widgets/datepicker.js");
39+
40+
//widgets.icheck(Survey, $);
41+
widgets.prettycheckbox(Survey);
42+
widgets.select2(Survey, $);
43+
widgets.inputmask(Survey);
44+
widgets.jquerybarrating(Survey, $);
45+
widgets.jqueryuidatepicker(Survey, $);
46+
widgets.nouislider(Survey);
47+
widgets.select2tagbox(Survey, $);
48+
widgets.sortablejs(Survey);
49+
widgets.ckeditor(Survey);
50+
widgets.autocomplete(Survey, $);
51+
widgets.bootstrapslider(Survey);
52+
53+
1454
export default function SurveyJSReactApplication() {
1555
return (
1656
<Router>
@@ -50,29 +90,31 @@ export default function SurveyJSReactApplication() {
5090
</div>
5191
</nav>
5292

53-
<Switch>
54-
<Route exact path="/">
55-
<HomePage />
56-
</Route>
57-
<Route path="/survey">
58-
<SurveyPage />
59-
</Route>
60-
<Route path="/creator">
61-
<CreatorPage />
62-
</Route>
63-
<Route path="/export">
64-
<ExportToPDFPage />
65-
</Route>
66-
<Route path="/analytics">
67-
<AnalyticsPage />
68-
</Route>
69-
<Route path="/analyticsdatatables">
70-
<AnalyticsDatatablesPage />
71-
</Route>
72-
<Route path="/analyticstabulator">
73-
<AnalyticsTabulatorPage />
74-
</Route>
75-
</Switch>
93+
<div className="app-content">
94+
<Switch>
95+
<Route exact path="/">
96+
<HomePage />
97+
</Route>
98+
<Route path="/survey">
99+
<SurveyPage />
100+
</Route>
101+
<Route path="/creator">
102+
<CreatorPage />
103+
</Route>
104+
<Route path="/export">
105+
<ExportToPDFPage />
106+
</Route>
107+
<Route path="/analytics">
108+
<AnalyticsPage />
109+
</Route>
110+
<Route path="/analyticsdatatables">
111+
<AnalyticsDatatablesPage />
112+
</Route>
113+
<Route path="/analyticstabulator">
114+
<AnalyticsTabulatorPage />
115+
</Route>
116+
</Switch>
117+
</div>
76118
</div>
77119
</Router>
78120
);

‎src/Creator.js

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ import React from "react";
22
import SurveyCreator from "./SurveyCreator";
33

44
export function CreatorPage() {
5-
return (
6-
<div>
7-
<h2>Survey Creator - create a new survey</h2>
8-
<SurveyCreator />
9-
</div>
10-
);
11-
}
12-
5+
return (
6+
<>
7+
<h2>Survey Creator - create a new survey</h2>
8+
<SurveyCreator />
9+
</>
10+
);
11+
}

‎src/Export.js

Lines changed: 20 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,30 @@
11
import React from "react";
2-
3-
import $ from "jquery";
4-
5-
import * as SurveyCore from "survey-core";
6-
import * as widgets from "surveyjs-widgets";
2+
import * as Survey from "survey-core";
73
import * as SurveyPDF from "survey-pdf";
84

95
import { json } from "./survey_json.js";
106

11-
//widgets.icheck(SurveyCore, $);
12-
widgets.prettycheckbox(SurveyCore);
13-
widgets.select2(SurveyCore, $);
14-
widgets.inputmask(SurveyCore);
15-
widgets.jquerybarrating(SurveyCore, $);
16-
widgets.jqueryuidatepicker(SurveyCore, $);
17-
widgets.nouislider(SurveyCore);
18-
widgets.select2tagbox(SurveyCore, $);
19-
//widgets.signaturepad(SurveyCore);
20-
widgets.sortablejs(SurveyCore);
21-
widgets.ckeditor(SurveyCore);
22-
widgets.autocomplete(SurveyCore, $);
23-
widgets.bootstrapslider(SurveyCore);
24-
257
function savePDF(model) {
26-
var surveyPDF = new SurveyPDF.SurveyPDF(json);
27-
surveyPDF.data = model.data;
28-
surveyPDF.save();
8+
var surveyPDF = new SurveyPDF.SurveyPDF(json);
9+
surveyPDF.data = model.data;
10+
surveyPDF.save();
2911
};
3012

3113
export function ExportToPDFPage() {
32-
var model = new SurveyCore.SurveyModel(json);
33-
return (
34-
<div className="container">
35-
<div className="jumbotron">
36-
<h2>Export survey to a PDF document</h2>
37-
<p>
38-
The SurveyJS PDF Export library allows you to render SurveyJS Library surveys to PDF in
39-
a browser which can be later emailed or printed.
40-
</p>
41-
<p>Click the button below to get a PDF document.</p>
42-
</div>
43-
<div>
44-
<button onClick={() => savePDF(model)}>Save PDF</button>
45-
</div>
14+
var model = new Survey.Model(json);
15+
return (
16+
<div className="container">
17+
<div className="jumbotron">
18+
<h2>Export survey to a PDF document</h2>
19+
<p>
20+
The SurveyJS PDF Export library allows you to render SurveyJS Library surveys to PDF in
21+
a browser which can be later emailed or printed.
22+
</p>
23+
<p>Click the button below to get a PDF document.</p>
24+
</div>
25+
<div>
26+
<button onClick={() => savePDF(model)}>Save PDF</button>
4627
</div>
47-
);
48-
}
49-
28+
</div>
29+
);
30+
}

‎src/MyQuestion.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
2-
import * as Survey from "survey-react";
2+
import * as Survey from "survey-core";
3+
import * as SurveyReact from "survey-react-ui";
34

45
export class MyQuestionModel extends Survey.Question {
56
getType() {
@@ -14,7 +15,7 @@ export class MyQuestionModel extends Survey.Question {
1415
}
1516
}
1617

17-
export class MyQuestion extends Survey.SurveyElementBase {
18+
export class MyQuestion extends SurveyReact.SurveyElementBase {
1819
get question() {
1920
return this.props.question;
2021
}
@@ -34,13 +35,13 @@ Survey.Serializer.addClass(
3435
[
3536
{ name: "text" }
3637
],
37-
function() {
38+
function () {
3839
return new MyQuestionModel("");
3940
},
4041
"question"
4142
);
4243

4344

44-
Survey.ReactQuestionFactory.Instance.registerQuestion("myquestion", props => {
45+
SurveyReact.ReactQuestionFactory.Instance.registerQuestion("myquestion", props => {
4546
return React.createElement(MyQuestion, props);
4647
});

‎src/Survey.js

Lines changed: 13 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,11 @@
11
import React from "react";
2-
import * as Survey from "survey-react";
3-
import * as widgets from "surveyjs-widgets";
4-
import "survey-react/survey.css";
5-
6-
import "jquery-ui/themes/base/all.css";
7-
import "nouislider/distribute/nouislider.css";
8-
import "select2/dist/css/select2.css";
9-
import "bootstrap-slider/dist/css/bootstrap-slider.css";
10-
11-
import "jquery-bar-rating/dist/themes/css-stars.css";
12-
13-
import $ from "jquery";
14-
//import "jquery-ui/ui/widgets/datepicker.js";
15-
import "select2/dist/js/select2.js";
16-
import "jquery-bar-rating";
17-
18-
import "pretty-checkbox/dist/pretty-checkbox.css";
2+
import * as Survey from "survey-core";
3+
import * as SurveyReact from "survey-react-ui";
4+
import "survey-core/defaultV2.css";
195

206
import { json } from "./survey_json.js";
217

22-
//import "icheck/skins/square/blue.css";
23-
window["$"] = window["jQuery"] = $;
24-
require("jquery-ui/ui/widgets/datepicker.js");
25-
//require("icheck");
26-
27-
export { MyQuestion } from "./MyQuestion";
28-
29-
Survey.StylesManager.applyTheme("default");
30-
31-
//widgets.icheck(Survey, $);
32-
widgets.prettycheckbox(Survey);
33-
widgets.select2(Survey, $);
34-
widgets.inputmask(Survey);
35-
widgets.jquerybarrating(Survey, $);
36-
widgets.jqueryuidatepicker(Survey, $);
37-
widgets.nouislider(Survey);
38-
widgets.select2tagbox(Survey, $);
39-
//widgets.signaturepad(Survey);
40-
widgets.sortablejs(Survey);
41-
widgets.ckeditor(Survey);
42-
widgets.autocomplete(Survey, $);
43-
widgets.bootstrapslider(Survey);
8+
Survey.StylesManager.applyTheme("defaultV2");
449

4510
function onValueChanged(result) {
4611
console.log("value changed!");
@@ -50,18 +15,16 @@ function onComplete(result) {
5015
console.log("Complete! " + result);
5116
}
5217

53-
5418
export function SurveyPage() {
5519
var model = new Survey.Model(json);
5620
return (
57-
<div className="container">
58-
<h2>SurveyJS Library - a sample survey below</h2>
59-
<Survey.Survey
60-
model={model}
61-
onComplete={onComplete}
62-
onValueChanged={onValueChanged}
63-
/>
64-
</div>
21+
<div className="container">
22+
<h2>SurveyJS Library - a sample survey below</h2>
23+
<SurveyReact.Survey
24+
model={model}
25+
onComplete={onComplete}
26+
onValueChanged={onValueChanged}
27+
/>
28+
</div>
6529
);
66-
}
67-
30+
}

‎src/SurveyAnalytics.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import React, { Component } from "react";
22
import { data, json } from "./analytics_data";
33
import { VisualizationPanel } from "survey-analytics";
44
import "survey-analytics/survey.analytics.css";
5-
import * as Survey from "survey-react";
5+
import * as Survey from "survey-core";
66

77
export default class SurveyAnalytics extends Component {
88
visPanel;
99
componentDidMount() {
10-
const survey = new Survey.SurveyModel(json);
10+
const survey = new Survey.Model(json);
1111
this.visPanel = new VisualizationPanel(survey.getAllQuestions(), data);
1212
this.visPanel.render(document.getElementById("summaryContainer"));
1313
}

‎src/SurveyAnalyticsDatatables.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from "react";
22
import { data, json } from "./analytics_data";
33
import { DataTables } from "survey-analytics/survey.analytics.datatables.js";
4-
import * as Survey from "survey-react";
4+
import * as Survey from "survey-core";
55
import $ from "jquery";
66
import "datatables.net/js/jquery.dataTables.js";
77
import "datatables.net-dt/js/dataTables.dataTables.js";
@@ -17,7 +17,7 @@ export default class SurveyAnalyticsDatatables extends Component {
1717
visPanel;
1818
componentDidMount() {
1919
DataTables.initJQuery($);
20-
const survey = new Survey.SurveyModel(json);
20+
const survey = new Survey.Model(json);
2121
this.visPanel = new DataTables(survey, data);
2222
this.visPanel.render(document.getElementById("summaryContainer"));
2323
}

0 commit comments

Comments
 (0)