Skip to content
This repository was archived by the owner on Sep 7, 2021. It is now read-only.

Commit fcbeb29

Browse files
booleanhunterbooleanhunter
committed
Adding custom-box component
1 parent 500113b commit fcbeb29

7 files changed

Lines changed: 197 additions & 166 deletions

File tree

‎reactjs-adminlte/public/src/widgets/js/components/page-widgets/box.js‎

Lines changed: 0 additions & 163 deletions
This file was deleted.

‎reactjs-adminlte/public/src/widgets/js/components/page-widgets/custom-box/box-functions.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
define(
2+
[
3+
'exports',
4+
'jquery',
5+
'velocity'
6+
],
7+
function (exports, $, velocity) {
8+
//https://www.debuggex.com/r/Q-7k9g2R6hDLKE7J
9+
exports.findClosestElement = function(element, className){
10+
var regex = new RegExp("(^|\\s)"+className+"(\\s|$)", "gi")
11+
while (!regex.test(element.className)) {
12+
// Increment the loop to the parent node
13+
element = element.parentNode;
14+
if (!element) {
15+
return null;
16+
}
17+
}
18+
// At this point, the while loop has stopped and `element` represents the element that has
19+
// the class you specified in the second parameter of the function `clazz`
20+
21+
// Then return the matched element
22+
return element;
23+
};
24+
25+
exports.toggleBoxCollapse = function(box, boxBody, icon) {
26+
if(box.className.indexOf('collapsed-box') !== -1) {
27+
icon.className = icon.className.replace(/fa-plus/g, 'fa-minus');
28+
$(boxBody).velocity('slideDown', {
29+
duration: 500,
30+
easing: 'easeInSine',
31+
complete: function() {
32+
box.className = box.className.replace(/ collapsed-box/g, '');
33+
}
34+
});
35+
// $(boxBody).slideDown(500, function () {
36+
// box.className = box.className.replace(/ collapsed-box/g, '');
37+
// });
38+
} else {
39+
icon.className = icon.className.replace(/fa-minus/g, 'fa-plus');
40+
$(boxBody).velocity('slideUp', {
41+
duration: 500,
42+
easing: 'easeInSine',
43+
complete: function() {
44+
box.className += ' collapsed-box';
45+
}
46+
});
47+
// $(boxBody).slideUp(500, function () {
48+
// box.className += ' collapsed-box';
49+
// });
50+
}
51+
};
52+
53+
exports.removeBox = function(box){
54+
console.log(box)
55+
$(box).velocity('slideUp', {
56+
duration: 500,
57+
easing: 'easeInSine'
58+
});
59+
};
60+
61+
exports.initialize = function(){
62+
function bootstrapTooltips(selector){
63+
$('body').tooltip({
64+
selector: selector
65+
});
66+
}
67+
68+
return {
69+
bootstrapTooltips: bootstrapTooltips
70+
}
71+
72+
};
73+
}
74+
)

‎reactjs-adminlte/public/src/widgets/js/components/page-widgets/custom-box/box-tool.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
define(
2+
[
3+
'react',
4+
'reactDom',
5+
'./box-functions'
6+
],
7+
function (React, ReactDOM, boxFunctions) {
8+
var BoxTool = React.createClass({
9+
toggleCollapse: function(event){
10+
var box = boxFunctions.findClosestElement(event.currentTarget, 'box'),
11+
boxBody = box.children[1],
12+
icon = event.currentTarget.children[0];
13+
14+
boxFunctions.toggleBoxCollapse(box, boxBody, icon);
15+
},
16+
removeBox: function(event){
17+
var box = boxFunctions.findClosestElement(event.currentTarget, 'box');
18+
boxFunctions.removeBox(box);
19+
},
20+
render: function() {
21+
var button = '', that = this;
22+
23+
switch(this.props.toolType){
24+
case 'minimize':
25+
return (
26+
<button className="btn btn-box-tool" data-widget="collapse" onClick={that.toggleCollapse}><i className="fa fa-minus"></i></button>
27+
)
28+
case 'maximize':
29+
return (
30+
<button className="btn btn-box-tool" data-widget="expand" onClick={that.toggleCollapse}><i className="fa fa-plus"></i></button>
31+
)
32+
case 'close':
33+
return (
34+
<button className="btn btn-box-tool" data-widget="remove" onClick={that.removeBox}><i className="fa fa-times"></i></button>
35+
)
36+
}
37+
}
38+
});
39+
40+
return BoxTool;
41+
}
42+
)

‎reactjs-adminlte/public/src/widgets/js/components/page-widgets/custom-box/box.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
define(
2+
[
3+
'react',
4+
'reactDom',
5+
'./box-tool',
6+
'./box-functions'
7+
],
8+
function (React, ReactDOM, BoxTool, boxFunctions) {
9+
var Box = React.createClass({
10+
// getDefaultProps: function() {
11+
// return {
12+
// type: 'expandable',
13+
// theme: 'box-default',
14+
// loading: false,
15+
// border: true,
16+
// title: 'Default title',
17+
// content: 'Default content',
18+
// }
19+
// },
20+
render: function() {
21+
var that = this;
22+
var borderClass = "", boxToolsContainer, boxTools = []
23+
if(this.props.border === true){
24+
borderClass = 'box-solid';
25+
}
26+
if(this.props.boxTools !== null){
27+
that.props.boxTools.map(function(tool, index){
28+
boxTools.push(<BoxTool key={index} toolType={tool} />)
29+
});
30+
31+
boxToolsContainer = <div className="box-tools pull-right">{boxTools}</div>
32+
}
33+
34+
return (
35+
<div className={"col-md-"+this.props.width+" col-sm-6 col-xs-12"}>
36+
<div className={"box "+this.props.theme+" "+borderClass+ " color-palette-box"}>
37+
<div className="box-header with-border">
38+
<h3 className="box-title">{this.props.headerMarkup} {this.props.title}</h3>
39+
{boxToolsContainer}
40+
</div>
41+
<div className="box-body">
42+
{this.props.content}
43+
{this.props.children}
44+
</div>
45+
46+
<div className="box-footer">
47+
{this.props.footer}
48+
</div>
49+
{/* /.box-body */}
50+
</div>
51+
</div>
52+
)
53+
}
54+
55+
});
56+
57+
return Box;
58+
}
59+
)

‎reactjs-adminlte/public/src/widgets/js/components/widgets.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ define(
1717
'./page-widgets/post/post',
1818
'./page-widgets/post/social-button',
1919
'./page-widgets/post/social-info',
20+
'./page-widgets/custom-box/box',
2021
],
21-
function (React, $, HeaderBar, NavigationMenu, InfoTile, ProgressBar, StatTile, SmallBox, ChatBox, Conversations, Contacts, ProfileCard, ProfileInfoList, ProfileInfoBlocks, Post, SocialButton, SocialInfo) {
22+
function (React, $, HeaderBar, NavigationMenu, InfoTile, ProgressBar, StatTile, SmallBox, ChatBox, Conversations, Contacts, ProfileCard, ProfileInfoList, ProfileInfoBlocks, Post, SocialButton, SocialInfo, Box) {
2223
var Widgets = React.createClass({
2324
getInitialState: function() {
2425
return {
@@ -616,6 +617,17 @@ define(
616617
{posts}
617618
</div>
618619

620+
<div className="row">
621+
<Box
622+
title="Sample Box"
623+
width="12"
624+
theme="box-default"
625+
border={false}
626+
boxTools = {['minimize','close']}
627+
content="Sample Content"
628+
footer="footer"/>
629+
</div>
630+
619631
</section>
620632

621633
</div>

‎reactjs-adminlte/views/general.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,16 @@
3939

4040
</body>
4141

42+
4243
<script src="/dist/js/vendors.js"></script>
4344
<script src="/dist/js/generalUIElements.bundle.js"></script>
4445

46+
47+
<!--Use this only in development, while using React Hot Loader -->
48+
<!--
49+
<script src="http://localhost:8080/dist/js/vendors.js"></script>
50+
<script src="http://localhost:8080/dist/js/generalUIElements.bundle.js"></script>
51+
-->
4552
<!--
4653
<script src="../plugins/jQuery/jQuery-2.1.4.min.js"></script>
4754
<script src="../bootstrap/js/bootstrap.min.js"></script>

0 commit comments

Comments
 (0)