gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve syntax

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-08-16 21:36:40 +02:00
parent 7108efcc88
commit 0823068f3c
3 changed files with 70 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
src/_nav.js
View File

@ -12,10 +12,11 @@ import {
cilSpeedometer, cilSpeedometer,
cilStar, cilStar,
} from '@coreui/icons' } from '@coreui/icons'
import { CNavGroup, CNavItem, CNavTitle } from '@coreui/react'
const _nav = [ const _nav = [
{ {
component: 'CNavItem', component: CNavItem,
name: 'Dashboard', name: 'Dashboard',
to: '/dashboard', to: '/dashboard',
icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />, icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
@ -25,204 +26,181 @@ const _nav = [
}, },
}, },
{ {
component: 'CNavTitle', component: CNavTitle,
name: 'Theme', name: 'Theme',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Colors', name: 'Colors',
to: '/theme/colors', to: '/theme/colors',
icon: <CIcon icon={cilDrop} customClassName="nav-icon" />, icon: <CIcon icon={cilDrop} customClassName="nav-icon" />,
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Typography', name: 'Typography',
to: '/theme/typography', to: '/theme/typography',
icon: <CIcon icon={cilPencil} customClassName="nav-icon" />, icon: <CIcon icon={cilPencil} customClassName="nav-icon" />,
}, },
{ {
component: 'CNavTitle', component: CNavTitle,
name: 'Components', name: 'Components',
}, },
{ {
component: 'CNavGroup', component: CNavGroup,
name: 'Base', name: 'Base',
to: '/base', to: '/base',
icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />, icon: <CIcon icon={cilPuzzle} customClassName="nav-icon" />,
items: [ items: [
{ {
component: 'CNavItem', component: CNavItem,
name: 'Accordion', name: 'Accordion',
to: '/base/accordion', to: '/base/accordion',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Breadcrumb', name: 'Breadcrumb',
to: '/base/breadcrumbs', to: '/base/breadcrumbs',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Cards', name: 'Cards',
to: '/base/cards', to: '/base/cards',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Carousel', name: 'Carousel',
to: '/base/carousels', to: '/base/carousels',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Collapse', name: 'Collapse',
to: '/base/collapses', to: '/base/collapses',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'List group', name: 'List group',
to: '/base/list-groups', to: '/base/list-groups',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Navs & Tabs', name: 'Navs & Tabs',
to: '/base/navs', to: '/base/navs',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Pagination', name: 'Pagination',
to: '/base/paginations', to: '/base/paginations',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Popovers', name: 'Popovers',
to: '/base/popovers', to: '/base/popovers',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Progress', name: 'Progress',
to: '/base/progress', to: '/base/progress',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Spinners', name: 'Spinners',
to: '/base/spinners', to: '/base/spinners',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Tables', name: 'Tables',
to: '/base/tables', to: '/base/tables',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Tooltips', name: 'Tooltips',
to: '/base/tooltips', to: '/base/tooltips',
}, },
], ],
}, },
{ {
component: 'CNavGroup', component: CNavGroup,
name: 'Buttons', name: 'Buttons',
to: '/buttons', to: '/buttons',
icon: <CIcon icon={cilCursor} customClassName="nav-icon" />, icon: <CIcon icon={cilCursor} customClassName="nav-icon" />,
items: [ items: [
{ {
component: 'CNavItem', component: CNavItem,
name: 'Buttons', name: 'Buttons',
to: '/buttons/buttons', to: '/buttons/buttons',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Buttons groups', name: 'Buttons groups',
to: '/buttons/button-groups', to: '/buttons/button-groups',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Dropdowns', name: 'Dropdowns',
to: '/buttons/dropdowns', to: '/buttons/dropdowns',
}, },
], ],
}, },
{ {
component: 'CNavGroup', component: CNavGroup,
name: 'Forms', name: 'Forms',
icon: <CIcon icon={cilNotes} customClassName="nav-icon" />, icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
items: [ items: [
{ {
component: 'CNavItem', component: CNavItem,
name: 'Form Control', name: 'Form Control',
to: '/forms/form-control', to: '/forms/form-control',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Select', name: 'Select',
to: '/forms/select', to: '/forms/select',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Checks & Radios', name: 'Checks & Radios',
to: '/forms/checks-radios', to: '/forms/checks-radios',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Range', name: 'Range',
to: '/forms/range', to: '/forms/range',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Input Group', name: 'Input Group',
to: '/forms/input-group', to: '/forms/input-group',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Floating Labels', name: 'Floating Labels',
to: '/forms/floating-labels', to: '/forms/floating-labels',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Layout', name: 'Layout',
to: '/forms/layout', to: '/forms/layout',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Validation', name: 'Validation',
to: '/forms/validation', to: '/forms/validation',
}, },
], ],
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Charts', name: 'Charts',
to: '/charts', to: '/charts',
icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />, icon: <CIcon icon={cilChartPie} customClassName="nav-icon" />,
}, },
{ {
component: 'CNavGroup', component: CNavGroup,
name: 'Icons', name: 'Icons',
icon: <CIcon icon={cilStar} customClassName="nav-icon" />, icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
items: [ items: [
{ {
component: 'CNavItem', component: CNavItem,
name: 'CoreUI Free', name: 'CoreUI Free',
to: '/icons/coreui-icons', to: '/icons/coreui-icons',
badge: { badge: {
@ -231,52 +209,46 @@ const _nav = [
}, },
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'CoreUI Flags', name: 'CoreUI Flags',
to: '/icons/flags', to: '/icons/flags',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'CoreUI Brands', name: 'CoreUI Brands',
to: '/icons/brands', to: '/icons/brands',
}, },
], ],
}, },
{ {
component: 'CNavGroup', component: CNavGroup,
name: 'Notifications', name: 'Notifications',
icon: <CIcon icon={cilBell} customClassName="nav-icon" />, icon: <CIcon icon={cilBell} customClassName="nav-icon" />,
items: [ items: [
{ {
component: 'CNavItem', component: CNavItem,
name: 'Alerts', name: 'Alerts',
to: '/notifications/alerts', to: '/notifications/alerts',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Badges', name: 'Badges',
to: '/notifications/badges', to: '/notifications/badges',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Modal', name: 'Modal',
to: '/notifications/modals', to: '/notifications/modals',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Toasts', name: 'Toasts',
to: '/notifications/toasts', to: '/notifications/toasts',
}, },
], ],
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Widgets', name: 'Widgets',
to: '/widgets', to: '/widgets',
icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />, icon: <CIcon icon={cilCalculator} customClassName="nav-icon" />,
@ -286,35 +258,31 @@ const _nav = [
}, },
}, },
{ {
component: 'CNavTitle', component: CNavTitle,
name: 'Extras', name: 'Extras',
}, },
{ {
component: 'CNavGroup', component: CNavGroup,
name: 'Pages', name: 'Pages',
icon: <CIcon icon={cilStar} customClassName="nav-icon" />, icon: <CIcon icon={cilStar} customClassName="nav-icon" />,
items: [ items: [
{ {
component: 'CNavItem', component: CNavItem,
name: 'Login', name: 'Login',
to: '/login', to: '/login',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Register', name: 'Register',
to: '/register', to: '/register',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Error 404', name: 'Error 404',
to: '/404', to: '/404',
}, },
{ {
component: 'CNavItem', component: CNavItem,
name: 'Error 500', name: 'Error 500',
to: '/500', to: '/500',
}, },

19
src/components/AppSidebarNav.js
View File

@ -2,12 +2,10 @@ import React from 'react'
import { NavLink, useLocation } from 'react-router-dom' import { NavLink, useLocation } from 'react-router-dom'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { CBadge, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle } from '@coreui/react' import { CBadge } from '@coreui/react'
export const AppSidebarNav = ({ items }) => { export const AppSidebarNav = ({ items }) => {
const components = { CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle }
const location = useLocation() const location = useLocation()
const navLink = (name, icon, badge) => { const navLink = (name, icon, badge) => {
return ( return (
<> <>
@ -24,10 +22,11 @@ export const AppSidebarNav = ({ items }) => {
const navItem = (item, index) => { const navItem = (item, index) => {
const { component, name, badge, icon, ...rest } = item const { component, name, badge, icon, ...rest } = item
const Component = components[component] || component const Component = component
return ( return (
<Component <Component
{...(component === 'CNavItem' && { {...(rest.to &&
!rest.items && {
component: NavLink, component: NavLink,
activeClassName: 'active', activeClassName: 'active',
})} })}
@ -39,17 +38,17 @@ export const AppSidebarNav = ({ items }) => {
) )
} }
const navGroup = (item, index) => { const navGroup = (item, index) => {
const { component, name, icon, items, to, ...rest } = item const { component, name, icon, to, ...rest } = item
const Component = components[component] || component const Component = component
return ( return (
<Component <Component
toggler={navLink(name, icon)}
visible={location.pathname.startsWith(to)}
idx={String(index)} idx={String(index)}
key={index} key={index}
toggler={navLink(name, icon)}
visible={location.pathname.startsWith(to)}
{...rest} {...rest}
> >
{item.items.map((item, index) => {item.items?.map((item, index) =>
item.items ? navGroup(item, index) : navItem(item, index), item.items ? navGroup(item, index) : navItem(item, index),
)} )}
</Component> </Component>

22
src/routes.js
View File

@ -1,10 +1,10 @@
import React from 'react' import React from 'react'
// examples const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
const Colors = React.lazy(() => import('./views/theme/colors/Colors')) const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
const Typography = React.lazy(() => import('./views/theme/typography/Typography')) const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
// Base
const Accordion = React.lazy(() => import('./views/components/base/accordion/Accordion')) const Accordion = React.lazy(() => import('./views/components/base/accordion/Accordion'))
const Breadcrumbs = React.lazy(() => import('./views/components/base/breadcrumbs/Breadcrumbs')) const Breadcrumbs = React.lazy(() => import('./views/components/base/breadcrumbs/Breadcrumbs'))
const Cards = React.lazy(() => import('./views/components/base/cards/Cards')) const Cards = React.lazy(() => import('./views/components/base/cards/Cards'))
@ -19,12 +19,14 @@ const Spinners = React.lazy(() => import('./views/components/base/spinners/Spinn
const Tables = React.lazy(() => import('./views/components/base/tables/Tables')) const Tables = React.lazy(() => import('./views/components/base/tables/Tables'))
const Tooltips = React.lazy(() => import('./views/components/base/tooltips/Tooltips')) const Tooltips = React.lazy(() => import('./views/components/base/tooltips/Tooltips'))
// Buttons
const Buttons = React.lazy(() => import('./views/components/buttons/buttons/Buttons')) const Buttons = React.lazy(() => import('./views/components/buttons/buttons/Buttons'))
const ButtonGroups = React.lazy(() => const ButtonGroups = React.lazy(() =>
import('./views/components/buttons/button-groups/ButtonGroups'), import('./views/components/buttons/button-groups/ButtonGroups'),
) )
const Dropdowns = React.lazy(() => import('./views/components/buttons/dropdowns/Dropdowns')) const Dropdowns = React.lazy(() => import('./views/components/buttons/dropdowns/Dropdowns'))
//Forms
const ChecksRadios = React.lazy(() => import('./views/components/forms/checks-radios/ChecksRadios')) const ChecksRadios = React.lazy(() => import('./views/components/forms/checks-radios/ChecksRadios'))
const FloatingLabels = React.lazy(() => const FloatingLabels = React.lazy(() =>
import('./views/components/forms/floating-labels/FloatingLabels'), import('./views/components/forms/floating-labels/FloatingLabels'),
@ -36,25 +38,21 @@ const Range = React.lazy(() => import('./views/components/forms/range/Range'))
const Select = React.lazy(() => import('./views/components/forms/select/Select')) const Select = React.lazy(() => import('./views/components/forms/select/Select'))
const Validation = React.lazy(() => import('./views/components/forms/validation/Validation')) const Validation = React.lazy(() => import('./views/components/forms/validation/Validation'))
const Charts = React.lazy(() => import('./views/components/charts/Charts'))
// Icons
const CoreUIIcons = React.lazy(() => import('./views/components/icons/coreui-icons/CoreUIIcons')) const CoreUIIcons = React.lazy(() => import('./views/components/icons/coreui-icons/CoreUIIcons'))
const Flags = React.lazy(() => import('./views/components/icons/flags/Flags')) const Flags = React.lazy(() => import('./views/components/icons/flags/Flags'))
const Brands = React.lazy(() => import('./views/components/icons/brands/Brands')) const Brands = React.lazy(() => import('./views/components/icons/brands/Brands'))
// Notifications
const Alerts = React.lazy(() => import('./views/components/notifications/alerts/Alerts')) const Alerts = React.lazy(() => import('./views/components/notifications/alerts/Alerts'))
const Badges = React.lazy(() => import('./views/components/notifications/badges/Badges')) const Badges = React.lazy(() => import('./views/components/notifications/badges/Badges'))
const Modals = React.lazy(() => import('./views/components/notifications/modals/Modals')) const Modals = React.lazy(() => import('./views/components/notifications/modals/Modals'))
const Toasts = React.lazy(() => import('./views/components/notifications/toasts/Toasts')) const Toasts = React.lazy(() => import('./views/components/notifications/toasts/Toasts'))
// const Login = React.lazy(() => import('./views/examples/pages/login/Login'))
// const Register = React.lazy(() => import('./views/examples/pages/register/Register'))
// const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404'))
// const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500'))
const Widgets = React.lazy(() => import('./views/components/widgets/Widgets')) const Widgets = React.lazy(() => import('./views/components/widgets/Widgets'))
const Charts = React.lazy(() => import('./views/components/charts/Charts'))
const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
const routes = [ const routes = [
{ path: '/', exact: true, name: 'Home' }, { path: '/', exact: true, name: 'Home' },
{ path: '/dashboard', name: 'Dashboard', component: Dashboard }, { path: '/dashboard', name: 'Dashboard', component: Dashboard },
@ -98,10 +96,6 @@ const routes = [
{ path: '/notifications/badges', name: 'Badges', component: Badges }, { path: '/notifications/badges', name: 'Badges', component: Badges },
{ path: '/notifications/modals', name: 'Modals', component: Modals }, { path: '/notifications/modals', name: 'Modals', component: Modals },
{ path: '/notifications/toasts', name: 'Toasts', component: Toasts }, { path: '/notifications/toasts', name: 'Toasts', component: Toasts },
// { path: '/login', name: 'Login', component: Login },
// { path: '/register', name: 'Register', component: Register },
// { path: '/404', name: '404', component: Page404 },
// { path: '/500', name: '500', component: Page500 },
{ path: '/widgets', name: 'Widgets', component: Widgets }, { path: '/widgets', name: 'Widgets', component: Widgets },
] ]