pav
/
pav-fe-kac-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Revert "react-portal 설치" 

This reverts commit 23eea1b752.
master
junh_eee(이준희) 6 months ago
parent
23eea1b752
commit
a8aaa438b3
5 changed files with 109 additions and 139 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      package-lock.json
  2. 1
      package.json
  3. 155
      src/@core/layouts/VerticalLayout.js
  4. 29
      src/components/vertiport/VertiportRightMenu.js
  5. 55
      src/views/vertiport/VertiportView.js

8
package-lock.json generated
Unescape View File

@ -21968,14 +21968,6 @@
} }
} }
}, },
"react-portal": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/react-portal/-/react-portal-4.2.2.tgz",
"integrity": "sha512-vS18idTmevQxyQpnde0Td6ZcUlv+pD8GTyR42n3CHUQq9OHi1C4jDE4ZWEbEsrbrLRhSECYiao58cvocwMtP7Q==",
"requires": {
"prop-types": "^15.5.8"
}
},
"react-rating": { "react-rating": {
"version": "2.0.5", "version": "2.0.5",
"resolved": "https://registry.npmjs.org/react-rating/-/react-rating-2.0.5.tgz", "resolved": "https://registry.npmjs.org/react-rating/-/react-rating-2.0.5.tgz",

1
package.json
Unescape View File

@ -92,7 +92,6 @@
"react-pdf": "5.3.2", "react-pdf": "5.3.2",
"react-perfect-scrollbar": "1.5.5", "react-perfect-scrollbar": "1.5.5",
"react-player": "2.6.2", "react-player": "2.6.2",
"react-portal": "^4.2.2",
"react-rating": "2.0.5", "react-rating": "2.0.5",
"react-redux": "7.2.2", "react-redux": "7.2.2",
"react-router-dom": "5.2.0", "react-router-dom": "5.2.0",

155
src/@core/layouts/VerticalLayout.js
Unescape View File

@ -1,136 +1,129 @@
// ** React Imports // ** React Imports
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom'
// ** Store & Actions // ** Store & Actions
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux'
import { import { handleMenuCollapsed, handleContentWidth, handleMenuHidden } from '@store/actions/layout'
handleMenuCollapsed,
handleContentWidth,
handleMenuHidden
} from '@store/actions/layout';
// ** Third Party Components // ** Third Party Components
import classnames from 'classnames'; import classnames from 'classnames'
import { ArrowUp } from 'react-feather'; import { ArrowUp } from 'react-feather'
import ScrollToTop from 'react-scroll-up'; import ScrollToTop from 'react-scroll-up'
import { Navbar, Button } from 'reactstrap'; import { Navbar, Button } from 'reactstrap'
// ** Configs // ** Configs
import themeConfig from '@configs/themeConfig'; import themeConfig from '@configs/themeConfig'
// ** Custom Components // ** Custom Components
import Customizer from '@components/customizer'; import Customizer from '@components/customizer'
import FooterComponent from './components/footer'; import FooterComponent from './components/footer'
import NavbarComponent from './components/navbar'; import NavbarComponent from './components/navbar'
import SidebarComponent from './components/menu/vertical-menu'; import SidebarComponent from './components/menu/vertical-menu'
// ** Custom Hooks // ** Custom Hooks
import { useRTL } from '@hooks/useRTL'; import { useRTL } from '@hooks/useRTL'
import { useSkin } from '@hooks/useSkin'; import { useSkin } from '@hooks/useSkin'
import { useNavbarType } from '@hooks/useNavbarType'; import { useNavbarType } from '@hooks/useNavbarType'
import { useFooterType } from '@hooks/useFooterType'; import { useFooterType } from '@hooks/useFooterType'
import { useNavbarColor } from '@hooks/useNavbarColor'; import { useNavbarColor } from '@hooks/useNavbarColor'
// ** Styles // ** Styles
import '@styles/base/core/menu/menu-types/vertical-menu.scss'; import '@styles/base/core/menu/menu-types/vertical-menu.scss'
import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss'; import '@styles/base/core/menu/menu-types/vertical-overlay-menu.scss'
const VerticalLayout = props => { const VerticalLayout = props => {
// ** Props // ** Props
const { children, navbar, footer, menu, routerProps, currentActiveItem } = const { children, navbar, footer, menu, routerProps, currentActiveItem } = props
props;
// ** Hooks // ** Hooks
const [skin, setSkin] = useSkin(); const [skin, setSkin] = useSkin()
const [isRtl, setIsRtl] = useRTL(); const [isRtl, setIsRtl] = useRTL()
const [navbarType, setNavbarType] = useNavbarType(); const [navbarType, setNavbarType] = useNavbarType()
const [footerType, setFooterType] = useFooterType(); const [footerType, setFooterType] = useFooterType()
const [navbarColor, setNavbarColor] = useNavbarColor(); const [navbarColor, setNavbarColor] = useNavbarColor()
// ** States // ** States
const [isMounted, setIsMounted] = useState(false); const [isMounted, setIsMounted] = useState(false)
const [menuVisibility, setMenuVisibility] = useState(false); const [menuVisibility, setMenuVisibility] = useState(false)
const [windowWidth, setWindowWidth] = useState(window.innerWidth); const [windowWidth, setWindowWidth] = useState(window.innerWidth)
// ** Store Vars // ** Store Vars
const dispatch = useDispatch(); const dispatch = useDispatch()
const layoutStore = useSelector(state => state.layout); const layoutStore = useSelector(state => state.layout)
// ** Update Window Width // ** Update Window Width
const handleWindowWidth = () => { const handleWindowWidth = () => {
setWindowWidth(window.innerWidth); setWindowWidth(window.innerWidth)
}; }
// ** Vars // ** Vars
const location = useLocation(); const location = useLocation()
const contentWidth = layoutStore.contentWidth; const contentWidth = layoutStore.contentWidth
const menuCollapsed = layoutStore.menuCollapsed; const menuCollapsed = layoutStore.menuCollapsed
const isHidden = layoutStore.menuHidden; const isHidden = layoutStore.menuHidden
// ** Toggles Menu Collapsed // ** Toggles Menu Collapsed
const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val)); const setMenuCollapsed = val => dispatch(handleMenuCollapsed(val))
// ** Handles Content Width // ** Handles Content Width
const setContentWidth = val => dispatch(handleContentWidth(val)); const setContentWidth = val => dispatch(handleContentWidth(val))
// ** Handles Content Width // ** Handles Content Width
const setIsHidden = val => dispatch(handleMenuHidden(val)); const setIsHidden = val => dispatch(handleMenuHidden(val))
//** This function will detect the Route Change and will hide the menu on menu item click //** This function will detect the Route Change and will hide the menu on menu item click
useEffect(() => { useEffect(() => {
if (menuVisibility && windowWidth < 1200) { if (menuVisibility && windowWidth < 1200) {
setMenuVisibility(false); setMenuVisibility(false)
} }
}, [location]); }, [location])
//** Sets Window Size & Layout Props //** Sets Window Size & Layout Props
useEffect(() => { useEffect(() => {
if (window !== undefined) { if (window !== undefined) {
window.addEventListener('resize', handleWindowWidth); window.addEventListener('resize', handleWindowWidth)
} }
}, [windowWidth]); }, [windowWidth])
//** ComponentDidMount //** ComponentDidMount
useEffect(() => { useEffect(() => {
setIsMounted(true); setIsMounted(true)
return () => setIsMounted(false); return () => setIsMounted(false)
}, []); }, [])
// ** Vars // ** Vars
const footerClasses = { const footerClasses = {
static: 'footer-static', static: 'footer-static',
sticky: 'footer-fixed', sticky: 'footer-fixed',
hidden: 'footer-hidden' hidden: 'footer-hidden'
}; }
const navbarWrapperClasses = { const navbarWrapperClasses = {
floating: 'navbar-floating', floating: 'navbar-floating',
sticky: 'navbar-sticky', sticky: 'navbar-sticky',
static: 'navbar-static', static: 'navbar-static',
hidden: 'navbar-hidden' hidden: 'navbar-hidden'
}; }
const navbarClasses = { const navbarClasses = {
floating: 'floating-nav', floating: 'floating-nav',
sticky: 'fixed-top', sticky: 'fixed-top',
static: 'navbar-static-top', static: 'navbar-static-top',
hidden: 'd-none' hidden: 'd-none'
}; }
const bgColorCondition = const bgColorCondition = navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white'
navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white';
if (!isMounted) { if (!isMounted) {
return null; return null
} }
return ( return (
<div <div
id='vertical'
className={classnames( className={classnames(
`wrapper vertical-layout ${ `wrapper vertical-layout ${navbarWrapperClasses[navbarType] || 'navbar-floating'} ${
navbarWrapperClasses[navbarType] || 'navbar-floating' footerClasses[footerType] || 'footer-static'
} ${footerClasses[footerType] || 'footer-static'}`, }`,
{ {
// Modern Menu // Modern Menu
'vertical-menu-modern': windowWidth >= 1200, 'vertical-menu-modern': windowWidth >= 1200,
@ -164,21 +157,11 @@ const VerticalLayout = props => {
dark={skin === 'dark' || bgColorCondition} dark={skin === 'dark' || bgColorCondition}
color={bgColorCondition ? navbarColor : undefined} color={bgColorCondition ? navbarColor : undefined}
className={classnames( className={classnames(
`header-navbar navbar align-items-center ${ `header-navbar navbar align-items-center ${navbarClasses[navbarType] || 'floating-nav'} navbar-shadow`
navbarClasses[navbarType] || 'floating-nav'
} navbar-shadow`
)} )}
> >
<div className='navbar-container d-flex content'> <div className='navbar-container d-flex content'>
{navbar ? ( {navbar ? navbar : <NavbarComponent setMenuVisibility={setMenuVisibility} skin={skin} setSkin={setSkin} />}
navbar
) : (
<NavbarComponent
setMenuVisibility={setMenuVisibility}
skin={skin}
setSkin={setSkin}
/>
)}
</div> </div>
</Navbar> </Navbar>
{children} {children}
@ -218,21 +201,11 @@ const VerticalLayout = props => {
/> />
) : null} ) : null}
<footer <footer
className={classnames( className={classnames(`footer footer-light ${footerClasses[footerType] || 'footer-static'}`, {
`footer footer-light ${footerClasses[footerType] || 'footer-static'}`, 'd-none': footerType === 'hidden'
{ })}
'd-none': footerType === 'hidden'
}
)}
> >
{footer ? ( {footer ? footer : <FooterComponent footerType={footerType} footerClasses={footerClasses} />}
footer
) : (
<FooterComponent
footerType={footerType}
footerClasses={footerClasses}
/>
)}
</footer> </footer>
{themeConfig.layout.scrollTop === true ? ( {themeConfig.layout.scrollTop === true ? (
@ -245,7 +218,7 @@ const VerticalLayout = props => {
</div> </div>
) : null} ) : null}
</div> </div>
); )
}; }
export default VerticalLayout; export default VerticalLayout

29
src/components/vertiport/VertiportRightMenu.js
Unescape View File

@ -1,29 +0,0 @@
import { Map } from 'react-feather';
export const VertiportRightMenu = ({ setOpenSetting, openSetting }) => {
return (
<>
{openSetting ? (
<div className='right-menu active'>
<button
className='right-layer-btn'
onClick={() => setOpenSetting(false)}
>
<Map size={18} />
</button>
<div className='right-layer active'>test</div>
</div>
) : (
<div className='right-menu'>
<button
className='right-layer-btn'
onClick={() => setOpenSetting(true)}
>
<Map size={18} />
</button>
<div className='right-layer'></div>
</div>
)}
</>
);
};

55
src/views/vertiport/VertiportView.js
Unescape View File

@ -1,22 +1,57 @@
import '@styles/react/libs/flatpickr/flatpickr.scss'; import '@styles/react/libs/flatpickr/flatpickr.scss';
import '@styles/react/libs/tables/react-dataTable-component.scss'; import '@styles/react/libs/tables/react-dataTable-component.scss';
import '../../assets/css/custom.css'; import '../../assets/css/custom.css';
import { createPortal } from 'react-dom';
import { useState } from 'react'; import { useState } from 'react';
import { VertiportRightMenu } from '../../components/vertiport/VertiportRightMenu'; import { Map } from 'react-feather';
export default function VertiportView() { export default function VertiportView() {
const [openSetting, setOpenSetting] = useState(false); // 오른쪽 사이드 메뉴 표출 여부
const [openSetting, setOpenSetting] = useState(true);
return ( return (
<> <>
<div>test</div> <div>
{createPortal( test
<VertiportRightMenu </div>
openSetting={openSetting} {openSetting ? (
setOpenSetting={setOpenSetting} <div className='right-menu active'>
/>, <button
document.getElementById('vertical') className='right-layer-btn'
onClick={() => setOpenSetting(false)}
>
<Map size={18} />
</button>
<div className='right-layer active'>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/> test<br/>
</div>
</div>
) : (
<div className='right-menu'>
<button
className='right-layer-btn'
onClick={() => setOpenSetting(true)}
>
<Map size={18} />
</button>
<div className='right-layer'></div>
</div>
)} )}
</> </>
); );

Write Preview
Loading…
Cancel
Save