@raona/components/dist/components/steppedForm/FormElements/FormStep.js

React components used at Raona to work with SPFx

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_1 = require("react");
var Slider_1 = require("office-ui-fabric-react/lib/components/Slider/Slider");
var SPTextField_1 = require("../WrappedComponents/SPTextField");
var SPDropdown_1 = require("../WrappedComponents/SPDropdown");
var SPChoiceGroup_1 = require("../WrappedComponents/SPChoiceGroup");
var SPTaxonomyPicker_1 = require("../WrappedComponents/SPTaxonomyPicker");
var SPPeoplePicker_1 = require("../WrappedComponents/SPPeoplePicker");
var SPFilePicker_1 = require("../WrappedComponents/SPFilePicker");
var SPDatePicker_1 = require("../WrappedComponents/SPDatePicker");
var SPReactQuill_1 = require("../WrappedComponents/SPReactQuill");
var SPCheckbox_1 = require("../WrappedComponents/SPCheckbox");
var SPListItemPicker_1 = require("../WrappedComponents/SPListItemPicker");
var DisplayFormErrors_1 = require("./DisplayFormErrors");
var FormStep = /** @class */ (function (_super) {
    __extends(FormStep, _super);
    function FormStep() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    FormStep.prototype.getErrorDataForField = function (fieldId) {
        var formErrors = this.props.formErrors;
        var errors = formErrors.filter(function (ve) { return ve.path.indexOf(fieldId) === 0; });
        var isArray = Array.isArray(errors);
        if (isArray && errors.length === 0 || !isArray)
            return [];
        return errors.map(function (error) {
            var errorMessage = error.message;
            if (typeof error.value === 'string' && error.value) {
                errorMessage = error.value + " - " + error.message;
            }
            return errorMessage;
        });
    };
    FormStep.prototype.checkIfSetFieldValue = function (fieldId) {
        var _a = this.props, values = _a.values, formattedValues = _a.formattedValues;
        return typeof values[fieldId] === 'undefined' && typeof formattedValues[fieldId] !== 'undefined';
    };
    FormStep.prototype.render = function () {
        var _this = this;
        var _a = this.props, fieldGroups = _a.fieldGroups, formInnerWrapperClassName = _a.formInnerWrapperClassName;
        return (React.createElement("div", { className: formInnerWrapperClassName }, fieldGroups.map(function (group) {
            var fields = group.fields.map(function (x) { return _this.renderField(x); });
            return group.wrapperClassName
                // TODO: hardcoded class -> change asap
                ? React.createElement("div", { className: group.wrapperClassName },
                    React.createElement("p", { className: "modal__sectionTitle" }, group.name),
                    fields)
                : React.createElement(react_1.Fragment, null,
                    React.createElement("p", { className: "modal__sectionTitle" }, group.name),
                    fields);
        })));
    };
    FormStep.prototype.renderField = function (fieldData) {
        var _a = this.props, setValues = _a.setValues, setFieldValue = _a.setFieldValue, handleBlur = _a.handleBlur, touched = _a.touched, values = _a.values, context = _a.context, deleteFile = _a.deleteFile, showErrors = _a.showErrors, formattedValues = _a.formattedValues;
        var errors = this.getErrorDataForField(fieldData.id);
        if (!showErrors)
            errors = [];
        switch (fieldData.type) {
            case 'TextField':
                if (this.checkIfSetFieldValue(fieldData.id))
                    setFieldValue(fieldData.id, formattedValues[fieldData.id]);
                return (React.createElement(react_1.Fragment, null,
                    React.createElement(SPTextField_1.SPTextField, __assign({ onChange: function (e) { setFieldValue(fieldData.id, e); setValues(fieldData.id, e); }, onBlur: handleBlur, value: values[fieldData.id], defaultValue: formattedValues[fieldData.id], errorMessage: errors[0] }, fieldData.compProps))));
            case 'Dropdown':
                if (typeof formattedValues[fieldData.id] !== 'undefined')
                    fieldData.compProps.dropdownOptions = formattedValues[fieldData.id];
                if (this.checkIfSetFieldValue(fieldData.id))
                    setFieldValue(fieldData.id, formattedValues[fieldData.id]);
                return (React.createElement(react_1.Fragment, null,
                    React.createElement(SPDropdown_1.SPDropdown, __assign({ onChange: function (e) { setFieldValue(fieldData.id, e); setValues(fieldData.id, e, fieldData.compProps.dropdownOptions); }, 
                        /* defaultSelectedKeys={Array.isArray(defaultValues[fieldData.id]) && defaultValues[fieldData.id].map((item) => {
                            return item.key;
                        })}
                        defaultSelectedKey={defaultValues[fieldData.id]} */
                        errors: React.createElement(DisplayFormErrors_1.DisplayFormErrors, { formErrors: errors }) }, fieldData.compProps))));
            case 'ChoiceGroup':
                if (this.checkIfSetFieldValue(fieldData.id))
                    setFieldValue(fieldData.id, formattedValues[fieldData.id]);
                return (React.createElement(react_1.Fragment, null,
                    React.createElement(SPChoiceGroup_1.SPChoiceGroup, __assign({ onChange: function (e) { setFieldValue(fieldData.id, e); setValues(fieldData.id, e); }, defaultValues: formattedValues[fieldData.id] && formattedValues[fieldData.id].key, errors: React.createElement(DisplayFormErrors_1.DisplayFormErrors, { formErrors: errors }) }, fieldData.compProps))));
            case 'Slider':
                if (this.checkIfSetFieldValue(fieldData.id))
                    setFieldValue(fieldData.id, formattedValues[fieldData.id]);
                return (React.createElement(react_1.Fragment, null,
                    React.createElement("div", null, fieldData.name),
                    React.createElement(Slider_1.Slider, __assign({ onChange: function (value) { setFieldValue(fieldData.id, value); setValues(fieldData.id, value); }, defaultValue: formattedValues[fieldData.id], errors: React.createElement(DisplayFormErrors_1.DisplayFormErrors, { formErrors: errors }) }, fieldData.compProps))));
            case 'SPTaxonomy':
                if (this.checkIfSetFieldValue(fieldData.id))
                    setFieldValue(fieldData.id, formattedValues[fieldData.id]);
                return (React.createElement(react_1.Fragment, null,
                    React.createElement(SPTaxonomyPicker_1.SPTaxonomyPicker, __assign({ context: context, onChange: function (e) { setFieldValue(fieldData.id, e); setValues(fieldData.id, e); }, defaultValues: formattedValues[fieldData.id], errors: React.createElement(DisplayFormErrors_1.DisplayFormErrors, { formErrors: errors }) }, fieldData.compProps))));
            case 'SPPeople':
                var defaultUsers = [];
                var hasDefaultUsers = false;
                if (Array.isArray(formattedValues[fieldData.id])) {
                    defaultUsers = formattedValues[fieldData.id].map(function (user) { return user.secondaryText; });
                    // Filter undefined or users with '' as secondary text.
                    defaultUsers = defaultUsers.filter(function (u) { return u; });
                    hasDefaultUsers = defaultUsers.length > 0;
                }
                if (this.checkIfSetFieldValue(fieldData.id))
                    setFieldValue(fieldData.id, defaultUsers);
                return (React.createElement(react_1.Fragment, null,
                    React.createElement(SPPeoplePicker_1.SPPeoplePicker, __assign({ context: context, onChange: function (e) { setFieldValue(fieldData.id, e); setValues(fieldData.id, e); }, defaultSelectedUsers: hasDefaultUsers ? defaultUsers : undefined, errors: React.createElement(DisplayFormErrors_1.DisplayFormErrors, { formErrors: errors }) }, fieldData.compProps))));
            case 'FilePicker':
                if (this.checkIfSetFieldValue(fieldData.id))
                    setFieldValue(fieldData.id, formattedValues[fieldData.id]);
                return (React.createElement(react_1.Fragment, null,
                    React.createElement(SPFilePicker_1.SPFilePicker, __assign({ onFilesChange: function (e) { setFieldValue(fieldData.id, e); setValues(fieldData.id, e); }, inputName: fieldData.name, touched: touched, handleBlur: handleBlur, values: values[fieldData.id], id: fieldData.id, deleteFile: deleteFile, setFieldValue: setFieldValue, errorMessage: React.createElement(DisplayFormErrors_1.DisplayFormErrors, { formErrors: errors }) }, fieldData.compProps))));
            case 'DatePicker':
                if (this.checkIfSetFieldValue(fieldData.id))
                    setFieldValue(fieldData.id, formattedValues[fieldData.id]);
                return (React.createElement(react_1.Fragment, null,
                    React.createElement(SPDatePicker_1.SPDatePicker, __assign({ onChange: function (e) { setFieldValue(fieldData.id, e); setValues(fieldData.id, e); }, dateValue: values[fieldData.id] && values[fieldData.id], errors: React.createElement(DisplayFormErrors_1.DisplayFormErrors, { formErrors: errors }) }, fieldData.compProps))));
            case 'RichHTML':
                if (typeof formattedValues[fieldData.id] === 'undefined')
                    formattedValues[fieldData.id] = '';
                if (this.checkIfSetFieldValue(fieldData.id))
                    setFieldValue(fieldData.id, formattedValues[fieldData.id]);
                return (React.createElement(react_1.Fragment, null,
                    React.createElement(SPReactQuill_1.SPReactQuill, __assign({ value: values[fieldData.id] === undefined ? (values[fieldData.id] = fieldData.initialValue) : values[fieldData.id], onChange: function (e) { setFieldValue(fieldData.id, e); setValues(fieldData.id, e); }, defaultValue: formattedValues[fieldData.id] === undefined ? (formattedValues[fieldData.id] = fieldData.initialValue) : formattedValues[fieldData.id], errors: React.createElement(DisplayFormErrors_1.DisplayFormErrors, { formErrors: errors }) }, fieldData.compProps))));
            case 'Checkbox':
                if (this.checkIfSetFieldValue(fieldData.id))
                    setFieldValue(fieldData.id, formattedValues[fieldData.id]);
                return (React.createElement(react_1.Fragment, null,
                    React.createElement(SPCheckbox_1.SPCheckbox, __assign({ defaultChecked: formattedValues[fieldData.id], onChange: function (e, isChecked) { setFieldValue(fieldData.id, isChecked); setValues(fieldData.id, isChecked); }, defaultValues: formattedValues[fieldData.id], errors: React.createElement(DisplayFormErrors_1.DisplayFormErrors, { formErrors: errors }) }, fieldData.compProps))));
            case 'SPListItemPicker':
                if (this.checkIfSetFieldValue(fieldData.id))
                    setFieldValue(fieldData.id, formattedValues[fieldData.id]);
                return (React.createElement(react_1.Fragment, null,
                    React.createElement(SPListItemPicker_1.SPListItemPicker, __assign({ onSelectedItem: function (e) { setFieldValue(fieldData.id, e); setValues(fieldData.id, e); }, defaultSelectedItems: formattedValues[fieldData.id], context: context, errors: React.createElement(DisplayFormErrors_1.DisplayFormErrors, { formErrors: errors }) }, fieldData.compProps))));
            case 'CustomField':
                var element = fieldData.renderer
                    ? fieldData.renderer(fieldData.id, values[fieldData.id] || formattedValues[fieldData.id], setValues, setFieldValue, errors)
                    : React.createElement("div", null, "Custom Field without renderer");
                return element;
        }
    };
    return FormStep;
}(react_1.Component));
exports.FormStep = FormStep;