survey-react-ui 1.9.74 → 1.9.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -195
- package/package.json +1 -1
- package/survey-react-ui.d.ts +33 -2
- package/survey-react-ui.js +193 -29
- package/survey-react-ui.min.js +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
**SurveyJS** is a modern way to add surveys and forms to your website. It has versions for Angular, jQuery, knockout, react and vue.
|
|
1
|
+
# SurveyJS React Form Library
|
|
4
2
|
|
|
5
3
|
[](https://dev.azure.com/SurveyJS/SurveyJS%20Integration%20Tests/_build/latest?definitionId=7&branchName=master)
|
|
6
4
|
[](LICENSE)
|
|
@@ -14,203 +12,32 @@
|
|
|
14
12
|
<img alt="Closed issues" title="Closed Issues" src="https://img.shields.io/github/issues-closed/surveyjs/survey-library.svg">
|
|
15
13
|
</a>
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
## Documentation
|
|
20
|
-
|
|
21
|
-
[SurveyJS Library Documentation](https://surveyjs.io/Documentation/Library)
|
|
22
|
-
|
|
23
|
-
## Live Examples
|
|
24
|
-
|
|
25
|
-
[SurveyJS Library Live Examples](https://surveyjs.io/Examples/Library)
|
|
26
|
-
|
|
27
|
-
## Survey Creator / Form Builder
|
|
28
|
-
|
|
29
|
-
[Create your Survey or Form now](https://surveyjs.io/create-survey)
|
|
30
|
-
|
|
31
|
-
Survey Creator sources are [here](https://github.com/surveyjs/survey-creator)
|
|
32
|
-
|
|
33
|
-
## Export Survey to PDF
|
|
34
|
-
|
|
35
|
-
[Export to PDF overview](https://surveyjs.io/Overview/Survey-Pdf-Export)
|
|
36
|
-
|
|
37
|
-
Export to PDF sources are [here](https://github.com/surveyjs/survey-pdf)
|
|
38
|
-
|
|
39
|
-
## More info about SurveyJS
|
|
40
|
-
|
|
41
|
-
**SurveyJS** is the most feature-rich Survey / Form Library available at the current moment. It can be easily customized and extended to suit your needs.
|
|
42
|
-
|
|
43
|
-

|
|
44
|
-
|
|
45
|
-
## Main Features
|
|
46
|
-
|
|
47
|
-
### A lot of question types with a lot of built-in functionalities.
|
|
48
|
-
|
|
49
|
-
* [Text Question](https://surveyjs.io/Examples/Library/?id=questiontype-text)
|
|
50
|
-
* [Radigroup Question](https://surveyjs.io/Examples/Library/?id=questiontype-radiogroup)
|
|
51
|
-
* [Dropdown Question](https://surveyjs.io/Examples/Library/?id=questiontype-dropdown)
|
|
52
|
-
* [Checkboxes Question](https://surveyjs.io/Examples/Library/?id=questiontype-checkbox)
|
|
53
|
-
* [Boolean Question](https://surveyjs.io/Examples/Library/?id=questiontype-boolean)
|
|
54
|
-
* [Matrix Question](https://surveyjs.io/Examples/Library/?id=questiontype-matrix)
|
|
55
|
-
* [Matrix Rubric Question](https://surveyjs.io/Examples/Library/?id=questiontype-matrix-rubric)
|
|
56
|
-
* [Matrix Dropdown Question](https://surveyjs.io/Examples/Library/?id=questiontype-matrixdropdown)
|
|
57
|
-
* [Matrix Dynamic Question](https://surveyjs.io/Examples/Library/?id=questiontype-matrixdynamic)
|
|
58
|
-
* [Multiple Text Question](https://surveyjs.io/Examples/Library/?id=questiontype-multipletext)
|
|
59
|
-
* [Rating Question](https://surveyjs.io/Examples/Library/?id=questiontype-rating)
|
|
60
|
-
* [Ranking Question](https://surveyjs.io/Examples/Library?id=questiontype-ranking)
|
|
61
|
-
* [Comment Question](https://surveyjs.io/Examples/Library/?id=questiontype-comment)
|
|
62
|
-
* [Html Question](https://surveyjs.io/Examples/Library/?id=questiontype-html)
|
|
63
|
-
* [Files uploading Question](https://surveyjs.io/Examples/Library/?id=questiontype-file)
|
|
64
|
-
* [Panel Container](https://surveyjs.io/Examples/Library/?id=questiontype-panel)
|
|
65
|
-
* [Panel Dynamic Question](https://surveyjs.io/Examples/Library/?id=questiontype-paneldynamic)
|
|
66
|
-
* [Expression Question](https://surveyjs.io/Examples/Library/?id=questiontype-expression)
|
|
67
|
-
* [Image Picker Question](https://surveyjs.io/Examples/Library/?id=questiontype-imagepicker)
|
|
68
|
-
* [Support for third-party popular UI widgets](https://surveyjs.io/Examples/Library/?id=custom-widget-select2). The custom widgets [GitHub repo](https://github.com/surveyjs/widgets)
|
|
69
|
-
|
|
70
|
-
### Multiple Pages Support
|
|
71
|
-
|
|
72
|
-
You may create a very complex forms with a lot of pages, like [this one](https://surveyjs.io/Examples/Library/?id=real-patient-history).
|
|
73
|
-
|
|
74
|
-
### Dynamically change survey logic and questions content
|
|
75
|
-
|
|
76
|
-
* [Change questions visibility using logical expressions](https://surveyjs.io/Examples/Library/?id=condition-kids)
|
|
77
|
-
* [Create custom functions to use it in expression](https://surveyjs.io/Examples/Library/?id=condition-customfunctions)
|
|
78
|
-
* [Filter choices in checkbox, radiogroup and dropdown questions](https://surveyjs.io/Examples/Library/?id=condition-choicesVisibleIf)
|
|
79
|
-
* [Filter rows and columns in matrix question](https://surveyjs.io/Examples/Library/?id=condition-matrixVisibleIf)
|
|
80
|
-
* [Disabled/enabled questions based on logical expressions](https://surveyjs.io/Examples/Library/?id=condition-enable-kids)
|
|
81
|
-
* [Questions value validation](https://surveyjs.io/Examples/Library/?id=validators-standard)
|
|
82
|
-
|
|
83
|
-
### Localization and Multiple language support
|
|
84
|
-
|
|
85
|
-
* [Localization for over 20 languages](https://surveyjs.io/Examples/Library/?id=survey-localization&platform)
|
|
86
|
-
* [Multiple language support in one survey](https://surveyjs.io/Examples/Library/?id=survey-multilanguages)
|
|
87
|
-
|
|
88
|
-
### Appearance and custom Rendering
|
|
89
|
-
|
|
90
|
-
* [Seven built-in Themes](https://surveyjs.io/Examples/Library/?id=darkblue-theme)
|
|
91
|
-
* [Bootstrap support](https://surveyjs.io/Examples/Library/?id=bootstrap-theme)
|
|
92
|
-
* [CSS styles customization](https://surveyjs.io/Examples/Library/?id=survey-cssclasses)
|
|
93
|
-
* [API for adding new or changing existing HTML elements](https://surveyjs.io/Examples/Library/?id=survey-afterrender)
|
|
94
|
-
* [Render Questions in one line](https://surveyjs.io/Examples/Library/?id=survey-startwithnewline)
|
|
95
|
-
* [Markdown support](https://surveyjs.io/Examples/Library/?id=survey-markdown-radiogroup)
|
|
96
|
-
|
|
97
|
-
### Frequently used functionalities
|
|
98
|
-
|
|
99
|
-
* [Quiz creation](https://surveyjs.io/Examples/Library/?id=survey-quiz)
|
|
100
|
-
* [Show survey or form in the popup window](https://surveyjs.io/Examples/Library/?id=survey-window)
|
|
101
|
-
* [Display mode](https://surveyjs.io/Examples/Library/?id=survey-displaymode)
|
|
102
|
-
* [Custom navigation](https://surveyjs.io/Examples/Library/?id=survey-customnavigation)
|
|
103
|
-
* [Sharing same data between questions](https://surveyjs.io/Examples/Library/?id=survey-shareddata)
|
|
104
|
-
|
|
105
|
-
### To find out more about the library
|
|
106
|
-
|
|
107
|
-
* go to the [SurveyJS Library Site](https://surveyjs.io/Library)
|
|
108
|
-
* explore the live [Examples](https://www.surveyjs.io/Examples/Library)
|
|
109
|
-
* and create a survey or form using [Survey Creator](https://surveyjs.io/survey/Builder/)
|
|
110
|
-
|
|
111
|
-
#### You can use our quickstart repos:
|
|
112
|
-
|
|
113
|
-
* [Angular CLI](https://github.com/surveyjs/surveyjs_angular_cli)
|
|
114
|
-
* [React](https://github.com/surveyjs/surveyjs_react_quickstart)
|
|
115
|
-
* [Vue](https://github.com/surveyjs/surveyjs_vue_quickstart)
|
|
116
|
-
|
|
117
|
-
## Getting started
|
|
118
|
-
|
|
119
|
-
Install the library using npm.
|
|
120
|
-
|
|
121
|
-
Angular version:
|
|
122
|
-
|
|
123
|
-
```
|
|
124
|
-
npm install survey-angular
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
jQuery version:
|
|
128
|
-
|
|
129
|
-
```
|
|
130
|
-
npm install survey-jquery
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
Knockout version:
|
|
134
|
-
|
|
135
|
-
```
|
|
136
|
-
npm install survey-knockout
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
React version:
|
|
140
|
-
|
|
141
|
-
```
|
|
142
|
-
npm install survey-react
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
Vue version:
|
|
146
|
-
|
|
147
|
-
```
|
|
148
|
-
npm install survey-vue
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
Or use unpkg CDN:
|
|
152
|
-
|
|
153
|
-
* https://unpkg.com/survey-angular@{version-number}/survey.angular.min.js
|
|
154
|
-
* https://unpkg.com/survey-knockout@{version-number}/survey.ko.min.js
|
|
155
|
-
* https://unpkg.com/survey-react@{version-number}/survey.react.min.js
|
|
156
|
-
* https://unpkg.com/survey-jquery@{version-number}/survey.jquery.min.js
|
|
157
|
-
* https://unpkg.com/survey-vue@{version-number}/survey.vue.min.js
|
|
158
|
-
|
|
159
|
-
You find all versions/builds in the [surveyjs/build repo](https://github.com/surveyjs/builds).
|
|
160
|
-
|
|
161
|
-
Or dowload a version as zip file from [Releases](https://github.com/surveyjs/survey-library/releases)
|
|
162
|
-
|
|
163
|
-
If you want to import it in another script:
|
|
164
|
-
|
|
165
|
-
```javascript
|
|
166
|
-
import * as Survey from "survey-jquery";
|
|
167
|
-
```
|
|
168
|
-
|
|
169
|
-
## Building survey.js from sources
|
|
170
|
-
|
|
171
|
-
To build library yourself:
|
|
172
|
-
|
|
173
|
-
1. **Clone the repo from GitHub**
|
|
174
|
-
|
|
175
|
-
```
|
|
176
|
-
git clone https://github.com/surveyjs/survey-library.git
|
|
177
|
-
cd survey-library
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
2. **Acquire build dependencies.** Make sure you have [Node.js](http://nodejs.org/) installed on your workstation. You need a version of Node.js greater than 6.0.0 and npm greater than 2.7.0. This is only needed to _build_ surveyjs from sources.
|
|
181
|
-
|
|
182
|
-
```
|
|
183
|
-
npm install -g karma-cli
|
|
184
|
-
npm install
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
3. **Build the library**
|
|
188
|
-
|
|
189
|
-
```
|
|
190
|
-
npm run build_prod
|
|
191
|
-
```
|
|
192
|
-
|
|
193
|
-
After that you should have the libraries (angular, jquery, knockout, react and vue) at 'packages' directory.
|
|
15
|
+
A free and open-source MIT-licensed JavaScript form builder library that allows you to design dynamic, data-driven, multi-language survey forms and run them in your React applications.
|
|
194
16
|
|
|
195
|
-
|
|
17
|
+
## Features
|
|
196
18
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
19
|
+
- Dynamic forms, surveys, polls, and quizzes for your JavaScript application
|
|
20
|
+
- Integration with React, Angular, Vue, jQuery, and Knockout
|
|
21
|
+
- 20+ built-in question types and support for custom question types
|
|
22
|
+
- Built-in themes and CSS customization
|
|
23
|
+
- Answer validation
|
|
24
|
+
- TypeScript support
|
|
25
|
+
- Community-supported UI localization to 50+ languages
|
|
26
|
+
- Integration with any backend framework (examples for PHP, NodeJS, and ASP.NET included)
|
|
27
|
+
- Compatibility with any server + database combination
|
|
28
|
+
- Third-party component integration
|
|
200
29
|
|
|
201
|
-
|
|
202
|
-
You can open http://localhost:7777/examples/knockout to view KnockoutJS samples, http://localhost:7777/examples/react to view ReactJS samples and so on
|
|
30
|
+
## Get Started
|
|
203
31
|
|
|
204
|
-
|
|
205
|
-
```
|
|
206
|
-
karma start
|
|
207
|
-
```
|
|
208
|
-
This command will run unit tests using [Karma](https://karma-runner.github.io/0.13/index.html)
|
|
32
|
+
To get started with SurveyJS React Form Library, refer to the following tutorial: [Add a Survey to a React Application](https://surveyjs.io/Documentation/Library?id=get-started-react).
|
|
209
33
|
|
|
210
|
-
|
|
34
|
+
## Resources
|
|
211
35
|
|
|
212
|
-
[
|
|
36
|
+
- [Website](https://surveyjs.io/)
|
|
37
|
+
- [Documentation](https://surveyjs.io/Documentation/Library)
|
|
38
|
+
- [Live Examples](https://surveyjs.io/form-library/examples/nps-question/reactjs)
|
|
39
|
+
- [What's New](https://surveyjs.io/WhatsNew)
|
|
213
40
|
|
|
214
|
-
##
|
|
41
|
+
## Licensing
|
|
215
42
|
|
|
216
|
-
[MIT license](https://github.com/surveyjs/survey-library/blob/master/LICENSE)
|
|
43
|
+
SurveyJS Form Library is distributed under the [MIT license](https://github.com/surveyjs/survey-library/blob/master/LICENSE).
|
package/package.json
CHANGED
package/survey-react-ui.d.ts
CHANGED
|
@@ -29,6 +29,18 @@ declare module "react/reactquestion_factory" {
|
|
|
29
29
|
createQuestion(questionType: string, params: any): JSX.Element | null;
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
+
declare module "react/components/character-counter" {
|
|
33
|
+
import { Base, CharacterCounter } from "survey-core";
|
|
34
|
+
import { SurveyElementBase } from "react/reactquestion_element";
|
|
35
|
+
export interface ICharacterCounterComponentProps {
|
|
36
|
+
counter: CharacterCounter;
|
|
37
|
+
remainingCharacterCounter: string;
|
|
38
|
+
}
|
|
39
|
+
export class CharacterCounterComponent extends SurveyElementBase<ICharacterCounterComponentProps, any> {
|
|
40
|
+
protected getStateElement(): Base;
|
|
41
|
+
renderElement(): JSX.Element | null;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
32
44
|
declare module "react/reactquestion_comment" {
|
|
33
45
|
import { ReactSurveyElement, SurveyQuestionUncontrolledElement } from "react/reactquestion_element";
|
|
34
46
|
import { QuestionCommentModel } from "survey-core";
|
|
@@ -1067,15 +1079,33 @@ declare module "react/reactSurveyProgressButtons" {
|
|
|
1067
1079
|
componentWillUnmount(): void;
|
|
1068
1080
|
}
|
|
1069
1081
|
}
|
|
1082
|
+
declare module "react/components/rating/rating-item" {
|
|
1083
|
+
import { QuestionRatingModel, RenderedRatingItem } from "survey-core";
|
|
1084
|
+
import { SurveyElementBase } from "react/reactquestion_element";
|
|
1085
|
+
interface IRatingItemProps {
|
|
1086
|
+
question: QuestionRatingModel;
|
|
1087
|
+
data: RenderedRatingItem;
|
|
1088
|
+
index: any;
|
|
1089
|
+
handleOnClick: any;
|
|
1090
|
+
isDisplayMode: boolean;
|
|
1091
|
+
}
|
|
1092
|
+
export class RatingItem extends SurveyElementBase<IRatingItemProps, any> {
|
|
1093
|
+
get question(): QuestionRatingModel;
|
|
1094
|
+
get item(): RenderedRatingItem;
|
|
1095
|
+
get index(): any;
|
|
1096
|
+
getStateElement(): RenderedRatingItem;
|
|
1097
|
+
render(): JSX.Element | null;
|
|
1098
|
+
componentDidMount(): void;
|
|
1099
|
+
}
|
|
1100
|
+
}
|
|
1070
1101
|
declare module "react/reactquestion_rating" {
|
|
1071
1102
|
import { SurveyQuestionElementBase } from "react/reactquestion_element";
|
|
1072
|
-
import { QuestionRatingModel
|
|
1103
|
+
import { QuestionRatingModel } from "survey-core";
|
|
1073
1104
|
export class SurveyQuestionRating extends SurveyQuestionElementBase {
|
|
1074
1105
|
constructor(props: any);
|
|
1075
1106
|
protected get question(): QuestionRatingModel;
|
|
1076
1107
|
handleOnClick(event: any): void;
|
|
1077
1108
|
protected renderElement(): JSX.Element;
|
|
1078
|
-
protected renderItem(key: string, item: RenderedRatingItem, index: number, cssClasses: any): JSX.Element;
|
|
1079
1109
|
}
|
|
1080
1110
|
}
|
|
1081
1111
|
declare module "react/rating-dropdown" {
|
|
@@ -1368,6 +1398,7 @@ declare module "entries/react-ui-model" {
|
|
|
1368
1398
|
export { MatrixRow } from "react/components/matrix/row";
|
|
1369
1399
|
export { Skeleton } from "react/components/skeleton";
|
|
1370
1400
|
export { NotifierComponent } from "react/components/notifier";
|
|
1401
|
+
export { CharacterCounterComponent } from "react/components/character-counter";
|
|
1371
1402
|
export { SurveyLocStringViewer } from "react/string-viewer";
|
|
1372
1403
|
export { SurveyLocStringEditor } from "react/string-editor";
|
|
1373
1404
|
}
|