diff --git a/src/App.js b/src/App.js index 4fbee33..491ec8a 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,7 @@ const loading = ( ) // Containers -const TheLayout = React.lazy(() => import('./containers/TheLayout')); +const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout')); // Pages const Login = React.lazy(() => import('./views/pages/login/Login')); @@ -28,7 +28,7 @@ class App extends Component { } /> } /> } /> - } /> + } /> diff --git a/src/components/AppBreadcrumb.js b/src/components/AppBreadcrumb.js new file mode 100644 index 0000000..be202ea --- /dev/null +++ b/src/components/AppBreadcrumb.js @@ -0,0 +1,52 @@ +import React from 'react' +import { useLocation } from "react-router-dom"; + +import routes from "../routes"; + +import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react-ts'; + +const AppBreadcrumb = () => { + const currentLocation = useLocation().pathname + + //array1.find(element => element > 10); + const getRouteName = (pathname, routes) => { + const currentRoute = routes.find(route => route.path === pathname) + return currentRoute.name + } + + const getBreadcrumbs = (location) => { + const breadcrumbs = [] + location.split('/').reduce((prev, curr, index, array) => { + const currentPathname = `${prev}/${curr}` + breadcrumbs.push({ + 'pathname': currentPathname, + 'name': getRouteName(currentPathname, routes), + 'active': index + 1 === array.length ? true : false + }) + return currentPathname + }) + return breadcrumbs + } + + const breadcrumbs = getBreadcrumbs(currentLocation) + + return ( + + Home + { + breadcrumbs.map((breadcrumb, index) => { + return ( + + {breadcrumb.name} + + ) + }) + } + + ) +} + +export default React.memo(AppBreadcrumb) diff --git a/src/containers/TheFooter.js b/src/components/AppFooter.js similarity index 88% rename from src/containers/TheFooter.js rename to src/components/AppFooter.js index 6a16514..68d326a 100644 --- a/src/containers/TheFooter.js +++ b/src/components/AppFooter.js @@ -1,7 +1,7 @@ import React from 'react' import { CFooter } from '@coreui/react-ts' -const TheFooter = () => { +const AppFooter = () => { return (
@@ -16,4 +16,4 @@ const TheFooter = () => { ) } -export default React.memo(TheFooter) +export default React.memo(AppFooter) diff --git a/src/containers/TheHeader.js b/src/components/AppHeader.js similarity index 62% rename from src/containers/TheHeader.js rename to src/components/AppHeader.js index 1cd2ad4..0338f1d 100644 --- a/src/containers/TheHeader.js +++ b/src/components/AppHeader.js @@ -1,29 +1,27 @@ import React from "react"; import { NavLink } from "react-router-dom"; import { useSelector, useDispatch } from "react-redux"; -import { CToggler, CBreadcrumbRouter } from "@coreui/react"; import { CContainer, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, + CHeaderToggler, CNavLink, CNavItem, } from "@coreui/react-ts"; import CIcon from "@coreui/icons-react"; -// routes config -import routes from "../routes"; - import { - TheHeaderDropdown, - TheHeaderDropdownMssg, - TheHeaderDropdownNotif, - TheHeaderDropdownTasks, -} from "./index"; + AppBreadcrumb, + AppHeaderDropdown, + AppHeaderDropdownMssg, + AppHeaderDropdownNotif, + AppHeaderDropdownTasks, +} from "../containers/index"; -const TheHeader = () => { +const AppHeader = () => { const dispatch = useDispatch(); const sidebarShow = useSelector((state) => state.sidebarShow); @@ -44,12 +42,12 @@ const TheHeader = () => { return ( - - { - - - - + + + + - - {/* - - - - - - - -  Dashboard - - - - -  Settings - - - */} + ); }; -export default TheHeader; +export default AppHeader diff --git a/src/containers/TheSidebar.js b/src/components/AppSidebar.js similarity index 54% rename from src/containers/TheSidebar.js rename to src/components/AppSidebar.js index 3f5d170..fea87d8 100644 --- a/src/containers/TheSidebar.js +++ b/src/components/AppSidebar.js @@ -1,63 +1,52 @@ import React from 'react' import { useSelector, useDispatch } from 'react-redux' -import { - // CCreateElement, - // CSidebarNavDivider, - // CSidebarNavTitle, - CSidebarMinimizer, - // CSidebarNavDropdown, - // CSidebarNavItem, -} from '@coreui/react' import { CSidebar, CSidebarBrand, CSidebarNav, + CSidebarToggler, CCreateNavItem, } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' // sidebar nav config -import navigation from './_nav' +import navigation from '../containers/_nav' -const TheSidebar = () => { +const AppSidebar = () => { const dispatch = useDispatch() - const show = useSelector(state => state.sidebarShow) + const unfoldable = useSelector(state => state.sidebarUnfoldable) + // const visible = useSelector(state => state.sidebarUnfoldable) return ( dispatch({type: 'set', sidebarShow: val })} > - - + dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}/> ) } -export default React.memo(TheSidebar) +export default React.memo(AppSidebar) diff --git a/src/containers/TheHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js similarity index 97% rename from src/containers/TheHeaderDropdown.js rename to src/components/header/AppHeaderDropdown.js index f5d868e..b99939c 100644 --- a/src/containers/TheHeaderDropdown.js +++ b/src/components/header/AppHeaderDropdown.js @@ -11,7 +11,7 @@ import { } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' -const TheHeaderDropdown = () => { +const AppHeaderDropdown = () => { return ( { ) } -export default TheHeaderDropdown +export default AppHeaderDropdown diff --git a/src/containers/TheHeaderDropdownMssg.js b/src/components/header/AppHeaderDropdownMssg.js similarity index 72% rename from src/containers/TheHeaderDropdownMssg.js rename to src/components/header/AppHeaderDropdownMssg.js index 04d2c27..3b41d79 100644 --- a/src/containers/TheHeaderDropdownMssg.js +++ b/src/components/header/AppHeaderDropdownMssg.js @@ -1,17 +1,16 @@ import React from 'react' import { + CAvatar, CBadge, CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle, + CImage } from '@coreui/react-ts' -import { - CImg -} from '@coreui/react' import CIcon from '@coreui/icons-react' -const TheHeaderDropdownMssg = () => { +const AppHeaderDropdownMssg = () => { const itemsCount = 4 return ( {
-
- - -
+
John Doe @@ -57,14 +49,7 @@ const TheHeaderDropdownMssg = () => {
-
- - -
+
Jane Dovve @@ -79,14 +64,7 @@ const TheHeaderDropdownMssg = () => {
-
- - -
+
Janet Doe @@ -101,14 +79,7 @@ const TheHeaderDropdownMssg = () => {
-
- - -
+
Joe Doe @@ -125,4 +96,4 @@ const TheHeaderDropdownMssg = () => { ) } -export default TheHeaderDropdownMssg +export default AppHeaderDropdownMssg diff --git a/src/containers/TheHeaderDropdownNotif.js b/src/components/header/AppHeaderDropdownNotif.js similarity index 96% rename from src/containers/TheHeaderDropdownNotif.js rename to src/components/header/AppHeaderDropdownNotif.js index 7a0275a..1ddd07b 100644 --- a/src/containers/TheHeaderDropdownNotif.js +++ b/src/components/header/AppHeaderDropdownNotif.js @@ -9,7 +9,7 @@ import { } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' -const TheHeaderDropdownNotif = () => { +const AppHeaderDropdownNotif = () => { const itemsCount = 5 return ( { ) } -export default TheHeaderDropdownNotif +export default AppHeaderDropdownNotif diff --git a/src/containers/TheHeaderDropdownTasks.js b/src/components/header/AppHeaderDropdownTasks.js similarity index 96% rename from src/containers/TheHeaderDropdownTasks.js rename to src/components/header/AppHeaderDropdownTasks.js index 1f857c6..444c3ca 100644 --- a/src/containers/TheHeaderDropdownTasks.js +++ b/src/components/header/AppHeaderDropdownTasks.js @@ -9,7 +9,7 @@ import { } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' -const TheHeaderDropdownTasks = () => { +const AppHeaderDropdownTasks = () => { const itemsCount = 5 return ( { ) } -export default TheHeaderDropdownTasks +export default AppHeaderDropdownTasks diff --git a/src/containers/TheContent.js b/src/containers/TheContent.js index 1c28393..c932ce0 100644 --- a/src/containers/TheContent.js +++ b/src/containers/TheContent.js @@ -4,8 +4,7 @@ import { Route, Switch } from 'react-router-dom' -import { CFade } from '@coreui/react' -import { CContainer } from '@coreui/react-ts' +import { CContainer, CFade } from '@coreui/react-ts' // routes config import routes from '../routes' @@ -19,7 +18,7 @@ const loading = ( const TheContent = () => { return (
- + {routes.map((route, idx) => { diff --git a/src/containers/_nav.js b/src/containers/_nav.js index f9aa226..1e64f38 100644 --- a/src/containers/_nav.js +++ b/src/containers/_nav.js @@ -115,12 +115,6 @@ const _nav = [ anchor: 'Progress', to: '/base/progress-bar', }, - { - _component: 'CNavItem', - as: NavLink, - anchor: 'Switches', - to: '/base/switches', - }, { _component: 'CNavItem', as: NavLink, diff --git a/src/containers/index.js b/src/containers/index.js index 253866f..72e513e 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -1,21 +1,23 @@ +import AppBreadcrumb from '../components/AppBreadcrumb' import TheContent from './TheContent' -import TheFooter from './TheFooter' -import TheHeader from './TheHeader' -import TheHeaderDropdown from './TheHeaderDropdown' -import TheHeaderDropdownMssg from './TheHeaderDropdownMssg' -import TheHeaderDropdownNotif from './TheHeaderDropdownNotif' -import TheHeaderDropdownTasks from './TheHeaderDropdownTasks' -import TheLayout from './TheLayout' -import TheSidebar from './TheSidebar' +import AppFooter from '../components/AppFooter' +import AppHeader from '../components/AppHeader' +import AppHeaderDropdown from '../components/header/AppHeaderDropdown' +import AppHeaderDropdownMssg from '../components/header/AppHeaderDropdownMssg' +import AppHeaderDropdownNotif from '../components/header/AppHeaderDropdownNotif' +import AppHeaderDropdownTasks from '../components/header/AppHeaderDropdownTasks' +import DefaultLayout from '../layout/DefaultLayout' +import AppSidebar from '../components/AppSidebar' export { + AppBreadcrumb, TheContent, - TheFooter, - TheHeader, - TheHeaderDropdown, - TheHeaderDropdownMssg, - TheHeaderDropdownNotif, - TheHeaderDropdownTasks, - TheLayout, - TheSidebar + AppFooter, + AppHeader, + AppHeaderDropdown, + AppHeaderDropdownMssg, + AppHeaderDropdownNotif, + AppHeaderDropdownTasks, + DefaultLayout, + AppSidebar } diff --git a/src/containers/TheLayout.js b/src/layout/DefaultLayout.js similarity index 56% rename from src/containers/TheLayout.js rename to src/layout/DefaultLayout.js index 80b8e89..262e85c 100644 --- a/src/containers/TheLayout.js +++ b/src/layout/DefaultLayout.js @@ -1,25 +1,25 @@ import React from 'react' import { TheContent, - TheSidebar, - TheFooter, - TheHeader -} from './index' + AppSidebar, + AppFooter, + AppHeader +} from '../containers/index' -const TheLayout = () => { +const DefaultLayout = () => { return (
- +
- +
- +
) } -export default TheLayout +export default DefaultLayout diff --git a/src/reusable/DocsLink.js b/src/reusable/DocsLink.js index 99ca6e0..f9f4a14 100644 --- a/src/reusable/DocsLink.js +++ b/src/reusable/DocsLink.js @@ -1,5 +1,5 @@ import React from 'react' -import { CLink } from '@coreui/react' +import { CLink } from '@coreui/react-ts' const DocsLink = props => { const { diff --git a/src/routes.js b/src/routes.js index d85d94e..122f3d4 100644 --- a/src/routes.js +++ b/src/routes.js @@ -16,7 +16,6 @@ const Navs = React.lazy(() => import('./views/base/navs/Navs')); const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations')); const Popovers = React.lazy(() => import('./views/base/popovers/Popovers')); const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar')); -const Switches = React.lazy(() => import('./views/base/switches/Switches')); const Tabs = React.lazy(() => import('./views/base/tabs/Tabs')); const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips')); @@ -60,7 +59,6 @@ const routes = [ { path: '/base/paginations', name: 'Paginations', component: Paginations }, { path: '/base/popovers', name: 'Popovers', component: Popovers }, { path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar }, - { path: '/base/switches', name: 'Switches', component: Switches }, { path: '/base/tables', name: 'Tables', component: Tables }, { path: '/base/tabs', name: 'Tabs', component: Tabs }, { path: '/base/tooltips', name: 'Tooltips', component: Tooltips }, diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js index 97804cf..bf13366 100644 --- a/src/views/base/breadcrumbs/Breadcrumbs.js +++ b/src/views/base/breadcrumbs/Breadcrumbs.js @@ -9,9 +9,7 @@ import { CRow, CLink, } from "@coreui/react-ts"; -import { CBreadcrumbRouter } from '@coreui/react' import { DocsLink } from "src/reusable"; -import routes from "../../../routes"; const Breadcrumbs = () => { return ( @@ -23,9 +21,6 @@ const Breadcrumbs = () => { -
CBreadcrumbRouter wrapper component
- -
Manual
Home diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js index 41974c2..b3eadfc 100644 --- a/src/views/base/cards/Cards.js +++ b/src/views/base/cards/Cards.js @@ -6,11 +6,9 @@ import { CCardFooter, CCardHeader, CCol, + CFormCheck, CRow, - CCollapse, - CLink } from '@coreui/react-ts' -import { CFade, CSwitch } from '@coreui/react' import CIcon from '@coreui/icons-react' import { DocsLink } from 'src/reusable' @@ -62,7 +60,7 @@ const Cards = () => { Card with switch - + Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js index 3b2b784..35a27dd 100644 --- a/src/views/base/collapses/Collapses.js +++ b/src/views/base/collapses/Collapses.js @@ -7,11 +7,9 @@ import { CCardHeader, CCol, CCollapse, + CFade, CRow } from '@coreui/react-ts'; -import { - CFade, -} from '@coreui/react'; import { DocsLink } from 'src/reusable' const Collapses = () => { diff --git a/src/views/base/forms/BasicForms.js b/src/views/base/forms/BasicForms.js index 0178fc6..825622c 100644 --- a/src/views/base/forms/BasicForms.js +++ b/src/views/base/forms/BasicForms.js @@ -1,10 +1,4 @@ import React from 'react' -import { - CFade, - CValidFeedback, - CInvalidFeedback, - CSwitch -} from '@coreui/react' import { CButton, CCard, @@ -17,9 +11,11 @@ import { CDropdownItem, CDropdownMenu, CDropdownToggle, + CFade, CForm, CFormCheck, CFormControl, + CFormFeedback, CFormLabel, CFormText, CFormSelect, @@ -181,7 +177,7 @@ const BasicForms = () => { - Please enter your email + Please enter your email @@ -190,7 +186,7 @@ const BasicForms = () => { - Please enter a complex password + Please enter a complex password @@ -288,43 +284,10 @@ const BasicForms = () => { Switch checkboxes - - - - - - + + + + @@ -466,7 +429,7 @@ const BasicForms = () => { - Please enter your email + Please enter your email @@ -475,7 +438,7 @@ const BasicForms = () => { - Please enter your password + Please enter your password @@ -494,12 +457,12 @@ const BasicForms = () => {
Email - Please enter your email + Please enter your email
Password - Please enter your password + Please enter your password
@@ -615,12 +578,12 @@ const BasicForms = () => {
Input is valid - Cool! Input is valid + Cool! Input is valid
Input is invalid - Houston, we have a problem... + Houston, we have a problem...
@@ -634,16 +597,16 @@ const BasicForms = () => {
Non-required input - - Non-required + + Non-required
Required input - - + + Please provide a valid information - - Input provided + + Input provided
@@ -1077,7 +1040,7 @@ const BasicForms = () => { @ -

Here's some help text

+

Here's some help text

@@ -1087,7 +1050,7 @@ const BasicForms = () => { .00 - Here's more help text + Here's more help text
diff --git a/src/views/base/index.js b/src/views/base/index.js index b340e0b..2e7f42e 100644 --- a/src/views/base/index.js +++ b/src/views/base/index.js @@ -10,11 +10,10 @@ import Navs from './Navs'; import Paginations from './Paginations'; import Popovers from './Popovers'; import ProgressBar from './ProgressBar'; -import Switches from './Switches'; import Tabs from './Tabs'; import Tooltips from './Tooltips'; export { - Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Switches, Tabs, Tooltips, Paginations, + Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Tabs, Tooltips, Paginations, }; diff --git a/src/views/base/jumbotrons/Jumbotrons.js b/src/views/base/jumbotrons/Jumbotrons.js index 9e1a7dd..51c1ed3 100644 --- a/src/views/base/jumbotrons/Jumbotrons.js +++ b/src/views/base/jumbotrons/Jumbotrons.js @@ -1,9 +1,4 @@ import React from 'react' -import { - CJumbotron, - CEmbed, - CEmbedItem -} from '@coreui/react' import { CButton, CCard, @@ -19,58 +14,35 @@ const Jumbotrons = () => { return ( <> - - - - - Jumbotron - - - - -

Hello, world!

-

This is a simple hero unit, a simple Jumbotron - style component for calling extra - attention to featured content or information.

-
-

It uses utility classes for typgraphy and spacing to space content out within the larger container.

-

- Learn More -

- - - - - - - - Jumbotron - fluid - - - - -

Fluid jumbotron

-

This is a modified jumbotron that occupies the entire horizontal space of its parent.

- - - - - - - - - - - Embed - - - - - - - - - + + + Jumbotron + + + + +

Custom jumbotron

+

Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.

+ Example button + + + +
+

Change the background

+

Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.

+ Example button +
+ + +
+

Add borders

+

Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.

+ Example button +
+ + + + ) } diff --git a/src/views/base/navbars/Navbars.js b/src/views/base/navbars/Navbars.js index 137d2a8..964f533 100644 --- a/src/views/base/navbars/Navbars.js +++ b/src/views/base/navbars/Navbars.js @@ -1,8 +1,4 @@ import React, { useState } from 'react' -import { - CToggler, - CImg -} from '@coreui/react' import { CCard, CCardBody, @@ -13,10 +9,12 @@ import { CDropdownToggle, CForm, CFormControl, + CImage, CNavbar, CNavbarNav, CNavbarBrand, CNavbarText, + CNavbarToggler, CNavLink, CDropdown, CButton, @@ -24,13 +22,12 @@ import { import { DocsLink } from 'src/reusable' const CNavbars = () => { - const [isOpen, setIsOpen] = useState(false) + const [visible, setVisible] = useState(false) const [isOpenDropdown, setIsOpenDropdown] = useState(false) const [navbarText, setNavbarText] = useState(false) return ( <> - CNavbar @@ -38,11 +35,11 @@ const CNavbars = () => { - setIsOpen(!isOpen)}/> + setVisible(!visible)} /> NavbarBrand - + Home Link @@ -93,7 +90,7 @@ const CNavbars = () => { - { - { setNavbarText(!navbarText)}} /> @@ -130,7 +127,7 @@ const CNavbars = () => { - {setIsOpenDropdown(!isOpenDropdown)}} /> + {setIsOpenDropdown(!isOpenDropdown)}} /> Home diff --git a/src/views/base/switches/Switches.js b/src/views/base/switches/Switches.js deleted file mode 100644 index 1c36222..0000000 --- a/src/views/base/switches/Switches.js +++ /dev/null @@ -1,485 +0,0 @@ -import React from 'react' -import { - CCard, - CCardBody, - CCardHeader, - CCol, - CRow, - CSwitch -} from '@coreui/react' -import { DocsLink } from 'src/reusable' - -const Switches = () => { - return ( - - - - - 3d Switch - - - - console.log(e.target.checked)}/> - - - - - - - - - - - - - - - Switch default - - - - - - - - - - - - - - - Switch default - pills - - - - - - - - - - - - - -

Outline

- - - - - - Switch outline - - - - - - - - - - - - - - - - Switch outline pills - - - - - - - - - - - - - - -

Opposite

- - - - - - Switch outline alternative - - - - - - - - - - - - - - - - Switch outline alternative - pills - - - - - - - - - - - - - - -

With text

- - - - - - Switch with text - - - - - - - - - - - - - - - - Switch with text pills - - - - - - - - - - - - - - - - Switch with text outline - - - - - - - - - - - - - - - - Switch with text outline pills - - - - - - - - - - - - - - - - Switch with text outline alternative - - - - - - - - - - - - - - - - Switch with text outline alternative pills - - - - - - - - - - - - - - -

With icon

- - - - - - Switch with text - - - - - - - - - - - - - - - - Switch with text pills - - - - - - - - - - - - - - - - Switch with text outline - - - - - - - - - - - - - - - - Switch with text outline pills - - - - - - - - - - - - - - - - Switch with text outline alternative - - - - - - - - - - - - - - - - Switch with text outline alternative pills - - - - - - - - - - - - - - -

Disabled

- - - - - - 3d Switch - - - - - - - - - - - - - - - - - - - 3d Switch - - - - - - - - - - - - - - - - -

3D

- - - - - - 3d Switch - - - - - - - - - - - - - - - - - - 3d Switch - - - - - - - - - - - - - - - - -

Sizes

- - - - - - Sizes - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SizeExampleProps
- Large - - - - Add size={'lg'} -
- Normal - - - - - -
- Small - - - - Add size={'sm'} -
- - - - - ) -} - -export default Switches diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js index bce8156..2484d06 100644 --- a/src/views/base/tables/Tables.js +++ b/src/views/base/tables/Tables.js @@ -1,30 +1,20 @@ import React from 'react' -import { - CDataTable, -} from '@coreui/react' import { CBadge, CCard, CCardBody, CCardHeader, CCol, - CRow + CRow, + CTable, + CTableBody, + CTableDataCell, + CTableHead, + CTableHeaderCell, + CTableRow, } from '@coreui/react-ts' import { DocsLink } from 'src/reusable' -import usersData from '../../users/UsersData' - -const getBadge = status => { - switch (status) { - case 'Active': return 'success' - case 'Inactive': return 'secondary' - case 'Pending': return 'warning' - case 'Banned': return 'danger' - default: return 'primary' - } -} -const fields = ['name','registered', 'role', 'status'] - const Tables = () => { return ( <> @@ -36,23 +26,48 @@ const Tables = () => { - ( - - - {item.status} - - - ) - - }} - /> + + + + Username + Date registered + Role + Status + + + + + Samppa Nori + 2012/01/01 + Member + Active + + + Estavan Lykos + 2012/02/01 + Staff + Banned + + + Chetan Mohamed + 2012/02/01 + Admin + Inactive + + + Derick Maximinus + 2012/03/01 + Member + Pending + + + Friderik Dávid + 2012/01/21 + Staff + Active + + + @@ -63,24 +78,48 @@ const Tables = () => { Striped Table - ( - - - {item.status} - - - ) - - }} - /> + + + + Username + Date registered + Role + Status + + + + + Yiorgos Avraamu + 2012/01/01 + Member + Active + + + Avram Tarasios + 2012/02/01 + Staff + Banned + + + Quintin Ed + 2012/02/01 + Admin + Inactive + + + Enéas Kwadwo + 2012/03/01 + Member + Pending + + + Agapetus Tadeáš + 2012/01/21 + Staff + Active + + + @@ -94,24 +133,48 @@ const Tables = () => { Condensed Table - ( - - - {item.status} - - - ) - - }} - /> + + + + Username + Date registered + Role + Status + + + + + Carwyn Fachtna + 2012/01/01 + Member + Active + + + Nehemiah Tatius + 2012/02/01 + Staff + Banned + + + Ebbe Gemariah + 2012/02/01 + Admin + Inactive + + + Eustorgios Amulius + 2012/03/01 + Member + Pending + + + Leopold Gáspár + 2012/01/21 + Staff + Active + + + @@ -122,24 +185,48 @@ const Tables = () => { Bordered Table - ( - - - {item.status} - - - ) - - }} - /> + + + + Username + Date registered + Role + Status + + + + + Pompeius René + 2012/01/01 + Member + Active + + + Paĉjo Jadon + 2012/02/01 + Staff + Banned + + + Micheal Mercurius + 2012/02/01 + Admin + Inactive + + + Ganesha Dubhghall + 2012/03/01 + Member + Pending + + + Hiroto Šimun + 2012/01/21 + Staff + Active + + + @@ -153,58 +240,48 @@ const Tables = () => { Combined All Table - ( - - - {item.status} - - - ) - }} - /> - - - - - - - - - Combined All dark Table - - - ( - - - {item.status} - - - ) - }} - /> + + + + Username + Date registered + Role + Status + + + + + Vishnu Serghei + 2012/01/01 + Member + Active + + + Zbyněk Phoibos + 2012/02/01 + Staff + Banned + + + Einar Randall + 2012/02/01 + Admin + Inactive + + + Félix Troels + 2012/03/01 + Member + Pending + + + Aulus Agmundr + 2012/01/21 + Staff + Active + + + diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 8491cc7..170912b 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -142,7 +142,7 @@ const Dashboard = () => {
- + Monday
@@ -153,7 +153,7 @@ const Dashboard = () => {
- + Tuesday
@@ -164,7 +164,7 @@ const Dashboard = () => {
- + Wednesday
@@ -175,7 +175,7 @@ const Dashboard = () => {
- + Thursday
@@ -186,7 +186,7 @@ const Dashboard = () => {
- + Friday
@@ -197,7 +197,7 @@ const Dashboard = () => {
- + Saturday
@@ -208,7 +208,7 @@ const Dashboard = () => {
- + Sunday
@@ -217,15 +217,6 @@ const Dashboard = () => {
-
- -   - New clients -   -   - Recurring clients - -
@@ -251,9 +242,9 @@ const Dashboard = () => {
- - Male - 43% + + Male + 43%
@@ -261,31 +252,30 @@ const Dashboard = () => {
- - Female - 37% + + Female + 37%
+
- - Organic Search - 191,235 (56%) + + Organic Search + 191,235 (56%)
- -
- - Facebook - 51,223 (15%) + + Facebook + 51,223 (15%)
@@ -293,9 +283,9 @@ const Dashboard = () => {
- - Twitter - 37,564 (11%) + + Twitter + 37,564 (11%)
@@ -303,20 +293,14 @@ const Dashboard = () => {
- - LinkedIn - 27,319 (8%) + + LinkedIn + 27,319 (8%)
-
- - - -
- diff --git a/src/views/notifications/toaster/Toaster.js b/src/views/notifications/toaster/Toaster.js index b53f2a3..576294d 100644 --- a/src/views/notifications/toaster/Toaster.js +++ b/src/views/notifications/toaster/Toaster.js @@ -3,43 +3,43 @@ import { CCard, CCardHeader, CCardBody, - CToast, - CToastBody, - CToastHeader, - CToaster, CForm, - CInput, - CInputCheckbox, + CFormControl, + CFormCheck, + CFormSelect, CButton, CContainer, CRow, CCol, - CFormGroup, - CLabel -} from '@coreui/react' + CFormLabel, + CToast, + CToastBody, + CToastHeader, + CToaster +} from '@coreui/react-ts' import { DocsLink } from 'src/reusable' const Toaster = () => { - const positions = [ - 'static', - 'top-left', + const placements = [ + 'top-start', 'top-center', - 'top-right', - 'top-full', - 'bottom-left', + 'top-end', + 'middle-start', + 'middle-center', + 'middle-end', + 'bottom-start', 'bottom-center', - 'bottom-right', - 'bottom-full' + 'bottom-end' ] const [toasts, setToasts] = useState([ - { position: 'static'}, - { position: 'static'}, - { position: 'top-right', autohide: 3000 } + { placement: 'static'}, + { placement: 'static'}, + { placement: 'top-right', autohide: 3000 } ]) - const [position, setPosition] = useState('top-right') + const [placement, setPlacement] = useState('top-right') const [autohide, setAutohide] = useState(true) const [autohideValue, setAutohideValue] = useState(5000) const [closeButton, setCloseButton] = useState(true) @@ -48,15 +48,15 @@ const Toaster = () => { const addToast = () => { setToasts([ ...toasts, - { position, autohide: autohide && autohideValue, closeButton, fade } + { placement, autohide: autohide && autohideValue, closeButton, fade } ]) } const toasters = (()=>{ return toasts.reduce((toasters, toast) => { - toasters[toast.position] = toasters[toast.position] || [] - toasters[toast.position].push(toast) + toasters[toast.placement] = toasters[toast.placement] || [] + toasters[toast.placement].push(toast) return toasters }, {}) })() @@ -75,67 +75,67 @@ const Toaster = () => {
Add toast with following props:
- - + { setAutohide(e.target.checked) }} custom /> - + Autohide of the toast - - + +
{ autohide && - - Time to autohide - + Time to autohide + { setAutohideValue(Number(e.target.value)) }} /> - +
} - - Position - - + +
- - + { setFade(e.target.checked) }} custom /> - fade - + fade +
- - + { setCloseButton(e.target.checked) }} /> - + closeButton - - + +
{ {Object.keys(toasters).map((toasterKey) => ( { @@ -158,17 +158,38 @@ const Toaster = () => { return( + + + } + title="CoreUI for React.js" + time="7 min ago" autohide={toast.autohide} - fade={toast.fade} > - - Toast title - - - {`This is a toast in ${toasterKey} positioned toaster number ${key + 1}.`} - + {`Hello, ${toasterKey} world! This is a toast ${toasterKey} message.`} + // + // + // Toast title + // + // + // {`This is a toast in ${toasterKey} positioned toaster number ${key + 1}.`} + // + // ) }) } diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js index 330fbda..68fa615 100644 --- a/src/views/widgets/Widgets.js +++ b/src/views/widgets/Widgets.js @@ -1,19 +1,15 @@ import React from 'react' import { - CCardFooter, CCardGroup, CCol, CLink, CRow, - CProgress -} from '@coreui/react-ts' - -import { - CWidgetProgress, CWidgetIcon, + CWidgetProgress, CWidgetProgressIcon, CWidgetSimple -} from '@coreui/react' +} from '@coreui/react-ts' + import WidgetsBrand from './WidgetsBrand' import WidgetsDropdown from './WidgetsDropdown' @@ -28,337 +24,298 @@ const Widgets = () => { - + - + - + - + - + - + - + - + - - - + } iconPadding={3} title="income" value="$1.999,50" color="primary" /> - - - + } iconPadding={3} title="income" value="$1.999,50" color="info"/> - - - + } iconPadding={3} title="income" value="$1.999,50" color="warning"/> - - - + } iconPadding={3} title="income" value="$1.999,50" color="danger"/> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - View more - - - + } iconPadding={3} title="income" value="$1.999,50" color="primary" footer={ + + View more + + } - > - - + /> + + + } iconPadding={3} title="income" value="$1.999,50" color="info" footer={ + + View more + + + } + /> + + + } iconPadding={3} title="income" value="$1.999,50" color="warning" footer={ + + View more + + + } + /> + + + } iconPadding={3} title="income" value="$1.999,50" color="danger" footer={ + + View more + + + } + /> + + + } iconPadding={4} title="income" value="$1.999,50" color="primary" /> + + + } iconPadding={4} title="income" value="$1.999,50" color="info"/> + + + } iconPadding={4} title="income" value="$1.999,50" color="warning"/> + + + } iconPadding={4} title="income" value="$1.999,50" color="danger"/> - - + icon={} + value="87.500" + title="Visitors" + progressColor="info" + progressValue={75} + /> - - + icon={} + value="385" + title="New Clients" + progressColor="success" + progressValue={75} + /> - - + icon={} + value="1238" + title="Products sold" + progressColor="warning" + progressValue={75} + /> - - + icon={} + value="28%" + title="Returning Visitors" + progressValue={75} + /> } - > - - - - - - - - - - - - - - - - - - - + icon={} + value="5:34:11" + title="Avg. Time" + progressColor="danger" + progressValue={75} + /> - - + icon={} + value="87.500" + title="Visitors" + progressColor="info" + progressValue={75} + /> - - + icon={} + value="385" + title="New Clients" + progressColor="success" + progressValue={75} + /> - - + icon={} + value="1238" + title="Products sold" + progressColor="warning" + progressValue={75} + /> - - + icon={} + value="28%" + title="Returning Visitors" + progressColor="primary" + progressValue={75} + /> - - + icon={} + value="5:34:11" + title="Avg. Time" + progressColor="danger" + progressValue={75} + /> - - + icon={} + value="972" + title="comments" + progressColor="info" + progressValue={75} + /> - - + icon={} + value="87.500" + title="Visitors" + progressValue={75} + progressWhite + /> - - + icon={} + value="385" + title="New Clients" + progressValue={75} + progressWhite + /> - - + icon={} + value="1238" + title="Products sold" + progressValue={75} + progressWhite + /> - - + icon={} + value="28%" + title="Returning Visitors" + progressValue={75} + progressWhite + /> - - + icon={} + value="5:34:11" + title="Avg. Time" + progressValue={75} + progressWhite + /> - - + icon={} + value="972" + title="comments" + progressValue={75} + progressWhite + /> - + - + - + - + - + - + diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js index 27599ac..88ae7d8 100644 --- a/src/views/widgets/WidgetsBrand.js +++ b/src/views/widgets/WidgetsBrand.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { CWidgetBrand, CRow, CCol } from '@coreui/react'; +import { CWidgetBrand, CRow, CCol } from '@coreui/react-ts'; import CIcon from '@coreui/icons-react'; import ChartLineSimple from '../charts/ChartLineSimple'; @@ -13,179 +13,169 @@ const WidgetsBrand = ({withCharts})=>{ + + + + } + values={[['89k', 'friends'], ['459', 'feeds']]} style={{ "--cui-card-cap-bg": "#3b5998" }} - > - - - + /> + + + + } + values={[['973k', 'followers'], ['1.792', 'tweets']]} style={{ "--cui-card-cap-bg": "#00aced" }} - > - - - + /> + + + + } + values={[['500+', 'contacts'], ['292', 'feeds']]} style={{ "--cui-card-cap-bg": "#4875b4" }} - > - - - + /> - - - + headerChildren={ + <> + + + + } + values={[['12+', 'events'], ['4', 'meetings']]} + /> - : - - + : + } + values={[['89k', 'friends'], ['459', 'feeds']]} style={{ "--cui-card-cap-bg": "#3b5998" }} - > - - + /> + } + values={[['973k', 'followers'], ['1.792', 'tweets']]} style={{ "--cui-card-cap-bg": "#00aced" }} - > - - + /> + } + values={[['500+', 'contacts'], ['292', 'feeds']]} style={{ "--cui-card-cap-bg": "#4875b4" }} - > - - + /> - - + headerChildren={ + + } + values={[['12+', 'events'], ['4', 'meetings']]} + /> } diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js index 1d3c6db..56d87cd 100644 --- a/src/views/widgets/WidgetsDropdown.js +++ b/src/views/widgets/WidgetsDropdown.js @@ -1,12 +1,12 @@ import React from 'react' -import { CWidgetDropdown } from '@coreui/react' import { CRow, CCol, CDropdown, CDropdownMenu, CDropdownItem, - CDropdownToggle + CDropdownToggle, + CWidgetDropdown } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' import ChartLineSimple from '../charts/ChartLineSimple' @@ -19,12 +19,26 @@ const WidgetsDropdown = () => { + + + + {/* TODO: placement doesn't work */} + + Action + Another action + Something else here... + Disabled action + + + } + chart={ { labels="months" /> } - > - - - - - - Action - Another action - Something else here... - Disabled action - - - + /> + + + + + Action + Another action + Something else here... + Disabled action + + + } + chart={ { labels="months" /> } - > - - - - - - Action - Another action - Something else here... - Disabled action - - - + /> + + + + + Action + Another action + Something else here... + Disabled action + + + } + chart={ { labels="months" /> } - > - - - - - - Action - Another action - Something else here... - Disabled action - - - + /> + + + + + Action + Another action + Something else here... + Disabled action + + + } + chart={ { labels="months" /> } - > - - - - - - Action - Another action - Something else here... - Disabled action - - - + /> )