baha/skyline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[test] remove react compenent

Browse Source
This commit is contained in:
baha 2025-01-31 09:00:58 +00:00
parent 780de61378
commit f1309b06d2
1 changed files with 300 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

600
src/layouts/Base/index.jsx
View File

@ -1,334 +1,334 @@
// Copyright 2021 99cloud // // Copyright 2021 99cloud
// // //
// Licensed under the Apache License, Version 2.0 (the "License"); // // Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. // // you may not use this file except in compliance with the License.
// You may obtain a copy of the License at // // You may obtain a copy of the License at
// // //
// http://www.apache.org/licenses/LICENSE-2.0 // // http://www.apache.org/licenses/LICENSE-2.0
// // //
// Unless required by applicable law or agreed to in writing, software // // Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, // // distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and // // See the License for the specific language governing permissions and
// limitations under the License. // // limitations under the License.
import React, { Component } from 'react'; // import React, { Component } from 'react';
import { inject, observer } from 'mobx-react'; // import { inject, observer } from 'mobx-react';
import { toJS, reaction } from 'mobx'; // import { toJS, reaction } from 'mobx';
import i18n from 'core/i18n'; // import i18n from 'core/i18n';
import { isAdminPage, isUserCenterPage } from 'utils/index'; // import { isAdminPage, isUserCenterPage } from 'utils/index';
import { BellOutlined } from '@ant-design/icons'; // import { BellOutlined } from '@ant-design/icons';
import checkItemPolicy from 'resources/skyline/policy'; // import checkItemPolicy from 'resources/skyline/policy';
import { Layout, Modal } from 'antd'; // import { Layout, Modal } from 'antd';
import GlobalHeader from 'components/Layout/GlobalHeader'; // import GlobalHeader from 'components/Layout/GlobalHeader';
import { setRouteMap, getPath } from 'utils/route-map'; // import { setRouteMap, getPath } from 'utils/route-map';
import renderAdminMenu from '../admin-menu'; // import renderAdminMenu from '../admin-menu';
import renderMenu from '../menu'; // import renderMenu from '../menu';
import renderUserMenu from '../user-menu'; // import renderUserMenu from '../user-menu';
import RightContext from './Right'; // import RightContext from './Right';
import LayoutMenu from './Menu'; // import LayoutMenu from './Menu';
import styles from './index.less'; // import styles from './index.less';
const { Header } = Layout; // const { Header } = Layout;
export class BaseLayout extends Component { // export class BaseLayout extends Component {
autoReaction = reaction( // autoReaction = reaction(
() => (this.props.rootStore.user || {}).keystone_token, // () => (this.props.rootStore.user || {}).keystone_token,
() => { // () => {
setRouteMap(this.menu); // setRouteMap(this.menu);
} // }
); // );
constructor(props) { // constructor(props) {
super(props); // super(props);
this.state = { // this.state = {
collapsed: false, // collapsed: false,
isOpenedInPopup: false, // State to track if opened in a popup // isOpenedInPopup: false, // State to track if opened in a popup
}; // };
this.init(); // this.init();
} // }
componentDidMount() { // componentDidMount() {
// Listen for postMessage from the parent app // // Listen for postMessage from the parent app
window.addEventListener('message', this.handleMessage, false); // window.addEventListener('message', this.handleMessage, false);
} // }
componentWillUnmount() { // componentWillUnmount() {
window.removeEventListener('message', this.handleMessage, false); // window.removeEventListener('message', this.handleMessage, false);
this.autoReaction(); // this.autoReaction();
} // }
get isAdminPage() { // get isAdminPage() {
const { pathname } = this.props.location; // const { pathname } = this.props.location;
return isAdminPage(pathname); // return isAdminPage(pathname);
} // }
get isUserCenterPage() { // get isUserCenterPage() {
const { pathname } = this.props.location; // const { pathname } = this.props.location;
return isUserCenterPage(pathname); // return isUserCenterPage(pathname);
} // }
get rootStore() { // get rootStore() {
return this.props.rootStore; // return this.props.rootStore;
} // }
get noticeCount() { // get noticeCount() {
return ( // return (
this.rootStore.noticeCount - (this.rootStore.noticeCountWaitRemove || 0) // this.rootStore.noticeCount - (this.rootStore.noticeCountWaitRemove || 0)
); // );
} // }
get user() { // get user() {
return toJS(this.rootStore.user) || null; // return toJS(this.rootStore.user) || null;
} // }
get hasAdminRole() { // get hasAdminRole() {
return this.user && this.rootStore.hasAdminRole; // return this.user && this.rootStore.hasAdminRole;
} // }
get hasAdminPageRole() { // get hasAdminPageRole() {
return this.user && this.rootStore.hasAdminPageRole; // return this.user && this.rootStore.hasAdminPageRole;
} // }
get originMenu() { // get originMenu() {
let ret = []; // let ret = [];
if (this.isUserCenterPage) { // if (this.isUserCenterPage) {
ret = renderUserMenu(i18n.t); // ret = renderUserMenu(i18n.t);
} else if (this.isAdminPage) { // } else if (this.isAdminPage) {
ret = renderAdminMenu(i18n.t); // ret = renderAdminMenu(i18n.t);
} else { // } else {
ret = renderMenu(i18n.t); // ret = renderMenu(i18n.t);
} // }
return ret; // return ret;
} // }
get globalNav() { // get globalNav() {
return this.menu; // return this.menu;
} // }
get menu() { // get menu() {
const menu = this.filterMenuByHidden(this.originMenu); // const menu = this.filterMenuByHidden(this.originMenu);
const newMenu = this.getMenuAllowed(menu); // const newMenu = this.getMenuAllowed(menu);
const filteredMenu = newMenu.filter((it) => { // const filteredMenu = newMenu.filter((it) => {
const { hasChildren = true, children } = it; // const { hasChildren = true, children } = it;
return !hasChildren || (hasChildren && children.length); // return !hasChildren || (hasChildren && children.length);
}); // });
return filteredMenu; // return filteredMenu;
} // }
get menuAll() { // get menuAll() {
// include hide menu // // include hide menu
return this.getMenuAllowed(this.originMenu); // return this.getMenuAllowed(this.originMenu);
} // }
getRouteName(routeName) { // getRouteName(routeName) {
return this.isAdminPage ? `${routeName}Admin` : routeName; // return this.isAdminPage ? `${routeName}Admin` : routeName;
} // }
getRoutePath(routeName, params = {}, query = {}) { // getRoutePath(routeName, params = {}, query = {}) {
const realName = this.getRouteName(routeName); // const realName = this.getRouteName(routeName);
return getPath({ key: realName, params, query }); // return getPath({ key: realName, params, query });
} // }
filterMenuByHidden = (menu = []) => { // filterMenuByHidden = (menu = []) => {
if (menu.length === 0) { // if (menu.length === 0) {
return menu; // return menu;
} // }
const newMenu = menu.filter((it) => !it.hidden); // const newMenu = menu.filter((it) => !it.hidden);
newMenu.forEach((item) => { // newMenu.forEach((item) => {
item.children = this.filterMenuByHidden(item.children); // item.children = this.filterMenuByHidden(item.children);
}); // });
return newMenu; // return newMenu;
}; // };
handleMessage = (event) => { // handleMessage = (event) => {
const trustedOrigins = [ // const trustedOrigins = [
'https://baha-dev.felcloud.io', // 'https://baha-dev.felcloud.io',
'https://demo.felcloud.io', // 'https://demo.felcloud.io',
]; // ];
if (trustedOrigins.includes(event.origin)) { // if (trustedOrigins.includes(event.origin)) {
const { message } = event.data; // const { message } = event.data;
if (message === 'openedInPopup') { // if (message === 'openedInPopup') {
this.setState({ isOpenedInPopup: true }); // this.setState({ isOpenedInPopup: true });
} // }
} // }
}; // };
checkItemEndpoints = (key) => this.rootStore.checkEndpoint(key); // checkItemEndpoints = (key) => this.rootStore.checkEndpoint(key);
getMenuAllowed = (menu) => { // getMenuAllowed = (menu) => {
// update menu according to license addons // // update menu according to license addons
const newMenu = []; // const newMenu = [];
menu.forEach((it) => { // menu.forEach((it) => {
const result = this.updateMenuItemByAllowed(it); // const result = this.updateMenuItemByAllowed(it);
if (result) { // if (result) {
newMenu.push(result); // newMenu.push(result);
} // }
}); // });
return newMenu; // return newMenu;
}; // };
onCollapseChange = (collapsed) => { // onCollapseChange = (collapsed) => {
this.setState({ // this.setState({
collapsed, // collapsed,
}); // });
}; // };
checkPath = (path, pathname, realPath) => { // checkPath = (path, pathname, realPath) => {
if (path instanceof RegExp) { // if (path instanceof RegExp) {
return path.test(pathname); // return path.test(pathname);
} // }
if (realPath) { // if (realPath) {
return pathname === realPath; // return pathname === realPath;
} // }
return path === pathname; // return path === pathname;
}; // };
getCurrentMenu = (pathname) => { // getCurrentMenu = (pathname) => {
const item = this.menuAll.find((it) => this.checkPath(it.path, pathname)); // const item = this.menuAll.find((it) => this.checkPath(it.path, pathname));
if (item) { // if (item) {
return [item]; // return [item];
} // }
let found = false; // let found = false;
let ret = []; // let ret = [];
this.menuAll.forEach((detail) => { // this.menuAll.forEach((detail) => {
if (!found && detail.children) { // if (!found && detail.children) {
const current = detail.children.find((it) => // const current = detail.children.find((it) =>
this.checkPath(it.path, pathname) // this.checkPath(it.path, pathname)
); // );
if (current) { // if (current) {
found = true; // found = true;
ret = [detail, current]; // ret = [detail, current];
} // }
if (!found) { // if (!found) {
detail.children.forEach((subDetail) => { // detail.children.forEach((subDetail) => {
if (subDetail.children) { // if (subDetail.children) {
const subCurrent = subDetail.children.find((it) => // const subCurrent = subDetail.children.find((it) =>
this.checkPath(it.path, pathname) // this.checkPath(it.path, pathname)
); // );
if (subCurrent) { // if (subCurrent) {
found = true; // found = true;
ret = [detail, subDetail, subCurrent]; // ret = [detail, subDetail, subCurrent];
} // }
} // }
}); // });
} // }
} // }
}); // });
return ret; // return ret;
}; // };
clearAllNotice = () => { // clearAllNotice = () => {
const elements = document.getElementsByClassName('ant-notification-notice'); // const elements = document.getElementsByClassName('ant-notification-notice');
while (elements.length > 0) { // while (elements.length > 0) {
elements[0].parentNode.removeChild(elements[0]); // elements[0].parentNode.removeChild(elements[0]);
} // }
this.rootStore.clearNoticeCount(); // this.rootStore.clearNoticeCount();
}; // };
updateMenuItemByAllowed(menuItem) { // updateMenuItemByAllowed(menuItem) {
const { policy, endpoints, children = [], ...rest } = menuItem; // const { policy, endpoints, children = [], ...rest } = menuItem;
if (policy && !checkItemPolicy({ policy })) { // if (policy && !checkItemPolicy({ policy })) {
return null; // return null;
} // }
if (endpoints && !this.checkItemEndpoints(endpoints)) { // if (endpoints && !this.checkItemEndpoints(endpoints)) {
return null; // return null;
} // }
if (children.length === 0) { // if (children.length === 0) {
return menuItem; // return menuItem;
} // }
const newChildren = children // const newChildren = children
.map((it) => this.updateMenuItemByAllowed(it)) // .map((it) => this.updateMenuItemByAllowed(it))
.filter((it) => !!it); // .filter((it) => !!it);
return { // return {
...rest, // ...rest,
children: newChildren, // children: newChildren,
}; // };
} // }
init() { // init() {
if (this.isAdminPage && !this.hasAdminPageRole) { // if (this.isAdminPage && !this.hasAdminPageRole) {
window.location.href = '/base/overview'; // window.location.href = '/base/overview';
} // }
this.routes = this.props.route.routes; // this.routes = this.props.route.routes;
setRouteMap(this.menu); // setRouteMap(this.menu);
} // }
renderNotice() { // renderNotice() {
if (this.noticeCount < 3) { // if (this.noticeCount < 3) {
return null; // return null;
} // }
return ( // return (
<div className={styles.notice} onClick={this.clearAllNotice}> // <div className={styles.notice} onClick={this.clearAllNotice}>
<BellOutlined /> // <BellOutlined />
<span style={{ marginLeft: 8, fontSize: 12 }}> // <span style={{ marginLeft: 8, fontSize: 12 }}>
{t('Close all notifications.')} // {t('Close all notifications.')}
</span> // </span>
</div> // </div>
); // );
} // }
renderHeader = () => ( // renderHeader = () => (
<GlobalHeader // <GlobalHeader
{...this.props} // {...this.props}
isAdminPage={this.isAdminPage} // isAdminPage={this.isAdminPage}
navItems={this.globalNav} // navItems={this.globalNav}
isUserCenterPage={this.isUserCenterPage} // isUserCenterPage={this.isUserCenterPage}
/> // />
); // );
render() { // render() {
const { pathname } = this.props.location; // const { pathname } = this.props.location;
const currentRoutes = this.getCurrentMenu(pathname); // const currentRoutes = this.getCurrentMenu(pathname);
console.log('testing popup'); // console.log('testing popup');
if (this.state.isOpenedInPopup) { // if (this.state.isOpenedInPopup) {
return ( // return (
<Modal // <Modal
visible // visible
closable={false} // closable={false}
footer={null} // footer={null}
style={{ // style={{
position: 'fixed', // position: 'fixed',
top: 0, // top: 0,
left: 0, // left: 0,
width: '100vw', // width: '100vw',
height: '100vh', // height: '100vh',
display: 'flex', // display: 'flex',
justifyContent: 'center', // justifyContent: 'center',
alignItems: 'center', // alignItems: 'center',
}} // }}
bodyStyle={{ // bodyStyle={{
textAlign: 'center', // textAlign: 'center',
fontSize: '18px', // fontSize: '18px',
padding: '20px', // padding: '20px',
}} // }}
> // >
<p>Connexion... Please wait!</p> // <p>Connexion... Please wait!</p>
</Modal> // </Modal>
); // );
} // }
return ( // return (
<div className={styles['base-layout']}> // <div className={styles['base-layout']}>
{this.renderNotice()} // {this.renderNotice()}
<Header className={styles.header}>{this.renderHeader()}</Header> // <Header className={styles.header}>{this.renderHeader()}</Header>
<LayoutMenu // <LayoutMenu
pathname={pathname} // pathname={pathname}
isAdminPage={this.isAdminPage} // isAdminPage={this.isAdminPage}
menu={this.menu} // menu={this.menu}
menuAll={this.menuAll} // menuAll={this.menuAll}
currentRoutes={currentRoutes} // currentRoutes={currentRoutes}
onCollapseChange={this.onCollapseChange} // onCollapseChange={this.onCollapseChange}
/> // />
<RightContext // <RightContext
{...this.props} // {...this.props}
{...this.state} // {...this.state}
currentRoutes={currentRoutes} // currentRoutes={currentRoutes}
isAdminPage={this.isAdminPage} // isAdminPage={this.isAdminPage}
/> // />
</div> // </div>
); // );
} // }
} // }
export default inject('rootStore')(observer(BaseLayout)); // export default inject('rootStore')(observer(BaseLayout));