@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
63 lines • 3.56 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import React, { useState } from "react";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Grid from "@material-ui/core/Grid";
import _ from "lodash";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { MuiBuilderControl } from "../../../../..";
import { MuiCheckbox, MuiHeader, MuiTextInput } from "../../../../..";
var validationSchema = yup.object().shape({
title: yup.string().required("Form Title is required"),
description: yup.string().required("Form Description is required"),
multistepped: yup.bool(),
controls: yup.array().of(yup.object().shape({
name: yup.string().required("Field name is required"),
type: yup.string().required("Field type is required"),
controlType: yup.string().required("Control type is required"),
label: yup.string().required("Label is required"),
length: yup.number(),
plaeholder: yup.string(),
tooltip: yup.string(),
active: yup.bool(),
visible: yup.bool(),
required: yup.bool(),
disabled: yup.bool(),
readonly: yup.bool()
}))
});
function FormBuilderSection(props) {var _useForm =
useForm({ validationSchema: validationSchema }),handleSubmit = _useForm.handleSubmit,errors = _useForm.errors,control = _useForm.control;var
classes = props.classes,index = props.index;var _useState =
useState([]),_useState2 = _slicedToArray(_useState, 2),controls = _useState2[0],setControls = _useState2[1];
return /*#__PURE__*/React.createElement("form", { key: String(index), onSubmit: handleSubmit(console.log) }, /*#__PURE__*/
React.createElement(Card, { className: classes.root }, /*#__PURE__*/
React.createElement(CardContent, null, /*#__PURE__*/
React.createElement(MuiHeader, { title: "General Information", description: "Provide information regarding this form section", actions: [
{
title: "Remove",
color: "secondary",
key: "remove-section",
onClick: function onClick() {return props.onRemoveSection(index);}
}]
}), /*#__PURE__*/
React.createElement(Grid, { container: true, spacing: 3 }, /*#__PURE__*/
React.createElement(Grid, { item: true, xs: 12, md: 4 }, /*#__PURE__*/
React.createElement(MuiTextInput, { id: "title", name: "title", label: "Form Title", control: control, errors: errors.title })), /*#__PURE__*/
React.createElement(Grid, { item: true, xs: 12, md: 4 }, /*#__PURE__*/
React.createElement(MuiTextInput, { id: "description", name: "description", label: "Form Description", control: control, errors: errors.description })), /*#__PURE__*/
React.createElement(Grid, { item: true, xs: 12, md: 4 }, /*#__PURE__*/
React.createElement(MuiCheckbox, { id: "multistepped", name: "multistepped", label: "Has multiple steps in form?", control: control, errors: errors.description })))), /*#__PURE__*/
React.createElement(CardContent, null, /*#__PURE__*/
React.createElement(MuiHeader, { type: "sub", title: "Controls Information", description: "Provide controls that will be part of this form", actions: [
{
key: "add-control",
color: "primary",
title: "Add Control",
onClick: function onClick() {return setControls(_.concat(controls, [{}]));}
}]
}),
_.map(controls, function (__, index) {return /*#__PURE__*/React.createElement(MuiBuilderControl, { index: index, control: control, key: String(index), errors: errors });}))));
}
export default FormBuilderSection;
//# sourceMappingURL=MuiBuilderSection.js.map