Skip to content

Commit 1892c40

Browse files
xidedixxidedix
committed
refactor: v2.0.0-alpha.3
- refactor(Colors): view layout, minor temp tweaks - refactor(FullAside): - ListGroup (deprecate callout) - refactor(Full*): containers minor fixes - refactor(Dropdowns): minor fixes - refactor(Forms): `card-header-actions` - feat(Forms): `<Input type="date">` - feat(Forms): `FormFeedback` - feat(Collapses): Accordion, Custom Accordion - feat(ListGroup): with TabPanes - refactor(PaginationItem): `tag="button"` - refactor(BrandButtons): spacing - refactor:(Buttons): view layout
1 parent 71b1911 commit 1892c40

File tree

15 files changed

+1366
-480
lines changed

15 files changed

+1366
-480
lines changed

‎CHANGELOG.md

+12-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
22

33
##### `v2.0.0-alpha.3`
4-
- refactor: Colors
5-
- refactor: FullAside - ListGroup (deprecate callout)
6-
- refactor: Full* containers minor fixes
7-
- refactor: Dropdowns minor fixes
4+
- refactor(Colors): view layout, minor temp tweaks
5+
- refactor(FullAside): - ListGroup (deprecate callout)
6+
- refactor(Full*): containers minor fixes
7+
- refactor(Dropdowns): minor fixes
8+
- refactor(Forms): `card-header-actions`
9+
- feat(Forms): `<Input type="date">`
10+
- feat(Forms): `FormFeedback`
11+
- feat(Collapses): Accordion, Custom Accordion
12+
- feat(ListGroup): with TabPanes
13+
- refactor(PaginationItem): `tag="button"`
14+
- refactor(BrandButtons): spacing
15+
- refactor:(Buttons): view layout
816

917
##### `v2.0.0-alpha.2`
1018
- refactor: FullHeader `<AppHeaderDropdown direction="down">` (required prop `direction`)

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"url": "[email protected]:mrholek/CoreUI-React.git"
1313
},
1414
"dependencies": {
15-
"@coreui/coreui": "^2.0.0-beta.5",
15+
"@coreui/coreui": "^2.0.0-beta.6",
1616
"@coreui/react": "^2.0.0-alpha.5",
1717
"babel-jest": "^22.4.3",
1818
"bootstrap": "4.0.0",

‎src/scss/style.css

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@charset "UTF-8";
22
/*!
33
* CoreUI - Open Source Dashboard UI Kit
4-
* @version v2.0.0-beta.5
4+
* @version v2.0.0-beta.6
55
* @link https://coreui.io
66
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
77
* Licensed under MIT (https://coreui.io/license)
@@ -7423,17 +7423,16 @@ canvas {
74237423
align-items: center;
74247424
font-size: 0.76563rem;
74257425
white-space: nowrap; }
7426+
.chartjs-tooltip .tooltip-body-item-color {
7427+
display: inline-block;
7428+
width: 0.875rem;
7429+
height: 0.875rem;
7430+
margin-right: 0.875rem; }
74267431
.chartjs-tooltip .tooltip-body-item-value {
74277432
padding-left: 1rem;
74287433
margin-left: auto;
74297434
font-weight: 700; }
74307435

7431-
.chartjs-tooltip-key {
7432-
display: inline-block;
7433-
width: 0.875rem;
7434-
height: 0.875rem;
7435-
margin-right: 0.875rem; }
7436-
74377436
.dropdown-item {
74387437
position: relative;
74397438
padding: 10px 20px;

‎src/views/Base/Cards/Cards.js

+43-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,27 @@
11
import React, { Component } from 'react';
2-
import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row } from 'reactstrap';
2+
import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row, Collapse, Fade } from 'reactstrap';
33

44
class Cards extends Component {
5+
constructor(props) {
6+
super(props);
7+
8+
this.toggle = this.toggle.bind(this);
9+
this.toggleFade = this.toggleFade.bind(this);
10+
this.state = {
11+
collapse: true,
12+
fadeIn: true,
13+
timeout: 300
14+
};
15+
}
16+
17+
toggle() {
18+
this.setState({ collapse: !this.state.collapse });
19+
}
20+
21+
toggleFade() {
22+
this.setState({ fadeIn: !this.state.fadeIn });
23+
}
24+
525
render() {
626
return (
727
<div className="animated fadeIn">
@@ -356,9 +376,30 @@ class Cards extends Component {
356376
</CardBody>
357377
</Card>
358378
</Col>
379+
<Col xs="12" sm="6" md="4">
380+
<Fade timeout={this.state.timeout} in={this.state.fadeIn}>
381+
<Card>
382+
<CardHeader>
383+
Card actions
384+
<div className="card-header-actions">
385+
<a href="#" className="card-header-action btn btn-setting"><i className="icon-settings"></i></a>
386+
<a className="card-header-action btn btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></a>
387+
<a className="card-header-action btn btn-close" onClick={this.toggleFade}><i className="icon-close"></i></a>
388+
</div>
389+
</CardHeader>
390+
<Collapse isOpen={this.state.collapse} id="collapseExample">
391+
<CardBody>
392+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
393+
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
394+
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
395+
</CardBody>
396+
</Collapse>
397+
</Card>
398+
</Fade>
399+
</Col>
400+
359401
</Row>
360402
</div>
361-
362403
);
363404
}
364405
}

‎src/views/Base/Collapses/Collapses.js

+174-61
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react';
2-
import { Button, Card, CardBody, CardFooter, CardHeader, Collapse, Fade } from 'reactstrap';
2+
import { Button, Card, CardBody, CardFooter, CardHeader, Col, Collapse, Fade, Row } from 'reactstrap';
33

44
class Collapses extends Component {
55

@@ -10,9 +10,13 @@ class Collapses extends Component {
1010
this.onExiting = this.onExiting.bind(this);
1111
this.onExited = this.onExited.bind(this);
1212
this.toggle = this.toggle.bind(this);
13+
this.toggleAccordion = this.toggleAccordion.bind(this);
14+
this.toggleCustom = this.toggleCustom.bind(this);
1315
this.toggleFade = this.toggleFade.bind(this);
1416
this.state = {
1517
collapse: false,
18+
accordion: [true, false, false],
19+
custom: [true, false],
1620
status: 'Closed',
1721
fadeIn: true,
1822
timeout: 300,
@@ -39,75 +43,184 @@ class Collapses extends Component {
3943
this.setState({ collapse: !this.state.collapse });
4044
}
4145

46+
toggleAccordion(tab) {
47+
48+
const prevState = this.state.accordion;
49+
const state = prevState.map((x, index) => tab === index ? !x : false);
50+
51+
this.setState({
52+
accordion: state,
53+
});
54+
}
55+
56+
toggleCustom(tab) {
57+
58+
const prevState = this.state.custom;
59+
const state = prevState.map((x, index) => tab === index ? !x : false);
60+
61+
this.setState({
62+
custom: state,
63+
});
64+
}
65+
4266
toggleFade() {
4367
this.setState({ fadeIn: !this.state.fadeIn });
4468
}
4569

4670
render() {
4771
return (
4872
<div className="animated fadeIn">
49-
<Card>
50-
<CardHeader>
51-
<i className="fa fa-align-justify"></i><strong>Collapse</strong>
52-
<div className="card-header-actions">
53-
<a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
54-
<small className="text-muted">docs</small>
55-
</a>
56-
</div>
57-
</CardHeader>
58-
<Collapse
59-
isOpen={this.state.collapse}
60-
onEntering={this.onEntering}
61-
onEntered={this.onEntered}
62-
onExiting={this.onExiting}
63-
onExited={this.onExited}
64-
>
65-
<CardBody>
66-
<p>
67-
Anim pariatur cliche reprehenderit,
68-
enim eiusmod high life accusamus terry richardson ad squid. Nihil
69-
anim keffiyeh helvetica, craft beer labore wes anderson cred
70-
nesciunt sapiente ea proident.
71-
</p>
72-
<p>
73-
Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean
74-
elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras
75-
ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus.
76-
Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis
77-
sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis
78-
purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non
79-
augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget
80-
faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
81-
vehicula sagittis elit leo id nisi.
82-
</p>
83-
</CardBody>
84-
</Collapse>
85-
<CardFooter>
86-
<Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
87-
<h5>Current state: {this.state.status}</h5>
88-
</CardFooter>
89-
</Card>
90-
<Card>
91-
<CardHeader>
92-
<i className="fa fa-align-justify"></i><strong>Fade</strong>
93-
<div className="card-header-actions">
94-
<a href="https://reactstrap.github.io/components/fade/" rel="noreferrer noopener" target="_blank" className="card-header-action">
95-
<small className="text-muted">docs</small>
96-
</a>
97-
</div>
98-
</CardHeader>
99-
<CardBody>
100-
<Fade timeout={this.state.timeout} in={this.state.fadeIn} tag="h5" className="mt-3">
101-
This content will fade in and out as the button is pressed...
102-
</Fade>
103-
</CardBody>
104-
<CardFooter>
105-
<Button color="primary" onClick={this.toggleFade}>Toggle Fade</Button>
106-
</CardFooter>
107-
</Card>
73+
<Row>
74+
<Col xl="6">
75+
<Card>
76+
<CardHeader>
77+
<i className="fa fa-align-justify"></i><strong>Collapse</strong>
78+
<div className="card-header-actions">
79+
<a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
80+
<small className="text-muted">docs</small>
81+
</a>
82+
</div>
83+
</CardHeader>
84+
<Collapse isOpen={this.state.collapse} onEntering={this.onEntering} onEntered={this.onEntered} onExiting={this.onExiting} onExited={this.onExited}>
85+
<CardBody>
86+
<p>
87+
Anim pariatur cliche reprehenderit,
88+
enim eiusmod high life accusamus terry richardson ad squid. Nihil
89+
anim keffiyeh helvetica, craft beer labore wes anderson cred
90+
nesciunt sapiente ea proident.
91+
</p>
92+
<p>
93+
Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean
94+
elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras
95+
ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus.
96+
Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis
97+
sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis
98+
purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non
99+
augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget
100+
faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
101+
vehicula sagittis elit leo id nisi.
102+
</p>
103+
</CardBody>
104+
</Collapse>
105+
<CardFooter>
106+
<Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
107+
<h5>Current state: {this.state.status}</h5>
108+
</CardFooter>
109+
</Card>
110+
<Card>
111+
<CardHeader>
112+
<i className="fa fa-align-justify"></i><strong>Fade</strong>
113+
<div className="card-header-actions">
114+
<a href="https://reactstrap.github.io/components/fade/" rel="noreferrer noopener" target="_blank" className="card-header-action">
115+
<small className="text-muted">docs</small>
116+
</a>
117+
</div>
118+
</CardHeader>
119+
<CardBody>
120+
<Fade timeout={this.state.timeout} in={this.state.fadeIn} tag="h5" className="mt-3">
121+
This content will fade in and out as the button is pressed...
122+
</Fade>
123+
</CardBody>
124+
<CardFooter>
125+
<Button color="primary" onClick={this.toggleFade}>Toggle Fade</Button>
126+
</CardFooter>
127+
</Card>
128+
</Col>
129+
<Col xl="6">
130+
<Card>
131+
<CardHeader>
132+
<i className="fa fa-align-justify"></i> Collapse <small>accordion</small>
133+
</CardHeader>
134+
<CardBody>
135+
<div id="accordion">
136+
<Card>
137+
<CardHeader id="headingOne">
138+
<Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(0)} aria-expanded={this.state.accordion[0]} aria-controls="collapseOne">
139+
<h5 className="m-0 p-0">Collapsible Group Item #1</h5>
140+
</Button>
141+
</CardHeader>
142+
<Collapse isOpen={this.state.accordion[0]} data-parent="#accordion" id="collapseOne" aria-labelledby="headingOne">
143+
<CardBody>
144+
1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
145+
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
146+
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
147+
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
148+
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
149+
</CardBody>
150+
</Collapse>
151+
</Card>
152+
<Card>
153+
<CardHeader id="headingTwo">
154+
<Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(1)} aria-expanded={this.state.accordion[1]} aria-controls="collapseTwo">
155+
<h5 className="m-0 p-0">Collapsible Group Item #2</h5>
156+
</Button>
157+
</CardHeader>
158+
<Collapse isOpen={this.state.accordion[1]} data-parent="#accordion" id="collapseTwo">
159+
<CardBody>
160+
2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
161+
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
162+
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
163+
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
164+
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
165+
</CardBody>
166+
</Collapse>
167+
</Card>
168+
<Card>
169+
<CardHeader id="headingThree">
170+
<Button block color="link" className="text-left m-0 p-0" onClick={() => this.toggleAccordion(2)} aria-expanded={this.state.accordion[2]} aria-controls="collapseThree">
171+
<h5 className="m-0 p-0">Collapsible Group Item #3</h5>
172+
</Button>
173+
</CardHeader>
174+
<Collapse isOpen={this.state.accordion[2]} data-parent="#accordion" id="collapseThree">
175+
<CardBody>
176+
3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
177+
cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
178+
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
179+
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
180+
beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
181+
</CardBody>
182+
</Collapse>
183+
</Card>
184+
</div>
185+
</CardBody>
186+
</Card>
187+
<Card>
188+
<CardHeader>
189+
<i className="fa fa-align-justify"></i> Collapse <small>custom accordion</small>
190+
</CardHeader>
191+
<CardBody>
192+
<div id="exampleAccordion" data-children=".item">
193+
<div className="item">
194+
<Button className="m-0 p-0" color="link" onClick={() => this.toggleCustom(0)} aria-expanded={this.state.custom[0]} aria-controls="exampleAccordion1">
195+
Toggle item
196+
</Button>
197+
<Collapse isOpen={this.state.custom[0]} data-parent="#exampleAccordion" id="exampleAccordion1">
198+
<p className="mb-3">
199+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget
200+
tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
201+
</p>
202+
</Collapse>
203+
</div>
204+
<div className="item">
205+
<Button className="m-0 p-0" color="link" onClick={() => this.toggleCustom(1)} aria-expanded={this.state.custom[1]} aria-controls="exampleAccordion2">
206+
Toggle item 2
207+
</Button>
208+
<Collapse isOpen={this.state.custom[1]} data-parent="#exampleAccordion" id="exampleAccordion2">
209+
<p className="mb-3">
210+
Donec at ipsum dignissim, rutrum turpis scelerisque, tristique lectus. Pellentesque habitant morbi tristique senectus et netus et
211+
malesuada fames ac turpis egestas. Vivamus nec dui turpis. Orci varius natoque penatibus et magnis dis parturient montes,
212+
nascetur ridiculus mus.
213+
</p>
214+
</Collapse>
215+
</div>
216+
</div>
217+
</CardBody>
218+
</Card>
219+
</Col>
220+
</Row>
108221
</div>
109222
);
110223
}
111224
}
112225

113-
export default Collapses;
226+
export default Collapses;

0 commit comments

Comments
 (0)