}
38 | */
39 | @computed get visibleFieldsOfCurrentPage() {
40 | return this.visibleFields.filter(field => field.page === this.page);
41 | }
42 |
43 |
44 | constructor(formId, { settings, form, defaultValues = {} }) {
45 | this.key = formId;
46 | this.form = form;
47 | this.settings = settings;
48 |
49 | // Create all fields.
50 | this.form.elements.forEach(element => this.createField(element));
51 |
52 | // Set all default values.
53 | Object.keys(defaultValues).forEach((key) => {
54 | const field = this.getField(key);
55 | if(field) field.value = defaultValues[key];
56 | });
57 |
58 | // Start at the first page
59 | const page = this.fields.find(f => f.page !== 'no-page');
60 | if(page) this.page = page.page;
61 | }
62 |
63 | @action.bound
64 | createField(element, parent) {
65 | const field = new Field(this, element, parent);
66 | if(field.componentClass) this.fields.push(field);
67 |
68 | // If it has children, create them too.
69 | if(element.composite_elements) {
70 | element.composite_elements.forEach(e => this.createField(e, field));
71 | }
72 | }
73 |
74 | /**
75 | * @param key
76 | * @returns {Field}
77 | */
78 | getField(key) {
79 | return this.fields.find(field => field.key === key);
80 | }
81 |
82 | @computed get values() {
83 | const values = {};
84 |
85 | this.visibleFields.filter(field => !field.isEmpty).forEach((field) => {
86 | values[field.key] = typeof field.componentClass.rewriteValue === 'function' ? field.componentClass.rewriteValue(field.value, values) : field.value;
87 | });
88 |
89 | return values;
90 | }
91 |
92 | @computed get valid() {
93 | return !this.fields.find(field => field.visible && !field.valid);
94 | }
95 |
96 | isValid(page) {
97 | const invalid = this.fields.find((field) => {
98 | // Only check the current page
99 | if(!field.component || field.component.props.webformPage !== page) return false;
100 |
101 | // If an error was found, return true
102 | return !field.valid;
103 | });
104 |
105 | // If an error was found, return false
106 | return !invalid;
107 | }
108 |
109 | @computed get tokens() {
110 | const tokens = {};
111 | this.fields.forEach((field) => {
112 | tokens[field.key] = field.value;
113 | if(typeof field.componentClass.getTokens === 'function') {
114 | Object.assign(tokens, field.componentClass.getTokens(this, field));
115 | }
116 | });
117 | return tokens;
118 | }
119 |
120 | @observable isSubmitting = false;
121 |
122 | @action.bound
123 | isMultipage() {
124 | return (getNested(() => this.form.elements) || []).find(element => element['#webform_key'] === 'wizard_pages') !== undefined;
125 | }
126 |
127 | }
128 |
129 | export default Form;
130 |
--------------------------------------------------------------------------------
/src/Observables/Forms.js:
--------------------------------------------------------------------------------
1 | import { observable, action } from 'mobx';
2 | import Form from './Form';
3 |
4 | class Forms {
5 |
6 | @observable forms = {};
7 |
8 | getForm(formID, options) {
9 | if(this.forms[formID]) return this.forms[formID];
10 | else if(!options) throw Error('Tried to get a form ', formID, 'but the form was not initiated.');
11 |
12 | this.forms[formID] = Forms.createForm(formID, options);
13 |
14 | return this.forms[formID];
15 | }
16 |
17 | @action
18 | deleteForm(formID) {
19 | delete this.forms[formID];
20 | }
21 |
22 | @action
23 | static createForm(formID, options) {
24 | return new Form(formID, options);
25 | }
26 | }
27 |
28 | const form = new Forms();
29 |
30 | export default form;
31 |
--------------------------------------------------------------------------------
/src/ParagraphField/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { inject, observer } from 'mobx-react';
4 | import Parser, { template } from '../Parser';
5 | import FormStore from '../Observables/Form';
6 |
7 | @inject('formStore')
8 | @observer
9 | class ParagraphField extends Component {
10 | static propTypes = {
11 | field: PropTypes.shape({
12 | '#message_message': PropTypes.string,
13 | }).isRequired,
14 | formStore: PropTypes.instanceOf(FormStore).isRequired,
15 | };
16 |
17 | getFormattedMarkup() {
18 | return Parser(template(this.props.formStore, this.props.field['#message_message']));
19 | }
20 |
21 | render() {
22 | return (
23 | {this.getFormattedMarkup()}
24 | );
25 | }
26 | }
27 |
28 | export default ParagraphField;
29 |
--------------------------------------------------------------------------------
/src/Parser/index.js:
--------------------------------------------------------------------------------
1 | import Parser from 'react-html-parser';
2 | import { Html5Entities } from 'html-entities';
3 | import template from './template';
4 |
5 | const entities = new Html5Entities();
6 |
7 | export default function (string) {
8 | const decoded = entities.decode(string);
9 | return Parser(decoded);
10 | }
11 |
12 | export { template };
13 |
--------------------------------------------------------------------------------
/src/Parser/template.js:
--------------------------------------------------------------------------------
1 | const regex = /{{(\w+)}}/g;
2 |
3 | function parseTemplate(formStore, text) {
4 | // First check if it is really a string
5 | if(typeof text !== 'string' || typeof text.replace !== 'function') {
6 | console.info('Tried to template', text, 'but it doesn\'t have a replace function');
7 | return text;
8 | }
9 |
10 | return text.replace(regex, (found, variable) => formStore.tokens[variable]);
11 | }
12 |
13 | export default parseTemplate;
14 |
--------------------------------------------------------------------------------
/src/PhoneField/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | // styled
3 | import Phone from './styled/phone';
4 |
5 | const PhoneField = props => (
6 |
11 | );
12 |
13 | export default PhoneField;
14 |
--------------------------------------------------------------------------------
/src/PhoneField/styled/phone.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import Input from '../../Input';
3 |
4 | export default styled(Input)`
5 | -webkit-appearance: none;
6 | `;
7 |
--------------------------------------------------------------------------------
/src/RadioField/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import getNested from 'get-nested';
4 | import Parser from '../Parser';
5 | import WebformElement from '../WebformElement';
6 | import Field from '../Observables/Field';
7 | import Fieldset from '../Fieldset';
8 | // styled
9 | import Wrapper from './styled/wrapper';
10 | import RadioLabel from './styled/radio-label';
11 | import Radio from './styled/radio';
12 | import Indicator from './styled/indicator';
13 | import FieldsetFormRow from '../Fieldset/styled/wrapper';
14 |
15 | class RadioField extends Component {
16 | static meta = {
17 | wrapper: FieldsetFormRow,
18 | label: Fieldset.meta.label,
19 | wrapperProps: Fieldset.meta.wrapperProps,
20 | };
21 |
22 | static propTypes = {
23 | field: PropTypes.shape({
24 | '#required': PropTypes.bool,
25 | '#options': PropTypes.arrayOf(PropTypes.shape({
26 | value: PropTypes.node,
27 | text: PropTypes.node,
28 | })),
29 | '#webform_key': PropTypes.string.isRequired,
30 | '#title_display': PropTypes.string,
31 | '#options_display': PropTypes.string,
32 | }).isRequired,
33 | value: PropTypes.oneOfType([
34 | PropTypes.string,
35 | PropTypes.number,
36 | PropTypes.bool,
37 | ]).isRequired,
38 | webformElement: PropTypes.instanceOf(WebformElement).isRequired,
39 | onChange: PropTypes.func.isRequired,
40 | onBlur: PropTypes.func.isRequired,
41 | state: PropTypes.instanceOf(Field).isRequired,
42 | };
43 |
44 | getOptionPositionDisplay() {
45 | return this.props.field['#options_display'];
46 | }
47 |
48 | getLabelPositionDisplay() {
49 | return this.props.field['#title_display'];
50 | }
51 |
52 | render() {
53 | const wrapperAttrs = {
54 | 'aria-invalid': this.props.webformElement.isValid() ? null : true,
55 | 'aria-required': this.props.field['#required'] ? true : null,
56 | };
57 |
58 | return (
59 |
64 | {
65 | getNested(() => this.props.field['#options'], []).map((option, index) => {
66 | const labelKey = `${this.props.field['#webform_key']}_${index}`;
67 | return (
68 |
73 |
83 |
84 | {Parser(option.text)}
85 |
86 | );
87 | })
88 | }
89 |
90 | );
91 | }
92 | }
93 |
94 | export default RadioField;
95 |
--------------------------------------------------------------------------------
/src/RadioField/styled/indicator.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.span`
4 | content: '';
5 | display: inline-block;
6 | width: ${p => p.theme.spacingUnitRadio};
7 | height: ${p => p.theme.spacingUnitRadio};
8 | margin-right: calc(${p => p.theme.spacingUnitRadio} / 2);
9 | background-color: ${p => p.theme.inputBgColor};
10 | border: 1px solid ${p => p.theme.borderColor};
11 | border-radius: 50%;
12 | `;
13 |
--------------------------------------------------------------------------------
/src/RadioField/styled/radio-label.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.label`
4 | display: block;
5 | margin-bottom: calc(${p => p.theme.spacingUnit} / 3);
6 | line-height: ${p => p.theme.inputLineHeight};
7 |
8 | ${p => [
9 | 'side_by_side',
10 | 'two_columns',
11 | 'three_columns',
12 | ].includes(p.optionDisplay) && `
13 | margin-right: calc(${p.theme.spacingUnit} / 1);
14 | display: inline-block;
15 | width: auto;
16 | `}
17 | `;
18 |
--------------------------------------------------------------------------------
/src/RadioField/styled/radio.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import Indicator from './indicator';
3 |
4 | export default styled.input`
5 | /* Reset anything that could peek out or interfere with dimensions, but don't use display:none for WCAG */
6 | position: absolute;
7 | overflow: hidden;
8 | margin: 0;
9 | padding: 0;
10 | border: 0;
11 | outline: 0;
12 | opacity: 0;
13 |
14 | &:focus {
15 | & + ${Indicator} {
16 | box-shadow: 0 0 2px 3px ${p => p.theme.focusColor};
17 | }
18 | }
19 |
20 | &:checked {
21 | & + ${Indicator} {
22 | position: relative;
23 |
24 | &::before {
25 | content: '';
26 | position: absolute;
27 | top: 25%;
28 | left: 25%;
29 | width: 50%;
30 | height: 50%;
31 | background-color: ${p => p.theme.checkedColor};
32 | border-radius: 50%;
33 | }
34 | }
35 | }
36 | `;
37 |
--------------------------------------------------------------------------------
/src/RadioField/styled/wrapper.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.div`
4 | @media (min-width: 768px) {
5 | display: inline-block;
6 | float: left;
7 | }
8 |
9 | ${p => p.labelDisplay === 'inline' && `
10 | width: calc(${p.theme.inlineLabelWidth} - (${p.theme.spacingUnit} / 2) - 0.5em);
11 | `}
12 |
13 | ${p => p.labelDisplay === 'before' && `
14 | float: none;
15 | width: 100%;
16 | `}
17 | `;
18 |
--------------------------------------------------------------------------------
/src/RangeField/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import WebformElement from '../WebformElement';
4 | // styled
5 | import Wrapper from './styled/wrapper';
6 | import Range from './styled/range';
7 | import RangeValueWrapper from './styled/range-value-wrapper';
8 | import RangeValue from './styled/range-value';
9 | import ValidationIcon from './styled/validation-icon';
10 |
11 | class RangeField extends Component {
12 | static propTypes = {
13 | field: PropTypes.shape({
14 | '#title_display': PropTypes.string,
15 | '#min': PropTypes.string,
16 | '#max': PropTypes.string,
17 | }).isRequired,
18 | value: PropTypes.oneOfType([
19 | PropTypes.string,
20 | PropTypes.number,
21 | PropTypes.bool,
22 | ]).isRequired,
23 | onChange: PropTypes.func.isRequired,
24 | webformElement: PropTypes.instanceOf(WebformElement).isRequired,
25 | };
26 |
27 | componentDidMount() {
28 | // rewrite to 0 if not numeric
29 | const value = !isNaN(parseFloat(this.props.value)) && isFinite(this.props.value) ? this.props.value : 0;
30 | this.props.onChange(value);
31 | }
32 |
33 | getLabelPosition() {
34 | return this.props.field['#title_display'];
35 | }
36 |
37 | getPercentageValue() {
38 | const minValue = parseFloat(this.props.field['#min']);
39 | const range = parseFloat(this.props.field['#max']) - minValue;
40 | let rangeValue = (this.props.value - minValue) / range;
41 | rangeValue = isFinite(rangeValue) ? rangeValue : 0;
42 | rangeValue = rangeValue > 0 ? rangeValue : 0;
43 |
44 | return rangeValue * 100;
45 | }
46 |
47 | render() {
48 | return (
49 |
50 |
51 |
55 |
56 | {this.props.value}
57 |
58 |
59 |
60 |
61 | );
62 | }
63 | }
64 |
65 | export default RangeField;
66 |
--------------------------------------------------------------------------------
/src/RangeField/styled/range-value-wrapper.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.span`
4 | box-sizing: border-box;
5 | position: relative;
6 | display: inline-block;
7 | padding-left: 7px;
8 | padding-right: 7px;
9 | width: 100%;
10 | `;
11 |
--------------------------------------------------------------------------------
/src/RangeField/styled/range-value.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.span`
4 | display: inline-block;
5 | position: relative;
6 | line-height: 20px;
7 | text-align: center;
8 | border-radius: ${p => p.theme.borderRadius};
9 | background: ${p => p.theme.borderColor};
10 | padding: 5px 10px;
11 | margin-top: 7px;
12 | transform: translateX(-50%);
13 |
14 | &::after {
15 | content: '';
16 | width: 0;
17 | height: 0;
18 | position: absolute;
19 | left: 50%;
20 | top: -7px;
21 | transform: translateX(-50%);
22 | border-left: 7px solid transparent;
23 | border-bottom: 7px solid ${p => p.theme.borderColor};
24 | border-right: 7px solid transparent;
25 | }
26 | `;
27 |
--------------------------------------------------------------------------------
/src/RangeField/styled/range.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import BaseInput from '../../BaseInput/styled/input';
3 |
4 | export default styled(BaseInput)`
5 | color: #000;
6 | padding-left: 0;
7 | padding-right: 0;
8 | margin-left: 0;
9 | margin-right: 0;
10 |
11 | &:focus {
12 | box-shadow: none;
13 | }
14 |
15 | &::-webkit-slider-thumb,
16 | &::-moz-range-thumb,
17 | &::-ms-thumb {
18 | &:focus {
19 | box-shadow: 0 0 2px 3px ${p => p.theme.focusColor};
20 | }
21 | }
22 | `;
23 |
--------------------------------------------------------------------------------
/src/RangeField/styled/validation-icon.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import ValidationIcon from '../../BaseInput/styled/validation-icon';
3 |
4 | export default styled(ValidationIcon)`
5 | position: absolute;
6 | right: 0;
7 | top: 10px;
8 | `;
9 |
--------------------------------------------------------------------------------
/src/RangeField/styled/wrapper.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.div`
4 | position: relative;
5 | margin: 0 0 calc(${p => p.theme.spacingUnit} / 2);
6 |
7 | @media (min-width: 768px) {
8 | display: inline-block;
9 | float: left;
10 | }
11 |
12 | & input {
13 | width: 100%;
14 | }
15 |
16 | ${p => p.labelDisplay === 'inline' && `
17 | width: calc(${p.theme.inputWidth} + 20px);
18 | padding-right: 20px;
19 | `}
20 |
21 | ${p => p.labelDisplay === 'before' && `
22 | width: calc(${p.theme.inputWidth} + 20px);
23 | padding-right: 20px;
24 |
25 | @media (min-width: 768px) {
26 | width: calc(${p.theme.inlineLabelWidth} + ${p.theme.inputWidth} + 20px);
27 | }
28 | `}
29 | `;
30 |
--------------------------------------------------------------------------------
/src/Relation/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import getNested from 'get-nested';
3 | import PropTypes from 'prop-types';
4 | import { observer } from 'mobx-react';
5 | import { get } from 'mobx';
6 | import composeLookUp from '../LookUp';
7 | import Fieldset from '../Fieldset';
8 | import RuleHint from '../RuleHint';
9 | import rules from '../Webform/rules';
10 | import FormStore from '../Observables/Form';
11 | import WebformUtils from '../WebformUtils';
12 | // styled
13 | import ValidationMessage from '../LookUp/styled/validation-message';
14 |
15 | @observer
16 | class Relation extends Component {
17 | static meta = {
18 | labelVisibility: Fieldset.meta.labelVisibility,
19 | validations: [el => `relation_membership_${el.key}`],
20 | hasValue: false,
21 | };
22 |
23 | static propTypes = {
24 | field: PropTypes.shape({
25 | '#webform_key': PropTypes.string.isRequired,
26 | '#relationError': PropTypes.string,
27 | '#membership_validation': PropTypes.oneOfType([
28 | PropTypes.number,
29 | PropTypes.bool,
30 | ]),
31 | composite_elements: PropTypes.arrayOf(PropTypes.shape()),
32 | }).isRequired,
33 | fields: PropTypes.arrayOf(PropTypes.shape()).isRequired,
34 | onBlur: PropTypes.func.isRequired,
35 | formKeySuffix: PropTypes.string.isRequired,
36 | formStore: PropTypes.instanceOf(FormStore).isRequired,
37 | url: PropTypes.string.isRequired,
38 | settings: PropTypes.shape().isRequired,
39 | registerLookUp: PropTypes.func.isRequired,
40 | };
41 |
42 | constructor(props) {
43 | super(props);
44 |
45 | this.lookUpFields = {
46 | relation_number: {
47 | elementKey: 'relation_number',
48 | formKey: `relation_number${props.formKeySuffix}`,
49 | triggerLookUp: true,
50 | apiValue: () => false,
51 | required: true,
52 | },
53 | postcode: {
54 | elementKey: 'postcode',
55 | formKey: `address_postcode${this.fullAddressLookUp() ? `-${this.fullAddressLookUp()}` : props.formKeySuffix}`,
56 | triggerLookUp: true,
57 | apiValue: () => false,
58 | required: true,
59 | },
60 | };
61 |
62 | this.lookUpBase = `${props.url}/salesforce-lookup/contact?_format=json`;
63 |
64 | const lookUpKey = this.getLookUpKey(props);
65 | const field = props.formStore.getField(props.field['#webform_key']);
66 |
67 | rules.set(`relation_membership_${props.field['#webform_key']}`, {
68 | rule: () => {
69 | const lookUp = get(field.lookUps, lookUpKey);
70 | return !field.element['#membership_validation'] || !lookUp || !lookUp.lookUpSent || (
71 | lookUp.lookUpSent && lookUp.lookUpSuccessful
72 | );
73 | },
74 | hint: () => null,
75 | shouldValidate: () => props.fields.reduce((shouldValidate, item) =>
76 | shouldValidate && !item.isEmpty && item.isBlurred && item.valid,
77 | true,
78 | ),
79 | });
80 |
81 | props.registerLookUp(lookUpKey, this.lookUpFields);
82 | }
83 |
84 | getLookUpKey(props) {
85 | return `${(
86 | props || this.props
87 | ).field['#webform_key']}-relation`;
88 | }
89 |
90 | /**
91 | * If Relation field has full address element, get its webform key to add as suffix to fields.
92 | * @returns {bool|string} Returns false if not full address field (i.e. postcode only) or string of address webform key.
93 | */
94 | fullAddressLookUp() {
95 | return getNested(() => this.props.field.composite_elements.find(element => element['#type'] === 'webform_address_custom' || element['#type'] === 'dutch_address')['#webform_key']);
96 | }
97 |
98 | prepareLookUp(fields) {
99 | const performLookUp = this.props.fields.reduce((shouldValidate, item) =>
100 | shouldValidate && !item.isEmpty && item.isBlurred && item.valid,
101 | true,
102 | );
103 |
104 | if(!performLookUp) {
105 | return false;
106 | }
107 |
108 | const query = `&relation=${fields.relation_number}&postal_code=${fields.postcode}`;
109 |
110 | return {
111 | query,
112 | checkResponse: json => (json.Id && (!this.props.field['#membership_validation'] || parseInt(json.Aantal_lidmaatschappen__c, 10) > 0)) || false,
113 | isSuccessful: response => (!!response),
114 | };
115 | }
116 |
117 | render() {
118 | const field = this.props.formStore.getField(this.lookUpFields.relation_number.formKey);
119 | const lookUpKey = this.getLookUpKey();
120 | const lookUp = get(field.lookUps, lookUpKey);
121 |
122 | return (
123 |
128 | );
129 | }
130 | }
131 |
132 | export default composeLookUp(Relation);
133 |
--------------------------------------------------------------------------------
/src/RuleHint/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { inject } from 'mobx-react';
4 | import Parser, { template } from '../Parser';
5 | import FormStore from '../Observables/Form';
6 | // styled
7 | import ValidationMessage from './styled/validation-message';
8 |
9 | @inject('formStore')
10 | class RuleHint extends Component {
11 | static propTypes = {
12 | hint: PropTypes.oneOfType([
13 | PropTypes.string,
14 | PropTypes.element,
15 | ]).isRequired,
16 | tokens: PropTypes.objectOf(PropTypes.node),
17 | component: PropTypes.oneOfType([
18 | PropTypes.string,
19 | PropTypes.shape({
20 | type: PropTypes.string.isRequired,
21 | props: PropTypes.shape({
22 | className: PropTypes.string,
23 | }),
24 | }),
25 | PropTypes.node,
26 | ]),
27 | formStore: PropTypes.instanceOf(FormStore).isRequired,
28 | };
29 |
30 | static defaultProps = {
31 | tokens: {},
32 | tokenCharacter: ':',
33 | component: 'li',
34 | }
35 |
36 | getHint() {
37 | const { tokens } = this.props;
38 | let hint = this.props.hint;
39 | Object.keys(tokens).forEach((token) => {
40 | hint = hint.replace(new RegExp(`{{${token}}}`, 'g'), tokens[token]);
41 | });
42 |
43 | return hint;
44 | }
45 |
46 | render() {
47 | const hint = this.getHint();
48 | const RuleComponent = ValidationMessage.withComponent(this.props.component.type || this.props.component);
49 | return (
50 |
51 |
52 | {Parser(template(this.props.formStore, hint))}
53 |
54 |
55 | );
56 | }
57 | }
58 |
59 | export default RuleHint;
60 |
--------------------------------------------------------------------------------
/src/RuleHint/styled/validation-message.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.li`
4 | padding: 2px 0 0;
5 | list-style-type: none;
6 | color: ${p => p.theme.errorColor};
7 | `;
8 |
--------------------------------------------------------------------------------
/src/SelectField/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import Select from 'react-select';
4 | import WebformElement from '../WebformElement';
5 | // styled
6 | import Wrapper from './styled/wrapper';
7 | import ValidationIcon from './styled/validation-icon';
8 |
9 | /**
10 | * Select2
11 | * @source https://github.com/JedWatson/react-select
12 | */
13 |
14 | class SelectField extends Component {
15 | static propTypes = {
16 | field: PropTypes.shape({
17 | '#title_display': PropTypes.string.string,
18 | '#options': PropTypes.arrayOf(PropTypes.shape({
19 | value: PropTypes.node,
20 | text: PropTypes.node,
21 | })),
22 | '#webform_key': PropTypes.string.isRequired,
23 | '#multiple': PropTypes.bool,
24 | '#empty_option': PropTypes.string,
25 | }).isRequired,
26 | value: PropTypes.oneOfType([
27 | PropTypes.string,
28 | PropTypes.number,
29 | PropTypes.bool,
30 | ]).isRequired,
31 | webformElement: PropTypes.instanceOf(WebformElement).isRequired,
32 | onChange: PropTypes.func.isRequired,
33 | onBlur: PropTypes.func.isRequired,
34 | state: PropTypes.shape({
35 | required: PropTypes.bool.isRequired,
36 | enabled: PropTypes.bool.isRequired,
37 | }).isRequired,
38 | };
39 |
40 | constructor(props) {
41 | super(props);
42 |
43 | this.handleChange = this.handleChange.bind(this);
44 | }
45 |
46 | getLabelPosition() {
47 | return this.props.webformElement.getLabelDisplay();
48 | }
49 |
50 | handleChange(value) {
51 | const newValue = value || '';
52 | if(newValue && newValue.value) {
53 | this.props.onChange(newValue.value);
54 | } else {
55 | this.props.onChange(newValue);
56 | }
57 | }
58 |
59 | render() {
60 | const options = this.props.field['#options'] || {};
61 | const mappedOptions = options.map(option => ({
62 | label: option.text,
63 | value: option.value,
64 | }));
65 | return (
66 |
71 |
86 |
87 |
88 | );
89 | }
90 | }
91 |
92 | export default SelectField;
93 |
--------------------------------------------------------------------------------
/src/SelectField/styled/validation-icon.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import ValidationIcon from '../../BaseInput/styled/validation-icon';
3 |
4 | export default styled(ValidationIcon)`
5 | position: absolute;
6 | right: 0;
7 | top: 10px;
8 |
9 | ${p => p.success && `
10 | &::after {
11 | position: relative;
12 | top: -5px;
13 | }
14 | `}
15 | `;
16 |
--------------------------------------------------------------------------------
/src/SelectField/styled/wrapper.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.div`
4 | /**
5 | * React Select
6 | * ============
7 | * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
8 | * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
9 | * MIT License: https://github.com/JedWatson/react-select
10 | */
11 | .Select {
12 | position: relative;
13 | }
14 | .Select,
15 | .Select div,
16 | .Select input,
17 | .Select span {
18 | -webkit-box-sizing: border-box;
19 | -moz-box-sizing: border-box;
20 | box-sizing: border-box;
21 | }
22 | .Select.is-disabled > .Select-control {
23 | background-color: #f9f9f9;
24 | }
25 | .Select.is-disabled > .Select-control:hover {
26 | box-shadow: none;
27 | }
28 | .Select.is-disabled .Select-arrow-zone {
29 | cursor: default;
30 | pointer-events: none;
31 | opacity: 0.35;
32 | }
33 | .Select-control {
34 | background-color: #fff;
35 | border-color: #d9d9d9 #ccc #b3b3b3;
36 | border-radius: 4px;
37 | border: 1px solid #ccc;
38 | color: #333;
39 | cursor: default;
40 | display: table;
41 | border-spacing: 0;
42 | border-collapse: separate;
43 | height: 36px;
44 | outline: none;
45 | overflow: hidden;
46 | position: relative;
47 | width: 100%;
48 | }
49 | .Select-control:hover {
50 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
51 | }
52 | .Select-control .Select-input:focus {
53 | outline: none;
54 | }
55 | .is-searchable.is-open > .Select-control {
56 | cursor: text;
57 | }
58 | .is-open > .Select-control {
59 | border-bottom-right-radius: 0;
60 | border-bottom-left-radius: 0;
61 | background: #fff;
62 | border-color: #b3b3b3 #ccc #d9d9d9;
63 | }
64 | .is-open > .Select-control .Select-arrow {
65 | top: -2px;
66 | border-color: transparent transparent #999;
67 | border-width: 0 5px 5px;
68 | }
69 | .is-searchable.is-focused:not(.is-open) > .Select-control {
70 | cursor: text;
71 | }
72 | .is-focused:not(.is-open) > .Select-control {
73 | border-color: #007eff;
74 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1);
75 | }
76 | .Select-placeholder,
77 | .Select--single > .Select-control .Select-value {
78 | bottom: 0;
79 | color: #aaa;
80 | left: 0;
81 | line-height: 34px;
82 | padding-left: 10px;
83 | padding-right: 10px;
84 | position: absolute;
85 | right: 0;
86 | top: 0;
87 | max-width: 100%;
88 | overflow: hidden;
89 | text-overflow: ellipsis;
90 | white-space: nowrap;
91 | }
92 | .has-value.is-clearable.Select--single > .Select-control .Select-value {
93 | padding-right: 42px;
94 | }
95 | .has-value.Select--single > .Select-control .Select-value .Select-value-label,
96 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
97 | color: #333;
98 | }
99 | .has-value.Select--single > .Select-control .Select-value a.Select-value-label,
100 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {
101 | cursor: pointer;
102 | text-decoration: none;
103 | }
104 | .has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,
105 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,
106 | .has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,
107 | .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {
108 | color: #007eff;
109 | outline: none;
110 | text-decoration: underline;
111 | }
112 | .Select-input {
113 | height: 34px;
114 | padding-left: 10px;
115 | padding-right: 10px;
116 | vertical-align: middle;
117 | }
118 | .Select-input > input {
119 | width: 100%;
120 | background: none transparent;
121 | border: 0 none;
122 | box-shadow: none;
123 | cursor: default;
124 | display: inline-block;
125 | font-family: inherit;
126 | font-size: inherit;
127 | margin: 0;
128 | outline: none;
129 | line-height: 14px;
130 | /* For IE 8 compatibility */
131 | padding: 8px 0 12px;
132 | /* For IE 8 compatibility */
133 | -webkit-appearance: none;
134 | }
135 | .is-focused .Select-input > input {
136 | cursor: text;
137 | }
138 | .has-value.is-pseudo-focused .Select-input {
139 | opacity: 0;
140 | }
141 | .Select-control:not(.is-searchable) > .Select-input {
142 | outline: none;
143 | }
144 | .Select-loading-zone {
145 | cursor: pointer;
146 | display: table-cell;
147 | position: relative;
148 | text-align: center;
149 | vertical-align: middle;
150 | width: 16px;
151 | }
152 | .Select-loading {
153 | -webkit-animation: Select-animation-spin 400ms infinite linear;
154 | -o-animation: Select-animation-spin 400ms infinite linear;
155 | animation: Select-animation-spin 400ms infinite linear;
156 | width: 16px;
157 | height: 16px;
158 | box-sizing: border-box;
159 | border-radius: 50%;
160 | border: 2px solid #ccc;
161 | border-right-color: #333;
162 | display: inline-block;
163 | position: relative;
164 | vertical-align: middle;
165 | }
166 | .Select-clear-zone {
167 | -webkit-animation: Select-animation-fadeIn 200ms;
168 | -o-animation: Select-animation-fadeIn 200ms;
169 | animation: Select-animation-fadeIn 200ms;
170 | color: #999;
171 | cursor: pointer;
172 | display: table-cell;
173 | position: relative;
174 | text-align: center;
175 | vertical-align: middle;
176 | width: 17px;
177 | }
178 | .Select-clear-zone:hover {
179 | color: #D0021B;
180 | }
181 | .Select-clear {
182 | display: inline-block;
183 | font-size: 18px;
184 | line-height: 1;
185 | }
186 | .Select--multi .Select-clear-zone {
187 | width: 17px;
188 | }
189 | .Select-arrow-zone {
190 | cursor: pointer;
191 | display: table-cell;
192 | position: relative;
193 | text-align: center;
194 | vertical-align: middle;
195 | width: 25px;
196 | padding-right: 5px;
197 | }
198 | .Select-arrow {
199 | border-color: #999 transparent transparent;
200 | border-style: solid;
201 | border-width: 5px 5px 2.5px;
202 | display: inline-block;
203 | height: 0;
204 | width: 0;
205 | position: relative;
206 | }
207 | .is-open .Select-arrow,
208 | .Select-arrow-zone:hover > .Select-arrow {
209 | border-top-color: #666;
210 | }
211 | .Select--multi .Select-multi-value-wrapper {
212 | display: inline-block;
213 | }
214 | .Select .Select-aria-only {
215 | display: inline-block;
216 | height: 1px;
217 | width: 1px;
218 | margin: -1px;
219 | clip: rect(0, 0, 0, 0);
220 | overflow: hidden;
221 | float: left;
222 | }
223 | @-webkit-keyframes Select-animation-fadeIn {
224 | from {
225 | opacity: 0;
226 | }
227 | to {
228 | opacity: 1;
229 | }
230 | }
231 | @keyframes Select-animation-fadeIn {
232 | from {
233 | opacity: 0;
234 | }
235 | to {
236 | opacity: 1;
237 | }
238 | }
239 | .Select-menu-outer {
240 | border-bottom-right-radius: 4px;
241 | border-bottom-left-radius: 4px;
242 | background-color: #fff;
243 | border: 1px solid #ccc;
244 | border-top-color: #e6e6e6;
245 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
246 | box-sizing: border-box;
247 | margin-top: -1px;
248 | max-height: 200px;
249 | position: absolute;
250 | top: 100%;
251 | width: 100%;
252 | z-index: 1;
253 | -webkit-overflow-scrolling: touch;
254 | }
255 | .Select-menu {
256 | max-height: 198px;
257 | overflow-y: auto;
258 | }
259 | .Select-option {
260 | box-sizing: border-box;
261 | background-color: #fff;
262 | color: #666666;
263 | cursor: pointer;
264 | display: block;
265 | padding: 8px 10px;
266 | }
267 | .Select-option:last-child {
268 | border-bottom-right-radius: 4px;
269 | border-bottom-left-radius: 4px;
270 | }
271 | .Select-option.is-selected {
272 | background-color: #f5faff;
273 | /* Fallback color for IE 8 */
274 | background-color: rgba(0, 126, 255, 0.04);
275 | color: #333;
276 | }
277 | .Select-option.is-focused {
278 | background-color: #ebf5ff;
279 | /* Fallback color for IE 8 */
280 | background-color: rgba(0, 126, 255, 0.08);
281 | color: #333;
282 | }
283 | .Select-option.is-disabled {
284 | color: #cccccc;
285 | cursor: default;
286 | }
287 | .Select-noresults {
288 | box-sizing: border-box;
289 | color: #999999;
290 | cursor: default;
291 | display: block;
292 | padding: 8px 10px;
293 | }
294 | .Select--multi .Select-input {
295 | vertical-align: middle;
296 | margin-left: 10px;
297 | padding: 0;
298 | }
299 | .Select--multi.has-value .Select-input {
300 | margin-left: 5px;
301 | }
302 | .Select--multi .Select-value {
303 | background-color: #ebf5ff;
304 | /* Fallback color for IE 8 */
305 | background-color: rgba(0, 126, 255, 0.08);
306 | border-radius: 2px;
307 | border: 1px solid #c2e0ff;
308 | /* Fallback color for IE 8 */
309 | border: 1px solid rgba(0, 126, 255, 0.24);
310 | color: #007eff;
311 | display: inline-block;
312 | font-size: 0.9em;
313 | line-height: 1.4;
314 | margin-left: 5px;
315 | margin-top: 5px;
316 | vertical-align: top;
317 | }
318 | .Select--multi .Select-value-icon,
319 | .Select--multi .Select-value-label {
320 | display: inline-block;
321 | vertical-align: middle;
322 | }
323 | .Select--multi .Select-value-label {
324 | border-bottom-right-radius: 2px;
325 | border-top-right-radius: 2px;
326 | cursor: default;
327 | padding: 2px 5px;
328 | }
329 | .Select--multi a.Select-value-label {
330 | color: #007eff;
331 | cursor: pointer;
332 | text-decoration: none;
333 | }
334 | .Select--multi a.Select-value-label:hover {
335 | text-decoration: underline;
336 | }
337 | .Select--multi .Select-value-icon {
338 | cursor: pointer;
339 | border-bottom-left-radius: 2px;
340 | border-top-left-radius: 2px;
341 | border-right: 1px solid #c2e0ff;
342 | /* Fallback color for IE 8 */
343 | border-right: 1px solid rgba(0, 126, 255, 0.24);
344 | padding: 1px 5px 3px;
345 | }
346 | .Select--multi .Select-value-icon:hover,
347 | .Select--multi .Select-value-icon:focus {
348 | background-color: #d8eafd;
349 | /* Fallback color for IE 8 */
350 | background-color: rgba(0, 113, 230, 0.08);
351 | color: #0071e6;
352 | }
353 | .Select--multi .Select-value-icon:active {
354 | background-color: #c2e0ff;
355 | /* Fallback color for IE 8 */
356 | background-color: rgba(0, 126, 255, 0.24);
357 | }
358 | .Select--multi.is-disabled .Select-value {
359 | background-color: #fcfcfc;
360 | border: 1px solid #e3e3e3;
361 | color: #333;
362 | }
363 | .Select--multi.is-disabled .Select-value-icon {
364 | cursor: not-allowed;
365 | border-right: 1px solid #e3e3e3;
366 | }
367 | .Select--multi.is-disabled .Select-value-icon:hover,
368 | .Select--multi.is-disabled .Select-value-icon:focus,
369 | .Select--multi.is-disabled .Select-value-icon:active {
370 | background-color: #fcfcfc;
371 | }
372 | @keyframes Select-animation-spin {
373 | to {
374 | transform: rotate(1turn);
375 | }
376 | }
377 | @-webkit-keyframes Select-animation-spin {
378 | to {
379 | -webkit-transform: rotate(1turn);
380 | }
381 | }
382 |
383 | .Select {
384 | display: inline-block;
385 | width: 100%;
386 | }
387 |
388 | .Select-control {
389 | color: inherit;
390 | border: 1px solid ${p => p.theme.borderColor};
391 | background-color: ${p => p.theme.inputBgColor};
392 | border-radius: ${p => p.theme.borderRadius};
393 | height: ${p => p.theme.inputLineHeight};
394 | line-height: ${p => p.theme.inputLineHeight};
395 | width: 100%;
396 | max-width: 100%;
397 | overflow: visible;
398 | margin: 0 0 calc(${p => p.theme.spacingUnit} / 2);
399 | }
400 |
401 | .is-focused:not(.is-open) > .Select-control {
402 | outline: none;
403 | box-shadow: 0 0 2px 3px ${p => p.theme.focusColor};
404 | }
405 |
406 | .Select-placeholder,
407 | .Select--single > .Select-control .Select-value {
408 | padding: 0 calc(${p => p.theme.spacingUnit} / 2);
409 | font-size: 0.9em;
410 | position: static;
411 | }
412 |
413 | .Select-input {
414 | height: inherit;
415 | position: absolute;
416 | }
417 |
418 | .Select-input > input {
419 | padding: 0;
420 | }
421 |
422 | .Select-placeholder {
423 | color: ${p => p.theme.placeholderColor};
424 | }
425 |
426 | .Select-menu-outer {
427 | border-bottom-right-radius: ${p => p.theme.borderRadius};
428 | border-bottom-left-radius: ${p => p.theme.borderRadius};
429 | border-bottom-color: ${p => p.theme.borderColor};
430 | border-left-color: ${p => p.theme.borderColor};
431 | border-right-color: ${p => p.theme.borderColor};
432 | }
433 |
434 | .Select-option {
435 | padding: calc(${p => p.theme.spacingUnit} / 4) calc(${p => p.theme.spacingUnit} / 2);
436 | background-color: ${p => p.theme.inputBgColor};
437 | color: inherit;
438 | font-size: 0.9em;
439 | }
440 |
441 | .Select-option.is-focused {
442 | color: inherit;
443 | background-color: rgba(0, 0, 0, 0.2);
444 | }
445 |
446 | .Select-option:last-child {
447 | border-bottom-right-radius: ${p => p.theme.borderRadius};
448 | border-bottom-left-radius: ${p => p.theme.borderRadius};
449 | }
450 |
451 | .Select-clear-zone {
452 | display: none;
453 | padding-right: 3px;
454 | padding-bottom: 3px;
455 | }
456 |
457 | .Select-arrow-zone {
458 | padding-top: 5px;
459 | }
460 |
461 | position: relative;
462 | width: calc(${p => p.theme.inputWidth} + 20px);
463 | padding-right: 20px;
464 | max-width: calc(100% + 20px);
465 |
466 | @media (min-width: 768px) {
467 | width: calc(${p => p.theme.inlineLabelWidth} + ${p => p.theme.inputWidth} + 20px);
468 | }
469 |
470 | ${p => p.labelDisplay === 'inline' && `
471 | width: calc(${p.theme.inputWidth} + 20px);
472 | padding-right: 20px;
473 |
474 | @media (min-width: 768px) {
475 | display: inline-block;
476 | width: calc(${p.theme.inputWidth} * 1.3);
477 | }
478 |
479 | & .Select-placeholder,
480 | & .Select--single > .Select-control .Select-value {
481 | max-width: calc(${p.theme.inputWidth} - 25px);
482 | overflow: hidden;
483 | }
484 | `}
485 |
486 | ${p => p.labelDisplay === 'before' && `
487 | & .Select-placeholder,
488 | & .Select--single > .Select-control .Select-value {
489 | max-width: calc(100% - 25px);
490 | white-space: normal; /* since we're working with percentual width, we need the line to wrap */
491 | }
492 |
493 | & .Select--single > .Select-control .Select-value {
494 | height: calc((${p.theme.spacingUnit} / 2) + ${p.theme.inputLineHeight});
495 | overflow: hidden;
496 | }
497 | `}
498 |
499 | ${p => !p.success && `
500 | & .Select-control {
501 | border-color: ${p.theme.errorColor};
502 | background-color: ${p.theme.errorBgColor};
503 | }
504 |
505 | & .Select-menu-outer {
506 | border-bottom-color: ${p.theme.errorColor};
507 | border-left-color: ${p.theme.errorColor};
508 | border-right-color: ${p.theme.errorColor};
509 | }
510 |
511 | & .Select-placeholder {
512 | color: ${p.theme.errorColor};
513 | }
514 | `}
515 | `;
516 |
--------------------------------------------------------------------------------
/src/SubmitButton/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { observer, inject } from 'mobx-react';
4 | import Webform from '../Webform';
5 | import { template } from '../Parser';
6 | import BaseButton from '../BaseButton';
7 | import FormStore from '../Observables/Form';
8 |
9 | const SubmitButton = ({ field, formStore, status, show, loadingTimeout, loadingComponent }) => {
10 | if(field['#submit__hide'] === true || (show === false && formStore.isMultipage())) {
11 | return null;
12 | }
13 |
14 | const disabled = status === Webform.formStates.PENDING;
15 |
16 | const label = template(formStore, field['#submit__label']);
17 |
18 | if(!label || label === '') {
19 | return null;
20 | }
21 |
22 | return (
23 |
24 |
30 | {loadingTimeout && (
31 | loadingComponent
32 | )}
33 |
34 | );
35 | };
36 |
37 | SubmitButton.meta = {
38 | labelVisibility: 'invisible',
39 | };
40 |
41 | SubmitButton.propTypes = {
42 | field: PropTypes.shape().isRequired,
43 | status: PropTypes.string.isRequired,
44 | formStore: PropTypes.instanceOf(FormStore).isRequired,
45 | show: PropTypes.bool,
46 | loadingTimeout: PropTypes.bool.isRequired,
47 | loadingComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
48 | };
49 |
50 | SubmitButton.defaultProps = {
51 | type: 'button',
52 | show: false,
53 | loadingComponent: undefined,
54 | };
55 |
56 | const DecoratedSubmitButton = inject('formStore')(observer(SubmitButton));
57 |
58 | DecoratedSubmitButton.meta = SubmitButton.meta;
59 |
60 | export default DecoratedSubmitButton;
61 |
--------------------------------------------------------------------------------
/src/TextArea/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import WebformElement from '../WebformElement';
4 | // styled
5 | import StyledTextArea from './styled/text-area';
6 | import ValidationIcon from './styled/validation-icon';
7 |
8 | class TextArea extends Component {
9 | static propTypes = {
10 | field: PropTypes.shape({
11 | '#webform_key': PropTypes.string.isRequired,
12 | '#required': PropTypes.bool,
13 | }).isRequired,
14 | value: PropTypes.oneOfType([
15 | PropTypes.string,
16 | PropTypes.number,
17 | PropTypes.bool,
18 | ]),
19 | webformElement: PropTypes.instanceOf(WebformElement).isRequired,
20 | onChange: PropTypes.func.isRequired,
21 | onBlur: PropTypes.func.isRequired,
22 | state: PropTypes.shape({
23 | required: PropTypes.bool.isRequired,
24 | enabled: PropTypes.bool.isRequired,
25 | }).isRequired,
26 | };
27 |
28 | static defaultProps = {
29 | value: null,
30 | };
31 |
32 | getLabelPosition() {
33 | return this.props.webformElement.getLabelDisplay();
34 | }
35 |
36 | render() {
37 | const attrs = {
38 | 'aria-invalid': this.props.webformElement.isValid() ? null : true,
39 | 'aria-required': this.props.field['#required'] ? true : null,
40 | };
41 |
42 | return (
43 |
44 |
56 |
57 |
58 | );
59 | }
60 | }
61 |
62 | export default TextArea;
63 |
--------------------------------------------------------------------------------
/src/TextArea/styled/text-area.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.textarea`
4 | box-sizing: border-box;
5 | margin: 0 0 calc(${p => p.theme.spacingUnit} / 2);
6 | font-size: 0.9em;
7 | line-height: inherit;
8 | font-family: inherit;
9 | overflow: auto;
10 | border: 1px solid ${p => p.theme.borderColor};
11 | background-color: ${p => p.theme.inputBgColor};
12 | border-radius: ${p => p.theme.borderRadius};
13 | padding: calc(${p => p.theme.spacingUnit} / 4) calc(${p => p.theme.spacingUnit} / 2);
14 |
15 | ${p => p.labelDisplay === 'inline' && `
16 | width: ${p.theme.inputWidth};
17 | `}
18 |
19 | ${p => p.labelDisplay === 'before' && `
20 | width: ${p.theme.inputWidth};
21 | max-width: calc(100% - 10px);
22 | min-width: ${p.theme.inputWidth};
23 | min-height: ${p.theme.textAreaHeight};
24 | resize:vertical;
25 |
26 | @media (min-width: 768px) {
27 | width: calc(${p.theme.inlineLabelWidth} + ${p.theme.inputWidth});
28 | }
29 | `}
30 |
31 | ${p => !p.success && `
32 | border-color: ${p.theme.errorColor};
33 | background-color: ${p.theme.errorBgColor};
34 |
35 | &::placeholder {
36 | color: ${p.theme.errorColor};
37 | }
38 | `}
39 | `;
40 |
--------------------------------------------------------------------------------
/src/TextArea/styled/validation-icon.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import ValidationIcon from '../../BaseInput/styled/validation-icon';
3 |
4 | export default styled(ValidationIcon)`
5 | top: -10px;
6 | position: relative;
7 | `;
8 |
--------------------------------------------------------------------------------
/src/Webform/ThankYouMessage/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { inject } from 'mobx-react';
4 | import FormStore from '../../Observables/Form';
5 | import Parser, { template } from '../../Parser/index';
6 | // styled
7 | import Message from './styled/message';
8 |
9 | const ThankYouMessage = ({ message, formStore }) => (
10 | {Parser(template(formStore, message))}
11 | );
12 |
13 | ThankYouMessage.propTypes = {
14 | message: PropTypes.string.isRequired,
15 | formStore: PropTypes.instanceOf(FormStore).isRequired,
16 | };
17 |
18 | export default inject('formStore')(ThankYouMessage);
19 |
--------------------------------------------------------------------------------
/src/Webform/ThankYouMessage/styled/message.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.h2`
4 | border-radius: ${p => p.theme.borderRadius};
5 | padding: calc(${p => p.theme.spacingUnit} / 2) calc(${p => p.theme.spacingUnit} / 1);
6 | `;
7 |
--------------------------------------------------------------------------------
/src/Webform/conditionals/__tests__/formatCondtionals.test.js:
--------------------------------------------------------------------------------
1 | // import { formatConditionals, checkConditionals, defaultStates, supportedActions } from './index';
2 | import { formatConditionals } from '../index';
3 |
4 | const { test, expect } = global;
5 |
6 | const oldStatesObjects = [
7 | {
8 | visible: {
9 | ':input[name="name"]': {
10 | value: true,
11 | },
12 | },
13 | },
14 | {
15 | visible: {
16 | ':input[name="name"]': {
17 | value: true,
18 | },
19 | ':input[name="last_name"]': {
20 | filled: true,
21 | },
22 | },
23 | },
24 | {
25 | visible: [
26 | {
27 | ':input[name="name"]': {
28 | value: true,
29 | },
30 | },
31 | 'or',
32 | {
33 | ':input[name="last_name"]': {
34 | filled: true,
35 | },
36 | },
37 | ],
38 | },
39 | {
40 | visible: [
41 | {
42 | ':input[name="name"]': {
43 | value: true,
44 | },
45 | },
46 | 'or',
47 | {
48 | ':input[name="last_name"]': {
49 | filled: true,
50 | },
51 | },
52 | ],
53 | required: {
54 | ':input[name="last_name"]': {
55 | value: true,
56 | },
57 | },
58 | },
59 | ];
60 |
61 | const newStatesObjects = [
62 | [
63 | {
64 | action: 'visible',
65 | logic: 'and',
66 | conditions: [
67 | {
68 | key: 'name',
69 | condition: 'value',
70 | value: true,
71 | },
72 | ],
73 | },
74 | ],
75 | [
76 | {
77 | action: 'visible',
78 | logic: 'and',
79 | conditions: [
80 | {
81 | key: 'name',
82 | condition: 'value',
83 | value: true,
84 | },
85 | {
86 | key: 'last_name',
87 | condition: 'filled',
88 | value: true,
89 | },
90 | ],
91 | },
92 | ],
93 | [
94 | {
95 | action: 'visible',
96 | logic: 'or',
97 | conditions: [
98 | {
99 | key: 'name',
100 | condition: 'value',
101 | value: true,
102 | },
103 | {
104 | key: 'last_name',
105 | condition: 'filled',
106 | value: true,
107 | },
108 | ],
109 | },
110 | ],
111 | [
112 | {
113 | action: 'visible',
114 | logic: 'or',
115 | conditions: [
116 | {
117 | key: 'name',
118 | condition: 'value',
119 | value: true,
120 | },
121 | {
122 | key: 'last_name',
123 | condition: 'filled',
124 | value: true,
125 | },
126 | ],
127 | },
128 | {
129 | action: 'required',
130 | logic: 'and',
131 | conditions: [
132 | {
133 | key: 'last_name',
134 | condition: 'value',
135 | value: true,
136 | },
137 | ],
138 | },
139 | ],
140 | ];
141 |
142 | for(let i = 0, l = oldStatesObjects.length; i < l; i += 1) {
143 | test(`Test formatting of conditionals: #${i + 1}`, () => {
144 | expect(formatConditionals(oldStatesObjects[i])).toEqual(newStatesObjects[i]);
145 | });
146 | }
147 |
--------------------------------------------------------------------------------
/src/Webform/conditionals/index.js:
--------------------------------------------------------------------------------
1 | export const supportedActions = {
2 | visible: 'visible',
3 | enabled: 'enabled',
4 | required: 'required',
5 | };
6 |
7 | export const supportedStates = {
8 | [supportedActions.visible]: supportedActions.visible,
9 | invisible: 'invisible',
10 | [supportedActions.enabled]: supportedActions.enabled,
11 | disabled: 'disabled',
12 | [supportedActions.required]: supportedActions.required,
13 | optional: 'optional',
14 | };
15 |
16 | export const supportedConditions = {
17 | empty: 'empty',
18 | filled: 'filled',
19 | checked: 'checked',
20 | unchecked: 'unchecked',
21 | value: 'value',
22 | };
23 |
24 | export const supportedLogic = {
25 | and: 'and',
26 | or: 'or',
27 | };
28 |
29 | export const support = {
30 | actions: supportedActions,
31 | states: supportedStates,
32 | conditions: supportedConditions,
33 | logic: supportedLogic,
34 | };
35 |
36 | /**
37 | * @deprecated We don't use state anymore! Use store.
38 | */
39 | export function defaultStates(field) {
40 | return {
41 | [supportedActions.visible]: true,
42 | [supportedActions.required]: field['#required'] || false,
43 | [supportedActions.enabled]: true,
44 | };
45 | }
46 |
47 | /**
48 | * Method to format a states object from Drupal, into a more JavaScript friendly format.
49 | * @param {object} states States object from Drupal field.
50 | * @returns {boolean|Array} Returns array with formatted conditionals or false if no conditionals found.
51 | *
52 | * Example
53 | * Old:
54 | * {
55 | * visible: [
56 | * {
57 | * ':input[name="name"]': {
58 | * empty: true
59 | * }
60 | * },
61 | * {
62 | * ':input[name="name"]': {
63 | * filled: true
64 | * }
65 | * }
66 | * ]
67 | * }
68 | * New:
69 | * [
70 | * {
71 | * action: 'visible',
72 | * logic: 'and',
73 | * conditions: [
74 | * {
75 | * key: 'name',
76 | * condition: 'empty',
77 | * value: true
78 | * },
79 | * {
80 | * key: 'name',
81 | * condition: 'visible',
82 | * value: true
83 | * }
84 | * ]
85 | * }
86 | * ]
87 | */
88 | export function formatConditionals(states = false) {
89 | if(!states) {
90 | return false;
91 | }
92 |
93 | const mappedStates = Object.keys(states).map((stateKey) => { // stateKey, e.g. visible.
94 | if(!supportedStates[stateKey]) {
95 | return false; // Don't format conditional if state isn't supported.
96 | }
97 |
98 | const conditionalKeys = Object.keys(states[stateKey]);
99 | const conditionLogic = states[stateKey][conditionalKeys[1]] === supportedLogic.or ? supportedLogic.or : supportedLogic.and; // Default conditional logic is and.
100 |
101 | const mappedConditions = conditionalKeys.map((conditionalKey2) => { // e.g. ':input[name="name"]'.
102 | let conditionalKey = conditionalKey2;
103 | let conditionObject = states[stateKey][conditionalKey];
104 |
105 | if(conditionLogic === supportedLogic.or) { // If conditional logic is set to 'or'.
106 | if(conditionObject === supportedLogic.or) {
107 | return false; // Don't format the 'or' item.
108 | }
109 |
110 | conditionalKey = Object.keys(conditionObject)[0];
111 | conditionObject = conditionObject[Object.keys(conditionObject)[0]]; // Remove one level of nesting when logic is set to 'or'.
112 | }
113 |
114 | const dependencyKeyRegex = conditionalKey.match(/name="(\S+)"/);
115 | if(!dependencyKeyRegex) {
116 | return false;
117 | }
118 | const formattedDependencyKey = dependencyKeyRegex[1]; // Field key of dependency, e.g. 'name' in above example.
119 | const condition = Object.keys(conditionObject)[0]; // e.g. empty.
120 | const conditionValue = conditionObject[condition]; // e.g. true.
121 |
122 | if(!supportedConditions[condition]) {
123 | return false; // Don't format conditional if condition isn't supported.
124 | }
125 |
126 | return {
127 | key: formattedDependencyKey,
128 | condition,
129 | value: conditionValue,
130 | };
131 | });
132 |
133 | const filteredConditions = mappedConditions.filter(c => c); // Filter out all 'false' values.
134 |
135 | if(!filteredConditions.length) {
136 | return false; // Return false when there are no valid conditions found.
137 | }
138 |
139 | return {
140 | action: stateKey,
141 | logic: conditionLogic,
142 | conditions: filteredConditions,
143 | };
144 | });
145 |
146 | const filteredStates = mappedStates.filter(s => s); // Filter out all 'false' values.
147 |
148 | return filteredStates.length ? filteredStates : false; // Return false when there are no valid states found.
149 | }
150 |
151 | function formatNewStates(newStates) {
152 | const formattedStates = {};
153 |
154 | Object.keys(newStates).forEach((stateKey) => {
155 | const condition = newStates[stateKey];
156 | switch(stateKey) {
157 | case supportedStates.visible:
158 | case supportedStates.enabled:
159 | case supportedStates.required:
160 | formattedStates[stateKey] = condition;
161 | break;
162 | case supportedStates.invisible:
163 | formattedStates[supportedActions.visible] = !condition;
164 | break;
165 | case supportedStates.disabled:
166 | formattedStates[supportedActions.enabled] = !condition;
167 | break;
168 | case supportedStates.optional:
169 | formattedStates[supportedActions.required] = !condition;
170 | break;
171 | default:
172 | break;
173 | }
174 | });
175 |
176 | return formattedStates;
177 | }
178 |
179 | export function checkConditionals(formStore, fieldKey) {
180 | if(!fieldKey) {
181 | console.error('Conditionals were checked without a fieldKey!');
182 | return {};
183 | }
184 |
185 | const field = formStore.getField(fieldKey);
186 |
187 | if(!field || !field.conditionals) {
188 | // When the form is still being built, not all fields are available.
189 | return {};
190 | }
191 |
192 | const newStates = {};
193 |
194 | /**
195 | * conditional example:
196 | * {
197 | * action: 'visible',
198 | * logic: 'and',
199 | * conditions: [condition, condition]
200 | * }
201 | */
202 | // Reduce conditionals to true or false value, based on conditionals and logic.
203 | field.conditionals.forEach((conditional) => {
204 | /**
205 | * condition example:
206 | * {
207 | * key: 'name',
208 | * condition: 'empty',
209 | * value: true
210 | * }
211 | */
212 | // Go through conditions per conditional.
213 | newStates[conditional.action] = conditional.conditions.reduce((prevOutcome, condition) => {
214 | let conditionalOutcome = false;
215 |
216 | const dependency = formStore.getField(condition.key);
217 | if(!dependency) {
218 | console.error(`Cant find dependency ${condition.key} in the conditionals of ${fieldKey}`);
219 | return false;
220 | }
221 | const dependencyValue = dependency.value;
222 |
223 | // See what the action of the condition should be.
224 | switch(condition.condition) {
225 | case supportedConditions.empty:
226 | case supportedConditions.filled: {
227 | const isEmpty = dependency.isEmpty;
228 | const check = condition.condition === supportedConditions.empty ? isEmpty : !isEmpty;
229 | conditionalOutcome = check;
230 | break;
231 | }
232 | case supportedConditions.checked:
233 | case supportedConditions.unchecked: {
234 | // When dependencyValue is true, then it is checked.
235 | const check = condition.condition === supportedConditions.checked;
236 | conditionalOutcome = check === (dependencyValue === true || dependencyValue === '1' || dependencyValue === 'true');
237 | break;
238 | }
239 | case supportedConditions.value: {
240 | // Check if value matches condition.
241 | conditionalOutcome = dependencyValue === condition.value;
242 | break;
243 | }
244 | default: {
245 | break;
246 | }
247 | }
248 |
249 | if(conditional.logic === supportedLogic.and) {
250 | return prevOutcome && conditionalOutcome;
251 | } else if(conditional.logic === supportedLogic.or) {
252 | return prevOutcome || conditionalOutcome;
253 | }
254 | return true;
255 | }, conditional.logic === supportedLogic.and);
256 | });
257 |
258 | return formatNewStates(newStates);
259 | }
260 |
--------------------------------------------------------------------------------
/src/Webform/index.jsx:
--------------------------------------------------------------------------------
1 | import fetch from 'fetch-everywhere';
2 | import getNested from 'get-nested';
3 | import GoogleTag from 'google_tag';
4 | import { observer, Provider } from 'mobx-react';
5 | import PropTypes from 'prop-types';
6 | import React, { Component } from 'react';
7 | import { ThemeProvider } from 'styled-components';
8 | import ReCAPTCHA from 'react-google-recaptcha';
9 | import Forms from '../Observables/Forms';
10 | import Parser from '../Parser';
11 | import ThankYouMessage from './ThankYouMessage';
12 | import WebformElement from '../WebformElement';
13 | import theme from '../styles/theme';
14 | // styled
15 | import StyledWebform from './styled/webform';
16 | import FormTitle from './styled/form-title';
17 | import List from './styled/list';
18 | import ListItem from './styled/list-item';
19 | import Element from './styled/element';
20 |
21 | @observer
22 | class Webform extends Component {
23 | static formStates = {
24 | DEFAULT: 'DEFAULT',
25 | SENT: 'SENT',
26 | ERROR: 'ERROR',
27 | PENDING: 'PENDING',
28 | CONVERTED: 'CONVERTED',
29 | };
30 |
31 | static analyticsEventsCategories = {
32 | SUCCESSFUL: 'Successful submission',
33 | ERROR: 'Error during submission',
34 | };
35 |
36 | static analyticsEventsActions = {
37 | FORM_SUBMISSION: 'Form Submission',
38 | };
39 |
40 | static propTypes = {
41 | url: PropTypes.string.isRequired,
42 | settings: PropTypes.shape({
43 | title: PropTypes.string,
44 | tracking: PropTypes.oneOfType([
45 | PropTypes.shape({
46 | gtm_id: PropTypes.oneOfType([
47 | PropTypes.string,
48 | PropTypes.bool,
49 | ]),
50 | }),
51 | PropTypes.bool,
52 | ]),
53 | langcode: PropTypes.string,
54 | }).isRequired,
55 | form: PropTypes.shape({
56 | form_id: PropTypes.string.isRequired,
57 | settings: PropTypes.shape({
58 | nm_gtm_id: PropTypes.string,
59 | nm_required_hint: PropTypes.string,
60 | confirmation_message: PropTypes.string,
61 | }),
62 | elements: PropTypes.arrayOf(PropTypes.shape({
63 | '#type': PropTypes.string.isRequired,
64 | })).isRequired,
65 | token: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
66 | langcode: PropTypes.string,
67 | }).isRequired,
68 | onSubmit: PropTypes.func,
69 | onSubmitSuccess: PropTypes.func,
70 | onSubmitFail: PropTypes.func,
71 | defaultValues: PropTypes.objectOf(PropTypes.string),
72 | hiddenData: PropTypes.objectOf(PropTypes.string),
73 | noValidation: PropTypes.bool,
74 | showThankYouMessage: PropTypes.bool,
75 | theme: PropTypes.shape(),
76 | loadingTimeout: PropTypes.number,
77 | loadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
78 | };
79 |
80 | static defaultProps = {
81 | onSubmit: () => {},
82 | onSubmitSuccess: () => {},
83 | onSubmitFail: () => {},
84 | nm_gtm_id: false,
85 | settings: {
86 | tracking: false,
87 | },
88 | defaultValues: {},
89 | hiddenData: {},
90 | noValidation: true,
91 | showThankYouMessage: true,
92 | theme: {},
93 | loadingTimeout: 500,
94 | loadingComponent: undefined,
95 | };
96 |
97 | constructor(props) {
98 | super(props);
99 |
100 | this.state = {
101 | status: Webform.formStates.DEFAULT,
102 | errors: {},
103 | loadingTimeout: false,
104 | };
105 |
106 | this.key = props.form.form_id;
107 |
108 | this.onSubmit = this.onSubmit.bind(this);
109 | this.submit = this.submit.bind(this);
110 |
111 | this.formStore = this.getFormstore(props);
112 | }
113 |
114 | componentDidMount() {
115 | const GTM = getNested(() => this.props.settings.tracking.gtm_id) || this.props.form.settings.nm_gtm_id;
116 |
117 | if(GTM) {
118 | GoogleTag.addTag(GTM);
119 | }
120 | }
121 |
122 | componentWillReceiveProps(nextProps) {
123 | this.formStore = this.getFormstore(nextProps);
124 | }
125 |
126 | componentWillUnmount() {
127 | clearTimeout(this.loadingTimeout);
128 | }
129 |
130 | onSubmit(e) {
131 | e.preventDefault();
132 |
133 | // If the 'onSubmit' is being overwritten, use that function.
134 | // If it returns false, don't submit, otherwise continue.
135 | if(typeof this.onSubmitOverwrite === 'function') {
136 | const result = this.onSubmitOverwrite(e);
137 | if(!result) {
138 | return result;
139 | }
140 | }
141 |
142 | // Make sure that all errors are visible by marking all visible fields as blurred.
143 | this.formStore.visibleFields.forEach((field) => {
144 | field.isBlurred = true;
145 | });
146 |
147 | const isValid = this.isValid();
148 | if(isValid) {
149 | if(this.getCaptchaField() && this.recaptchaRef) {
150 | return this.recaptchaRef.execute();
151 | }
152 | return this.updateSubmission();
153 | }
154 | console.warn('The user tried to submit a form, but not all fields are valid.');
155 |
156 | return true;
157 | }
158 |
159 | getCaptchaField() {
160 | return this.formStore.form.elements.find(field => field['#type'] === 'captcha');
161 | }
162 |
163 | getFormstore(props) {
164 | return Forms.getForm(props.form.form_id, {
165 | form: props.form,
166 | settings: props.settings,
167 | defaultValues: this.props.defaultValues,
168 | });
169 | }
170 |
171 | getFormElements() {
172 | const formElements = getNested(() => this.props.form.elements, []);
173 | return formElements.map(field => (
174 |
186 | ));
187 | }
188 |
189 | isValid() {
190 | return this.formStore.valid;
191 | }
192 |
193 | resetForm() {
194 | Forms.deleteForm(this.props.form.form_id);
195 | this.formStore = this.getFormstore(this.props);
196 | }
197 |
198 | async updateSubmission() {
199 | if(this.props.loadingComponent) {
200 | this.loadingTimeout = setTimeout(() => {
201 | this.setState({ loadingTimeout: true });
202 | }, this.props.loadingTimeout);
203 | }
204 |
205 | let response = await this.props.onSubmit(this); // Trigger onSubmit hook and store response.
206 | if(!response || response.submit !== false) { // If onSubmit hook response is false, don't trigger default submit.
207 | response = await this.submit();
208 | }
209 |
210 | clearTimeout(this.loadingTimeout);
211 | this.setState({ loadingTimeout: false });
212 |
213 | if(response.status === 200 || response.status === 201) {
214 | this.response = response;
215 | this.setState({ status: Webform.formStates.SENT });
216 | this.props.onSubmitSuccess({
217 | webform: this,
218 | response: this.response,
219 | values: this.formStore.values,
220 | }); // Trigger onSubmitSuccess hook.
221 | this.resetForm();
222 | } else {
223 | this.setState({
224 | status: Webform.formStates.ERROR,
225 | errors: response.message || [],
226 | });
227 | this.props.onSubmitFail(this); // Trigger onSubmitFail hook.
228 | }
229 | }
230 |
231 | async submit(extraFields = {}) {
232 | // eslint-disable-next-line no-undef
233 | const headers = new Headers({
234 | 'Content-Type': 'application/json',
235 | 'X-CSRF-Token': this.props.form.token,
236 | });
237 |
238 | const values = Object.assign({}, this.props.hiddenData, this.formStore.values);
239 | if(!extraFields.in_draft) {
240 | this.setState({ status: Webform.formStates.PENDING });
241 | }
242 |
243 | try {
244 | const response = await fetch(`${this.props.url}/hn-webform-submission?_format=json`, {
245 | headers,
246 | method: 'POST',
247 | body: JSON.stringify(Object.assign({
248 | form_id: this.props.form.form_id,
249 | }, extraFields, values)),
250 | });
251 | return response.json();
252 | } catch(err) {
253 | console.error(err);
254 | return null;
255 | }
256 | }
257 |
258 | recaptchaRef = null;
259 |
260 | render() {
261 | if(!this.formStore) return null;
262 | const formElements = this.getFormElements();
263 |
264 | let requiredHint = null;
265 | if(
266 | this.formStore.visibleFields.find(field => field.required) &&
267 | this.props.form.settings.nm_required_hint
268 | ) {
269 | requiredHint = {Parser(this.props.form.settings.nm_required_hint)};
270 | }
271 | const errors = Object.entries(this.state.errors);
272 | const errorsEl = errors.length > 0 && (
273 |
274 | {errors.map(([key, error]) => (
275 |
276 | {key.replace(/]\[/g, '.')}: {Parser(error)}
277 |
278 | ))}
279 |
280 | );
281 |
282 | const renderCaptcha = () => {
283 | const field = this.getCaptchaField();
284 |
285 | if(!field) {
286 | return null;
287 | }
288 |
289 | if(!field['#captcha_sitekey']) {
290 | console.warn('No google reCaptcha sitekey found.');
291 | return null;
292 | }
293 |
294 | return (
295 |
296 | { this.recaptchaRef = ref; }}
300 | onChange={() => this.updateSubmission()}
301 | hl={this.props.settings.langcode || this.props.form.langcode || 'en'}
302 | />
303 |
304 | );
305 | };
306 |
307 | return (
308 |
309 |
310 |
311 | {this.props.settings.title && (
312 | {this.props.settings.title}
313 | )}
314 | {this.state.status !== Webform.formStates.SENT && errorsEl}
315 | {this.state.status !== Webform.formStates.SENT && (
316 |
327 | )}
328 | {this.props.showThankYouMessage && this.state.status === Webform.formStates.SENT && (
329 |
330 | )}
331 |
332 |
333 |
334 | );
335 | }
336 | }
337 |
338 | export default Webform;
339 |
--------------------------------------------------------------------------------
/src/Webform/rules.js:
--------------------------------------------------------------------------------
1 | import { observable } from 'mobx';
2 |
3 | // TODO: Remove the general 'rules' and make everything locally accessable in the store.
4 | export default observable.map({});
5 |
--------------------------------------------------------------------------------
/src/Webform/styled/element.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.span`
4 | font-size: 10px;
5 |
6 | ${p => p.error && `
7 | font-size: 16px;
8 | color: #fff;
9 | `}
10 | `;
11 |
--------------------------------------------------------------------------------
/src/Webform/styled/form-title.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.h2`
4 | margin: 0 0 calc(${p => p.theme.spacingUnit} / 2) 0;
5 | `;
6 |
--------------------------------------------------------------------------------
/src/Webform/styled/list-item.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.li`
4 | list-style: none outside none;
5 | `;
6 |
--------------------------------------------------------------------------------
/src/Webform/styled/list.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.ul`
4 | padding-left: 0;
5 | margin-bottom: 2em;
6 | `;
7 |
--------------------------------------------------------------------------------
/src/Webform/styled/stdcss.0.0.7.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-expressions */
2 | import { injectGlobal } from 'styled-components';
3 |
4 | injectGlobal`
5 | ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,q,fieldset,dl,dt,dd,iframe,table,tbody,thead,td,th,address,legend{margin:0;padding:0;font-size:1em;font-style:inherit;font-family:inherit;vertical-align:baseline}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}*{-webkit-tap-highlight-color:rgba(0,0,0,0)}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{font-size:12px;line-height:1.5em;font-family:Arial,Helvetica,sans-serif}h1{font-size:1.5em;line-height:1em;margin:2em 0 1em}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child{margin-top:0}* html h1,* html h2{margin-top:0}h2{font-size:1.3333em;line-height:1.125em;margin-top:1.6875em;margin-bottom:.5625em}h3{font-size:1.1667em;line-height:1.286em;margin-top:1.929em;margin-bottom:.643em}h2+h3{margin-top:1.2857em}h4{margin-top:1.5em}h3+h4{margin-top:.5em}h5{margin-top:1.5em;font-weight:400}h4+h5{margin-top:0}p{font-size:1em;line-height:1.5em;margin:0 0 1.5em}p.intro{font-size:1.08333em;line-height:1.3846em;font-weight:700}blockquote{margin:0 2.5em 1.5em;font-style:oblique}q{font-style:oblique}hr{margin:0 0 1.5em;height:1px;background:#333;border:0}small{font-size:.8333em;line-height:1.8em}a img,:link img,:visited img{border:0}a{background:transparent;outline:0}address{font-style:normal}figure{margin:0}ul,ol{margin:0 0 1.5em 2.5em}li ul,li ol{margin:0 0 0 2.5em}dl{margin:0 0 1.5em}dt{font-weight:700;margin:1.5em 0 0}dd{margin:0 0 0 2.5em}.break{clear:both}.right{float:right}.left{float:left}.hide,.skip{display:none}.center{text-align:center}fieldset{border:0}form br{clear:left}label{float:left;width:150px;margin:0 0 .9em}label.inline{width:auto;display:inline;margin-right:15px}input,input.text,textarea,select{font-family:inherit;font-size:100%;width:300px;margin:0 0 .9em}textarea{overflow:auto}label input{width:auto;height:auto;margin:0 5px 0 0;padding:0;vertical-align:middle;border:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}input.inline,select.inline{width:150px}input.small{width:30px}input.medium{width:60px}label,button{cursor:pointer}button,input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button,input{line-height:normal}button[disabled],input[disabled]{cursor:default}input::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0}.feedback-error,.feedback-warning,.feedback-confirm,.feedback-notice{margin:0 0 1.5em;padding:1.4255em 10px 1.4255em 50px;list-style:none;color:#000;background-repeat:no-repeat;background-position:3% 50%;border:1px solid #d8000c;background-color:#ffbaba}.feedback-warning{border:1px solid #FFD700;background-color:#feffca}.feedback-confirm{border:1px solid #3e983b;background-color:#e7f9e8}.feedback-notice{border:1px solid #00529b;background-color:#bde5f8}
6 | `;
7 |
--------------------------------------------------------------------------------
/src/Webform/styled/webform.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.div`
4 | font-family: ${p => p.theme.primaryFont};
5 | max-width: ${p => p.theme.formMaxWidth};
6 | color: ${p => p.theme.baseColor};
7 | margin: ${p => p.theme.formMargin};
8 | `;
9 |
--------------------------------------------------------------------------------
/src/WebformElement/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import getNested from 'get-nested';
4 | import { observer } from 'mobx-react';
5 | import Parser, { template } from '../Parser';
6 | import FormStore from '../Observables/Form';
7 | import Hidden from '../Hidden';
8 | // styled
9 | import RequiredMarker from './styled/required-marker';
10 | import ValidationMessage from './styled/validation-message';
11 | import TextContent from './styled/text-content';
12 | import Label from './styled/label';
13 | import FormRow from './styled/form-row';
14 |
15 | @observer
16 | class WebformElement extends Component {
17 | static propTypes = {
18 | field: PropTypes.shape({
19 | '#type': PropTypes.string.isRequired,
20 | '#default_value': PropTypes.oneOfType([
21 | PropTypes.string,
22 | PropTypes.objectOf(PropTypes.string),
23 | ]),
24 | '#webform_key': PropTypes.string.isRequired,
25 | '#required': PropTypes.bool,
26 | '#pattern': PropTypes.oneOfType([
27 | PropTypes.string,
28 | PropTypes.instanceOf(RegExp),
29 | ]),
30 | '#requiredError': PropTypes.string,
31 | '#patternError': PropTypes.string,
32 | '#emailError': PropTypes.string,
33 | '#title': PropTypes.string,
34 | '#title_display': PropTypes.string,
35 | '#options_display': PropTypes.string,
36 | '#admin': PropTypes.bool,
37 | composite_elements: PropTypes.array,
38 | }).isRequired,
39 | formStore: PropTypes.instanceOf(FormStore).isRequired,
40 | onChange: PropTypes.func,
41 | onBlur: PropTypes.func,
42 | settings: PropTypes.shape({
43 | custom_elements: PropTypes.shape({
44 | patternError: PropTypes.shape({
45 | '#default_value': PropTypes.string,
46 | '#options': PropTypes.objectOf(PropTypes.string),
47 | }),
48 | }),
49 | }).isRequired,
50 | webformSettings: PropTypes.shape().isRequired,
51 | webformPage: PropTypes.string,
52 | form: PropTypes.shape({
53 | settings: PropTypes.object.isRequired,
54 | }).isRequired,
55 | status: PropTypes.string.isRequired,
56 | url: PropTypes.string.isRequired,
57 | };
58 |
59 | static defaultProps = {
60 | label: false,
61 | parent: false,
62 | onChange: () => {
63 | },
64 | onBlur: () => {
65 | },
66 | webformPage: 'none',
67 | };
68 |
69 | constructor(props) {
70 | super(props);
71 |
72 | this.key = props.field['#webform_key'];
73 |
74 | this.onChange = this.onChange.bind(this);
75 | this.onBlur = this.onBlur.bind(this);
76 |
77 | /**
78 | * @deprecated Don't use state! Use the store.
79 | */
80 | this.state = {
81 | // errors: [],
82 | };
83 | /**
84 | * @deprecated
85 | */
86 | this.setState = this.setState;
87 |
88 | // Object.assign(this.state, defaultStates(props.field));
89 | }
90 |
91 | onChange(e) {
92 | const field = this.getField();
93 |
94 | // First, check if this field has a value (e.g. fieldsets don't)
95 | const meta = field.componentClass.meta || {};
96 | const hasValue = meta.hasValue;
97 | if(typeof hasValue === 'undefined' || hasValue) {
98 | // Get the value
99 | const value = (e && e.target) ? e.target.value : e; // Check if 'e' is event, or direct value
100 |
101 | field.value = value;
102 | }
103 |
104 | this.props.onChange(e);
105 |
106 | return true;
107 | }
108 |
109 | onBlur(e) {
110 | const field = this.getField();
111 |
112 | // First, check if this field has a value (e.g. fieldsets don't)
113 | const meta = field.componentClass.meta || {};
114 | const hasValue = meta.hasValue;
115 | if(typeof hasValue === 'undefined' || hasValue) {
116 | // Update the field storage to set it to blurred.
117 | field.isBlurred = true;
118 | }
119 |
120 | this.props.onBlur(e);
121 | }
122 |
123 | /**
124 | * @returns {Field}
125 | */
126 | getField(key = this.key) {
127 | return this.props.formStore.getField(key);
128 | }
129 |
130 | getFormElement() {
131 | if(!this.shouldRender()) {
132 | return false;
133 | }
134 |
135 | const ElementComponent = getNested(() => this.getField().componentClass);
136 | if(ElementComponent) {
137 | return {
138 | class: ElementComponent,
139 | element: (
140 |
150 | ),
151 | };
152 | }
153 | return false;
154 | }
155 |
156 | getValue(key = this.key) {
157 | const field = this.getField(key);
158 | if(!field) {
159 | return false;
160 | }
161 | return field.getValue();
162 | }
163 |
164 | getLabelDisplay() {
165 | const elementClass = this.getField().componentClass;
166 | return getNested(() => elementClass.meta.labelVisibility) || this.props.field['#title_display'] || 'inline';
167 | }
168 |
169 | /**
170 | * @deprecated
171 | * Just use this.getField().valid
172 | *
173 | * @param key
174 | * @returns {boolean}
175 | */
176 | isValid(key = this.key) {
177 | const field = this.getField(key);
178 | if(!field) {
179 | return true;
180 | }
181 | return field.valid;
182 | }
183 |
184 | /**
185 | * @deprecated
186 | * Just use this.getField().isBlurred
187 | */
188 | shouldValidate(force = false) {
189 | if(force) {
190 | return true;
191 | }
192 | const field = this.getField();
193 | if(!field) {
194 | return false;
195 | }
196 | return field.isBlurred;
197 | }
198 |
199 | shouldRender() {
200 | // If it is an admin only field, don't render.
201 | if(this.props.field['#admin']) {
202 | return false;
203 | }
204 |
205 | // Check if it is an composite element
206 | const children = (this.props.field.composite_elements || []).filter(e => !e['#admin']);
207 |
208 | // If it is, check if there is any child that's visible or of type Hidden.
209 | if(children.length && !children
210 | .map(c => this.getField(c['#webform_key']))
211 | .find(f => f && f.visible && f.componentClass !== Hidden)
212 | ) {
213 | // If there isn't any, don't render.
214 | return false;
215 | }
216 |
217 | // If all tests are passed, render.
218 | return true;
219 | }
220 |
221 | isSuccess() {
222 | return this.getField().isBlurred && this.isValid();
223 | }
224 |
225 | renderTextContent(selector, checkValue = false, addClass = '', show = true) {
226 | if(show) {
227 | const field = this.getField().componentClass;
228 | const value = this.props.field[getNested(() => field.meta.field_display[selector], selector)]; // Value in #description field
229 | const displayValue = this.props.field[`${selector}_display`];
230 | const cssClass = `${selector.replace(/#/g, '').replace(/_/g, '-')}${checkValue ? `-${checkValue}` : ''}`; // '#field_suffix' and 'suffix' become .field--suffix-suffix
231 |
232 | if(!value || (!!checkValue && checkValue !== displayValue)) {
233 | if(!(!displayValue && checkValue === 'isUndefined')) {
234 | return false;
235 | }
236 | }
237 |
238 | if(!value) {
239 | // don't output if there's no value
240 | return false;
241 | }
242 |
243 | return (
244 |
250 | {Parser(template(this.props.formStore, value))}
251 |
252 | );
253 | }
254 |
255 | return false;
256 | }
257 |
258 | renderFieldLabel(element, show = true) {
259 | /* If the label is a legend, it is supposed to be the first child of the fieldset wrapper. */
260 |
261 | if(this.props.field['#title'] && show) {
262 | const Wrapper = getNested(() => element.class.meta.label) || Label;
263 | return (
264 |
265 | {Parser(template(this.props.formStore, this.props.field['#title']))}
266 | {this.getField().required ? ( *) : null}
267 |
268 | );
269 | }
270 |
271 | return null;
272 | }
273 |
274 | render() {
275 | if(!this.shouldRender()) {
276 | return null;
277 | }
278 |
279 | const element = this.getFormElement();
280 | if(!element) return null;
281 |
282 | const errors = this.getField().errors.filter(error => error);
283 | const errorList = errors.length > 0 ? (
284 | {errors}
285 | ) : null;
286 |
287 | const Wrapper = getNested(() => element.class.meta.wrapper) || FormRow;
288 |
289 | return (
290 | element.class.meta.wrapperProps)}>
291 | {this.renderFieldLabel(element, getNested(() => element.class.meta.label.type) === 'legend')}
292 |
293 | {this.renderTextContent('#description', 'before') }
294 | {this.renderTextContent('#description', 'isUndefined', 'description-before', getNested(() => element.class.meta.label.type) === 'legend')}
295 |
296 | {this.renderFieldLabel(element, getNested(() => element.class.meta.label.type) !== 'legend')}
297 |
298 | {element.element}
299 |
300 | {this.renderTextContent('#description', 'after', this.getLabelDisplay())}
301 | {this.renderTextContent('#description', 'isUndefined', 'description-after', getNested(() => element.class.meta.label.type) !== 'legend')}
302 |
303 | {errorList}
304 |
305 | );
306 | }
307 | }
308 |
309 | export default WebformElement;
310 |
--------------------------------------------------------------------------------
/src/WebformElement/styled/form-row.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.div`
4 | margin-bottom: ${p => p.theme.spacingUnit};
5 |
6 | &::after {
7 | content: '';
8 | display: block;
9 | clear: both;
10 | }
11 |
12 | ${p => p.hidden && `
13 | display: none;
14 | `}
15 | `;
16 |
--------------------------------------------------------------------------------
/src/WebformElement/styled/label.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.label`
4 | display: inline-block;
5 | width: 100%;
6 | padding-left: 0; /* legend */
7 | margin-bottom: calc(${p => p.theme.spacingUnit} / 2);
8 | vertical-align: top;
9 | line-height: ${p => p.theme.inputHeight};
10 |
11 | ${p => p.labelDisplay === 'inline' && `
12 | @media (min-width: 768px) {
13 | float: left;
14 | width: ${p.theme.inlineLabelWidth};
15 | padding-right: calc(${p.theme.spacingUnit} / 2);
16 | }
17 | `}
18 |
19 | ${p => p.labelDisplay === 'invisible' && `
20 | display: none;
21 | `}
22 |
23 | ${p => p.labelDisplay === 'before' && `
24 | display: block;
25 | float: none;
26 | width: 100%;
27 | `}
28 | `;
29 |
--------------------------------------------------------------------------------
/src/WebformElement/styled/required-marker.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.small`
4 | color: ${p => p.theme.requiredColor};
5 | font-size: 0.8em;
6 | vertical-align: top;
7 | `;
8 |
--------------------------------------------------------------------------------
/src/WebformElement/styled/text-content.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.span`
4 | ${p => (p.class === 'description-before' || p.class === 'description-after') && `
5 | display: block;
6 | `}
7 |
8 | ${p => p.class === 'description-before' && `
9 | margin-bottom: calc(${p.theme.spacingUnit} / 2);
10 | line-height: 1.5;
11 | `}
12 |
13 | ${p => p.class === 'description-after' && `
14 | font-size: 0.8em;
15 | margin-top: 0;
16 | padding-bottom: calc(${p.theme.spacingUnit} / 2);
17 | line-height: 1.2em;
18 | clear: both;
19 |
20 | ${p.labelDisplay === 'inline' && `
21 | @media (min-width: 768px) {
22 | padding-left: calc(${p.theme.spacingUnit} / 2);
23 | margin-left: ${p.theme.inlineLabelWidth};
24 | float: left;
25 | }
26 | `}
27 | `}
28 |
29 | /* Prefix & Suffix */
30 | ${p => (p.value === 'field-prefix' || p.value === 'field-suffix') && `
31 | display: inline-block;
32 | `}
33 |
34 | ${p => p.value === 'field-prefix' && `
35 | margin-right: 5px;
36 | `}
37 |
38 | ${p => p.value === 'field-suffix' && `
39 | margin-left: 5px;
40 | `}
41 | `;
42 |
--------------------------------------------------------------------------------
/src/WebformElement/styled/validation-message.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.ul`
4 | margin: 0;
5 | padding: 0;
6 |
7 | font-size: 0.8em;
8 | margin-top: 0;
9 | padding-bottom: calc(${p => p.theme.spacingUnit} / 2);
10 | line-height: 1.2em;
11 | clear: both;
12 |
13 | ${p => p.labelDisplay === 'inline' && `
14 | @media (min-width: 768px) {
15 | padding-left: calc(${p.theme.spacingUnit} / 2);
16 | margin-left: ${p.theme.inlineLabelWidth};
17 | float: left;
18 | }
19 | `}
20 | `;
21 |
--------------------------------------------------------------------------------
/src/WebformUtils.js:
--------------------------------------------------------------------------------
1 | import getNested from 'get-nested';
2 |
3 | class WebformUtils {
4 |
5 | static getCustomValue(field, key, settings) {
6 | if(key.startsWith('#')) {
7 | throw new Error('Please use the field without leading hash.');
8 | }
9 |
10 | if(field[`#override_${key}`]) {
11 | return field[`#${key}`];
12 | }
13 |
14 | return getNested(() => settings.custom_elements[key]['#default_value'], null);
15 | }
16 |
17 | static getErrorMessage(field, key) {
18 | const errorMessage = getNested(() => field[key], null);
19 | return errorMessage && errorMessage !== '' ? errorMessage : null;
20 | }
21 |
22 | static validateRule(rule, field, force = false) {
23 | if(!rule) return true;
24 | else if(force || !rule.shouldValidate || rule.shouldValidate(field)) {
25 | return rule.rule(field.getValue());
26 | }
27 | return true;
28 | }
29 |
30 | /**
31 | * @deprecated
32 | * @param field
33 | * @param value
34 | * @returns {boolean}
35 | */
36 | static isEmpty(field, value) {
37 | if(value === '' || value === false) {
38 | return true;
39 | }
40 |
41 | if(field && field['#mask']) {
42 | const mask = field['#mask'].replace(/9|a|A/g, '_');
43 | return value === mask;
44 | }
45 |
46 | return false;
47 | }
48 |
49 | }
50 |
51 | export default WebformUtils;
52 |
--------------------------------------------------------------------------------
/src/Wizard/WizardProgress/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | // styled
4 | import Bar from './styled/bar';
5 | import Step from './styled/step';
6 | import StepNumber from './styled/step-number';
7 | import StepTitle from './styled/step-title';
8 |
9 | function WizardProgress({ pages, currentPage }) {
10 | return (
11 |
12 | {pages.map((page, i) => (
13 |
20 | {i + 1}
21 | {page['#title']}
22 |
23 | ))}
24 |
25 | );
26 | }
27 |
28 | WizardProgress.propTypes = {
29 | pages: PropTypes.arrayOf(
30 | PropTypes.shape({
31 | '#title': PropTypes.string.isRequired,
32 | '#webform_key': PropTypes.string.isRequired,
33 | }),
34 | ).isRequired,
35 | currentPage: PropTypes.number.isRequired,
36 | };
37 |
38 | export default WizardProgress;
39 |
--------------------------------------------------------------------------------
/src/Wizard/WizardProgress/styled/bar.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.ul`
4 | display: flex;
5 | margin: 0 0 calc(2 * ${p => p.theme.spacingUnit}) 0;
6 | padding: 0;
7 | width: calc(100% - 15px);
8 | line-height: 1em;
9 | `;
10 |
--------------------------------------------------------------------------------
/src/Wizard/WizardProgress/styled/step-number.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.span`
4 | margin-right: 5px;
5 | line-height: 1em;
6 |
7 | @media (min-width: 768px) {
8 | display: none;
9 | }
10 | `;
11 |
--------------------------------------------------------------------------------
/src/Wizard/WizardProgress/styled/step-title.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.span`
4 | display: none;
5 |
6 | @media (min-width: 768px) {
7 | line-height: 1em;
8 | display: block;
9 | }
10 | `;
11 |
--------------------------------------------------------------------------------
/src/Wizard/WizardProgress/styled/step.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.li`
4 | display: inline-block;
5 | padding: 15px 30px;
6 | position: relative;
7 | margin-right: 5px;
8 | background: #f4f4f4;
9 | z-index: ${p => 11 - p.step};
10 | margin-left: -5px;
11 |
12 | &:first-child {
13 | margin-left: 0;
14 | }
15 |
16 | &::before {
17 | position: absolute;
18 | content: '';
19 | top: -1px;
20 | left: 0;
21 | border-left: 20px solid #fff;
22 | border-bottom: 23.5px solid transparent;
23 | border-top: 23.5px solid transparent;
24 | clear: both;
25 | }
26 |
27 | &::after {
28 | position: absolute;
29 | content: '';
30 | top: -1px;
31 | right: -19px;
32 | border-left: 20px solid #f4f4f4;
33 | border-bottom: 23.5px solid transparent;
34 | border-top: 23.5px solid transparent;
35 | clear: both;
36 | }
37 |
38 | ${p => p.step === 0 && `
39 | &::before {
40 | display: none;
41 | }
42 | `}
43 |
44 | ${p => (p.done || p.active) && `
45 | background: ${p.theme.primaryColor};
46 | color: #fff;
47 |
48 | &::after {
49 | border-left: 20px solid ${p.theme.primaryColor};
50 | }
51 | `}
52 | `;
53 |
--------------------------------------------------------------------------------
/src/Wizard/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { observer, inject } from 'mobx-react';
4 | import getNested from 'get-nested';
5 | import WizardProgress from './WizardProgress';
6 | import Fieldset from '../Fieldset';
7 | import BaseButton from '../BaseButton';
8 | import SubmitButton from '../SubmitButton';
9 | import WebformElement from '../WebformElement';
10 | import Webform from '../Webform';
11 | import FormStore from '../Observables/Form';
12 | // styled
13 | import ButtonWrapper from './styled/button-wrapper';
14 | import ButtonNext from './styled/button-next';
15 | import ButtonPrev from './styled/button-prev';
16 |
17 | @inject('submit', 'webform')
18 | @observer
19 | class WizardPages extends Component {
20 |
21 | static propTypes = {
22 | field: PropTypes.shape({
23 | composite_elements: PropTypes.arrayOf(PropTypes.shape()).isRequired,
24 | }).isRequired,
25 | form: PropTypes.shape().isRequired,
26 | status: PropTypes.string.isRequired,
27 | formStore: PropTypes.instanceOf(FormStore).isRequired,
28 | submit: PropTypes.func.isRequired,
29 | onChange: PropTypes.func,
30 | onBlur: PropTypes.func,
31 | settings: PropTypes.shape({
32 | custom_elements: PropTypes.shape({
33 | patternError: PropTypes.shape({
34 | '#default_value': PropTypes.string,
35 | '#options': PropTypes.objectOf(PropTypes.string),
36 | }),
37 | }),
38 | }).isRequired,
39 | webform: PropTypes.instanceOf(Webform).isRequired,
40 | webformSettings: PropTypes.shape().isRequired,
41 | webformElement: PropTypes.instanceOf(WebformElement).isRequired,
42 | };
43 |
44 | static defaultProps = {
45 | onChange: () => {
46 | },
47 | onBlur: () => {
48 | },
49 | };
50 |
51 | componentDidMount() {
52 | this.props.webform.onSubmitOverwrite = () => {
53 | if(this.props.formStore.page === this.props.field.composite_elements[this.props.field.composite_elements.length - 1]['#webform_key']) {
54 | return true; // Execute normal onSubmit
55 | }
56 |
57 | this.navigateToNextPage();
58 | return false;
59 | };
60 | }
61 |
62 | componentWillUnmount() {
63 | delete this.props.webform.onSubmitOverwrite;
64 | }
65 |
66 | changePage(shift) {
67 | const pages = this.props.field.composite_elements;
68 | const pageI = pages.indexOf(pages.find(p => this.props.formStore.page === p['#webform_key']));
69 | const newPageI = pageI + shift;
70 | this.props.formStore.page = this.props.field.composite_elements[newPageI]['#webform_key'];
71 | }
72 |
73 | navigateToNextPage() {
74 | // Make sure all errors are shown of visible fields.
75 | this.props.formStore.visibleFieldsOfCurrentPage.forEach(field => field.isBlurred = true);
76 |
77 | // Check if all fields are valid.
78 | if(this.props.formStore.visibleFieldsOfCurrentPage.every(field => field.valid)) {
79 | // If all valid, change the page.
80 | this.changePage(+1);
81 |
82 | // If draft_auto_save is on, submit the page.
83 | if(getNested(() => this.props.form.settings.draft_auto_save)) {
84 | this.props.submit({
85 | in_draft: true,
86 | });
87 | }
88 | }
89 | }
90 |
91 | render() {
92 | const pages = this.props.field.composite_elements;
93 | const pageI = pages.indexOf(pages.find(p => this.props.formStore.page === p['#webform_key']));
94 |
95 | return (
96 |
97 |
98 | {pages.map(page => (
99 |
113 | ))}
114 |
115 |
116 | { e.preventDefault(); this.changePage(-1); }}
118 | disabled={this.props.formStore.page === pages[0]['#webform_key']}
119 | label={getNested(() => pages[pageI]['#prev_button_label']) || getNested(() => this.props.form.settings.wizard_prev_button_label) || 'Previous page'}
120 | primary={false}
121 | />
122 |
123 |
124 | {(this.props.formStore.page === pages[pages.length - 1]['#webform_key'])
125 | ? (
126 | element['#type'] === 'webform_actions')}
131 | show
132 | />
133 | )
134 | : (
135 | pages[pageI]['#next_button_label']) || getNested(() => this.props.form.settings.wizard_next_button_label) || 'Next page'}
137 | type='submit'
138 | />
139 | )
140 | }
141 |
142 |
143 |
144 | );
145 | }
146 | }
147 |
148 | export default WizardPages;
149 |
--------------------------------------------------------------------------------
/src/Wizard/styled/button-next.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.div`
4 | float: right;
5 | `;
6 |
--------------------------------------------------------------------------------
/src/Wizard/styled/button-prev.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.div`
4 | float: left;
5 | `;
6 |
--------------------------------------------------------------------------------
/src/Wizard/styled/button-wrapper.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export default styled.div`
4 | &::after {
5 | content: '';
6 | display: block;
7 | clear: both;
8 | }
9 | `;
10 |
--------------------------------------------------------------------------------
/src/Wrapper/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const Wrapper = (p) => {
5 | const props = Object.assign({}, p, p.component.props); // Merge Wrapper props with Wrapper override props.
6 |
7 | const { component } = props; // Copy component property to delete it later.
8 |
9 | delete props.component; // Delete since component isn't a native React prop.
10 |
11 | props.className = `${props.className || ''} ${props['data-extendClassName'] || ''}`; // Concatenate className and data-extendClassName into the new className.
12 | const Component = React.cloneElement(component, props, props.children); // Clone passed component with merged props and pass children.
13 |
14 | return Component;
15 | };
16 |
17 | Wrapper.propTypes = {
18 | children: PropTypes.node,
19 | component: PropTypes.oneOfType([
20 | PropTypes.string,
21 | PropTypes.element,
22 | ]).isRequired,
23 | };
24 |
25 | Wrapper.defaultProps = {
26 | children: {},
27 | };
28 |
29 | export default Wrapper;
30 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Webform from './Webform';
2 | import TextArea from './TextArea';
3 | import CheckboxField from './CheckboxField';
4 | import EmailField from './EmailField';
5 | import PhoneField from './PhoneField';
6 | import Date from './Date';
7 | import ParagraphField from './ParagraphField';
8 | import SelectField from './SelectField';
9 | import Input from './Input';
10 | import RadioField from './RadioField';
11 | import FetchForm from './FetchForm';
12 | import Fieldset from './Fieldset';
13 | import IBAN from './IBAN';
14 | import Address from './Address';
15 | import Hidden from './Hidden';
16 | import RangeField from './RangeField';
17 | import WizardPages from './Wizard';
18 | import Relation from './Relation';
19 | import FormRow from './FormRow';
20 | import Parser from './Parser';
21 | import Number from './Number';
22 | import Converse from './Converse';
23 | import Label from './WebformElement/styled/label';
24 | import SubmitButton from './SubmitButton';
25 |
26 | const components = {
27 |
28 | // Webform core elements
29 | checkbox: CheckboxField,
30 | date: Date,
31 | email: EmailField,
32 | fieldset: Fieldset,
33 | hidden: Hidden,
34 | radios: RadioField,
35 | range: RangeField,
36 | select: SelectField,
37 | tel: PhoneField,
38 | textfield: Input,
39 | textarea: TextArea,
40 | number: Number,
41 | webform_wizard_pages: WizardPages,
42 | webform_wizard_page: Fieldset,
43 | webform_message: ParagraphField,
44 | webform_actions: SubmitButton,
45 |
46 | // Custom elements
47 | dutch_address: Address,
48 | date_of_birth: Date,
49 | iban_wrapper: FormRow,
50 | iban: IBAN,
51 | natuurmonumenten_relation: Relation,
52 | natuurmonumenten_relation_address: Relation,
53 | webform_converse_payment: Converse,
54 | webform_element_converse_payment: Converse,
55 |
56 | // Legacy elements
57 | webform_email_custom: EmailField,
58 | webform_address_custom: Address,
59 | webform_checkbox_custom: CheckboxField,
60 | webform_select_custom: SelectField,
61 | webform_textarea_custom: TextArea,
62 | webform_radios_custom: RadioField,
63 | webform_telephone_custom: PhoneField,
64 | webform_textfield_custom: Input,
65 | webform_date_custom: Date,
66 | webform_dateofbirth: Date,
67 | webform_iban: FormRow,
68 | webform_relation_custom: Relation,
69 | webform_relation_postcode_custom: Relation,
70 | webform_number_custom: Number,
71 | };
72 |
73 | export default Webform;
74 | export { components, FetchForm, Parser, Label };
75 |
--------------------------------------------------------------------------------
/src/styles/theme.js:
--------------------------------------------------------------------------------
1 | const theme = {
2 | baseColor: '#000',
3 | primaryColor: 'green',
4 | errorColor: '#b72525',
5 | errorBgColor: '#f9e6e6',
6 | borderRadius: '2px',
7 | secondaryColor: 'blue',
8 | inputWidth: '250px',
9 | textAreaHeight: '40px',
10 | inputLineHeight: '1.6em',
11 | inputBgColor: '#fdfdfd',
12 | inputDisabledBgColor: '#dcd9d9',
13 | inlineLabelWidth: '50%',
14 | fieldsetBgColor: '#f5f5f5',
15 | fieldsetBorder: 'none',
16 | placeholderColor: '#6a6a6a',
17 | focusColor: 'Highlight',
18 | successColor: 'lightgreen',
19 | borderColor: '#ccc',
20 | checkedColor: '#000',
21 | primaryFont: 'Helvetica',
22 | spacingUnit: '1em',
23 | iconCheckbox: 'url("data:image/svg+xmlbase64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBwb2ludHM9IjIuODM2LDE0LjcwOCA1LjY2NSwxMS44NzggMTMuNDE1LDE5LjYyOCAyNi4zMzQsNi43MTIgMjkuMTY0LDkuNTQgMTMuNDE1LDI1LjI4OCAiLz48L3N2Zz4")',
24 | buttonColor: '#333',
25 | buttonColorHover: '#555',
26 | buttonTextColor: '#fff',
27 | buttonSecondaryColor: '#333',
28 | buttonSecondaryColorHover: '#555',
29 | buttonSecondaryTextColor: '#fff',
30 | buttonColorDisabled: 'lightgrey',
31 | formMaxWidth: '740px',
32 | formMargin: '0',
33 | };
34 |
35 | theme.requiredColor = theme.baseColor;
36 | theme.spacingUnitFieldset = theme.spacingUnit;
37 | theme.spacingUnitCheckbox = theme.spacingUnit;
38 | theme.spacingUnitRadio = theme.spacingUnit;
39 | theme.buttonSpacingV = theme.spacingUnit;
40 | theme.buttonSpacingH = theme.spacingUnit;
41 |
42 | export default theme;
43 |
--------------------------------------------------------------------------------
/stories/RemoteForm.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { FetchForm } from '../src';
4 |
5 | const style = {
6 | label: {
7 | width: 100,
8 | },
9 | input: {
10 | width: 'calc(99% - 110px)',
11 | },
12 | refresh: {
13 | marginLeft: 108,
14 | },
15 | formWrapper: {
16 | overflow: 'hidden',
17 | backgroundColor: '#a1a1a1',
18 | },
19 | form: {
20 | padding: '16px',
21 | boxSizing: 'border-box',
22 | },
23 | hidden: {
24 | display: 'none',
25 | },
26 | collapsed: {
27 | maxHeight: 0,
28 | },
29 | expand: {
30 | position: 'fixed',
31 | top: 0,
32 | right: '30px',
33 | cursor: 'pointer',
34 | fontSize: '30px',
35 | },
36 | expanded: {
37 | top: '120px',
38 | transform: 'rotate(180deg)',
39 | },
40 | };
41 |
42 | class RemoteForm extends React.Component {
43 |
44 | constructor(props) {
45 | super(props);
46 |
47 | this.state = {
48 | baseUrl: 'https://redactie.natuurmonumenten.nl/api/v1',
49 | // baseUrl: 'http://dev.natuurmonumenten.nl/api/v1',
50 | path: 'node/2',
51 | field: 'field_form',
52 | visible: false,
53 | };
54 | }
55 |
56 | render() {
57 | return (
58 |
59 |
60 |
76 |
77 |
this.setState({ visible: !this.state.visible })}
80 | >⇓
81 |
this.form = component}
83 | baseUrl={this.state.baseUrl}
84 | path={this.state.path}
85 | field={this.state.field}
86 | />
87 |