react-antd-admin-panel
Version:
Easy prototyping admin panel using React and Antd
166 lines • 11 kB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
import SectionComponent from "./Section";
import Mapping from "./Mapping";
import Header from './Header';
import { Button, Divider, Layout, Modal, Tooltip, Col, Row, Progress } from "antd";
import { CloseOutlined, MenuOutlined } from "@ant-design/icons/lib";
import { BrowserRouter, Route as RouteComponent, Routes } from "react-router-dom";
import Main from "../typescript/main";
const LoadingTopBar = () => {
const [progress, setProgress] = useState(0);
const interval = [5, 25, 50, 75, 85, 90, 95];
const mounted = useRef(false);
const increase = (i) => {
setProgress(interval[i]);
if (i < 6) {
setTimeout(() => {
if (mounted.current)
increase(i + 1);
}, 100);
}
};
useEffect(() => {
mounted.current = true;
setTimeout(() => {
if (mounted.current)
increase(0);
}, 100);
return () => {
mounted.current = false;
};
}, []);
return (React.createElement("div", { style: { top: 0, left: 0, height: 24, width: '100vw', position: 'absolute', overflow: 'hidden' } },
React.createElement("div", { style: { top: -14, left: '-5vw', zIndex: 11, width: '110vw', position: 'absolute' } },
React.createElement(Progress, { strokeLinecap: 'square', percent: progress, status: 'active' }))));
};
const LoadingTopBarComplete = () => {
const [show, setShow] = useState(true);
const mounted = useRef(false);
useEffect(() => {
mounted.current = true;
setTimeout(() => {
if (mounted.current)
setShow(false);
}, 250);
return () => {
mounted.current = false;
};
}, []);
if (!show)
return null;
return (React.createElement("div", { style: { top: 0, left: 0, height: 24, width: '100vw', position: 'absolute', overflow: 'hidden' } },
React.createElement("div", { style: { top: -14, left: '-5vw', zIndex: 11, width: '110vw', position: 'absolute' } },
React.createElement(Progress, { strokeLinecap: 'square', percent: 100 }))));
};
export default class App extends React.Component {
constructor(props) {
var _a, _b, _c;
super(props);
this.defaultModal = {
modal: {
key: 0,
title: 'Title',
label: 'Label',
visible: false,
section: false,
mask: true,
maskClosable: true,
handleOk: () => { },
handleCancel: () => { },
}
};
this.state = {
toggleLoading: (value) => this.setState({ loading: value }),
siderRightSection: { _key: 0, refresh: () => { } },
sider: undefined,
loadingRightSection: false,
loading: true,
initiated: false,
booted: false,
modalLoading: false,
modal: this.defaultModal,
collapsed: !!((_c = (_b = (_a = this.props.config) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.drawer) === null || _c === void 0 ? void 0 : _c.collapsed),
routeKey: '/',
};
this.main = new Main(this, this.props.config);
this.main.setModal((v) => this.setState({ modal: v }));
this.main.setRouteKey((v) => this.setState({ routeKey: v }));
this.main.setModalClose(() => this.setState(this.defaultModal));
this.main.setModalLoading((v) => this.setState({ modalLoading: v }));
this.main.setSiderRight((v) => this.setState({ siderRightSection: v }));
this.main.setSiderRightLoading((v) => this.setState({ loadingRightSection: v }));
this.main.setSiderRightReload(() => { var _a; return (_a = this.state.siderRightSection) === null || _a === void 0 ? void 0 : _a.refresh(); });
this.main.setSiderRightClose(() => this.setState({ siderRightSection: { _key: 0, refresh: () => { } } }));
}
componentDidMount() {
let route = () => {
this.main.$route(`${document.location.pathname}${document.location.search}`, () => this.setState({ initiated: true }), () => this.main.$config.config.bootFailed(this.main));
};
if (this.main.$config.config.boot) {
this.main.$config.config.boot(this.main, route);
}
else {
route();
}
}
getRouteComponent(main, route, i) {
if (!this.state.initiated)
return;
return (React.createElement(RouteComponent, { key: i, path: route._path._matchedPath, element: React.createElement(route.Component, { main: main }) }));
}
getHeader() {
var _a, _b;
if ((_a = this.main.$config.config) === null || _a === void 0 ? void 0 : _a.hideHeader)
return (React.createElement(React.Fragment, null));
return (React.createElement(Row, { justify: 'start' },
React.createElement(Row, { style: { width: '100%' } },
React.createElement(Row, { justify: 'start', style: { width: '50%' } },
React.createElement(Header, { main: this.main, logo: (_b = this.main.$config.config) === null || _b === void 0 ? void 0 : _b.pathToLogo },
React.createElement("div", { style: { marginTop: 2, marginLeft: 36 } },
React.createElement(MenuOutlined, { onClick: () => this.setState({ collapsed: !this.state.collapsed }) })))),
React.createElement(Row, { justify: 'end', style: { width: '50%' } }, this.state.initiated &&
this.main.$config.config.profile &&
React.createElement(Layout.Header, { className: "site-layout", style: { padding: 0, marginRight: 36 } },
React.createElement(SectionComponent, { main: this.main, section: this.main.$config.config.profile, style: { width: '100%' } })))),
React.createElement(Divider, { style: { margin: '0px' } })));
}
render() {
return (React.createElement(BrowserRouter, null,
React.createElement(Mapping, { main: this.main, state: this.state, props: this.props }),
this.state.modal
&& (React.createElement(Modal, { footer: this.state.modal.footer, key: this.state.modal.key, style: this.state.modal.style, className: this.state.modal.className, closable: this.state.modal.closable, title: this.state.modal.title, visible: this.state.modal.visible, mask: this.state.modal.mask, maskClosable: this.state.modal.maskClosable, onOk: this.state.modal.handleOk, confirmLoading: this.state.modalLoading, onCancel: this.state.modal.handleCancel, closeIcon: React.createElement(CloseOutlined, { style: { fontSize: 12, opacity: 0.8 } }) }, this.state.modal.section ? (React.createElement(SectionComponent, { key: this.state.modal.section._key, main: this.main, section: this.state.modal.section })) : React.createElement("p", null, this.state.modal.label))),
this.state.initiated && (React.createElement(Layout, { style: { backgroundColor: 'transparent' } },
this.state.loading ? React.createElement(LoadingTopBar, null) : React.createElement(LoadingTopBarComplete, null),
this.main.$config.drawer
? (React.createElement(Layout.Sider, { trigger: null, collapsed: this.state.collapsed, collapsible: true, collapsedWidth: 0, className: "site-layout", width: 236, style: { minHeight: '100vh', height: '100%', left: 0, position: 'fixed', zIndex: 10 } },
React.createElement(Row, null,
React.createElement(Col, null,
React.createElement(Divider, { type: "vertical", style: { height: 64, margin: 0, top: 0 }, orientation: "right" }))),
React.createElement(Divider, { style: { margin: 0 } }),
React.createElement(SectionComponent, { main: this.main, section: this.main.$config.drawer }))) : React.createElement(React.Fragment, null),
React.createElement(Layout, { className: "site-layout", style: {
marginRight: this.state.siderRightSection._key ? 500 : 0,
marginLeft: this.state.collapsed ? 0 : 236,
} },
this.getHeader(),
React.createElement(Layout, { className: "site-layout", key: this.state.routeKey },
React.createElement(Row, { justify: 'start' },
React.createElement(Col, { span: 24 },
React.createElement(Layout.Content, { style: { overflow: 'auto', height: 'calc(100vh - 65px)' } },
React.createElement(Routes, null, Object.keys(this.main.$config.routes).map((key, i) => {
let route = this.main.$config.routes[key];
return this.getRouteComponent(this.main, route, i);
}))))))),
React.createElement(Layout.Sider, { trigger: null, collapsed: !this.state.siderRightSection._key, collapsible: true, collapsedWidth: 0, className: "site-layout", width: 500, style: { minHeight: '100vh', height: '100%', position: 'fixed', right: 0, padding: 0, overflow: 'auto' } },
React.createElement(Row, null,
React.createElement(Divider, { type: 'vertical', style: { height: '100vh', margin: 0 } }),
React.createElement(Layout, { style: { backgroundColor: '#d3d3d326', margin: 0, width: 480, minHeight: '100vh', height: '100%' } },
React.createElement(Layout.Header, { className: "site-layout", style: { padding: 0, height: 64 } },
React.createElement(Row, { justify: 'end', style: { marginRight: 24, marginTop: 20 } },
React.createElement(Tooltip, { title: "Close" },
React.createElement(Button, { shape: "circle", size: "small", icon: React.createElement(CloseOutlined, { style: { fontSize: 10, opacity: 0.6 } }), onClick: () => this.main._setSiderRightClose() })))),
React.createElement(Divider, { style: { margin: '0px' } }),
React.createElement("div", { style: { marginRight: 24, marginLeft: 24 } }, this.state.siderRightSection._key ? (React.createElement(SectionComponent, { key: this.state.siderRightSection._key, main: this.main, section: this.state.siderRightSection })) : null))))))));
}
}
//# sourceMappingURL=App.js.map