@cosva-lab/form-builder/FormSteps/index.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import React from 'react';
import compose from 'recompose/compose';
import { withStyles, createStyles, } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Stepper from '@material-ui/core/Stepper';
import StepComponent from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import { StepContent } from '@material-ui/core';
import { observer } from 'mobx-react';
import { FieldsRender } from '../FieldsRender';
import FooterSteps from './FooterSteps';
import { getMessage } from '../FieldTranslate';
const styles = (theme) => createStyles({
    root: Object.assign(Object.assign({}, theme.mixins.gutters()), { paddingTop: theme.spacing(2), paddingBottom: theme.spacing(4), margin: theme.spacing(2), width: '100%' }),
});
let FormStepsComponent = class FormStepsComponent extends React.Component {
    render() {
        const { props } = this;
        const { getSteps = () => props.stepsBuild.steps, handleNextStep, changeField, handleBackStep, footerRender, stepperProps, gridProps, children, stepsBuild, } = props;
        const { activeStep, loading, footerSteps } = stepsBuild;
        const steps = getSteps();
        const fieldsTemp = (activeStep) => {
            const { fields, ns = stepsBuild.ns, validate } = steps[activeStep];
            return (fields && (React.createElement(React.Fragment, null,
                React.createElement(Grid, { item: true, xs: 12 }, fields && (React.createElement(FieldsRender, { ns: ns, validate: validate, fields: fields, getSteps: () => steps, changeField: changeField }))),
                React.createElement(Grid, { item: true, xs: 12 },
                    React.createElement(FooterSteps, Object.assign({}, {
                        ns,
                        handleNextStep,
                        handleBackStep,
                        steps,
                        footerSteps,
                        footerRender,
                        activeStep,
                        loading,
                    }))))));
        };
        return (React.createElement(React.Fragment, null,
            React.createElement(Grid, { container: true, spacing: 0 },
                React.createElement(Grid, { item: true, xs: 12 },
                    React.createElement(Stepper, Object.assign({ activeStep: activeStep }, stepperProps), steps.map((step, key) => {
                        const { label, stepper: stepperState = true, ns = stepsBuild.ns, } = step;
                        return stepperState ? (React.createElement(StepComponent, { key: `step-${key}` },
                            React.createElement(StepLabel, null, getMessage({
                                ns: typeof label === 'string'
                                    ? ns
                                    : label.ns || ns,
                                message: typeof label === 'string'
                                    ? label
                                    : label.message,
                            })),
                            stepperProps &&
                                stepperProps.orientation === 'vertical' && (React.createElement(StepContent, null, fieldsTemp(key))))) : null;
                    }))),
                children,
                ((stepperProps &&
                    (!stepperProps.orientation ||
                        stepperProps.orientation === 'horizontal')) ||
                    !stepperProps) && (React.createElement(Grid, Object.assign({ container: true, direction: "row", justify: "center", alignItems: "center", spacing: 4 }, gridProps), fieldsTemp(activeStep))))));
    }
};
FormStepsComponent = __decorate([
    observer
], FormStepsComponent);
export const FormSteps = compose(withStyles(styles, { name: 'formSteps' }))(FormStepsComponent);
export default FormSteps;
//# sourceMappingURL=index.js.map