refacotor: template updates

This commit is contained in:
woothu 2020-06-01 18:34:07 +02:00
parent 1777a092f6
commit 1df8c15030
32 changed files with 103 additions and 114 deletions

29
package-lock.json generated
View File

@ -1204,21 +1204,21 @@
"integrity": "sha512-DAlvdHRC+HHecdy52vskbNzNKEpu6wHDvSlsHGrwOqNxQl1YLhGEtqAW4sKpyVE3GgysNCywUWZGFlLp8I3LgA==" "integrity": "sha512-DAlvdHRC+HHecdy52vskbNzNKEpu6wHDvSlsHGrwOqNxQl1YLhGEtqAW4sKpyVE3GgysNCywUWZGFlLp8I3LgA=="
}, },
"@coreui/icons-react": { "@coreui/icons-react": {
"version": "1.0.0-beta.1", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/@coreui/icons-react/-/icons-react-1.0.0-beta.1.tgz", "resolved": "https://registry.npmjs.org/@coreui/icons-react/-/icons-react-1.0.0.tgz",
"integrity": "sha512-lYhZb5rsA4BE+EgQI5fVTafTbwi55LhKwGPXhSxrN6wgJNQaXfOZMORbx0aRCMbWkX9jNOBJ40qYpO+BWd6U0Q==", "integrity": "sha512-rcd/Ezld2Eb8aBdzZ/mv+0lNZ5V0h5bp5ccxuF2jKsw/V77BXH6HP+8uxFwTDNODBovyD5vKNcSjPDk2xyhtqQ==",
"requires": { "requires": {
"classnames": "^2.2.6", "classnames": "^2.2.6",
"prop-types": "^15.7.2" "prop-types": "^15.7.2"
} }
}, },
"@coreui/react": { "@coreui/react": {
"version": "3.0.0-beta.6", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/@coreui/react/-/react-3.0.0-beta.6.tgz", "resolved": "https://registry.npmjs.org/@coreui/react/-/react-3.0.0.tgz",
"integrity": "sha512-TsPtiKMUuiVdK9pXZk/5pGOgz0xAIlA8LkeowObnF6sfgdlpumzJT9RxSI/ttBYeg9g+U0O+zL2+anUeVbu2Dw==", "integrity": "sha512-5VwE8qL+6Jn86HFj+FpnPfD5RcjAEgkK7nXl91hwZhvlWV5zkKRPvaoKYM/nXxSDG6tqU6NSjkFLM87vrQqOXw==",
"requires": { "requires": {
"@coreui/icons": "^1.0.1", "@coreui/icons": "2.0.0-beta.3",
"@coreui/icons-react": "^1.0.0-beta.1", "@coreui/icons-react": "^1.0.0",
"@coreui/utils": "~1.3.1", "@coreui/utils": "~1.3.1",
"@popperjs/core": "~2.4.0", "@popperjs/core": "~2.4.0",
"classnames": "~2.2.6", "classnames": "~2.2.6",
@ -1227,12 +1227,19 @@
"prop-types": "~15.7.2", "prop-types": "~15.7.2",
"react-transition-group": "~4.4.1", "react-transition-group": "~4.4.1",
"tippy.js": "~6.2.3" "tippy.js": "~6.2.3"
},
"dependencies": {
"@coreui/icons": {
"version": "2.0.0-beta.3",
"resolved": "https://registry.npmjs.org/@coreui/icons/-/icons-2.0.0-beta.3.tgz",
"integrity": "sha512-ZUP4Z8Nh8PfU/g5DMMkU0BPN8vJLSzuOUHKJzOkQvdPv7Zm+ftK5OA491LYn9ybG5QBAZGkpXF/i3cry3PmtUw=="
}
} }
}, },
"@coreui/react-chartjs": { "@coreui/react-chartjs": {
"version": "1.0.0-alpha.3", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/@coreui/react-chartjs/-/react-chartjs-1.0.0-alpha.3.tgz", "resolved": "https://registry.npmjs.org/@coreui/react-chartjs/-/react-chartjs-1.0.0.tgz",
"integrity": "sha512-BBPegbPaXREwpx+Mp3phUKfq6Tsmrb7EzlCoU41s9wBXqCifeCKNl942k411bmeFN5Cx7zdi79pzfp1fManDEw==", "integrity": "sha512-Td+VpOHpzXiGGkimt0G5fCqmgrrPerAF7iNodVmhY4DyrX5s/Le77TJbkQQbRW2eHsZsQrPyRqGWxOQu7XF7jA==",
"requires": { "requires": {
"@coreui/chartjs": "^2.0.0", "@coreui/chartjs": "^2.0.0",
"chart.js": "^2.9.3", "chart.js": "^2.9.3",

View File

@ -26,9 +26,9 @@
"@coreui/chartjs": "^2.0.0", "@coreui/chartjs": "^2.0.0",
"@coreui/coreui": "^3.2.0", "@coreui/coreui": "^3.2.0",
"@coreui/icons": "^1.0.1", "@coreui/icons": "^1.0.1",
"@coreui/icons-react": "^1.0.0-beta.1", "@coreui/icons-react": "^1.0.0",
"@coreui/react": "^3.0.0-beta.6", "@coreui/react": "^3.0.0",
"@coreui/react-chartjs": "^1.0.0-alpha.1", "@coreui/react-chartjs": "^1.0.0",
"@coreui/utils": "^1.3.1", "@coreui/utils": "^1.3.1",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"core-js": "^3.6.5", "core-js": "^3.6.5",

View File

@ -42,6 +42,8 @@ import {
cilAlignRight, cilAlignRight,
cilApplicationsSettings, cilApplicationsSettings,
cilArrowRight, cilArrowRight,
cilArrowTop,
cilAsterisk,
cilBan, cilBan,
cilBasket, cilBasket,
cilBell, cilBell,
@ -104,6 +106,7 @@ import {
cilPrint, cilPrint,
cilPuzzle, cilPuzzle,
cilSave, cilSave,
cilScrubber,
cilSettings, cilSettings,
cilShare, cilShare,
cilShareAll, cilShareAll,
@ -122,6 +125,7 @@ import {
cilUserFemale, cilUserFemale,
cilUserFollow, cilUserFollow,
cilUserUnfollow, cilUserUnfollow,
cilX,
cilXCircle, cilXCircle,
cilWarning cilWarning
} from '@coreui/icons' } from '@coreui/icons'
@ -136,6 +140,8 @@ export const icons = Object.assign({}, {
cilAlignRight, cilAlignRight,
cilApplicationsSettings, cilApplicationsSettings,
cilArrowRight, cilArrowRight,
cilArrowTop,
cilAsterisk,
cilBan, cilBan,
cilBasket, cilBasket,
cilBell, cilBell,
@ -163,12 +169,12 @@ export const icons = Object.assign({}, {
cilEnvelopeLetter, cilEnvelopeLetter,
cilEnvelopeOpen, cilEnvelopeOpen,
cilEuro, cilEuro,
cilGraph,
cilGlobeAlt, cilGlobeAlt,
cilGrid, cilGrid,
cilFile, cilFile,
cilFullscreen, cilFullscreen,
cilFullscreenExit, cilFullscreenExit,
cilGraph,
cilHome, cilHome,
cilInbox, cilInbox,
cilIndentDecrease, cilIndentDecrease,
@ -198,6 +204,7 @@ export const icons = Object.assign({}, {
cilPrint, cilPrint,
cilPuzzle, cilPuzzle,
cilSave, cilSave,
cilScrubber,
cilSettings, cilSettings,
cilShare, cilShare,
cilShareAll, cilShareAll,
@ -216,6 +223,7 @@ export const icons = Object.assign({}, {
cilUserFemale, cilUserFemale,
cilUserFollow, cilUserFollow,
cilUserUnfollow, cilUserUnfollow,
cilX,
cilXCircle, cilXCircle,
cilWarning cilWarning
}, { }, {

View File

@ -11,7 +11,7 @@ import {
CBreadcrumbRouter, CBreadcrumbRouter,
CLink CLink
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
// routes config // routes config
import routes from '../routes' import routes from '../routes'

View File

@ -7,7 +7,7 @@ import {
CDropdownToggle, CDropdownToggle,
CImg CImg
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const TheHeaderDropdown = () => { const TheHeaderDropdown = () => {
return ( return (

View File

@ -7,7 +7,7 @@ import {
CDropdownToggle, CDropdownToggle,
CImg CImg
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const TheHeaderDropdownMssg = () => { const TheHeaderDropdownMssg = () => {
const itemsCount = 4 const itemsCount = 4

View File

@ -7,7 +7,7 @@ import {
CDropdownToggle, CDropdownToggle,
CProgress CProgress
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const TheHeaderDropdownNotif = () => { const TheHeaderDropdownNotif = () => {
const itemsCount = 5 const itemsCount = 5
@ -31,7 +31,7 @@ const TheHeaderDropdownNotif = () => {
</CDropdownItem> </CDropdownItem>
<CDropdownItem><CIcon name="cil-user-follow" className="mr-2 text-success" /> New user registered</CDropdownItem> <CDropdownItem><CIcon name="cil-user-follow" className="mr-2 text-success" /> New user registered</CDropdownItem>
<CDropdownItem><CIcon name="cil-user-unfollow" className="mr-2 text-danger" /> User deleted</CDropdownItem> <CDropdownItem><CIcon name="cil-user-unfollow" className="mr-2 text-danger" /> User deleted</CDropdownItem>
<CDropdownItem><CIcon name="cil-chart" className="mr-2 text-info" /> Sales report is ready</CDropdownItem> <CDropdownItem><CIcon name="cil-chart-pie" className="mr-2 text-info" /> Sales report is ready</CDropdownItem>
<CDropdownItem><CIcon name="cil-basket" className="mr-2 text-primary" /> New client</CDropdownItem> <CDropdownItem><CIcon name="cil-basket" className="mr-2 text-primary" /> New client</CDropdownItem>
<CDropdownItem><CIcon name="cil-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem> <CDropdownItem><CIcon name="cil-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem>
<CDropdownItem <CDropdownItem

View File

@ -7,7 +7,7 @@ import {
CDropdownToggle, CDropdownToggle,
CProgress CProgress
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const TheHeaderDropdownTasks = () => { const TheHeaderDropdownTasks = () => {
const itemsCount = 5 const itemsCount = 5

View File

@ -12,7 +12,7 @@ import {
CSidebarNavItem, CSidebarNavItem,
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
// sidebar nav config // sidebar nav config
import navigation from './_nav' import navigation from './_nav'

View File

@ -12,7 +12,7 @@ import {
CSwitch, CSwitch,
CLink CLink
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const Cards = () => { const Cards = () => {
const [collapsed, setCollapsed] = React.useState(true) const [collapsed, setCollapsed] = React.useState(true)

View File

@ -30,7 +30,7 @@ import {
CSelect, CSelect,
CRow CRow
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const BasicForms = () => { const BasicForms = () => {
const [collapsed, setCollapsed] = React.useState(true) const [collapsed, setCollapsed] = React.useState(true)

View File

@ -7,8 +7,6 @@ import {
CCol, CCol,
CListGroup, CListGroup,
CListGroupItem, CListGroupItem,
CListGroupItemHeading,
CListGroupItemText,
CRow, CRow,
CTabContent, CTabContent,
CTabPane CTabPane
@ -189,27 +187,27 @@ const ListGroups = () => {
<CListGroup> <CListGroup>
<CListGroupItem action active> <CListGroupItem action active>
<CListGroupItemHeading className="d-flex w-100 justify-content-between"> <h5 className="d-flex w-100 justify-content-between">
List group item heading List group item heading
<small>3 days ago</small> <small>3 days ago</small>
</CListGroupItemHeading> </h5>
<CListGroupItemText className="mb-1"> <div className="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<small>Donec id elit non mi porta.</small> <small>Donec id elit non mi porta.</small>
</CListGroupItemText> </div>
</CListGroupItem> </CListGroupItem>
<CListGroupItem action> <CListGroupItem action>
<CListGroupItemHeading>List group item heading</CListGroupItemHeading> <h5>List group item heading</h5>
<CListGroupItemText> <div>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</CListGroupItemText> </div>
<small>Small.</small> <small>Small.</small>
</CListGroupItem> </CListGroupItem>
<CListGroupItem action> <CListGroupItem action>
<CListGroupItemHeading>List group item heading</CListGroupItemHeading> <h5>List group item heading</h5>
<CListGroupItemText> <div>
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
</CListGroupItemText> </div>
<small>Small.</small> <small>Small.</small>
</CListGroupItem> </CListGroupItem>
</CListGroup> </CListGroup>

View File

@ -19,7 +19,7 @@ import {
CButton, CButton,
CImg CImg
} from '@coreui/react' } from '@coreui/react'
// import { CIcon } from '@coreui/icons-react' // import CIcon from '@coreui/icons-react'
const CNavbars = () => { const CNavbars = () => {
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)

View File

@ -12,9 +12,7 @@ import {
CTabs, CTabs,
CCardHeader CCardHeader
} from '@coreui/react' } from '@coreui/react'
import { import CIcon from '@coreui/icons-react'
CIcon
} from '@coreui/icons-react'
const Tabs = () => { const Tabs = () => {
const [active, setActive] = useState(1) const [active, setActive] = useState(1)

View File

@ -7,7 +7,7 @@ import {
CCol, CCol,
CRow CRow
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const BrandButtons = () => { const BrandButtons = () => {
return ( return (

View File

@ -7,7 +7,7 @@ import {
CCol, CCol,
CRow CRow
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const Buttons = () => { const Buttons = () => {
return ( return (

View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { getColor } from '@coreui/utils/src' import { getColor } from '@coreui/utils/src'
import { CCharts } from '@coreui/react-chartjs' import { CChartBar } from '@coreui/react-chartjs'
const ChartBarSimple = props => { const ChartBarSimple = props => {
@ -46,7 +46,7 @@ const ChartBarSimple = props => {
// render // render
return ( return (
<CCharts <CChartBar
{...attributes} {...attributes}
type="bar" type="bar"
datasets={defaultDatasets} datasets={defaultDatasets}

View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { getColor, deepObjectsMerge } from '@coreui/utils/src' import { getColor, deepObjectsMerge } from '@coreui/utils/src'
import { CCharts } from '@coreui/react-chartjs' import { CChartLine } from '@coreui/react-chartjs'
const ChartLineSimple = props => { const ChartLineSimple = props => {
@ -121,7 +121,7 @@ const ChartLineSimple = props => {
// render // render
return ( return (
<CCharts <CChartLine
{...attributes} {...attributes}
type="line" type="line"
datasets={computedDatasets} datasets={computedDatasets}

View File

@ -5,7 +5,14 @@ import {
CCardGroup, CCardGroup,
CCardHeader CCardHeader
} from '@coreui/react' } from '@coreui/react'
import { CCharts } from '@coreui/react-chartjs' import {
CChartBar,
CChartLine,
CChartDoughnut,
CChartRadar,
CChartPie,
CChartPolarArea
} from '@coreui/react-chartjs'
const Charts = () => { const Charts = () => {
@ -21,7 +28,7 @@ const Charts = () => {
</div> </div>
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CCharts <CChartBar
type="bar" type="bar"
datasets={[ datasets={[
{ {
@ -45,7 +52,7 @@ const Charts = () => {
Doughnut Chart Doughnut Chart
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CCharts <CChartDoughnut
type="doughnut" type="doughnut"
datasets={[ datasets={[
{ {
@ -73,7 +80,7 @@ const Charts = () => {
Line Chart Line Chart
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CCharts <CChartLine
type="line" type="line"
datasets={[ datasets={[
{ {
@ -102,7 +109,7 @@ const Charts = () => {
Pie Chart Pie Chart
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CCharts <CChartPie
type="pie" type="pie"
datasets={[ datasets={[
{ {
@ -130,7 +137,7 @@ const Charts = () => {
Polar Area Chart Polar Area Chart
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CCharts <CChartPolarArea
type="polarArea" type="polarArea"
datasets={[ datasets={[
{ {
@ -171,7 +178,7 @@ const Charts = () => {
Radar Chart Radar Chart
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CCharts <CChartRadar
type="radar" type="radar"
datasets={[ datasets={[
{ {

View File

@ -1,28 +1,17 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import { CChartLine } from '@coreui/react-chartjs'
import { CCharts } from '@coreui/react-chartjs' import { getStyle, hexToRgba } from '@coreui/utils/src'
import { getColor, hexToRgba } from '@coreui/utils/src'
const MainChartExample = props => { const brandSuccess = getStyle('success') || '#4dbd74'
const brandInfo = getStyle('info') || '#20a8d8'
const { const brandDanger = getStyle('danger') || '#f86c6b'
borderColor,
backgroundColor,
pointHoverBackgroundColor,
dataPoints,
label,
pointed,
...attributes
} = props
const MainChartExample = attributes => {
const random = (min, max)=>{ const random = (min, max)=>{
return Math.floor(Math.random() * (max - min + 1) + min) return Math.floor(Math.random() * (max - min + 1) + min)
} }
const defaultDatasets = (()=>{ const defaultDatasets = (()=>{
const brandSuccess = getColor('success') || '#4dbd74'
const brandInfo = getColor('info') || '#20a8d8'
const brandDanger = getColor('danger') || '#f86c6b'
let elements = 27 let elements = 27
const data1 = [] const data1 = []
const data2 = [] const data2 = []
@ -99,34 +88,14 @@ const MainChartExample = props => {
// render // render
return ( return (
<CCharts <CChartLine
{...attributes} {...attributes}
type="line"
datasets={defaultDatasets} datasets={defaultDatasets}
options={defaultOptions} options={defaultOptions}
labels={['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']} labels={['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']}
/> />
) )
} }
MainChartExample.propTypes = {
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
className: PropTypes.string,
//
borderColor: PropTypes.string,
backgroundColor: PropTypes.string,
pointHoverBackgroundColor: PropTypes.string,
dataPoints: PropTypes.array,
label: PropTypes.string,
pointed: PropTypes.bool
};
MainChartExample.defaultProps = {
borderColor: 'rgba(255,255,255,.55)',
backgroundColor: 'transparent',
dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
label: 'Sales'
};
export default MainChartExample export default MainChartExample

View File

@ -12,7 +12,7 @@ import {
CRow, CRow,
CCallout CCallout
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import MainChartExample from '../charts/MainChartExample.js' import MainChartExample from '../charts/MainChartExample.js'

View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import { CIconRaw } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import { brandSet } from '@coreui/icons' import { brandSet } from '@coreui/icons'
const toKebabCase = (str) => { const toKebabCase = (str) => {
@ -10,7 +10,7 @@ const toKebabCase = (str) => {
export const getIconsView = iconset => { export const getIconsView = iconset => {
return Object.entries(iconset).map(([name, value]) => ( return Object.entries(iconset).map(([name, value]) => (
<CCol className="mb-5" xs="6" sm="4" md="3" xl="2" key={name}> <CCol className="mb-5" xs="6" sm="4" md="3" xl="2" key={name}>
<CIconRaw content={value} size="2xl"/> <CIcon content={value} size="2xl"/>
<div>{toKebabCase(name)}</div> <div>{toKebabCase(name)}</div>
</CCol> </CCol>
)) ))
@ -20,7 +20,7 @@ const CoreUIIcons = () => {
return ( return (
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Brand Icons / as CIconRaw{' '} Brand Icons / as CIcon{' '}
<div className="card-header-actions"> <div className="card-header-actions">
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action"> <a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">Github</small> <small className="text-muted">Github</small>

View File

@ -7,7 +7,7 @@ const CoreUIIcons = () => {
return ( return (
<CCard> <CCard>
<CCardHeader> <CCardHeader>
Flag Icons / as CIconRaw{' '} Flag Icons / as CIcon{' '}
<div className="card-header-actions"> <div className="card-header-actions">
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action"> <a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">Github</small> <small className="text-muted">Github</small>

View File

@ -36,6 +36,12 @@ const Modals = () => {
onClick={() => setModal(!modal)} onClick={() => setModal(!modal)}
className="mr-1" className="mr-1"
>Launch demo modal</CButton> >Launch demo modal</CButton>
<CButton onClick={() => setLarge(!large)} className="mr-1">
Launch large modal
</CButton>
<CButton onClick={() => setSmall(!large)} className="mr-1">
Launch small modal
</CButton>
<CModal <CModal
show={modal} show={modal}
onClose={setModal} onClose={setModal}
@ -59,9 +65,7 @@ const Modals = () => {
</CModalFooter> </CModalFooter>
</CModal> </CModal>
<CButton onClick={() => setLarge(!large)} className="mr-1">
Launch large modal
</CButton>
<CModal <CModal
show={large} show={large}
onClose={() => setLarge(!large)} onClose={() => setLarge(!large)}
@ -83,9 +87,6 @@ const Modals = () => {
</CModalFooter> </CModalFooter>
</CModal> </CModal>
<CButton onClick={() => setLarge(!large)} className="mr-1">
Launch small modal
</CButton>
<CModal <CModal
show={small} show={small}
onClose={() => setSmall(!small)} onClose={() => setSmall(!small)}
@ -112,6 +113,11 @@ const Modals = () => {
<CButton color="primary" onClick={() => setPrimary(!primary)} className="mr-1"> <CButton color="primary" onClick={() => setPrimary(!primary)} className="mr-1">
Primary modal Primary modal
</CButton> </CButton>
<CButton color="success" onClick={() => setSuccess(!success)} className="mr-1">Success modal</CButton>
<CButton color="warning" onClick={() => setWarning(!warning)} className="mr-1">Warning modal</CButton>
<CButton color="danger" onClick={() => setDanger(!danger)} className="mr-1">Danger modal</CButton>
<CButton color="info" onClick={() => setInfo(!info)} className="mr-1">Info modal</CButton>
<CModal <CModal
show={primary} show={primary}
onClose={() => setPrimary(!primary)} onClose={() => setPrimary(!primary)}
@ -137,7 +143,6 @@ const Modals = () => {
</CModalFooter> </CModalFooter>
</CModal> </CModal>
<CButton color="success" onClick={() => setSuccess(!success)} className="mr-1">Success modal</CButton>
<CModal <CModal
show={success} show={success}
onClose={() => setSuccess(!success)} onClose={() => setSuccess(!success)}
@ -159,7 +164,6 @@ const Modals = () => {
</CModalFooter> </CModalFooter>
</CModal> </CModal>
<CButton color="warning" onClick={() => setWarning(!warning)} className="mr-1">Warning modal</CButton>
<CModal <CModal
show={warning} show={warning}
onClose={() => setWarning(!warning)} onClose={() => setWarning(!warning)}
@ -181,7 +185,6 @@ const Modals = () => {
</CModalFooter> </CModalFooter>
</CModal> </CModal>
<CButton color="danger" onClick={() => setDanger(!danger)} className="mr-1">Danger modal</CButton>
<CModal <CModal
show={danger} show={danger}
onClose={() => setDanger(!danger)} onClose={() => setDanger(!danger)}
@ -203,7 +206,6 @@ const Modals = () => {
</CModalFooter> </CModalFooter>
</CModal> </CModal>
<CButton color="info" onClick={() => setInfo(!info)} className="mr-1">Info modal</CButton>
<CModal <CModal
show={info} show={info}
onClose={() => setInfo(!info)} onClose={() => setInfo(!info)}

View File

@ -14,7 +14,7 @@ import {
CInputGroupText, CInputGroupText,
CRow CRow
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const Login = () => { const Login = () => {
return ( return (

View File

@ -10,7 +10,7 @@ import {
CInputGroupText, CInputGroupText,
CRow CRow
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const Page404 = () => { const Page404 = () => {
return ( return (

View File

@ -10,7 +10,7 @@ import {
CInputGroupText, CInputGroupText,
CRow CRow
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const Page500 = () => { const Page500 = () => {
return ( return (

View File

@ -13,7 +13,7 @@ import {
CInputGroupText, CInputGroupText,
CRow CRow
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const Register = () => { const Register = () => {
return ( return (

View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react' import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import usersData from './UsersData' import usersData from './UsersData'

View File

@ -17,7 +17,7 @@ import WidgetsDropdown from './WidgetsDropdown'
import ChartLineSimple from '../charts/ChartLineSimple' import ChartLineSimple from '../charts/ChartLineSimple'
import ChartBarSimple from '../charts/ChartBarSimple' import ChartBarSimple from '../charts/ChartBarSimple'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
const Widgets = () => { const Widgets = () => {
return ( return (

View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { CWidgetBrand, CRow, CCol } from '@coreui/react'; import { CWidgetBrand, CRow, CCol } from '@coreui/react';
import { CIcon } from '@coreui/icons-react'; import CIcon from '@coreui/icons-react';
import ChartLineSimple from '../charts/ChartLineSimple'; import ChartLineSimple from '../charts/ChartLineSimple';
const WidgetsBrand = ({withCharts})=>{ const WidgetsBrand = ({withCharts})=>{

View File

@ -8,7 +8,7 @@ import {
CDropdownItem, CDropdownItem,
CDropdownToggle CDropdownToggle
} from '@coreui/react' } from '@coreui/react'
import { CIcon } from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import ChartLineSimple from '../charts/ChartLineSimple' import ChartLineSimple from '../charts/ChartLineSimple'
import ChartBarSimple from '../charts/ChartBarSimple' import ChartBarSimple from '../charts/ChartBarSimple'