react-antd-admin-panel
Version:
Easy prototyping admin panel using React and Antd
147 lines • 8.24 kB
JavaScript
import React, { useEffect, useRef, useState } from "react";
import { Col, Row, Form, Card } from "antd";
import DatePickerToggle from "./builder/DatePickerToggle";
import DatePickerRange from "./builder/DatePickerRange";
import Autocomplete from "./builder/Autocomplete";
import RangePicker from "./builder/RangePicker";
import Typography from "./builder/Typography";
import DatePicker from "./builder/DatePicker";
import Conditions from "./builder/Conditions";
import Checkbox from "./builder/Checkbox";
import Multiple from "./builder/Multiple";
import Carousel from "./builder/Carousel";
import Creator from "./builder/Creator";
import Result from "./builder/feedback/Result";
import Upload from "./builder/Upload";
import Drawer from "./builder/Drawer";
import Select from "./builder/Select";
import Button from "./builder/Button";
import Search from "./builder/Search";
import Switch from "./builder/Switch";
import Slider from "./builder/Slider";
import Sider from "./builder/Sider";
import Space from "./builder/Space";
import Steps from "./builder/Steps";
import Modal from "./builder/Modal";
import Title from "./builder/Title";
import Input from "./builder/Input";
import Radio from "./builder/Radio";
import Alert from "./builder/Alert";
import Tree from "./builder/Tree";
import List from "./builder/List";
import Menu from "./builder/Menu";
function getComponent(props) {
// We must remove the section s.t. a Section-component can't iterate on itself.
let addProps = Object.assign({}, props);
if (typeof props.model === 'function') {
return React.createElement(Section, Object.assign({}, addProps));
}
if (props.model._class === 'Section' && !!props.model._component) {
const Component = props.model._component;
addProps['args'] = props.model._componentArgs;
return (React.createElement(Component, Object.assign({}, addProps)));
}
switch (props.model._class) {
case 'DatePickerToggle': return React.createElement(DatePickerToggle, Object.assign({}, addProps));
case 'DatePickerRange': return React.createElement(DatePickerRange, Object.assign({}, addProps));
case 'Autocomplete': return React.createElement(Autocomplete, Object.assign({}, addProps));
case 'RangePicker': return React.createElement(RangePicker, Object.assign({}, addProps));
case 'Typography': return React.createElement(Typography, Object.assign({}, addProps));
case 'DatePicker': return React.createElement(DatePicker, Object.assign({}, addProps));
case 'Conditions': return React.createElement(Conditions, Object.assign({}, addProps));
case 'Checkbox': return React.createElement(Checkbox, Object.assign({}, addProps));
case 'Multiple': return React.createElement(Multiple, Object.assign({}, addProps));
case 'Carousel': return React.createElement(Carousel, Object.assign({}, addProps));
case 'Creator': return React.createElement(Creator, Object.assign({}, addProps));
case 'Section': return React.createElement(Section, Object.assign({}, addProps));
case 'Result': return React.createElement(Result, Object.assign({}, addProps));
case 'Upload': return React.createElement(Upload, Object.assign({}, addProps));
case 'Drawer': return React.createElement(Drawer, Object.assign({}, addProps));
case 'Select': return React.createElement(Select, Object.assign({}, addProps));
case 'Button': return React.createElement(Button, Object.assign({}, addProps));
case 'Switch': return React.createElement(Switch, Object.assign({}, addProps));
case 'Slider': return React.createElement(Slider, Object.assign({}, addProps));
case 'Search': return React.createElement(Search, Object.assign({}, addProps));
case 'Title': return React.createElement(Title, Object.assign({}, addProps));
case 'Steps': return React.createElement(Steps, Object.assign({}, addProps));
case 'Modal': return React.createElement(Modal, Object.assign({}, addProps));
case 'Space': return React.createElement(Space, Object.assign({}, addProps));
case 'Sider': return React.createElement(Sider, Object.assign({}, addProps));
case 'Input': return React.createElement(Input, Object.assign({}, addProps));
case 'Radio': return React.createElement(Radio, Object.assign({}, addProps));
case 'Alert': return React.createElement(Alert, Object.assign({}, addProps));
case 'Menu': return React.createElement(Menu, Object.assign({}, addProps));
case 'Tree': return React.createElement(Tree, Object.assign({}, addProps));
case 'List': return React.createElement(List, Object.assign({}, addProps));
default:
return React.createElement("div", { key: null }, "Undefined Component");
}
}
const Formula = (props) => {
let [form] = Form.useForm();
if (props.section._formulaIsRoot) {
return (React.createElement(Form, { form: form },
React.createElement(Iterate, { main: props.main, form: form, section: props.section })));
}
else {
return React.createElement(Iterate, { main: props.main, form: props.form, section: props.section });
}
};
const Iterate = (props) => {
if (props.section._type === 'Row') {
return (React.createElement(Row, { style: props.section._style, justify: props.section._justify }, props.section._fields.map((model, i) => {
const addProps = Object.assign(Object.assign({}, props), { model: model, key: i });
return getComponent(Object.assign({}, addProps));
})));
}
return (React.createElement(Col, { style: props.section._style, span: 24 }, props.section._fields.map((model, i) => {
const addProps = Object.assign(Object.assign({}, props), { model: model, key: i });
return getComponent(Object.assign({}, addProps));
})));
};
const Section = (props) => {
// If async is set to true the model or sectionModel will be a void function.
// The first argument of sectionModel is called once the section is build.
var _a, _b, _c;
let [model, setModel] = useState(false);
let [style, setStyle] = useState((_a = props.style) !== null && _a !== void 0 ? _a : {});
let [ref] = useState(useRef());
let section = (_b = props.model) !== null && _b !== void 0 ? _b : props.section;
if (!section)
console.log('Section is all weird. What did you pass to the .tsx?', section);
useEffect(() => {
var _a;
// If a formula is created or re-drawn, reset the fields in case the component was recycled.
if (section && section._formulaIsRoot) {
(_a = props.form) === null || _a === void 0 ? void 0 : _a.resetFields();
}
section._onComplete();
}, [section]);
let formula = () => React.createElement(Formula, { main: props.main, form: props.form, section: model });
section._onComplete = () => {
var _a, _b;
if (section && typeof section === 'function') {
section((r) => {
var _a, _b;
if (!section._formula && ((_a = props.parent) === null || _a === void 0 ? void 0 : _a._formula)) {
(_b = r.formulaSetChildren) === null || _b === void 0 ? void 0 : _b.call(r, props.parent._formula);
}
setModel(r);
}, () => { }, props.main, props.args);
}
else {
if (!section._formula && ((_a = props.parent) === null || _a === void 0 ? void 0 : _a._formula)) {
(_b = section.formulaSetChildren) === null || _b === void 0 ? void 0 : _b.call(section, props.parent._formula);
}
setModel(section);
}
};
if (model) {
return (React.createElement("div", { style: style, ref: ref }, model._card ? React.createElement(Card, { style: (_c = model._cardStyle) !== null && _c !== void 0 ? _c : {} }, formula()) : formula()));
}
else {
return null;
}
};
export default Section;
//# sourceMappingURL=Section.js.map