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=="
},
"@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",

View File

@ -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",

View File

@ -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
}, {

View File

@ -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'

View File

@ -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 (

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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'

View File

@ -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)

View File

@ -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)

View File

@ -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>

View File

@ -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)

View File

@ -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)

View File

@ -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 (

View File

@ -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 (

View File

@ -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}

View File

@ -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}

View File

@ -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={[
{

View File

@ -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

View File

@ -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'

View File

@ -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>

View File

@ -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>

View File

@ -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)}

View File

@ -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 (

View File

@ -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 (

View File

@ -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 (

View File

@ -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 (

View File

@ -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'

View File

@ -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 (

View File

@ -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})=>{

View File

@ -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'