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

Merge remote-tracking branch 'refs/remotes/origin/master'

master
박상현 8 months ago
parent
548ba9789e
commit
202e42c7b0
13 changed files with 288 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/@core/layouts/HeaderLayout.js
  2. 151
      src/@core/layouts/HorizontalLayout.js
  3. 152
      src/@core/layouts/VerticalLayout.js
  4. 2
      src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuGroup.js
  5. 2
      src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js
  6. 23
      src/components/ui/collapse/index.tsx
  7. 4
      src/components/ui/custominput/index.tsx
  8. 6
      src/components/ui/index.tsx
  9. 22
      src/components/ui/input/index.tsx
  10. 2
      src/components/ui/nav/CustomNavLink.tsx
  11. 43
      src/components/ui/nav/CustomNavbar.tsx
  12. 3
      src/containers/cstmrService/faq/FaqContainer.js
  13. 7
      src/views/weather/WeatherView.js

2
src/@core/layouts/HeaderLayout.js
Unescape View File

@ -14,7 +14,7 @@ import {
import classnames from 'classnames';
import { ArrowUp } from 'react-feather';
import ScrollToTop from 'react-scroll-up';
import { Navbar, Button } from 'reactstrap';
import { Navbar, Button } from '../../components/ui/index';
// ** Configs
import themeConfig from '@configs/themeConfig';

151
src/@core/layouts/HorizontalLayout.js
Unescape View File

@ -1,123 +1,128 @@
// ** React Imports
import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
// ** Store & Actions
import { useSelector, useDispatch } from 'react-redux'
import { handleMenuHidden, handleContentWidth } from '@store/actions/layout'
import { useSelector, useDispatch } from 'react-redux';
import { handleMenuHidden, handleContentWidth } from '@store/actions/layout';
// ** Third Party Components
import classnames from 'classnames'
import { ArrowUp } from 'react-feather'
import ScrollToTop from 'react-scroll-up'
import { Navbar, NavItem, Button } from 'reactstrap'
import classnames from 'classnames';
import { ArrowUp } from 'react-feather';
import ScrollToTop from 'react-scroll-up';
import { Navbar, NavItem, Button } from '../../components/ui/index';
// ** Configs
import themeConfig from '@configs/themeConfig'
import themeConfig from '@configs/themeConfig';
// ** Custom Components
import Customizer from '@components/customizer'
import NavbarComponent from './components/navbar'
import FooterComponent from './components/footer'
import MenuComponent from './components/menu/horizontal-menu'
import Customizer from '@components/customizer';
import NavbarComponent from './components/navbar';
import FooterComponent from './components/footer';
import MenuComponent from './components/menu/horizontal-menu';
// ** Custom Hooks
import { useRTL } from '@hooks/useRTL'
import { useSkin } from '@hooks/useSkin'
import { useNavbarType } from '@hooks/useNavbarType'
import { useFooterType } from '@hooks/useFooterType'
import { useNavbarColor } from '@hooks/useNavbarColor'
import { useRTL } from '@hooks/useRTL';
import { useSkin } from '@hooks/useSkin';
import { useNavbarType } from '@hooks/useNavbarType';
import { useFooterType } from '@hooks/useFooterType';
import { useNavbarColor } from '@hooks/useNavbarColor';
// ** Styles
import '@styles/base/core/menu/menu-types/horizontal-menu.scss'
import '@styles/base/core/menu/menu-types/horizontal-menu.scss';
const HorizontalLayout = props => {
// ** Props
const { children, navbar, footer, menu, currentActiveItem, routerProps } = props
const { children, navbar, footer, menu, currentActiveItem, routerProps } =
props;
// ** Hooks
const [skin, setSkin] = useSkin()
const [isRtl, setIsRtl] = useRTL()
const [navbarType, setNavbarType] = useNavbarType()
const [footerType, setFooterType] = useFooterType()
const [navbarColor, setNavbarColor] = useNavbarColor()
const [skin, setSkin] = useSkin();
const [isRtl, setIsRtl] = useRTL();
const [navbarType, setNavbarType] = useNavbarType();
const [footerType, setFooterType] = useFooterType();
const [navbarColor, setNavbarColor] = useNavbarColor();
// ** States
const [isMounted, setIsMounted] = useState(false)
const [navbarScrolled, setNavbarScrolled] = useState(false)
const [isMounted, setIsMounted] = useState(false);
const [navbarScrolled, setNavbarScrolled] = useState(false);
// ** Store Vars
const dispatch = useDispatch()
const layoutStore = useSelector(state => state.layout)
const dispatch = useDispatch();
const layoutStore = useSelector(state => state.layout);
// ** Vars
const contentWidth = layoutStore.contentWidth
const isHidden = layoutStore.menuHidden
const contentWidth = layoutStore.contentWidth;
const isHidden = layoutStore.menuHidden;
// ** Handles Content Width
const setContentWidth = val => dispatch(handleContentWidth(val))
const setContentWidth = val => dispatch(handleContentWidth(val));
// ** Handles Content Width
const setIsHidden = val => dispatch(handleMenuHidden(val))
const setIsHidden = val => dispatch(handleMenuHidden(val));
// ** UseEffect Cleanup
const cleanup = () => {
setIsMounted(false)
setNavbarScrolled(false)
}
setIsMounted(false);
setNavbarScrolled(false);
};
//** ComponentDidMount
useEffect(() => {
setIsMounted(true)
setIsMounted(true);
window.addEventListener('scroll', function () {
if (window.pageYOffset > 65 && navbarScrolled === false) {
setNavbarScrolled(true)
setNavbarScrolled(true);
}
if (window.pageYOffset < 65) {
setNavbarScrolled(false)
setNavbarScrolled(false);
}
})
return () => cleanup()
}, [])
});
return () => cleanup();
}, []);
// ** Vars
const footerClasses = {
static: 'footer-static',
sticky: 'footer-fixed',
hidden: 'footer-hidden'
}
};
const navbarWrapperClasses = {
floating: 'navbar-floating',
sticky: 'navbar-sticky',
static: 'navbar-static'
}
};
const navbarClasses = {
floating: 'floating-nav',
sticky: 'fixed-top'
}
};
const bgColorCondition = navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white'
const bgColorCondition =
navbarColor !== '' && navbarColor !== 'light' && navbarColor !== 'white';
if (!isMounted) {
return null
return null;
}
return (
<div
className={classnames(
`wrapper horizontal-layout horizontal-menu ${navbarWrapperClasses[navbarType] || 'navbar-floating'} ${
footerClasses[footerType] || 'footer-static'
} menu-expanded`
`wrapper horizontal-layout horizontal-menu ${
navbarWrapperClasses[navbarType] || 'navbar-floating'
} ${footerClasses[footerType] || 'footer-static'} menu-expanded`
)}
{...(isHidden ? { 'data-col': '1-column' } : {})}
>
<Navbar
expand='lg'
className={classnames('header-navbar navbar-fixed align-items-center navbar-shadow navbar-brand-center', {
className={classnames(
'header-navbar navbar-fixed align-items-center navbar-shadow navbar-brand-center',
{
'navbar-scrolled': navbarScrolled
})}
}
)}
>
{!navbar && (
<div className='navbar-header d-xl-block d-none'>
@ -145,12 +150,24 @@ const HorizontalLayout = props => {
expand='sm'
light={skin !== 'dark'}
dark={skin === 'dark' || bgColorCondition}
className={classnames(`header-navbar navbar-horizontal navbar-shadow menu-border`, {
className={classnames(
`header-navbar navbar-horizontal navbar-shadow menu-border`,
{
[navbarClasses[navbarType]]: navbarType !== 'static',
'floating-nav': (!navbarClasses[navbarType] && navbarType !== 'static') || navbarType === 'floating'
})}
'floating-nav':
(!navbarClasses[navbarType] && navbarType !== 'static') ||
navbarType === 'floating'
}
)}
>
{menu ? menu : <MenuComponent routerProps={routerProps} currentActiveItem={currentActiveItem} />}
{menu ? (
menu
) : (
<MenuComponent
routerProps={routerProps}
currentActiveItem={currentActiveItem}
/>
)}
</Navbar>
</div>
) : null}
@ -180,11 +197,21 @@ const HorizontalLayout = props => {
/>
) : null}
<footer
className={classnames(`footer footer-light ${footerClasses[footerType] || 'footer-static'}`, {
className={classnames(
`footer footer-light ${footerClasses[footerType] || 'footer-static'}`,
{
'd-none': footerType === 'hidden'
})}
}
)}
>
{footer ? footer : <FooterComponent footerType={footerType} footerClasses={footerClasses} />}
{footer ? (
footer
) : (
<FooterComponent
footerType={footerType}
footerClasses={footerClasses}
/>
)}
</footer>
{themeConfig.layout.scrollTop === true ? (
@ -197,6 +224,6 @@ const HorizontalLayout = props => {
</div>
) : null}
</div>
)
}
export default HorizontalLayout
);
};
export default HorizontalLayout;

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

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

2
src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuGroup.js
Unescape View File

@ -4,7 +4,7 @@ import { Link, useLocation } from 'react-router-dom';
// ** Third Party Components
import classnames from 'classnames';
import { Collapse, Badge } from 'reactstrap';
import { Collapse, Badge } from '../../../../../components/ui/index';
// ** Vertical Menu Items Component
import VerticalNavMenuItems from './VerticalNavMenuItems';

2
src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js
Unescape View File

@ -9,7 +9,7 @@ import classnames from 'classnames';
import { useEffect } from 'react';
import { matchPath, NavLink, useLocation } from 'react-router-dom';
// ** Third Party Components
import { Badge } from 'reactstrap';
import { Badge } from '../../../../../components/ui/index';
const VerticalNavMenuLink = ({
item,

23
src/components/ui/collapse/index.tsx
Unescape View File

@ -0,0 +1,23 @@
import { ReactNode } from 'react';
import { Collapse } from 'reactstrap';
interface Props {
children: ReactNode;
className?: string;
isOpen?: boolean;
}
/**
*
* @param children: ReactNode
* @param className?:string
* @param isOpen?:boolean
*/
export default function CustomCollapse({ children, className, isOpen }: Props) {
return (
<Collapse className={className} isOpen={isOpen}>
{children}
</Collapse>
);
}

4
src/components/ui/custominput/index.tsx
Unescape View File

@ -1,5 +1,3 @@
'use client';
import { read } from 'fs';
import { ChangeEvent, MouseEventHandler, ReactNode } from 'react';
import { CustomInput } from 'reactstrap';
@ -48,7 +46,7 @@ export default function CustomInputs({
name,
readOnly,
type,
inline = false,
inline,
bsSize
}: Props) {
return (

6
src/components/ui/index.tsx
Unescape View File

@ -7,11 +7,13 @@ import CardTitle from './card/CustomCardTitle';
import CardHeader from './card/CustomCardHeader';
import Col from './Col/index';
import From from './form/CustomForm';
import Collapse from './collapse/index';
import FormGroup from './form/CustomFormGroup';
import FormFeedback from './form/CustomFormFeedback';
import Input from './input';
import Label from './label';
import Row from './row';
import Navbar from './nav/CustomNavbar';
import InputGroup from './input/CustomInputGroup';
import InputGroupText from './input/CustomInputGroupText';
import Spinner from './spinner';
@ -64,5 +66,7 @@ export {
ModalBody,
ModalFooter,
Form,
Media
Media,
Collapse,
Navbar
};

22
src/components/ui/input/index.tsx
Unescape View File

@ -27,6 +27,28 @@ interface Props {
onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
}
/**
* @param children: ReactNode
* @param className?:string
* @param readOnly?:boolean default false
* @param checked?:boolean
* @param label?:string
* @param id?:string
* @param onClick?:MouseEventHandler<HTMLButtonElement>
* @param onChange?:MouseEventHandler<HTMLButtonElement>
* @param value?:any
* @param name?:string
* @param type?:string
* @param bsSize?: "lg" | "sm"
* @param inline?:boolean default
* @param placeholder?:string
* @param disabled?:boolean default false
* @param onBlur?:(event: React.FocusEvent<HTMLInputElement>) => void
* @param onKeyPress?:(event: React.KeyboardEvent<HTMLInputElement>) => void
* @param ref?: ForwardedRef<HTMLInputElement>
*
*/
const CustomInput = forwardRef<HTMLInputElement, Props>(
(
{

2
src/components/ui/nav/CustomNavLink.tsx
Unescape View File

@ -15,7 +15,7 @@ export default function CustomNavLink({
onClick
}: Props) {
return (
<NavLink className={className} onClick={onClick}>
<NavLink className={className} onClick={onClick} active={active}>
{children}
</NavLink>
);

43
src/components/ui/nav/CustomNavbar.tsx
Unescape View File

@ -0,0 +1,43 @@
import { ReactNode } from 'react';
import { Navbar } from 'reactstrap';
import { StringLocale } from 'yup/lib/locale';
interface Props {
children: ReactNode;
tag?: String;
expand?: 'sm' | 'md' | 'lg' | 'xl';
light?: boolean;
dark?: boolean;
className?: string;
}
/**
*
* @param children: ReactNode
* @param tag?: String
* @param expand?: 'sm' | 'md'| 'lg' | 'xl'
* @param light?: boolean
* @param dark?: boolean
* @param className?: string
*/
export default function CustomNavbar({
children,
tag,
expand,
light,
dark,
className
}: Props) {
return (
<Navbar
tag={tag}
expand={expand}
className={className}
light={light}
dark={dark}
>
{children}
</Navbar>
);
}

3
src/containers/cstmrService/faq/FaqContainer.js
Unescape View File

@ -1,6 +1,7 @@
import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Button, TabContent, TabPane } from 'reactstrap';
import { TabContent, TabPane } from '../../../components/ui/index';
import { Button } from 'reactstrap';
import AppCollapse from '@components/app-collapse';
import {
LIST,

7
src/views/weather/WeatherView.js
Unescape View File

@ -2,7 +2,12 @@ import { WINDY_KEY } from '../../configs/constants';
import React, { useEffect, useState } from 'react';
import { Search } from 'react-feather';
import '../../assets/css/custom.css';
import { Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
import {
Input,
InputGroup,
InputGroupAddon,
InputGroupText
} from '../../components/ui/index';
import { useDispatch, useSelector } from 'react-redux';
import { laancApi } from '../../modules/laanc/apis/laancApi';

Write Preview
Loading…
Cancel
Save