Skip to content

Commit e3f14e5

Browse files
mrholekmrholek
committed
new components
1 parent 0fbe288 commit e3f14e5

File tree

5 files changed

+408
-509
lines changed

5 files changed

+408
-509
lines changed

‎React_Full_Project/src/views/Widgets/Widget01.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React, {Component} from "react";
2+
import PropTypes from 'prop-types';
3+
import {Card, CardBlock, Progress} from "reactstrap";
4+
import classNames from 'classnames';
5+
import {mapToCssModules} from 'reactstrap/lib/utils';
6+
7+
const propTypes = {
8+
header: PropTypes.string,
9+
mainText: PropTypes.string,
10+
smallText: PropTypes.string,
11+
color: PropTypes.string,
12+
value: PropTypes.string,
13+
children: PropTypes.node,
14+
className: PropTypes.string,
15+
cssModule: PropTypes.object,
16+
variant: PropTypes.string
17+
};
18+
19+
const defaultProps = {
20+
header: '89.9%',
21+
mainText: 'Lorem ipsum...',
22+
smallText: 'Lorem ipsum dolor sit amet enim.',
23+
// color: '',
24+
value: "25",
25+
variant: ""
26+
};
27+
28+
class Widget01 extends Component {
29+
render() {
30+
const {className, cssModule, header, mainText, smallText, color, value, children, variant, ...attributes} = this.props;
31+
32+
// demo purposes only
33+
const progress = {style: "", color: color, value: value};
34+
const card = {style: "", bgColor: ""};
35+
36+
if (variant === "inverse") {
37+
progress.style = "progress-white";
38+
progress.color = "";
39+
card.style = "text-white";
40+
card.bgColor = 'bg-' + color;
41+
}
42+
43+
const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule);
44+
progress.style = classNames("progress-xs my-1", progress.style);
45+
46+
return (
47+
<Card className={ classes } {...attributes}>
48+
<CardBlock className="card-body">
49+
<div className="h4 m-0">{ header }</div>
50+
<div>{ mainText }</div>
51+
<Progress className={ progress.style } color={ progress.color } value={ progress.value }/>
52+
<small className="text-muted">{ smallText }</small>
53+
<div>{children}</div>
54+
</CardBlock>
55+
</Card>
56+
)
57+
}
58+
}
59+
60+
Widget01.propTypes = propTypes;
61+
Widget01.defaultProps = defaultProps;
62+
63+
export default Widget01;

‎React_Full_Project/src/views/Widgets/Widget02.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React, {Component} from "react";
2+
import PropTypes from 'prop-types';
3+
import {Card, CardBlock, CardFooter} from "reactstrap";
4+
import classNames from 'classnames';
5+
import {mapToCssModules} from 'reactstrap/lib/utils';
6+
7+
const propTypes = {
8+
header: PropTypes.string,
9+
mainText: PropTypes.string,
10+
icon: PropTypes.string,
11+
color: PropTypes.string,
12+
variant: PropTypes.string,
13+
footer: PropTypes.bool,
14+
link: PropTypes.string,
15+
children: PropTypes.node,
16+
className: PropTypes.string,
17+
cssModule: PropTypes.object
18+
};
19+
20+
const defaultProps = {
21+
header: '$1,999.50',
22+
mainText: 'Income',
23+
icon: "fa fa-cogs",
24+
color: 'primary',
25+
variant: "0",
26+
link: "#"
27+
};
28+
29+
class Widget02 extends Component {
30+
render() {
31+
const {className, cssModule, header, mainText, icon, color, footer, link, children, variant, ...attributes} = this.props;
32+
33+
// demo purposes only
34+
const padding = (variant === '0' ? {card: "p-3", icon: "p-3", lead: "mt-2"} : ( variant === "1" ? {
35+
card: "p-0", icon: "p-4", lead: "pt-3" } : {card: "p-0", icon: "p-4 px-5", lead: "pt-3"}));
36+
37+
const card = {style: "card-body clearfix", color: color, icon: icon, classes: ""};
38+
card.classes = mapToCssModules(classNames(className, card.style, padding.card), cssModule);
39+
40+
const lead = {style: "h5 mb-0", color: color, classes: ""};
41+
lead.classes = classNames(lead.style, 'text-' + card.color, padding.lead);
42+
43+
const blockIcon = function (icon) {
44+
const classes = classNames(icon, 'bg-' + card.color, padding.icon, "font-2xl mr-3 float-left");
45+
return (<i className={ classes }></i>);
46+
};
47+
48+
const cardFooter = function () {
49+
if (footer) {
50+
return (
51+
<CardFooter className="px-3 py-2">
52+
<a className="font-weight-bold font-xs btn-block text-muted" href={link}>View More
53+
<i className="fa fa-angle-right float-right font-lg"></i></a>
54+
</CardFooter>
55+
);
56+
}
57+
};
58+
59+
return (
60+
<Card>
61+
<CardBlock className={ card.classes } {...attributes}>
62+
{ blockIcon(card.icon) }
63+
<div className={ lead.classes }>{ header }</div>
64+
<div className="text-muted text-uppercase font-weight-bold font-xs">{ mainText }</div>
65+
</CardBlock>
66+
{ cardFooter() }
67+
</Card>
68+
)
69+
}
70+
}
71+
72+
Widget02.propTypes = propTypes;
73+
Widget02.defaultProps = defaultProps;
74+
75+
export default Widget02;

‎React_Full_Project/src/views/Widgets/Widget03.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, {Component} from "react";
2+
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
import {mapToCssModules} from 'reactstrap/lib/utils';
5+
6+
const propTypes = {
7+
className: PropTypes.string,
8+
cssModule: PropTypes.object,
9+
dataBox: PropTypes.func
10+
};
11+
12+
const defaultProps = {
13+
dataBox: () => ({variant: "facebook", friends: "-", feeds: "-"})
14+
};
15+
16+
class Widget03 extends Component {
17+
render() {
18+
const {className, cssModule, dataBox, ...attributes} = this.props;
19+
20+
// demo purposes only
21+
const data = dataBox();
22+
const variant = data.variant;
23+
24+
if (!variant || ['facebook', 'twitter', 'linkedin', 'google-plus'].indexOf(variant) < 0) {
25+
return ( null );
26+
}
27+
28+
const icon = "fa fa-" + variant;
29+
const keys = Object.keys(data);
30+
const vals = Object.values(data);
31+
32+
const classes = mapToCssModules(classNames("social-box", className, variant), cssModule);
33+
34+
return (
35+
<div className={classes}>
36+
<i className={icon}></i>
37+
<ul>
38+
<li>
39+
<strong>{vals[1]}</strong>
40+
<span>{keys[1]}</span>
41+
</li>
42+
<li>
43+
<strong>{vals[2]}</strong>
44+
<span>{keys[2]}</span>
45+
</li>
46+
</ul>
47+
</div>
48+
)
49+
}
50+
}
51+
52+
Widget03.propTypes = propTypes;
53+
Widget03.defaultProps = defaultProps;
54+
55+
export default Widget03;

‎React_Full_Project/src/views/Widgets/Widget04.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React, {Component} from "react";
2+
import PropTypes from 'prop-types';
3+
import {Card, CardBlock, Progress} from "reactstrap";
4+
import classNames from 'classnames';
5+
import {mapToCssModules} from 'reactstrap/lib/utils';
6+
7+
const propTypes = {
8+
header: PropTypes.string,
9+
icon: PropTypes.string,
10+
color: PropTypes.string,
11+
value: PropTypes.string,
12+
children: PropTypes.node,
13+
className: PropTypes.string,
14+
cssModule: PropTypes.object,
15+
invert: PropTypes.bool
16+
};
17+
18+
const defaultProps = {
19+
header: '87.500',
20+
icon: "icon-people",
21+
color: 'info',
22+
value: "25",
23+
children: "Visitors",
24+
invert: false
25+
};
26+
27+
class Widget04 extends Component {
28+
render() {
29+
const {className, cssModule, header, icon, color, value, children, invert, ...attributes} = this.props;
30+
31+
// demo purposes only
32+
const progress = {style: "", color: color, value: value};
33+
const card = {style: "", bgColor: "", icon: icon};
34+
35+
if (invert) {
36+
progress.style = "progress-white";
37+
progress.color = "";
38+
card.style = "text-white";
39+
card.bgColor = 'bg-' + color;
40+
}
41+
42+
const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule);
43+
progress.style = classNames("progress-xs mt-3 mb-0", progress.style);
44+
45+
return (
46+
<Card className={ classes } {...attributes}>
47+
<CardBlock className="card-body">
48+
<div className="h1 text-muted text-right mb-2">
49+
<i className={ card.icon }></i>
50+
</div>
51+
<div className="h4 mb-0">{ header }</div>
52+
<small className="text-muted text-uppercase font-weight-bold">{ children }</small>
53+
<Progress className={ progress.style } color={ progress.color } value={ progress.value }/>
54+
</CardBlock>
55+
</Card>
56+
)
57+
}
58+
}
59+
60+
Widget04.propTypes = propTypes;
61+
Widget04.defaultProps = defaultProps;
62+
63+
export default Widget04;

0 commit comments

Comments
 (0)