Form-answer is a React application whose purpose is to answer to a form created on the Particeep API.
Form-answer depends on Material icons. See installation instructions here.
There is two ways to integrate Form-answer to your application.
Then it's easy ! Install:
npm install https://github.com/Particeep/form-ui.git
Import the Form
component as follow:
import React, {Component} from "react";
import {Form} from "Form";
class App extends Component {
render = () =>
<Form
// fill params
/>
;
}
and pass the formReducer
to your store.
import {createStore, combineReducers} from 'redux'
import {formReducer} from 'Form';
const rootReducer = combineReducers({
// ...your other reducers here
form: formReducer
})
You must include the compiled sources in your project then call the React application. Passing params to the props is done through the window
variable as follow:
window.formAnswer = {
// fill params
}
<div id="form-answer-root"></div>
Variable | Type | Description |
---|---|---|
form |
Object | Form to answer fetched from the API |
messages |
Object (optional) | The component expected some text, like messages to display in case of error. Default messages are wrote in english. |
muiTheme |
Object (optional) | Define the theme for material-ui. The method createMuiTheme(...) is called inside this module. Default theme use blue as primary color and red as secondary. |
maxUploadFileSize |
number (optional) | Limit the size of the uploaded documents. If undefined, file size won't be checked |
dateFormat |
string (optional) | Expected format of the question of type date (eg. dd/MM/yyy, yyyy-MM-dd). If undefined, answers for this type of question are not validated. |
readonly |
boolean (optional) | If set to true, the form cannot be answered (default value is false) |
Functions | Parameters | Description |
---|---|---|
onChange |
answer : Object |
Whenever a change if performed on a question; answer is the answer that triggered the callback. |
onSectionEnd |
sectionAnswers : Array |
On pressing the next button of a section; sectionAnswers is an array of answers. |
onEnd |
answers : Array |
On pressing the last button of the form; answers is an array of answers. |
onUploadFile |
file : File, callback: Function({name, permalink}) |
Whenever a document is selected; file is the uploaded file, callback is a method which must be called to returned the uploaded file. At least two properties of the returned file are required: file and permalink . |
Methods attached to window.formAnswer
. Only available (and useful) when using the whole application.
Functions | Parameters | Description |
---|---|---|
updateForm |
form : Object |
Replace the current form by form . |
import React, {Component} from "react";
import {Form} from "Form";
class App extends Component {
render = () =>
<Form
form={this.getForm()}
messages={this.getMessages()}
muiTheme={this.getTheme()}
maxUploadFileSize={12}
onChange={this.changed}
onSectionEnd={this.sectionEnded}
onEnd={this.ended}
onUploadFile={this.uploadFile}/>
;
uploadFile = (file, callback) => {
console.log('uploadFile', file);
// Simulate uploading delay
setTimeout(() => callback({
name: file.name,
permalink: 'https://api.particeep.com/swagger'
}), 1000);
};
changed = (answer) => {
console.log('onChange', answer);
};
sectionEnded = (sectionAnswers) => {
console.log('onSectionEnd', sectionAnswers);
};
ended = (answers) => {
console.log('onEnd', answers);
};
getForm = () => ({
"id": "3ff1c761-c213-4c4e-b0b2-c66d2edc4961",
"name": "Party Invite",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"sections": [{
"id": "a17ds4e1-d655-4868-90b8-b79f22d35d73",
"form_id": "3ff1c761-c213-4c4e-b0b2-c66d2edc4961",
"name": "Personnal informations",
"index": 0,
"description": "Let us know what kind of dish(es) you'll be bringing",
"questions": [{
"id": "1b4afd5b-ffe8-4c38-917b-5c3ssbcf3e2f",
"section_id": "a17ds4e1-d655-4868-90b8-b79f22d35d73",
"label": "What is your name?",
"question_type": "TEXT",
"required": true,
"index": 0,
"answers": ["Particeep"]
}]
}]
});
getMessages = () => ({
search: 'Search...',
buttonNext: 'Next',
buttonEnd: 'End',
buttonPrevious: 'Previous',
upload: 'Choose file',
invalidFileSize: 'File limit exceed',
invalidDate: 'Date invalid',
invalidText: 'Invalid answer',
noFile: 'No file uploaded'
});
getTheme = () => ({
palette: {
primary: {
50: '#efebe9',
100: '#d7ccc8',
200: '#bcaaa4',
300: '#a1887f',
400: '#8d6e63',
500: '#795548',
600: '#6d4c41',
700: '#5d4037',
800: '#4e342e',
900: '#3e2723',
A100: '#d7ccc8',
A200: '#bcaaa4',
A400: '#8d6e63',
A700: '#5d4037'
},
}
});
}