refacotor: template updates
This commit is contained in:
parent
1777a092f6
commit
1df8c15030
29
package-lock.json
generated
29
package-lock.json
generated
@ -1204,21 +1204,21 @@
|
||||
"integrity": "sha512-DAlvdHRC+HHecdy52vskbNzNKEpu6wHDvSlsHGrwOqNxQl1YLhGEtqAW4sKpyVE3GgysNCywUWZGFlLp8I3LgA=="
|
||||
},
|
||||
"@coreui/icons-react": {
|
||||
"version": "1.0.0-beta.1",
|
||||
"resolved": "https://registry.npmjs.org/@coreui/icons-react/-/icons-react-1.0.0-beta.1.tgz",
|
||||
"integrity": "sha512-lYhZb5rsA4BE+EgQI5fVTafTbwi55LhKwGPXhSxrN6wgJNQaXfOZMORbx0aRCMbWkX9jNOBJ40qYpO+BWd6U0Q==",
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@coreui/icons-react/-/icons-react-1.0.0.tgz",
|
||||
"integrity": "sha512-rcd/Ezld2Eb8aBdzZ/mv+0lNZ5V0h5bp5ccxuF2jKsw/V77BXH6HP+8uxFwTDNODBovyD5vKNcSjPDk2xyhtqQ==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.6",
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"@coreui/react": {
|
||||
"version": "3.0.0-beta.6",
|
||||
"resolved": "https://registry.npmjs.org/@coreui/react/-/react-3.0.0-beta.6.tgz",
|
||||
"integrity": "sha512-TsPtiKMUuiVdK9pXZk/5pGOgz0xAIlA8LkeowObnF6sfgdlpumzJT9RxSI/ttBYeg9g+U0O+zL2+anUeVbu2Dw==",
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@coreui/react/-/react-3.0.0.tgz",
|
||||
"integrity": "sha512-5VwE8qL+6Jn86HFj+FpnPfD5RcjAEgkK7nXl91hwZhvlWV5zkKRPvaoKYM/nXxSDG6tqU6NSjkFLM87vrQqOXw==",
|
||||
"requires": {
|
||||
"@coreui/icons": "^1.0.1",
|
||||
"@coreui/icons-react": "^1.0.0-beta.1",
|
||||
"@coreui/icons": "2.0.0-beta.3",
|
||||
"@coreui/icons-react": "^1.0.0",
|
||||
"@coreui/utils": "~1.3.1",
|
||||
"@popperjs/core": "~2.4.0",
|
||||
"classnames": "~2.2.6",
|
||||
@ -1227,12 +1227,19 @@
|
||||
"prop-types": "~15.7.2",
|
||||
"react-transition-group": "~4.4.1",
|
||||
"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": {
|
||||
"version": "1.0.0-alpha.3",
|
||||
"resolved": "https://registry.npmjs.org/@coreui/react-chartjs/-/react-chartjs-1.0.0-alpha.3.tgz",
|
||||
"integrity": "sha512-BBPegbPaXREwpx+Mp3phUKfq6Tsmrb7EzlCoU41s9wBXqCifeCKNl942k411bmeFN5Cx7zdi79pzfp1fManDEw==",
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@coreui/react-chartjs/-/react-chartjs-1.0.0.tgz",
|
||||
"integrity": "sha512-Td+VpOHpzXiGGkimt0G5fCqmgrrPerAF7iNodVmhY4DyrX5s/Le77TJbkQQbRW2eHsZsQrPyRqGWxOQu7XF7jA==",
|
||||
"requires": {
|
||||
"@coreui/chartjs": "^2.0.0",
|
||||
"chart.js": "^2.9.3",
|
||||
|
@ -26,9 +26,9 @@
|
||||
"@coreui/chartjs": "^2.0.0",
|
||||
"@coreui/coreui": "^3.2.0",
|
||||
"@coreui/icons": "^1.0.1",
|
||||
"@coreui/icons-react": "^1.0.0-beta.1",
|
||||
"@coreui/react": "^3.0.0-beta.6",
|
||||
"@coreui/react-chartjs": "^1.0.0-alpha.1",
|
||||
"@coreui/icons-react": "^1.0.0",
|
||||
"@coreui/react": "^3.0.0",
|
||||
"@coreui/react-chartjs": "^1.0.0",
|
||||
"@coreui/utils": "^1.3.1",
|
||||
"classnames": "^2.2.6",
|
||||
"core-js": "^3.6.5",
|
||||
|
@ -42,6 +42,8 @@ import {
|
||||
cilAlignRight,
|
||||
cilApplicationsSettings,
|
||||
cilArrowRight,
|
||||
cilArrowTop,
|
||||
cilAsterisk,
|
||||
cilBan,
|
||||
cilBasket,
|
||||
cilBell,
|
||||
@ -104,6 +106,7 @@ import {
|
||||
cilPrint,
|
||||
cilPuzzle,
|
||||
cilSave,
|
||||
cilScrubber,
|
||||
cilSettings,
|
||||
cilShare,
|
||||
cilShareAll,
|
||||
@ -122,6 +125,7 @@ import {
|
||||
cilUserFemale,
|
||||
cilUserFollow,
|
||||
cilUserUnfollow,
|
||||
cilX,
|
||||
cilXCircle,
|
||||
cilWarning
|
||||
} from '@coreui/icons'
|
||||
@ -136,6 +140,8 @@ export const icons = Object.assign({}, {
|
||||
cilAlignRight,
|
||||
cilApplicationsSettings,
|
||||
cilArrowRight,
|
||||
cilArrowTop,
|
||||
cilAsterisk,
|
||||
cilBan,
|
||||
cilBasket,
|
||||
cilBell,
|
||||
@ -163,12 +169,12 @@ export const icons = Object.assign({}, {
|
||||
cilEnvelopeLetter,
|
||||
cilEnvelopeOpen,
|
||||
cilEuro,
|
||||
cilGraph,
|
||||
cilGlobeAlt,
|
||||
cilGrid,
|
||||
cilFile,
|
||||
cilFullscreen,
|
||||
cilFullscreenExit,
|
||||
cilGraph,
|
||||
cilHome,
|
||||
cilInbox,
|
||||
cilIndentDecrease,
|
||||
@ -198,6 +204,7 @@ export const icons = Object.assign({}, {
|
||||
cilPrint,
|
||||
cilPuzzle,
|
||||
cilSave,
|
||||
cilScrubber,
|
||||
cilSettings,
|
||||
cilShare,
|
||||
cilShareAll,
|
||||
@ -216,6 +223,7 @@ export const icons = Object.assign({}, {
|
||||
cilUserFemale,
|
||||
cilUserFollow,
|
||||
cilUserUnfollow,
|
||||
cilX,
|
||||
cilXCircle,
|
||||
cilWarning
|
||||
}, {
|
||||
|
@ -11,7 +11,7 @@ import {
|
||||
CBreadcrumbRouter,
|
||||
CLink
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
// routes config
|
||||
import routes from '../routes'
|
||||
|
@ -7,7 +7,7 @@ import {
|
||||
CDropdownToggle,
|
||||
CImg
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdown = () => {
|
||||
return (
|
||||
|
@ -7,7 +7,7 @@ import {
|
||||
CDropdownToggle,
|
||||
CImg
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdownMssg = () => {
|
||||
const itemsCount = 4
|
||||
|
@ -7,7 +7,7 @@ import {
|
||||
CDropdownToggle,
|
||||
CProgress
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdownNotif = () => {
|
||||
const itemsCount = 5
|
||||
@ -31,7 +31,7 @@ const TheHeaderDropdownNotif = () => {
|
||||
</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-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-speedometer" className="mr-2 text-warning" /> Server overloaded</CDropdownItem>
|
||||
<CDropdownItem
|
||||
|
@ -7,7 +7,7 @@ import {
|
||||
CDropdownToggle,
|
||||
CProgress
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const TheHeaderDropdownTasks = () => {
|
||||
const itemsCount = 5
|
||||
|
@ -12,7 +12,7 @@ import {
|
||||
CSidebarNavItem,
|
||||
} from '@coreui/react'
|
||||
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
// sidebar nav config
|
||||
import navigation from './_nav'
|
||||
|
@ -12,7 +12,7 @@ import {
|
||||
CSwitch,
|
||||
CLink
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const Cards = () => {
|
||||
const [collapsed, setCollapsed] = React.useState(true)
|
||||
|
@ -30,7 +30,7 @@ import {
|
||||
CSelect,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const BasicForms = () => {
|
||||
const [collapsed, setCollapsed] = React.useState(true)
|
||||
|
@ -7,8 +7,6 @@ import {
|
||||
CCol,
|
||||
CListGroup,
|
||||
CListGroupItem,
|
||||
CListGroupItemHeading,
|
||||
CListGroupItemText,
|
||||
CRow,
|
||||
CTabContent,
|
||||
CTabPane
|
||||
@ -189,27 +187,27 @@ const ListGroups = () => {
|
||||
|
||||
<CListGroup>
|
||||
<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
|
||||
<small>3 days ago</small>
|
||||
</CListGroupItemHeading>
|
||||
<CListGroupItemText className="mb-1">
|
||||
</h5>
|
||||
<div className="mb-1">
|
||||
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>
|
||||
</CListGroupItemText>
|
||||
</div>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem action>
|
||||
<CListGroupItemHeading>List group item heading</CListGroupItemHeading>
|
||||
<CListGroupItemText>
|
||||
<h5>List group item heading</h5>
|
||||
<div>
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
||||
</CListGroupItemText>
|
||||
</div>
|
||||
<small>Small.</small>
|
||||
</CListGroupItem>
|
||||
<CListGroupItem action>
|
||||
<CListGroupItemHeading>List group item heading</CListGroupItemHeading>
|
||||
<CListGroupItemText>
|
||||
<h5>List group item heading</h5>
|
||||
<div>
|
||||
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
|
||||
</CListGroupItemText>
|
||||
</div>
|
||||
<small>Small.</small>
|
||||
</CListGroupItem>
|
||||
</CListGroup>
|
||||
|
@ -19,7 +19,7 @@ import {
|
||||
CButton,
|
||||
CImg
|
||||
} from '@coreui/react'
|
||||
// import { CIcon } from '@coreui/icons-react'
|
||||
// import CIcon from '@coreui/icons-react'
|
||||
|
||||
const CNavbars = () => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
@ -12,9 +12,7 @@ import {
|
||||
CTabs,
|
||||
CCardHeader
|
||||
} from '@coreui/react'
|
||||
import {
|
||||
CIcon
|
||||
} from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const Tabs = () => {
|
||||
const [active, setActive] = useState(1)
|
||||
|
@ -7,7 +7,7 @@ import {
|
||||
CCol,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const BrandButtons = () => {
|
||||
return (
|
||||
|
@ -7,7 +7,7 @@ import {
|
||||
CCol,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const Buttons = () => {
|
||||
return (
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { getColor } from '@coreui/utils/src'
|
||||
import { CCharts } from '@coreui/react-chartjs'
|
||||
import { CChartBar } from '@coreui/react-chartjs'
|
||||
|
||||
const ChartBarSimple = props => {
|
||||
|
||||
@ -46,7 +46,7 @@ const ChartBarSimple = props => {
|
||||
|
||||
// render
|
||||
return (
|
||||
<CCharts
|
||||
<CChartBar
|
||||
{...attributes}
|
||||
type="bar"
|
||||
datasets={defaultDatasets}
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { getColor, deepObjectsMerge } from '@coreui/utils/src'
|
||||
import { CCharts } from '@coreui/react-chartjs'
|
||||
import { CChartLine } from '@coreui/react-chartjs'
|
||||
|
||||
const ChartLineSimple = props => {
|
||||
|
||||
@ -121,7 +121,7 @@ const ChartLineSimple = props => {
|
||||
// render
|
||||
|
||||
return (
|
||||
<CCharts
|
||||
<CChartLine
|
||||
{...attributes}
|
||||
type="line"
|
||||
datasets={computedDatasets}
|
||||
|
@ -5,7 +5,14 @@ import {
|
||||
CCardGroup,
|
||||
CCardHeader
|
||||
} from '@coreui/react'
|
||||
import { CCharts } from '@coreui/react-chartjs'
|
||||
import {
|
||||
CChartBar,
|
||||
CChartLine,
|
||||
CChartDoughnut,
|
||||
CChartRadar,
|
||||
CChartPie,
|
||||
CChartPolarArea
|
||||
} from '@coreui/react-chartjs'
|
||||
|
||||
const Charts = () => {
|
||||
|
||||
@ -21,7 +28,7 @@ const Charts = () => {
|
||||
</div>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCharts
|
||||
<CChartBar
|
||||
type="bar"
|
||||
datasets={[
|
||||
{
|
||||
@ -45,7 +52,7 @@ const Charts = () => {
|
||||
Doughnut Chart
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCharts
|
||||
<CChartDoughnut
|
||||
type="doughnut"
|
||||
datasets={[
|
||||
{
|
||||
@ -73,7 +80,7 @@ const Charts = () => {
|
||||
Line Chart
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCharts
|
||||
<CChartLine
|
||||
type="line"
|
||||
datasets={[
|
||||
{
|
||||
@ -102,7 +109,7 @@ const Charts = () => {
|
||||
Pie Chart
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCharts
|
||||
<CChartPie
|
||||
type="pie"
|
||||
datasets={[
|
||||
{
|
||||
@ -130,7 +137,7 @@ const Charts = () => {
|
||||
Polar Area Chart
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCharts
|
||||
<CChartPolarArea
|
||||
type="polarArea"
|
||||
datasets={[
|
||||
{
|
||||
@ -171,7 +178,7 @@ const Charts = () => {
|
||||
Radar Chart
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CCharts
|
||||
<CChartRadar
|
||||
type="radar"
|
||||
datasets={[
|
||||
{
|
||||
|
@ -1,28 +1,17 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { CCharts } from '@coreui/react-chartjs'
|
||||
import { getColor, hexToRgba } from '@coreui/utils/src'
|
||||
import { CChartLine } from '@coreui/react-chartjs'
|
||||
import { getStyle, hexToRgba } from '@coreui/utils/src'
|
||||
|
||||
const MainChartExample = props => {
|
||||
|
||||
const {
|
||||
borderColor,
|
||||
backgroundColor,
|
||||
pointHoverBackgroundColor,
|
||||
dataPoints,
|
||||
label,
|
||||
pointed,
|
||||
...attributes
|
||||
} = props
|
||||
const brandSuccess = getStyle('success') || '#4dbd74'
|
||||
const brandInfo = getStyle('info') || '#20a8d8'
|
||||
const brandDanger = getStyle('danger') || '#f86c6b'
|
||||
|
||||
const MainChartExample = attributes => {
|
||||
const random = (min, max)=>{
|
||||
return Math.floor(Math.random() * (max - min + 1) + min)
|
||||
}
|
||||
|
||||
const defaultDatasets = (()=>{
|
||||
const brandSuccess = getColor('success') || '#4dbd74'
|
||||
const brandInfo = getColor('info') || '#20a8d8'
|
||||
const brandDanger = getColor('danger') || '#f86c6b'
|
||||
let elements = 27
|
||||
const data1 = []
|
||||
const data2 = []
|
||||
@ -99,34 +88,14 @@ const MainChartExample = props => {
|
||||
|
||||
// render
|
||||
return (
|
||||
<CCharts
|
||||
<CChartLine
|
||||
{...attributes}
|
||||
type="line"
|
||||
datasets={defaultDatasets}
|
||||
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']}
|
||||
/>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
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
|
||||
|
@ -12,7 +12,7 @@ import {
|
||||
CRow,
|
||||
CCallout
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
import MainChartExample from '../charts/MainChartExample.js'
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from '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'
|
||||
|
||||
const toKebabCase = (str) => {
|
||||
@ -10,7 +10,7 @@ const toKebabCase = (str) => {
|
||||
export const getIconsView = iconset => {
|
||||
return Object.entries(iconset).map(([name, value]) => (
|
||||
<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>
|
||||
</CCol>
|
||||
))
|
||||
@ -20,7 +20,7 @@ const CoreUIIcons = () => {
|
||||
return (
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Brand Icons / as CIconRaw{' '}
|
||||
Brand Icons / as CIcon{' '}
|
||||
<div className="card-header-actions">
|
||||
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
||||
<small className="text-muted">Github</small>
|
||||
|
@ -7,7 +7,7 @@ const CoreUIIcons = () => {
|
||||
return (
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
Flag Icons / as CIconRaw{' '}
|
||||
Flag Icons / as CIcon{' '}
|
||||
<div className="card-header-actions">
|
||||
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
|
||||
<small className="text-muted">Github</small>
|
||||
|
@ -36,6 +36,12 @@ const Modals = () => {
|
||||
onClick={() => setModal(!modal)}
|
||||
className="mr-1"
|
||||
>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
|
||||
show={modal}
|
||||
onClose={setModal}
|
||||
@ -59,9 +65,7 @@ const Modals = () => {
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
|
||||
<CButton onClick={() => setLarge(!large)} className="mr-1">
|
||||
Launch large modal
|
||||
</CButton>
|
||||
|
||||
<CModal
|
||||
show={large}
|
||||
onClose={() => setLarge(!large)}
|
||||
@ -83,9 +87,6 @@ const Modals = () => {
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
|
||||
<CButton onClick={() => setLarge(!large)} className="mr-1">
|
||||
Launch small modal
|
||||
</CButton>
|
||||
<CModal
|
||||
show={small}
|
||||
onClose={() => setSmall(!small)}
|
||||
@ -112,6 +113,11 @@ const Modals = () => {
|
||||
<CButton color="primary" onClick={() => setPrimary(!primary)} className="mr-1">
|
||||
Primary modal
|
||||
</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
|
||||
show={primary}
|
||||
onClose={() => setPrimary(!primary)}
|
||||
@ -137,7 +143,6 @@ const Modals = () => {
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
|
||||
<CButton color="success" onClick={() => setSuccess(!success)} className="mr-1">Success modal</CButton>
|
||||
<CModal
|
||||
show={success}
|
||||
onClose={() => setSuccess(!success)}
|
||||
@ -159,7 +164,6 @@ const Modals = () => {
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
|
||||
<CButton color="warning" onClick={() => setWarning(!warning)} className="mr-1">Warning modal</CButton>
|
||||
<CModal
|
||||
show={warning}
|
||||
onClose={() => setWarning(!warning)}
|
||||
@ -181,7 +185,6 @@ const Modals = () => {
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
|
||||
<CButton color="danger" onClick={() => setDanger(!danger)} className="mr-1">Danger modal</CButton>
|
||||
<CModal
|
||||
show={danger}
|
||||
onClose={() => setDanger(!danger)}
|
||||
@ -203,7 +206,6 @@ const Modals = () => {
|
||||
</CModalFooter>
|
||||
</CModal>
|
||||
|
||||
<CButton color="info" onClick={() => setInfo(!info)} className="mr-1">Info modal</CButton>
|
||||
<CModal
|
||||
show={info}
|
||||
onClose={() => setInfo(!info)}
|
||||
|
@ -14,7 +14,7 @@ import {
|
||||
CInputGroupText,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const Login = () => {
|
||||
return (
|
||||
|
@ -10,7 +10,7 @@ import {
|
||||
CInputGroupText,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const Page404 = () => {
|
||||
return (
|
||||
|
@ -10,7 +10,7 @@ import {
|
||||
CInputGroupText,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const Page500 = () => {
|
||||
return (
|
||||
|
@ -13,7 +13,7 @@ import {
|
||||
CInputGroupText,
|
||||
CRow
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const Register = () => {
|
||||
return (
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from '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'
|
||||
|
||||
|
@ -17,7 +17,7 @@ import WidgetsDropdown from './WidgetsDropdown'
|
||||
import ChartLineSimple from '../charts/ChartLineSimple'
|
||||
import ChartBarSimple from '../charts/ChartBarSimple'
|
||||
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const Widgets = () => {
|
||||
return (
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { CWidgetBrand, CRow, CCol } from '@coreui/react';
|
||||
import { CIcon } from '@coreui/icons-react';
|
||||
import CIcon from '@coreui/icons-react';
|
||||
import ChartLineSimple from '../charts/ChartLineSimple';
|
||||
|
||||
const WidgetsBrand = ({withCharts})=>{
|
||||
|
@ -8,7 +8,7 @@ import {
|
||||
CDropdownItem,
|
||||
CDropdownToggle
|
||||
} from '@coreui/react'
|
||||
import { CIcon } from '@coreui/icons-react'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
import ChartLineSimple from '../charts/ChartLineSimple'
|
||||
import ChartBarSimple from '../charts/ChartBarSimple'
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user