render()

in src/FormBuilder.js [234:343]
94 lines of code
5 McCabe index (conditional complexity)

	render() {
		const {
			config,
			configTimestamp,
			registeredComponents,
			registeredActions,
			registeredRuleConditions,
			registeredValidators,
			renderForm,
			renderButtons,
			renderErrorSummary,
		} = this.props;

		// Don't render anything if no config is provided.
		if (!config) {
			return null;
		}

		if (config.version !== JSON_SPEC_VERSION) {
			throw new Error(`JSON forms spec version mismatch. Was: ${config.version}, expected: ${JSON_SPEC_VERSION}`);
		}

		const pathsToTreeMap = mapPathsToTree(config);

		return (
			<Formik
				ref={this.formCallbackRef}
				validateOnBlur
				validateOnChange
				enableReinitialize={false}
				onSubmit={values => {
					const computed = parseRules(config, pathsToTreeMap, values, registeredRuleConditions);

					const filteredValues = filterFormValues(values, config, computed, pathsToTreeMap);

					this.props.onSubmit(filteredValues);
				}}
				initialValues={this.getInitialValues()}
				validate={values => {
					const computed = parseRules(config, pathsToTreeMap, values, registeredRuleConditions);

					return validateForm(config, registeredValidators, values, computed, registeredComponents);
				}}
				render={formikProps => {
					const computed = parseRules(config, pathsToTreeMap, formikProps.values, registeredRuleConditions);

					// Start a recursive loop through each field in the config
					const fields = (config.fields || []).map(field => {
						const fieldComputedProperties = getComputedProperties(computed, field.id);

						// Don't render if not shown :)
						if (!fieldComputedProperties.shown) {
							return null;
						}

						return (
							<FormBuilderField
								key={field.id}
								formId={config.id}
								formik={formikProps}
								config={field}
								configTimestamp={configTimestamp}
								path={field.path}
								treePath={field.id}
								computed={computed}
								context={config.context}
								registeredComponents={registeredComponents}
								registeredRuleConditions={registeredRuleConditions}
								registeredActions={registeredActions}
								clearExternalError={errorPath => {
									this.setState(prevState => ({
										externalErrors: setIn(prevState.externalErrors, errorPath, undefined),
									}));
								}}
								externalErrors={this.state.externalErrors}
								pathsToTreeMap={pathsToTreeMap}
								onTriggerCallback={this.props.onActionCallback}
								runAction={this.runAction}
							/>
						);
					});

					// TODO pass correct props to renderButtons()
					const buttons = renderButtons();

					const errorSummaryData = getErrorSummaryData(config, formikProps.errors, this.state.externalErrors, computed);
					const errorSummary = renderErrorSummary({
						summaryData: errorSummaryData,
						submitCount: formikProps.submitCount,
						isValidating: formikProps.isValidating,
					});

					return renderForm({
						children: fields,
						buttons: buttons,
						errorSummary: errorSummary,
						// TODO: form error summary might go in here
						handleSubmit: event => {
							this.clearAllExternalErrors();
							formikProps.handleSubmit(event);
						},
						runAction: action => {
							this.runAction(action, undefined, formikProps.values);
						},
						formValues: formikProps.values,
					});
				}}
			/>
		);
	}