박선진 / video-emergency-detection

Go to a project
Toggle navigation Toggle navigation pinning
박선진
be297ba1 1 parent 651fff84

delete unnecessary codes from template code

Inline Side-by-side
Showing 415 changed files with 3539 additions and 16586 deletions
......@@ -15,6 +15,7 @@
.env.development.local
.env.test.local
.env.production.local
.env
npm-debug.log*
yarn-debug.log*
......
This diff could not be displayed because it is too large.
......@@ -61,14 +61,12 @@
"bootstrap_calendar": "https://github.com/xero/bootstrap_calendar.git#1.0.1",
"classnames": "^2.2.6",
"draft-js": "^0.10.5",
"easy-pie-chart": "^2.1.7",
"flot": "^0.8.0-alpha",
"flot.dashes": "https://github.com/cquartier/flot.dashes.git",
"font-awesome": "4.7.0",
"formsy-react": "0.19.5",
"fullcalendar": "^3.9.0",
"glyphicons-halflings": "^1.9.1",
"govpredict-morris": "0.5.1",
"jasny-bootstrap": "^3.1.3",
"jquery": "^3.3.1",
"jquery-mapael": "^2.2.0",
......@@ -83,7 +81,10 @@
"messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",
"metrojs": "0.9.77",
"moment": "^2.22.2",
"moment-timezone": "^0.5.26",
"nvd3": "1.8.6",
"pretty": "^2.0.0",
"prettysize": "^2.0.0",
"rc-color-picker": "^1.2.6",
"rc-hammerjs": "0.6.9",
"react": "^16.5.2",
......@@ -107,6 +108,7 @@
"react-router-dom": "^4.3.1",
"react-router-hash-link": "^1.2.1",
"react-scrollspy": "^3.3.5",
"react-select": "^3.0.4",
"react-select2-wrapper": "^1.0.4-beta6",
"react-shuffle": "2.1.0",
"react-slick": "^0.23.1",
......@@ -122,9 +124,11 @@
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"rickshaw": "1.6.6",
"semantic-ui-react": "^0.87.3",
"showdown": "1.8.6",
"skycons": "^1.0.0",
"widgster": "^1.0.0"
"widgster": "^1.0.0",
"xlsx": "^0.14.4"
},
"devDependencies": {
"@babel/core": "7.4.4",
......@@ -140,10 +144,10 @@
"bfj": "6.1.1",
"bundle-loader": "0.5.6",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"chalk": "2.4.2",
"chalk": "^2.4.2",
"css-loader": "2.1.1",
"dotenv": "8.0.0",
"dotenv-expand": "5.1.0",
"dotenv": "^8.2.0",
"dotenv-expand": "^5.1.0",
"eslint": "5.16.0",
"eslint-config-react-app": "4.0.1",
"eslint-loader": "2.1.1",
......@@ -175,7 +179,7 @@
"style-loader": "0.23.0",
"terser-webpack-plugin": "1.2.3",
"url-loader": "1.1.2",
"webpack": "4.31.0",
"webpack": "^4.31.0",
"webpack-dev-server": "3.3.1",
"webpack-manifest-plugin": "2.0.4",
"webpack-raphael": "2.1.4",
......

10.4 KB | W: | H:

12 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
<?php sleep(10) ?>
<h3 class="text-center no-margin animated bounceInDown">Sign up, <del>it's <strong>free</strong></del> and get <strong>$50 now!</strong></h3>
<p class="lead text-muted text-center">
Faith makes it possible to achieve that which man's mind can conceive and believe.
</p>
<form>
<div class="form-group">
<label for="exampleInputEmail1"><i class="fa fa-circle text-warning"></i> &nbsp; Email address</label>
<input type="email" class="form-control input-transparent" id="exampleInputEmail1"
placeholder="Enter email">
</div>
<div class="form-group">
<label for="pswd"><i class="fa fa-circle text-danger"></i> &nbsp; Password</label>
<input class="form-control" id="pswd" type="text" placeholder="Min 8 characters">
</div>
<p>
To make a widget automatically load it's content you just need to set
<strong>data-widgster-autoload</strong> attribute and provide an url.
</p>
<pre><code>data-widgster-load="server/ajax_widget.php"
data-widgster-autoload="true"</code></pre>
<p>
<strong>data-widgster-autoload</strong> may be set to an integer value. If set, for example, to
2000 will refresh widget every 2 seconds.
</p>
<div class="clearfix">
<div class="btn-toolbar float-right">
<button type="submit" class="btn btn-transparent">Cancel</button>
<button type="submit" class="btn btn-success animated wobble">&nbsp;Submit&nbsp;</button>
</div>
</div>
</form>
<!-- demo latetency <?php sleep(2) ?> -->
<p class="text-muted">Simulating latency with tiny php block on the server-side.</p>
<p>A timestamp this widget was created: Apr 24, 19:07:07</p>
<p>A timestamp this widget was updated: <?php echo date("M j, H:i:s") ?></p>
\ No newline at end of file
<!-- <?php sleep(2) //just some delay to simulate latency ?> -->
<ul class="news-list stretchable">
<li class="animated fadeInDown bg-warning-light">
<span class="icon bg-warning text-white">
<i class="fa fa-lock"></i>
</span>
<div class="news-item-info">
<h5 class="name no-margin mb-xs"><a href="#">Just now! Check update time</a></h5>
<p class="fs-mini">
Check this news item timestamp. There is a small server part that generates current timestamp so it
would be easier for you to see ajax widgets in action
</p>
<time class="help-block"><?php echo date("M j, H:i:s")?></time>
</div>
</li>
<li>
<span class="icon bg-danger text-white">
<i class="fa fa-star"></i>
</span>
<div class="news-item-info">
<h5 class="name no-margin mb-xs"><a href="#">First Human Colony on Mars</a></h5>
<p class="fs-mini">
First 700 people will take part in building first human settlement outside of Earth.
That's awesome, right?
</p>
<time class="help-block">Mar 20, 18:46</time>
</div>
</li>
<li>
<span class="icon bg-info text-white">
<i class="fa fa-microphone"></i>
</span>
<div class="news-item-info">
<h5 class="name no-margin mb-xs"><a href="#">Light Blue reached $300</a></h5>
<p class="fs-mini">
Light Blue Inc. shares just hit $300 price. "This was inevitable. It should
have happen sooner or later" - says NYSE expert.
</p>
<time class="help-block">Sep 25, 11:59</time>
</div>
</li>
<li>
<span class="icon bg-success text-white">
<i class="fa fa-eye"></i>
</span>
<div class="news-item-info">
<h5 class="name no-margin mb-xs"><a href="#">No more spying</a></h5>
<p class="fs-mini">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<time class="help-block">Mar 20, 18:46</time>
</div>
</li>
</ul>
<?php sleep(2) ?>
<div class="list-group list-group-lg">
<a href="#" class="list-group-item animated fadeInDown bg-warning-light">
<span class="thumb-sm mr">
<img class="rounded-circle" src="/images/people/a6.jpg" alt="...">
</span>
<div>
<h6 class="no-margin"><strong>Jenny Wilington</strong></h6>
<small>just now</small>
</div>
<i class="fa fa-circle ml-auto text-success mt-sm"></i>
</a>
<a href="#" class="list-group-item ">
<span class="thumb-sm mr">
<img class="rounded-circle" src="/images/people/a1.jpg" alt="...">
</span>
<div>
<h6 class="m-0">Maikel Basso</h6>
<small class="text-muted">about 2 mins ago</small>
</div>
<i class="fa fa-circle ml-auto text-danger"></i>
</a>
<a href="#" class="list-group-item">
<span class="thumb-sm mr">
<img class="rounded-circle" src="/images/people/a2.jpg" alt="...">
</span>
<div>
<h6 class="m-0">Ianus Arendse</h6>
<small class="text-muted">about 42 mins ago</small>
</div>
<i class="fa fa-circle ml-auto text-info"></i>
</a>
<a href="#" class="list-group-item">
<span class="thumb-sm mr">
<img class="rounded-circle" src="/images/people/a3.jpg" alt="...">
</span>
<div>
<h6 class="m-0">Valdemar Landau</h6>
<small class="text-muted">one hour ago</small>
</div>
<i class="fa fa-circle ml-auto text-success"></i>
</a>
<a href="#" class="list-group-item mb-n-md">
<span class="thumb-sm mr">
<img class="rounded-circle" src="/images/people/a4.jpg" alt="...">
</span>
<div>
<h6 class="m-0">Rick Teagan</h6>
<small class="text-muted">3 hours ago</small>
</div>
<i class="fa fa-circle ml-auto text-warning"></i>
</a>
</div>

5.18 KB | W: | H:

12 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -19,7 +19,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Sing App React Dashboard - Admin Template built with React</title>
<title>Video Emergency Detection</title>
<meta name="description" content="React Admin Dashboard Template built with Bootstrap, Redux and React Router by Flatlogic. Over 40 unique pages, hundreds of components and theme support.">
<meta name="keywords" content="react admin, react dashboard, react admin template, react theme, react dashboard template, react dashboard template">
<meta name="author" content="Flatlogic LLC.">
......
export const DISMISS_ALERT = 'DISMISS_ALERT';
export function dismissAlert(id) {
return {
type: DISMISS_ALERT,
id,
};
}
import axios from 'axios';
export const RECEIVED_DATA_SUCCESS = 'RECEIVED_DATA_SUCCESS';
export const RECEIVING_DATA = 'RECEIVING_DATA';
export function receiveDataRequest() {
return (dispatch) => {
dispatch(receivingData());
axios.get('/analytics').then(res => {
dispatch(receiveDataSuccess(res.data));
})
};
}
export function receiveDataSuccess(payload) {
return {
type: RECEIVED_DATA_SUCCESS,
payload
}
}
export function receivingData() {
return {
type: RECEIVING_DATA
}
}
import axios from 'axios';
import { toast } from 'react-toastify';
export const RECEIVED_PRODUCTS = 'RECEIVED_PRODUCTS';
export const RECEIVING_PRODUCTS = 'RECEIVING_PRODUCTS';
export const RECEIVED_PRODUCT = 'RECEIVED_PRODUCT';
export const RECEIVING_PRODUCT = 'RECEIVING_PRODUCT';
export const UPDATED_PRODUCT = 'UPDATED_PRODUCT';
export const UPDATING_PRODUCT = 'UPDATING_PRODUCT';
export const DELETED_PRODUCT = 'DELETED_PRODUCT';
export const DELETING_PRODUCT = 'DELETING_PRODUCT';
export const RECEIVED_IMAGES = 'RECEIVED_IMAGES';
export function getProductsRequest() {
return (dispatch) => {
dispatch(receivingProducts());
axios.get('/products').then(res => {
dispatch(receiveProducts(res.data));
})
};
}
export function loadProductRequest(id) {
return (dispatch) => {
dispatch(receivingProduct());
axios.get('/products/' + id).then(res => {
dispatch(receiveProduct(res.data));
})
};
}
export function updateProductRequest(product) {
return (dispatch) => {
dispatch(updatingProduct());
axios.put('/products/' + product.id, product).then(res => {
dispatch(updateProduct(res.data));
toast.success("Product has been Updated!");
})
};
}
export function createProductRequest(payload) {
return (dispatch) => {
dispatch(updatingProduct());
axios.post('/products', payload.product).then(res => {
dispatch(updateProduct(res.data));
payload.history.push('/app/ecommerce/management');
toast.success("Product has been Created!");
})
};
}
export function deleteProductRequest(payload) {
return (dispatch) => {
dispatch(deletingProduct(payload));
axios.delete('/products/' + payload.id).then(res => {
dispatch(deleteProduct({id: payload.id}));
if (payload.history.location.pathname !== '/app/ecommerce/management') {
payload.history.push('/app/ecommerce/management');
}
toast.success("Product has been Deleted!");
})
};
}
export function getProductsImagesRequest(payload) {
return (dispatch) => {
axios.get('/products/images-list').then(res => {
dispatch(receiveProductImages(res.data));
if (!payload.img && res.data.length) {
dispatch(updateProduct({id: payload.id, img: res.data[0]}));
}
})
};
}
export function receiveProductImages(payload) {
return {
type: RECEIVED_IMAGES,
payload
}
}
export function receiveProducts(payload) {
return {
type: RECEIVED_PRODUCTS,
payload
}
}
export function receivingProducts() {
return {
type: RECEIVING_PRODUCTS
}
}
export function receiveProduct(payload) {
return {
type: RECEIVED_PRODUCT,
payload
}
}
export function receivingProduct() {
return {
type: RECEIVING_PRODUCT
}
}
export function updateProduct(payload) {
return {
type: UPDATED_PRODUCT,
payload
}
}
export function updatingProduct() {
return {
type: UPDATING_PRODUCT
}
}
export function deleteProduct(payload) {
return {
type: DELETED_PRODUCT,
payload
}
}
export function deletingProduct(payload) {
return {
type: DELETING_PRODUCT,
payload
}
}
import axios from 'axios';
import { toast } from 'react-toastify';
export const REGISTER_REQUEST = 'REGISTER_REQUEST';
export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
export const REGISTER_FAILURE = 'REGISTER_FAILURE';
function requestRegister() {
return {
type: REGISTER_REQUEST,
};
}
export function receiveRegister() {
return {
type: REGISTER_SUCCESS
};
}
export function registerError(payload) {
return {
type: REGISTER_FAILURE,
payload,
};
}
export function registerUser(payload) {
return (dispatch) => {
dispatch(requestRegister());
debugger;
const creds = payload.creds;
if (creds.email.length > 0 && creds.password.length > 0) {
axios.post("/user/signup", creds).then(res => {
dispatch(receiveRegister());
toast.success("You've been registered successfully");
payload.history.push('/login');
}).catch(err => {
dispatch(registerError(err.response.data));
})
} else {
dispatch(registerError('Something was wrong. Try again'));
}
};
}
import axios from 'axios';
import config from '../config';
import jwt from "jsonwebtoken";
export const LOGIN_REQUEST = 'LOGIN_REQUEST';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILURE = 'LOGIN_FAILURE';
export const LOGOUT_REQUEST = 'LOGOUT_REQUEST';
export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
export const LOGOUT_FAILURE = 'LOGOUT_FAILURE';
function requestLogin() {
return {
type: LOGIN_REQUEST,
};
}
export function receiveLogin() {
return {
type: LOGIN_SUCCESS
};
}
function loginError(payload) {
return {
type: LOGIN_FAILURE,
payload,
};
}
function requestLogout() {
return {
type: LOGOUT_REQUEST,
};
}
export function receiveLogout() {
return {
type: LOGOUT_SUCCESS,
};
}
// Logs the user out
export function logoutUser() {
return (dispatch) => {
dispatch(requestLogout());
localStorage.removeItem('token');
localStorage.removeItem('user');
document.cookie = 'token=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
axios.defaults.headers.common['Authorization'] = "";
dispatch(receiveLogout());
};
}
export function receiveToken(token) {
return (dispatch) => {
let user = jwt.decode(token).user;
delete user.id;
localStorage.setItem('token', token);
localStorage.setItem('user', JSON.stringify(user));
axios.defaults.headers.common['Authorization'] = "Bearer " + token;
dispatch(receiveLogin());
}
}
export function loginUser(creds) {
return (dispatch) => {
dispatch(requestLogin());
if (creds.social) {
window.location.href = config.baseURLApi + "/user/signin/" + creds.social + (process.env.NODE_ENV === "production" ? "?app=sing-app-react" : "");
}
else if (creds.email.length > 0 && creds.password.length > 0) {
axios.post("/user/signin/local", creds).then(res => {
const token = res.data.token;
dispatch(receiveToken(token));
}).catch(err => {
dispatch(loginError(err.response.data));
})
} else {
dispatch(loginError('Something was wrong. Try again'));
}
};
}
......@@ -10,21 +10,6 @@ import ErrorPage from '../pages/error';
import '../styles/theme.scss';
import LayoutComponent from '../components/Layout';
import DocumentationLayoutComponent from '../documentation/DocumentationLayout';
import Login from '../pages/login';
import Register from '../pages/register';
import { logoutUser } from '../actions/user';
const PrivateRoute = ({dispatch, component, ...rest }) => {
if (!Login.isAuthenticated(localStorage.getItem('token'))) {
dispatch(logoutUser());
return (<Redirect to="/login"/>)
} else {
return ( // eslint-disable-line
<Route {...rest} render={props => (React.createElement(component, props))}/>
);
}
};
const CloseButton = ({closeToast}) => <i onClick={closeToast} className="la la-close notifications-close"/>
......@@ -41,14 +26,9 @@ class App extends React.PureComponent {
<Switch>
<Route path="/" exact render={() => <Redirect to="/app/main"/>}/>
<Route path="/app" exact render={() => <Redirect to="/app/main"/>}/>
<PrivateRoute path="/app" dispatch={this.props.dispatch} component={LayoutComponent}/>
<Route path="/documentation" exact
render={() => <Redirect to="/documentation/getting-started/overview"/>}/>
<Route path="/documentation" component={DocumentationLayoutComponent}/>
<Route path="/register" exact component={Register}/>
<Route path="/login" exact component={Login}/>
<Route path="/app" component={LayoutComponent}/>
<Route path="/error" exact component={ErrorPage}/>
<Redirect from="*" to="/app/main/analytics"/>
<Redirect from="*" to="/app/main/"/>
</Switch>
</HashRouter>
</div>
......@@ -58,7 +38,6 @@ class App extends React.PureComponent {
}
const mapStateToProps = state => ({
isAuthenticated: state.auth.isAuthenticated,
});
export default connect(mapStateToProps)(App);
......
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { ListGroup, ListGroupItem, InputGroup, InputGroupAddon, Input, InputGroupText } from 'reactstrap';
import $ from 'jquery';
import * as a1 from '../../images/people/a1.jpg';
import * as a2 from '../../images/people/a2.jpg';
import * as a3 from '../../images/people/a3.jpg';
import * as a4 from '../../images/people/a4.jpg';
import * as a5 from '../../images/people/a5.jpg';
import * as a6 from '../../images/people/a6.jpg';
import * as avatar from '../../images/avatar.png';
import s from './Chat.module.scss';
class Chat extends React.Component {
static propTypes = {
chatOpen: PropTypes.bool,
};
static defaultProps = {
chatOpen: false,
};
constructor(props) {
super(props);
this.handleChangeContacts = this.handleChangeContacts.bind(this);
this.openMessages = this.openMessages.bind(this);
this.filterConversations = this.filterConversations.bind(this);
this.filterMessages = this.filterMessages.bind(this);
this.addMessage = this.addMessage.bind(this);
this.state = {
todayConversations: [{
name: 'Chris Gray',
status: 'success',
lastMessage: 'Hey! What\'s up? So many times since we',
image: a2,
messages: [{
id: 0,
text: 'Hey! What\'s up?',
}, {
id: 1,
text: 'Are you there?',
}, {
id: 2,
text: 'Let me know when you come back.',
}, {
id: 3,
text: 'I am here!',
fromMe: true,
}],
}, {
name: 'Jamey Brownlow',
status: 'gray-light',
lastMessage: 'Good news coming tonight. Seems they agreed to proceed',
image: avatar,
}, {
name: 'Livia Walsh',
status: 'danger',
lastMessage: 'Check out my latest email plz!',
image: a1,
}, {
name: 'Jaron Fitzroy',
status: 'gray-light',
lastMessage: 'What about summer break?',
image: avatar,
}, {
name: 'Mike Lewis',
status: 'success',
lastMessage: 'Just ain\'t sure about the weekend now. 90% I\'ll make it.',
image: a4,
}],
lastWeekConversations: [{
name: 'Freda Edison',
status: 'gray-light',
lastMessage: 'Hey what\'s up? Me and Monica going for a lunch somewhere. Wanna join?',
image: a6,
}, {
name: 'Livia Walsh',
status: 'success',
lastMessage: 'Check out my latest email plz!',
image: a5,
}, {
name: 'Jaron Fitzroy',
status: 'warning',
lastMessage: 'What about summer break?',
image: a3,
}, {
name: 'Mike Lewis',
status: 'gray-light',
lastMessage: 'Just ain\'t sure about the weekend now. 90% I\'ll make it.',
image: avatar,
}],
chatMessageOpened: true,
conversation: Object,
searchValue: '',
};
}
openMessages(conversation, e) {
this.setState({
conversation,
chatMessageOpened: false,
});
$(e.currentTarget).removeClass('active').find('.badge').remove();
}
addMessage(e) {
if (e.key === 'Enter') {
const value = {
text: e.target.value,
fromMe: true,
};
this.setState({
conversation: Object.assign({}, this.state.conversation, {
messages: [
...this.state.conversation.messages || [],
value,
],
}),
});
e.target.value = ''; // eslint-disable-line
}
}
handleChangeContacts(event) {
this.setState({ searchValue: event.target.value });
}
filterConversations(item) {
const isFindName = item.name.toLowerCase()
.indexOf(this.state.searchValue.toLowerCase()) !== -1;
const isFindMessage = item.lastMessage.toLowerCase()
.indexOf(this.state.searchValue.toLowerCase()) !== -1;
return isFindName || isFindMessage;
}
filterMessages(item) {
return item.text.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1;
}
render() {
return (
<aside className={[s.root, this.props.chatOpen ? s.chatOpen : ''].join(' ')}>
<header className={s.chatHeader}>
<h4 className={s.chatTitle}>Contacts</h4>
<div className="input-group input-group-transparent">
<InputGroup size="sm">
<Input placeholder="Search..." value={this.state.searchValue} onChange={this.handleChangeContacts} />
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="fa fa-search"/>
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</header>
<div className={[s.chatPanel, s.chatContacts, this.state.chatMessageOpened ? s.chatMessageOpen : ''].join(' ')}>
<h5 className={s.navTitle}>TODAY</h5>
<ListGroup id="chat-sidebar-user-group" className={s.chatSidebarUserGroup}>
{this.state.todayConversations
.filter(this.filterConversations)
.map(item =>
<ListGroupItem
key={item.name}
onClick={e => this.openMessages(item, e)}
>
<i className={['fa fa-circle float-right', `text-${item.status}`].join(' ')} />
<span className="thumb-sm float-left mr">
<img className="rounded-circle" src={item.image} alt="..." />
</span>
<div>
<h6 className={s.messageSender}>{item.name}</h6>
<p className={s.messagePreview}>{item.lastMessage}</p>
</div>
</ListGroupItem>,
)}
</ListGroup>
<h5 className={s.navTitle}>LAST WEEK</h5>
<ListGroup className={s.chatSidebarUserGroup}>
{this.state.lastWeekConversations
.filter(this.filterConversations)
.map(item =>
<ListGroupItem
key={item.name}
onClick={e => this.openMessages(item, e)}
>
<i className={['fa fa-circle float-right', `text-${item.status}`].join(' ')} />
<span className="thumb-sm pull-left mr">
<img className="rounded-circle" src={item.image} alt="..." />
</span>
<div>
<h6 className={s.messageSender}>{item.name}</h6>
<p className={s.messagePreview}>{item.lastMessage}</p>
</div>
</ListGroupItem>,
)}
</ListGroup>
</div>
<div className={[s.chatPanel, s.chatMessages, this.state.chatMessageOpened ? '' : s.chatMessageOpen].join(' ')}>
<h6 className={s.messagesTitle}>
{/* eslint-disable */}
<a onClick={() => this.setState({ chatMessageOpened: true })}>
<i className="fa fa-angle-left mr-xs" />
{this.state.conversation.name}
</a>
{/* eslint-disable */}
</h6>
<ListGroup>
{this.state.conversation.messages &&
this.state.conversation.messages
.filter(this.filterMessages)
.map(item => <ListGroupItem key={item.id} className={[item.fromMe ? s.fromMe : '', s.messageItem]}>
<span className="thumb-sm">
<img className="rounded-circle"
src={item.fromMe ? avatar : this.state.conversation.image} alt="..."/>
</span>
<div className={s.messageBody}>{item.text}</div>
</ListGroupItem>,
)}
</ListGroup>
<footer className={[s.chatFooter, 'form-group'].join(' ')}>
<input className="form-control fs-mini" onKeyPress={this.addMessage} type="text"
placeholder="Type your message"/>
</footer>
</div>
</aside>
);
}
}
export default withRouter(Chat);
@import '../../styles/app';
.root {
position: fixed;
overflow: hidden;
top: 0;
bottom: 0;
right: -$chat-sidebar-width-open;
width: $chat-sidebar-width-open;
border-left: $sidebar-border;
background-color: var(--chat-sidebar-bg-color);
color: #aaa;
transition: right 0.3s ease-in-out;
@include media-breakpoint-down(md) {
right: -($chat-sidebar-width-open + 25px);
width: $chat-sidebar-width-open + 25px;
}
&.chatOpen {
right: 0;
}
.chatHeader {
position: absolute;
width: 100%;
top: 0;
z-index: 3;
padding: 10px;
background-color: var(--chat-sidebar-bg-color);
input {
padding: 0.6rem 0.85rem;
line-height: 1.5;
}
.chatTitle {
margin: 10px;
text-transform: uppercase;
font-size: 15px;
font-weight: 400;
}
}
.chatPanel {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
:global .list-group-item {
border: 0;
padding: 10px 20px;
z-index: 1;
.cirle {
font-size: 11px;
line-height: 37px;
margin-left: auto;
}
}
.navTitle {
margin: 35px 10px 5px 20px;
font-size: 14px;
}
.navTitle:first-child {
margin-top: 0;
}
.messageSender {
text-overflow: ellipsis;
color: var(--sidebar-color);
}
.messagePreview {
margin: 0;
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 85%;
color: #999;
}
}
.chatContacts {
padding-top: 105px;
left: -100%;
transition: left 0.2s ease-in-out;
:global .list-group {
margin-top: 10px;
:global .list-group-item {
cursor: pointer;
}
}
&.chatMessageOpen {
left: 0;
overflow-y: auto;
@include scroll-bar(rgba($white, 0.3));
}
}
.chatMessages {
padding-top: 100px;
right: -100%;
transition: right 0.2s ease-in-out;
background-color: var(--sidebar-bg-color);
:global .list-group {
position: absolute;
top: 134px; // header height
bottom: 47px; // footer height
width: 100%;
padding-top: 0.5rem;
overflow-y: auto;
@include scroll-bar(rgba($white, 0.3));
:global .list-group-item {
align-items: flex-start;
}
:global .thumb-sm {
float: left;
}
}
.messageBody {
position: relative;
margin-left: 50px;
padding: 10px;
font-size: 13px;
font-weight: $font-weight-normal;
background-color: $gray-200;
color: $text-color;
border-radius: 0.25rem;
&::before {
right: 100%;
top: 8px;
content: '';
height: 0;
width: 0;
position: absolute;
border: 10px solid rgba(0, 0, 0, 0);
border-right-color: $gray-200;
}
}
.fromMe {
flex-direction: row-reverse;
:global .thumb-sm {
float: right;
}
.messageBody {
margin-left: 0;
margin-right: 50px;
background-color: theme-color('warning');
color: $gray-800;
&::before {
right: auto;
left: 100%;
border-right-color: rgba(0, 0, 0, 0);
border-left-color: theme-color('warning');
}
}
}
.chatFooter {
position: absolute;
z-index: 1;
bottom: 0;
width: 100%;
margin-bottom: 0;
padding: 10px;
background-color: $white;
}
&.chatMessageOpen {
right: 0;
}
.messagesTitle {
margin-bottom: 0;
a {
display: block;
margin-top: -7px;
padding: 17px 16px;
}
}
}
.chatSidebarUserGroup {
:global .list-group-item {
transition: $transition-base;
}
:global .list-group-item.active {
background: rgba($white, 0.1);
}
:global .list-group-item.active h6 {
color: theme-color('warning');
font-weight: $badge-font-weight;
}
:global .list-group-item:hover {
background: var(--sidebar-action-bg);
}
:global .badge {
margin: 8px 5px 0 0;
padding: 3px 5px;
}
:global .fa {
margin-top: 11px;
}
}
.messageItem {
&:hover {
background: transparent;
}
}
}
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';
import {
Navbar,
Nav,
Dropdown,
NavItem,
NavLink,
Badge,
DropdownToggle,
DropdownMenu,
DropdownItem,
UncontrolledTooltip,
InputGroupAddon,
InputGroup,
Input,
Form,
FormGroup,
} from 'reactstrap';
import $ from 'jquery';
import Notifications from '../Notifications';
import { logoutUser } from '../../actions/user';
import { toggleSidebar, openSidebar, closeSidebar, changeActiveSidebarItem } from '../../actions/navigation';
import a5 from '../../images/people/a5.jpg';
import a6 from '../../images/people/a6.jpg';
import s from './Header.module.scss'; // eslint-disable-line css-modules/no-unused-class
class Header extends React.Component {
static propTypes = {
sidebarOpened: PropTypes.bool.isRequired,
sidebarStatic: PropTypes.bool.isRequired,
chatToggle: PropTypes.func.isRequired,
dispatch: PropTypes.func.isRequired,
location: PropTypes.shape({
pathname: PropTypes.string,
}).isRequired,
};
constructor(props) {
super(props);
this.toggleMenu = this.toggleMenu.bind(this);
this.switchSidebar = this.switchSidebar.bind(this);
this.toggleNotifications = this.toggleNotifications.bind(this);
this.toggleSidebar = this.toggleSidebar.bind(this);
this.doLogout = this.doLogout.bind(this);
this.state = {
menuOpen: false,
notificationsOpen: false,
notificationsTabSelected: 1,
};
}
componentDidMount() {
if (window.innerWidth > 576) {
setTimeout(() => {
const $chatNotification = $('#chat-notification');
$chatNotification.removeClass('hide').addClass('animated fadeIn')
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', () => {
$chatNotification.removeClass('animated fadeIn');
setTimeout(() => {
$chatNotification.addClass('animated fadeOut')
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd' +
' oanimationend animationend', () => {
$chatNotification.addClass('hide');
});
}, 6000);
});
$chatNotification.siblings('#toggle-chat')
.append('<i class="chat-notification-sing animated bounceIn"></i>');
}, 4000);
}
$('#search-input').on('blur focus', (e) => {
$('#search-input').parents('.input-group')[e.type === 'focus' ? 'addClass' : 'removeClass']('focus');
});
}
toggleNotifications() {
this.setState({
notificationsOpen: !this.state.notificationsOpen,
});
}
doLogout() {
this.props.dispatch(logoutUser());
}
// collapse/uncolappse
switchSidebar() {
if (this.props.sidebarOpened) {
this.props.dispatch(closeSidebar());
this.props.dispatch(changeActiveSidebarItem(null));
} else {
const paths = this.props.location.pathname.split('/');
paths.pop();
this.props.dispatch(openSidebar());
this.props.dispatch(changeActiveSidebarItem(paths.join('/')));
}
}
// static/non-static
toggleSidebar() {
this.props.dispatch(toggleSidebar());
if (this.props.sidebarStatic) {
localStorage.setItem('staticSidebar', 'false');
this.props.dispatch(changeActiveSidebarItem(null));
} else {
localStorage.setItem('staticSidebar', 'true');
const paths = this.props.location.pathname.split('/');
paths.pop();
this.props.dispatch(changeActiveSidebarItem(paths.join('/')));
}
}
toggleMenu() {
this.setState({
menuOpen: !this.state.menuOpen,
});
}
render() {
const user = JSON.parse(localStorage.getItem('user') || {});
const firstUserLetter = (user.name|| user.email || "P")[0].toUpperCase();
return (
<Navbar className={`${s.root} d-print-none`}>
<Nav>
<NavItem>
<NavLink className="d-md-down-none ml-5" id="toggleSidebar" onClick={this.toggleSidebar}>
<i className="la la-bars" />
</NavLink>
<UncontrolledTooltip placement="bottom" target="toggleSidebar">
Turn on/off<br />sidebar<br />collapsing
</UncontrolledTooltip>
<NavLink className="fs-lg d-lg-none" onClick={this.switchSidebar}>
<span className="rounded rounded-lg bg-gray text-white d-md-none"><i className="la la-bars" /></span>
<i className="la la-bars ml-3 d-sm-down-none" />
</NavLink>
</NavItem>
<NavItem className="d-sm-down-none">
<NavLink className="px-2">
<i className="la la-refresh" />
</NavLink>
</NavItem>
<NavItem className="d-sm-down-none">
<NavLink className="px-2">
<i className="la la-times" />
</NavLink>
</NavItem>
</Nav>
<Form className="d-sm-down-none ml-5" inline>
<FormGroup>
<InputGroup className="input-group-no-border">
<InputGroupAddon addonType="prepend">
<i className="la la-search" />
</InputGroupAddon>
<Input id="search-input" placeholder="Search Dashboard" />
</InputGroup>
</FormGroup>
</Form>
<NavLink className={`${s.navbarBrand} d-md-none`}>
<i className="fa fa-circle text-gray mr-n-sm" />
<i className="fa fa-circle text-warning" />
&nbsp;
sing
&nbsp;
<i className="fa fa-circle text-warning mr-n-sm" />
<i className="fa fa-circle text-gray" />
</NavLink>
<Nav className="ml-auto">
<Dropdown nav isOpen={this.state.notificationsOpen} toggle={this.toggleNotifications} id="basic-nav-dropdown" className={`${s.notificationsMenu} d-sm-down-none`}>
<DropdownToggle nav caret>
<span className={`${s.avatar} rounded-circle thumb-sm float-left mr-2`}>
{user.avatar || user.email === "admin@flatlogic.com" ? (
<img src={user.avatar || a5} alt="..."/>
) : (
<span>{firstUserLetter}</span>
)}
</span>
<span className="small">{user.name || user.email || "Philip smith"}</span>
<span className="ml-1 circle bg-warning text-white fw-bold">13</span>
</DropdownToggle>
<DropdownMenu right className={`${s.notificationsWrapper} py-0 animated animated-fast fadeInUp`}>
<Notifications />
</DropdownMenu>
</Dropdown>
<Dropdown nav isOpen={this.state.menuOpen} toggle={this.toggleMenu} className="d-sm-down-none">
<DropdownToggle nav>
<i className="la la-cog" />
</DropdownToggle>
<DropdownMenu right className="super-colors">
<DropdownItem><i className="la la-user" /> My Account</DropdownItem>
<DropdownItem divider />
<DropdownItem href="/calendar">Calendar</DropdownItem>
<DropdownItem href="/inbox">Inbox &nbsp;&nbsp;<Badge color="danger" pill className="animated bounceIn">9</Badge></DropdownItem>
<DropdownItem divider />
<DropdownItem onClick={this.doLogout}><i className="la la-sign-out" /> Log Out</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink className="d-sm-down-none mr-5" id="toggle-chat" onClick={this.props.chatToggle}>
<i className="la la-globe" />
</NavLink>
<div id="chat-notification" className={`${s.chatNotification} hide `}>
<div className={s.chatNotificationInner}>
<h6 className={`${s.title} d-flex`}>
<span className="thumb-xs">
<img src={a6} alt="" className="rounded-circle mr-xs float-left" />
</span>
Jess Smith
</h6>
<p className={s.text}>Hi there! <br /> This is a completely new version of Sing App <br /> built with <strong className="text-primary">React JS</strong> </p>
</div>
</div>
</NavItem>
<NavItem className="fs-lg d-md-none">
<NavLink href="#" onClick={this.props.chatToggle}>
<span className="rounded rounded-lg bg-gray text-white"><i className="la la-globe" /></span>
</NavLink>
</NavItem>
</Nav>
</Navbar>
);
}
}
function mapStateToProps(store) {
return {
sidebarOpened: store.navigation.sidebarOpened,
sidebarStatic: store.navigation.sidebarStatic,
};
}
export default withRouter(connect(mapStateToProps)(Header));
@import '../../styles/app';
.root {
z-index: 100;
background: var(--navbar-bg);
box-shadow: var(--navbar-shadow);
@include media-breakpoint-down(sm) {
padding: 7px 0;
}
:global {
.input-group {
overflow: hidden;
}
.input-group-prepend {
background-color: #fff;
transition: background-color ease-in-out 0.15s;
border-top-left-radius: 0.3rem;
border-bottom-left-radius: 0.3rem;
display: flex;
justify-content: center;
align-items: center;
width: 35px;
}
.focus .input-group-prepend {
background: #f8f9fa;
}
}
}
.logo {
font-size: 16px;
}
.navbarForm {
padding: 6px 0 6px 1rem;
margin-left: 10px;
display: inline-block;
top: 2px;
width: auto;
.inputAddon {
position: relative;
display: inline;
border: none;
background-color: #fff;
transition: background-color ease-in-out 0.15s;
}
input {
border: none;
padding: 0.6rem 0.85rem 0.6rem 0;
display: inline !important;
width: 250px !important;
top: 2px;
}
}
.chatNotification {
position: absolute;
right: 35px;
top: 50px;
z-index: 20;
margin-top: 3px;
padding: 5px 0;
cursor: pointer;
&::before {
content: ' ';
position: absolute;
top: 0;
right: 18px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid $gray-800;
}
.chatNotificationInner {
min-width: 120px;
padding: 8px;
font-size: 12px;
border-radius: 0.25rem;
text-decoration: none;
background-color: $gray-800;
color: #fff;
}
.text {
margin-top: 5px;
margin-bottom: 0;
color: $gray-600;
}
.title {
margin: 0;
font-weight: 600;
line-height: 28px;
font-size: 0.875rem;
span {
margin-right: 7px;
}
}
}
.navbarBrand {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 1.25rem;
pointer-events: none;
i {
font-size: 10px;
}
}
.notificationsMenu {
:global .dropdown-menu {
left: auto !important;
right: 0 !important;
top: $navbar-height !important;
}
}
.notificationsWrapper {
width: min-content;
}
.avatar {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
height: 40px;
width: 40px;
background: $warning;
font-weight: 600;
font-size: 18px;
}
import React, { Component } from 'react';
import cx from 'classnames';
import { Button } from 'reactstrap';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { DashboardThemes } from '../../reducers/layout';
import { changeTheme } from '../../actions/layout';
import Widget from '../Widget';
import s from './Helper.module.scss'; // eslint-disable-line
import themeDark from '../../images/theme-dark.png';
import themeLight from '../../images/theme-light.png';
class Helper extends Component {
static propTypes = {
dispatch: PropTypes.func.isRequired,
dashboardTheme: PropTypes.string
};
static defaultProps = {
dashboardTheme: DashboardThemes.DARK
};
state = { isOpened: false };
toggle = () => {
this.setState(prevState => ({
isOpened: !prevState.isOpened,
}));
};
changeTheme = (state) => {
this.props.dispatch(changeTheme(state));
};
render() {
const { isOpened } = this.state;
return (
<div className={cx(s.themeHelper, { [s.themeHelperOpened]: isOpened })}>
<Widget
className={s.themeHelperContent}
bodyClass="mt-3"
title={
<header className={cx(s.themeHelperHeader, 'd-flex p-0')}>
<Button color="warning" className={s.themeHelperBtn} onClick={this.toggle}>
<div className={cx(s.themeHelperSpinner, 'text-white')}>
<i className="la la-cog" />
<i className="la la-cog" />
</div>
</Button>
<h6>Theme</h6>
</header>
}
>
<div className={s.themeSwitcher}>
<div className={cx(s.theme, "mb-3")}>
<input checked={this.props.dashboardTheme === DashboardThemes.LIGHT} onClick={() => this.changeTheme(DashboardThemes.LIGHT)} type="radio" id="css-light" value="option2" name="theme-variant" aria-label="Sing Light" readOnly/>
<label htmlFor="css-light">
<img className={s.themeImage} src={themeLight} alt="light theme"/>
</label>
</div>
<div className={s.theme}>
<input checked={this.props.dashboardTheme === DashboardThemes.DARK} onClick={() => this.changeTheme(DashboardThemes.DARK)} type="radio" id="css-dark" value="option1" name="theme-variant" aria-label="Single Dark" readOnly/>
<label htmlFor="css-dark">
<img className={s.themeImage} src={themeDark} alt="dark theme"/>
</label>
</div>
</div>
<div className="mt-4">
<Button
href="https://flatlogic.com/admin-dashboards/sing-app-react"
target="_blank"
className="btn-rounded-f btn-block fs-mini"
color="warning"
>
<span className="text-white">Purchase</span>
</Button>
<Button
href="http://demo.flatlogic.com/sing-app/documentation/"
target="_blank"
className="btn-rounded-f btn-block fs-mini text-white"
>
Documentation
</Button>
</div>
<div className="d-flex justify-content-between mt-lg">
<Button
href="https://flatlogic.com/contact"
target="_blank"
className="btn-outline-default btn-rounded-f fs-mini text-muted px-2"
>
<i className="glyphicon glyphicon-headphones mr-xs" />
Support
</Button>
<Button
href="https://github.com/flatlogic/sing-app"
target="_blank"
className="btn-outline-default btn-rounded-f fs-mini text-muted px-2"
>
<i className="fa fa-github mr-xs" />
Github
</Button>
</div>
<div className="mt-lg d-flex flex-column align-items-center theme-helper__sharing">
<span className="fs-sm">
Thank you for sharing!
</span>
<div className="d-flex justify-content-center text-light mt-2">
<a
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/intent/tweet?text=Amazing%20dashboard%20built%20with%20NodeJS,%20React%20and%20Bootstrap!&url=https://github.com/flatlogic/react-dashboard&via=flatlogic"
>
<i className="fa fa-twitter pr-1" />
</a>
<a
href="https://www.facebook.com/search/top/?q=flatlogic%20llc"
target="_blank"
rel="noopener noreferrer"
>
<i className="fa fa-facebook pl-1" />
</a>
</div>
</div>
</Widget>
</div>
);
}
}
function mapStateToProps(store) {
return {
dashboardTheme: store.layout.dashboardTheme,
};
}
export default connect(mapStateToProps)(Helper);
@import '../../styles/app';
.themeHelper {
width: $sidebar-width-open;
position: fixed;
right: -$sidebar-width-open;
top: $navbar-height * 1.5;
z-index: 100;
@include transition(right $sidebar-transition-time ease-in-out);
& :global {
.abc-radio-secondary input[type="radio"]:not(:checked)+label::before {
background-color: #798892;
}
.abc-radio-warning input[type="radio"]:not(:checked)+label::before {
background-color: theme-color('warning');
}
}
.themeSwitcher {
display: flex;
flex-direction: column;
align-items: center;
.theme {
position: relative;
&,
& > label {
width: 100%;
height: max-content;
}
& > input {
position: absolute;
width: 0;
height: 0;
padding: 0;
margin: 0;
pointer-events: none;
opacity: 0;
}
& > label {
margin: 0;
border: 1px solid $input-border-color;
padding: 3px;
border-radius: $border-radius;
transition: background-color .2s ease-in-out;
cursor: pointer;
display: block;
&:hover {
background-color: $gray-200;
}
}
& > input:checked + label {
background-color: $gray-300;
}
.themeImage {
width: 100%;
}
}
}
&.themeHelperOpened {
right: 0;
}
.themeHelperBtn {
position: absolute;
width: $sidebar-width-open / 4;
transform: translateX(-76px);
margin-top: -($widget-padding-vertical);
cursor: pointer;
z-index: 200;
border-radius: 50% 0 0 50%;
padding: $spacer * 0.8 $spacer / 2 $spacer * 0.8 $spacer;
&,
&:not(.active) {
box-shadow: $widget-shadow-designated !important;
}
i {
animation-duration: 6500ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
i:first-of-type {
animation-name: spin;
margin-right: -$spacer * 1.15;
vertical-align: text-bottom;
}
i:last-of-type {
animation-name: spin-reverse;
vertical-align: $font-size-sm;
}
}
.themeHelperSpinner {
font-size: $font-size-lg * 1.4;
line-height: initial;
}
.themeHelperHeader {
padding-top: 0;
h6 {
margin: auto;
}
}
.themeHelperContent {
box-shadow: $widget-shadow-designated;
border-radius: 0;
}
.themeHelperSharing {
font-size: $font-size-lg;
cursor: pointer;
}
:global .glyphicon {
vertical-align: top;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-360deg);
}
}
}
import React from 'react';
import PropTypes from 'prop-types';
import Formsy from 'formsy-react';
Formsy.addValidationRule('isRange', (values, value, array) => (value >= array[0] && value <= array[1]));
class InputValidation extends React.Component {
/* eslint-disable */
static propTypes = {
trigger: PropTypes.string,
type: PropTypes.string,
className: PropTypes.string,
name: PropTypes.string,
id: PropTypes.string,
placeholder: PropTypes.string,
setValue: PropTypes.func,
isFormSubmitted: PropTypes.func,
getErrorMessage: PropTypes.func,
showRequired: PropTypes.func,
};
/* eslint-enable */
static defaultProps = {
trigger: null,
type: 'text',
className: '',
name: '',
id: '',
placeholder: '',
};
constructor() {
super();
this.changeValue = this.changeValue.bind(this);
}
changeValue(event) {
this.props.setValue(event.currentTarget.value);
}
render() {
const errorMessageObj = (this.props.isFormSubmitted() || this.props.trigger) ? this.props.getErrorMessage() : null;
const required = (this.props.isFormSubmitted() && this.props.showRequired()) ?
<span className={'help-block text-danger'}>This value is required.</span> : null;
const errorMsg = [];
if (errorMessageObj) {
Object.keys(errorMessageObj).forEach((type) => {
errorMsg.push(errorMessageObj[type]);
});
}
const errorList = errorMsg.map((msg, index) =>
<span key={`msg-err-${index.toString()}`} className={'help-block text-danger'}>{msg}</span>,
);
return (
<div className={this.props.className}>
<input
type={this.props.type}
name={this.props.name}
id={this.props.id}
className={'form-control'}
onBlur={this.changeValue}
placeholder={this.props.placeholder}
/>
{required}
{errorList}
</div>
);
}
}
export default Formsy.HOC(InputValidation);
......@@ -3,64 +3,14 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Switch, Route, withRouter, Redirect } from 'react-router';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import $ from 'jquery';
import Hammer from 'rc-hammerjs';
import Profile from '../../pages/profile';
import UIButtons from '../../pages/ui-elements/buttons';
import UIIcons from '../../pages/ui-elements/icons';
import UITabsAccordion from '../../pages/ui-elements/tabs-accordion/';
import UINotifications from '../../pages/ui-elements/notifications';
import UIListGroups from '../../pages/ui-elements/list-groups';
import FormsElements from '../../pages/forms/elements';
import FormsValidation from '../../pages/forms/validation';
import FormsWizard from '../../pages/forms/wizard';
import TablesStatic from '../../pages/tables/static';
import TablesDynamic from '../../pages/tables/dynamic';
import MapsGoogle from '../../pages/maps/google';
import MapsVector from '../../pages/maps/vector';
import ExtraCalendar from '../../pages/extra/calendar';
import ExtraInvoice from '../../pages/extra/invoice';
import ExtraSearch from '../../pages/extra/search';
import ExtraTimeline from '../../pages/extra/timeline';
import ExtraGallery from '../../pages/extra/gallery';
import Grid from '../../pages/grid';
import Widgets from '../../pages/widgets';
import Products from '../../pages/products';
import Management from '../../pages/management';
import Product from '../../pages/product';
import Package from '../../pages/package';
import Email from '../../pages/email';
import CoreTypography from '../../pages/core/typography';
import CoreColors from '../../pages/core/colors';
import CoreGrid from '../../pages/core/grid';
import UIAlerts from '../../pages/ui-elements/alerts';
import UIBadge from '../../pages/ui-elements/badge';
import UICard from '../../pages/ui-elements/card';
import UICarousel from '../../pages/ui-elements/carousel';
import UIJumbotron from '../../pages/ui-elements/jumbotron';
import UIModal from '../../pages/ui-elements/modal';
import UIProgress from '../../pages/ui-elements/progress';
import UINavbar from '../../pages/ui-elements/navbar';
import UINav from '../../pages/ui-elements/nav';
import UIPopovers from '../../pages/ui-elements/popovers';
import Charts from '../../pages/charts';
import ChartsEasyPie from '../../pages/charts/easy-pie';
import ChartsMorris from '../../pages/charts/morris';
import ChartsFlot from '../../pages/charts/flot';
import ChartsSparkline from '../../pages/charts/sparkline';
import ChartsRickshaw from '../../pages/charts/rickshaw';
import DashboardAnalytics from '../../pages/analytics';
import Dashboard from '../../pages/dashboard';
import Header from '../Header';
import Main from '../../pages/videoAnalysis/VideoAnalysis';
import Subject from '../../pages/subject';
import Sidebar from '../Sidebar';
import Chat from '../Chat';
import Helper from '../Helper';
import { openSidebar, closeSidebar, changeActiveSidebarItem, toggleSidebar } from '../../actions/navigation';
import s from './Layout.module.scss';
import { DashboardThemes } from '../../reducers/layout';
import ProductEdit from '../../pages/management/components/productEdit';
class Layout extends React.Component {
static propTypes = {
......@@ -77,16 +27,10 @@ class Layout extends React.Component {
};
constructor(props) {
super(props);
this.chatToggle = this.chatToggle.bind(this);
this.handleSwipe = this.handleSwipe.bind(this);
this.state = {
chatOpen: false,
};
}
componentDidMount() {
async componentDidMount() {
const staticSidebar = JSON.parse(localStorage.getItem('staticSidebar'));
if (staticSidebar && window.innerWidth > 768) {
this.props.dispatch(toggleSidebar());
......@@ -96,7 +40,6 @@ class Layout extends React.Component {
this.props.dispatch(changeActiveSidebarItem(null));
}, 2500);
}
this.handleResize();
window.addEventListener('resize', this.handleResize.bind(this));
}
......@@ -111,35 +54,15 @@ class Layout extends React.Component {
}
}
chatToggle() {
this.setState({ chatOpen: !this.state.chatOpen });
$('.chat-notification-sing').remove();
setTimeout(() => {
// demo: add class & badge to indicate incoming messages from contact
// .js-notification-added ensures notification added only once
$('#chat-sidebar-user-group').find('.list-group-item:first-child:not(.js-notification-added)')
.addClass('active js-notification-added')
.find('.fa-circle')
.after('<span class="badge badge-danger badge-pill ' +
'float-right animated bounceInDown">3</span>');
}, 1000);
}
handleSwipe(e) {
if ('ontouchstart' in window) {
if (e.direction === 4 && !this.state.chatOpen) {
this.props.dispatch(openSidebar());
return;
}
if (e.direction === 2 && this.props.sidebarOpened) {
this.props.dispatch(closeSidebar());
return;
}
this.setState({ chatOpen: e.direction === 2 });
}
}
render() {
......@@ -148,7 +71,6 @@ class Layout extends React.Component {
className={[
s.root,
this.props.sidebarStatic ? s.sidebarStatic : '',
this.state.chatOpen ? s.chatOpen : '',
!this.props.sidebarOpened ? s.sidebarClose : '',
'sing-dashboard',
'dashboard-' + this.props.dashboardTheme,
......@@ -156,10 +78,6 @@ class Layout extends React.Component {
>
<Sidebar />
<div className={s.wrap}>
<Header chatToggle={this.chatToggle} />
<Chat chatOpen={this.state.chatOpen} />
<Helper />
<Hammer onSwipe={this.handleSwipe}>
<main className={s.content}>
<TransitionGroup>
......@@ -169,68 +87,13 @@ class Layout extends React.Component {
timeout={200}
>
<Switch>
<Route path="/app/main" exact render={() => <Redirect to="/app/main/analytics" />} />
<Route path="/app/main/dashboard" exact component={Dashboard} />
<Route path="/app/main/widgets" exact component={Widgets} />
<Route path="/app/main/analytics" exact component={DashboardAnalytics} />
<Route path="/app/ecommerce/management" exact component={Management} />
<Route path="/app/ecommerce/management/:id" exact component={ProductEdit} />
<Route path="/app/ecommerce/management/create" exact component={ProductEdit} />
<Route path="/app/ecommerce/products" exact component={Products} />
<Route path="/app/ecommerce/product" exact component={Product} />
<Route path="/app/ecommerce/product/:id" exact component={Product} />
<Route path="/app/profile" exact component={Profile} />
<Route path="/app/inbox" exact component={Email} />
<Route path="/app/ui" exact render={() => <Redirect to="/app/ui/components" />} />
<Route path="/app/ui/buttons" exact component={UIButtons} />
<Route path="/app/ui/icons" exact component={UIIcons} />
<Route path="/app/ui/tabs-accordion" exact component={UITabsAccordion} />
<Route path="/app/ui/notifications" exact component={UINotifications} />
<Route path="/app/ui/list-groups" exact component={UIListGroups} />
<Route path="/app/ui/alerts" exact component={UIAlerts} />
<Route path="/app/ui/badge" exact component={UIBadge} />
<Route path="/app/ui/card" exact component={UICard} />
<Route path="/app/ui/carousel" exact component={UICarousel} />
<Route path="/app/ui/jumbotron" exact component={UIJumbotron} />
<Route path="/app/ui/modal" exact component={UIModal} />
<Route path="/app/ui/popovers" exact component={UIPopovers} />
<Route path="/app/ui/progress" exact component={UIProgress} />
<Route path="/app/ui/navbar" exact component={UINavbar} />
<Route path="/app/ui/nav" exact component={UINav} />
<Route path="/app/grid" exact component={Grid} />
<Route path="/app/package" exact component={Package} />
<Route path="/app/forms" exact render={() => <Redirect to="/app/forms/elements" />} />
<Route path="/app/forms/elements" exact component={FormsElements} />
<Route path="/app/forms/validation" exact component={FormsValidation} />
<Route path="/app/forms/wizard" exact component={FormsWizard} />
<Route path="/app/charts/" exact render={() => <Redirect to="/app/charts/overview" />} />
<Route path="/app/charts/overview" exact component={Charts} />
<Route path="/app/charts/easy-pie" exact component={ChartsEasyPie} />
<Route path="/app/charts/morris" exact component={ChartsMorris} />
<Route path="/app/charts/flot" exact component={ChartsFlot} />
<Route path="/app/charts/sparkline" exact component={ChartsSparkline} />
<Route path="/app/charts/rickshaw" exact component={ChartsRickshaw} />
<Route path="/app/tables" exact render={() => <Redirect to="/app/tables/static" />} />
<Route path="/app/tables/static" exact component={TablesStatic} />
<Route path="/app/tables/dynamic" exact component={TablesDynamic} />
<Route path="/app/extra" exact render={() => <Redirect to="/app/extra/calendar" />} />
<Route path="/app/extra/calendar" exact component={ExtraCalendar} />
<Route path="/app/extra/invoice" exact component={ExtraInvoice} />
<Route path="/app/extra/search" exact component={ExtraSearch} />
<Route path="/app/extra/timeline" exact component={ExtraTimeline} />
<Route path="/app/extra/gallery" exact component={ExtraGallery} />
<Route path="/app/maps" exact render={() => <Redirect to="/app/maps/google" />} />
<Route path="/app/maps/google" exact component={MapsGoogle} />
<Route path="/app/maps/vector" exact component={MapsVector} />
<Route path="/app/core" exact render={() => <Redirect to="/app/core/typography" />} />
<Route path="/app/core/typography" exact component={CoreTypography} />
<Route path="/app/core/colors" exact component={CoreColors} />
<Route path="/app/core/grid" exact component={CoreGrid} />
<Route path="/app/main/" exact component={Main} />
<Route path="/app/subject" exact component={Subject} />
</Switch>
</CSSTransition>
</TransitionGroup>
<footer className={s.contentFooter}>
Sing App React Admin Dashboard Template - Made by <a href="https://flatlogic.com" rel="nofollow noopener noreferrer" target="_blank">Flatlogic</a>
OSS project
</footer>
</main>
</Hammer>
......@@ -245,6 +108,7 @@ function mapStateToProps(store) {
sidebarOpened: store.navigation.sidebarOpened,
sidebarStatic: store.navigation.sidebarStatic,
dashboardTheme: store.layout.dashboardTheme,
labelDataGroup: store.labelDataGroup,
};
}
......
/* eslint-env mocha */
/* eslint-disable padded-blocks, no-unused-expressions */
import React from 'react';
import { expect } from 'chai';
import { render } from 'enzyme';
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import App from '../App';
import Layout from './Layout';
const middlewares = [thunk];
const mockStore = configureStore(middlewares);
const initialState = {};
describe('Layout', () => {
it('renders children correctly', () => {
const store = mockStore(initialState);
const wrapper = render(
<App context={{ insertCss: () => {}, store }}>
<Layout>
<div className="child" />
</Layout>
</App>,
);
expect(wrapper.find('div.child').length).to.eq(1);
});
});
import React from 'react';
import {
ButtonGroup,
Button,
} from 'reactstrap';
import classnames from 'classnames';
import NotificationsDemo from './notifications-demo/Notifications';
import NewNotificationsDemo from './notifications-demo/NewNotifications';
import MessagesDemo from './notifications-demo/Messages';
import ProgressDemo from './notifications-demo/Progress';
import s from './Notifications.module.scss';
class Notifications extends React.Component {
constructor(props) {
super(props);
this.state = {
notificationsTabSelected: 1,
newNotifications: null,
isLoad: false,
};
}
changeNotificationsTab(tab) {
this.setState({
notificationsTabSelected: tab,
newNotifications: null,
});
}
loadNotifications() {
this.setState({
isLoad: true,
});
setTimeout(() => {
this.setState({
newNotifications: (<NewNotificationsDemo />),
isLoad: false,
});
}, 1500);
}
render() {
let notificationsTab;
switch (this.state.notificationsTabSelected) {
case 1:
notificationsTab = (<NotificationsDemo />);
break;
case 2:
notificationsTab = (<MessagesDemo />);
break;
case 3:
notificationsTab = (<ProgressDemo />);
break;
default:
notificationsTab = (<NotificationsDemo />);
break;
}
return (
<section className={`${s.notifications} card navbar-notifications`}>
<header className={[s.cardHeader, 'card-header'].join(' ')}>
<div className="text-center mb-sm">
<strong>You have 13 notifications</strong>
</div>
<ButtonGroup id="notification-buttons">
<Button color="secondary" onClick={() => this.changeNotificationsTab(1)} active={this.state.notificationsTabSelected === 1}>Notifications</Button>
<Button color="secondary" onClick={() => this.changeNotificationsTab(2)} active={this.state.notificationsTabSelected === 2}>Messages</Button>
<Button color="secondary" onClick={() => this.changeNotificationsTab(3)} active={this.state.notificationsTabSelected === 3}>Progress</Button>
</ButtonGroup>
</header>
{this.state.newNotifications || notificationsTab}
<footer className={[s.cardFooter, 'text-sm', 'card-footer'].join(' ')}>
<Button
color="link"
className={classnames({ disabled: this.state.isLoad }, s.btnNotificationsReload, 'btn-xs', 'float-right', 'py-0')}
onClick={() => this.loadNotifications()}
id="load-notifications-btn"
>
{this.state.isLoad ? <span><i className="la la-refresh la-spin" /> Loading...</span> : <i className="la la-refresh" />}
</Button>
<span className="fs-mini">Synced at: 21 Apr 2014 18:36</span>
</footer>
</section>
);
}
}
export default Notifications;
@import '../../styles/app';
.notifications {
@include media-breakpoint-up(md) {
width: 333px;
}
height: 100%;
border: none;
}
.cardHeader {
border-radius: 0;
}
.cardFooter {
padding-top: 14px;
padding-bottom: 14px;
}
.btnNotificationsReload {
color: $navbar-link-color;
outline: none;
i::before {
top: 2px;
}
}
@import '../../../styles/app';
.listGroup {
display: block;
height: 320px;
overflow-y: scroll;
.listGroupItem:first-child {
border: none;
}
}
.listGroupItem {
transition: background-color 0.15s ease-in-out;
text-decoration: none;
color: $gray-700;
border-left: none;
border-right: none;
display: block;
:global .progress {
transition: background 0.15s ease-in-out;
&:hover {
background: $black;
}
}
&:hover {
background-color: $list-group-hover-bg;
:global .progress {
background: $white !important;
}
}
&:first-child {
border-top: none;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
&:last-child {
border-bottom: none;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
.notificationIcon {
margin-right: 1rem;
float: left;
@include clearfix;
}
import React from 'react';
import {
ListGroup,
ListGroupItem,
} from 'reactstrap';
import a1 from '../../../images/people/a1.jpg';
import a2 from '../../../images/people/a2.jpg';
import a4 from '../../../images/people/a4.jpg';
import a6 from '../../../images/people/a6.jpg';
import avatar from '../../../images/avatar.png';
import s from './ListGroup.module.scss'; // eslint-disable-line
class MessagesDemo extends React.Component {
render() {
return (
<ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
<ListGroupItem className={[s.listGroupItem, 'bg-warning-light'].join(' ')}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a2} alt="..." />
<i className="status status-bottom bg-success" />
</span>
<time className="text-link help float-right">10 sec ago</time>
<h6 className="m-0 fw-bold mb-1">Chris Gray</h6>
<p className="deemphasize text-ellipsis m-0">Hey! What&apos;s up? So many times since we</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={avatar} alt="..." />
<i className="status status-bottom bg-success" />
</span>
<time className="text-link help float-right">2 min ago</time>
<h6 className="m-0 mb-1">Jamey Brownlow</h6>
<p className="deemphasize text-ellipsis m-0">Good news coming tonight. Seems they agreed to proceed</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a1} alt="..." />
<i className="status status-bottom bg-warning" />
</span>
<time className="text-link help float-right">9 min ago</time>
<h6 className="m-0 mb-1">Livia Walsh</h6>
<p className="deemphasize text-ellipsis m-0">Check out my latest email plz!</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={avatar} alt="..." />
<i className="status status-bottom bg-danger" />
</span>
<time className="text-link help float-right">12:56 AM</time>
<h6 className="m-0 mb-1">Jaron Fitzroy</h6>
<p className="deemphasize text-ellipsis m-0">What about summer break?</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a4} alt="..." />
<i className="status status-bottom bg-gray-light" />
</span>
<time className="text-link help float-right">Yesterday</time>
<h6 className="m-0 mb-1">Mike Lewis</h6>
<p className="deemphasize text-ellipsis m-0">Just ain&apos;t sure about the weekend now. 90% I&apos;ll make it.</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a6} alt="..." />
<i className="status status-bottom bg-success" />
</span>
<time className="text-link help float-right">Apr 23</time>
<h6 className="m-0 mb-1">Freda Edison</h6>
<p className="deemphasize text-ellipsis m-0">Hey what&apos;s up? Me and Monica going for a lunch somewhere. Wanna join?</p>
</ListGroupItem>
</ListGroup>
);
}
}
export default MessagesDemo;
import React from 'react';
import {
ListGroup,
ListGroupItem,
Button,
} from 'reactstrap';
import s from './ListGroup.module.scss';
import a3 from '../../../images/people/a3.jpg';
import a5 from '../../../images/people/a5.jpg';
import a6 from '../../../images/people/a6.jpg';
class NewNotificationsDemo extends React.Component {
render() {
return (
<ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
<ListGroupItem className={`${s.listGroupItem} bg-attention`}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-check text-success fa-lg" />
</span>
<p className="m-0 overflow-hidden">
2 issues require your approval.
{/* eslint-disable */}
&nbsp;<a href="#">The Search Project</a> completed on time!
{/* eslint-enable */}
<time className="help-block m-0">
just now
</time>
</p>
</ListGroupItem>
<ListGroupItem className={`${s.listGroupItem} bg-attention`}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a6} alt="..." />
</span>
<p className="m-0 overflow-hidden">
<button className="btn-link">Jeniffer Willington</button>has just endorsed you with 50 points!
<time className="help-block m-0">
30 sec ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a3} alt="..." />
</span>
<p className="m-0 overflow-hidden">
1 new user just signed up! Check out
{/* eslint-disable */}
&nbsp;<a href="#">Monica Smith</a>'s account.
{/* eslint-enable */}
<time className="help-block m-0">
2 mins ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="glyphicon glyphicon-upload fa-lg" />
</span>
<p className="text-ellipsis m-0">
2.1.0-pre-alpha just released.
<time className="help-block m-0">
5h ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-bolt fa-lg" />
</span>
<p className="text-ellipsis m-0 overflow-hidden">
Server load limited.
<time className="help-block m-0">
7h ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a5} alt="..." />
</span>
<p className="m-0 overflow-hidden">
{/* eslint-disable */}
User <a href="#">Jeff</a> registered
{/* eslint-enable */}
&nbsp;&nbsp;
<Button size="xs" color="success" className="mr-1">Allow</Button>
<Button size="xs" color="danger">Deny</Button>
<time className="help-block m-0">
12:18 AM
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-shield fa-lg" />
</span>
<p className="m-0 overflow-hidden">
{/* eslint-disable */}
Instructions for changing your Envato Account password. Please
check your account <a href="#">security page</a>.
{/* eslint-enable */}
<time className="help-block m-0">
12:18 AM
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<span className="rounded bg-primary rounded-lg">
<i className="fa fa-facebook text-white" />
</span>
</span>
<p className="text-ellipsis m-0">
New <strong>76</strong> facebook likes received.
<time className="help-block m-0">
15 Apr 2014
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<span className="circle circle-lg bg-gray-dark">
<i className="fa fa-circle-o text-white" />
</span>
</span>
<p className="text-ellipsis m-0">
Dark matter detected.
<time className="help-block m-0">
15 Apr 2014
</time>
</p>
</ListGroupItem>
</ListGroup>
);
}
}
export default NewNotificationsDemo;
import React from 'react';
import {
ListGroup,
ListGroupItem,
Button,
} from 'reactstrap';
import s from './ListGroup.module.scss';
import a3 from '../../../images/people/a3.jpg';
import a5 from '../../../images/people/a5.jpg';
class NotificationsDemo extends React.Component {
render() {
return (
<ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a3} alt="..." />
</span>
<p className="m-0 overflow-hidden">
1 new user just signed up! Check out
{/* eslint-disable */}
&nbsp;<a href="#">Monica Smith</a>'s account.
{/* eslint-enable */}
<time className="help-block m-0">
2 mins ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="glyphicon glyphicon-upload fa-lg" />
</span>
<p className="text-ellipsis m-0">
2.1.0-pre-alpha just released.
<time className="help-block m-0">
5h ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-bolt fa-lg" />
</span>
<p className="text-ellipsis m-0 overflow-hidden">
Server load limited.
<time className="help-block m-0">
7h ago
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<img className="rounded-circle" src={a5} alt="..." />
</span>
<p className="m-0 overflow-hidden">
{/* eslint-disable */}
User <a href="#">Jeff</a> registered
{/* eslint-enable */}
&nbsp;&nbsp;
<Button size="xs" color="success" className="mr-1">Allow</Button>
<Button size="xs" color="danger">Deny</Button>
<time className="help-block m-0">
12:18 AM
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<i className="fa fa-shield fa-lg" />
</span>
<p className="m-0 overflow-hidden">
{/* eslint-disable */}
Instructions for changing your Envato Account password. Please
check your account <a href="#">security page</a>.
{/* eslint-enable */}
<time className="help-block m-0">
12:18 AM
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<span className="rounded bg-primary rounded-lg">
<i className="fa fa-facebook text-white" />
</span>
</span>
<p className="text-ellipsis m-0">
New <strong>76</strong> facebook likes received.
<time className="help-block m-0">
15 Apr 2014
</time>
</p>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
<span className="circle circle-lg bg-gray-dark">
<i className="fa fa-circle-o text-white" />
</span>
</span>
<p className="text-ellipsis m-0">
Dark matter detected.
<time className="help-block m-0">
15 Apr 2014
</time>
</p>
</ListGroupItem>
</ListGroup>
);
}
}
export default NotificationsDemo;
import React from 'react';
import {
ListGroup,
ListGroupItem,
Progress,
UncontrolledTooltip,
} from 'reactstrap';
import s from './ListGroup.module.scss'; // eslint-disable-line
class ProgressDemo extends React.Component {
render() {
return (
<ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">60%</span>
<h6 className="m-0 mb-1 text-gray">
<strong>Urgent:</strong>
&nbsp;Rails 4.1.0 upgrade
</h6>
<Progress className={['m-0'].join(' ')} color="primary" value="60" />
<span className="help-block">3 notes added by James 2h ago...</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">83%</span>
<h6 className="m-0 mb-1 text-gray">
<strong>Primary:</strong>
&nbsp;Sing Web App
</h6>
<Progress className={['progress-sm', 'm-0'].join(' ')} color="success" value="83" />
<span className="help-block">verifying stable probability status</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">44%</span>
<h6 className="m-0 mb-1">
<span className="circle bg-gray-dark text-warning" id="TooltipQuestion">
<i className="fa fa-question" />
</span>
<UncontrolledTooltip placement="bottom" target="TooltipQuestion">
2 issues require your attention
</UncontrolledTooltip>
&nbsp;
Finish The Road to Hell Song
</h6>
<Progress className={['progress-sm', 'm-0'].join(' ')} color="gray-dark" value="44" />
<span className="help-block">last update: 2h ago</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">86%</span>
<h6 className="m-0 mb-1 deemphasize text-gray">
Complete project planning
</h6>
<Progress className={['progress-xs', 'm-0'].join(' ')} color="danger" value="86" />
<span className="help-block">no, no way this is not working...</span>
</ListGroupItem>
<ListGroupItem className={s.listGroupItem}>
<span className="text-muted float-right">100%</span>
<h6 className="m-0 mb-1 deemphasize text-gray">
<strong>Completed:</strong>
&nbsp;Instruct newbies on coding standards
</h6>
<Progress className={['progress-xs', 'm-0'].join(' ')} color="primary" value="100" />
<span className="help-block">last update: April 22, 2014 2:36 pm</span>
</ListGroupItem>
</ListGroup>
);
}
}
export default ProgressDemo;
......@@ -9,7 +9,7 @@
a {
display: block;
color: var(--sidebar-color);
color: #a6b2c1;
text-decoration: none;
cursor: pointer;
......
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Progress, Alert } from 'reactstrap';
import { withRouter } from 'react-router-dom';
import { dismissAlert } from '../../actions/alerts';
import s from './Sidebar.module.scss';
import LinksGroup from './LinksGroup/LinksGroup';
import { openSidebar, closeSidebar, changeActiveSidebarItem } from '../../actions/navigation';
import isScreen from '../../core/screenHelper';
import { logoutUser } from '../../actions/user';
class Sidebar extends React.Component {
static propTypes = {
......@@ -30,10 +27,8 @@ class Sidebar extends React.Component {
constructor(props) {
super(props);
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
this.doLogout = this.doLogout.bind(this);
}
onMouseEnter() {
......@@ -52,14 +47,6 @@ class Sidebar extends React.Component {
}
}
dismissAlert(id) {
this.props.dispatch(dismissAlert(id));
}
doLogout() {
this.props.dispatch(logoutUser());
}
render() {
return (
<nav
......@@ -67,387 +54,36 @@ class Sidebar extends React.Component {
className={[s.root, this.props.sidebarStatic ? s.staticSidebar : '', !this.props.sidebarOpened ? s.sidebarClose : ''].join(' ')}
>
<header className={s.logo}>
<a href="https://demo.flatlogic.com/sing-app/"><span className="text-warning">Sing</span> App</a>
<img src="/images/emergency.png" style={{width: '112px', padding: '7px'}} alt="Emergency Inc. logo"/>
</header>
<ul className={s.nav}>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Dashboard"
header="영상 분석"
isHeader
iconName="flaticon-home"
iconName="flaticon-record"
link="/app/main"
index="main"
childrenLinks={[
{
header: 'Analytics', link: '/app/main/analytics',
header: 'Phone', link: '/app/file/phone',
},
{
header: 'Visits', link: '/app/main/dashboard',
},
{
header: 'Widgets', link: '/app/main/widgets',
header: 'RaspberryPi', link: '/app/file/raspberrypi',
},
]}
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="E-commerce"
isHeader
iconName="flaticon-diamond"
link="/app/ecommerce"
index="ecommerce"
label="NodeJS"
labelColor="danger"
exact={false}
childrenLinks={[
{
header: 'Product Management', link: '/app/ecommerce/management',
},
{
header: 'Products Grid', link: '/app/ecommerce/products',
},
{
header: 'Product Page', link: '/app/ecommerce/product',
},
]}
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Sing Package"
link="/app/package"
isHeader
iconName="flaticon-database-1"
index="packages"
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Profile"
link="/app/profile"
header="사진 등록"
isHeader
iconName="flaticon-user"
index="profile"
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Email"
link="/app/inbox"
isHeader
iconName="flaticon-paper-plane"
index="inbox"
badge="9"
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Documentation"
link="/documentation"
isHeader
iconName="flaticon-file"
index="documentation"
label="new"
target="_blank"
/>
<h5 className={[s.navTitle, s.groupTitle].join(' ')}>TEMPLATE</h5>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Core"
isHeader
iconName="flaticon-network"
link="/app/core"
index="core"
childrenLinks={[
{
header: 'Typography', link: '/app/core/typography',
},
{
header: 'Colors', link: '/app/core/colors',
},
{
header: 'Grid', link: '/app/core/grid',
},
]}
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="UI Elements"
isHeader
iconName="flaticon-layers"
link="/app/ui"
index="ui"
childrenLinks={[
{
header: 'Alerts', link: '/app/ui/alerts',
},
{
header: 'Badge', link: '/app/ui/badge',
},
{
header: 'Buttons', link: '/app/ui/buttons',
},
{
header: 'Card', link: '/app/ui/card',
},
{
header: 'Carousel', link: '/app/ui/carousel',
},
{
header: 'Jumbotron', link: '/app/ui/jumbotron',
},
{
header: 'Icons', link: '/app/ui/icons',
},
{
header: 'List Groups', link: '/app/ui/list-groups',
},
{
header: 'Modal', link: '/app/ui/modal',
},
{
header: 'Nav', link: '/app/ui/nav',
},
{
header: 'Navbar', link: '/app/ui/navbar',
},
{
header: 'Notifications', link: '/app/ui/notifications',
},
{
header: 'Pagination', link: '/app/tables/dynamic',
},
{
header: 'Popovers & Tooltips', link: '/app/ui/popovers',
},
{
header: 'Progress', link: '/app/ui/progress',
},
{
header: 'Tabs & Accordion', link: '/app/ui/tabs-accordion',
},
]}
link="/app/subject"
index="subject"
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Forms"
isHeader
iconName="flaticon-list"
link="/app/forms"
index="forms"
childrenLinks={[
{
header: 'Forms Elements', link: '/app/forms/elements',
},
{
header: 'Forms Validation', link: '/app/forms/validation',
},
{
header: 'Forms Wizard', link: '/app/forms/wizard',
},
]}
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Charts"
link="/app/charts"
isHeader
iconName="flaticon-controls"
index="charts"
childrenLinks={[
{
header: 'Charts Overview', link: '/app/charts/overview',
},
{
header: 'Flot Charts', link: '/app/charts/flot',
},
{
header: 'Morris Charts', link: '/app/charts/morris',
},
{
header: 'Rickshaw Charts', link: '/app/charts/rickshaw',
},
{
header: 'Sparkline Charts', link: '/app/charts/sparkline',
},
{
header: 'Easy Pie Charts', link: '/app/charts/easy-pie',
},
]}
/>
<LinksGroup
header="Grid"
link="/app/grid"
isHeader
iconName="flaticon-menu-4"
/>
<LinksGroup
onActiveSidebarItemChange={t => this.props.dispatch(changeActiveSidebarItem(t))}
activeItem={this.props.activeItem}
header="Tables"
isHeader
iconName="flaticon-map-location"
link="/app/tables"
index="tables"
childrenLinks={[
{
header: 'Tables Basic', link: '/app/tables/static',
},
{
header: 'Tables Dynamic', link: '/app/tables/dynamic',
},
]}
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Maps"
isHeader
iconName="flaticon-equal-1"
link="/app/maps"
index="maps"
childrenLinks={[
{
header: 'Google Maps', link: '/app/maps/google',
},
{
header: 'Vector Map', link: '/app/maps/vector',
},
]}
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Extra"
isHeader
iconName="flaticon-star"
link="/app/extra"
index="extra"
childrenLinks={[
{
header: 'Calendar', link: '/app/extra/calendar',
},
{
header: 'Invoice', link: '/app/extra/invoice',
},
{
header: 'Login Page', link: '/login', onClick: this.doLogout,
},
{
header: 'Error Page', link: '/error',
},
{
header: 'Gallery', link: '/app/extra/gallery',
},
{
header: 'Search Result', link: '/app/extra/search',
},
{
header: 'Time line', link: '/app/extra/timeline',
},
]}
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Menu Levels"
isHeader
iconName="flaticon-folder-10"
link="/app/menu"
index="menu"
childrenLinks={[
{
header: 'Level 1.1', link: '/app/menu/level1',
},
{
header: 'Level 1.2',
link: '/app/menu/level_12',
index: 'level_12',
childrenLinks: [
{
header: 'Level 2.1',
link: '/app/menu/level_12/level_21',
index: 'level_21',
},
{
header: 'Level 2.2',
link: '/app/menu/level_12/level_22',
index: 'level_22',
childrenLinks: [
{
header: 'Level 3.1',
link: '/app/menu/level_12/level_22/level_31',
index: 'level_31',
},
{
header: 'Level 3.2',
link: '/app/menu/level_12/level_22/level_32',
index: 'level_32 ',
},
],
},
{
header: 'Level 2.3',
link: '/app/menu/level_12/level_23',
index: 'level_23',
},
],
},
]}
/>
</ul>
<h5 className={s.navTitle}>
LABELS
{/* eslint-disable-next-line */}
<a className={s.actionLink}>
<i className={`${s.glyphiconSm} glyphicon glyphicon-plus float-right`} />
</a>
</h5>
{/* eslint-disable */}
<ul className={s.sidebarLabels}>
<li>
<a href="#">
<i className="fa fa-circle text-warning mr-2" />
<span className={s.labelName}>My Recent</span>
</a>
</li>
<li>
<a href="#">
<i className="fa fa-circle text-gray mr-2" />
<span className={s.labelName}>Starred</span>
</a>
</li>
<li>
<a href="#">
<i className="fa fa-circle text-danger mr-2" />
<span className={s.labelName}>Background</span>
</a>
</li>
</ul>
{/* eslint-enable */}
<h5 className={s.navTitle}>
PROJECTS
</h5>
<div className={s.sidebarAlerts}>
{this.props.alertsList.map(alert => // eslint-disable-line
<Alert
key={alert.id}
className={s.sidebarAlert} color="transparent"
isOpen={true} // eslint-disable-line
toggle={() => { this.dismissAlert(alert.id); }}
>
<span>{alert.title}</span><br />
<Progress className={`${s.sidebarProgress} progress-xs mt-1`} color={alert.color} value={alert.value} />
<small>{alert.footer}</small>
</Alert>,
)}
</div>
</nav >
);
}
......@@ -457,7 +93,6 @@ function mapStateToProps(store) {
return {
sidebarOpened: store.navigation.sidebarOpened,
sidebarStatic: store.navigation.sidebarStatic,
alertsList: store.alerts.alertsList,
activeItem: store.navigation.activeItem,
};
}
......
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
const Skycons = require('skycons')(window || {});
class Skycon extends React.Component {
static propTypes = {
color: PropTypes.string.isRequired,
autoPlay: PropTypes.bool,
icon: PropTypes.oneOf([ // eslint-disable-line
'CLEAR_DAY',
'CLEAR_NIGHT',
'PARTLY_CLOUDY_DAY',
'PARTLY_CLOUDY_NIGHT',
'CLOUDY',
'RAIN',
'SLEET',
'SNOW',
'WIND',
'FOG',
]),
width: PropTypes.string.isRequired,
height: PropTypes.string.isRequired,
};
static defaultProps = {
color: null,
autoPlay: true,
width: '100%',
height: '100%',
};
constructor(props) {
super(props);
this.state = {
skycons: new Skycons({ color: this.props.color }),
};
}
componentDidMount() {
const { skycons } = this.state;
skycons.add(ReactDOM.findDOMNode(this), Skycons[this.props.icon]); // eslint-disable-line
if (this.props.autoPlay) {
skycons.play();
}
}
componentWillReceiveProps(nextProps) {
this.state.skycons.set(ReactDOM.findDOMNode(this), Skycons[nextProps.icon]); // eslint-disable-line
}
play() {
this.state.skycons.play();
}
pause() {
this.state.skycons.pause();
}
render() {
const {
...restPops
} = this.props;
return (
<canvas width={this.props.width} height={this.props.height} {...restPops} />
);
}
}
export default Skycon;
import React from 'react';
import $ from 'jquery';
import PropTypes from 'prop-types';
/* eslint-disable */
import 'imports-loader?jQuery=jquery,this=>window!jquery-sparkline';
/* eslint-enable */
class Sparklines extends React.Component {
static propTypes = {
data: PropTypes.arrayOf(
PropTypes.arrayOf(PropTypes.number),
),
options: PropTypes.oneOfType([
PropTypes.arrayOf(
PropTypes.shape({
type: PropTypes.string.isRequired,
}),
),
PropTypes.shape({
type: PropTypes.string.isRequired,
}),
]),
};
static defaultProps = {
data: [],
options: {},
};
componentDidMount() {
this.initSparkline();
}
initSparkline() {
const $el = $(this.sparklineRef);
const model = $.type(this.data) === 'string' ?
this.props.data.replace(/(^,)|(,$)/g, '')
: this.props.data;
const options = this.props.options;
if ($.type(model) === 'array' && $.type(options) === 'array') {
options.forEach((singleOptions, i) => {
if (i === 0) {
$el.sparkline(model[i], singleOptions);
} else { // set composite for next calls
$el.sparkline(model[i], $.extend({ composite: true }, singleOptions));
}
});
} else {
const data = $.type(model) === 'array' ? model : model.split(',');
$el.sparkline(data, options);
}
}
render() {
return (
<div
className="sparkline" ref={(r) => {
this.sparklineRef = r;
}}
/>
);
}
}
export default Sparklines;
const hostApi = process.env.NODE_ENV === "development" ? "http://localhost" : "https://flatlogic-node-backend.herokuapp.com";
const portApi = process.env.NODE_ENV === "development" ? 8080 : "";
const hostApi = process.env.NODE_ENV === "development" ? "http://localhost" : "http://localhost";
const portApi = process.env.NODE_ENV === "development" ? 8080 : 4000;
const baseURLApi = `${hostApi}${portApi ? `:${portApi}` : ``}`;
export default {
......
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Bundle extends Component {
static propTypes = {
load: PropTypes.func.isRequired,
children: PropTypes.func.isRequired,
};
static generateBundle = loadModule => () => (
/* eslint-disable */
<Bundle load={loadModule}>
{Mod => Mod ? <Mod /> : <div style={{ textAlign: 'center', paddingTop: '35vh' }}>Loading</div>}
</Bundle>
/* eslint-enable */
);
state = {
// short for "module" but that's a keyword in js, so "mod"
mod: null,
};
componentWillMount() {
this.load(this.props);
}
componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps);
}
}
load(props) {
this.setState({
mod: null,
});
props.load((mod) => {
this.setState({
// handle both es imports and cjs
mod: mod.default ? mod.default : mod,
});
});
}
render() {
return this.props.children(this.state.mod);
}
}
export default Bundle;
const config = {
name: 'sing',
title: 'Sing Dashboard App built with React JS by Flatlogic',
name: 'Video Emergency Detection',
title: 'Video Emergency Detection',
version: '3.8.0',
settings: {
screens: {
......
import React, { Component } from 'react';
import hoistStatics from 'hoist-non-react-statics';
import { updateMeta } from '../DOMUtils';
import { defaultMeta } from '../config';
function withMeta(ComposedComponent) {
class WithMeta extends Component {
componentWillMount() {
if (ComposedComponent.meta) {
Object.keys(ComposedComponent.meta).forEach((metaKey) => {
if (metaKey === 'title') {
document.title = `${ComposedComponent.meta[metaKey]} - ${defaultMeta[metaKey]}`;
return;
}
updateMeta(metaKey, ComposedComponent.meta[metaKey]);
});
}
}
componentWillUnmount() {
Object.keys(defaultMeta).forEach((metaKey) => {
if (metaKey === 'title') {
document.title = defaultMeta[metaKey];
return;
}
updateMeta(metaKey, defaultMeta[metaKey]);
});
}
render() {
return <ComposedComponent {...this.props} />;
}
}
WithMeta.ComposedComponent = ComposedComponent;
return hoistStatics(WithMeta, ComposedComponent);
}
export default withMeta;
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Link } from 'react-router-dom';
import { withRouter } from 'react-router';
import {
Navbar,
Nav,
NavItem,
NavLink,
} from 'reactstrap';
import { openSidebar, closeSidebar, changeActiveSidebarItem } from '../actions/navigation';
import s from '../components/Header/Header.module.scss'; // eslint-disable-line css-modules/no-unused-class
import sd from './styles.module.scss';
import twitterLogo from '../images/documentation/twitter-logo.svg';
import dribbleLogo from '../images/documentation/dribble-logo.svg';
import facebookLogo from '../images/documentation/facebook-logo.svg';
import instagramLogo from '../images/documentation/instagram-logo.svg';
import linkedinLogo from '../images/documentation/linkedin-logo.svg';
import githubLogo from '../images/documentation/github-logo.svg';
class Header extends React.Component {
static propTypes = {
sidebarOpened: PropTypes.bool.isRequired,
sidebarStatic: PropTypes.bool.isRequired,
chatToggle: PropTypes.func.isRequired,
dispatch: PropTypes.func.isRequired,
location: PropTypes.shape({
pathname: PropTypes.string,
}).isRequired,
};
constructor(props) {
super(props);
this.toggleMenu = this.toggleMenu.bind(this);
this.switchSidebar = this.switchSidebar.bind(this);
this.state = {
menuOpen: false,
notificationsOpen: false,
notificationsTabSelected: 1,
};
}
// collapse/uncolappse
switchSidebar() {
if (this.props.sidebarOpened) {
this.props.dispatch(closeSidebar());
this.props.dispatch(changeActiveSidebarItem(null));
} else {
const paths = this.props.location.pathname.split('/');
paths.pop();
this.props.dispatch(openSidebar());
this.props.dispatch(changeActiveSidebarItem(paths.join('/')));
}
}
toggleMenu() {
this.setState({
menuOpen: !this.state.menuOpen,
});
}
render() {
return (
<Navbar className={classnames(s.root, sd.header, 'd-print-none')}>
<div className="container">
<div className="row w-100 d-flex align-items-center">
<Nav>
<NavItem>
<NavLink className="fs-lg d-lg-none d-md-none" onClick={this.switchSidebar}>
<span className="rounded rounded-lg text-white d-md-none"><i className="la la-bars" /></span>
<i className="la la-bars ml-3 d-sm-down-none" />
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames(s.logo, 'd-sm-down-none px-4')} href={'/documentation'}>
<span className={'fw-semi-bold'}>Sing App React</span> &nbsp; Documentation
</NavLink>
</NavItem>
</Nav>
<NavLink className={`${s.navbarBrand} d-md-none text-muted`}>
<i className="fa fa-circle text-gray mr-n-sm" />
<i className="fa fa-circle text-warning" />
&nbsp;
documentation
&nbsp;
<i className="fa fa-circle text-warning mr-n-sm" />
<i className="fa fa-circle text-muted" />
</NavLink>
<Nav className="ml-auto">
<NavItem className="d-flex alight-items-center d-md-down-none">
<NavLink href="https://twitter.com/flatlogic" className="mr-1">
<img src={twitterLogo} alt="twitter" />
</NavLink>
<NavLink href="https://dribbble.com/flatlogic" className="mr-1">
<img src={dribbleLogo} alt="dribble" />
</NavLink>
<NavLink href="https://dribbble.com/flatlogic" className="mr-1">
<img src={facebookLogo} alt="facebook" />
</NavLink>
<NavLink href="https://instagram.com/flatlogiccom/" className="mr-1">
<img src={instagramLogo} alt="instagram" />
</NavLink>
<NavLink href="https://www.linkedin.com/company/flatlogic/" className="mr-1">
<img src={linkedinLogo} alt="linkedin" />
</NavLink>
<NavLink href="https://github.com/flatlogic" className="mr-3">
<img src={githubLogo} alt="github" />
</NavLink>
</NavItem>
<NavItem className="d-flex align-items-center">
<NavItem className="d-md-down-none">
<Link to="/" className="btn btn-default">
Live Preview
</Link>
</NavItem>
<NavLink href="https://flatlogic.com/admin-dashboards/sing-app-react" target="_blank" className="mr-1">
<button className="btn btn-warning text-gray fw-semi-bold">
Buy Now
</button>
</NavLink>
</NavItem>
</Nav>
</div>
</div>
</Navbar>
);
}
}
function mapStateToProps(store) {
return {
sidebarOpened: store.navigation.sidebarOpened,
sidebarStatic: store.navigation.sidebarStatic,
};
}
export default withRouter(connect(mapStateToProps)(Header));
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Col } from 'reactstrap';
import classnames from 'classnames';
import { Switch, Route, withRouter } from 'react-router';
import Hammer from 'rc-hammerjs';
import Header from './DocumentationHeader';
import Sidebar from './DocumentationSidebar';
import { openSidebar, closeSidebar, changeActiveSidebarItem, toggleSidebar } from '../actions/navigation';
import s from '../components/Layout/Layout.module.scss';
import sd from './styles.module.scss';
import Overview from './pages/getting-started/Overview'
import Licences from './pages/getting-started/Licences';
import QuickStart from './pages/getting-started/QuickStart';
import Alerts from './pages/components/Alerts';
import Badge from './pages/components/Badge';
import Buttons from './pages/components/Buttons';
import Card from './pages/components/Card';
import Carousel from './pages/components/Carousel';
import Modal from './pages/components/Modal';
import Nav from './pages/components/Nav';
import Navbar from './pages/components/Navbar';
import Popovers from './pages/components/Popovers';
import Progress from './pages/components/Progress';
import Tabs from './pages/components/Tabs';
import Libs from './pages/Libs';
import Pages from './pages/Pages';
class Layout extends React.Component {
static propTypes = {
sidebarStatic: PropTypes.bool,
sidebarOpened: PropTypes.bool,
dispatch: PropTypes.func.isRequired,
};
static defaultProps = {
sidebarStatic: false,
sidebarOpened: false,
};
constructor(props) {
super(props);
this.handleSwipe = this.handleSwipe.bind(this);
this.state = {
chatOpen: false,
width: window.innerWidth,
};
}
componentDidMount() {
const staticSidebar = JSON.parse(localStorage.getItem('staticSidebar'));
if (staticSidebar) {
this.props.dispatch(toggleSidebar());
} else if (this.props.sidebarOpened) {
setTimeout(() => {
this.props.dispatch(closeSidebar());
this.props.dispatch(changeActiveSidebarItem(null));
}, 2500);
}
window.addEventListener('resize', this.handleResize.bind(this));
}
handleResize() {
this.setState({
width: window.innerWidth,
})
if(window.innerWidth < 768 && this.props.sidebarOpened) {
this.props.dispatch(closeSidebar());
}
}
handleSwipe(e) {
if ('ontouchstart' in window) {
if (e.direction === 4 && !this.state.chatOpen) {
this.props.dispatch(openSidebar());
return;
}
if (e.direction === 2 && this.props.sidebarOpened) {
this.props.dispatch(closeSidebar());
return;
}
}
}
render() {
return (
<div
className={[
s.root,
sd.root,
this.state.width > 768 && s.sidebarStatic,
this.state.width < 768 && !this.props.sidebarOpened ? s.sidebarClose : '',
].join(' ')}
>
<Header />
<div>
<Hammer onSwipe={this.handleSwipe}>
<main className={classnames(s.content, sd.content)}>
<div className="container">
<div className="row">
<Sidebar width={this.state.width} />
<Col xl={10} md={9}>
<Switch>
<Route path="/documentation/getting-started/overview" exact component={Overview} />
<Route path="/documentation/getting-started/licences" exact component={Licences} />
<Route path="/documentation/getting-started/quick-start" exact component={QuickStart} />
<Route path="/documentation/components/alerts" exact component={Alerts} />
<Route path="/documentation/components/badge" exact component={Badge} />
<Route path="/documentation/components/buttons" exact component={Buttons} />
<Route path="/documentation/components/card" exact component={Card} />
<Route path="/documentation/components/carousel" exact component={Carousel} />
<Route path="/documentation/components/modal" exact component={Modal} />
<Route path="/documentation/components/nav" exact component={Nav} />
<Route path="/documentation/components/navbar" exact component={Navbar} />
<Route path="/documentation/components/popovers" exact component={Popovers} />
<Route path="/documentation/components/tabs-accordion" exact component={Tabs} />
<Route path="/documentation/components/progress" exact component={Progress} />
<Route path="/documentation/libs" exact component={Libs} />
<Route path="/documentation/pages" exact component={Pages} />
</Switch>
</Col>
</div>
</div>
</main>
</Hammer>
</div>
</div>
);
}
}
function mapStateToProps(store) {
return {
sidebarOpened: store.navigation.sidebarOpened,
sidebarStatic: store.navigation.sidebarStatic,
};
}
export default withRouter(connect(mapStateToProps)(Layout));
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { connect } from 'react-redux';
import { Col } from 'reactstrap';
import { withRouter } from 'react-router-dom';
import s from '../components/Sidebar/Sidebar.module.scss';
import sd from './styles.module.scss'
import { LinksGroup } from './components';
import { openSidebar, closeSidebar, changeActiveSidebarItem } from '../actions/navigation';
import isScreen from '../core/screenHelper';
class Sidebar extends React.Component {
static propTypes = {
sidebarStatic: PropTypes.bool,
sidebarOpened: PropTypes.bool,
dispatch: PropTypes.func.isRequired,
activeItem: PropTypes.string,
location: PropTypes.shape({
pathname: PropTypes.string,
}).isRequired,
};
static defaultProps = {
sidebarStatic: false,
sidebarOpened: false,
activeItem: '',
};
constructor(props) {
super(props);
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
}
onMouseEnter() {
if (!this.props.sidebarStatic && (isScreen('lg') || isScreen('xl'))) {
const paths = this.props.location.pathname.split('/');
paths.pop();
this.props.dispatch(openSidebar());
this.props.dispatch(changeActiveSidebarItem(paths.join('/')));
}
}
onMouseLeave() {
if (!this.props.sidebarStatic && (isScreen('lg') || isScreen('xl'))) {
this.props.dispatch(closeSidebar());
this.props.dispatch(changeActiveSidebarItem(null));
}
}
render() {
return (
<Col xl={2} md={3}>
<nav
className={[s.root, sd.sidebar, this.props.width > 768 && s.staticSidebar].join(' ')}
>
<ul className={classnames(s.nav, sd.nav)}>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Getting Started"
isHeader
link="/documentation/getting-started"
index="getting-started"
childrenLinks={[
{
header: 'Overview', link: '/documentation/getting-started/overview',
},
{
header: 'Licences', link: '/documentation/getting-started/licences',
},
{
header: 'Quick Start', link: '/documentation/getting-started/quick-start',
}
]}
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Pages"
isHeader
link="/documentation/pages"
index="pages"
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Components"
isHeader
link="/documentation/components"
index="components"
childrenLinks={[
{
header: 'Alerts', link: '/documentation/components/alerts',
},
{
header: 'Badge', link: '/documentation/components/badge',
},
{
header: 'Buttons', link: '/documentation/components/buttons',
},
{
header: 'Card', link: '/documentation/components/card',
},
{
header: 'Carousel', link: '/documentation/components/carousel',
},
{
header: 'Modal', link: '/documentation/components/modal',
},
{
header: 'Nav', link: '/documentation/components/nav',
},
{
header: 'Navbar', link: '/documentation/components/navbar',
},
{
header: 'Popovers & Tooltips', link: '/documentation/components/popovers',
},
{
header: 'Progress', link: '/documentation/components/progress',
},
{
header: 'Tabs & Accordion', link: '/documentation/components/tabs-accordion',
},
]}
/>
<LinksGroup
onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
activeItem={this.props.activeItem}
header="Libs"
isHeader
link="/documentation/libs"
index="libs"
/>
{/*<LinksGroup*/}
{/*onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}*/}
{/*activeItem={this.props.activeItem}*/}
{/*header="FAQ"*/}
{/*isHeader*/}
{/*link="/documentation/faq"*/}
{/*index="faq"*/}
{/*childrenLinks={[*/}
{/*{*/}
{/*header: 'Analytics', link: '/app/main/analytics',*/}
{/*}*/}
{/*]}*/}
{/*/>*/}
</ul>
<a className={classnames('d-md-down-none', sd.company)} href="http://flatlogic.com/" target="_blank" rel="noopener noreferrer">
<img alt="company logo" src="https://cdn.dribbble.com/users/883507/avatars/small/7ca04141e335237d393ab41008adb46d.png?1509465697"/>
Proudly built and maintained by <br/> Flatlogic
</a>
</nav >
</Col>
);
}
}
function mapStateToProps(store) {
return {
sidebarOpened: store.navigation.sidebarOpened,
sidebarStatic: store.navigation.sidebarStatic,
alertsList: store.alerts.alertsList,
activeItem: store.navigation.activeItem,
};
}
export default withRouter(connect(mapStateToProps)(Sidebar));
import React from 'react';
import LinksGroupComponent from '../../components/Sidebar/LinksGroup/LinksGroup'
import s from './styles.module.scss';
export const LinksGroup = (props) => (
<div className={s.linksGroupWrapper}>
<LinksGroupComponent {...props} />
</div>
);
.linksGroupWrapper :global(.collapse ul),
.linksGroupWrapper :global(.collapsing ul),
.linksGroupWrapper :global(li > a):hover {
background: #FFFBF8 !important;
}
.linksGroupWrapper :global(li > a) {
color: #495057 !important;
}
import React, {Component} from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem, Button } from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
import ReactBootstrapSlider from 'react-bootstrap-slider';
import {Sparklines, SparklinesBars} from "react-sparklines";
import ColorPiker from 'rc-color-picker';
import TextareaAutosize from 'react-autosize-textarea';
import DateTime from 'react-datetime';
import { Editor } from 'react-draft-wysiwyg';
import MaskedInput from 'react-maskedinput'
import Select2 from 'react-select2-wrapper';
import Scrollspy from './ScrollSpyComponent';
import { Link } from 'react-router-dom';
import Widget from '../../components/Widget/Widget';
import s from '../../pages/forms/elements/Elements.module.scss';
import Skycon from "../../components/Skycon/Skycon";
export default class Libs extends Component {
state = {
mde: '',
};
onMdeChange(value) {
this.setState({
mde: value,
})
};
render() {
return (
<Row className={s.root}>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem active>Libs</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<Widget id="Animate.css">
<h3>Animate.css</h3>
<p>animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great
for emphasis, home pages, sliders, and general just-add-water-awesomeness.</p>
<h4>Example</h4>
<h1 className="animated infinite fadeIn slow mt mb">Fade in</h1>
<SyntaxHighlighter language='javascript'
style={tomorrow}>{'<h1 class="animated infinite fadeIn slow">Fade in</h1>'}</SyntaxHighlighter>
<p>For more examples please refer to <a href="https://github.com/daneden/animate.css/"
target="_blank" rel="noopener noreferrer">Animate.css</a></p>
</Widget>
<Widget id="Bootstrap-slide">
<h3>Bootstrap-slide & React-bootstrap-slider</h3>
<p>A complete rewrite of the original bootstrap-slider by Stefan Petre.</p>
<h4>Example</h4>
<ReactBootstrapSlider
value={4}
step={2}
max={10}
min={0}
orientation="horizontal"
/>
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<ReactBootstrapSlider\n' +
' value={4}\n' +
' step={2}\n' +
' max={10}\n' +
' min={0}\n' +
' orientation="horizontal"\n' +
'/>'}</SyntaxHighlighter>
<p>For more examples and documentation please refer to <a
href="https://github.com/brownieboy/react-bootstrap-slider" target="_blank" rel="noopener noreferrer">React Bootstrap Slider</a></p>
</Widget>
<Widget id="Easy-pie-chart">
<h3>Easy-pie-chart</h3>
<p>Lightweight plugin to render simple, animated and retina optimized pie charts.</p>
<p className="lead">Want to see examples? <Link to="/app/charts/easy-pie">Click</Link></p>
<p>For more examples and documentation please refer to <a href="https://github.com/rendro/easy-pie-chart"
target="_blank" rel="noopener noreferrer">Easy Pie Charts</a></p>
</Widget>
<Widget id="Flot">
<h3>Flot & React-flot</h3>
<p>Flot is a Javascript plotting library for jQuery.</p>
<p className="lead">Want to see examples? <Link to="/app/charts/flot">Click</Link></p>
<p>For more examples and documentation please refer to <a href="https://github.com/flot/flot"
target="_blank" rel="noopener noreferrer">Flor</a></p>
</Widget>
<Widget id="Font-Awesome">
<h3>Font-awesome</h3>
<p>The iconic SVG, font, and CSS toolkit</p>
<h4>Examples</h4>
<i className="fa fa-arrow-left fa-2x mr"/>
<i className="fa fa-github fa-2x mr"/>
<i className="fa fa-bath fa-2x mr"/>
<i className="fa fa-grav fa-2x mr"/>
<i className="fa fa-telegram fa-2x"/>
<SyntaxHighlighter language='javascript'
style={tomorrow}>{'<i className="fa fa-arrow-left fa-2x mr" />\n' +
'<i className="fa fa-github fa-2x mr" />\n' +
'<i className="fa fa-bath fa-2x mr" />\n' +
'<i className="fa fa-grav fa-2x mr" />\n' +
'<i className="fa fa-telegram fa-2x" />'}</SyntaxHighlighter>
<p className="lead">Want to see examples? <Link to="/app/components/icons">Click</Link></p>
<p>For more examples and documentation please refer to <a href="https://github.com/FortAwesome/Font-Awesome"
target="_blank" rel="noopener noreferrer">Font Awesome</a></p>
</Widget>
<Widget id="Formsy-React">
<h3>Formsy-react</h3>
<p>A form input builder and validator for React JS</p>
<p className="lead">Want to see examples? <Link to="/app/forms/wizard">Click</Link></p>
<p>For more examples and documentation please refer to <a href="https://github.com/formsy/formsy-react"
target="_blank" rel="noopener noreferrer">Formcy React</a></p>
</Widget>
<Widget id="Fullcalendar">
<h3>Fullcalendar</h3>
<p>A JavaScript event calendar. Customizable and open source.</p>
<p className="lead">Want to see examples? <Link to="/app/extra/calendar">Click</Link></p>
<p>For more examples and documentation please refer to <a
href="https://github.com/fullcalendar/fullcalendar" target="_blank" rel="noopener noreferrer">Fullcalendar</a></p>
</Widget>
<Widget id="Glyphicons-Halflings">
<h3>Glyphicons-halflings</h3>
<p>TIncludes over 250 glyphs in font format from the Glyphicon Halflings set</p>
<h4>Examples</h4>
<i className="glyphicon glyphicon-asterisk mr"/>
<i className="glyphicon glyphicon-heart mr"/>
<i className="glyphicon glyphicon-home mr"/>
<i className="glyphicon glyphicon-refresh mr"/>
<i className="glyphicon glyphicon-camera"/>
<SyntaxHighlighter language='javascript'
style={tomorrow}>{'<i className="glyphicon glyphicon-asterisk mr" />\n' +
'<i className="glyphicon glyphicon-heart mr" />\n' +
'<i className="glyphicon glyphicon-home mr" />\n' +
'<i className="glyphicon glyphicon-refresh mr" />\n' +
'<i className="glyphicon glyphicon-camera" />'}</SyntaxHighlighter>
<p className="lead">Want to see examples? <Link to="/app/ui/icons">Click</Link></p>
<p>For more examples and documentation please refer to <a
href="https://getbootstrap.com/docs/3.3/components/" target="_blank" rel="noopener noreferrer">Glyphicons</a></p>
</Widget>
<Widget id="Govpredict-Morris">
<h3>Govpredict-morris</h3>
<p>Pretty time-series line graphs</p>
<p className="lead">Want to see examples? <Link to="/app/charts/morris">Click</Link></p>
<p>For more examples and documentation please refer to <a href="https://github.com/morrisjs/morris.js"
target="_blank" rel="noopener noreferrer">Morris</a></p>
</Widget>
<Widget id="Jquery-Mapael">
<h3>Jquery-mapael</h3>
<p>Ease the build of pretty data visualizations on dynamic vector maps</p>
<p className="lead">Want to see examples? <Link to="/app/main/dashboard">Click</Link></p>
<p>For more examples and documentation please refer to <a href="https://github.com/neveldo/jQuery-Mapael"
target="_blank" rel="noopener noreferrer">Mapael</a></p>
</Widget>
<Widget id="React-Sparkline">
<h3>Jquery-sparkline & React-sparkline</h3>
<p>This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the
browser, using online a line of two of HTML and Javascript.</p>
<Sparklines data={[13, 14, 16, 15, 4, 14, 20]} style={{width: '70px', height: '30px', marginRight: '10px'}}>
<SparklinesBars style={{stroke: 'white', fill: '#618fb0'}}/>
</Sparklines>
<Sparklines data={[14, 12, 16, 11, 17, 19, 16]} style={{width: '70px', height: '30px'}}>
<SparklinesBars style={{stroke: 'white', fill: '#999'}}/>
</Sparklines>
<SyntaxHighlighter language='javascript'
style={tomorrow}>{'<Sparklines data={[13, 14, 16, 15, 4, 14, 20]} style={{ width: \'70px\', height: \'30px\', marginRight: \'10px\' }}>\n' +
' <SparklinesBars style={{ stroke: \'white\', fill: \'#618fb0\' }} />\n' +
'</Sparklines>\n' +
'<Sparklines data={[14, 12, 16, 11, 17, 19, 16]} style={{ width: \'70px\', height: \'30px\' }}>\n' +
' <SparklinesBars style={{ stroke: \'white\', fill: \'#999\' }} />\n' +
'</Sparklines>'}</SyntaxHighlighter>
<p>For more examples and documentation please refer to <a
href="https://github.com/borisyankov/react-sparklines" target="_blank" rel="noopener noreferrer">React Sparklines</a></p>
</Widget>
<Widget id="Jquery-UI">
<h3>Jquery-ui</h3>
<p>The official jQuery user interface library.</p>
<p className="lead">Want to see examples? <Link to="/app/grid">Click</Link></p>
<p>For more examples and documentation please refer to <a href="https://github.com/jquery/jquery-ui"
target="_blank" rel="noopener noreferrer">Jquery UI</a></p>
</Widget>
<Widget id="Jquery-Animate-Number">
<h3>Jquery.animate-number</h3>
<p>jQuery numbers animation plugin, adds 'number' property and step function to jQuery's animate function
properties.</p>
<p className="lead">Want to see examples? <Link to="/app/main/dashboard">Click</Link></p>
<p>For more examples and documentation please refer to <a
href="https://github.com/aishek/jquery-animateNumber" target="_blank" rel="noopener noreferrer">Animate Number</a></p>
</Widget>
<Widget id="Jvectormap">
<h3>Jvectormap</h3>
<p>jVectorMap is a vector-based, cross-browser and cross-platform component for interactive
geography-related data visualization on the web. It
provides numerious features like smooth zooming and panning, fully-customizable styling, markers, labels
and tooltips.</p>
<p className="lead">Want to see examples? <Link to="/app/maps/vector">Click</Link></p>
<p>For more examples and documentation please refer to <a href="https://github.com/bjornd/jvectormap"
target="_blank" rel="noopener noreferrer">Vector Map</a></p>
</Widget>
<Widget id="Line-Awesome">
<h3>Line-awesome</h3>
<p>A single file that replaces Font Awesome with modern line icons.</p>
<h4>Examples</h4>
<i className="la la-arrow-left la-2x mr"/>
<i className="la la-github la-2x mr"/>
<i className="la la-facebook la-2x mr"/>
<SyntaxHighlighter language='javascript'
style={tomorrow}>{'<i className="la la-arrow-left la-2x mr" />\n' +
'<i className="la la-github la-2x mr" />\n' +
'<i className="la la-facebook la-2x mr" />'}</SyntaxHighlighter>
<p className="lead">Want to see examples? <Link to="/app/ui/icons">Click</Link></p>
<p>For more examples and documentation please refer to <a href="https://github.com/FortAwesome/Font-Awesome"
target="_blank" rel="noopener noreferrer">Font Awesome</a></p>
</Widget>
<Widget id="Messenger">
<h3>Messenger</h3>
<p>Growl-style alerts and messages</p>
<p className="lead">Want to see examples? <Link to="/app/ui/notifications">Click</Link></p>
<p>For more examples and documentation please refer to <a href="https://github.com/HubSpot/messenger"
target="_blank" rel="noopener noreferrer">Messenger</a></p>
</Widget>
<Widget id="Metrojs">
<h3>Metrojs</h3>
<p>Metro JS is a JavaScript plugin for jQuery developed to easily enable Metro interfaces on the web.</p>
<p className="lead">Want to see examples? <Link to="/app/main/widgets">Click</Link></p>
<p>For more examples and documentation please refer to <a
href="http://www.drewgreenwell.com/projects/metrojs" target="_blank" rel="noopener noreferrer">metrojs</a></p>
</Widget>
<Widget id="Rc-color-picker">
<h3>Rc-color-picker</h3>
<p>Color piker component for React</p>
<ColorPiker/>
<SyntaxHighlighter language='javascript'
style={tomorrow}>{'<ColorPiker />'}</SyntaxHighlighter>
<p>For more examples and documentation please refer to <a
href="https://github.com/react-component/color-picker" target="_blank" rel="noopener noreferrer">Color Picker</a></p>
</Widget>
<Widget id="Rc-Hammerjs">
<h3>Rc-hammerjs</h3>
<p>ReactJS / HammerJS integration. Support touch events in your React app.</p>
<p>For more examples and documentation please refer to <a href="https://github.com/JedWatson/react-hammerjs"
target="_blank" rel="noopener noreferrer">HammerJS</a></p>
</Widget>
<Widget id="React-Autosize-Textarea">
<h3>react-autosize-textarea</h3>
<p>A light replacement for built-in <code>&lt;textarea /></code> component which automatically adjusts its
height to match the content.</p>
<TextareaAutosize placeholder="Try to type"/>
<SyntaxHighlighter language='javascript'
style={tomorrow}>{'<TextareaAutosize placeholder="Try to type"/>'}</SyntaxHighlighter>
<p>For more examples and documentation please refer to <a
href="https://github.com/buildo/react-autosize-textarea" target="_blank" rel="noopener noreferrer">Textarea</a></p>
</Widget>
<Widget id="React-Datetime">
<h3>React-datetime</h3>
<p>A date and time picker in the same React.js component</p>
<div style={{width: '150px'}}>
<DateTime/>
</div>
<SyntaxHighlighter language='javascript'
style={tomorrow}>{'<DateTime />'}</SyntaxHighlighter>
<p>For more examples and documentation please refer to <a
href="https://github.com/YouCanBookMe/react-datetime" target="_blank" rel="noopener noreferrer">DetaTime</a></p>
</Widget>
<Widget id="React-Draft-Wysiwyg">
<h3>React-draft-wysiwyg</h3>
<p>A Wysiwyg editor built using ReactJS and DraftJS libraries</p>
<Editor/>
<p>For more examples and documentation please refer to <a
href="https://github.com/jpuri/react-draft-wysiwyg" target="_blank" rel="noopener noreferrer">React Wysiwyg</a></p>
</Widget>
<Widget id="React-Dropzone">
<h3>React-dropzone</h3>
<p>Simple HTML5-compliant drag'n'drop zone for files built with React.js.</p>
<p className="lead">Want to see examples? <Link to="/app/forms/elements">Click</Link></p>
<p>For more examples and documentation please refer to <a
href="https://github.com/react-dropzone/react-dropzone" target="_blank" rel="noopener noreferrer">React Dropzone</a></p>
</Widget>
<Widget id="React-Google-Maps">
<h3>React-google-maps</h3>
<p>React.js Google Maps integration component</p>
<p className="lead">Want to see examples? <Link to="/app/maps/google">Click</Link></p>
<p>For more examples and documentation please refer to <a
href="https://github.com/tomchentw/react-google-maps" target="_blank" rel="noopener noreferrer">Google Maps</a></p>
</Widget>
<Widget id="React-Maskedinput">
<h3>React-maskedinput</h3>
<p>A React component for <code>&lt;input></code> masking, built on top of inputmask-core.</p>
<div style={{width: '200px'}}>
<MaskedInput mask="1111 1111 1111 1111" name="card" size="20" className="form-control"/>
</div>
<SyntaxHighlighter language='javascript'
style={tomorrow}>{'<MaskedInput mask="1111 1111 1111 1111" name="card" size="20" className="form-control"/>'}</SyntaxHighlighter>
<p>For more examples and documentation please refer to <a href="https://github.com/insin/react-maskedinput"
target="_blank" rel="noopener noreferrer">Masked Input</a></p>
</Widget>
<Widget id="React-MDE">
<h3>React-mde</h3>
<p>A simple yet powerful and extensible Markdown Editor editor for React. React-mde is built on top of
Draft.js.</p>
<p>For more examples and documentation please refer to <a href="https://github.com/andrerpena/react-mde"
target="_blank" rel="noopener noreferrer">ReactMDE</a></p>
</Widget>
<Widget id="React-Select2-Wrapper">
<h3>React-select2-wrapper</h3>
<p>React wrapper for Select2</p>
<Select2
style={{ width: '150px' }}
multiple
data={['bug', 'feature', 'documents', 'discussion']}
options={
{
placeholder: 'search by tags',
}
}
/>
<p>For more examples and documentation please refer to <a href="https://github.com/rkit/react-select2-wrapper" target="_blank" rel="noopener noreferrer">Select2</a></p>
</Widget>
<Widget id="React-Shuffle">
<h3>React-shuffle</h3>
<p>Animated shuffling of child components on change.</p>
<p className="lead">Want to see examples? <Link to="/app/extra/gallery">Click</Link></p>
<p>For more examples and documentation please refer to <a
href="https://github.com/FormidableLabs/react-shuffle" target="_blank" rel="noopener noreferrer">Shuffle</a></p>
</Widget>
<Widget id="React-Slick">
<h3>React-slick</h3>
<p>React carousel component</p>
<p className="lead">Want to see examples? <Link to="/app/ecommerce/product">Click</Link></p>
<p>For more examples and documentation please refer to <a
href="https://github.com/FormidableLabs/react-shuffle" target="_blank" rel="noopener noreferrer">React Slick</a></p>
</Widget>
<Widget id="React-Sortable">
<h3>React-sortable</h3>
<p>A components to turn any list into an animated, touch-friendly, sortable list.</p>
<p className="lead">Want to see examples? <Link to="/app/ui/list-groups">Click</Link></p>
<p>For more examples and documentation please refer to <a
href="https://github.com/clauderic/react-sortable-hoc" target="_blank" rel="noopener noreferrer">React Sortable</a></p>
</Widget>
<Widget id="Reactstrap">
<h3>Reactstrap</h3>
<p>React wrapper for Bootstrap 4</p>
<Button color="success">Bootstrap Button</Button>
<SyntaxHighlighter language='javascript'
style={tomorrow}>{' <Button color="success">Bootstrap Button</Button>'}</SyntaxHighlighter>
<p>For more examples and documentation please refer to <a
href="https://github.com/clauderic/react-sortable-hoc" target="_blank" rel="noopener noreferrer">Reactstrap</a></p>
</Widget>
<Widget id="Rickshaw">
<h3>rickshaw</h3>
<p>JavaScript toolkit for creating interactive real-time graphs</p>
<p className="lead">Want to see examples? <Link to="/app/charts/rickshaw">Click</Link></p>
<p>For more examples and documentation please refer to <a
href="https://github.com/shutterstock/rickshaw" target="_blank" rel="noopener noreferrer">Rickshaw</a></p>
</Widget>
<Widget id="Skycons">
<h3>Skycons</h3>
<p>Skycons is a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag.</p>
<Skycon icon="CLEAR_DAY" color="#17a2b8" width="40" height="40" />
<p>For more examples and documentation please refer to <a
href="https://github.com/darkskyapp/skycons" target="_blank" rel="noopener noreferrer">Skycons</a></p>
</Widget>
</Col>
<Col lg={3}>
<Scrollspy
title="LIBS"
prefix="libs"
ids={[
'Animate.css',
'Bootstrap-slide',
'Easy-pie-chart',
'Flot',
'Font-Awesome',
'Formsy-React',
'Fullcalendar',
'Glyphicons-Halflings',
'Govpredict-Morris',
'Jquery-Mapael',
'React-Sparkline',
'Jquery-UI',
'Jquery-Animate-Number',
'Jvectormap',
'Line-Awesome',
'Messenger',
'Metrojs',
'Rc-color-picker',
'Rc-hammerjs',
'React-Autosize-Textarea',
'React-Datetime',
'React-Draft-Wysiwyg',
'React-dropzone',
'React-Google-Maps',
'React-Maskedinput',
'React-MDE',
'React-Select2-Wrapper',
'React-Shuffle',
'React-Slick',
'React-Sortable',
'Reactstrap',
'Rickshaw',
'Skycons',
]} />
</Col>
</Row>
)
}
}
import React, {Component} from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem } from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
import ProductCard from '../../pages/products/components/ProductCard/ProductCard';
import products from '../../pages/products/mock'
import { Link } from 'react-router-dom';
import Widget from '../../components/Widget/Widget';
import Scrollspy from "./ScrollSpyComponent";
export default class Pages extends Component {
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem active>Pages</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<Widget id="Auth">
<h3>Auth</h3>
<p>Auth is a built-in module for an admin template dashboard. It contains all actions and handlers for any token authorization for your application.</p>
<p>All logic is in <code>src/actions/user.js</code> and <code>src/reducers/user.js</code>. We have already preconfigured <a href="https://github.com/flatlogic/nodejs-backend" rel="noopener noreferrer" target="_blank">Node.js backend</a>
<span className="small text-muted"> (Only in full stack version)</span> under the hood. <code>Creds</code> variable contains user email and password entered in the login form. It does request to our backend server and gets token and saves it in <code>localStorage</code>.</p>
<p><b>Important note.</b> Credentials validation must be on the server side.</p>
<p>Another important part of authentication is <code>PrivateRoute</code> component. That’s how it looks like.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>{'const PrivateRoute = ({ dispatch, component, ...rest }) => {\n' +
' if (!Login.isAuthenticated(localStorage.getItem(\'token\'))) {\n' +
' dispatch(logoutUser());\n' +
' return (<Redirect to=\'/login\'/>)\n' +
' } else {\n' +
' return (\n' +
' <Route {...rest} render={props => (React.createElement(component, props))}/>\n' +
' );\n' +
' }\n' +
'};'}</SyntaxHighlighter>
<p>We are getting <code>token</code> from local storage, that must be saved in local storage after successful loginUser function completion. Depends on the result of this action, <code>PrivateRoute</code> returns page (react component) or redirect to the login page. If you don’t need login functionality in your app, you can use <code>Route</code> instead of <code>PrivateRoute</code>.</p>
</Widget>
<Widget id="Inbox">
<h3>Inbox</h3>
<p>Inbox is a ready-to-use application with all needed features. It’s easy to understand and customize. The code is divided into components, so you can easily change the layout of your application.</p>
<ul>
<li>Messages filter & search</li>
<li>Compose</li>
<li>Read/unread, star/unstar, delete actionsy</li>
<li>Message attachments</li>
<li>Reply functionality</li>
</ul>
<Link className="btn btn-primary" to="/app/inbox">Demo</Link>
</Widget>
<Widget id="Dashboards">
<h3>Dashboards</h3>
<p>The main screen of any application built on the top of the admin dashboard template. That is more informative pages of all application. There are 2 types of dashboards: analytics and visits.</p>
<p>Analytics one. There you can find a lot of chart and statistics, calendar, todo manager, table with any data you need, notifications block.</p>
<p>Main chart made with D3.js library, most powerful charts library. Other components are just a plain markup with state</p>
<p>Visits dashboard page can be used for real-time displaying users & traffic data. It is a big vector map made with mapael in the center of this dashboard, that can display any region of the world with any data you want on hover action.</p>
<p>All of this component can be used on any page of the application.</p>
<p>
<Link className="btn btn-primary mr-sm" to="/app/main/analytics">Analytics</Link>
<Link className="btn btn-primary" to="/app/main/visits">Visits</Link>
</p>
</Widget>
<Widget id="E-Commerce">
<h3>E-commerce</h3>
<p className="alert alert-secondary font-weight-bold"><span className="text-warning">Important note.</span> This section is fully supported by <a
href="https://github.com/flatlogic/nodejs-backend" rel="noopener noreferrer" target="_blank">Node.js
backend</a> data.
</p>
<p>E-commerce is a group of three pages: product management, product list and product details. Must have a page if you are doing something similar to marketplace or shop.</p>
<p>&bull; Product management is a page, where you can manipulate with products data. You can CREATE, READ, UPDATE and DELETE products. <span className="small text-muted">(This page is available only in full stack version)</span></p>
<p>&bull; Products page is a list of ProductCard component. <code>ProductCard</code> component used to display product image, price, label, the small description in a proper way.</p>
<p>&bull; Product details is a detailed product card with a lot informative description.</p>
<p>Examples of <code>ProductCard</code> component:</p>
<Row>
<Col md={6}>
<ProductCard {...products[0]} />
</Col>
<Col md={6}>
<ProductCard {...products[2]} />
</Col>
</Row>
<p>
<Link className="btn btn-primary mr-sm" to="/app/ecommerce/management">Management</Link>
<Link className="btn btn-primary mr-sm" to="/app/ecommerce/products">List</Link>
<Link className="btn btn-primary" to="/app/ecommerce/product">Details</Link>
</p>
</Widget>
</Col>
<Col lg={3}>
<Scrollspy
title="PAGES"
prefix="pages"
ids={[
'Auth',
'Inbox',
'Dashboards',
'E-Commerce',
]} />
</Col>
</Row>
)
}
}
import React from "react";
import { HashLink as Link } from 'react-router-hash-link';
import Scrollspy from "react-scrollspy";
import s from '../styles.module.scss';
export default (props) => (
<div
className="border-left pl-4 d-md-down-none"
style={{
position: 'fixed',
overflowY: 'auto',
maxHeight: 'calc(100vh - 130px)',
paddingLeft: '15px'
}}
>
<h6 className="fw-semi-bold">{props.title}</h6>
<Scrollspy
items={props.ids}
currentClassName={s.activeScrollSpy}
offset={-170}
>
{props.ids.map((id) => (
<li key="id" className="mb-xs"><Link to={`/documentation/${props.prefix}#${id}`} className={s.scrollSpy}>{id.split('-').join(' ')}</Link></li>
))}
</Scrollspy>
</div>
)
import React, { Component } from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem, Alert, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import classnames from 'classnames';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
const alerts = [{
id: 'al-1',
type: 'success',
msg: '<span class="fw-semi-bold">Success:</span> You successfully read this important alert message.',
visible: [true, true, true],
}, {
id: 'al-2',
type: 'info',
msg: '<span class="fw-semi-bold">Info:</span> This alert needs your attention, but it\'s not super important.',
visible: [true, true, true],
}, {
id: 'al-3',
type: 'warning',
msg: '<span class="fw-semi-bold"><strong>Warning:</strong></span> Best check yo self, you\'re not looking too good.',
visible: [true, true, true],
}, {
id: 'al-4',
type: 'danger',
msg: '<span class="fw-semi-bold">Danger:</span> Change this and that and try again. <a class="btn btn-default btn-xs float-right mr" href="#">Ignore</a> <a class="btn btn-danger btn-xs float-right mr-xs" href="#">Take this action</a>',
visible: [true, true, true],
}];
class Overview extends Component {
state = {
defaultAlertsTabId: '1',
transparentAlertsTabId: '1',
};
changeTab(field, id) {
this.setState({
[field]: id,
})
}
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem active>Alerts</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<h2>Alerts</h2>
<p className="mb-lg">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import { Alert } from 'reactstrap';"}
</SyntaxHighlighter>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultAlertsTabId === '1' })}
onClick={() => {
this.changeTab('defaultAlertsTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultAlertsTabId === '2' })}
onClick={() => {
this.changeTab('defaultAlertsTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.defaultAlertsTabId}>
<TabPane tabId="1">
<p>Alerts are available for any length of text, as well as an optional dismiss button.</p>
{alerts.map((alert, index) => <Alert
key={alert.id} isOpen={alert.visible[0]} toggle={() => this.closeAlert(index, 0)}
color={alert.type}
>
<span dangerouslySetInnerHTML={{__html: alert.msg}}/>
</Alert>)}
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<Alert\n' +
' isOpen={true}\n' +
' toggle={this.closeAlert}\n' +
' color="danger"\n' +
'>\n' +
' <h1>Alert Content</h1>\n' +
'</Alert>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
<Nav tabs className="bg-transparent">
<NavItem>
<NavLink
className={classnames({ active: this.state.transparentAlertsTabId === '1' })}
onClick={() => {
this.changeTab('transparentAlertsTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.transparentAlertsTabId === '2' })}
onClick={() => {
this.changeTab('transparentAlertsTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.transparentAlertsTabId}>
<TabPane tabId="1">
<p>Alerts are available for any length of text, as well as an optional dismiss button.</p>
{alerts.map((alert, index) => <Alert
className="alert-transparent"
key={alert.id} isOpen={alert.visible[0]} toggle={() => this.closeAlert(index, 0)}
color={alert.type}
>
<span dangerouslySetInnerHTML={{__html: alert.msg}}/>
</Alert>)}
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<Alert\n' +
' className="alert-transparent"\n' +
' isOpen={true}\n' +
' toggle={this.closeAlert}\n' +
' color="danger"\n' +
'>\n' +
' <h1>Alert Content</h1>\n' +
'</Alert>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
For more examples please refer to <a href="https://reactstrap.github.io/components/alerts/" target="_blank" rel="noopener noreferrer">Reactstrap Alerts</a>
</Col>
</Row>
);
}
}
export default Overview;
import React, { Component } from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem, Badge, Button, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import classnames from 'classnames';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
class Badges extends Component {
state = {
defaultBadgesTabId: '1',
pillsBadgesTabId: '1',
};
changeTab(field, id) {
this.setState({
[field]: id,
})
}
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem active>Badge</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<h2>Badge</h2>
<p className="mb-lg">Documentation and examples for badges, our small count and labeling component.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import { Badge } from 'reactstrap';"}
</SyntaxHighlighter>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultBadgesTabId === '1' })}
onClick={() => {
this.changeTab('defaultBadgesTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultBadgesTabId === '2' })}
onClick={() => {
this.changeTab('defaultBadgesTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.defaultBadgesTabId}>
<TabPane tabId="1">
<h1>Example heading <Badge color="primary">Primary</Badge></h1>
<h2>Example heading <Badge color="info">Info</Badge></h2>
<h3>Example heading <Badge color="warning">Warning</Badge></h3>
<h4>Example heading <Badge color="success">Success</Badge></h4>
<h5>Example heading <Badge color="danger">Danger</Badge></h5>
<h6>Example heading <Badge color="secondary">Secondary</Badge></h6>
<p>Badges can be used as part of links or buttons to provide a counter.</p>
<Button color="primary">Notifications <Badge color="danger">4</Badge></Button>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<h1>Example heading <Badge color="primary">Primary</Badge></h1>\n' +
'<h2>Example heading <Badge color="info">Info</Badge></h2>\n' +
'<h3>Example heading <Badge color="warning">Warning</Badge></h3>\n' +
'<h4>Example heading <Badge color="success">Success</Badge></h4>\n' +
'<h5>Example heading <Badge color="danger">Danger</Badge></h5>\n' +
'<h6>Example heading <Badge color="secondary">Secondary</Badge></h6>\n\n' +
'<Button color="primary">Notifications <Badge color="danger">4</Badge></Button>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
<Nav tabs className="bg-transparent">
<NavItem>
<NavLink
className={classnames({ active: this.state.pillsBadgesTabId === '1' })}
onClick={() => {
this.changeTab('pillsBadgesTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.pillsBadgesTabId === '2' })}
onClick={() => {
this.changeTab('pillsBadgesTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.pillsBadgesTabId}>
<TabPane tabId="1">
<h4>Pill badges</h4>
<p>
<Badge className="mr-xs" color="primary" pill>Primary</Badge>
<Badge className="mr-xs" color="info" pill>Info</Badge>
<Badge className="mr-xs" color="warning" pill>Warning</Badge>
<Badge className="mr-xs" color="success" pill>Success</Badge>
<Badge className="mr-xs" color="danger" pill>Danger</Badge>
<Badge className="mr-xs" color="secondary" pill>Secondary</Badge>
<Badge className="mr-xs" color="light" pill>Light</Badge>
<Badge className="mr-xs" color="dark" pill>Dark</Badge>
</p>
<h4>Badges with link</h4>
<p>
<Badge className="mr-xs" href="#" color="primary">Primary</Badge>
<Badge className="mr-xs" href="#" color="info">Info</Badge>
<Badge className="mr-xs" href="#" color="warning">Warning</Badge>
<Badge className="mr-xs" href="#" color="success">Success</Badge>
<Badge className="mr-xs" href="#" color="danger">Danger</Badge>
<Badge className="mr-xs" href="#" color="secondary">Secondary</Badge>
<Badge className="mr-xs" href="#" color="light">Light</Badge>
<Badge className="mr-xs" href="#" color="dark">Dark</Badge>
</p>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>
{'<Badge className="mr-xs" color="primary" pill>Primary</Badge> \n' +
'<Badge className="mr-xs" href="#" color="primary">Primary</Badge>'}
</SyntaxHighlighter>
</TabPane>
</TabContent>
For more examples please refer to <a href="https://reactstrap.github.io/components/badge/" target="_blank" rel="noopener noreferrer">Reactstrap Badge</a>
</Col>
</Row>
);
}
}
export default Badges;
import React, { Component } from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem, Button, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import classnames from 'classnames';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
class Buttons extends Component {
state = {
defaultButtonTabId: '1',
outlineButtonsTabId: '1',
buttonsSizeTabId: '1'
};
changeTab(field, id) {
this.setState({
[field]: id,
})
}
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem active>Buttons</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<h2>Buttons</h2>
<p className="mb-lg">Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import { Button } from 'reactstrap';"}
</SyntaxHighlighter>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultButtonTabId === '1' })}
onClick={() => {
this.changeTab('defaultButtonTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultButtonTabId === '2' })}
onClick={() => {
this.changeTab('defaultButtonTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.defaultButtonTabId}>
<TabPane tabId="1">
<Button color="default" className="width-100 mb-xs mr-xs">Default</Button>
<Button color="primary" className="width-100 mb-xs mr-xs">Primary</Button>
<Button color="info" className="width-100 mb-xs mr-xs">Info</Button>
<Button color="success" className="width-100 mb-xs mr-xs">Success</Button>
<Button color="warning" className="width-100 mb-xs mr-xs">Warning</Button>
<Button color="danger" className="width-100 mb-xs mr-xs">Danger</Button>
<Button color="gray" className="width-100 mb-xs mr-xs">Gray</Button>
<Button color="inverse" className="width-100 mb-xs mr-xs">Inverse</Button>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<Button color="default" className="width-100 mb-xs mr-xs">Default</Button>\n' +
'<Button color="primary">Primary</Button>\n' +
'<Button color="info">Info</Button>\n' +
'<Button color="success">Success</Button>\n' +
'<Button color="warning"">Warning</Button>\n' +
'<Button color="danger">Danger</Button>\n' +
'<Button color="gray">Gray</Button>\n' +
'<Button color="inverse">Inverse</Button>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
<Nav tabs className="bg-transparent">
<NavItem>
<NavLink
className={classnames({ active: this.state.outlineButtonsTabId === '1' })}
onClick={() => {
this.changeTab('outlineButtonsTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.outlineButtonsTabId === '2' })}
onClick={() => {
this.changeTab('outlineButtonsTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.outlineButtonsTabId}>
<TabPane tabId="1">
<Button outline color="default" className="width-100 mb-xs mr-xs">Default</Button>
<Button outline color="primary" className="width-100 mb-xs mr-xs">Primary</Button>
<Button outline color="info" className="width-100 mb-xs mr-xs">Info</Button>
<Button outline color="success" className="width-100 mb-xs mr-xs">Success</Button>
<Button outline color="warning" className="width-100 mb-xs mr-xs">Warning</Button>
<Button outline color="danger" className="width-100 mb-xs mr-xs">Danger</Button>
<Button outline color="gray" className="width-100 mb-xs mr-xs">Gray</Button>
<Button outline color="inverse" className="width-100 mb-xs mr-xs">Inverse</Button>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>
{'<Button outline color="default">Default</Button>\n' +
'<Button outline color="primary">Primary</Button>\n' +
'<Button outline color="info">Info</Button>\n' +
'<Button outline color="success">Success</Button>\n' +
'<Button outline color="warning">Warning</Button>\n' +
'<Button outline color="danger">Danger</Button>\n' +
'<Button outline color="gray"">Gray</Button>\n' +
'<Button outline color="inverse">Inverse</Button>'}
</SyntaxHighlighter>
</TabPane>
</TabContent>
<Nav tabs className="bg-transparent">
<NavItem>
<NavLink
className={classnames({ active: this.state.buttonsSizeTabId === '1' })}
onClick={() => {
this.changeTab('buttonsSizeTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.buttonsSizeTabId === '2' })}
onClick={() => {
this.changeTab('buttonsSizeTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.buttonsSizeTabId}>
<TabPane tabId="1">
<p className="fs-mini text-muted">
Fancy larger or smaller buttons?
Four separate sizes available for all use cases:
from tiny 10px button to large one.
</p>
<p>
<Button color="default" size="lg" className="mb-xs mr-xs">Large button</Button>
<Button color="primary" className="mb-xs mr-xs">Default button</Button>
<Button color="info" size="sm" className="mb-xs mr-xs">Small button</Button>
<Button color="success" size="xs" className="mb-xs mr-xs">Tiny button</Button>
</p>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>
{'<Button color="default" size="lg">Large button</Button>\n' +
'<Button color="primary">Default button</Button>\n' +
'<Button color="info" size="sm">Small button</Button>\n' +
'<Button color="success" size="xs">Tiny button</Button>'}
</SyntaxHighlighter>
</TabPane>
</TabContent>
For more examples please refer to <a href="https://reactstrap.github.io/components/buttons/" target="_blank" rel="noopener noreferrer">Reactstrap Buttons</a>
</Col>
</Row>
);
}
}
export default Buttons;
import React, { Component } from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem, Button, Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import classnames from 'classnames';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
class Buttons extends Component {
state = {
defaultCardTabId: '1',
};
changeTab(field, id) {
this.setState({
[field]: id,
})
}
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem active>Card</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<h2>Card</h2>
<p className="mb-lg">Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import { Card, CardBody } from 'reactstrap';"}
</SyntaxHighlighter>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultCardTabId === '1' })}
onClick={() => {
this.changeTab('defaultCardTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultCardTabId === '2' })}
onClick={() => {
this.changeTab('defaultCardTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.defaultCardTabId}>
<TabPane tabId="1">
<Card className="border-0">
<CardBody>
<button className="btn-link fw-semi-bold text-success">Avg Rating</button>
<button className="btn-link fw-semi-bold text-muted ml-sm">All Time</button>
<hr />
<div className="d-flex justify-content-between mb-lg">
<div className="text-warning">
<i className="fa fa-star mr-xs" />
<i className="fa fa-star mr-xs" />
<i className="fa fa-star mr-xs" />
<i className="fa fa-star mr-xs" />
<i className="fa fa-star" />
</div>
<span className="text-muted"><small>342 REVIEWS</small></span>
</div>
<div className="mb-lg">
<h3 className="text-success mb-0">69%</h3>
of customers recomend this product
</div>
<Button className="btn-rounded-f" color="success">Write a Review</Button>
</CardBody>
</Card>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<Card className="border-0">\n' +
' <CardBody>\n' +
' <button className="btn-link fw-semi-bold text-success">Avg Rating</button>\n' +
' <button className="btn-link fw-semi-bold text-muted ml-sm">All Time</button>\n' +
' <hr />\n' +
' <div className="d-flex justify-content-between mb-lg">\n' +
' <div className="text-warning">\n' +
' <i className="fa fa-star mr-xs" />\n' +
' <i className="fa fa-star mr-xs" />\n' +
' <i className="fa fa-star mr-xs" />\n' +
' <i className="fa fa-star mr-xs" />\n' +
' <i className="fa fa-star" />\n' +
' </div>\n' +
' <span className="text-muted"><small>342 REVIEWS</small></span>\n' +
' </div>\n' +
' <div className="mb-lg">\n' +
' <h3 className="text-success mb-0">69%</h3>\n' +
' of customers recomend this product\n' +
' </div>\n' +
' <Button className="btn-rounded-f" color="success">Write a Review</Button>\n' +
' </CardBody>\n' +
'</Card>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
For more examples please refer to <a href="https://reactstrap.github.io/components/card/" target="_blank" rel="noopener noreferrer">Reactstrap Card</a>
</Col>
</Row>
);
}
}
export default Buttons;
import React, { Component } from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem, UncontrolledCarousel } from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
import firstSlide from '../../../images/slides/1.jpg';
import secondSlide from '../../../images/slides/2.jpg';
import thirdSlide from '../../../images/slides/3.jpg';
const carouselItems = [
{ src: firstSlide, caption: '' },
{ src: secondSlide, caption: '' },
{ src: thirdSlide, caption: '' },
];
class Buttons extends Component {
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem active>Carousel</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<h2>Carousel</h2>
<p className="mb-lg">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import { UncontrolledCarousel} from 'reactstrap';"}
</SyntaxHighlighter>
<UncontrolledCarousel className="mb-lg mt-lg" captionTex={null} items={carouselItems} />
<SyntaxHighlighter language='javascript' style={tomorrow}>{'const carouselItems = [\n' +
' { src: firstSlide, caption: \'\' },\n' +
' { src: secondSlide, caption: \'\' },\n' +
' { src: thirdSlide, caption: \'\' },\n' +
'];\n' +
'\n' +
'<UncontrolledCarousel captionTex={null} items={carouselItems} />'}
</SyntaxHighlighter>
For more examples please refer to <a href="https://reactstrap.github.io/components/carousel/" target="_blank"
rel="noopener noreferrer">Reactstrap Carousel</a>
</Col>
</Row>
);
}
}
export default Buttons;
import React, { Component } from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem, Button, Modal, ModalHeader, ModalBody, ModalFooter, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import classnames from 'classnames';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
class Modals extends Component {
state = {
defaultModalTabId: '1',
variatonModalsTabId: '1',
demo: false,
scrollingLong: false,
large: false,
};
toggle(id) {
this.setState(prevState => ({
[id]: !prevState[id],
}));
}
changeTab(field, id) {
this.setState({
[field]: id,
})
}
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem active>Modal</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<h2>Modal</h2>
<p className="mb-lg">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';"}
</SyntaxHighlighter>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultModalTabId === '1' })}
onClick={() => {
this.changeTab('defaultModalTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultModalTabId === '2' })}
onClick={() => {
this.changeTab('defaultModalTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.defaultModalTabId}>
<TabPane tabId="1">
<Button onClick={() => this.toggle('demo')} size="lg" color="primary">Default modal</Button>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<Modal isOpen={} toggle={}>\n' +
' <ModalHeader toggle={}>Modal title</ModalHeader>\n' +
' <ModalBody className="bg-white">\n' +
' ...\n' +
' </ModalBody>\n' +
' <ModalFooter>\n' +
' <Button color="secondary" onClick={}>Close</Button>\n' +
' <Button color="primary">Save changes</Button>\n' +
' </ModalFooter>\n' +
'</Modal>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.variatonModalsTabId === '1' })}
onClick={() => {
this.changeTab('variatonModalsTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.variatonModalsTabId === '2' })}
onClick={() => {
this.changeTab('variatonModalsTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.variatonModalsTabId}>
<TabPane tabId="1">
<h3>Variations</h3>
<Button className="mr-lg" onClick={() => this.toggle('scrollingLong')} size="lg" color="danger">Long modal</Button>
<Button onClick={() => this.toggle('large')} size="lg" color="success">Large modal</Button>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<Modal isOpen={} toggle={}>\n' +
' <ModalHeader toggle={}>Modal title</ModalHeader>\n' +
' <ModalBody className="bg-white">\n' +
' {longContent}\n' +
' </ModalBody>\n' +
' <ModalFooter>\n' +
' <Button color="secondary" onClick={}>Close</Button>\n' +
' <Button color="primary">Save changes</Button>\n' +
' </ModalFooter>\n' +
'</Modal>\n\n' +
'<Modal size="lg"> \n' +
' <ModalHeader toggle={}>Modal title</ModalHeader>\n' +
' <ModalBody className="bg-white">\n' +
' {content}\n' +
' </ModalBody>\n' +
' <ModalFooter>\n' +
' <Button color="secondary" onClick={}>Close</Button>\n' +
' <Button color="primary">Save changes</Button>\n' +
' </ModalFooter>\n' +
'</Modal>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
For more examples please refer to <a href="https://reactstrap.github.io/components/modal/" target="_blank" rel="noopener noreferrer">Reactstrap Modal</a>
</Col>
<Modal isOpen={this.state.demo} toggle={() => this.toggle('demo')}>
<ModalHeader toggle={() => this.toggle('demo')}>Modal title</ModalHeader>
<ModalBody className="bg-white">
...
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={() => this.toggle('demo')}>Close</Button>
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
<Modal isOpen={this.state.scrollingLong} toggle={() => this.toggle('scrollingLong')}>
<ModalHeader toggle={() => this.toggle('scrollingLong')}>Long content</ModalHeader>
<ModalBody className="bg-white">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry&apos;s standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={() => this.toggle('scrollingLong')}>Close</Button>
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
<Modal size="lg" isOpen={this.state.large} toggle={() => this.toggle('large')}>
<ModalHeader toggle={() => this.toggle('large')}>Large modal</ModalHeader>
<ModalBody className="bg-white">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In, illum harum?
Quidem, quisquam, natus repellat debitis veniam quia facilis magni tempora
cupiditate odio vitae? Eligendi nisi consequuntur vero tenetur nemo!
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={() => this.toggle('large')}>Close</Button>
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
</Row>
);
}
}
export default Modals;
import React, { Component } from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import classnames from 'classnames';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
class NavPage extends Component {
state = {
defaultNavTabId: '1',
verticalNavTabId: '1',
pillsNavTabId: '1',
};
changeTab(field, id) {
this.setState({
[field]: id,
})
}
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem active>Nav</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<h2>Nav</h2>
<p className="mb-lg">Change the style of Nav component with modifiers and utilities. Mix and match as needed, or build your own.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import { Nav, NavItem, NavLink } from 'reactstrap';"}
</SyntaxHighlighter>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultNavTabId === '1' })}
onClick={() => {
this.changeTab('defaultNavTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultNavTabId === '2' })}
onClick={() => {
this.changeTab('defaultNavTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.defaultNavTabId}>
<TabPane tabId="1">
<Nav>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<Nav>\n' +
' <NavItem>\n' +
' <NavLink href="#">Link</NavLink>\n' +
' </NavItem>\n' +
' <NavItem>\n' +
' <NavLink href="#">Link</NavLink>\n' +
' </NavItem>\n' +
' <NavItem>\n' +
' <NavLink href="#">Another Link</NavLink>\n' +
' </NavItem>\n' +
' <NavItem>\n' +
' <NavLink disabled href="#">Disabled Link</NavLink>\n' +
' </NavItem>\n' +
'</Nav>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.verticalNavTabId === '1' })}
onClick={() => {
this.changeTab('verticalNavTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.verticalNavTabId === '2' })}
onClick={() => {
this.changeTab('verticalNavTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.verticalNavTabId}>
<TabPane tabId="1">
<Nav vertical>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<Nav vertical>\n' +
' <NavItem>\n' +
' <NavLink href="#">Link</NavLink>\n' +
' </NavItem>\n' +
' <NavItem>\n' +
' <NavLink href="#">Link</NavLink>\n' +
' </NavItem>\n' +
' <NavItem>\n' +
' <NavLink href="#">Another Link</NavLink>\n' +
' </NavItem>\n' +
' <NavItem>\n' +
' <NavLink disabled href="#">Disabled Link</NavLink>\n' +
' </NavItem>\n' +
'</Nav>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.pillsNavTabId === '1' })}
onClick={() => {
this.changeTab('pillsNavTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.pillsNavTabId === '2' })}
onClick={() => {
this.changeTab('pillsNavTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.pillsNavTabId}>
<TabPane tabId="1">
<Nav pills>
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<Nav>\n' +
' <NavItem pills>\n' +
' <NavLink href="#" active>Link</NavLink>\n' +
' </NavItem>\n' +
' <NavItem>\n' +
' <NavLink href="#">Link</NavLink>\n' +
' </NavItem>\n' +
' <NavItem>\n' +
' <NavLink href="#">Another Link</NavLink>\n' +
' </NavItem>\n' +
' <NavItem>\n' +
' <NavLink disabled href="#">Disabled Link</NavLink>\n' +
' </NavItem>\n' +
'</Nav>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
For more examples please refer to <a href="https://reactstrap.github.io/components/card/" target="_blank" rel="noopener noreferrer">Reactstrap Card</a>
</Col>
</Row>
);
}
}
export default NavPage;
import React, { Component } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
TabContent,
TabPane,
Nav,
NavItem,
NavLink,
Navbar,
NavbarBrand,
NavbarToggler,
Collapse,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import classnames from 'classnames';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
class NavbarPage extends Component {
state = {
defaultNavTabId: '1',
verticalNavTabId: '1',
pillsNavTabId: '1',
};
changeTab(field, id) {
this.setState({
[field]: id,
})
}
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem active>Navbar</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<h2>Navbar</h2>
<p className="mb-lg">Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar.
Includes support for branding, navigation, and more, including support for our collapse plugin.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import {\n" +
" Nav,\n" +
" NavItem,\n" +
" NavLink,\n" +
" Navbar,\n" +
" NavbarBrand,\n" +
" NavbarToggler,\n" +
" Collapse,\n" +
" UncontrolledDropdown,\n" +
" DropdownToggle,\n" +
" DropdownMenu,\n" +
" DropdownItem\n" +
"} from 'reactstrap';"}
</SyntaxHighlighter>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultNavTabId === '1' })}
onClick={() => {
this.changeTab('defaultNavTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultNavTabId === '2' })}
onClick={() => {
this.changeTab('defaultNavTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.defaultNavTabId}>
<TabPane tabId="1">
<Navbar color="light" light expand="md">
<NavbarBrand href="/">Sing</NavbarBrand>
<NavbarToggler />
<Collapse navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Documentation</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
Option 1
</DropdownItem>
<DropdownItem>
Option 2
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<Navbar color="light" light expand="md">\n' +
' <NavbarBrand href="/">Sing</NavbarBrand>\n' +
' <NavbarToggler />\n' +
' <Collapse navbar>\n' +
' <Nav className="ml-auto" navbar>\n' +
' <NavItem>\n' +
' <NavLink href="#">Components</NavLink>\n' +
' </NavItem>\n' +
' <NavItem>\n' +
' <NavLink href="#">Documentation</NavLink>\n' +
' </NavItem>\n' +
' <UncontrolledDropdown nav inNavbar>\n' +
' <DropdownToggle nav caret>\n' +
' Options\n' +
' </DropdownToggle>\n' +
' <DropdownMenu right>\n' +
' <DropdownItem>\n' +
' Option 1\n' +
' </DropdownItem>\n' +
' <DropdownItem>\n' +
' Option 2\n' +
' </DropdownItem>\n' +
' <DropdownItem divider />\n' +
' <DropdownItem>\n' +
' Reset\n' +
' </DropdownItem>\n' +
' </DropdownMenu>\n' +
' </UncontrolledDropdown>\n' +
' </Nav>\n' +
' </Collapse>\n' +
'</Navbar>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
For more examples please refer to <a href="https://reactstrap.github.io/components/card/" target="_blank" rel="noopener noreferrer">Reactstrap Card</a>
</Col>
</Row>
);
}
}
export default NavbarPage;
import React, { Component } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
TabContent,
TabPane,
Nav,
NavItem,
NavLink,
Button,
Popover,
PopoverHeader,
PopoverBody,
UncontrolledTooltip,
} from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import classnames from 'classnames';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
class NavbarPage extends Component {
state = {
defaultPopoversTabId: '1',
defaultTooltipsTabId: '1',
popovers: {
1: false,
2: false,
3: false,
4: false,
}
};
changeTab(field, id) {
this.setState({
[field]: id,
})
}
toggle(id) {
this.setState(prevState => ({
popovers: {
...prevState.popovers,
[id]: !prevState.popovers[id],
},
}))
}
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem active>Popovers & Tooltips</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<h2>Popovers</h2>
<p className="mb-lg">The Popover is similar to Tooltip; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import { Popover, PopoverHeader, PopoverBody, UncontrolledTooltip } from 'reactstrap';"}
</SyntaxHighlighter>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultPopoversTabId === '1' })}
onClick={() => {
this.changeTab('defaultPopoversTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultPopoversTabId === '2' })}
onClick={() => {
this.changeTab('defaultPopoversTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.defaultPopoversTabId}>
<TabPane tabId="1">
<Button className="mr" id="popover-1" type="button" color="success" onClick={() => this.toggle(1)}>
Bottom
</Button>
<Button className="mr" id="popover-2" type="button" color="danger" onClick={() => this.toggle(2)}>
Right
</Button>
<Button className="mr" id="popover-3" type="button" color="warning" onClick={() => this.toggle(3)}>
Top
</Button>
<Button className="mr" id="popover-4" type="button" color="info" onClick={() => this.toggle(4)}>
Left
</Button>
<Popover placement="bottom" isOpen={this.state.popovers[1]} target="popover-1" toggle={() => this.toggle(1)}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
</Popover>
<Popover placement="right" isOpen={this.state.popovers[2]} target="popover-2" toggle={() => this.toggle(2)}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
</Popover>
<Popover placement="top" isOpen={this.state.popovers[3]} target="popover-3" toggle={() => this.toggle(3)}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
</Popover>
<Popover placement="left" isOpen={this.state.popovers[4]} target="popover-4" toggle={() => this.toggle(4)}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
</Popover>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<Button id="popover" type="button" color="info" onClick={this.toggle}>\n' +
' Top\n' +
'</Button>\n\n' +
'<Popover placement="top" isOpen={this.state.isPopoverActive} target="popover" toggle={this.toggle}>\n' +
' <PopoverHeader>Popover Title</PopoverHeader>\n' +
' <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>\n' +
'</Popover>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
<h2>Tooltips</h2>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultTooltipsTabId === '1' })}
onClick={() => {
this.changeTab('defaultTooltipsTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultTooltipsTabId === '2' })}
onClick={() => {
this.changeTab('defaultTooltipsTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.defaultTooltipsTabId}>
<TabPane tabId="1">
<Button className="mr" id="tooltip-1" type="button" color="success">
Bottom
</Button>
<Button className="mr" id="tooltip-2" type="button" color="danger">
Right
</Button>
<Button className="mr" id="tooltip-3" type="button" color="warning">
Top
</Button>
<Button className="mr" id="tooltip-4" type="button" color="info">
Left
</Button>
<UncontrolledTooltip placement="bottom" target="tooltip-1">
Hello world!
</UncontrolledTooltip>
<UncontrolledTooltip placement="right" target="tooltip-2">
Hello world!
</UncontrolledTooltip>
<UncontrolledTooltip placement="top" target="tooltip-3">
Hello world!
</UncontrolledTooltip>
<UncontrolledTooltip placement="left" target="tooltip-4">
Hello world!
</UncontrolledTooltip>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<Button className="mr" id="tooltip" type="button" color="info">\n' +
' Left\n' +
'</Button>\n\n' +
'<UncontrolledTooltip placement="left" target="tooltip">\n' +
' Hello world!\n' +
'</UncontrolledTooltip>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
For more examples please refer to <a href="https://reactstrap.github.io/components/popovers/" target="_blank" rel="noopener noreferrer">Reactstrap Popovers</a>
&nbsp;and <a href="https://reactstrap.github.io/components/tooltips/" target="_blank" rel="noopener noreferrer">Reactstrap Tooltips</a>
</Col>
</Row>
);
}
}
export default NavbarPage;
import React, { Component } from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem, Progress, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import classnames from 'classnames';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
class Buttons extends Component {
state = {
defaultProgressTabId: '1',
};
changeTab(field, id) {
this.setState({
[field]: id,
})
}
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem active>Progress</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<h2>Progress</h2>
<p className="mb-lg">Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import { Progress } from 'reactstrap';"}
</SyntaxHighlighter>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultProgressTabId === '1' })}
onClick={() => {
this.changeTab('defaultProgressTabId', '1');
}}
>
Example
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultProgressTabId === '2' })}
onClick={() => {
this.changeTab('defaultProgressTabId', '2');
}}
>
Code
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.defaultProgressTabId}>
<TabPane tabId="1">
<div className="text-center">0%</div>
<Progress />
<div className="text-center">25%</div>
<Progress value="25" />
<div className="text-center">50%</div>
<Progress value={50} />
<div className="text-center">75%</div>
<Progress striped value={75} />
<div className="text-center">100%</div>
<Progress animated value="100" />
<div className="text-center">Multiple bars</div>
<Progress multi>
<Progress bar value="15" />
<Progress bar color="success" value="30" />
<Progress bar color="info" value="25" />
<Progress bar color="warning" value="20" />
<Progress bar color="danger" value="5" />
</Progress>
</TabPane>
<TabPane tabId="2">
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<div className="text-center">0%</div>\n' +
'<Progress />\n' +
'<div className="text-center">25%</div>\n' +
'<Progress value="25" />\n' +
'<div className="text-center">50%</div>\n' +
'<Progress value={50} />\n' +
'<div className="text-center">75%</div>\n' +
'<Progress striped value={75} />\n' +
'<div className="text-center">100%</div>\n' +
'<Progress animated value="100" />\n' +
'<div className="text-center">Multiple bars</div>\n' +
'<Progress multi>\n' +
' <Progress bar value="15" />\n' +
' <Progress bar color="success" value="30" />\n' +
' <Progress bar color="info" value="25" />\n' +
' <Progress bar color="warning" value="20" />\n' +
' <Progress bar color="danger" value="5" />\n' +
'</Progress>'}</SyntaxHighlighter>
</TabPane>
</TabContent>
For more examples please refer to <a href="https://reactstrap.github.io/components/progress/" target="_blank" rel="noopener noreferrer">Reactstrap Progress</a>
</Col>
</Row>
);
}
}
export default Buttons;
import React, { Component } from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem, Collapse, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
import classnames from 'classnames';
import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
class Buttons extends Component {
state = {
defaultTabsTabId: '1',
accordion: [false, false, false],
};
changeTab(field, id) {
this.setState({
[field]: id,
})
}
toggleAccordion(id) {
const arr = [];
arr.length = this.state.accordion.length;
arr.fill(false);
arr[id] = !this.state.accordion[id];
this.setState({
accordion: arr,
});
}
render() {
return (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem active>Tabs & Accordion</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<h2>Tabs</h2>
<p className="mb-lg">Activates a tab element and content container.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import { TabContent, TabPane } from 'reactstrap';"}
</SyntaxHighlighter>
<h4 className="mt-lg">Example</h4>
<Nav tabs className="bg-transparent mt">
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultTabsTabId === '1' })}
onClick={() => {
this.changeTab('defaultTabsTabId', '1');
}}
>
Tab 1
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.defaultTabsTabId === '2' })}
onClick={() => {
this.changeTab('defaultTabsTabId', '2');
}}
>
Tab 2
</NavLink>
</NavItem>
</Nav>
<TabContent className="mb-xlg" activeTab={this.state.defaultTabsTabId}>
<TabPane tabId="1">
First tab content
</TabPane>
<TabPane tabId="2">
Second tab content
</TabPane>
</TabContent>
<h4>Code</h4>
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<TabContent className="mb-xlg" activeTab={this.state.activeTabId}>\n' +
' <TabPane tabId="1">\n' +
' First tab content\n' +
' </TabPane>\n' +
' <TabPane tabId="2">\n' +
' Second tab content\n' +
' </TabPane>\n' +
'</TabContent>'}</SyntaxHighlighter>
For more examples please refer to <a href="https://reactstrap.github.io/components/tabs/"
rel="noopener noreferrer" target="_blank">Reactstrap Tabs</a>
<h2 className="mt-lg">Accordion</h2>
<p className="mb-lg">Activates a tab element and content container.</p>
<SyntaxHighlighter language='javascript' style={tomorrow}>
{"import { Collapse } from 'reactstrap';"}
</SyntaxHighlighter>
<h4 className="mt-lg">Example</h4>
<div className="card panel mt-lg mb-xs">
{ /* eslint-disable */ }
<div
className="card-header panel-header bg-light" role="button"
onClick={() => { this.toggleAccordion(0); }}
>
{ /* eslint-enable */ }
<div className="mb-0">
{/* eslint-disable-next-line */}
<a className="accordion-toggle" role="button">
Collapsible Group Item
<i className={`fa fa-angle-down ${this.state.accordion[0] ? 'expanded' : ''}`} />
</a>
</div>
</div>
<Collapse className="panel-body" isOpen={this.state.accordion[0]}>
<p>Get base styles and flexible support for collapsible components like accordions and navigation.
Using the collapse plugin, we built a simple accordion by extending the panel component.
</p>
</Collapse>
</div>
<div className="card panel mb-xs">
{ /* eslint-disable */ }
<div
className="card-header panel-header bg-light" role="button"
onClick={() => { this.toggleAccordion(1); }}
>
{ /* eslint-enable */ }
<div className="mb-0">
{/* eslint-disable-next-line */}
<a className="accordion-toggle" role="button">
Normal Text Insertion
<i className={`fa fa-angle-down ${this.state.accordion[1] ? 'expanded' : ''}`} />
</a>
</div>
</div>
<Collapse className="panel-body" isOpen={this.state.accordion[1]}>
<p>Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very controversial point. I think the opposite actually.
</p>
</Collapse>
</div>
<div className="card panel mb-lg">
{ /* eslint-disable */ }
<div
className="card-header panel-header bg-light" role="button"
onClick={() => { this.toggleAccordion(2); }}
>
{ /* eslint-enable */ }
<div className="mb-0">
{/* eslint-disable-next-line */}
<a className="accordion-toggle" role="button">
Random from the Web
<i className={`fa fa-angle-down ${this.state.accordion[2] ? 'expanded' : ''}`} />
</a>
</div>
</div>
<Collapse className="panel-body" isOpen={this.state.accordion[2]}>
<p><span className="fw-semi-bold">Light Blue</span> - is a next generation admin template based
on the latest Metro design. There are few reasons we want to tell you, why we have created it:
We didn't like the darkness of most of admin templates, so we created this light one.
We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
We searched for a solution of how to make widgets look like real widgets, so we decided that
deep background - is what makes widgets look real.
</p>
<p className="no-margin text-muted"><em>- Some One</em></p>
</Collapse>
</div>
<h4>Code</h4>
<SyntaxHighlighter language='javascript' style={tomorrow}>{'<div className="card panel mb-xs">\n' +
' <div\n' +
' className="card-header panel-header bg-light" role="button"\n' +
' onClick={this.toggleAccordion}\n' +
' >\n' +
' <div className="mb-0">\n' +
' <a className="accordion-toggle" role="button">\n' +
' Normal Text Insertion\n' +
' <i className={["fa fa-angle-down", this.state.isAccordionOpened ? "expanded" : ""].join(" ")} />\n' +
' </a>\n' +
' </div>\n' +
' </div>\n' +
' <Collapse className="panel-body" isOpen={this.state.isAccordionOpened}>\n' +
' <p>Why don\'t use Lore Ipsum? I think if some one says don\'t use lore ipsum it\'s very controversial point. I think the opposite actually.\n' +
' </p>\n' +
' </Collapse>\n' +
'</div>'}</SyntaxHighlighter>
For more examples please refer to <a href="https://reactstrap.github.io/components/collapse/" target="_blank" rel="noopener noreferrer">Reactstrap Collapse</a>
</Col>
</Row>
);
}
}
export default Buttons;
import React from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem, Table } from 'reactstrap';
import Widget from '../../../components/Widget/Widget';
import Scrollspy from "../ScrollSpyComponent";
const Licences = () => (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Getting Started</BreadcrumbItem>
<BreadcrumbItem active>Licences</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<Widget id="Licences">
<h2>Licences</h2>
<p className="lead">
A license grants you a non-exclusive and non-transferable right to use
and incorporate the item in your personal or commercial projects.
If your end product including an item is going to be free to the end user then
a Single License is what you need. An Extended License is required if the
end user must pay to use the end product.
</p>
<Table>
<thead>
<tr>
<th></th>
<th>Single</th>
<th>Extended</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hundreds unique components</td>
<td className="text-success fw-bold">+</td>
<td className="text-success fw-bold">+</td>
</tr>
<tr>
<td>All pages</td>
<td className="text-success fw-bold">+</td>
<td className="text-success fw-bold">+</td>
</tr>
<tr>
<td>Free Updates</td>
<td>3 months</td>
<td>6 months</td>
</tr>
<tr>
<td>Paying users allowed</td>
<td className="text-danger fw-bold">-</td>
<td className="text-success fw-bold">+</td>
</tr>
</tbody>
</Table>
</Widget>
<Widget id="Single">
<h3>Single Application License</h3>
<p className="lead">
Your use of the item is restricted to a single application. You may use the item
in work which you are creating for your own purposes or for your client. You must
not incorporate the item in a work which is created for redistribution or resale
by you or your client. The item may not be redistributed or resold. You may not
charge users for using your application.
</p>
</Widget>
<Widget id="Extended">
<h3>Extended Application License</h3>
<p className="lead">
Your use of the item is restricted to a single application.
You may use the item in work which you are creating for your own
purposes or for your clients. You are licensed to use the Item to create one single
End Product for yourself or for one client (a “single application”), and the
End Product may be Sold and users may be charged for using it (e.g. you are building
SAAS application).
</p>
</Widget>
<p class="mt">
In case if you need any clarifications considering licenses feel free
to contact us via email: <a class="text-warning" href="mailto:support@flatlogic.com">support@flatlogic.com</a>.
</p>
</Col>
<Col lg={3}>
<Scrollspy
title="LICENCES"
prefix="getting-started/licences"
ids={[
'Licences',
'Single',
'Extended',
]} />
</Col>
</Row>
);
export default Licences;
import React from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem } from 'reactstrap';
import { Link } from 'react-router-dom';
import dashboard from '../../../images/documentation/sing-screenshot.jpg';
import Widget from "../../../components/Widget/Widget";
import Scrollspy from "../ScrollSpyComponent";
const Overview = () => (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Getting Started</BreadcrumbItem>
<BreadcrumbItem active>Overview</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col lg={9}>
<Widget id="Overview">
<h1>Overview</h1>
<p className="lead">
Sing App React is an admin dashboard template built with React 16.5.2. Sing App goes beyond usual admin
templates and provides you entire intuitive programming framework. Server Side Rendering and Node.js backend
will even further speed up your development. You can use Sing App React to build any type of web applications
like SAAS, CMS, financial dashboards, project management tools, etc.
</p>
<p className="lead">
Moreover, there is a version of <a rel="noreferrer noopener" href="https://flatlogic.com/admin-dashboards/sing-app-react-nodejs" target="_blank">Sing App React with Node.js</a>, enhanced with working node.js
backend with authentication, login strategies and basic CRUD functions. Please refer to <a
href="https://github.com/flatlogic/nodejs-backend" rel="noopener noreferrer" target="_blank">backend documentation</a> for details
</p>
<img className="img-responsive w-100 border" src={dashboard} alt="screenshot" />
<Link to="/app">Live demo</Link>
</Widget>
<Widget id="Features">
<h3 className="">Features</h3>
<ul className="mt">
<li className="lead"><i className="la la-check" /> Hundreds of Pages</li>
<li className="lead"><i className="la la-check" /> Fully Responsive</li>
<li className="lead"><i className="la la-check" /> React 16 new</li>
<li className="lead"><i className="la la-check" /> 8 Charts Library</li>
<li className="lead"><i className="la la-check" /> 2 Dashboards</li>
<li className="lead"><i className="la la-check" /> Theme Support</li>
<li className="lead"><i className="la la-check" /> E-Commerce Section</li>
<li className="lead"><i className="la la-check" />
<a href="https://github.com/flatlogic/nodejs-backend" rel="noopener noreferrer" target="_blank"> Node.js backend support</a> <span className="small text-muted">(Only in full stack version)</span>
</li>
<li className="lead"><i className="la la-check" /> Static & Hover Sidebar</li>
<li className="lead"><i className="la la-check" /> Fully Documented Codebase</li>
<li className="lead"><i className="la la-check" /> And even more coming soon!</li>
</ul>
</Widget>
<Row>
<Col md={5}>
<Widget title="Continue with">
<Link to="/documentation/getting-started/licences">
<h4>Licences <i className="la la-arrow-right"/></h4>
</Link>
</Widget>
</Col>
<Col md={5}>
<Widget title="Or learn about">
<Link to="/documentation/getting-started/quick-start">
<h4>How to start project <i className="la la-arrow-right"/></h4>
</Link>
</Widget>
</Col>
</Row>
</Col>
<Col lg={3}>
<Scrollspy
title="OVERVIEW"
prefix="getting-started/overview"
ids={[
'Overview',
'Features'
]}
/>
</Col>
</Row>
);
export default Overview;
import React from 'react';
import { Row, Col, Breadcrumb, BreadcrumbItem } from 'reactstrap';
import Widget from "../../../components/Widget/Widget";
const QuickStart = () => (
<Row>
<Col md={10}>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Documentation</BreadcrumbItem>
<BreadcrumbItem>Getting Started</BreadcrumbItem>
<BreadcrumbItem active>Quick Start</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col md={9}>
<Widget>
<h5>Requirements:</h5>
<ol>
<li>1. Mac OS X, Windows, or Linux</li>
<li>2. Yarn package + Node.js v6.5 or newer</li>
<li>3. Running our <a href="https://github.com/flatlogic/nodejs-backend" rel="noopener noreferrer" target="_blank">Node.js backend</a>
<span className="small text-muted"> (Required only in full stack version)</span></li>
</ol>
<h5>Quick Start:</h5>
<ol>
<li>1. Run <code>yarn install</code></li>
<li>2. Run <code>yarn start</code></li>
</ol>
<h5>There are also other npm tasks:</h5>
<ul>
<li><code>yarn build</code>: if you need just to build the app (without running a dev server)</li>
<li><code>yarn lint</code>: to check the source code for syntax errors and potential issues</li>
</ul>
</Widget>
<p>For more instruction please refer to Sing App React readme.md.</p>
</Col>
</Row>
);
export default QuickStart;
@import '../styles/app';
.root {
:global(.container) {
@media (min-width: 1200px) {
max-width: 1440px;
}
}
}
.content {
background-color: #FFFBF8 !important;
padding: $navbar-height*2 0 0 0 !important;
min-height: 100vh;
& :global(.widget) {
box-shadow: none !important;
background: transparent !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.header {
position: fixed !important;
width: 100vw;
background-color: #fff !important;
height: 80px !important;
box-shadow: 0 0 10px rgba(0,0,0,.2);
}
.company {
display: flex;
position: fixed;
bottom: 0;
align-items: center;
width: inherit;
max-width: inherit;
color: #495057;
font-size: 11px;
font-weight: 400;
background-repeat: no-repeat;
margin-bottom: 30px;
background-size: contain;
border-radius: 50px;
padding: 0 25px;
img {
border-radius: 50%;
margin-right: 10px;
margin-top: -4px;
width: 50px;
}
}
.sidebar {
@media (max-width: 767px) {
position: relative;
width: auto;
background: transparent;
border-right: 0;
margin-bottom: 20px;
.nav {
padding-top: 0;
> div > li > a {
padding-left: 0 !important;
}
}
}
@media (min-width: 768px) {
box-shadow: -100vw 0 0 100vw white;
position: absolute;
height: 100%;
right: 0;
background: #fff;
top: -40px;
padding-top: 22px;
overflow-y: visible !important;
max-width: 100%;
.nav {
position: fixed;
width: inherit;
max-width: inherit;
overflow-y: visible;
max-height: calc(100vh - 200px);
}
> ul {
padding-top: 0;
}
}
& :global(a) {
font-weight: 400 !important;
&[aria-current="page"] {
color: theme-color('warning') !important;
}
}
& :global(.link-wrapper) {
> a > span {
display: none !important;
}
> a {
padding-left: 25px !important;
font-weight: 600 !important;
}
}
}
.scrollSpy {
color: #32373b;
}
.activeScrollSpy > a,
.activeScrollSpy > a:hover,
.activeScrollSpy > a:focus {
color: theme-color('warning') !important;
}
<svg width="2370" height="2500" viewBox="0 0 256 270" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M127.606.341L.849 44.95 20.88 211.022l106.86 58.732 107.412-59.528L255.175 44.16 127.606.341z" fill="#B3B3B3"/><path d="M242.532 53.758L127.31 14.466v241.256l96.561-53.441 18.66-148.523z" fill="#A6120D"/><path d="M15.073 54.466l17.165 148.525 95.07 52.731V14.462L15.074 54.465z" fill="#DD1B16"/><path d="M159.027 142.898L127.31 157.73H93.881l-15.714 39.305-29.228.54L127.31 23.227l31.717 119.672zm-3.066-7.467l-28.44-56.303-23.329 55.334h23.117l28.652.97z" fill="#F2F2F2"/><path d="M127.309 23.226l.21 55.902 26.47 55.377h-26.62l-.06 23.189 36.81.035 17.204 39.852 27.967.518-81.981-174.873z" fill="#B3B3B3"/></svg>
\ No newline at end of file
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 230 230" style="enable-background:new 0 0 230 230;" xml:space="preserve">
<style type="text/css">
.st0{fill:#DD0031;}
.st1{fill:#C3002F;}
.st2{fill:#FFFFFF;}
</style>
<g>
<polygon class="st0" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2 "/>
<polygon class="st1" points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30 "/>
<path class="st2" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve">
<g>
<g id="chevron-right">
<polygon points="94.35,0 58.65,35.7 175.95,153 58.65,270.3 94.35,306 247.35,153 " fill="#FFFFFF"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 31.494 31.494" style="enable-background:new 0 0 31.494 31.494;" xml:space="preserve">
<path style="fill:#1E201D;" d="M10.273,5.009c0.444-0.444,1.143-0.444,1.587,0c0.429,0.429,0.429,1.143,0,1.571l-8.047,8.047h26.554
c0.619,0,1.127,0.492,1.127,1.111c0,0.619-0.508,1.127-1.127,1.127H3.813l8.047,8.032c0.429,0.444,0.429,1.159,0,1.587
c-0.444,0.444-1.143,0.444-1.587,0l-9.952-9.952c-0.429-0.429-0.429-1.143,0-1.571L10.273,5.009z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 321.2 321.2" style="enable-background:new 0 0 321.2 321.2;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M306.4,313.2l-24-223.6c-0.4-3.6-3.6-6.4-7.2-6.4h-44.4V69.6c0-38.4-31.2-69.6-69.6-69.6c-38.4,0-69.6,31.2-69.6,69.6 v13.6H46c-3.6,0-6.8,2.8-7.2,6.4l-24,223.6c-0.4,2,0.4,4,1.6,5.6c1.2,1.6,3.2,2.4,5.2,2.4h278c2,0,4-0.8,5.2-2.4 C306,317.2,306.8,315.2,306.4,313.2z M223.6,123.6c3.6,0,6.4,2.8,6.4,6.4c0,3.6-2.8,6.4-6.4,6.4c-3.6,0-6.4-2.8-6.4-6.4 C217.2,126.4,220,123.6,223.6,123.6z M106,69.6c0-30.4,24.8-55.2,55.2-55.2c30.4,0,55.2,24.8,55.2,55.2v13.6H106V69.6z M98.8,123.6c3.6,0,6.4,2.8,6.4,6.4c0,3.6-2.8,6.4-6.4,6.4c-3.6,0-6.4-2.8-6.4-6.4C92.4,126.4,95.2,123.6,98.8,123.6z M30,306.4 L52.4,97.2h39.2v13.2c-8,2.8-13.6,10.4-13.6,19.2c0,11.2,9.2,20.4,20.4,20.4c11.2,0,20.4-9.2,20.4-20.4c0-8.8-5.6-16.4-13.6-19.2 V97.2h110.4v13.2c-8,2.8-13.6,10.4-13.6,19.2c0,11.2,9.2,20.4,20.4,20.4c11.2,0,20.4-9.2,20.4-20.4c0-8.8-5.6-16.4-13.6-19.2V97.2 H270l22.4,209.2H30z" fill="#FFFFFF"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg width="64" version="1.1" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 64 64" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 64 64">
<g>
<path fill="#1D1D1B" d="M28.941,31.786L0.613,60.114c-0.787,0.787-0.787,2.062,0,2.849c0.393,0.394,0.909,0.59,1.424,0.59 c0.516,0,1.031-0.196,1.424-0.59l28.541-28.541l28.541,28.541c0.394,0.394,0.909,0.59,1.424,0.59c0.515,0,1.031-0.196,1.424-0.59 c0.787-0.787,0.787-2.062,0-2.849L35.064,31.786L63.41,3.438c0.787-0.787,0.787-2.062,0-2.849c-0.787-0.786-2.062-0.786-2.848,0 L32.003,29.15L3.441,0.59c-0.787-0.786-2.061-0.786-2.848,0c-0.787,0.787-0.787,2.062,0,2.849L28.941,31.786z"/>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M504.527,67.909c-8.611-6.92-21.2-5.547-28.118,3.063L210.291,402.169c-3.612,3.863-8.494,6.101-13.797,6.314 c-5.459,0.22-10.629-1.73-14.523-5.431L33.839,261.061c-7.975-7.643-20.634-7.374-28.278,0.599 c-7.643,7.974-7.375,20.634,0.599,28.278l148.191,142.048c11.26,10.703,25.83,16.515,41.268,16.515 c0.825,0,1.655-0.017,2.484-0.051c16.352-0.657,31.371-7.734,42.288-19.926c0.237-0.265,0.467-0.537,0.691-0.814L507.59,96.027 C514.508,87.416,513.137,74.828,504.527,67.909z" fill="#555555"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
<title>dribble-logo</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="dribble-logo" fill="#6C757D" fill-rule="nonzero">
<path d="M9.99056974,0 C4.48200393,0 0,4.48200393 0,9.99056974 C0,15.4991356 4.48200393,19.9811395 9.99056974,19.9811395 C15.4991356,19.9811395 19.9811395,15.4991356 19.9811395,9.99056974 C19.9811395,4.48200393 15.4990963,0 9.99056974,0 Z M16.5955599,4.60691552 C17.7844401,6.05929273 18.5025147,7.90880157 18.5212574,9.92314342 C18.2390177,9.86318271 15.4204322,9.29123772 12.5793713,9.64840864 L12.3957957,9.2075835 C12.2184676,8.79170923 12.0286444,8.37834971 11.8300982,7.97123772 C14.9858546,6.68369352 16.4157564,4.85041257 16.5955599,4.60691552 Z M9.99056974,1.46986248 C12.1585069,1.46986248 14.1403929,2.28282908 15.6464833,3.62031434 C15.4941454,3.83886051 14.210334,5.56471513 11.1757171,6.70239686 C9.77705305,4.13355599 8.22726916,2.02306483 7.99123772,1.70711198 C8.63308448,1.55229862 9.30247544,1.46986248 9.99056974,1.46986248 Z M6.36275049,2.28035363 C6.5875442,2.58880157 8.11233792,4.70180747 9.52601179,7.2156778 C5.53477407,8.27591356 2.01937132,8.26094303 1.63721022,8.25595285 C2.19041257,5.60719057 3.97500982,3.40679764 6.36275049,2.28035363 Z M1.45611002,10.0030648 L1.45984283,9.74204322 C1.83324165,9.75076621 5.96935167,9.803222 10.2290766,8.52817289 C10.4750884,9.0064833 10.707387,9.49225933 10.9221611,9.97681729 L10.5849902,10.0779568 C6.1853831,11.5003536 3.84385069,15.3792141 3.64903733,15.7088802 C2.28785855,14.1965815 1.45736739,12.1959921 1.45611002,10.0030648 Z M9.98931238,18.5362279 C8.01740668,18.5362279 6.19913556,17.8643615 4.75174853,16.735442 C4.90534381,16.423222 6.63371316,13.08389 11.4466798,11.4067191 L11.5028684,11.3879764 C12.7017289,14.5000393 13.1950098,17.1100589 13.3236542,17.8593713 C12.3008644,18.2952063 11.1732024,18.5374853 9.98931238,18.5362279 Z M14.7585462,17.0776031 C14.6711198,16.5580747 14.2153242,14.0604715 13.1013752,10.9933595 C15.7750884,10.5650295 18.1241257,11.2668369 18.4163458,11.3592534 C18.034224,13.7320236 16.6742633,15.7838507 14.7585462,17.0776031 Z" id="Shape"></path>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="11px" height="20px" viewBox="0 0 11 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
<title>facebook-logo</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="facebook-logo" fill="#6C757D">
<path d="M10.3276289,0.00412371134 L7.75752577,0 C4.87010309,0 3.00412371,1.91443299 3.00412371,4.87752577 L3.00412371,7.12639175 L0.42,7.12639175 C0.196701031,7.12639175 0.0158762887,7.30742268 0.0158762887,7.53072165 L0.0158762887,10.7890722 C0.0158762887,11.0123711 0.196907216,11.1931959 0.42,11.1931959 L3.00412371,11.1931959 L3.00412371,19.4150515 C3.00412371,19.6383505 3.18494845,19.8191753 3.40824742,19.8191753 L6.77979381,19.8191753 C7.00309278,19.8191753 7.18391753,19.6381443 7.18391753,19.4150515 L7.18391753,11.1931959 L10.2053608,11.1931959 C10.4286598,11.1931959 10.6094845,11.0123711 10.6094845,10.7890722 L10.6107216,7.53072165 C10.6107216,7.42350515 10.5680412,7.32082474 10.4923711,7.24494845 C10.416701,7.16907216 10.3136082,7.12639175 10.2063918,7.12639175 L7.18391753,7.12639175 L7.18391753,5.22 C7.18391753,4.30371134 7.40226804,3.8385567 8.59587629,3.8385567 L10.3272165,3.83793814 C10.5503093,3.83793814 10.731134,3.65690722 10.731134,3.43381443 L10.731134,0.408247423 C10.731134,0.185360825 10.5505155,0.00453608247 10.3276289,0.00412371134 Z" id="Path"></path>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
<title>github-logo</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="github-logo" fill="#6C757D">
<path d="M18.6392711,4.99193622 C17.7459681,3.46136674 16.5342597,2.24961276 15.0038269,1.35640091 C13.4731663,0.463143508 11.8021412,0.0166287016 9.9895672,0.0166287016 C8.17722096,0.0166287016 6.5056492,0.463280182 4.97530752,1.35640091 C3.44473804,2.2495672 2.23307517,3.46136674 1.33977221,4.99193622 C0.446605923,6.52246014 0,8.1938041 0,10.0059226 C0,12.1826879 0.635079727,14.1400911 1.90555809,15.8786333 C3.17589977,17.6173121 4.81699317,18.82041 6.82870159,19.4880638 C7.06287016,19.5315262 7.23621868,19.5009567 7.34892938,19.3971298 C7.46168565,19.2931663 7.51799544,19.1629613 7.51799544,19.0070615 C7.51799544,18.9810478 7.5157631,18.7470159 7.51143508,18.3046925 C7.50697039,17.862369 7.50487472,17.476492 7.50487472,17.1472437 L7.20569476,17.1989977 C7.01494305,17.2339408 6.77430524,17.2487472 6.48378132,17.2445558 C6.19339408,17.2405011 5.89193622,17.2100683 5.57981777,17.1534852 C5.26756264,17.0974032 4.97712984,16.9673349 4.70829157,16.7635535 C4.43958998,16.5597722 4.24883827,16.2930296 4.136082,15.9637358 L4.00601367,15.6644191 C3.91931663,15.4651481 3.7828246,15.2437813 3.59635535,15.001139 C3.4098861,14.7582688 3.22132118,14.5936219 3.03056948,14.5069248 L2.93949886,14.4417312 C2.87881549,14.3984055 2.82250569,14.3461503 2.7704328,14.2855125 C2.71840547,14.2248747 2.6794533,14.1641913 2.65343964,14.1034169 C2.62738041,14.0425968 2.64897494,13.9927107 2.71845103,13.9535763 C2.78792711,13.9144419 2.91348519,13.8954442 3.09567198,13.8954442 L3.35571754,13.9343052 C3.52915718,13.9690661 3.74369021,14.0728929 3.99958998,14.2464237 C4.25535308,14.4198178 4.46560364,14.6452392 4.63038724,14.9225968 C4.82993166,15.2782232 5.07034169,15.5492027 5.35230068,15.735672 C5.63403189,15.9221412 5.91808656,16.0152164 6.20419134,16.0152164 C6.49029613,16.0152164 6.73740319,15.9935308 6.94560364,15.9503872 C7.15357631,15.9070159 7.34870159,15.8418223 7.53088838,15.7551708 C7.60892938,15.1739408 7.8214123,14.727426 8.1681549,14.4153075 C7.67394077,14.3633713 7.22961276,14.2851481 6.83494305,14.181139 C6.44050114,14.0769932 6.03289294,13.9079727 5.6123918,13.6736219 C5.19166287,13.43959 4.84264237,13.1489749 4.56523918,12.8022779 C4.28779043,12.4553986 4.06009112,12 3.88246014,11.436492 C3.70473804,10.8727563 3.61585421,10.2224601 3.61585421,9.48542141 C3.61585421,8.43599089 3.95845103,7.54296128 4.64350797,6.80583144 C4.32259681,6.01685649 4.35289294,5.1323918 4.73448747,4.15252847 C4.98596811,4.07439636 5.35890661,4.13302961 5.85312073,4.32806378 C6.34742597,4.52318907 6.70933941,4.69034169 6.93922551,4.82892938 C7.16911162,4.96747153 7.35330296,5.08487472 7.49207289,5.18009112 C8.29867882,4.95471526 9.13107062,4.84200456 9.98947608,4.84200456 C10.8478815,4.84200456 11.6804556,4.95471526 12.4871071,5.18009112 L12.9813667,4.86806378 C13.3193622,4.65986333 13.7184966,4.46906606 14.1778132,4.29562642 C14.6374032,4.1222779 14.9888383,4.07453303 15.231754,4.15266515 C15.6218223,5.13257403 15.6565831,6.01699317 15.3355809,6.80596811 C16.0205923,7.54309795 16.3633257,8.43635535 16.3633257,9.48555809 C16.3633257,10.2225968 16.274123,10.8749431 16.0966743,11.4430068 C15.9189977,12.0111617 15.6893394,12.4661048 15.4076082,12.8087927 C15.1255581,13.1514351 14.7743052,13.4397722 14.3538041,13.6737585 C13.9332118,13.9079271 13.525467,14.0769476 13.1310251,14.1810934 C12.7364009,14.2852392 12.2920729,14.363508 11.7978588,14.4155353 C12.2486105,14.8056036 12.4740319,15.4213212 12.4740319,16.2624146 L12.4740319,19.006697 C12.4740319,19.1625968 12.528246,19.2927563 12.6367654,19.3967654 C12.7451481,19.5005923 12.9163098,19.5311617 13.1504784,19.4876538 C15.1624601,18.8200911 16.8035535,17.6169476 18.0738497,15.8782688 C19.3440091,14.1397267 19.9793166,12.1823235 19.9793166,10.0055581 C19.978861,8.19366743 19.5320273,6.52246014 18.6392711,4.99193622 Z" id="Path"></path>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
<title>instagram-logo</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="instagram-logo" fill="#6C757D">
<path d="M14.4007059,0 L5.48870588,0 C2.46223529,0 0,2.46235294 0,5.48882353 L0,14.4008235 C0,17.4274118 2.46223529,19.8896471 5.48870588,19.8896471 L14.4007059,19.8896471 C17.4274118,19.8896471 19.8896471,17.4272941 19.8896471,14.4008235 L19.8896471,5.48882353 C19.8897647,2.46235294 17.4274118,0 14.4007059,0 Z M18.1250588,14.4008235 C18.1250588,16.4543529 16.4543529,18.1249412 14.4008235,18.1249412 L5.48870588,18.1249412 C3.43529412,18.1250588 1.76470588,16.4543529 1.76470588,14.4008235 L1.76470588,5.48882353 C1.76470588,3.43541176 3.43529412,1.76470588 5.48870588,1.76470588 L14.4007059,1.76470588 C16.4542353,1.76470588 18.1249412,3.43541176 18.1249412,5.48882353 L18.1249412,14.4008235 L18.1250588,14.4008235 Z" id="Shape" fill-rule="nonzero"></path>
<path d="M9.94482353,4.82 C7.11882353,4.82 4.81976471,7.11905882 4.81976471,9.94505882 C4.81976471,12.7709412 7.11882353,15.0698824 9.94482353,15.0698824 C12.7708235,15.0698824 15.0698824,12.7709412 15.0698824,9.94505882 C15.0698824,7.11905882 12.7708235,4.82 9.94482353,4.82 Z M9.94482353,13.3050588 C8.092,13.3050588 6.58447059,11.7977647 6.58447059,9.94494118 C6.58447059,8.092 8.09188235,6.58458824 9.94482353,6.58458824 C11.7977647,6.58458824 13.3051765,8.092 13.3051765,9.94494118 C13.3051765,11.7977647 11.7976471,13.3050588 9.94482353,13.3050588 Z" id="Shape" fill-rule="nonzero"></path>
<path d="M15.2848235,3.32364706 C14.9448235,3.32364706 14.6108235,3.46129412 14.3707059,3.70247059 C14.1294118,3.94247059 13.9907059,4.27658824 13.9907059,4.61776471 C13.9907059,4.95788235 14.1295294,5.29188235 14.3707059,5.53305882 C14.6107059,5.77305882 14.9448235,5.91188235 15.2848235,5.91188235 C15.626,5.91188235 15.9589412,5.77305882 16.2001176,5.53305882 C16.4412941,5.29188235 16.5789412,4.95776471 16.5789412,4.61776471 C16.5789412,4.27658824 16.4412941,3.94247059 16.2001176,3.70247059 C15.9601176,3.46129412 15.626,3.32364706 15.2848235,3.32364706 Z" id="Path"></path>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
<title>linkedin-logo</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="linkedin-logo" fill="#6C757D" fill-rule="nonzero">
<path d="M19.9590255,12.2593689 L19.9590255,19.9786408 L15.6811601,19.9786408 L15.6811601,12.7763592 C15.6811601,10.9670874 15.062413,9.7323301 13.5139675,9.7323301 C12.3319258,9.7323301 11.6284919,10.564466 11.3190255,11.3694175 C11.2061717,11.6571845 11.177123,12.0577184 11.177123,12.460534 L11.177123,19.9786408 L6.89781903,19.9786408 C6.89781903,19.9786408 6.95545244,7.78033981 6.89781903,6.51650485 L11.1767053,6.51650485 L11.1767053,8.42470874 C11.1680278,8.43898058 11.1567517,8.45436893 11.1485847,8.46820388 L11.1767053,8.46820388 L11.1767053,8.42470874 C11.7451972,7.50873786 12.760464,6.20024272 15.0329466,6.20024272 C17.8483991,6.20019417 19.9590255,8.12432039 19.9590255,12.2593689 Z M2.42148492,0.0270873786 C0.957540603,0.0270873786 0,1.03160194 0,2.35257282 C0,3.64475728 0.929837587,4.67975728 2.36468677,4.67975728 L2.39327146,4.67975728 C3.88556845,4.67975728 4.81364269,3.64495146 4.81364269,2.35257282 C4.78552204,1.03160194 3.88556845,0.0270873786 2.42148492,0.0270873786 Z M0.254153132,19.9786408 L4.53183295,19.9786408 L4.53183295,6.51650485 L0.254153132,6.51650485 L0.254153132,19.9786408 Z" id="LinkedIn"></path>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="17px" viewBox="0 0 20 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->
<title>twitter-logo</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="twitter-logo" fill="#6C757D">
<path d="M20,1.93653595 C19.2638889,2.26271242 18.4740523,2.48392157 17.644183,2.58267974 C18.4915359,2.07526144 19.1401634,1.27042484 19.4475817,0.314346405 C18.6527451,0.784248366 17.7753922,1.12545752 16.8405556,1.31042484 C16.0919608,0.511830065 15.0271569,0.0144117647 13.8461111,0.0144117647 C11.5802941,0.0144117647 9.74313725,1.85156863 9.74313725,4.11614379 C9.74313725,4.43732026 9.77937908,4.75101307 9.84937908,5.05098039 C6.44003268,4.87973856 3.41686275,3.24630719 1.39349673,0.764248366 C1.03980392,1.36915033 0.838594771,2.07398693 0.838594771,2.82637255 C0.838594771,4.24986928 1.56346405,5.50588235 2.66326797,6.24071895 C1.99088235,6.21823529 1.35849673,6.03326797 0.804869281,5.72581699 L0.804869281,5.77705882 C0.804869281,7.76418301 2.21960784,9.42261438 4.0954902,9.80006536 C3.75179739,9.89254902 3.38937908,9.94379085 3.01444444,9.94379085 C2.7495098,9.94379085 2.49330065,9.91754902 2.2420915,9.86754902 C2.76447712,11.4984967 4.27921569,12.6845098 6.07388889,12.7170261 C4.67039216,13.8168301 2.90071895,14.4704575 0.978594771,14.4704575 C0.647418301,14.4704575 0.32120915,14.4504575 3.26797386e-05,14.4142157 C1.81594771,15.5802614 3.97179739,16.2601307 6.28885621,16.2601307 C13.8361765,16.2601307 17.9616667,10.0087908 17.9616667,4.58732026 L17.9479085,4.05617647 C18.7539869,3.48124183 19.4513399,2.75888889 20,1.93653595 Z" id="Path"></path>
</g>
</g>
</svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 630 630">
<rect width="630" height="630" fill="#f7df1e"/>
<path d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"/>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="56.48px" height="56.48px" viewBox="0 0 56.48 56.48" style="enable-background:new 0 0 56.48 56.48;" xml:space="preserve"
>
<g>
<path d="M24.25,26.305h-4.284v-5.367h4.284v1.118h-3.002v0.967h2.931v1.1h-2.931v1.072h3.002V26.305z M14.703,26.305l-1.863-4.206
v4.207h-2.61l-0.493-1.197h-2.67l-0.498,1.197H5.176l2.297-5.367h1.904l2.183,5.082v-5.082h2.094l1.679,3.641l1.541-3.641h2.138
v5.367h-1.315l-0.005-4.203l-1.86,4.203L14.703,26.305L14.703,26.305z M9.273,23.99l-0.877-2.139L7.524,23.99H9.273z
M30.022,31.944c0,1.491-1.112,1.799-2.233,1.799h-1.6v1.8h-2.493l-1.58-1.777l-1.642,1.777h-5.081v-5.367h5.158l1.58,1.758
l1.632-1.758h4.098C28.879,30.175,30.022,30.458,30.022,31.944z M21.291,32.849l-1.403-1.563h-3.215v0.976h2.815v1.096h-2.815
v1.068h3.152L21.291,32.849z M24.911,30.751l-1.97,2.116l1.97,2.188V30.751z M28.645,31.944c0-0.47-0.32-0.659-0.784-0.659h-1.672
v1.367h1.656C28.339,32.653,28.645,32.408,28.645,31.944z M26.424,26.305H25.14v-5.367h2.95c0.655,0,1.138,0.017,1.554,0.257
c0.404,0.24,0.648,0.59,0.648,1.189c0,0.855-0.57,1.298-0.904,1.43c0.281,0.107,0.521,0.296,0.635,0.452
c0.182,0.267,0.213,0.505,0.213,0.984v1.055h-1.294l-0.006-0.677c0-0.323,0.031-0.787-0.202-1.045
c-0.187-0.188-0.473-0.229-0.935-0.229h-1.375V26.305z M26.422,23.248h1.559c0.249,0,0.457-0.003,0.635-0.11
c0.165-0.087,0.264-0.276,0.264-0.51c0-0.23-0.103-0.396-0.269-0.474c-0.152-0.086-0.386-0.097-0.608-0.097h-1.58L26.422,23.248
L26.422,23.248z M32.344,20.939h-1.309v5.367h1.309V20.939z M33.66,25.712c-0.452-0.456-0.688-1.074-0.688-2.049
c0-0.796,0.141-1.524,0.691-2.099c0.413-0.428,1.064-0.625,1.948-0.625h1.241v1.15h-1.215c-0.471,0-0.734,0.07-0.988,0.318
c-0.219,0.226-0.368,0.652-0.368,1.216c0,0.574,0.112,0.989,0.353,1.259c0.197,0.213,0.559,0.277,0.894,0.277h0.575l1.812-4.22
h1.921l2.172,5.076v-5.076h1.953l2.256,3.738v-3.738h1.312v5.367h-1.816l-2.434-4.028v4.028h-2.611l-0.5-1.197h-2.664l-0.482,1.197
H35.52C34.895,26.305,34.106,26.167,33.66,25.712z M37.963,23.99h1.77l-0.889-2.139L37.963,23.99z M35.27,23.041
c-0.012,0.017-0.102,0.21-0.102,0.582c0,0.368,0.059,0.545,0.102,0.625c0.045,0.012,0.128,0.026,0.252,0.026l0.556-1.299h-0.438
C35.338,22.974,35.307,23.006,35.27,23.041z M56.48,11.393v33.695c0,0.803-0.65,1.454-1.454,1.454H1.454
C0.65,46.542,0,45.89,0,45.087V11.393c0-0.803,0.65-1.454,1.454-1.454h53.572C55.83,9.939,56.48,10.59,56.48,11.393z
M14.703,27.192h1.127c0.352,0,0.668-0.207,0.81-0.528l0.17-0.38v0.022c0,0.489,0.396,0.885,0.886,0.885h1.315
c0.18,0,0.337-0.068,0.478-0.159c0.14,0.091,0.297,0.159,0.478,0.159h4.284c0.166,0,0.313-0.058,0.444-0.137
c0.134,0.079,0.279,0.137,0.445,0.137h1.284c0.489,0,0.886-0.397,0.886-0.886v-1.066h0.489c0.111,0,0.19,0.003,0.249,0.007
c0.006,0.091,0.004,0.199,0.004,0.271l-0.002,0.118l0.005,0.677c0.004,0.486,0.4,0.879,0.887,0.879h1.294
c0.146,0,0.277-0.044,0.398-0.107c0.123,0.063,0.256,0.107,0.401,0.107h1.31c0.429,0,0.769-0.31,0.852-0.714
c0.729,0.611,1.751,0.714,2.322,0.714h1.502c0.359,0,0.685-0.22,0.818-0.555l0.262-0.643h1.478l0.271,0.652
c0.14,0.33,0.461,0.545,0.818,0.545h2.611c0.488,0,0.886-0.397,0.886-0.886v-0.847l0.787,1.305
c0.161,0.266,0.448,0.428,0.761,0.428h1.816c0.488,0,0.886-0.397,0.886-0.886v-5.367c0-0.489-0.396-0.886-0.886-0.886h-1.312
c-0.49,0-0.888,0.397-0.888,0.886v0.554l-0.61-1.011c-0.16-0.266-0.447-0.428-0.758-0.428h-1.953c-0.49,0-0.887,0.397-0.887,0.886
v0.753l-0.471-1.102c-0.141-0.325-0.46-0.537-0.814-0.537h-1.921c-0.196,0-0.381,0.064-0.53,0.176
c-0.147-0.111-0.332-0.176-0.529-0.176h-1.241c-1.052,0-1.834,0.256-2.408,0.753c-0.065-0.423-0.417-0.753-0.86-0.753h-1.309
c-0.349,0-0.645,0.207-0.789,0.499c-0.055-0.04-0.099-0.087-0.16-0.124c-0.603-0.348-1.234-0.375-1.997-0.375h-2.95
c-0.166,0-0.312,0.058-0.445,0.137c-0.131-0.079-0.278-0.137-0.444-0.137h-4.284c-0.181,0-0.338,0.067-0.478,0.159
c-0.141-0.092-0.298-0.159-0.478-0.159h-2.138c-0.354,0-0.676,0.213-0.814,0.541l-0.762,1.796l-0.839-1.822
c-0.146-0.313-0.461-0.515-0.805-0.515H11.56c-0.49,0-0.886,0.397-0.886,0.886v0.771l-0.481-1.122
c-0.141-0.325-0.46-0.536-0.815-0.536H7.474c-0.355,0-0.676,0.212-0.815,0.537l-2.296,5.367c-0.118,0.273-0.089,0.587,0.074,0.837
c0.164,0.248,0.442,0.398,0.74,0.398h1.394c0.356,0,0.68-0.216,0.816-0.546l0.271-0.652h1.486l0.267,0.648
c0.137,0.332,0.46,0.549,0.82,0.549h2.609c0.489,0,0.886-0.397,0.886-0.886v-0.021l0.168,0.381
C14.035,26.985,14.353,27.192,14.703,27.192z M52.19,33.849c0-0.75-0.2-1.308-0.64-1.76c-0.009-0.009-0.019-0.018-0.026-0.026
c0.245-0.158,0.405-0.433,0.405-0.746v-1.142c0-0.49-0.396-0.887-0.885-0.887h-2.572c-0.801,0-1.402,0.235-1.842,0.592
c-0.123-0.343-0.441-0.592-0.828-0.592h-2.57c-0.706,0-1.266,0.176-1.688,0.462c-0.152-0.271-0.432-0.462-0.764-0.462H36.5
c-0.346,0-0.635,0.202-0.781,0.489c-0.062-0.042-0.105-0.093-0.172-0.132c-0.619-0.331-1.279-0.357-1.961-0.357h-2.962
c-0.347,0-0.639,0.203-0.784,0.493c-0.449-0.294-1.081-0.493-1.979-0.493h-4.098c-0.247,0-0.482,0.102-0.65,0.283l-0.971,1.048
l-0.932-1.037c-0.167-0.188-0.406-0.294-0.659-0.294h-5.158c-0.489,0-0.886,0.396-0.886,0.887v5.367
c0,0.489,0.396,0.887,0.886,0.887h5.081c0.247,0,0.482-0.104,0.65-0.285l0.979-1.06l0.929,1.046
c0.168,0.189,0.41,0.297,0.663,0.297h2.493c0.49,0,0.887-0.396,0.887-0.886v-0.915h0.713c0.866,0,1.494-0.178,1.949-0.449v1.364
c0,0.489,0.396,0.886,0.887,0.886h1.289c0.489,0,0.886-0.396,0.886-0.886v-1.075h0.484c0.118,0,0.201,0.004,0.26,0.008
c0.006,0.095,0.006,0.211,0.004,0.287v0.78c0,0.489,0.396,0.886,0.887,0.886h1.287c0.142,0,0.271-0.041,0.39-0.1
c0.118,0.061,0.249,0.1,0.392,0.1h4.28c0.14,0,0.267-0.039,0.384-0.096c0.118,0.057,0.244,0.096,0.385,0.096h2.498
c0.797,0,1.441-0.194,1.928-0.539c0.136,0.316,0.449,0.539,0.815,0.539h2.498C51.107,36.429,52.19,35.464,52.19,33.849z
M44.215,32.281l-0.689-0.02c-0.219,0-0.363-0.014-0.5-0.061c-0.161-0.061-0.28-0.197-0.28-0.4c0-0.17,0.052-0.299,0.194-0.387
c0.128-0.087,0.279-0.097,0.514-0.097h2.352v-1.142h-2.57c-1.346,0-1.834,0.818-1.834,1.598c0,1.697,1.503,1.621,2.701,1.66
c0.225,0,0.359,0.037,0.457,0.119c0.09,0.076,0.156,0.198,0.156,0.355c0,0.146-0.062,0.268-0.15,0.35
c-0.108,0.102-0.281,0.133-0.523,0.133h-2.488v1.151h2.498c1.293,0,2.016-0.539,2.016-1.694c0-0.551-0.135-0.879-0.385-1.137
C45.389,32.417,44.911,32.298,44.215,32.281z M34.881,33.048c0.284,0.104,0.519,0.295,0.627,0.451
c0.183,0.262,0.209,0.506,0.213,0.979v1.064h-1.287v-0.671c0-0.323,0.031-0.801-0.207-1.051c-0.188-0.192-0.473-0.238-0.941-0.238
h-1.37v1.96h-1.288v-5.367h2.961c0.649,0,1.121,0.027,1.545,0.252c0.403,0.244,0.658,0.58,0.658,1.192
C35.79,32.478,35.217,32.915,34.881,33.048z M34.371,31.866c0-0.229-0.099-0.396-0.265-0.483c-0.156-0.092-0.386-0.097-0.612-0.097
h-1.58v1.206h1.559c0.25,0,0.463-0.009,0.635-0.111C34.272,32.281,34.371,32.095,34.371,31.866z M36.502,35.542h4.28v-1.113
l-3.004-0.006v-1.067h2.93v-1.095h-2.93v-0.977h3.004v-1.109h-4.28V35.542z M49.456,32.281l-0.69-0.02
c-0.217,0-0.362-0.014-0.5-0.061c-0.159-0.061-0.279-0.197-0.279-0.4c0-0.17,0.052-0.299,0.193-0.387
c0.129-0.087,0.281-0.097,0.515-0.097h2.353v-1.142h-2.572c-1.344,0-1.834,0.818-1.834,1.598c0,1.697,1.504,1.621,2.703,1.66
c0.224,0,0.357,0.037,0.457,0.119c0.088,0.076,0.155,0.198,0.155,0.355c0,0.146-0.063,0.268-0.149,0.35
c-0.109,0.102-0.282,0.133-0.524,0.133h-2.487v1.151h2.498c1.293,0,2.014-0.539,2.014-1.694c0-0.551-0.133-0.879-0.385-1.137
C50.631,32.417,50.152,32.298,49.456,32.281z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 34 21.5" style="enable-background:new 0 0 34 21.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#FF5F00;}
.st2{fill:#EB001B;}
.st3{fill:#F79E1B;}
</style>
<rect id="XMLID_1_" x="0" width="34" height="21.5"/>
<g id="XMLID_4703_">
<path id="XMLID_4607_" class="st0" d="M9.5,19.8v-1.2c0-0.5-0.3-0.8-0.7-0.8c-0.2,0-0.5,0.1-0.7,0.3c-0.1-0.2-0.3-0.3-0.6-0.3
c-0.2,0-0.4,0.1-0.6,0.3v-0.2H6.5v1.9h0.4v-1.1c0-0.3,0.2-0.5,0.5-0.5c0.3,0,0.4,0.2,0.4,0.5v1.1h0.4v-1.1c0-0.3,0.2-0.5,0.5-0.5
c0.3,0,0.4,0.2,0.4,0.5v1.1L9.5,19.8L9.5,19.8z M15.8,17.9h-0.7v-0.6h-0.4v0.6h-0.4v0.4h0.4v0.9c0,0.4,0.2,0.7,0.7,0.7
c0.2,0,0.4-0.1,0.5-0.1l-0.1-0.3c-0.1,0.1-0.3,0.1-0.4,0.1c-0.2,0-0.3-0.1-0.3-0.3v-0.9h0.7L15.8,17.9L15.8,17.9z M19.4,17.8
c-0.2,0-0.4,0.1-0.5,0.3v-0.2h-0.4v1.9h0.4v-1.1c0-0.3,0.2-0.5,0.4-0.5c0.1,0,0.2,0,0.3,0l0.1-0.4C19.6,17.8,19.5,17.8,19.4,17.8
L19.4,17.8z M14,18c-0.2-0.1-0.5-0.2-0.8-0.2c-0.5,0-0.8,0.2-0.8,0.6c0,0.3,0.2,0.5,0.7,0.6l0.2,0c0.2,0,0.4,0.1,0.4,0.2
c0,0.1-0.2,0.2-0.5,0.2c-0.3,0-0.5-0.1-0.6-0.2l-0.2,0.3c0.3,0.2,0.6,0.3,0.8,0.3c0.6,0,0.9-0.3,0.9-0.6c0-0.3-0.2-0.5-0.7-0.6
l-0.2,0c-0.2,0-0.3-0.1-0.3-0.2c0-0.1,0.2-0.2,0.4-0.2c0.2,0,0.5,0.1,0.6,0.2L14,18z M19.8,18.8c0,0.6,0.4,1,1,1
c0.3,0,0.5-0.1,0.7-0.2l-0.2-0.3c-0.2,0.1-0.3,0.2-0.5,0.2c-0.3,0-0.6-0.3-0.6-0.7c0-0.4,0.3-0.7,0.6-0.7c0.2,0,0.3,0.1,0.5,0.2
l0.2-0.3c-0.2-0.2-0.4-0.2-0.7-0.2C20.2,17.8,19.8,18.2,19.8,18.8L19.8,18.8z M17.1,17.8c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1
c0.3,0,0.6-0.1,0.8-0.3l-0.2-0.3c-0.2,0.1-0.4,0.2-0.6,0.2c-0.3,0-0.5-0.2-0.6-0.5H18c0-0.1,0-0.1,0-0.2
C18,18.2,17.6,17.8,17.1,17.8L17.1,17.8z M17.1,18.2c0.3,0,0.5,0.2,0.5,0.5h-1C16.6,18.4,16.8,18.2,17.1,18.2L17.1,18.2z
M11.9,18.8v-1h-0.4v0.2c-0.1-0.2-0.4-0.3-0.6-0.3c-0.5,0-1,0.4-1,1s0.4,1,1,1c0.3,0,0.5-0.1,0.6-0.3v0.2h0.4V18.8z M10.3,18.8
c0-0.4,0.2-0.7,0.6-0.7c0.4,0,0.6,0.3,0.6,0.7s-0.2,0.7-0.6,0.7C10.5,19.5,10.3,19.2,10.3,18.8L10.3,18.8z M25.2,17.8
c-0.2,0-0.4,0.1-0.5,0.3v-0.2h-0.4v1.9h0.4v-1.1c0-0.3,0.2-0.5,0.4-0.5c0.1,0,0.2,0,0.3,0l0.1-0.4C25.4,17.8,25.3,17.8,25.2,17.8
L25.2,17.8z M28.3,19.5C28.4,19.5,28.4,19.5,28.3,19.5c0.1,0,0.1,0,0.1,0.1c0,0,0,0,0,0.1c0,0,0,0,0,0.1c0,0,0,0.1,0,0.1
c0,0,0,0,0,0.1c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0-0.1c0,0,0,0,0-0.1c0,0,0-0.1,0-0.1
c0,0,0,0,0-0.1C28.2,19.6,28.2,19.5,28.3,19.5C28.3,19.5,28.3,19.5,28.3,19.5z M28.3,19.9C28.4,19.9,28.4,19.9,28.3,19.9
c0.1,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0,0,0,0-0.1c0,0,0,0,0-0.1c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0
c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0,0,0.1c0,0,0,0,0,0C28.2,19.8,28.3,19.8,28.3,19.9C28.3,19.9,28.3,19.9,28.3,19.9z M28.3,19.6
C28.4,19.6,28.4,19.6,28.3,19.6C28.4,19.6,28.4,19.7,28.3,19.6C28.4,19.7,28.4,19.7,28.3,19.6c0,0.1,0,0.1,0,0.1l0.1,0.1h0
l-0.1-0.1h0v0.1h0L28.3,19.6L28.3,19.6L28.3,19.6z M28.3,19.7L28.3,19.7L28.3,19.7C28.4,19.7,28.4,19.7,28.3,19.7
C28.4,19.7,28.4,19.7,28.3,19.7C28.4,19.7,28.4,19.7,28.3,19.7C28.4,19.7,28.4,19.7,28.3,19.7L28.3,19.7z M23.7,18.8v-1h-0.4v0.2
c-0.1-0.2-0.4-0.3-0.6-0.3c-0.5,0-1,0.4-1,1s0.4,1,1,1c0.3,0,0.5-0.1,0.6-0.3v0.2h0.4V18.8z M22.2,18.8c0-0.4,0.2-0.7,0.6-0.7
c0.4,0,0.6,0.3,0.6,0.7s-0.2,0.7-0.6,0.7C22.4,19.5,22.2,19.2,22.2,18.8L22.2,18.8z M27.6,18.8v-1.7h-0.4v1
c-0.1-0.2-0.4-0.3-0.6-0.3c-0.5,0-1,0.4-1,1s0.4,1,1,1c0.3,0,0.5-0.1,0.6-0.3v0.2h0.4V18.8z M26.1,18.8c0-0.4,0.2-0.7,0.6-0.7
c0.4,0,0.6,0.3,0.6,0.7s-0.2,0.7-0.6,0.7C26.3,19.5,26.1,19.2,26.1,18.8z"/>
<g id="XMLID_4571_">
<rect id="XMLID_4635_" x="13.5" y="3.2" class="st1" width="7" height="11.4"/>
<path id="XMLID_4576_" class="st2" d="M14.2,8.9c0-2.3,1.1-4.4,2.8-5.7c-1.2-1-2.8-1.6-4.5-1.6c-4,0-7.3,3.3-7.3,7.3
c0,4,3.3,7.3,7.3,7.3c1.7,0,3.3-0.6,4.5-1.6C15.3,13.3,14.2,11.2,14.2,8.9z"/>
<path id="XMLID_4707_" class="st3" d="M28.1,13.4v-0.2h0.1v0h-0.2v0H28L28.1,13.4L28.1,13.4z M28.5,13.4v-0.3h-0.1l-0.1,0.2
l-0.1-0.2h-0.1v0.3h0.1v-0.2l0.1,0.2h0.1l0.1-0.2L28.5,13.4L28.5,13.4L28.5,13.4z"/>
<path id="XMLID_4631_" class="st3" d="M28.8,8.9c0,4-3.3,7.3-7.3,7.3c-1.7,0-3.3-0.6-4.5-1.6c1.7-1.3,2.8-3.4,2.8-5.7
c0-2.3-1.1-4.4-2.8-5.7c1.2-1,2.8-1.6,4.5-1.6C25.5,1.6,28.8,4.9,28.8,8.9z"/>
</g>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 504 504" style="enable-background:new 0 0 504 504;" xml:space="preserve">
<path style="fill:#139AD6;" d="M389.6,221.2h-27.2c-1.6,0-3.2,1.6-4,3.2l-11.2,70.4c0,1.6,0.8,2.4,2.4,2.4H364
c1.6,0,2.4-0.8,2.4-2.4l3.2-20c0-1.6,1.6-3.2,4-3.2h8.8c18.4,0,28.8-8.8,31.2-26.4c1.6-7.2,0-13.6-3.2-17.6
C405.6,223.6,398.4,221.2,389.6,221.2 M392.8,247.6c-1.6,9.6-8.8,9.6-16,9.6H372l3.2-18.4c0-0.8,0.8-1.6,2.4-1.6h1.6
c4.8,0,9.6,0,12,3.2C392.8,241.2,392.8,243.6,392.8,247.6"/>
<g>
<path style="fill:#263B80;" d="M193.6,221.2h-27.2c-1.6,0-3.2,1.6-4,3.2l-11.2,70.4c0,1.6,0.8,2.4,2.4,2.4h12.8
c1.6,0,3.2-1.6,4-3.2l3.2-19.2c0-1.6,1.6-3.2,4-3.2h8.8c18.4,0,28.8-8.8,31.2-26.4c1.6-7.2,0-13.6-3.2-17.6
C209.6,223.6,203.2,221.2,193.6,221.2 M196.8,247.6c-1.6,9.6-8.8,9.6-16,9.6h-4l3.2-18.4c0-0.8,0.8-1.6,2.4-1.6h1.6
c4.8,0,9.6,0,12,3.2C196.8,241.2,197.6,243.6,196.8,247.6"/>
<path style="fill:#263B80;" d="M276,246.8h-12.8c-0.8,0-2.4,0.8-2.4,1.6l-0.8,4l-0.8-1.6c-3.2-4-8.8-5.6-15.2-5.6
c-14.4,0-27.2,11.2-29.6,26.4c-1.6,8,0.8,15.2,4.8,20s9.6,6.4,16.8,6.4c12,0,18.4-7.2,18.4-7.2l-0.8,4c0,1.6,0.8,2.4,2.4,2.4h12
c1.6,0,3.2-1.6,4-3.2l7.2-44.8C278.4,248.4,276.8,246.8,276,246.8 M257.6,272.4c-1.6,7.2-7.2,12.8-15.2,12.8c-4,0-7.2-1.6-8.8-3.2
c-1.6-2.4-2.4-5.6-2.4-9.6c0.8-7.2,7.2-12.8,14.4-12.8c4,0,6.4,1.6,8.8,3.2C256.8,265.2,257.6,269.2,257.6,272.4"/>
</g>
<path style="fill:#139AD6;" d="M471.2,246.8h-12.8c-0.8,0-2.4,0.8-2.4,1.6l-0.8,4l-0.8-1.6c-3.2-4-8.8-5.6-15.2-5.6
c-14.4,0-27.2,11.2-29.6,26.4c-1.6,8,0.8,15.2,4.8,20s9.6,6.4,16.8,6.4c12,0,18.4-7.2,18.4-7.2l-0.8,4c0,1.6,0.8,2.4,2.4,2.4h12
c1.6,0,3.2-1.6,4-3.2l7.2-44.8C473.6,248.4,472.8,246.8,471.2,246.8 M452.8,272.4c-1.6,7.2-7.2,12.8-15.2,12.8c-4,0-7.2-1.6-8.8-3.2
c-1.6-2.4-2.4-5.6-2.4-9.6c0.8-7.2,7.2-12.8,14.4-12.8c4,0,6.4,1.6,8.8,3.2C452.8,265.2,453.6,269.2,452.8,272.4"/>
<path style="fill:#263B80;" d="M345.6,246.8H332c-1.6,0-2.4,0.8-3.2,1.6l-17.6,27.2l-8-25.6c-0.8-1.6-1.6-2.4-4-2.4h-12.8
c-1.6,0-2.4,1.6-2.4,3.2l14.4,42.4l-13.6,19.2c-0.8,1.6,0,4,1.6,4h12.8c1.6,0,2.4-0.8,3.2-1.6l44-63.2
C348.8,249.2,347.2,246.8,345.6,246.8"/>
<path style="fill:#139AD6;" d="M486.4,223.6l-11.2,72c0,1.6,0.8,2.4,2.4,2.4h11.2c1.6,0,3.2-1.6,4-3.2l11.2-70.4
c0-1.6-0.8-2.4-2.4-2.4h-12.8C488,221.2,487.2,222,486.4,223.6"/>
<path style="fill:#263B80;" d="M92,197.2c-5.6-6.4-16-9.6-30.4-9.6h-40c-2.4,0-4.8,2.4-5.6,4.8L0,297.2c0,2.4,1.6,4,3.2,4H28
l6.4-39.2v1.6c0.8-2.4,3.2-4.8,5.6-4.8h12c23.2,0,40.8-9.6,46.4-36c0-0.8,0-1.6,0-2.4c-0.8,0-0.8,0,0,0
C99.2,210,97.6,203.6,92,197.2"/>
<path style="fill:#139AD6;" d="M97.6,220.4L97.6,220.4c0,0.8,0,1.6,0,2.4c-5.6,27.2-23.2,36-46.4,36h-12c-2.4,0-4.8,2.4-5.6,4.8
l-8,48.8c0,1.6,0.8,3.2,3.2,3.2h20.8c2.4,0,4.8-1.6,4.8-4v-0.8l4-24.8v-1.6c0-2.4,2.4-4,4.8-4h3.2c20,0,36-8,40-32
c1.6-9.6,0.8-18.4-4-24C101.6,222.8,100,221.2,97.6,220.4"/>
<path style="fill:#232C65;" d="M92,218c-0.8,0-1.6-0.8-2.4-0.8s-1.6,0-2.4-0.8c-3.2-0.8-6.4-0.8-10.4-0.8H45.6c-0.8,0-1.6,0-2.4,0.8
c-1.6,0.8-2.4,2.4-2.4,4L34.4,262v1.6c0.8-2.4,3.2-4.8,5.6-4.8h12c23.2,0,40.8-9.6,46.4-36c0-0.8,0-1.6,0.8-2.4
c-1.6-0.8-2.4-1.6-4-1.6C92.8,218,92.8,218,92,218"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 504 504" style="enable-background:new 0 0 504 504;" xml:space="preserve">
<polygon style="fill:#3C58BF;" points="184.8,324.4 210.4,180.4 250.4,180.4 225.6,324.4 "/>
<polygon style="fill:#293688;" points="184.8,324.4 217.6,180.4 250.4,180.4 225.6,324.4 "/>
<path style="fill:#3C58BF;" d="M370.4,182c-8-3.2-20.8-6.4-36.8-6.4c-40,0-68.8,20-68.8,48.8c0,21.6,20,32.8,36,40
s20.8,12,20.8,18.4c0,9.6-12.8,14.4-24,14.4c-16,0-24.8-2.4-38.4-8l-5.6-2.4l-5.6,32.8c9.6,4,27.2,8,45.6,8
c42.4,0,70.4-20,70.4-50.4c0-16.8-10.4-29.6-34.4-40c-14.4-7.2-23.2-11.2-23.2-18.4c0-6.4,7.2-12.8,23.2-12.8
c13.6,0,23.2,2.4,30.4,5.6l4,1.6L370.4,182L370.4,182z"/>
<path style="fill:#293688;" d="M370.4,182c-8-3.2-20.8-6.4-36.8-6.4c-40,0-61.6,20-61.6,48.8c0,21.6,12.8,32.8,28.8,40
s20.8,12,20.8,18.4c0,9.6-12.8,14.4-24,14.4c-16,0-24.8-2.4-38.4-8l-5.6-2.4l-5.6,32.8c9.6,4,27.2,8,45.6,8
c42.4,0,70.4-20,70.4-50.4c0-16.8-10.4-29.6-34.4-40c-14.4-7.2-23.2-11.2-23.2-18.4c0-6.4,7.2-12.8,23.2-12.8
c13.6,0,23.2,2.4,30.4,5.6l4,1.6L370.4,182L370.4,182z"/>
<path style="fill:#3C58BF;" d="M439.2,180.4c-9.6,0-16.8,0.8-20.8,10.4l-60,133.6h43.2l8-24h51.2l4.8,24H504l-33.6-144H439.2z
M420.8,276.4c2.4-7.2,16-42.4,16-42.4s3.2-8.8,5.6-14.4l2.4,13.6c0,0,8,36,9.6,44h-33.6V276.4z"/>
<path style="fill:#293688;" d="M448.8,180.4c-9.6,0-16.8,0.8-20.8,10.4l-69.6,133.6h43.2l8-24h51.2l4.8,24H504l-33.6-144H448.8z
M420.8,276.4c3.2-8,16-42.4,16-42.4s3.2-8.8,5.6-14.4l2.4,13.6c0,0,8,36,9.6,44h-33.6V276.4z"/>
<path style="fill:#3C58BF;" d="M111.2,281.2l-4-20.8c-7.2-24-30.4-50.4-56-63.2l36,128h43.2l64.8-144H152L111.2,281.2z"/>
<path style="fill:#293688;" d="M111.2,281.2l-4-20.8c-7.2-24-30.4-50.4-56-63.2l36,128h43.2l64.8-144H160L111.2,281.2z"/>
<path style="fill:#FFBC00;" d="M0,180.4l7.2,1.6c51.2,12,86.4,42.4,100,78.4l-14.4-68c-2.4-9.6-9.6-12-18.4-12H0z"/>
<path style="fill:#F7981D;" d="M0,180.4L0,180.4c51.2,12,93.6,43.2,107.2,79.2l-13.6-56.8c-2.4-9.6-10.4-15.2-19.2-15.2L0,180.4z"/>
<path style="fill:#ED7C00;" d="M0,180.4L0,180.4c51.2,12,93.6,43.2,107.2,79.2l-9.6-31.2c-2.4-9.6-5.6-19.2-16.8-23.2L0,180.4z"/>
<g>
<path style="fill:#051244;" d="M151.2,276.4L124,249.2l-12.8,30.4l-3.2-20c-7.2-24-30.4-50.4-56-63.2l36,128h43.2L151.2,276.4z"/>
<polygon style="fill:#051244;" points="225.6,324.4 191.2,289.2 184.8,324.4 "/>
<path style="fill:#051244;" d="M317.6,274.8L317.6,274.8c3.2,3.2,4.8,5.6,4,8.8c0,9.6-12.8,14.4-24,14.4c-16,0-24.8-2.4-38.4-8
l-5.6-2.4l-5.6,32.8c9.6,4,27.2,8,45.6,8c25.6,0,46.4-7.2,58.4-20L317.6,274.8z"/>
<path style="fill:#051244;" d="M364,324.4h37.6l8-24h51.2l4.8,24H504L490.4,266l-48-46.4l2.4,12.8c0,0,8,36,9.6,44h-33.6
c3.2-8,16-42.4,16-42.4s3.2-8.8,5.6-14.4"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 960 960" style="enable-background:new 0 0 960 960;" xml:space="preserve">
<style type="text/css">
.st0{fill:#05A5D1;}
</style>
<g id="XMLID_17_">
<path id="XMLID_21_" class="st0" d="M960.2,478.3c0-63.5-79.5-123.7-201.5-161C786.8,193,774.3,94.1,719.2,62.4
c-12.7-7.4-27.6-10.9-43.8-10.9v43.6c9,0,16.2,1.8,22.3,5.1c26.6,15.2,38.1,73.3,29.1,147.9c-2.1,18.4-5.7,37.7-10,57.5
c-38.3-9.4-80.1-16.6-124.1-21.3c-26.4-36.2-53.7-69-81.3-97.7c63.7-59.2,123.5-91.7,164.2-91.7V51.3l0,0
c-53.7,0-124.1,38.3-195.2,104.8c-71.1-66.1-141.5-104-195.2-104v43.6c40.5,0,100.5,32.2,164.2,91.1
c-27.4,28.7-54.7,61.4-80.7,97.5c-44.2,4.7-86,11.9-124.3,21.5c-4.5-19.5-7.8-38.5-10.2-56.7c-9.2-74.7,2.1-132.7,28.5-148.1
c5.9-3.5,13.5-5.1,22.5-5.1V52.3l0,0c-16.4,0-31.3,3.5-44.2,10.9c-54.9,31.7-67.2,130.4-38.9,254.3C80.5,355,1.4,415,1.4,478.3
c0,63.5,79.5,123.7,201.5,161c-28.1,124.3-15.6,223.2,39.5,254.8c12.7,7.4,27.6,10.9,44,10.9c53.7,0,124.1-38.3,195.2-104.8
c71.1,66.1,141.5,104,195.2,104c16.4,0,31.3-3.5,44.2-10.9c54.9-31.7,67.2-130.4,38.9-254.3C881,601.8,960.2,541.6,960.2,478.3z
M705.7,348c-7.2,25.2-16.2,51.2-26.4,77.2c-8-15.6-16.4-31.3-25.6-46.9c-9-15.6-18.6-30.9-28.1-45.7
C653.4,336.6,680.1,341.7,705.7,348z M616.2,556.1c-15.2,26.4-30.9,51.4-47.1,74.7c-29.1,2.5-58.6,3.9-88.3,3.9
c-29.5,0-59-1.4-87.9-3.7c-16.2-23.3-32.1-48.1-47.3-74.3c-14.9-25.6-28.3-51.6-40.7-77.8c12.1-26.2,25.8-52.4,40.5-78
c15.2-26.4,30.9-51.4,47.1-74.7c29.1-2.5,58.6-3.9,88.3-3.9c29.5,0,59,1.4,87.9,3.7c16.2,23.3,32.1,48.1,47.3,74.3
c14.9,25.6,28.3,51.6,40.7,77.8C644.4,504.3,630.9,530.5,616.2,556.1z M679.4,530.7c10.6,26.2,19.5,52.4,27,77.8
c-25.6,6.3-52.6,11.5-80.5,15.6c9.6-15,19.2-30.5,28.1-46.3C662.9,562.2,671.3,546.3,679.4,530.7z M481.2,739.2
c-18.2-18.8-36.4-39.7-54.3-62.5c17.6,0.8,35.6,1.4,53.7,1.4c18.4,0,36.5-0.4,54.3-1.4C517.3,699.5,499.2,720.5,481.2,739.2z
M335.8,624.1c-27.8-4.1-54.5-9.2-80.1-15.4c7.2-25.2,16.2-51.2,26.4-77.2c8,15.6,16.4,31.3,25.6,46.9
C316.8,594,326.2,609.3,335.8,624.1z M480.2,217.4c18.2,18.8,36.4,39.7,54.3,62.5c-17.6-0.8-35.6-1.4-53.7-1.4
c-18.4,0-36.5,0.4-54.3,1.4C444.1,257.1,462.2,236.2,480.2,217.4z M335.6,332.5c-9.6,15-19.2,30.5-28.1,46.3
c-9,15.6-17.4,31.3-25.4,46.9c-10.6-26.2-19.5-52.4-27-77.8C280.7,341.9,307.6,336.6,335.6,332.5z M158.7,577.2
C89.5,547.7,44.8,509,44.8,478.3s44.8-69.6,113.9-98.9c16.8-7.2,35.2-13.7,54.1-19.7c11.1,38.3,25.8,78.2,44,119
c-18,40.7-32.4,80.3-43.4,118.4C194.1,591.1,175.7,584.4,158.7,577.2z M263.9,856.5c-26.6-15.2-38.1-73.3-29.1-147.9
c2.1-18.4,5.7-37.7,10-57.5c38.3,9.4,80.1,16.6,124.1,21.3c26.4,36.2,53.7,69,81.3,97.7c-63.7,59.2-123.5,91.7-164.2,91.7
C277.2,861.6,269.7,859.8,263.9,856.5z M727.4,707.6c9.2,74.7-2.1,132.7-28.5,148.1c-5.9,3.5-13.5,5.1-22.5,5.1
c-40.5,0-100.5-32.2-164.2-91.1c27.4-28.7,54.7-61.4,80.7-97.5c44.2-4.7,86-11.9,124.3-21.5C721.8,670.4,725.3,689.4,727.4,707.6z
M802.7,577.2c-16.8,7.2-35.2,13.7-54.1,19.7c-11.1-38.3-25.8-78.2-44-119c18-40.7,32.4-80.3,43.4-118.4
c19.3,6.1,37.7,12.7,54.9,19.9c69.2,29.5,113.9,68.2,113.9,98.9C916.6,509,871.9,547.9,802.7,577.2z"/>
<path id="XMLID_3_" class="st0" d="M285,52.1L285,52.1L285,52.1z"/>
<circle id="XMLID_2_" class="st0" cx="480.6" cy="478.3" r="89.3"/>
<path id="XMLID_1_" class="st0" d="M675.3,51.5L675.3,51.5L675.3,51.5z"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
import 'expose-loader?jQuery!jquery' // eslint-disable-line
import 'expose-loader?$!jquery' // eslint-disable-line
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux'
import ReduxThunk from 'redux-thunk'
import * as serviceWorker from './serviceWorker';
import axios from 'axios';
import App from './components/App';
import config from './config';
import reducers from './reducers';
import * as $ from 'jquery'
window.jQuery = window.$ = $;
axios.defaults.baseURL = config.baseURLApi;
axios.defaults.headers.common['Content-Type'] = "application/json";
const token = localStorage.getItem('token');
if (token) {
axios.defaults.headers.common['Authorization'] = "Bearer " + token;
}
const store = createStore(
reducers,
......@@ -32,8 +23,3 @@ ReactDOM.render(
</Provider>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
......
@import '../../styles/app';
.sidesWrapper {
display: flex;
flex-wrap: wrap;
}
.analyticsSide {
width: 80%;
&:last-child {
width: 20%;
padding-left: $grid-gutter-width;
}
@media (max-width: 1620px) {
width: 100% !important;
&:last-child {
padding-left: 0;
}
}
@media (min-width: 1200px) and (max-width: 1440px) {
.lastSideElement {
max-width: 50%;
}
}
@media (min-width: 1440px) and (max-width: 1620px) {
.lastSideElement {
max-width: 1 / 3 * 100%;
}
}
}
.visitElement {
h6 {
font-size: 115%;
}
}
.sparklineWrapper {
display: flex;
justify-content: center;
min-width: calc(100% - 150px);
}
.notifications {
:global .la {
font-size: $font-size-lg;
margin-top: 0.15rem;
}
p {
margin-bottom: 1.4rem;
}
}
:global .legendColorBox div {
border-radius: 50%;
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import cx from 'classnames';
import { Col, Row, Progress } from 'reactstrap';
import Widget from '../../components/Widget';
import RevenueChart from './components/Charts/RevenueChart';
import LineChart from './components/Charts/LineChart';
import MainChart from './components/Charts/MainChart';
import TaskContainer from './components/TaskContainer/TaskContainer';
import BigStat from './components/BigStat/BigStat';
import TableContainer from './components/TableContainer/TableContainer';
import Calendar from '../dashboard/components/calendar/Calendar';
import mock from './mock';
import s from './Analitycs.module.scss';
import { receiveDataRequest } from '../../actions/analytics';
class Analytics extends Component {
static propTypes = {
visits: PropTypes.any,
performance: PropTypes.any,
server: PropTypes.any,
revenue: PropTypes.any,
mainChart: PropTypes.any,
isReceiving: PropTypes.bool,
dispatch: PropTypes.func.isRequired,
};
static defaultProps = {
visits: {},
performance: {},
server: {},
revenue: [],
mainChart: [],
isReceiving: false
};
componentDidMount() {
this.props.dispatch(receiveDataRequest());
}
render() {
const { visits, isReceiving, performance, server, revenue, mainChart } = this.props;
return (
<div>
<h1 className="page-title mb-xlg mt-lg">Analytics <small>Company performance</small></h1>
<div className={s.sidesWrapper}>
<div className={s.analyticsSide}>
<Row>
<Col xs={12} xl={3} md={6}>
<div className="pb-xlg h-100">
<Widget
className="mb-0 h-100"
close
bodyClass="mt-lg"
fetchingData={isReceiving}
title={<h5 style={{ color: "#757575" }}>Visits Today</h5>}
>
<div className="d-flex justify-content-between align-items-center mb">
<h2 style={{fontSize: '2.1rem'}}>{visits.count}</h2>
<i className="la la-arrow-right text-success rotate-315"/>
</div>
<div className="d-flex flex-wrap justify-content-between">
<div className={cx('mt', s.visitElement)}>
<h6>+{visits.logins}</h6>
<p className="text-muted mb-0 mr">
<small>Logins</small>
</p>
</div>
<div className={cx('mt', s.visitElement)}>
<h6>{visits.sign_out_pct}%</h6>
<p className="text-muted mb-0">
<small>Sign Out</small>
</p>
</div>
<div className={cx('mt', s.visitElement)}>
<h6>{visits.rate_pct}%</h6>
<p className="text-muted mb-0 mr">
<small>Rate</small>
</p>
</div>
</div>
</Widget>
</div>
</Col>
<Col xs={12} xl={3} md={6}>
<div className="pb-xlg h-100">
<Widget
bodyClass="mt"
close
className="mb-0 h-100"
fetchingData={isReceiving}
title={<h5 style={{ color: "#757575" }}>Revenue Breakdown</h5>}
>
<RevenueChart data={revenue} />
</Widget>
</div>
</Col>
<Col xs={12} xl={3} md={6}>
<div className="pb-xlg h-100">
<Widget
bodyClass="mt"
close
className="mb-0 h-100"
fetchingData={isReceiving}
title={<h5 style={{ color: "#757575" }}>App Performance</h5>}
>
<p className="text-muted d-flex flex-wrap">
<small className="mr-lg d-flex align-items-center">
<span className="circle bg-success text-success mr-xs" style={{ fontSize: '4px' }}>.</span>
This Period
</small>
<small className="mr-lg d-flex align-items-center">
<span className="circle bg-warning text-warning mr-xs" style={{ fontSize: '4px' }}>.</span>
Last Period
</small>
</p>
<h6 className="fs-sm text-muted">SDK</h6>
<Progress color="success" className="progress-xs" style={{height: '3px', marginBottom: '5px'}}
value={performance.sdk?.this_period_pct}/>
<Progress color="warning" className="progress-xs" style={{height: '3px'}}
value={performance.sdk?.last_period_pct}/>
<h6 className="mt fs-sm text-muted">Integration</h6>
<Progress color="success" className="progress-xs" style={{height: '3px', marginBottom: '5px'}}
value={performance.integration?.this_period_pct}/>
<Progress color="warning" className="progress-xs" style={{height: '3px'}}
value={performance.integration?.last_period_pct}/>
</Widget>
</div>
</Col>
<Col xs={12} xl={3} md={6}>
<div className="pb-xlg h-100">
<Widget
bodyClass="mt-lg"
close
className="mb-0 h-100"
fetchingData={isReceiving}
title={<h5 style={{ color: "#757575" }}>Server Overview</h5>}
>
<div className="d-flex justify-content-between flex-wrap mb-sm">
<p className="width-150"><small>{server[1]?.pct}% <span style={{ color: '#a3aeb7' }}>/</span> {server[1]?.temp}°С <span style={{ color: '#a3aeb7' }}>/</span> {server[1]?.frequency} Ghz</small></p>
<div className={s.sparklineWrapper}>
<LineChart color="#ffc247" />
</div>
</div>
<div className="d-flex justify-content-between flex-wrap mb-sm">
<p className="width-150"><small>{server[2]?.pct}% <span style={{ color: '#a3aeb7' }}>/</span> {server[2]?.temp}°С <span style={{ color: '#a3aeb7' }}>/</span> {server[2]?.frequency} Ghz</small></p>
<div className={s.sparklineWrapper}>
<LineChart color="#9964e3" />
</div>
</div>
</Widget>
</div>
</Col>
<Col xs={12}>
<MainChart data={mainChart} isReceiving={isReceiving} />
</Col>
<Col xs={12} lg={6} xl={4}>
<BigStat {...mock.bigStat[0]} />
</Col>
<Col xs={12} lg={6} xl={4}>
<BigStat {...mock.bigStat[1]} />
</Col>
<Col xs={12} lg={6} xl={4}>
<BigStat {...mock.bigStat[2]} />
</Col>
<Col xs={12} className="mb-lg">
<Widget
className="pb-0"
bodyClass="p-0 mt"
title={<h4> Support <strong>Requests</strong></h4>}
close settings
>
<TableContainer data={mock.table} />
</Widget>
</Col>
</Row>
</div>
<div className={s.analyticsSide}>
<Row>
<Col xs={12} md={6} xl={12} className={s.lastSideElement}>
<Widget className="mb-xlg" bodyClass="pb-0 mt-0">
<Calendar white />
</Widget>
</Col>
<Col xs={12} md={6} xl={12} className={s.lastSideElement}>
<TaskContainer data={mock.tasks} />
</Col>
<Col xs={12} md={6} xl={12} className={s.lastSideElement}>
<Widget
className="widget"
bodyClass={cx(s.notifications, 'w-100 mt-lg')}
title={
<h4>Notifications <span className="badge badge-pill badge-success fw-normal pull-right mt-xs">{mock.notifications.length}</span></h4>
}
>
{mock.notifications.map(({ id, icon, color, content }) => (
<div className="d-flex align-items-start" key={id}>
<i className={`la la-${icon} mr text-${color}`} />
<p
className={cx({ 'mb-0': id === mock.notifications.length - 1 })}
dangerouslySetInnerHTML={{ __html: content }}
/>
</div>
))}
</Widget>
</Col>
</Row>
</div>
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
visits: state.analytics.visits,
isReceiving: state.analytics.isReceiving,
performance: state.analytics.performance,
revenue: state.analytics.revenue,
server: state.analytics.server,
mainChart: state.analytics.mainChart,
}
}
export default connect(mapStateToProps)(Analytics);
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import {
UncontrolledButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
import s from './BigStat.module.scss';
class BigStat extends Component {
static propTypes = {
product: PropTypes.string.isRequired,
total: PropTypes.string.isRequired,
registrations: PropTypes.shape({
value: PropTypes.number,
profit: PropTypes.bool,
}).isRequired,
bounce: PropTypes.shape({
value: PropTypes.number,
profit: PropTypes.bool,
}).isRequired,
color: PropTypes.string.isRequired,
}
state = { simpleSelectDropdownValue: 'Daily' }
changeSelectDropdownSimple = (e) => {
this.setState({ simpleSelectDropdownValue: e.currentTarget.textContent });
}
render() {
const { product, total, registrations, bounce, color } = this.props;
return (
<div className="pb-xlg h-100">
<Widget
className="mb-0 h-100"
bodyClass="p-0 mt"
title={
<div className="d-flex justify-content-between flex-wrap">
<h4 className={cx('d-flex align-items-center pb-1', s.bigStatTitle)}>
<span className={`circle bg-${color} mr-sm`} style={{ fontSize: '6px' }} />
Statistic <span className="fw-normal ml-xs">{product}</span>
</h4>
<UncontrolledButtonDropdown className={s.dropdown}>
<DropdownToggle
caret color="default"
className="dropdown-toggle-split mr-xs"
>
{this.state.simpleSelectDropdownValue}&nbsp;&nbsp;
</DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.changeSelectDropdownSimple}>
Daily
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownSimple}>
Weekly
</DropdownItem>
<DropdownItem onClick={this.changeSelectDropdownSimple}>
Monthly
</DropdownItem>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
}
>
<h4 className="fw-semi-bold mb-lg px-4">{total}</h4>
<div className="d-flex border-top">
<div className="w-50 border-right py-3 pr-2 pl-4">
<div className="d-flex align-items-start">
<h6>+{registrations.value}</h6>
<i
className={`la la-arrow-right ml-sm text-${registrations.profit ? 'success' : 'danger'}
rotate-${registrations.profit ? '315' : '45'}`}
/>
</div>
<p className="text-muted mb-0 mr"><small>Registrations</small></p>
</div>
<div className="w-50 py-3 pl-2">
<div className="d-flex align-items-start">
<h6>{bounce.value}%</h6>
<i
className={`la la-arrow-right ml-sm text-${bounce.profit ? 'success' : 'danger'}
rotate-${bounce.profit ? '315' : '45'}`}
/>
</div>
<p className="text-muted mb-0 mr"><small>Bounce Rate</small></p>
</div>
</div>
</Widget>
</div>
);
}
}
export default BigStat;
.bigStatTitle {
width: 220px;
margin-right: 0.5rem;
}
.dropdown {
:global {
.dropdown-toggle {
background-color: transparent !important;
font-size: 90%;
border-color: transparent;
&:hover {
border-color: #c4ccd4;
background-color: transparent;
}
&:active,
&:focus {
background-color: transparent !important;
}
}
}
}
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import $ from 'jquery';
/* eslint-disable */
import 'imports-loader?jQuery=jquery,this=>window!jquery-sparkline';
/* eslint-enable */
export default class LineChart extends PureComponent {
static propTypes = {
color: PropTypes.string.isRequired,
}
componentDidMount() {
this.initChart(this.getData());
}
getData() { // eslint-disable-line
const randomData = [];
for (let i = 0; i < 150; i += 1) {
randomData.push((i/9+Math.sin(i/6)*8+Math.random() * 2).toFixed(2));
}
return randomData;
}
initChart(data) {
this.$chartContainer.sparkline(data, {
type: 'line',
lineWidth: 1.67,
lineColor: this.props.color,
normalRangeMin: '10px',
width: '160px',
height: '20px',
fillColor: false,
spotColor: false,
minSpotColor: false,
maxSpotColor: false,
highlightSpotColor: false,
highlightLineColor: false,
drawNormalOnTop: false,
tooltipClassname: 'line-chart-tooltip'
});
}
render() {
return (
<div ref={(r) => { this.$chartContainer = $(r); }} />
);
}
}
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import $ from 'jquery';
import {Row, Col} from "reactstrap";
import Widget from "../../../../components/Widget";
/* eslint-disable */
import 'imports-loader?jQuery=jquery,this=>window!flot';
import 'imports-loader?jQuery=jquery,this=>window!flot.dashes/jquery.flot.dashes';
import 'imports-loader?jQuery=jquery,this=>window!jquery.flot.animator/jquery.flot.animator';
/* eslint-enable */
export default class RevenueChart extends PureComponent {
static propTypes = {
data: PropTypes.any.isRequired,
isReceiving: PropTypes.bool
};
static defaultProps = {
data: [],
isReceiving: false
};
componentDidMount() {
window.addEventListener('resize', this.initChart.bind(this));
}
componentDidUpdate() {
const {data} = this.props;
if (data.length) {
this.initChart();
this.initEventListeners();
}
}
componentWillUnmount() {
window.removeEventListener('resize', this.initChart.bind(this));
}
onDrawHook() {
this.$chartLegend
.find('.legendColorBox > div')
.css({
border: 0,
borderRadius: 0,
paddingTop: 5
})
.children('div')
.css({
borderWidth: 1,
borderRadius: 0,
width: 50,
});
this.$chartLegend.find('tbody td').css({
paddingLeft: 10,
paddingRight: 10,
textAlign: 'center'
});
let labels = this.$chartLegend.find('.legendLabel').detach();
this.$chartLegend.find('tbody').prepend('<tr></tr>');
this.$chartLegend.find('tbody tr:eq(0)').append(labels);
}
initChart() {
const {data} = this.props;
const ticks = ['Dec 19', 'Dec 25', 'Dec 31', 'Jan 10', 'Jan 14',
'Jan 20', 'Jan 27', 'Jan 30', 'Feb 2', 'Feb 8', 'Feb 15',
'Feb 22', 'Feb 28', 'Mar 7', 'Mar 17'];
// check the screen size and either show tick for every 4th tick on large screens, or
// every 8th tick on mobiles
const tickInterval = window.screen.width < 500 ? 10 : 6;
if (this.$chartContainer.length > 0) {
return $.plotAnimator(this.$chartContainer, [{
label: 'Light Blue',
data: data[0],
lines: {
show: true,
fill: 0.3,
lineWidth: 0,
},
points: {
fillColor: '#A7BEFF',
},
shadowSize: 0,
}, {
label: 'RNS App',
data: data[1],
dashes: {
show: true,
lineWidth: 1.5,
dashLength: [5, 2],
},
points: {
fillColor: '#3abf94',
},
shadowSize: 0,
}, {
animator: {steps: 100, duration: 30 * 14, start: 0},
label: 'Sing App',
data: data[2],
lines: {
show: true,
lineWidth: 1.5,
},
points: {
fillColor: '#f55d5d',
},
shadowSize: 0,
}], {
xaxis: {
tickColor: '#f8f9fa',
tickSize: tickInterval,
tickFormatter: i => ticks[i / tickInterval],
font: {
lineHeight: 11,
weight: 400,
},
},
yaxis: {
tickColor: '#f8f9fa',
max: 5,
font: {
lineHeight: 11,
weight: 400,
labelFontColor: 'red'
},
},
points: {
show: true,
fill: true,
lineWidth: 5,
radius: 0,
},
grid: {
backgroundColor: { colors: ['#ffffff', '#ffffff'] },
borderWidth: 1,
borderColor: '#ffffff',
margin: 0,
minBorderMargin: 0,
labelMargin: 20,
hoverable: true,
clickable: true,
mouseActiveRadius: 6,
},
legend: {
noColumns: 3,
container: this.$chartLegend,
},
colors: ['#E2E1FF', '#3abf94', '#ffc247'],
hooks: {
draw: [this.onDrawHook.bind(this)],
},
});
}
}
initEventListeners() {
const self = this;
this.$chartContainer.on('plothover', (event, pos, item) => {
if (item) {
const x = item.datapoint[0].toFixed(2);
const y = item.datapoint[1].toFixed(2);
self.$chartTooltip.html(`${item.series.label} at ${x} : ${y}`)
.css({
top: (item.pageY + 5) - window.scrollY,
left: (item.pageX + 5) - window.scrollX,
})
.fadeIn(200);
} else {
self.$chartTooltip.hide();
}
});
}
render() {
return (
<Widget
bodyClass="mt"
className="mb-xlg"
fetchingData={this.props.isReceiving}
title={
<Row>
<Col xs={12} sm={5}>
<h5>
Daily <span className="fw-semi-bold">Line Chart</span>
</h5>
</Col>
<Col xs={12} sm={7}>
<div className="d-flex justify-content-end">
<div ref={(r) => {
this.$chartLegend = $(r);
}}/>
</div>
</Col>
</Row>
}
>
<div ref={(r) => { this.$chartContainer = $(r); }} style={{ width: '100%', height: '250px' }} />
<div className="chart-tooltip" ref={(r) => { this.$chartTooltip = $(r); }} />
</Widget>
);
}
}
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import $ from 'jquery';
import { Row, Col } from 'reactstrap';
/* eslint-disable */
import 'imports-loader?jQuery=jquery,this=>window!flot';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.pie';
/* eslint-enable */
export default class RevenueChart extends PureComponent {
static propTypes = {
data: PropTypes.any,
};
static defaultProps = {
data: [],
};
componentDidMount() {
this.initChart();
window.addEventListener('resize', this.initChart.bind(this));
}
componentWillUnmount() {
window.removeEventListener('resize', this.initChart.bind(this));
}
initChart() {
$.plot(this.$chartContainer, this.props.data, {
series: {
pie: {
innerRadius: 0.8,
show: true,
fill: 0.5,
},
},
colors: ['#ffc247', '#f55d5d', '#9964e3'],
legend: {
noColumns: 1,
container: this.$chartLegend,
labelBoxBorderColor: '#ffffff',
},
});
}
render() {
return (
<Row>
<Col xs={12} md={6} lg={7} className="text-center">
<div ref={(r) => { this.$chartContainer = $(r); }} style={{ height: '100px' }} />
</Col>
<Col xs={12} md={5} lg={4} className="display-flex flex-column justify-content-center">
<div ref={(r) => { this.$chartLegend = $(r); }} />
</Col>
</Row>
);
}
}
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { Table, Button } from 'reactstrap';
import s from './TableContainer.module.scss';
const states = {
sent: 'info',
pending: 'success',
declined: 'danger',
};
class TableContainer extends PureComponent {
static propTypes = {
data: PropTypes.arrayOf(
PropTypes.shape({
name: PropTypes.string,
email: PropTypes.string,
product: PropTypes.string,
price: PropTypes.string,
date: PropTypes.string,
city: PropTypes.string,
status: PropTypes.string,
}),
).isRequired,
}
render() {
const { data } = this.props;
const keys = Object.keys(data[0]).map(i => i.toUpperCase());
keys.shift(); // delete "id" key
return (
<Table className={cx('mb-0', s.table)} borderless responsive>
<thead>
<tr className="text-muted">
{keys.map((key, index) => (
index === 0
? <th key={key} scope="col"><span className="pl-2">{key}</span></th>
: <th key={key} scope="col">{key}</th>
))}
</tr>
</thead>
<tbody className="text-dark">
{
data.map(({ name, email, product, price, date, city, status }) => (
<tr key={name}>
<td className="pl-3 fw-normal">{name}</td>
<td>{email}</td>
<td>{product}</td>
<td>{price}</td>
<td>{date}</td>
<td>{city}</td>
<td>
<Button
color={states[status.toLowerCase()]}
size="xs"
className="px-2"
>
{status}
</Button>
</td>
</tr>
))
}
</tbody>
</Table>
);
}
}
export default TableContainer;
@import '../../../../styles/app';
.table {
td,
th {
font-weight: normal;
align-items: center;
min-width: 100px;
}
th {
font-size: $font-size-sm;
}
tbody tr:nth-child(odd) {
background-color: $gray-light;
}
}
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import s from './Task.module.scss';
class Task extends PureComponent {
static propTypes = {
id: PropTypes.number.isRequired,
index: PropTypes.number.isRequired,
type: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
time: PropTypes.string.isRequired,
completed: PropTypes.bool.isRequired,
toggle: PropTypes.func.isRequired,
}
render() {
const { id, type, title, time, completed, toggle, index } = this.props;
return (
<div className={cx('d-flex align-items-center mb', { [s.completed]: completed })} key={id}>
<div className="form-check abc-checkbox abc-checkbox-success mb-sm d-flex">
<input className="form-check-input" id={`checkbox${id}`} type="checkbox" onChange={() => toggle(index)} />
<label className="form-check-label" htmlFor={`checkbox${id}`} />
</div>
<div className="task-content pl-2">
<p className="text-muted mb-xs"><small>{type}</small></p>
<h6>{title}</h6>
<p className="text-muted mb-0"><small>{time}</small></p>
</div>
</div>
);
}
}
export default Task;
.completed {
p,
h6 {
opacity: 0.8;
text-decoration: line-through;
}
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Button } from 'reactstrap';
import Widget from '../../../../components/Widget';
import Task from '../Task/Task';
export default class TasksContainer extends Component {
static propTypes = {
data: PropTypes.arrayOf(
PropTypes.shape({
type: PropTypes.string,
title: PropTypes.string,
date: PropTypes.string,
}),
).isRequired,
}
componentWillMount() {
const tasks = this.props.data;
tasks.map((task) => {
task.completed = false;
return task;
});
this.setState({ tasks });
}
toggleTaskState = (index) => {
const newTasks = [...this.state.tasks];
newTasks[index].completed = !this.state.tasks[index].completed;
this.setState({ tasks: newTasks });
}
render() {
const { tasks } = this.state;
const totalCompleted = tasks.filter(i => i.completed).length;
return (
<Widget
className="mb-xlg pb-2"
bodyClass="task-container mt"
title={
<div>
<h4>Today&apos;s Tasks <span className="badge badge-pill badge-success fw-normal pull-right mt-xs">{tasks.length}</span></h4>
<p className="text-muted mb-0"><small>{totalCompleted} of {tasks.length} completed</small></p>
</div>
}
>
{tasks.map((item, index) =>
<Task key={item.id} index={index} toggle={this.toggleTaskState} {...item} />)}
<Button color="transparent" className="bg-white w-100 text-center text-primary">
See All <i className="la la-arrow-down" />
</Button>
</Widget>
);
}
}
export default {
tasks: [
{
id: 0,
type: 'Meeting',
title: 'Meeting with Andrew Piker',
time: '9:00',
},
{
id: 1,
type: 'Call',
title: 'Call with HT Company',
time: '12:00',
},
{
id: 2,
type: 'Meeting',
title: 'Meeting with Zoe Alison',
time: '14:00',
},
{
id: 3,
type: 'Interview',
title: 'Interview with HR',
time: '15:00',
},
],
bigStat: [
{
product: 'Light Blue',
total: '4,232',
color: 'primary',
registrations: {
value: 830,
profit: true,
},
bounce: {
value: 4.5,
profit: false,
},
},
{
product: 'Sing App',
total: '754',
color: 'warning',
registrations: {
value: 30,
profit: true,
},
bounce: {
value: 2.5,
profit: true,
},
},
{
product: 'RNS',
total: '1,025',
color: 'info',
registrations: {
value: 230,
profit: true,
},
bounce: {
value: 21.5,
profit: false,
},
},
],
notifications: [
{
id: 0,
icon: 'thumbs-up',
color: 'primary',
content: 'Ken <span className="fw-semi-bold">accepts</span> your invitation',
},
{
id: 1,
icon: 'file',
color: 'success',
content: 'Report from LT Company',
},
{
id: 2,
icon: 'envelope',
color: 'danger',
content: '4 <span className="fw-semi-bold">Private</span> Mails',
},
{
id: 3,
icon: 'comment',
color: 'success',
content: '3 <span className="fw-semi-bold">Comments</span> to your Post',
},
{
id: 4,
icon: 'cog',
color: 'light',
content: 'New <span className="fw-semi-bold">Version</span> of RNS app',
},
{
id: 5,
icon: 'bell',
color: 'info',
content: '15 <span className="fw-semi-bold">Notifications</span> from Social Apps',
},
],
table: [
{
id: 0,
name: 'Mark Otto',
email: 'ottoto@wxample.com',
product: 'ON the Road',
price: '$25 224.2',
date: '11 May 2017',
city: 'Otsego',
status: 'Sent',
},
{
id: 1,
name: 'Jacob Thornton',
email: 'thornton@wxample.com',
product: 'HP Core i7',
price: '$1 254.2',
date: '4 Jun 2017',
city: 'Fivepointville',
status: 'Sent',
},
{
id: 2,
name: 'Larry the Bird',
email: 'bird@wxample.com',
product: 'Air Pro',
price: '$1 570.0',
date: '27 Aug 2017',
city: 'Leadville North',
status: 'Pending',
},
{
id: 3,
name: 'Joseph May',
email: 'josephmay@wxample.com',
product: 'Version Control',
price: '$5 224.5',
date: '19 Feb 2018',
city: 'Seaforth',
status: 'Declined',
},
{
id: 4,
name: 'Peter Horadnia',
email: 'horadnia@wxample.com',
product: 'Let\'s Dance',
price: '$43 594.7',
date: '1 Mar 2018',
city: 'Hanoverton',
status: 'Sent',
},
],
};
@import '../../styles/app';
.root {
:global {
/* NVD3 */
.nvtooltip {
padding: $padding-small-vertical $padding-small-horizontal;
font-family: $font-family-base;
font-size: $font-size-sm;
text-align: center;
p {
margin: 0;
padding: 0;
}
h3 {
background: none;
border-bottom: 0;
}
}
svg text {
font: $font-weight-base $font-size-sm $font-family-base;
fill: $text-color;
}
svg .title {
font: $font-weight-bold $font-size-base $font-family-base;
}
.nvd3.nv-noData {
font-size: $font-size-lg;
font-weight: $font-weight-bold;
}
.nvd3 .nv-axis path.domain {
stroke-opacity: 0;
}
.nv-controlsWrap {
.nv-legend-symbol {
fill: #666 !important;
stroke: #666 !important;
}
}
/* Flot */
.chart-tooltip {
position: fixed;
padding: $padding-small-vertical $padding-small-horizontal;
border: 1px solid $gray-600;
font-size: $font-size-mini;
background-color: $white;
}
/* Easy Pie Chart */
.easy-pie-chart {
position: relative;
display: inline-block;
line-height: 120px;
height: 120px;
width: 120px;
text-align: center;
color: $gray-600;
canvas {
position: absolute;
top: 0;
left: 0;
}
}
}
}
import React, { PureComponent } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
} from 'reactstrap';
import $ from 'jquery';
/* eslint-disable */
import 'imports-loader?jQuery=jquery,this=>window!easy-pie-chart/dist/jquery.easypiechart.js';
/* eslint-enable */
import Widget from '../../../components/Widget';
class EasyPie extends PureComponent {
componentDidMount() {
this.initCharts();
}
initCharts() { // eslint-disable-line
$('#easy-pie1').easyPieChart({
barColor: '#8fe5d4',
trackColor: '#f8f9fa',
scaleColor: false,
lineWidth: 10,
size: 120,
});
$('#easy-pie2').easyPieChart({
barColor: '#ffd7de',
trackColor: '#f8f9fa',
scaleColor: '#f55d5d',
lineCap: 'butt',
lineWidth: 22,
size: 140,
animate: 1000,
});
$('#easy-pie3').easyPieChart({
barColor: '#ffebb2',
trackColor: '#f8f9fa',
scaleColor: '#ffc247',
lineCap: 'butt',
lineWidth: 22,
size: 140,
animate: 1000,
});
$('#easy-pie4').easyPieChart({
barColor: '#b7b3ff',
trackColor: false,
scaleColor: '#6c757d',
lineCap: 'square',
lineWidth: 10,
size: 120,
animate: 1000,
});
}
render() {
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Charts</BreadcrumbItem>
<BreadcrumbItem active>Easy Pie</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Visual - <span className="fw-semi-bold">Charts</span></h1>
<Row>
<Col xs={12} md={6} lg={4}>
<Widget
title={<h5>Easy Pie Charts</h5>}
close collapse
>
<div className="text-center">
<div className="easy-pie-chart-md mb-lg" id="easy-pie1" data-percent="73">
73
</div>
</div>
<p className="fs-mini text-muted">
Easy pie chart is a jQuery plugin that uses the canvas
element to render simple pie charts for single values.
These charts are highly customizable, very easy to
implement, scale to the resolution of the display of
the client to provide sharp charts even on retina displays.
</p>
</Widget>
</Col>
<Col xs={12} md={6} lg={4}>
<Widget
title={<h5>Easy Pie Charts</h5>}
close collapse
>
<div className="text-center">
<div className="easy-pie-chart-lg mb-lg" id="easy-pie2" data-percent="22">
22
</div>
</div>
<div className="text-center">
<div className="easy-pie-chart-lg mb-lg" id="easy-pie3" data-percent="88">
88
</div>
</div>
</Widget>
</Col>
<Col xs={12} md={6} lg={4}>
<Widget
title={<h5>Easy Pie Charts</h5>}
close collapse
>
<p className="fw-mini text-muted">
Ok, but <span className="fw-semi-bold">when to use pie chart?</span> Pie
charts are mostly used to show how much individual shares — such as
quarterly sales figures — contribute to a total amount, such as annual sales.
</p>
<div className="text-center">
<div className="easy-pie-chart-md mb-lg" id="easy-pie4" data-percent="43">
43
</div>
</div>
<hr />
<Row>
<Col xs={3}>
<span className="widget-icon">
<i className="fi flaticon-like text-primary" />
</span>
</Col>
<Col xs={9}>
<div className="text-muted">
<h6 className="no-margin">TOTAL PROGRESS</h6>
<p className="h2 no-margin fw-normal">43,32%</p>
</div>
</Col>
</Row>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default EasyPie;
import React, { PureComponent } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
} from 'reactstrap';
import $ from 'jquery';
/* eslint-disable */
import 'imports-loader?jQuery=jquery,this=>window!flot';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.time';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.resize';
import 'imports-loader?jQuery=jquery,this=>window!jquery.flot.animator/jquery.flot.animator';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.crosshair';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.symbol';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.selection';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.pie';
import 'imports-loader?jQuery=jquery,this=>window!jquery.flot-orderBars/js/jquery.flot.orderBars';
import 'imports-loader?jQuery=jquery,this=>window!jquery-sparkline';
/* eslint-enable */
import Widget from '../../../components/Widget';
import LineChart from './charts/LineChart';
import TrackingChart from './charts/TrackingChart';
import MarkersChart from './charts/MarkersChart';
import BarsChart from './charts/BarsChart';
import PieChart from './charts/PieChart';
import DonutChart from './charts/DonutChart';
import StackedBar from './charts/BarsStackedCharts';
class EasyPie extends PureComponent {
constructor(props) {
super(props);
this.sparklines = [];
}
componentDidMount() {
this.initSparklines();
}
initSparklines() {
this.sparklines.forEach((spark) => {
$(spark).sparkline('html', $(spark).data());
});
}
render() {
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Charts</BreadcrumbItem>
<BreadcrumbItem active>Flot</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Visual - <span className="fw-semi-bold">Flot Charts</span></h1>
<Row>
<Col xs={12} lg={6} xl={5}>
<Widget
title={<h5>Flot <span className="fw-semi-bold">Stacked Line Chart</span></h5>}
close collapse
>
<LineChart />
<p className="fs-mini text-muted">
Flot is a <span className="fw-semi-bold">pure</span> JavaScript plotting library for jQuery,
with a
focus on simple usage, attractive looks and interactive features.
</p>
<h5 className="mt">Interactive <span className="fw-semi-bold">Sparklines</span></h5>
<Row className="mt">
<Col xs={12} md={6}>
<div className="stats-row">
<div className="stat-item">
<p className="value5 fw-thin">34 567</p>
<h6 className="name text-muted no-margin fs-mini">Overall Values</h6>
</div>
<div className="stat-item stat-item-mini-chart">
<div className="sparkline" ref={(r) => { this.sparklines.push(r); }} data-type="bar" data-bar-color="#FFC247" data-height="30" data-bar-width="6" data-bar-spacing="2">
9,12,14,15,10,14,20
</div>
</div>
</div>
</Col>
<Col xs={12} md={6}>
<div className="stats-row">
<div className="stat-item">
<p className="value5 fw-thin">34 567</p>
<h6 className="name text-muted no-margin fs-mini">Overall Values</h6>
</div>
<div className="stat-item stat-item-mini-chart">
<div className="sparkline" ref={(r) => { this.sparklines.push(r); }} data-type="bar" data-bar-color="#FFF8E3" data-height="30" data-bar-width="6" data-bar-spacing="2">
9,12,14,15,10,14,20
</div>
</div>
</div>
</Col>
</Row>
<p className="fs-mini text-muted">
This jQuery plugin generates sparklines (small inline charts) directly in the browser using
data supplied either inline in the HTML, or via javascript.
</p>
</Widget>
</Col>
<Col xs={12} lg={6} xl={7}>
<Widget
title={<h5>Flot <span className="fw-semi-bold">Tracking</span></h5>}
close collapse
>
<div className="mt mb">
<TrackingChart />
</div>
<p className="fs-mini text-muted">
Flot charts can be customized easily due to its <span className="fw-semi-bold">powerful API</span>.
But if you meet any troubles, you are always welcome to contact us to integrate the business
logic into <span className="fw-semi-bold">SING Admin Dashboard</span>.
</p>
</Widget>
</Col>
<Col xs={12}>
<Widget
title={<h5>Flot <span className="fw-semi-bold">Markers</span></h5>}
close collapse
>
<div className="mt mb">
<MarkersChart />
</div>
<p className="fs-mini text-muted">Points can be marked in several ways, with circles being the built-in default.</p>
</Widget>
</Col>
<Col xs={12} lg={7}>
<Widget
title={<h5>Flot <span className="fw-semi-bold">Bars</span></h5>}
close collapse
>
<div className="mt mb">
<BarsChart />
</div>
<p className="fs-mini text-muted">Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.</p>
</Widget>
</Col>
<Col xs={12} lg={5}>
<Widget
className="mb-xlg"
title={<h5>Flot <span className="fw-semi-bold">Pie Chart</span></h5>}
close collapse
>
<div className="mt mb">
<PieChart />
</div>
<p className="fs-mini text-muted">Labels can be hidden if the slice is less than a given percentage of the pie (19% in this case).</p>
</Widget>
<Widget
className="mb-xlg"
title={<h5>Flot <span className="fw-semi-bold">Donut Chart</span></h5>}
close collapse
>
<DonutChart />
</Widget>
</Col>
<Col xs={12}>
<Widget
className="mb-xlg"
title={<h5>Flot <span className="fw-semi-bold">Bars Stacked</span></h5>}
close collapse
>
<div className="mt mb">
<StackedBar />
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default EasyPie;
import React, { PureComponent } from 'react';
import $ from 'jquery';
class BarChart extends PureComponent {
componentDidMount() {
this.chart = this.createChart(this.getDataSeries(this.getBarChartData()));
}
getBarChartData() { // eslint-disable-line
return [
[[1388534400000, 120], [1391212800000, 70], [1393632000000, 100], [1396310400000, 60], [1398902400000, 35]],
[[1388534400000, 90], [1391212800000, 60], [1393632000000, 30], [1396310400000, 73], [1398902400000, 30]],
[[1388534400000, 80], [1391212800000, 40], [1393632000000, 47], [1396310400000, 22], [1398902400000, 24]],
];
}
getDataSeries(data) { // eslint-disable-line
return [{
label: 'Apple',
data: data[0],
bars: {
show: true,
barWidth: 12 * 24 * 60 * 60 * 300,
fill: 0.5,
lineWidth: 0,
order: 1,
},
}, {
label: 'Google',
data: data[1],
bars: {
show: true,
barWidth: 12 * 24 * 60 * 60 * 300,
fill: 0.5,
lineWidth: 0,
order: 2,
},
}, {
label: 'Facebook',
data: data[2],
bars: {
show: true,
barWidth: 12 * 24 * 60 * 60 * 300,
fill: 0.5,
lineWidth: 0,
order: 3,
},
}];
}
createChart(dataSeries) {
return $.plot(this.$chartContainer, dataSeries, {
series: {
bars: {
show: true,
barWidth: 12 * 24 * 60 * 60 * 350,
lineWidth: 0,
order: 1,
fillColor: {
colors: [{
opacity: 1,
}, {
opacity: 0.7,
}],
},
},
},
xaxis: {
mode: 'time',
min: 1387497600000,
max: 1400112000000,
tickLength: 0,
tickSize: [1, 'month'],
axisLabel: 'Month',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 13,
axisLabelPadding: 15,
},
yaxis: {
axisLabel: 'Value',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 13,
axisLabelPadding: 5,
},
grid: {
hoverable: true,
borderWidth: 0,
},
legend: {
backgroundColor: 'transparent',
labelBoxBorderColor: 'none',
},
colors: ['#a7beff', '#ace5d1', '#ffd7de'],
});
}
render() {
return (
<div ref={(r) => { this.$chartContainer = $(r); }} style={{ height: '400px' }} />
);
}
}
export default BarChart;
import React, { PureComponent } from 'react';
import $ from 'jquery';
class StackedBarChart extends PureComponent {
componentDidMount() {
this.chart = this.createChart(this.getStackedBarChartData());
}
getStackedBarChartData() { // eslint-disable-line
const seriesCount = 3;
const tickCount = 10;
let series = [];
const data = [];
for (let i = 0; i < seriesCount; i += 1) {
series = [];
for (let j = 0; j < tickCount; j += 1) {
series.push([j, parseInt(Math.random() * 30, 10)]);
}
data.push(series);
}
return data;
}
createChart(data) {
return $.plot(this.$chartContainer, data, {
series: {
stack: true,
bars: {
show: true,
barWidth: 0.45,
lineWidth: 1,
fill: 0.75,
},
},
grid: {
backgroundColor: { colors: ['#ffffff', '#ffffff'] },
borderWidth: 1,
borderColor: '#ffffff',
margin: 0,
minBorderMargin: 0,
labelMargin: 20,
hoverable: true,
clickable: true,
mouseActiveRadius: 6,
},
xaxis: {
min: 1,
tickLength: 0,
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 13,
axisLabelPadding: 15,
},
colors: ['#E5E5FF', '#C0BDFF', '#D7E0FF'],
});
}
render() {
return (
<div ref={(r) => { this.$chartContainer = $(r); }} style={{ height: '200px' }} />
);
}
}
export default StackedBarChart;
import React, { PureComponent } from 'react';
import { Row, Col } from 'reactstrap';
import $ from 'jquery';
class DonutChart extends PureComponent {
componentDidMount() {
this.chart = this.createChart(this.getPieChartData());
}
getPieChartData() { // eslint-disable-line
const data = [];
const seriesCount = 4;
const accessories = ['Rolex', 'Tissot', 'Orient', 'Other'];
for (let i = 0; i < seriesCount; i += 1) {
data.push({
label: accessories[i],
data: Math.floor(Math.random() * 100) + 1,
});
}
return data;
}
createChart(data) {
return $.plot(this.$chartContainer, data, {
series: {
pie: {
innerRadius: 0.5,
show: true,
fill: 0.7,
},
},
colors: ['#8fe5d4', '#ace5d1', '#ffebb2', '#fff8e3'],
legend: {
noColumns: 1,
container: this.$chartLegend,
},
});
}
render() {
return (
<Row>
<Col xs={12} md={6} lg={7} className="mt mb">
<div style={{ height: '120px' }} ref={(r) => { this.$chartContainer = $(r); }} />
</Col>
<Col xs={12} md={5} lg={4} >
<div className="mt" ref={(r) => { this.$chartLegend = $(r); }} />
</Col>
</Row>
);
}
}
export default DonutChart;
import React, { PureComponent } from 'react';
import $ from 'jquery';
class LineChart extends PureComponent {
constructor(props) {
super(props);
this.options = {
xaxis: {
tickLength: 0,
tickDecimals: 0,
min: 2,
font: {
lineHeight: 13,
weight: 'bold',
color: '#c1ccd3',
},
},
yaxis: {
tickDecimals: 0,
tickColor: '#f8f9fa',
font: {
lineHeight: 13,
weight: 'bold',
color: '#c1ccd3',
},
},
grid: {
backgroundColor: { colors: ['#ffffff', '#ffffff'] },
borderWidth: 1,
borderColor: '#ffffff',
margin: 0,
minBorderMargin: 0,
labelMargin: 20,
hoverable: true,
clickable: true,
mouseActiveRadius: 6,
},
legend: false,
colors: ['#fff8e3', '#ffebb2', '#ffc247'],
};
}
componentDidMount() {
this.createChart(this.getData());
}
getData() { // eslint-disable-line
return [
[
[1, 20],
[2, 20],
[3, 40],
[4, 30],
[5, 40],
[6, 35],
[7, 47],
], [
[1, 13],
[2, 8],
[3, 17],
[4, 10],
[5, 17],
[6, 15],
[7, 16],
], [
[1, 23],
[2, 13],
[3, 33],
[4, 16],
[5, 32],
[6, 28],
[7, 31],
],
];
}
createChart(data) { // eslint-disable-line
return $.plotAnimator(this.$chartContainer, [{
label: 'Traffic',
data: data[2],
lines: {
fill: 0.3,
lineWidth: 0,
},
}, {
label: 'Traffic',
data: data[1],
lines: {
fill: 0.6,
lineWidth: 0,
},
}, {
label: 'Traffic',
data: data[0],
animator: { steps: 60, duration: 1000, start: 0 },
lines: { lineWidth: 2 },
shadowSize: 0,
}], this.options);
}
render() {
return (
<div ref={(r) => { this.$chartContainer = $(r); }} style={{ height: '250px' }} />
);
}
}
export default LineChart;
import React, { PureComponent } from 'react';
import $ from 'jquery';
class Markers extends PureComponent {
constructor(props) {
super(props);
this.data = [
{ data: this.generate(2, 0.6), points: { symbol: 'circle' } },
{ data: this.generate(3, 0.5), points: { symbol: 'square' } },
{ data: this.generate(4, 0.8), points: { symbol: 'diamond' } },
{ data: this.generate(6, 0.7), points: { symbol: 'triangle' } },
{ data: this.generate(7, 0.2), points: { symbol: 'cross' } },
];
}
componentDidMount() {
this.chart = this.createChart(this.data);
}
generate(offset, amplitude) { // eslint-disable-line
const result = [];
const start = 0;
const end = 10;
let point;
for (let i = 0; i <= 50; i += 1) {
point = ((start + i) / 50) * (end - start);
result.push([point, amplitude * Math.sin(point + offset)]);
}
return result;
}
createChart(data) {
return $.plot(this.$chartContainer, data, {
series: {
points: {
show: true,
radius: 3,
},
},
yaxis: {
ticks: [],
},
xaxis: {
min: 1,
},
grid: {
hoverable: true,
backgroundColor: { colors: ['#ffffff', '#ffffff'] },
borderWidth: 1,
borderColor: '#ffffff',
},
colors: ['#e2e1ff', '#f59f9f', '#ffd7de', '#8fe5d4', '#ace5d1', '#ffebb2', '#fff8e3'],
});
}
render() {
return (
<div ref={(r) => { this.$chartContainer = $(r); }} style={{ height: '200px' }} />
);
}
}
export default Markers;
import React, { PureComponent } from 'react';
import $ from 'jquery';
class PieChart extends PureComponent {
componentDidMount() {
this.chart = this.createChart(this.getPieChartData());
}
getPieChartData() { // eslint-disable-line
const data = [];
const seriesCount = 4;
const accessories = ['Rolex', 'Tissot', 'Orient', 'Other'];
for (let i = 0; i < seriesCount; i += 1) {
data.push({
label: accessories[i],
data: Math.floor(Math.random() * 100) + 1,
});
}
return data;
}
createChart(data) {
const self = this;
return $.plot(this.$chartContainer, data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 2 / 3,
formatter: self.labelFormatter,
threshold: 0.2,
},
},
},
legend: {
show: false,
},
colors: ['#ffd7de', '#8fe5d4', '#ace5d1', '#ffebb2', '#fff8e3'],
});
}
labelFormatter(label, series) { // eslint-disable-line
return `<h1><span class="badge badge-secondary">${label}: ${Math.round(series.percent)}%</span></h1>`;
}
render() {
return (
<div ref={(r) => { this.$chartContainer = $(r); }} style={{ height: '150px' }} />
);
}
}
export default PieChart;
import React, { PureComponent } from 'react';
import $ from 'jquery';
class TrackingChart extends PureComponent {
getTrackingChartData() { // eslint-disable-line
const sin = [];
const cos = [];
for (let i = 0; i < 14; i += 0.1) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
return [
{ data: sin, label: 'sin(x) = -0.00' },
{ data: cos, label: 'cos(x) = -0.00' },
];
}
componentDidMount() {
this.chart = this.createChart(this.getTrackingChartData());
this.legend = this.$chartContainer.find('.legendLabel');
this.initEventListeners();
}
createChart(data) {
return $.plotAnimator(this.$chartContainer, [{
label: data[0].label,
data: data[0].data,
}, {
label: data[1].label,
data: data[1].data,
animator: { steps: 60, duration: 1000, start: 0 },
}], {
series: {
lines: {
show: true,
},
},
colors: ['#8fe5d4', '#ffd7de'],
crosshair: {
mode: 'x',
color: '#f55d5d',
},
grid: {
hoverable: true,
autoHighlight: false,
backgroundColor: { colors: ['#ffffff', '#ffffff'] },
borderWidth: 1,
borderColor: '#ffffff',
margin: 0,
minBorderMargin: 0,
labelMargin: 40,
mouseActiveRadius: 6,
},
xaxis: {
tickLength: 0,
tickDecimals: 0,
min: 1,
max: 6,
font: {
lineHeight: 13,
weight: 'bold',
color: '#c1ccd3',
},
},
yaxis: {
min: -1.2,
max: 1.2,
tickDecimals: 0,
font: {
lineHeight: 13,
weight: 'bold',
color: '#c1ccd3',
},
},
});
}
initEventListeners() {
const self = this;
this.$chartContainer.bind('plothover', (event, pos) => {
if (!self.updateLegendTimeout) {
self.updateLegendTimeout = setTimeout(self.updateLegendContent.bind(self, event, pos), 50);
}
});
}
updateLegendContent(event, pos) {
this.updateLegendTimeout = null;
const axes = this.chart.getAxes();
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
return;
}
const dataset = this.chart.getData();
for (let i = 0; i < dataset.length; i += 1) {
const series = dataset[i];
let point1;
let point2;
// Find the nearest points, x-wise
for (let j = 0; j < series.data.length; j += 1) {
if (series.data[j][0] > pos.x) {
point1 = series.data[j - 1];
point2 = series.data[j];
break;
}
}
let y;
// Now Interpolate
if (point1 == null && point2) {
y = point2[1];
} else if (point2 == null && point1) {
y = point1[1];
} else {
/* eslint-disable */
y = point1[1] + (point2[1] - point1[1]) * (pos.x - point1[0]) / (point2[0] - point1[0]);
/* eslint-enable */
}
this.legend.eq(i).text(series.label.replace(/=.*/, `= ${y.toFixed(2)}`));
}
}
render() {
return (
<div>
<div ref={(r) => { this.$chartContainer = $(r); }} style={{ height: '340px' }} />
</div>
);
}
}
export default TrackingChart;
import React, { PureComponent } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
} from 'reactstrap';
import $ from 'jquery';
/* eslint-disable */
import 'imports-loader?jQuery=jquery,this=>window!webpack-raphael/raphael';
import 'imports-loader?jQuery=jquery,this=>window!govpredict-morris/morris';
/* eslint-enable */
import Widget from '../../../components/Widget';
const Morris = window.Morris;
class MorrisCharts extends PureComponent {
componentDidMount() {
this.initMorrisLineChart();
this.initMorrisAreaChart();
this.initMorrisBarChart();
this.initMorrisBar2Chart();
this.initMorrisDonutChart();
this.initMorrisStackedChart();
}
initMorrisLineChart() {
$(this.morrisLineChart).html('');
Morris.Line({
element: this.morrisLineChart,
resize: true,
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 },
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
lineColors: ['#8fe5d4', '#ffebb2'],
});
}
initMorrisAreaChart() {
$(this.morrisAreaChart).html('');
Morris.Area({
element: this.morrisAreaChart,
resize: true,
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 },
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Users A', 'Series B'],
lineColors: ['#8fe5d4', '#ffd7de'],
lineWidth: 0,
});
}
initMorrisBarChart() {
$(this.morrisBarChart).html('');
Morris.Bar({
element: this.morrisBarChart,
resize: true,
grid: false,
data: [
{ y: 4, x: 'Linux' },
{ y: 12, x: 'MacOS' },
{ y: 29, x: 'Windows' },
],
xkey: 'x',
ykeys: ['y'],
labels: ['OS Users, %'],
barColors: ['#b7b3ff'],
gridTextColor: '#c1ccd3',
});
}
initMorrisBar2Chart() {
$(this.morrisBar2Chart).html('');
Morris.Bar({
element: this.morrisBar2Chart,
resize: true,
grid: false,
data: [
{ y: '2014', a: 50, b: 90 },
{ y: '2015', a: 65, b: 75 },
{ y: '2016', a: 50, b: 50 },
{ y: '2017', a: 75, b: 60 },
{ y: '2018', a: 80, b: 65 },
{ y: '2019', a: 90, b: 70 },
{ y: '2020', a: 100, b: 75 },
{ y: '2021', a: 115, b: 75 },
{ y: '2022', a: 120, b: 85 },
{ y: '2023', a: 145, b: 85 },
{ y: '2024', a: 160, b: 95 },
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Total Income', 'Total Outcome'],
hideHover: 'auto',
barColors: ['#8fe5d4', '#f59f9f'],
gridTextColor: '#d6dee5',
});
}
initMorrisDonutChart() {
$(this.morrisDonutChart).html('');
Morris.Donut({
element: this.morrisDonutChart,
resize: true,
data: [
{ label: 'Download Sales', value: 12 },
{ label: 'In-Store Sales', value: 30 },
{ label: 'Mail-Order Sales', value: 20 },
],
colors: ['#ffd7de', '#ffebb2', '#e2e1ff'],
});
}
initMorrisStackedChart() {
$(this.morrisStackedChart).html('');
Morris.Bar({
element: this.morrisStackedChart,
stacked: true,
resize: true,
data: [
{ y: '2012', a: 3, b: 7, c: 90, d: 0 },
{ y: '2013', a: 2, b: 7, c: 75, d: 14 },
{ y: '2014', a: 3, b: 15, c: 65, d: 4 },
{ y: '2015', a: 3, b: 17, c: 56, d: 20 },
{ y: '2016', a: 5, b: 16, c: 49, d: 30 },
{ y: '2017', a: 4, b: 20, c: 40, d: 36 },
{ y: '2018', a: 5, b: 20, c: 40, d: 35 },
],
xkey: 'y',
ykeys: ['a', 'b', 'c', 'd'],
barColors: ['#a7beff', '#e2e1ff', '#fff8e3', '#ffd7de'],
labels: ['Linux', 'MacOS', 'Windows', 'Other'],
hoverCallback(index, options, content, row) {
const keys = Object.keys(row).splice(1).sort();
let tooltip = `
<div class="card" style="width: 11rem;"><div class="card-body">
<h5 class="card-title">${row.y} OS Shares</h5>
<h6 class="card-subtitle mb-2 text-muted">Statistics for most popular Operation Systems Usage</h6>`;
const rows = [];
keys.forEach((value, id) => {
rows.push(
(`<tr>
<td>${options.labels[id]}: </td>
<td>${row[value]}%</td>
</tr>`).trim(),
);
});
tooltip += '<table class="table"><tbody>';
tooltip += rows.join('');
tooltip += '</tbody></table></div></div>';
return tooltip;
},
hideHover: 'auto',
});
}
render() {
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem>Charts</BreadcrumbItem>
<BreadcrumbItem active>Morris</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Visual - <span className="fw-semi-bold">Charts</span></h1>
<Row>
<Col lg={6} xs={12}>
<Widget
title={<h5> Morris <span className="fw-semi-bold">Line Chart</span></h5>}
close collapse
>
<div>
<p className="fs-mini text-muted">
Good-looking charts shouldn&apos;t be difficult.
The public API is terribly simple. It&apos;s just one function: <code>Morris.Line(options)</code>,
where options is an object containing some of the following configuration options.
</p>
<div className="text-center" ref={(r) => { this.morrisLineChart = r; }} style={{ height: '343px' }} />
</div>
</Widget>
</Col>
<Col lg={6} xs={12}>
<Widget
title={<h5> Morris <span className="fw-semi-bold">Area Chart</span></h5>}
close collapse
>
<div>
<p className="fs-mini text-muted">
Good-looking charts shouldn&apos;t be difficult.
The public API is terribly simple. It&apos;s just one function: <code>Morris.Line(options)</code>,
where options is an object containing some of the following configuration options.
</p>
<div className="text-center" ref={(r) => { this.morrisAreaChart = r; }} style={{ height: '343px' }} />
</div>
</Widget>
</Col>
<Col lg={5} xs={12}>
<Widget
title={<h5> Morris <span className="fw-semi-bold">Bar Chart</span></h5>}
close collapse
>
<div>
<div className="text-center" ref={(r) => { this.morrisBarChart = r; }} style={{ height: '260px' }} />
<p className="fs-mini text-muted">
Bar charts are also commonly referred to as a column charts. If you was trying to compare
the height of something then intuitvely you would represent this by using columns. This
really couldn&apos;t be easier. Create a Bar chart using <code>Morris.Bar(options)</code>,
with only few options.
</p>
</div>
</Widget>
</Col>
<Col lg={3} xs={12}>
<Widget
title={<h5> Morris <span className="fw-semi-bold">Donut Chart</span></h5>}
close collapse
>
<div>
<div className="text-center" ref={(r) => { this.morrisDonutChart = r; }} style={{ height: '180px' }} />
<p className="fs-mini text-muted">
Donuts a great for representing some parted information like traffice sources, disk partitions,
etc. This really couldn&apos;t be easier. Create a Donut chart using <code>Morris.Bar(options)</code>,
with only few options.
</p>
</div>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget
title={<h5> Morris <span className="fw-semi-bold">Bar Chart 2</span></h5>}
close collapse
>
<div>
<div className="text-center" ref={(r) => { this.morrisBar2Chart = r; }} style={{ height: '180px' }} />
<p className="fs-mini text-muted">
This is generally a good chart to choose for all comparison based analysis but if you were to
display a data set with negative values a column would be the best to represent this. This
really couldn&apos;t be easier. Create a Bar chart using <code>Morris.Bar(options)</code>,
with only few options.
</p>
</div>
</Widget>
</Col>
<Col xs={12}>
<Widget
title={<h5> Morris <span className="fw-semi-bold">Stacked Bar Chart</span></h5>}
close collapse
>
<div>
<div className="text-center" ref={(r) => { this.morrisStackedChart = r; }} style={{ height: '200px' }} />
<p className="fs-mini text-muted">
Stacked charts are excellent to track some dynamics within declared categories. An example of this
can be seen above. To create a Stacked Bar chart use <code>Morris.Bar(options)</code> and
set <code>stacked</code>, option to true.
</p>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default MorrisCharts;
import React, { PureComponent } from 'react';
import { Row, Col, Alert, Progress } from 'reactstrap';
import BarsChart from './charts/BarsChart';
import LineChart from './charts/LineChart';
import ScatterplotChart from './charts/ScatterplotChart';
import RealtimeChart from './charts/RealtimeChart';
import Widget from '../../../components/Widget';
class RickshawExamples extends PureComponent {
render() {
return (
<div>
<Row>
<Col xs={12}>
<Widget
title={<h5>Bias <span className="fw-semi-bold">Rickshaw</span></h5>}
close collapse
>
<p className="fs-mini text-muted mb-lg">
Basic scatter plot with two overlapping series. Based on d3 library,
which is extremely fast and powerful. Customize it to visualize and
analyze your data.
</p>
<ScatterplotChart />
</Widget>
</Col>
</Row>
<Row>
<Col xs={12} lg={7} xl={8}>
<Widget
title={<h5>Line Chart - <span className="fw-semi-bold">Rickshaw</span></h5>}
close collapse
>
<Alert className="alert-transparent rounded-0 mb-3" color="primary">
<span className="fw-semi-bold">Important alert</span>: It&apos;s time to buy Tesla shares!
</Alert>
<LineChart />
</Widget>
</Col>
<Col xs={12} lg={5} xl={4}>
<Widget
title={<h5>Stacked Bar Chart - <span className="fw-semi-bold">Rickshaw</span></h5>}
close collapse
>
<p className="fs-mini text-muted">
You can combine Rickshaw charts with <span className="fw-semi-bold">Bootstrap</span> components
for data visualization and call to action.
</p>
<p className="text-muted">A simple success alert—check it out!</p>
<BarsChart colors={['#a7beff', '#d1dcff', '#ffebb2']} seriesLength={10} bars={3} stacked />
</Widget>
</Col>
<Col lg={6} xs={12}>
<Widget
title={<h5>Bar Chart - <span className="fw-semi-bold">Rickshaw</span></h5>}
collapse close
>
<p className="fs-mini text-muted">
Rickshaw charts give you a possibility to enter the low level settings, when
you need it, so you can always refer to d3 attributes and DOM elements to create
your awesome custom chart.
</p>
<BarsChart colors={['#ace5d1', '#ffebb2']} seriesLength={12} bars={2} />
</Widget>
</Col>
<Col lg={6} xs={12}>
<Widget
title={<h5>Realtime <span className="fw-semi-bold">Rickshaw</span></h5>}
collapse close
>
<div>
<p className="fs-mini text-muted mb-lg">
Rickshaw provides the elements you need to create interactive graphs: renderers, legends,
hovers, range selectors, etc. You put the pieces together.
It&apos;s all based on <span className="fw-semi-bold">d3</span> underneath, so graphs are drawn with
standard
SVG and styled with CSS.
Customize all you like with techniques you already know.
</p>
<h5>720 Users</h5>
<Progress value="60" color="primary" size="xs" className="mb-sm progress-xs" />
<p className="fs-mini text-muted mb-lg">
<span className="circle bg-primary text-white">
<i className="fa fa-circle" />
</span>
&nbsp;
Target <span className="fw-semi-bold">820</span> users
is <span className="fw-semi-bold">96%</span> reached.
</p>
<RealtimeChart />
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default RickshawExamples;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import $ from 'jquery';
import Rickshaw from 'rickshaw';
Rickshaw.Graph.Renderer.BarNoGap = Rickshaw.Class.create(Rickshaw.Graph.Renderer.Bar, {
name: 'bar_with_gaps',
barWidth(series) {
const frequentInterval = this._frequentInterval(series.stack); // eslint-disable-line
const barWidth = this.graph.x(series.stack[0].x + (frequentInterval.magnitude / 2));
return barWidth;
},
});
export default class BarsChart extends Component {
static propTypes = {
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
stacked: PropTypes.bool,
seriesLength: PropTypes.number,
}
static defaultProps = {
stacked: false,
seriesLength: 10,
}
constructor(props) {
super(props);
const { stacked, colors } = this.props;
this.options = { stacked, padding: { left: 0.03 } };
this.colors = colors;
}
state = {
graph: null,
};
componentDidMount() {
this.createChart();
window.addEventListener('resize', this.onResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResize);
}
onResize = () => {
const width = $(this.rickshawChart).closest('.widget-body')[0].clientWidth;
this.state.graph.configure({ width });
this.state.graph.render();
}
createChart() {
const seriesData = this.options.stacked ? [[], [], []] : [[], []];
const random = new Rickshaw.Fixtures.RandomData(30);
for (let i = 0; i < this.props.seriesLength; i += 1) {
random.addData(seriesData);
}
const series = seriesData.map((data, i) => ({
name: `Series ${i + 1}`,
color: this.colors[i % this.colors.length],
data,
}));
// eslint-disable-next-line
this.state.graph = new Rickshaw.Graph({
padding: this.options.padding || {},
element: this.rickshawChart,
height: 180,
renderer: 'bar_with_gaps',
stack: this.options.stacked,
series,
});
const hoverDetail = new Rickshaw.Graph.HoverDetail({ graph: this.state.graph });
hoverDetail.show();
this.state.graph.render();
}
render() {
return (
<div>
<div ref={(r) => { this.rickshawChart = r; }} />
</div>
);
}
}
import React, { Component } from 'react';
import $ from 'jquery';
import Rickshaw from 'rickshaw';
export default class LineChart extends Component {
state = {
graph: null,
};
componentDidMount() {
this.createChart();
window.addEventListener('resize', this.onResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResize);
}
onResize = () => {
const width = $(this.rickshawChart).closest('.widget-body')[0].clientWidth - 30;
this.state.graph.configure({ width });
this.state.graph.render();
}
createChart() {
const seriesData = [[], []];
const random = new Rickshaw.Fixtures.RandomData(30);
for (let i = 0; i < 30; i += 1) {
random.addData(seriesData);
}
// eslint-disable-next-line
this.state.graph = new Rickshaw.Graph({
element: this.rickshawChart,
height: 200,
renderer: 'line',
min: 45,
series: [
{
color: '#b7b3ff',
data: seriesData[0],
name: 'Series 1',
}, {
color: '#e2e1ff',
data: seriesData[1],
name: 'Series 2',
},
],
});
const hoverDetail = new Rickshaw.Graph.HoverDetail({ graph: this.state.graph });
hoverDetail.show();
new Rickshaw.Graph.Axis.Y({ // eslint-disable-line
graph: this.state.graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: this.axis,
});
this.state.graph.render();
}
render() {
return (
<div>
<div ref={(r) => { this.rickshawChart = r; }} style={{ left: '30px', maxWidth: '90%' }} />
<div ref={(r) => { this.axis = r; }} style={{ position: 'absolute', width: '30px', height: '300px', top: '102px' }} />
</div>
);
}
}
import React, { Component } from 'react';
import $ from 'jquery';
import Rickshaw from 'rickshaw';
export default class RealtimeChart extends Component {
state = {
graph: null,
};
componentDidMount() {
this.createChart();
window.addEventListener('resize', this.onResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResize);
}
onResize = () => {
const width = $(this.rickshawChart).closest('.widget-body')[0].clientWidth + 40;
this.state.graph.configure({ width });
this.state.graph.render();
}
createChart() {
const seriesData = [[], []];
const random = new Rickshaw.Fixtures.RandomData(30);
for (let i = 0; i < 30; i += 1) {
random.addData(seriesData);
}
// eslint-disable-next-line
this.state.graph = new Rickshaw.Graph({
element: this.rickshawChart,
height: 80,
series: [
{
color: '#d1dcff',
data: seriesData[0],
name: 'Uploads',
}, {
color: '#547fff',
data: seriesData[1],
name: 'Downloads',
},
],
});
const hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: this.state.graph,
xFormatter: x => new Date(x * 1000).toString(),
});
hoverDetail.show();
setInterval(() => {
random.removeData(seriesData);
random.addData(seriesData);
this.state.graph.update();
}, 1000);
this.state.graph.render();
}
render() {
return (
<div>
<div className="chart-overflow-bottom" ref={(r) => { this.rickshawChart = r; }} />
</div>
);
}
}
import React, { Component } from 'react';
import $ from 'jquery';
import Rickshaw from 'rickshaw';
export default class ScatterplotChart extends Component {
state = {
graph: null,
};
componentDidMount() {
this.createChart();
window.addEventListener('resize', this.onResize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResize);
}
onResize = () => {
const width = $(this.rickshawChart).closest('.widget-body')[0].clientWidth - 30;
this.state.graph.configure({ width });
this.state.graph.render();
}
createChart() {
const seriesData = [[], []];
const random = new Rickshaw.Fixtures.RandomData();
for (let i = 0; i < 150; i += 1) {
random.addData(seriesData);
}
// eslint-disable-next-line
this.state.graph = new Rickshaw.Graph({
element: this.rickshawChart,
height: 250,
renderer: 'scatterplot',
series: [
{
color: '#ffd7de',
data: seriesData[0],
name: 'Series 1',
}, {
color: '#8fe5d4',
data: seriesData[1],
name: 'Series 2',
},
],
});
const hoverDetail = new Rickshaw.Graph.HoverDetail({ graph: this.state.graph });
hoverDetail.show();
this.state.graph.render();
}
render() {
return (
<div>
<div ref={(r) => { this.rickshawChart = r; }} />
</div>
);
}
}
import React, { Component } from 'react';
import { Col, Row, Alert, Progress, Button, ButtonGroup, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import $ from 'jquery';
/* eslint-disable */
import 'imports-loader?jQuery=jquery,this=>window!jquery-sparkline';
/* eslint-enable */
import Widget from '../../../components/Widget';
class Sparkline extends Component {
state = { isAlertVisible: true }
componentDidMount() {
this.initCharts();
window.addEventListener('resize', this.initCharts);
}
componentWillUnmount() {
window.removeEventListener('resize', this.initCharts);
}
initCharts = () => {
this.initSparkline1();
this.initSparkline2();
this.initSparkline3();
this.initSparkline4();
this.initSparkline5();
this.initSparkline6();
this.initSparkline7();
}
toggleAlert = () => {
this.setState(prevState => ({ isAlertVisible: !prevState.isAlertVisible }));
}
generateRandomArr(length, min, max, isFloat) { // eslint-disable-line
const result = [];
const maxDefault = 100;
const minDefault = -100;
let rand = 0;
min = min === 0 ? 0 : (min || minDefault); // eslint-disable-line
max = max === 0 ? 0 : (max || maxDefault); // eslint-disable-line
for (let i = 0; i < length; i += 1) {
rand = Math.random() * (Math.abs(result[i - 1] / 10) || 1) * [min, max][i % 2];
rand = rand < min ? min : rand;
result.push(isFloat ? rand : Math.round(rand));
}
return result;
}
initSparkline1() {
this.$sparkline1.sparkline(this.generateRandomArr(80, -150), {
type: 'bar',
height: '140px',
width: '100%',
barWidth: 6,
barSpacing: 3,
barColor: '#ffebb2',
negBarColor: '#f59f9f',
});
// Chrome and Safari fix for to set correct width to chart
this.$sparkline1.find('canvas').css({ width: this.$sparkline1.width() });
}
initSparkline2() {
this.$sparkline2.sparkline(this.generateRandomArr(6, 4, 15), {
type: 'pie',
width: '200px',
height: '200px',
sliceColors: ['#ffd7de', '#8fe5d4', '#ace5d1', '#ffebb2', '#fff8e3'],
highlightLighten: 1.05,
});
}
initSparkline3() {
this.$sparkline3.sparkline(this.generateRandomArr(5), {
width: '100%',
fillColor: '#ffebb2',
height: '100px',
lineColor: 'transparent',
spotColor: '#c0d0f0',
minSpotColor: null,
maxSpotColor: null,
highlightSpotColor: '#ddd',
highlightLineColor: '#ddd',
}).sparkline(this.generateRandomArr(7), {
composite: true,
lineColor: 'transparent',
spotColor: '#c0d0f0',
fillColor: '#ace5d1',
minSpotColor: null,
maxSpotColor: null,
highlightSpotColor: '#ddd',
highlightLineColor: '#ddd',
});
}
initSparkline4() {
this.$sparkline4.sparkline(this.generateRandomArr(10, 10, 30), {
type: 'line',
width: '100%',
height: '200px',
lineColor: '#a7beff',
fillColor: '#d1dcff',
lineWidth: 2,
spotColor: '#547fff',
minSpotColor: '#fdf7e6',
maxSpotColor: '#f55d5d',
highlightSpotColor: '#547fff',
highlightLineColor: '#ffffff',
spotRadius: 1,
chartRangeMin: 5,
chartRangeMax: 7,
normalRangeColor: '#547fff',
drawNormalOnTop: true,
});
}
initSparkline5() {
this.$sparkline5.sparkline(this.generateRandomArr(2, 8, 15), {
type: 'pie',
width: '100px',
height: '100px',
sliceColors: ['#f59f9f', '#ffd7de'],
highlightLighten: 1.1,
});
}
initSparkline6() {
this.$sparkline6.sparkline(this.generateRandomArr(102, -1, 1), {
type: 'tristate',
height: '100px',
width: '100%',
posBarColor: '#ffebb2',
negBarColor: '#b7b3ff',
zeroBarColor: '#d6dee5',
barWidth: 5,
barSpacing: 3,
zeroAxis: true,
});
// Chrome and Safari fix for to set correct width to chart
this.$sparkline6.find('canvas').css({ width: this.$sparkline6.width() });
}
initSparkline7() {
this.$sparkline7.sparkline(this.generateRandomArr(15, 10, 100, true), {
width: '100%',
height: '200px',
lineColor: '#547fff',
fillColor: false,
});
}
render() {
return (
<div>
<Row>
<Col xs={12} lg={6} xl={5}>
<Widget
title={<h5>Sparkline <span className="fw-semi-bold">Bar Chart</span></h5>}
close collapse
>
<p className="fs-mini text-muted">Each example displayed below takes just 1 line of HTML or javascript to generate.</p>
<div className="chart-overflow-bottom" ref={(r) => { this.$sparkline1 = $(r); }} />
<div className="stats-row text-muted mt-xlg">
<div className="stat-item">
<h6 className="name">ARR ($)</h6>
<p className="value">4 375 800</p>
</div>
<div className="stat-item">
<h6 className="name">MRR ($)</h6>
<p className="value">863 425</p>
</div>
<div className="stat-item">
<h6 className="name">TTN ($)</h6>
<p className="value">5 634 100</p>
</div>
<div className="stat-item">
<h6 className="name">MRR / ARR </h6>
<p className="value">0.1634</p>
</div>
</div>
<hr />
<div className="d-flex justify-content-between">
<small>
<span className="badge badge-warning">Profit</span> Legend Item Emulation
</small>
<small>
<span className="badge badge-danger">Loss</span> Legend Item Emulation
</small>
</div>
</Widget>
</Col>
<Col xs={12} lg={6} xl={4}>
<Widget
title={<h5>Sparkline <span className="fw-semi-bold">Pie Chart</span></h5>}
close collapse
>
<p className="fs-mini text-muted">Each example displayed below takes just 1 line of HTML or javascript to generate.</p>
<div className="text-center" ref={(r) => { this.$sparkline2 = $(r); }} />
<Alert className="text-muted" color="white" isOpen={this.state.isAlertVisible} toggle={this.toggleAlert}>
<h5>Sales Report</h5>
<Progress className="progress-xs" color="secondary" value="16" />
<p className="text-muted"><small>Prev year quota achievement 16%. Should work harder!</small></p>
</Alert>
</Widget>
</Col>
<Col xs={12} lg={6} xl={3}>
<Widget
title={<h5>Area <span className="fw-semi-bold">Sparkline</span></h5>}
close collapse
>
<p className="fs-mini text-muted">Each example displayed below takes just 1 line of HTML or javascript to generate.</p>
<div className="stats-row text-muted mt">
<div className="stat-item">
<h6 className="name">Overall Growth</h6>
<p className="value">43.75%</p>
</div>
<div className="stat-item">
<h6 className="name">Montly</h6>
<p className="value">86.34%</p>
</div>
</div>
<p className="text-muted fs-mini">
<span className="fw-semi-bold">17% higher</span> than last month
</p>
<div className="chart-overflow-bottom" ref={(r) => { this.$sparkline3 = $(r); }} />
</Widget>
</Col>
</Row>
<Row>
<Col xs={12} lg={7} xl={9}>
<Widget
title={<h5>Sparkline <span className="fw-semi-bold">Line Chart</span></h5>}
close collapse
>
<p className="fs-mini text-muted">Each example displayed below takes just 1 line of HTML or javascript to generate.</p>
<div className="chart-overflow-bottom" ref={(r) => { this.$sparkline4 = $(r); }} />
</Widget>
</Col>
<Col xs={12} lg={5} xl={3}>
<Widget
title={<h5>Sparkline <span className="fw-semi-bold">Pie Chart</span></h5>}
close collapse
>
<p className="fs-mini text-muted">Each example displayed below takes just 1 line of HTML or javascript to generate.</p>
<div className="text-center" ref={(r) => { this.$sparkline5 = $(r); }} />
<p className="mt">Possible actions:</p>
<ButtonGroup>
<Button color="light">Yoga</Button>
<Button color="light">Coffee</Button>
<Button color="light">Dancing</Button>
</ButtonGroup>
</Widget>
</Col>
<Col xs={12} lg={6}>
<Widget
title={<h5>Sparkline <span className="fw-semi-bold">Pie Chart</span></h5>}
close collapse
>
<InputGroup>
<Input type="text" size={16} placeholder="Filter By Period: MM/DD/YYY" />
<InputGroupAddon><i className="fa fa-search text-gray" /></InputGroupAddon>
</InputGroup>
<p className="fs-mini text-muted mt">Each example displayed below takes just 1 line of HTML or javascript to generate.</p>
<div className="chart-overflow-bottom" ref={(r) => { this.$sparkline6 = $(r); }} />
</Widget>
</Col>
<Col xs={12} lg={6}>
<Widget
title={<h5>Sparkline <span className="fw-semi-bold">Line Chart</span></h5>}
close collapse
>
<p className="fs-mini text-muted">Each example displayed below takes just 1 line of HTML or javascript to generate.</p>
<div className="chart-overflow-bottom" ref={(r) => { this.$sparkline7 = $(r); }} />
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Sparkline;
import React from 'react';
import {
Row,
Col,
Progress,
Table,
Label,
Input,
} from 'reactstrap';
import Widget from '../../components/Widget';
/* eslint-disable */
import Calendar from './components/calendar/Calendar';
import Map from './components/mapael-map/MapaelMap';
import Rickshaw from './components/rickshaw/Rickshaw';
/* eslint-enable */
import AnimateNumber from 'react-animated-number';
import s from './Dashboard.module.scss';
import peopleA1 from '../../images/people/a1.jpg';
import peopleA2 from '../../images/people/a2.jpg';
import peopleA5 from '../../images/people/a5.jpg';
import peopleA4 from '../../images/people/a4.jpg';
class Dashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
graph: null,
checkedArr: [false, false, false],
};
this.checkTable = this.checkTable.bind(this);
}
checkTable(id) {
let arr = [];
if (id === 0) {
const val = !this.state.checkedArr[0];
for (let i = 0; i < this.state.checkedArr.length; i += 1) {
arr[i] = val;
}
} else {
arr = this.state.checkedArr;
arr[id] = !arr[id];
}
if (arr[0]) {
let count = 1;
for (let i = 1; i < arr.length; i += 1) {
if (arr[i]) {
count += 1;
}
}
if (count !== arr.length) {
arr[0] = !arr[0];
}
}
this.setState({
checkedArr: arr,
});
}
render() {
return (
<div className={s.root}>
<h1 className="page-title">Dashboard &nbsp;
<small>
<small>The Lucky One</small>
</small>
</h1>
<Row>
<Col lg={7}>
<Widget className="bg-transparent">
<Map />
</Widget>
</Col>
<Col lg={1} />
<Col lg={4}>
<Widget
className="bg-transparent"
title={<h5> Map
<span className="fw-semi-bold">&nbsp;Statistics</span></h5>} settings refresh close
>
<p>Status: <strong>Live</strong></p>
<p>
<span className="circle bg-warning text-white"><i className="fa fa-map-marker" /></span> &nbsp;
146 Countries, 2759 Cities
</p>
<div className="row progress-stats">
<div className="col-md-9 col-12">
<h6 className="name">Foreign Visits</h6>
<p className="description deemphasize mb-xs">Some Cool Text</p>
<Progress color="primary" value="60" className="bg-white progress-xs" />
</div>
<div className="col-md-3 col-12 text-center">
<span className="status rounded rounded-lg bg-body-light">
<small><AnimateNumber value={75} />%</small>
</span>
</div>
</div>
<div className="row progress-stats">
<div className="col-md-9 col-12">
<h6 className="name">Local Visits</h6>
<p className="description deemphasize mb-xs">P. to C. Conversion</p>
<Progress color="danger" value="39" className="bg-white progress-xs" />
</div>
<div className="col-md-3 col-12 text-center">
<span className="status rounded rounded-lg bg-body-light">
<small><AnimateNumber value={84} />%</small>
</span>
</div>
</div>
<div className="row progress-stats">
<div className="col-md-9 col-12">
<h6 className="name">Sound Frequencies</h6>
<p className="description deemphasize mb-xs">Average Bitrate</p>
<Progress color="success" value="80" className="bg-white progress-xs" />
</div>
<div className="col-md-3 col-12 text-center">
<span className="status rounded rounded-lg bg-body-light">
<small><AnimateNumber value={92} />%</small>
</span>
</div>
</div>
<h6 className="fw-semi-bold mt">Map Distributions</h6>
<p>Tracking: <strong>Active</strong></p>
<p>
<span className="circle bg-warning text-white"><i className="fa fa-cog" /></span>
&nbsp; 391 elements installed, 84 sets
</p>
<div className="input-group mt">
<input type="text" className="form-control" placeholder="Search Map" />
<span className="input-group-btn">
<button type="submit" className="btn btn-default">
<i className="fa fa-search text-gray" />
</button>
</span>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col lg={4} xs={12}>
<Widget
title={<h6> USERBASE GROWTH </h6>}
close settings
>
<div className="stats-row">
<div className="stat-item">
<h6 className="name">Overall Growth</h6>
<p className="value">76.38%</p>
</div>
<div className="stat-item">
<h6 className="name">Montly</h6>
<p className="value">10.38%</p>
</div>
<div className="stat-item">
<h6 className="name">24h</h6>
<p className="value">3.38%</p>
</div>
</div>
<Progress color="success" value="60" className="bg-gray-lighter progress-xs" />
<p>
<small>
<span className="circle bg-warning text-white">
<i className="fa fa-chevron-up" />
</span>
</small>
<span className="fw-semi-bold">&nbsp;17% higher</span>
&nbsp;than last month
</p>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget
title={<h6> TRAFFIC VALUES </h6>}
close settings
>
<div className="stats-row">
<div className="stat-item">
<h6 className="name">Overall Values</h6>
<p className="value">17 567 318</p>
</div>
<div className="stat-item">
<h6 className="name">Montly</h6>
<p className="value">55 120</p>
</div>
<div className="stat-item">
<h6 className="name">24h</h6>
<p className="value">9 695</p>
</div>
</div>
<Progress color="danger" value="60" className="bg-gray-lighter progress-xs" />
<p>
<small><span className="circle bg-warning text-white"><i className="fa fa-chevron-down" /></span></small>
<span className="fw-semi-bold">&nbsp;8% lower</span>
&nbsp;than last month
</p>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget
title={<h6> RANDOM VALUES </h6>}
close settings
>
<div className="stats-row">
<div className="stat-item">
<h6 className="name fs-sm">Overcome T.</h6>
<p className="value">104.85%</p>
</div>
<div className="stat-item">
<h6 className="name fs-sm">Takeoff Angle</h6>
<p className="value">14.29&deg;</p>
</div>
<div className="stat-item">
<h6 className="name fs-sm">World Pop.</h6>
<p className="value">7,211M</p>
</div>
</div>
<Progress color="bg-primary" value="60" className="bg-gray-lighter progress-xs" />
<p>
<small><span className="circle bg-warning text-white"><i className="fa fa-plus" /></span></small>
<span className="fw-semi-bold">&nbsp;8 734 higher</span>
&nbsp;than last month
</p>
</Widget>
</Col>
</Row>
<Row>
<Col lg={4} xs={12}>
<Widget
title={<h6><span className="badge badge-danger">New</span> Messages</h6>}
refresh close
>
<div className="widget-body p-0">
<div className="list-group list-group-lg">
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img className="rounded-circle" src={peopleA2} alt="..." />
<i className="status status-bottom bg-success" />
</span>
<div>
<h6 className="m-0">Chris Gray</h6>
<p className="help-block text-ellipsis m-0">Hey! What&apos;s up? So many times since we</p>
</div>
</button>
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img className="rounded-circle" src={peopleA4} alt="..." />
<i className="status status-bottom bg-success" />
</span>
<div>
<h6 className="m-0">Jamey Brownlow</h6>
<p className="help-block text-ellipsis m-0">Good news coming tonight. Seems they agreed to
proceed</p>
</div>
</button>
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img className="rounded-circle" src={peopleA1} alt="..." />
<i className="status status-bottom bg-warning" />
</span>
<div>
<h6 className="m-0">Livia Walsh</h6>
<p className="help-block text-ellipsis m-0">Check my latest email plz!</p>
</div>
</button>
<button className="list-group-item text-left">
<span className="thumb-sm float-left mr">
<img className="rounded-circle" src={peopleA5} alt="..." />
<i className="status status-bottom bg-danger" />
</span>
<div>
<h6 className="m-0">Jaron Fitzroy</h6>
<p className="help-block text-ellipsis m-0">What about summer break?</p>
</div>
</button>
</div>
</div>
<footer className="bg-body-light mt">
<input type="search" className="form-control form-control-sm" placeholder="Search" />
</footer>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget
title={<h6> Market <span className="fw-semi-bold">Stats</span></h6>} close
>
<div className="widget-body">
<h3>$720 Earned</h3>
<p className="fs-mini text-muted mb mt-sm">
Target <span className="fw-semi-bold">$820</span> day earnings
is <span className="fw-semi-bold">96%</span> reached.
</p>
</div>
<div className={`widget-table-overflow ${s.table}`}>
<Table striped size="sm">
<thead className="no-bd">
<tr>
<th>
<div className="checkbox abc-checkbox">
<Input
className="mt-0"
id="checkbox210" type="checkbox" onClick={() => this.checkTable(0)}
checked={this.state.checkedArr[0]}
readOnly
/>{' '}
<Label for="checkbox210" />
</div>
</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div className="checkbox abc-checkbox">
<Input
className="mt-0"
id="checkbox212" type="checkbox" onClick={() => this.checkTable(1)}
checked={this.state.checkedArr[1]}
readOnly
/>{' '}
<Label for="checkbox212" />
</div>
</td>
<td>HP Core i7</td>
<td className="text-align-right fw-semi-bold">$346.1</td>
</tr>
<tr>
<td>
<div className="checkbox abc-checkbox">
<Input
className="mt-0"
id="checkbox214" onClick={() => this.checkTable(2)} type="checkbox"
checked={this.state.checkedArr[2]}
readOnly
/>{' '}
<Label for="checkbox214" />
</div>
</td>
<td>Air Pro</td>
<td className="text-align-right fw-semi-bold">$533.1</td>
</tr>
</tbody>
</Table>
</div>
<div className="widget-body mt-xlg chart-overflow-bottom" style={{ height: '100px' }}>
<Rickshaw height={100} />
</div>
</Widget>
</Col>
<Col lg={4} xs={12}>
<Widget title={<h6>Calendar</h6>} settings close bodyClass="p-0">
<Calendar />
<div className="list-group fs-mini">
<button className="list-group-item text-ellipsis">
<span className="badge badge-pill badge-warning float-right">6:45</span>
Weed out the flower bed
</button>
<button className="list-group-item text-ellipsis">
<span className="badge badge-pill badge-success float-right">9:41</span>
Stop world water pollution
</button>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Dashboard;
import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
/* eslint-disable */
import $ from 'jquery';
import 'imports-loader?jQuery=jquery,this=>window!bootstrap';
import 'imports-loader?jQuery=jquery,this=>window!bootstrap_calendar/bootstrap_calendar/js/bootstrap_calendar';
/* eslint-enable */
import './Calendar.scss';
const monthNames = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
class Calendar extends React.Component {
static propTypes = {
white: PropTypes.bool,
}
static defaultProps = {
white: false,
}
componentDidMount() {
const $calendar = $(this.element);
const now = new Date();
const month = now.getMonth() + 1;
const year = now.getFullYear();
const events = [
[
`2/${month}/${year}`,
'The flower bed',
'#',
'#547fff',
'Contents here',
],
[
`5/${month}/${year}`,
'Stop world water pollution',
'#',
'#ffc247',
'Have a kick off meeting with .inc company',
],
[
`18/${month}/${year}`,
'Light Blue 2.2 release',
'#',
'#3abf94',
'Some contents here',
],
[
`29/${month}/${year}`,
'A link',
'http://www.flatlogic.com',
'#f55d5d',
],
];
$calendar.calendar({
months: monthNames,
days: dayNames,
events,
popover_options: {
placement: 'top',
html: true,
},
});
$calendar.find('.icon-arrow-left').addClass('la la-arrow-left');
$calendar.find('.icon-arrow-right').addClass('la la-arrow-right');
const restyleCalendar = () => {
$calendar.find('.event').each((index, el) => {
const $eventIndicator = $('<span></span>');
$eventIndicator
.css('background-color', $(el).css('background-color'))
.appendTo($(el).find('a'));
$(el).css('background-color', '');
});
};
$calendar.find('.icon-arrow-left, .icon-arrow-right').parent().on('click', restyleCalendar);
restyleCalendar();
}
render() {
return (<div ref={(el) => this.element = el} className={cx('calendar', { 'calendar-white': this.props.white })} />);
}
}
export default Calendar;
@import '../../../../styles/app';
/*
* Bootstrap calendar
*/
.calendar {
font-size: $font-size-mini;
background: $gray-light;
:global {
.la {
color: #798892;
}
}
}
.calendar-white {
background: $white;
.calendar {
background: inherit;
}
}
.calendar a {
text-decoration: none;
cursor: pointer;
color: $gray-800 !important;
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
position: relative;
}
.calendar td {
text-align: center;
font-size: 110%;
}
.calendar .header {
padding: 10px 0;
color: #666;
i {
cursor: pointer;
}
}
.calendar .prev_month {
float: left;
}
.calendar .next_month {
float: right;
}
.calendar .year {
text-align: center;
font-weight: 500;
}
.calendar .week_days {
color: $gray-600;
font-size: 80%;
}
.calendar .event {
color: white;
font-weight: bold;
background-color: transparent;
&:hover {
> a {
background-color: $gray-200;
}
}
> a {
background-color: $white;
@include border-radius(50%);
> span {
display: inline-block;
width: 6px;
height: 6px;
position: absolute;
bottom: 1px;
right: 1px;
@include border-radius(50%);
}
}
.popover {
color: $text-color;
}
}
.calendar .table td {
padding: 3px 0;
border-top: 0;
}
.calendar .table {
margin-bottom: 3px;
&.header {
margin-bottom: $spacer;
}
}
.calendar .visualmonthyear {
font-size: 1.25rem;
color: #757575;
}
.dropdown-menu .calendar td a {
padding: 0;
}
import React from 'react';
/* eslint-disable */
import $ from 'jquery';
import 'imports-loader?$=jquery,this=>window!jquery-mapael/js/maps/usa_states';
import 'imports-loader?$=jquery,this=>window!jquery-mapael/js/jquery.mapael';
/* eslint-enable */
import AnimateNumber from 'react-animated-number';
import s from './MapaelMap.module.scss';
class MapaelMap extends React.Component {
componentDidMount() {
let state = '';
const geoLocationData = {
map: {
name: 'usa_states',
defaultArea: {
attrs: {
fill: '#e5e7f1',
stroke: '#fafbff',
},
attrsHover: {
fill: '#e9ebf6',
animDuration: 50,
},
tooltip: {
content: () => `<strong>${state}</strong>`,
},
eventHandlers: {
mouseover: (e, id) => {
state = id;
},
},
},
defaultPlot: {
size: 17,
attrs: {
fill: '#ffc247',
stroke: '#fff',
'stroke-width': 0,
'stroke-linejoin': 'round',
},
attrsHover: {
'stroke-width': 1,
animDuration: 100,
},
},
zoom: {
enabled: true,
step: 0.75,
mousewheel: false,
},
},
plots: {
ny: {
latitude: 40.717079,
longitude: -74.00116,
tooltip: { content: 'New York' },
},
on: {
latitude: 33.145235,
longitude: -83.811834,
size: 18,
tooltip: { content: 'Oconee National Forest' },
},
sf: {
latitude: 37.792032,
longitude: -122.394613,
size: 12,
tooltip: { content: 'San Francisco' },
},
la: {
latitude: 26.935080,
longitude: -80.851766,
size: 26,
tooltip: { content: 'Lake Okeechobee' },
},
gc: {
latitude: 36.331308,
longitude: -83.336050,
size: 10,
tooltip: { content: 'Grainger County' },
},
cc: {
latitude: 36.269356,
longitude: -76.587477,
size: 22,
tooltip: { content: 'Chowan County' },
},
ll: {
latitude: 30.700644,
longitude: -95.145249,
tooltip: { content: 'Lake Livingston' },
},
tc: {
latitude: 34.546708,
longitude: -90.211471,
size: 14,
tooltip: { content: 'Tunica County' },
},
lc: {
latitude: 32.628599,
longitude: -103.675115,
tooltip: { content: 'Lea County' },
},
uc: {
latitude: 40.456692,
longitude: -83.522688,
size: 11,
tooltip: { content: 'Union County' },
},
lm: {
latitude: 33.844630,
longitude: -118.157483,
tooltip: { content: 'Lakewood Mutual' },
},
},
};
$('#mapael').mapael(geoLocationData);
}
render() {
return (
<div className={`mapael ${s.mapael}`} id="mapael">
<div className="stats">
<h6 className="mt-1">GEO-LOCATIONS</h6>
<p className="h3 m-0">
<span className="mr-xs fw-normal">
<AnimateNumber
value={1656843}
initialValue={0}
duration={1000}
stepPrecision={0}
formatValue={n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")}
/></span>
<i className="fa fa-map-marker" />
</p>
</div>
<div className="map">
<span>Alternative content for the map</span>
</div>
</div>
);
}
}
export default MapaelMap;
{
"name": "email",
"version": "0.0.0",
"private": true,
"main": "./Email.js"
}
\ No newline at end of file
......@@ -2,7 +2,6 @@ import React from 'react';
import $ from 'jquery';
/* eslint-disable */
import 'imports-loader?jQuery=jquery,this=>window!webpack-raphael/raphael';
import 'imports-loader?jQuery=jquery,this=>window!govpredict-morris/morris';
import 'imports-loader?jQuery=jquery,this=>window!flot';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.resize';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.time';
......@@ -20,7 +19,7 @@ import {
} from 'reactstrap';
import FlotBars from './flot/charts/BarsChart';
import Widget from '../../components/Widget';
import Widget from '../../../components/Widget';
import s from './Charts.module.scss';
......
......@@ -8,7 +8,7 @@ import {
Button,
} from 'reactstrap';
import Widget from '../../../components/Widget';
import Widget from '../../../../components/Widget';
const tableData = [
{
......
......@@ -7,7 +7,7 @@ import {
Table,
} from 'reactstrap';
import Widget from '../../../components/Widget';
import Widget from '../../../../components/Widget';
const Typography = () => (
<div>
......
......@@ -6,7 +6,7 @@ import {
Col,
} from 'reactstrap';
import Widget from '../../../components/Widget';
import Widget from '../../../../components/Widget';
const Typography = () => (
<div>
......
......@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { Editor } from 'react-draft-wysiwyg';
import { Input, Button } from 'reactstrap';
import Widget from '../../../../components/Widget';
import Widget from '../../../../../components/Widget';
import s from './Compose.module.scss';
......
@import '../../../../styles/app';
@import '../../../../../styles/app';
:global {
@import '../../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg';
@import '../../../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg';
}
.compose {
......
import React from 'react';
import PropTypes from 'prop-types';
import Widget from '../../../../components/Widget';
import Widget from '../../../../../components/Widget';
import MessageHeader from '../MessageHeader/MessageHeader';
import MessageAttachments from '../MessageAttachments/MessageAttachments';
......
......@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import ReplyDropdown from '../ReplyDropdown/ReplyDropdown';
import userPhoto from '../../../../images/people/a5.jpg';
import userPhoto from '../../../../../images/people/a5.jpg';
import s from './MessageHeader.module.scss';
const MessageHeader = ({ title, name, email, to, date, compose }) => (
......
......@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import cx from 'classnames';
import { Table, Input, FormGroup, Label } from 'reactstrap';
import Widget from '../../../../components/Widget';
import Widget from '../../../../../components/Widget';
import MessageTableHeader from '../MessageTableHeader/MessageTableHeader';
import Pagination from '../Pagination/Pagination';
import Compose from '../Compose/Compose';
......
import photo1 from '../../images/tables/1.png';
import photo2 from '../../images/tables/2.png';
import photo3 from '../../images/tables/3.png';
import photo1 from '../../../images/tables/1.png';
import photo2 from '../../../images/tables/2.png';
import photo3 from '../../../images/tables/3.png';
export default [
{
......
{
"name": "Chat",
"name": "email",
"version": "0.0.0",
"private": true,
"main": "./Chat.js"
}
"main": "./Email.js"
}
\ No newline at end of file
......
......@@ -12,7 +12,7 @@ import moment from 'moment/moment';
import $ from 'jquery';
import s from './Calendar.module.scss';
import Widget from '../../../components/Widget';
import Widget from '../../../../components/Widget';
class Calendar extends React.Component {
......
@import '../../../styles/app';
@import '../../../../styles/app';
:global {
@import '../../../../node_modules/fullcalendar/dist/fullcalendar';
@import '../../../../../node_modules/fullcalendar/dist/fullcalendar';
}
.root {
......
{
"name": "Header",
"name": "calendar",
"version": "0.0.0",
"private": true,
"main": "./Header.js"
"main": "./Calendar.js"
}
......
......@@ -9,18 +9,18 @@ import {
import Lightbox from 'react-images';
import s from './Gallery.module.scss';
import pic1 from '../../../images/pictures/1.jpg';
import pic2 from '../../../images/pictures/2.jpg';
import pic3 from '../../../images/pictures/3.jpg';
import pic4 from '../../../images/pictures/4.jpg';
import pic5 from '../../../images/pictures/5.jpg';
import pic6 from '../../../images/pictures/6.jpg';
import pic8 from '../../../images/pictures/8.jpg';
import pic9 from '../../../images/pictures/9.jpg';
import pic10 from '../../../images/pictures/10.jpg';
import pic11 from '../../../images/pictures/11.jpg';
import pic13 from '../../../images/pictures/13.jpg';
import pic14 from '../../../images/pictures/14.jpg';
import pic1 from '../../../../images/pictures/1.jpg';
import pic2 from '../../../../images/pictures/2.jpg';
import pic3 from '../../../../images/pictures/3.jpg';
import pic4 from '../../../../images/pictures/4.jpg';
import pic5 from '../../../../images/pictures/5.jpg';
import pic6 from '../../../../images/pictures/6.jpg';
import pic8 from '../../../../images/pictures/8.jpg';
import pic9 from '../../../../images/pictures/9.jpg';
import pic10 from '../../../../images/pictures/10.jpg';
import pic11 from '../../../../images/pictures/11.jpg';
import pic13 from '../../../../images/pictures/13.jpg';
import pic14 from '../../../../images/pictures/14.jpg';
const items = [
{
......
@import '../../../styles/app';
@import '../../../../styles/app';
.root {
:global .tile {
......
{
"name": "Helper",
"name": "invoice",
"version": "0.0.0",
"private": true,
"main": "./Helper.js"
"main": "./Gallery.js"
}
......
......@@ -9,8 +9,8 @@ import {
} from 'reactstrap';
import s from './Invoice.module.scss';
import Widget from '../../../components/Widget';
import iLogo from '../../../images/invoice-logo.png';
import Widget from '../../../../components/Widget';
import iLogo from '../../../../images/invoice-logo.png';
class Stats extends React.Component {
......
@import '../../../styles/app';
@import '../../../../styles/app';
.root {
.invoiceLogo {
......
{
"name": "InputValidation",
"name": "invoice",
"version": "0.0.0",
"private": true,
"main": "./InputValidation.js"
"main": "./Invoice.js"
}
......
......@@ -20,10 +20,10 @@ import {
} from 'reactstrap';
import s from './Search.module.scss';
import i1 from '../../../images/search/1.jpg';
import i2 from '../../../images/search/5.jpg';
import i3 from '../../../images/search/3.jpg';
import i4 from '../../../images/search/13.jpg';
import i1 from '../../../../images/search/1.jpg';
import i2 from '../../../../images/search/5.jpg';
import i3 from '../../../../images/search/3.jpg';
import i4 from '../../../../images/search/13.jpg';
class Search extends React.Component {
......
@import '../../../styles/app';
@import '../../../../styles/app';
.root {
.searchResultCategories {
......
{
"name": "Notifications",
"name": "search",
"version": "0.0.0",
"private": true,
"main": "./Notifications"
"main": "./Search.js"
}
......
......@@ -11,14 +11,14 @@ import {
import s from './Timeline.module.scss'; // eslint-disable-line css-modules/no-unused-class
import a1 from '../../../images/people/a1.jpg';
import a2 from '../../../images/people/a2.jpg';
import a3 from '../../../images/people/a3.jpg';
import a4 from '../../../images/people/a4.jpg';
import a5 from '../../../images/people/a5.jpg';
import a6 from '../../../images/people/a6.jpg';
import avatar from '../../../images/avatar.png';
import img8 from '../../../images/search/8.jpg';
import a1 from '../../../../images/people/a1.jpg';
import a2 from '../../../../images/people/a2.jpg';
import a3 from '../../../../images/people/a3.jpg';
import a4 from '../../../../images/people/a4.jpg';
import a5 from '../../../../images/people/a5.jpg';
import a6 from '../../../../images/people/a6.jpg';
import avatar from '../../../../images/avatar.png';
import img8 from '../../../../images/search/8.jpg';
const BasicMap = withScriptjs(withGoogleMap(() =>
<GoogleMap
......
@import '../../../styles/app';
@import '../../../../styles/app';
/* Post Comments */
.postComments {
......
{
"name": "timeline",
"version": "0.0.0",
"main": "./Timeline.js",
"private": true
}
......@@ -28,7 +28,7 @@ import TextareaAutosize from 'react-autosize-textarea';
import ReactMde, { ReactMdeCommands } from 'react-mde';
import Widget from '../../../components/Widget';
import Widget from '../../../../components/Widget';
import s from './Elements.module.scss';
......
@import '../../../styles/app';
@import '../../../../styles/app';
:global {
@import '../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg';
@import '../../../../node_modules/react-select2-wrapper/css/select2';
@import '../../../../node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox';
@import '../../../../node_modules/react-datetime/css/react-datetime';
@import '../../../../node_modules/rc-color-picker/dist/rc-color-picker';
@import '../../../../node_modules/bootstrap-slider/dist/css/bootstrap-slider';
@import '../../../../node_modules/jasny-bootstrap/dist/css/jasny-bootstrap';
@import '../../../../node_modules/react-mde/lib/styles/scss/react-mde-all';
@import '../../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg';
@import '../../../../../node_modules/react-select2-wrapper/css/select2';
@import '../../../../../node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox';
@import '../../../../../node_modules/react-datetime/css/react-datetime';
@import '../../../../../node_modules/rc-color-picker/dist/rc-color-picker';
@import '../../../../../node_modules/bootstrap-slider/dist/css/bootstrap-slider';
@import '../../../../../node_modules/jasny-bootstrap/dist/css/jasny-bootstrap';
@import '../../../../../node_modules/react-mde/lib/styles/scss/react-mde-all';
}
.autogrow {
......
{
"name": "Skycons",
"name": "FormsElements",
"version": "0.0.0",
"private": true,
"main": "./Skycons.js"
"main": "./Elements.js"
}
......
......@@ -8,8 +8,8 @@ import {
} from 'reactstrap';
import Formsy from 'formsy-react';
import InputValidation from '../../../components/InputValidation';
import Widget from '../../../components/Widget';
import InputValidation from '../../../../components/InputValidation';
import Widget from '../../../../components/Widget';
class Validation extends React.Component {
......
{
"name": "Sparklines",
"name": "FormValidation",
"version": "0.0.0",
"private": true,
"main": "./Sparklines.js"
"main": "./Validation.js"
}
......
......@@ -17,8 +17,8 @@ import Datetime from 'react-datetime';
import { select2CountriesData, select2ShipmentData, cardTypesData } from './data';
import InputValidation from '../../../components/InputValidation/InputValidation';
import Widget from '../../../components/Widget';
import InputValidation from '../../../../components/InputValidation/InputValidation';
import Widget from '../../../../components/Widget';
import s from './Wizard.module.scss';
const count = 4;
......
@import '../../../styles/app';
@import '../../../../styles/app';
:global {
@import '../../../../node_modules/react-select2-wrapper/css/select2';
@import '../../../../node_modules/react-datetime/css/react-datetime';
@import '../../../../../node_modules/react-select2-wrapper/css/select2';
@import '../../../../../node_modules/react-datetime/css/react-datetime';
}
.root {
......
{
"name": "Analytics",
"name": "FormWizard",
"version": "0.0.0",
"private": true,
"main": "./Analytics.js"
"main": "./Wizard.js"
}
......
......@@ -19,14 +19,14 @@ import {
import $ from 'jquery';
import 'imports-loader?window.jQuery=jquery,this=>window!jquery-ui/ui/widgets/sortable'; //eslint-disable-line
import Widget from '../../components/Widget';
import Widget from '../../../components/Widget';
import './Grid.scss';
import peopleA1 from '../../images/people/a1.jpg';
import peopleA2 from '../../images/people/a2.jpg';
import peopleA3 from '../../images/people/a3.jpg';
import peopleA4 from '../../images/people/a4.jpg';
import peopleA1 from '../../../images/people/a1.jpg';
import peopleA2 from '../../../images/people/a2.jpg';
import peopleA3 from '../../../images/people/a3.jpg';
import peopleA4 from '../../../images/people/a4.jpg';
const sortOptions = {
connectWith: '.widget-container',
......@@ -143,7 +143,6 @@ class Grid extends React.Component {
title={<h6>Default <span className="fw-semi-bold">Widget</span></h6>}
refresh collapse fullscreen close
showTooltip tooltipPlacement={tooltipPlacement}
data-widgster-load="/demo/grid/default.php"
>
<div>
<p>A timestamp this widget was created: Apr 24, 19:07:07</p>
......@@ -156,7 +155,6 @@ class Grid extends React.Component {
ref={(r) => {
this.sharesWidget = r;
}}
data-widgster-load="/demo/grid/shares.php"
data-post-processing
showTooltip tooltipPlacement={tooltipPlacement}
title={<h6>
......@@ -211,7 +209,6 @@ class Grid extends React.Component {
</Widget>
<Widget
id="autoload-widget"
data-widgster-load="/demo/grid/autoload.php"
data-post-processing="true"
data-widgster-autoload="true"
data-widgster-show-loader="false"
......@@ -295,7 +292,6 @@ class Grid extends React.Component {
<Col xl={6} className="widget-container">
<Widget
id="news-widget"
data-widgster-load="/demo/grid/news.php"
data-post-processing="true"
title={<div><h6> News <span className="badge badge-pill badge-success">17</span></h6>
<span className="text-muted">spinning refresh button & close prompt</span>
......
@import '../../styles/app';
@import '../../../styles/app';
/* NEWS LIST */
:global {
......
{
"name": "grid",
"version": "0.0.0",
"main": "./Grid.js",
"private": true
}
......@@ -18,12 +18,11 @@ import {
DropdownToggle
} from "reactstrap";
import Widget from '../../components/Widget';
import Rating from '../product/components/Rating/Rating';
import Widget from '../../../components/Widget';
import s from './Management.module.scss';
import { getProductsRequest, deleteProductRequest } from '../../actions/products'
import Loader from '../../components/Loader';
import { getProductsRequest, deleteProductRequest } from '../../../actions/products'
import Loader from '../../../components/Loader';
import cx from 'classnames';
class Management extends React.Component {
......@@ -63,12 +62,6 @@ class Management extends React.Component {
)
}
ratingFormatter(cell) {
return (
<Rating rating={parseFloat(cell)}/>
)
}
titleFormatter(cell, row) {
return cell ? (
<Link to={'/app/ecommerce/product/' + row.id}>
......@@ -199,11 +192,6 @@ class Management extends React.Component {
<span className="fs-sm">Price($)</span>
</TableHeaderColumn>
)}
{window.innerWidth >= 768 && (
<TableHeaderColumn dataField="rating" dataFormat={this.ratingFormatter}>
<span className="fs-sm">Rating</span>
</TableHeaderColumn>
)}
<TableHeaderColumn dataFormat={this.apiFormatter}>
<span className="fs-sm">Api</span>
</TableHeaderColumn>
......
......@@ -28,9 +28,9 @@ import {
createProductRequest,
deleteProductRequest,
getProductsImagesRequest
} from '../../../../actions/products';
import Widget from '../../../../components/Widget';
import Loader from '../../../../components/Loader';
} from '../../../../../actions/products';
import Widget from '../../../../../components/Widget';
import Loader from '../../../../../components/Loader';
import s from './ProductEdit.module.scss';
class ProductEdit extends React.Component {
......
{
"name": "EasyPie",
"name": "ProductEdit",
"version": "0.0.0",
"private": true,
"main": "./EasyPie.js"
}
"main": "./ProductEdit.js"
}
\ No newline at end of file
......
{
"name": "Flot",
"name": "Management",
"version": "0.0.0",
"private": true,
"main": "./Flot.js"
}
"main": "./Management.js"
}
\ No newline at end of file
......
@import '../../../styles/app';
@import '../../../../styles/app';
.MapContainer {
position: absolute;
......
{
"name": "Morris",
"name": "GoogleMap",
"version": "0.0.0",
"private": true,
"main": "./Morris.js"
"main": "./Google.js"
}
......
@import '../../../styles/app';
@import '../../../../styles/app';
.contentMap {
position: absolute;
......
{
"name": "Vector",
"version": "0.0.0",
"main": "./Vector.js",
"private": true
}
......@@ -10,13 +10,13 @@ import {
Form,
FormGroup,
} from 'reactstrap';
import Widget from '../../components/Widget';
import Widget from '../../../components/Widget';
import p19 from '../../images/pictures/19.jpg';
import a5 from '../../images/people/a5.jpg';
import a1 from '../../images/people/a1.jpg';
import a3 from '../../images/people/a3.jpg';
import avatar from '../../images/avatar.png';
import p19 from '../../../images/pictures/19.jpg';
import a5 from '../../../images/people/a5.jpg';
import a1 from '../../../images/people/a1.jpg';
import a3 from '../../../images/people/a3.jpg';
import avatar from '../../../images/avatar.png';
import s from './Profile.module.scss';
......
@import '../../../styles/app';
.root {
// some styles
}
.profileContactContainer {
margin-top: -75px;
}
.profileContacts {
@include list-unstyled();
display: inline-block;
text-align: left;
> li {
margin-bottom: $spacer / 2;
}
> li > a {
color: lighten($text-color, 30%);
text-decoration: none;
@include hover-focus {
color: $text-color;
}
}
}
.profileAvatar {
border: 3px solid $white;
}
.profileStat {
border-left: none !important;
padding-right: 0 !important;
}
.profileStatValue {
font-size: 28px;
font-weight: $font-weight-base !important;
margin-bottom: 0;
}
.event {
background: $white;
border-radius: $border-radius;
padding: 20px 20px 0;
position: relative;
margin-bottom: $spacer;
box-shadow: var(--widget-shadow);
}
.eventTitle {
margin-bottom: 2px;
font-weight: $font-weight-semi-bold;
a {
text-decoration: none;
color: #7ca9dd;
}
small > a {
color: $text-muted;
}
}
.eventAvatar {
float: left;
margin-right: $spacer;
}
.eventAvatar > img {
width: 34px;
}
.eventBody {
font-size: 0.9rem;
margin-bottom: $spacer;
}
.eventFooter {
background-color: $gray-100;
margin: 20px -20px 0;
padding: 10px 20px;
}
.eventTimestamp {
color: $text-muted;
}
{
"name": "Charts",
"name": "profile",
"version": "0.0.0",
"private": true,
"main": "./Charts.js"
"main": "./Profile.js"
}
......
import React from 'react';
import {
Breadcrumb,
BreadcrumbItem,
Progress,
Dropdown,
DropdownMenu,
DropdownToggle,
DropdownItem,
} from 'reactstrap';
import {
BootstrapTable,
TableHeaderColumn,
} from 'react-bootstrap-table';
import ReactTable from 'react-table';
import { reactTableData, reactBootstrapTableData } from './data';
import Widget from '../../../../components/Widget';
import s from './Dynamic.modules.scss';
class Dynamic extends React.Component {
constructor(props) {
super(props);
this.state = {
reactTable: reactTableData(),
reactBootstrapTable: reactBootstrapTableData(),
};
}
renderSizePerPageDropDown = (props) => {
const limits = [];
props.sizePerPageList.forEach((limit) => {
limits.push(<DropdownItem key={limit} onClick={() => props.changeSizePerPage(limit)}>{ limit }</DropdownItem>);
});
return (
<Dropdown isOpen={props.open} toggle={props.toggleDropDown}>
<DropdownToggle color="default" caret>
{ props.currSizePerPage }
</DropdownToggle>
<DropdownMenu>
{ limits }
</DropdownMenu>
</Dropdown>
);
};
render() {
const options = {
sizePerPage: 10,
paginationSize: 3,
sizePerPageDropDown: this.renderSizePerPageDropDown,
};
function infoFormatter(cell) {
return (
<div>
<small>
Type:&nbsp;<span className="fw-semi-bold">{cell.type}</span>
</small>
<br />
<small>
Dimensions:&nbsp;<span className="fw-semi-bold">{cell.dimensions}</span>
</small>
</div>
);
}
function descriptionFormatter(cell) {
return (
<button className="btn-link">
{cell}
</button>
);
}
function progressFormatter(cell) {
return (
<Progress style={{ height: '15px' }} color={cell.type} value={cell.progress} />
);
}
function progressSortFunc(a, b, order) {
if (order === 'asc') {
return a.status.progress - b.status.progress;
}
return b.status.progress - a.status.progress;
}
function dateSortFunc(a, b, order) {
if (order === 'asc') {
return new Date(a.date).getTime() - new Date(b.date).getTime();
}
return new Date(b.date).getTime() - new Date(a.date).getTime();
}
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>Tables Dynamic</BreadcrumbItem>
</Breadcrumb>
<h2 className="page-title">Tables - <span className="fw-semi-bold">Dynamic</span></h2>
<Widget title={<h4>The <span className="fw-semi-bold">React</span> Way</h4>} collapse close>
<p>
Fully customizable Table. Built with <a href="https://allenfang.github.io/react-bootstrap-table/" target="_blank" rel="noopener noreferrer">react-bootstrap-table</a>
</p>
<BootstrapTable data={this.state.reactBootstrapTable} version="4" pagination options={options} search tableContainerClass={`table-striped table-hover ${s.bootstrapTable}`}>
<TableHeaderColumn className="width-50" columnClassName="width-50" dataField="id" isKey>
<span className="fs-sm">ID</span>
</TableHeaderColumn>
<TableHeaderColumn dataField="name" dataSort>
<span className="fs-sm">Name</span>
</TableHeaderColumn>
<TableHeaderColumn className="d-none d-md-table-cell" columnClassName="d-none d-md-table-cell" dataField="info" dataFormat={infoFormatter}>
<span className="fs-sm">Info</span>
</TableHeaderColumn>
<TableHeaderColumn className="d-none d-md-table-cell" columnClassName="d-none d-md-table-cell" dataField="description" dataFormat={descriptionFormatter}>
<span className="fs-sm">Description</span>
</TableHeaderColumn>
<TableHeaderColumn className="d-none d-md-table-cell" columnClassName="d-none d-md-table-cell" dataField="date" dataSort sortFunc={dateSortFunc}>
<span className="fs-sm">Date</span>
</TableHeaderColumn>
<TableHeaderColumn className="width-150" columnClassName="width-150" dataField="status" dataSort dataFormat={progressFormatter} sortFunc={progressSortFunc}>
<span className="fs-sm">Status</span>
</TableHeaderColumn>
</BootstrapTable>
</Widget>
<Widget title={<h4>React <span className="fw-semi-bold">Table</span></h4>} collapse close>
<p>
Simple table extension with sorting, filtering and pagination for React apps. Built with <a href="https://react-table.js.org/" target="_blank" rel="noopener noreferrer">react-table</a>
</p>
<ReactTable
data={this.state.reactTable}
filterable
columns={[
{
Header: 'NAME',
accessor: 'name',
},
{
Header: 'POSITION',
accessor: 'position',
},
{
Header: 'OFFICE',
accessor: 'office',
},
{
Header: 'EXT',
accessor: 'ext',
},
{
Header: 'START DATE',
accessor: 'startDate',
},
{
Header: 'SALARY',
accessor: 'salary',
},
]}
defaultPageSize={10}
className="-striped -highlight"
/>
</Widget>
</div>
);
}
}
export default Dynamic;
@import '../../../styles/app';
@import '../../../../styles/app';
.bootstrapTable {
border: none;
......
{
"name": "Rickshaw",
"name": "dynamic",
"version": "0.0.0",
"private": true,
"main": "./Rickshaw.js"
"main": "./Dynamic.js"
}
......
......@@ -15,7 +15,7 @@ import {
} from 'reactstrap';
import { Sparklines, SparklinesBars } from 'react-sparklines';
import Widget from '../../../components/Widget';
import Widget from '../../../../components/Widget';
import s from './Static.modules.scss';
class Static extends React.Component {
......@@ -27,7 +27,7 @@ class Static extends React.Component {
tableStyles: [
{
id: 1,
picture: require('../../../images/tables/1.png'), // eslint-disable-line global-require
picture: require('../../../../images/tables/1.png'), // eslint-disable-line global-require
description: 'Palo Alto',
info: {
type: 'JPEG',
......@@ -42,7 +42,7 @@ class Static extends React.Component {
},
{
id: 2,
picture: require('../../../images/tables/2.png'), // eslint-disable-line global-require
picture: require('../../../../images/tables/2.png'), // eslint-disable-line global-require
description: 'The Sky',
info: {
type: 'PSD',
......@@ -57,7 +57,7 @@ class Static extends React.Component {
},
{
id: 3,
picture: require('../../../images/tables/3.png'), // eslint-disable-line global-require
picture: require('../../../../images/tables/3.png'), // eslint-disable-line global-require
description: 'Down the road',
label: {
colorClass: 'danger',
......@@ -76,7 +76,7 @@ class Static extends React.Component {
},
{
id: 4,
picture: require('../../../images/tables/4.png'), // eslint-disable-line global-require
picture: require('../../../../images/tables/4.png'), // eslint-disable-line global-require
description: 'The Edge',
info: {
type: 'PNG',
......@@ -91,7 +91,7 @@ class Static extends React.Component {
},
{
id: 5,
picture: require('../../../images/tables/5.png'), // eslint-disable-line global-require
picture: require('../../../../images/tables/5.png'), // eslint-disable-line global-require
description: 'Fortress',
info: {
type: 'JPEG',
......
@import '../../../../styles/app';
.root {
// some styles
}
{
"name": "Sparkline",
"name": "static",
"version": "0.0.0",
"private": true,
"main": "./Sparkline.js"
"main": "./Static.js"
}
......
import React, { Component } from 'react';
import cx from 'classnames';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Alert,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
class Alerts extends Component {
state = {
alerts: [{
id: 'al-1',
type: 'success',
msg: '<span class="fw-semi-bold">Success:</span> You successfully read this important alert message.',
visible: [true, true, true],
}, {
id: 'al-2',
type: 'info',
msg: '<span class="fw-semi-bold">Info:</span> This alert needs your attention, but it\'s not super important.',
visible: [true, true, true],
}, {
id: 'al-3',
type: 'warning',
msg: '<span class="fw-semi-bold"><strong>Warning:</strong></span> Best check yo self, you\'re not looking too good.',
visible: [true, true, true],
}, {
id: 'al-4',
type: 'danger',
msg: '<span class="fw-semi-bold">Danger:</span> Change this and that and try again. <a class="btn btn-default btn-xs float-right mr" href="#">Ignore</a> <a class="btn btn-danger btn-xs float-right mr-xs" href="#">Take this action</a>',
visible: [true, true, true],
}],
}
closeAlert(index, alertGroup) {
const newAlerts = [...this.state.alerts];
newAlerts[index].visible[alertGroup] = false;
this.setState({ alerts: newAlerts });
}
render() {
const { alerts } = this.state;
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Alerts</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Alerts</h1>
<Row>
<Col xs={12} md={8}>
<Widget
title={<h5>Alert <span className="fw-semi-bold">Messages</span></h5>}
close collapse
>
<p>Alerts are available for any length of text, as well as an optional dismiss button.</p>
{alerts.map((alert, index) => <Alert
key={alert.id} isOpen={alert.visible[0]} toggle={() => this.closeAlert(index, 0)}
color={alert.type}
>
<span dangerouslySetInnerHTML={{ __html: alert.msg }} />
</Alert>)}
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Transparent <span className="fw-semi-bold">Alerts</span></h5>}
close collapse
>
<p>Transparent alerts are available by adding <code>.alert-transparent</code> class.</p>
{alerts.map((alert, index) => <Alert
className="alert-transparent"
key={alert.id} isOpen={alert.visible[1]} toggle={() => this.closeAlert(index, 1)}
color={alert.type}
>
<span dangerouslySetInnerHTML={{ __html: alert.msg }} />
</Alert>)}
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Rounded <span className="fw-semi-bold">Alerts</span></h5>}
close collapse
>
<p>Rounded alerts are available by adding <code>.alert-rounded</code> class.</p>
{alerts.map((alert, index) => <Alert
className={cx('alert-rounded', { 'alert-transparent': index % 2 !== 1 })}
key={alert.id} isOpen={alert.visible[2]} toggle={() => this.closeAlert(index, 2)}
color={alert.type}
>
<span dangerouslySetInnerHTML={{ __html: alert.msg }} />
</Alert>)}
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Additional <span className="fw-semi-bold">Content</span></h5>}
close collapse
>
<p>Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>
<Alert color="success">
<h4 className="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message. This example text is going
to run a bit longer so that you can see how spacing within an alert works with this kind
of content.
</p>
<hr />
<p className="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</Alert>
<Alert color="danger">
<h4 className="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message. This example text is going
to run a bit longer so that you can see how spacing within an alert works with this kind
of content.
</p>
</Alert>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Alerts;
{
"name": "Alerts",
"version": "0.0.0",
"private": true,
"main": "./Alerts.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Badge,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
const Badges = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Badge</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Badge</h1>
<Row>
<Col xs={12} md={8}>
<Widget
title={<h5>Badge <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>
Badges scale to match the size of the immediate parent element by
using relative font sizing and em units.
</p>
<h1>Example heading <Badge color="primary">Primary</Badge></h1>
<h2>Example heading <Badge color="info">Info</Badge></h2>
<h3>Example heading <Badge color="warning">Warning</Badge></h3>
<h4>Example heading <Badge color="success">Success</Badge></h4>
<h5>Example heading <Badge color="danger">Danger</Badge></h5>
<h6>Example heading <Badge color="secondary">Secondary</Badge></h6>
<p>Badges can be used as part of links or buttons to provide a counter.</p>
<Button color="primary">Notifications <Badge color="danger">4</Badge></Button>
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Pill <span className="fw-semi-bold">Badges</span></h5>}
close collapse
>
<p>
Use the <code>pill</code> property to make badges more rounded
(with a larger border-radius and additional horizontal padding).
</p>
<Badge className="mr-xs" color="primary" pill>Primary</Badge>
<Badge className="mr-xs" color="info" pill>Info</Badge>
<Badge className="mr-xs" color="warning" pill>Warning</Badge>
<Badge className="mr-xs" color="success" pill>Success</Badge>
<Badge className="mr-xs" color="danger" pill>Danger</Badge>
<Badge className="mr-xs" color="secondary" pill>Secondary</Badge>
<Badge className="mr-xs" color="light" pill>Light</Badge>
<Badge className="mr-xs" color="dark" pill>Dark</Badge>
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Pill <span className="fw-semi-bold">Badges</span></h5>}
close collapse
>
<p>
Using the contextual <code>href=&quot;&#35;&quot;</code> classes on
an <code>&lt;Badge&gt;</code> element quickly provide actionable badges with hover and focus states.
</p>
<Badge className="mr-xs" href="#" color="primary">Primary</Badge>
<Badge className="mr-xs" href="#" color="info">Info</Badge>
<Badge className="mr-xs" href="#" color="warning">Warning</Badge>
<Badge className="mr-xs" href="#" color="success">Success</Badge>
<Badge className="mr-xs" href="#" color="danger">Danger</Badge>
<Badge className="mr-xs" href="#" color="secondary">Secondary</Badge>
<Badge className="mr-xs" href="#" color="light">Light</Badge>
<Badge className="mr-xs" href="#" color="dark">Dark</Badge>
</Widget>
</Col>
</Row>
</div>
);
export default Badges;
{
"name": "Badge",
"version": "0.0.0",
"private": true,
"main": "./Badge.js"
}
......@@ -11,7 +11,7 @@ import {
DropdownItem,
} from 'reactstrap';
import Widget from '../../../components/Widget';
import Widget from '../../../../components/Widget';
class Buttons extends React.Component {
constructor(props) {
......
{
"name": "UIButtons",
"version": "0.0.0",
"private": true,
"main": "./Buttons.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Badge,
Card,
CardBody,
CardTitle,
CardText,
CardImg,
} from 'reactstrap';
import lifestyleImg from '../../../../images/cards/lifestyle.jpg';
import isometricImg from '../../../../images/cards/isometric.jpg';
import mountainsImg from '../../../../images/cards/mountains.jpeg';
import reactnativeImg from '../../../../images/cards/rns.png';
const Cards = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Card</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Cards - <span className="fw-semi-bold">Examples</span></h1>
<p>
A card is a flexible and extensible content container. It includes options for headers and footers,
a wide variety of content, contextual background colors, and powerful display options. If you’re
familiar with Bootstrap 3, cards replace its old panels, wells, and thumbnails. Similar functionality
to those components is available as modifier classes for cards.
</p>
<Row>
<Col>
<Card
className="background-cover border-0 mb-xlg"
style={{ backgroundImage: `url(${lifestyleImg})` }}
>
<CardBody className="text-white">
<span>13 Mar</span>
<h3 className="mt-lg">Lifestyle brand</h3>
<p className="w-75">A lifestyle brand is a company that markets its products or services to embody the
interests, attitudes, and opinions of a group or a culture. Lifestyle brands
seek to inspire, guide, and motivate people, with the goal of their products
contributing to the definition of the consumer&apos;s way of life.</p>
<Button className="btn-rounded-f mt-lg" color="danger">Full Article</Button>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12} sm={6} md={4}>
<Card className="border-0 mb-xlg">
<CardImg top width="100%" src={isometricImg} alt="Card image cap" />
<CardBody>
<CardTitle>Isometric design</CardTitle>
<CardText>
Isometric projection is a method for visually representing three-dimensional in two
dimensions in technical and engineering drawings.
</CardText>
<div className="w-100 text-center">
<Button className="btn-rounded-f" color="primary">Full Article</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xs={12} sm={6} md={4}>
<Card className="mb-xlg border-0">
<CardBody>
<button className="btn-link fw-semi-bold text-success">Avg Rating</button>
<button className="btn-link fw-semi-bold text-muted ml-sm">All Time</button>
<hr />
<div className="d-flex justify-content-between mb-lg">
<div className="text-warning">
<i className="fa fa-star mr-xs" />
<i className="fa fa-star mr-xs" />
<i className="fa fa-star mr-xs" />
<i className="fa fa-star mr-xs" />
<i className="fa fa-star" />
</div>
<span className="text-muted"><small>342 REVIEWS</small></span>
</div>
<div className="mb-lg">
<h3 className="text-success mb-0">69%</h3>
of customers recomend this product
</div>
<Button className="btn-rounded-f" color="success">Write a Review</Button>
</CardBody>
</Card>
<Card className="mb-xlg border-0" style={{ position: 'relative' }}>
<CardImg top width="100%" src={mountainsImg} alt="Card image cap" />
<Badge className="mt-lg fw-thin rounded-0" color="success" style={{ position: 'absolute' }}>New</Badge>
<CardBody>
<CardTitle>Weekly Inspiration</CardTitle>
<hr />
<CardText>
There are at least 109 mountains on Earts with elevations greeter than 7,200 meters
</CardText>
<Button className="border-0" color="default">Read More</Button>
</CardBody>
</Card>
</Col>
<Col xs={12} sm={6} md={4}>
<Card className="border-0">
<CardImg top width="100%" src={reactnativeImg} alt="Card image cap" />
<CardBody>
<small>Technology</small><br />
<CardTitle className="mb mt-xs">
React Native Starter
</CardTitle>
<hr />
<div className="w-100 d-flex justify-content-between align-items-center">
<span className="text-muted fw-semi-bold">from $49.95</span>
<Button color="info">Read more</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
export default Cards;
{
"name": "Card",
"version": "0.0.0",
"private": true,
"main": "./Card.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
UncontrolledCarousel,
} from 'reactstrap';
import firstSlide from '../../../../images/slides/1.jpg';
import secondSlide from '../../../../images/slides/2.jpg';
import thirdSlide from '../../../../images/slides/3.jpg';
const carouselItems = [
{ src: firstSlide, caption: '' },
{ src: secondSlide, caption: '' },
{ src: thirdSlide, caption: '' },
];
const Carousel = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Carousel</BreadcrumbItem>
</Breadcrumb>
<p>
The carousel is a slideshow for cycling through a series of content, built with
CSS 3D transforms and a bit of JavaScript. It works with a series of images, text,
or custom markup. It also includes support for previous/next controls and indicators.
</p>
<Row>
<Col>
<UncontrolledCarousel captionTex={null} items={carouselItems} />
</Col>
</Row>
</div>
);
export default Carousel;
{
"name": "Carousel",
"version": "0.0.0",
"private": true,
"main": "./Carousel.js"
}
{
"name": "UIIcons",
"version": "0.0.0",
"private": true,
"main": "./Icons.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Jumbotron,
Container,
} from 'reactstrap';
const Jumb = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Jumbotron</BreadcrumbItem>
</Breadcrumb>
<Jumbotron fluid>
<Container fluid>
<h1 className="display-3">Fluid jumbotron</h1>
<p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</Container>
</Jumbotron>
<Row>
<Col xs={12} md={8}>
<Jumbotron>
<h1 className="display-3">Hello, world!</h1>
<p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.</p>
<hr className="my-2" />
<p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
<p className="lead">
<Button color="primary">Learn More</Button>
</p>
</Jumbotron>
</Col>
</Row>
</div>
);
export default Jumb;
{
"name": "Jumbotron",
"version": "0.0.0",
"private": true,
"main": "./Jumbotron.js"
}
import React from 'react';
import {
Row, Col,
} from 'reactstrap';
import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
import SortableTree from 'react-sortable-tree';
import Widget from '../../../../components/Widget';
import './ListGroups.scss';
const SortableItem = SortableElement(({ value }) => <li className="list-group-item">
<i className="fa fa-sort" />
<button className="close flex-last ml-auto" data-dismiss="alert">&times;</button>
&nbsp;&nbsp;&nbsp; {value.id} &nbsp;&nbsp;&nbsp;
{value.text}
</li>);
const SortableList = SortableContainer(({ items }) => (
<ul className="list-group list-group-sortable mt-xs">
{items.map((value, index) => (
<SortableItem key={`item-${index.toString()}`} index={index} value={value} />
))}
</ul>
));
const NestableItem = SortableElement(({ value }) => {
if (value.children) {
return (
<li className="dd-item">
<div className="dd-handle" data-id={value.id}> {value.text} </div>
<ol className="dd-list">
{value.children.map((child, index) => (
<NestableItem key={`nest-${index.toString()}`} index={index} value={child} />
))}
</ol>
</li>);
}
return (
<li className="dd-item">
<div className="dd-handle" data-id={value.id}> {value.text} </div>
</li>
);
});
class ListGroups extends React.Component {
constructor() {
super();
this.state = {
nestableFirstItems: [{ id: 1, title: 'Item 1' }, {
id: 2,
expanded: true,
title: 'Item 2',
children: [{ id: 3, title: 'Item 3' }, { id: 4, title: 'Item 4' }, {
id: 5,
title: 'Item 5',
expanded: true,
children: [{ id: 6, title: 'Item 6' }, {
id: 7, title: 'Item 7',
}, {
id: 8, title: 'Item 8',
}],
}, { id: 9, title: 'Item 9' }],
}],
nestableSecondItems: [{ id: 13, title: 'Item 13' }, { id: 14, title: 'Item 14' }, {
id: 15,
expanded: true,
title: 'Item 15',
children: [{ id: 16, title: 'Item 16' }, { id: 17, title: 'Item 17' }, {
id: 18, title: 'Item 18',
}],
}],
sortableList: [{
id: '03', text: ' Barnard\'s Star',
}, {
id: '01', text: 'The Sun',
}, {
id: '04', text: 'Wolf 359',
}, {
id: '02', text: 'Proxima Centauri',
}, {
id: '05', text: 'Lalande 21185',
}],
};
}
onSortEnd = ({ oldIndex, newIndex }) => {
this.setState({
sortableList: arrayMove(this.state.sortableList, oldIndex, newIndex),
});
};
render() {
return (
<div>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">UI List Groups</li>
</ol>
<h1 className="page-title">Lists - <span className="fw-semi-bold">Sortable Groups</span>
</h1>
<Widget
title={<h4> Grouped <span className="fw-semi-bold">Lists</span></h4>}
close refresh settings
>
<h3>Closest <span className="fw-semi-bold">Stars</span></h3>
<p>
Try to play around with this list. Are you ready to pass an exam on astronomy?
</p>
<SortableList items={this.state.sortableList} onSortEnd={this.onSortEnd} />
</Widget>
<Widget
title={<h3>Nestable <span className="fw-semi-bold">List</span></h3>}
close refresh settings
>
<p className="fs-mini">
There is a scientific theory that you can arrange this list in such way that there will
be no more saddness
in the whole world. Can you? Touch devices supported
</p>
<Row className="nestable">
<Col md="6" xs="12" className="mb-xs">
<SortableTree
treeData={this.state.nestableFirstItems}
onChange={nestableFirstItems => this.setState({ nestableFirstItems })}
/>
</Col>
<Col md="6">
<SortableTree
treeData={this.state.nestableSecondItems}
onChange={nestableSecondItems => this.setState({ nestableSecondItems })}
/>
</Col>
</Row>
</Widget>
</div>
);
}
}
export default ListGroups;
@import '../../../styles/app';
@import '../../../../styles/app';
.list-group-sortable {
> .list-group-item {
......
{
"name": "UIListGroups",
"version": "0.0.0",
"private": true,
"main": "./ListGroups.js"
}
......@@ -12,7 +12,7 @@ import {
Container,
} from 'reactstrap';
import Widget from '../../../components/Widget';
import Widget from '../../../../components/Widget';
class ModalExample extends React.Component {
state = {
......
{
"name": "Modal",
"version": "0.0.0",
"private": true,
"main": "./Modal.js"
}
import React, { Component } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Nav,
NavItem,
NavLink,
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
class NavExamples extends Component {
state = {
isDropdownOpened: false,
};
toggleDropdown = () => {
this.setState(prevState => ({
isDropdownOpened: !prevState.isDropdownOpened,
}));
}
render() {
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Nav</BreadcrumbItem>
</Breadcrumb>
<Row>
<Col xs={12} md={6}>
<Widget
title={<h5>Base <span className="fw-semi-bold">Nav</span></h5>}
close collapse
>
<p>
Navigation available in Bootstrap share general markup and styles,
from the base .nav class to the active and disabled states. Swap
modifier classes to switch between each style.
</p>
<div className="bg-light p-3">
<Nav>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
<pre className="bg-light border-0 w-100 h-100">
<code className="text-danger">{'<Nav>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Another Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink disabled href="#">\n'}</code>
<code>{' Disabled Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-danger">{'</Nav>'}</code>
</pre>
</div>
<h5 className="mt">With dropdown</h5>
<Nav className="bg-light p-2">
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<Dropdown isOpen={this.state.isDropdownOpened} toggle={this.toggleDropdown}>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Tabs & Pills</h5>}
close collapse
>
<p>
Takes the basic <code>&lt;Nav&gt;</code> from above and adds the <code>tabs</code> property to generate a
tabbed interface. Use them to create tabbable regions with our tab
JavaScript plugin.
</p>
<div className="bg-light p-3">
<Nav tabs>
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
<pre className="bg-light border-0 w-100 h-100">
<code className="text-danger">{'<Nav tabs>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Another Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink disabled href="#">\n'}</code>
<code>{' Disabled Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-danger">{'</Nav>'}</code>
</pre>
</div>
<p className="mt">Do the same thing with the <code>pills</code> property.</p>
<div className="bg-light p-3">
<Nav pills>
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default NavExamples;
{
"name": "Nav",
"version": "0.0.0",
"private": true,
"main": "./Nav.js"
}
import React, { Component } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Navbar,
NavbarBrand,
NavbarToggler,
Collapse,
Nav,
NavItem,
NavLink,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
class NavbarExamples extends Component {
state = {
navs: [false, false, false, false],
}
toggle(id) {
const newState = Array(4).fill(false);
if (!this.state.navs[id]) {
newState[id] = true;
}
this.setState({ navs: newState });
}
render() {
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Navbar</BreadcrumbItem>
</Breadcrumb>
<Row>
<Col xs={12} md={9}>
<Widget
title={<h5>Navbar <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>Here’s what you need to know before getting started with the navbar:</p>
<ui>
<li>Navbars require a wrapping <code>&lt;Navbar&gt;</code> with <code>expand=&quot;*&quot;</code> for
responsive collapsing and color scheme classes.</li>
<li>Navbars and their contents are fluid by default. Use optional containers
to limit their horizontal width.</li>
<li>Use our spacing and flex utility classes for controlling spacing and alignment within navbars.</li>
<li>Navbars are responsive by default, but you can easily modify them to change that. Responsive
behavior depends on our Collapse JavaScript plugin.</li>
<li>Navbars are hidden by default when printing. Force them to be printed by adding <code>.d-print</code>
to the <code>.navbar</code>. See the display utility class.</li>
</ui>
<Navbar className="px-2 mt-lg" color="light" light expand="md">
<NavbarBrand href="/">Navbar</NavbarBrand>
<NavbarToggler className="ml-auto" onClick={() => this.toggle(0)} />
<Collapse isOpen={this.state.navs[0]} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>Features</NavLink>
</NavItem>
<NavItem>
<NavLink>Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</Widget>
</Col>
<Col xs={12} md={9}>
<Widget
title={<h5>Navbar <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>Theming the navbar has never been easier thanks to the combination of
theming classes and background-color utilities. Choose from <code>color=&quot;light&quot;</code>
for use with light background colors, or <code>color=&quot;dark&quot;</code> for dark background
colors. Then, customize with <code>.bg-*</code> utilities.</p>
<Navbar className="px-2 mt-lg" color="dark" dark expand="md">
<NavbarBrand href="/">Navbar</NavbarBrand>
<NavbarToggler className="ml-auto" onClick={() => this.toggle(1)} />
<Collapse isOpen={this.state.navs[1]} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>Features</NavLink>
</NavItem>
<NavItem>
<NavLink>Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<Navbar className="px-2 mt-lg" color="primary" dark expand="md">
<NavbarBrand href="/">Navbar</NavbarBrand>
<NavbarToggler className="ml-auto" onClick={() => this.toggle(2)} />
<Collapse isOpen={this.state.navs[2]} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>Features</NavLink>
</NavItem>
<NavItem>
<NavLink>Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<Navbar className="px-2 mt-lg" color="light" light expand="md">
<NavbarBrand href="/">Navbar</NavbarBrand>
<NavbarToggler className="ml-auto" onClick={() => this.toggle(3)} />
<Collapse isOpen={this.state.navs[3]} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>Features</NavLink>
</NavItem>
<NavItem>
<NavLink>Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default NavbarExamples;
{
"name": "Navbar",
"version": "0.0.0",
"private": true,
"main": "./Navbar.js"
}
import React from 'react';
import {
Row, Col, Button,
} from 'reactstrap';
/* eslint-disable */
import 'imports-loader?$=jquery,this=>window!messenger/build/js/messenger';
/* eslint-enable */
import Widget from '../../../../components/Widget';
import s from './Notifications.module.scss';
// todo @franckeeva what about server side rendering? this will fail unless launched as lazy route
const Messenger = window.Messenger;
/* eslint-disable */
function initializationMessengerCode() {
(function () {
let $,
FlatMessage,
spinner_template,
__hasProp = {}.hasOwnProperty,
__extends = function (child, parent) {
for (const key in parent) {
if (__hasProp.call(parent, key)) child[key] = parent[key];
}
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
return child;
};
$ = jQuery;
spinner_template = '<div class="messenger-spinner">\n <span class="messenger-spinner-side messenger-spinner-side-left">\n <span class="messenger-spinner-fill"></span>\n </span>\n <span class="messenger-spinner-side messenger-spinner-side-right">\n <span class="messenger-spinner-fill"></span>\n </span>\n</div>';
FlatMessage = (function (_super) {
__extends(FlatMessage, _super);
function FlatMessage() {
return FlatMessage.__super__.constructor.apply(this, arguments);
}
FlatMessage.prototype.template = function (opts) {
let $message;
$message = FlatMessage.__super__.template.apply(this, arguments);
$message.append($(spinner_template));
return $message;
};
return FlatMessage;
}(Messenger.Message));
Messenger.themes.air = {
Message: FlatMessage,
};
}).call(window);
}
/* eslint-enable */
class Notifications extends React.Component {
constructor() {
super();
this.addSuccessNotification = this.addSuccessNotification.bind(this);
this.addInfoNotification = this.addInfoNotification.bind(this);
this.addErrorNotification = this.addErrorNotification.bind(this);
this.toggleLocation = this.toggleLocation.bind(this);
this.state = {
locationClasses: 'messenger-fixed messenger-on-bottom messenger-on-right',
};
}
componentDidMount() {
initializationMessengerCode();
Messenger.options = {
extraClasses: this.state.locationClasses,
theme: 'air',
};
Messenger().post('Thanks for checking out Messenger!');
}
addSuccessNotification() {
Messenger().post({
extraClasses: this.state.locationClasses,
message: 'Showing success message was successful!',
type: 'success',
showCloseButton: true,
});
return false;
}
addInfoNotification() {
const msg = Messenger().post({
extraClasses: this.state.locationClasses,
message: 'Launching thermonuclear war...',
actions: {
cancel: {
label: 'cancel launch',
action: () => msg.update({
message: 'Thermonuclear war averted', type: 'success', actions: false,
}),
},
},
});
return false;
}
addErrorNotification() {
let i = 0;
Messenger().run({
errorMessage: 'Error destroying alien planet',
successMessage: 'Alien planet destroyed!',
extraClasses: this.state.locationClasses,
action(opts) {
/* eslint-disable */
if (++i < 3) {
return opts.error({
status: 500,
readyState: 0,
responseText: 0,
});
}
/* eslint-enable */
return opts.success();
},
});
}
toggleLocation(vertical = 'top', horizontal = '') {
let className = `messenger-fixed messenger-on-${vertical}`;
className += (horizontal === '') ? '' : ` messenger-on-${horizontal}`;
this.setState({
locationClasses: className,
});
Messenger.options = {
extraClasses: className,
theme: 'air',
};
Messenger();
}
render() {
return (
<div className={s.root}>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">UI Notifications</li>
</ol>
<h1 className="page-title">Messages - <span className="fw-semi-bold">Notifications</span>
</h1>
<Widget title={<h6> Messenger </h6>} close collapse settings>
<Row>
<Col lg="4" xs="12">
<h5 className="m-t-1">Layout options</h5>
<p>There are few position options available for notifications. You can click any of
them
to change notifications position:</p>
<div className="location-selector">
{ /* eslint-disable */}
<div
className="bit top left" onClick={() => {
this.toggleLocation('top', 'left');
}}
/>
<div
className="bit top right" onClick={() => {
this.toggleLocation('top', 'right');
}}
/>
<div
className="bit top" onClick={() => {
this.toggleLocation('top', '');
}}
/>
<div
className="bit bottom left" onClick={() => {
this.toggleLocation('bottom', 'left');
}}
/>
<div
className="bit bottom right" onClick={() => {
this.toggleLocation('bottom', 'right');
}}
/>
<div
className="bit bottom" onClick={() => {
this.toggleLocation('bottom', '');
}}
/>
{ /* eslint-enable */}
</div>
</Col>
<Col lg="4" xs="12">
<h5 className="m-t-1">Notification Types</h5>
<p>Different types of notifications for lost of use cases. Custom classes are also
supported.</p>
<p><Button color="info" id="show-info-message" onClick={this.addInfoNotification}>Info
Message</Button></p>
<p><Button color="danger" id="show-error-message" onClick={this.addErrorNotification}>Error
+ Retry Message</Button></p>
<p><Button
color="success" id="show-success-message" onClick={this.addSuccessNotification}
>Success
Message</Button></p>
</Col>
<Col lg="4" xs="12">
<h5 className="m-t-1">Dead Simple Usage</h5>
<p>Just few lines of code to instantiate a notifications object. Does not require
passing any options:</p>
<pre><code>{'Messenger().post("Thanks for checking out Messenger!");'}</code></pre>
<p>More complex example:</p>
<pre>
<code>{'\nMessenger().post({\n message: \'There was an explosion while processing your request.\',\n type: \'error\',\n showCloseButton: true\n});\n\n'}
</code>
</pre>
</Col>
</Row>
</Widget>
</div>
);
}
}
export default Notifications;
@import '../../../../styles/app';
.root {
:global {
.location-selector {
width: 100%;
height: 220px;
border: 1px dashed #bbb;
background-color: $white;
position: relative;
}
.location-selector .bit {
@include transition(background-color 0.15s ease-in-out);
background-color: $gray-300;
cursor: pointer;
position: absolute;
}
.location-selector .bit:hover {
background-color: $gray-400;
}
.location-selector .bit.top,
.location-selector .bit.bottom {
height: 25%;
width: 40%;
margin: 0 30%;
}
.location-selector .bit.top {
top: 0;
}
.location-selector .bit.bottom {
bottom: 0;
}
.location-selector .bit.right,
.location-selector .bit.left {
height: 20%;
width: 20%;
margin-left: 0;
margin-right: 0;
}
.location-selector .bit.right {
right: 0;
}
.location-selector .bit.left {
left: 0;
}
}
}
{
"name": "UINotifications",
"version": "0.0.0",
"private": true,
"main": "./Notifications.js"
}
import React, { Component } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Popover,
PopoverHeader,
PopoverBody,
Tooltip,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
class PopoverExamples extends Component {
state = {
tooltips: [false, false, false, false, false, false],
popovers: [false, false, false, false, false, false],
tooltipOpen: false,
}
toggle(id, field) {
const newState = [...this.state[field]];
newState.fill(false);
if (!this.state[field][id]) {
newState[id] = true;
}
this.setState({
[field]: newState,
});
}
render() {
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Badge</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Badge</h1>
<Row>
<Col xs={12} md={6}>
<Widget
className="mb-xlg"
title={<h5>Popover <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<Button
id="p-1" className="mr-xs" size="lg" color="danger"
onClick={() => this.toggle(0, 'popovers')}
>Click to toggle popover</Button>
<Button
id="p-2" color="danger" disabled
onClick={() => this.toggle(1, 'popovers')}
>Disabled button</Button>
</Widget>
<Widget
title={<h5>Popover <span className="fw-semi-bold">Directions</span></h5>}
close collapse
>
<Button
id="p-3" className="mr-xs mb-xs" color="info"
onClick={() => this.toggle(2, 'popovers')}
>Popover on top</Button>
<Button
id="p-4" className="mr-xs mb-xs" color="warning"
onClick={() => this.toggle(3, 'popovers')}
>Popover on right</Button>
<Button
id="p-5" className="mr-xs mb-xs" color="inverse"
onClick={() => this.toggle(4, 'popovers')}
>Popover on bottom</Button>
<Button
id="p-6" className="mr-xs mb-xs" color="default"
onClick={() => this.toggle(5, 'popovers')}
>Popover on left</Button>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
className="mb-xlg"
title={<h5>Tooltip <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<Button id="t-1" className="mr-sm" size="lg" color="success">Tooltip</Button>
<Button id="t-2" color="success" disabled>Disabled button</Button>
</Widget>
<Widget
title={<h5>Tooltip <span className="fw-semi-bold">Directions</span></h5>}
close collapse
>
<Button id="t-3" className="mr-xs mb-xs" color="info">Tooltip on top</Button>
<Button id="t-4" className="mr-xs mb-xs" color="warning">Tooltip on right</Button>
<Button id="t-5" className="mr-xs mb-xs" color="inverse">Tooltip on bottom</Button>
<Button id="t-6" className="mr-xs mb-xs" color="default">Tooltip on left</Button>
</Widget>
</Col>
</Row>
{/* Popovers & Tooltips */}
<Popover placement="top" isOpen={this.state.popovers[0]} target="p-1" toggle={() => this.toggle(0, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="top" isOpen={this.state.popovers[1]} target="p-2" toggle={() => this.toggle(1, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="top" isOpen={this.state.popovers[2]} target="p-3" toggle={() => this.toggle(2, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="right" isOpen={this.state.popovers[3]} target="p-4" toggle={() => this.toggle(3, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="bottom" isOpen={this.state.popovers[4]} target="p-5" toggle={() => this.toggle(4, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="left" isOpen={this.state.popovers[5]} target="p-6" toggle={() => this.toggle(5, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Tooltip placement="top" isOpen={this.state.tooltips[0]} toggle={() => this.toggle(0, 'tooltips')} target="t-1">
Hello world!
</Tooltip>
<Tooltip placement="top" isOpen={this.state.tooltips[1]} toggle={() => this.toggle(1, 'tooltips')} target="t-2">
Hello world!
</Tooltip>
<Tooltip placement="top" isOpen={this.state.tooltips[2]} toggle={() => this.toggle(2, 'tooltips')} target="t-3">
Top
</Tooltip>
<Tooltip placement="right" isOpen={this.state.tooltips[3]} toggle={() => this.toggle(3, 'tooltips')} target="t-4">
Right
</Tooltip>
<Tooltip placement="bottom" isOpen={this.state.tooltips[4]} toggle={() => this.toggle(4, 'tooltips')} target="t-5">
Bottom
</Tooltip>
<Tooltip placement="left" isOpen={this.state.tooltips[5]} toggle={() => this.toggle(5, 'tooltips')} target="t-6">
Left
</Tooltip>
</div>
);
}
}
export default PopoverExamples;
{
"name": "Popovers",
"version": "0.0.0",
"private": true,
"main": "./Popovers.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Progress,
} from 'reactstrap';
import Widget from '../../../../components/Widget';
const ProgressExamples = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Progress</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Progress</h1>
<Row>
<Col xs={12} md={6}>
<Widget
title={<h5>Progress <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>
Badges scale to match the size of the immediate parent element by
using relative font sizing and em units.
</p>
<Progress className="mb-sm" value="25" />
<Progress className="mb-sm" value="50" />
<Progress className="mb-sm" value="75" />
<Progress value="100" />
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Backgrounds</h5>}
close collaple
>
<p>
Use background utility classes to change the appearance of
individual progress bars.
</p>
<Progress className="mb-sm" value="25" color="info" />
<Progress className="mb-sm" value="50" color="warning" />
<Progress className="mb-sm" value="75" color="danger" />
<Progress value="100" color="success" />
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Labels</h5>}
close collapse
>
<p>
Add labels to your progress bars by placing text within the <code>&lt;Progress&gt;</code>
</p>
<Progress className="mb-sm" value="25">25%</Progress>
<Progress className="mb-sm" value="100" color="danger">Something was wrong!</Progress>
<Progress value="100" color="success">Completed!</Progress>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Size</h5>}
close collapse
>
<p>
We only set a height value on the <code>&lt;Progress&gt;</code>, so if you change that value the inner
bar will automatically resize accordingly. Also <code>.progress-sm</code> is available.
</p>
<Progress className="progress-sm mb-sm" value="25" color="dark">25%</Progress>
<Progress className="mb-sm" value="50" color="gray">50%</Progress>
<Progress value="75" color="secondary" style={{ height: '30px' }}>75%</Progress>
</Widget>
</Col>
<Col xs={12}>
<Widget
title={<h5><span className="fw-semi-bold">Striped</span> Progress</h5>}
close collapse
>
<Row>
<Col xs={12} md={6}>
<p>
Add <code>striped</code> property to any <code>&lt;Progress&gt;</code> to
apply a stripe via CSS gradient over the progress bar’s background color.
</p>
<Progress striped className="mb-sm" value="10" />
<Progress striped className="mb-sm" value="25" color="success" />
<Progress striped className="mb-sm" value="50" color="info" />
<Progress striped className="mb-sm" value="75" color="warning" />
<Progress striped value="100" color="danger" />
</Col>
<Col xs={12} md={6}>
<p>
The striped gradient can also be animated. Add <code>animated</code> property
to <code>&lt;Progress&gt;</code> to animate the stripes right to left via CSS3 animations.
</p>
<Progress animated striped className="mb-sm" value="10" color="danger" />
<Progress animated striped className="mb-sm" value="25" color="warning" />
<Progress animated striped className="mb-sm" value="50" color="info" />
<Progress animated striped className="mb-sm" value="75" color="success" />
<Progress animated striped value="100" />
</Col>
</Row>
</Widget>
</Col>
</Row>
</div>
);
export default ProgressExamples;
{
"name": "Progress",
"version": "0.0.0",
"private": true,
"main": "./Progress.js"
}
{
"name": "UITabsAccordion",
"version": "0.0.0",
"private": true,
"main": "./TabsAccordion.js"
}
......@@ -5,25 +5,25 @@ import {
Progress,
} from 'reactstrap';
import Widget from '../../components/Widget';
import Widget from '../../../components/Widget';
import LiveTile from './components/live-tile/LiveTile';
import ChangesChart from './components/changes-chart/ChangesChart';
import RealtimeTraffic from './components/realtime-traffic/RealtimeTraffic';
import YearsMap from './components/years-map/YearsMap';
import FlotCharts from './components/flot-charts/FlotCharts';
import NasdaqSparkline from './components/nasdaq-sparkline-widget/nasdaqSparkline';
import Skycon from '../../components/Skycon/Skycon';
import Skycon from '../../../components/Skycon/Skycon';
import { Input, InputGroup, InputGroupAddon, Button } from 'reactstrap';
import './Widgets.scss';
import peopleA1 from '../../images/people/a1.jpg';
import peopleA2 from '../../images/people/a2.jpg';
import peopleA4 from '../../images/people/a4.jpg';
import peopleA6 from '../../images/people/a6.jpg';
import peopleA3 from '../../images/people/a3.jpg';
import avatar from '../../images/avatar.png';
import img18 from '../../images/pictures/18.jpg';
import img17 from '../../images/pictures/17.jpg';
import peopleA1 from '../../../images/people/a1.jpg';
import peopleA2 from '../../../images/people/a2.jpg';
import peopleA4 from '../../../images/people/a4.jpg';
import peopleA6 from '../../../images/people/a6.jpg';
import peopleA3 from '../../../images/people/a3.jpg';
import avatar from '../../../images/avatar.png';
import img18 from '../../../images/pictures/18.jpg';
import img17 from '../../../images/pictures/17.jpg';
class Widgets extends React.Component {
componentDidMount() {
......
@import '../../../styles/app';
/* Post User */
.post-user {
position: relative;
@include clearfix();
img {
border: 3px solid white;
}
}
/* Tags */
.tags {
padding-left: 0;
list-style: none;
@include clearfix();
> li {
float: left;
> a {
padding: 2px 8px;
font-size: $font-size-mini;
border-radius: 6px;
border: 1px solid white;
color: inherit;
text-decoration: none;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.fa {
font-size: 8px;
margin-right: 3px;
opacity: 0.8;
}
}
}
> li + li > a {
margin-left: 6px;
}
}
.widget-top-overflow > img + .tags {
position: absolute;
bottom: 0;
right: 0;
margin: 20px;
}
/* Weather */
.widget-image .forecast {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
/* Chat List Group */
.widget-chat-list-group {
padding-top: $spacer/2;
.list-group-item {
margin-left: $widget-padding-horizontal;
margin-right: $widget-padding-horizontal;
padding: 0;
border: 0;
display: flex;
div {
width: 100%;
}
&:nth-child(even) {
margin-left: 75px;
}
&:hover {
background: none;
}
& + .list-group-item {
margin-top: 20px;
}
.thumb,
.thumb-sm {
float: left;
margin-right: 15px;
}
.time {
font-size: $font-size-sm;
color: $text-muted;
}
.sender {
margin-top: 5px;
margin-bottom: 5px;
font-size: $font-size-mini;
font-weight: $font-weight-normal;
color: theme-color('primary');
}
.body {
font-size: $font-size-mini;
margin-bottom: 0;
}
&.on-right {
div {
padding-right: 1rem;
}
.thumb,
.thumb-sm {
order: 1;
margin-left: auto;
margin-right: 0;
}
.time {
float: left;
}
.sender {
text-align: right;
}
}
}
}
import React from 'react';
import Rickshaw from 'rickshaw';
import $ from 'jquery';
import {
Row, Col,
} from 'reactstrap';
import Sparklines from '../../../../../components/Sparklines';
import s from './ChangesChart.module.scss';
class ChangesChart extends React.Component {
constructor(prop) {
super(prop);
this.state = {
rickshawGraph: null,
sparklineData: [],
sparklineOptions: {},
};
this.onResizeRickshaw = this.onResizeRickshaw.bind(this);
this.initRickshaw = this.initRickshaw.bind(this);
this.initSparkline();
}
componentDidMount() {
this.initRickshaw();
window.addEventListener('resize', this.onResizeRickshaw);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResizeRickshaw);
}
onResizeRickshaw() {
this.state.graph.configure({ height: 100 });
this.state.graph.render();
}
initRickshaw() {
const seriesData = [[], []];
const random = new Rickshaw.Fixtures.RandomData(32);
for (let i = 0; i < 32; i += 1) {
random.addData(seriesData);
}
// eslint-disable-next-line
this.state.graph = new Rickshaw.Graph({
element: this.rickshawChart,
height: '100',
renderer: 'multi',
series: [{
name: 'pop',
data: seriesData.shift().map(d => ({ x: d.x, y: d.y })),
color: '#7bd47a', // (#64bd63, 0.9)
renderer: 'bar',
gapSize: 2,
min: 'auto',
strokeWidth: 3,
}, {
name: 'humidity',
data: seriesData.shift()
.map(d => ({ x: d.x, y: ((d.y * (Math.random() * 0.5)) + 30.1) })),
renderer: 'line',
color: '#fff',
gapSize: 2,
min: 'auto',
strokeWidth: 3,
}],
});
const hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: this.state.graph,
xFormatter: x => new Date(x * 1000).toString(),
});
hoverDetail.show();
this.state.graph.render();
}
initSparkline() {
const data = [3, 6, 2, 4, 5, 8, 6, 8];
const dataMax = Math.max.apply(null, data);
const backgroundData = data.map(() => dataMax);
// eslint-disable-next-line
this.state.sparklineData = [backgroundData, data];
// eslint-disable-next-line
this.state.sparklineOptions = [
{
type: 'bar',
height: 26,
barColor: '#eee',
barWidth: 7,
barSpacing: 5,
chartRangeMin: Math.min.apply(null, data),
tooltipFormat: new $.SPFormatClass(''),
},
{
composite: true,
type: 'bar',
barColor: '#64bd63',
barWidth: 7,
barSpacing: 5,
},
];
}
render() {
return (
<div className={s.changesChart}>
<div className={`${s.chart} bg-success btlr btrr`}>
<p className={s.chartValue}><i className="fa fa-caret-up" /> 352.79</p>
<p className={s.chartValueChange}>+2.04 (1.69%)</p>
<div
style={{ overflow: 'hidden' }}
ref={(r) => {
this.rickshawChart = r;
}}
/>
{/* <div rickshaw-chart [series]="series" [height]="100" [renderer]="'multi'"
[configureProps]="{gapSize: 0.5, min: 'auto', strokeWidth: 3}"></div> */}
</div>
<h4 className={s.chartTitle}><span className="fw-normal">Salt Lake City</span>, Utah</h4>
<p className="deemphasize">Today 13:34</p>
<div className="mt">
<Row>
<Col xs={6}>
<p className="h4 m-0">18.7M</p>
<p className="deemphasize">Shares Traded</p>
</Col>
<Col xs={6} className="text-right">
<p className="h4 m-0">19.9B</p>
<p className="deemphasize">Market Cap</p>
</Col>
</Row>
</div>
<div className="mt">
<Row>
<Col xs={6}>
<p className="h3 m-0 text-success fw-semi-bold">+120.93</p>
<p className="deemphasize">Yearly Change</p>
</Col>
<Col xs={6} className="text-right">
<div
className="sparkline" ref={(r) => {
this.sparklineRef = r;
}}
/>
<Sparklines data={this.state.sparklineData} options={this.state.sparklineOptions} />
<p className="deemphasize">GOOG</p>
</Col>
</Row>
</div>
</div>
);
}
}
export default ChangesChart;
@import '../../../../../styles/app';
.changesChart {
.chart {
margin: -$widget-padding-vertical (-$widget-padding-horizontal) 0;
padding: $widget-padding-vertical 0 0;
}
.chartTitle {
margin: 20px 0 0;
}
.chartValue,
.chartValueChange {
padding: 0 $widget-padding-horizontal;
}
.chartValue {
margin-bottom: 0;
font-weight: $font-weight-bold;
font-size: 21px;
line-height: 1;
color: $white;
}
.chartValueChange {
color: rgba($white, 0.7);
font-size: $small-font-size;
margin-bottom: $spacer;
}
}
import React from 'react';
import {
Row,
Col,
Button,
Badge,
} from 'reactstrap';
import ReactFlot from 'react-flot';
import Widget from '../../../../../components/Widget';
import s from './FlotCharts.module.scss';
class FlotCharts extends React.Component {
static generateRandomData(labels) {
function random() {
return (Math.floor(Math.random() * 30)) + 10;
}
const data = [];
let maxValueIndex = 5;
for (let i = 0; i < labels.length; i += 1) {
const randomSeries = [];
for (let j = 0; j < 25; j += 1) {
randomSeries.push([j, Math.floor(maxValueIndex * j) + random()]);
}
maxValueIndex -= 1;
data.push({
data: randomSeries,
showLabels: true,
label: labels[i].label,
labelPlacement: 'below',
canvasRender: true,
cColor: 'red',
color: labels[i].color,
});
}
return data;
}
render() {
const flotOptions = {
series: {
lines: {
show: true,
lineWidth: 1,
fill: false,
fillColor: { colors: [{ opacity: 0.001 }, { opacity: 0.5 }] },
},
points: {
show: false,
fill: true,
},
shadowSize: 0,
},
legend: false,
grid: {
show: false,
margin: 0,
labelMargin: 0,
axisMargin: 0,
hoverable: true,
clickable: true,
tickColor: 'rgba(255,255,255,1)',
borderWidth: 0,
},
};
const generateData = this.constructor.generateRandomData;
return (<Row>
<Col lg={6} xs={12}>
<Widget
title={<Row>
<Col xs={4}>
<h6>
Total Sales
</h6>
<p className="value5">
January, 2018
</p>
</Col>
<Col xs={4}>
<h5>
<small>Best</small>
</h5>
<p className="value6 fs-sm">
March, 2018 + 1
</p>
</Col>
</Row>}
settings close
>
<div className="chart-stats">
<p className="text-muted fs-mini mt-xs">
<i className="fi flaticon-placeholder fa-5x pull-left mr-3" />
<span className="fw-semi-bold text-gray-dark">Jess:</span> Seems like statically it&apos;s getting impossible
to achieve any sort of
results in nearest future. The only thing we can hope for is pressing one of these two buttons:
</p>
<div className="btn-toolbar">
<Button color="success" size="xs">Accept</Button>
<Button color="default" size="xs">Reject</Button>
</div>
</div>
<div className={`${s.chart} bg-body-light`}>
<ReactFlot
id="product-chart-1"
data={
generateData([{
label: 'Visitors', color: '#777',
}, {
label: 'Charts', color: '#dd5826',
}])}
options={flotOptions}
height={'100%'}
/>
</div>
</Widget>
</Col>
<Col lg={6} xs={12}>
<Widget
className=" widget-chart-stats-simple" title={<Row>
<Col xs={12}>
<h6 className="mb-0">
<span className="fw-semi-bold">Budget</span>&nbsp;<Badge pill color="danger">2019</Badge>
</h6>
<span className="text-muted fs-mini">monthly report will be available in <button className="btn-link">6 hours</button></span>
</Col>
</Row>}
settings close
>
<div className="chart-stats">
<div className="row">
<div className="col-md-5">
<div className="clearfix m-t-1">
<h6 className="pull-left text-muted mb-xs">
Income
</h6>
<p className="pull-right h6 mb-xs">
<span className="fw-semi-bold">$14,595</span>
</p>
</div>
<div className="clearfix">
<h6 className="pull-left no-margin text-muted">
Recent
</h6>
<p className="pull-right">
<span className="fw-semi-bold">$7,647</span>
</p>
</div>
</div>
<div className="col-md-3 text-right m-t-1">
<h6 className="text-muted mb-xs">Inqueries</h6>
<p className="fw-semi-bold">73 at 14am</p>
</div>
<div className="col-md-4 text-right m-t-1">
<h6 className="text-muted mb-xs">Last Updated</h6>
<p className="fw-semi-bold">23.06.2013</p>
</div>
</div>
</div>
<div className={`${s.chart} bg-body-light`}>
<ReactFlot
id="product-chart-2"
data={
generateData([{
label: 'Controllers', color: '#777',
}, {
label: 'Scopes', color: '#f0b518',
}])}
options={flotOptions}
height={'100%'}
/>
</div>
</Widget>
</Col>
</Row>
);
}
}
export default FlotCharts;
import React from 'react';
import $ from 'jquery'
import PropTypes from 'prop-types';
/* eslint-disable */
import 'metrojs/release/MetroJs.Full/MetroJs';
/* eslint-enable */
import './LiveTile.scss';
class LiveTile extends React.Component {
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
};
static defaultProps = {
children: null,
};
constructor(props) {
super(props);
this.state = {
id: `live-tile-${Math.floor(Math.random() * 255)}`,
};
}
componentDidMount() {
const el = $(`#${this.state.id}`);
el.css('height', el.data('height'))
.liveTile();
}
render() {
const {
children,
...attr
} = this.props;
return (
<div {...attr} id={this.state.id} className="live-tile">
{children}
</div>
);
}
}
export default LiveTile;
@import '../../../../../styles/app';
/* Live Tiles */
.live-tile,
.list-tile,
.copy-tile,
.tile-strip .flip-list > li {
height: auto;
min-width: 100%;
margin: 0 !important;
color: inherit !important;
&.fade {
opacity: 1;
}
}
.live-tile p,
.list-tile p,
.copy-tile p {
padding: 0 !important;
}
.live-tile p,
.list-tile p,
.copy-tile p,
.live-tile .face,
.list-tile .face,
.copy-tile .face {
&.h1 {
font-size: $h1-font-size;
}
&.h2 {
font-size: $h2-font-size;
}
&.h3 {
font-size: $h3-font-size;
}
&.h4 {
font-size: $h4-font-size;
}
&.h5 {
font-size: $h5-font-size;
}
&.h6 {
font-size: $h6-font-size;
}
$font-sizes: $h1-font-size, $h2-font-size, $h3-font-size, $h4-font-size, $h5-font-size, $h6-font-size;
$i: 1;
@each $font-size in $font-sizes {
&.value#{$i} {
font-size: $font-size;
}
$i: $i + 1;
}
}
import React from 'react';
import $ from 'jquery';
import Sparklines from '../../../../../components/Sparklines';
class NasdaqSparkline extends React.Component {
render() {
const data = [[4, 6, 5, 7, 5]];
const options = {
type: 'line',
width: '99%',
height: '60',
lineColor: '#666',
fillColor: 'transparent',
spotRadius: 5,
spotColor: '#666',
valueSpots: { '0:': '#666' },
highlightSpotColor: '#fff',
highlightLineColor: '#666',
minSpotColor: '#666',
maxSpotColor: '#dd5826',
tooltipFormat: new $
.SPFormatClass('<span style="color: white">&#9679;</span> {{prefix}}{{y}}{{suffix}}'),
chartRangeMin: Math.min.apply(null, data) - 1,
};
return (
<Sparklines data={data} options={options} />
);
}
}
export default NasdaqSparkline;
import React from 'react';
import {
Progress,
} from 'reactstrap';
import Rickshaw from 'rickshaw';
import PropTypes from 'prop-types';
class RickshawGraph extends React.Component {
static propTypes = {
height: PropTypes.number,
};
static defaultProps = {
height: 100,
};
constructor(props) {
super(props);
this.state = {
graph: null,
};
this.initRickshaw = this.initRickshaw.bind(this);
class RealtimeTraffic extends React.Component {
state = { graph: null }
constructor(prop) {
super(prop);
this.onResizeRickshaw = this.onResizeRickshaw.bind(this);
}
componentDidMount() {
this.initRickshaw();
this.initChart();
window.addEventListener('resize', this.onResizeRickshaw);
}
......@@ -32,28 +22,28 @@ class RickshawGraph extends React.Component {
}
onResizeRickshaw() {
this.state.graph.configure({ height: this.props.height });
this.state.graph.render();
this.graph.configure({ height: 130 });
this.graph.render();
}
initRickshaw() {
initChart() {
const seriesData = [[], []];
const random = new Rickshaw.Fixtures.RandomData(30);
for (let i = 0; i < 30; i += 1) {
random.addData(seriesData);
}
// eslint-disable-next-line
this.state.graph = new Rickshaw.Graph({
this.graph = new Rickshaw.Graph({
element: this.rickshawChart,
height: this.props.height,
height: 130,
realtime: true,
series: [
{
color: '#ffdddd',
color: '#343434', // 'gray-dark'
data: seriesData[0],
name: 'Uploads',
}, {
color: '#f55d5d',
color: '#666', // gray,
data: seriesData[1],
name: 'Downloads',
},
......@@ -61,7 +51,7 @@ class RickshawGraph extends React.Component {
});
const hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: this.state.graph,
graph: this.graph,
xFormatter: x => new Date(x * 1000).toString(),
});
......@@ -70,21 +60,42 @@ class RickshawGraph extends React.Component {
setInterval(() => {
random.removeData(seriesData);
random.addData(seriesData);
this.state.graph.update();
this.graph.update();
}, 1000);
this.state.graph.render();
this.graph.render();
}
render() {
return (
<div
ref={(r) => {
this.rickshawChart = r;
}}
/>
<div>
<h4 className="mb-lg">Recent <span className="fw-semi-bold">Update</span></h4>
<h6>Node.js <span className="fw-semi-bold">4.0.1 distribution</span></h6>
<Progress className="bg-gray-lighter progress-xs" color="danger" value="77" />
<p className="mt-sm mb fs-mini ">
<small><span className="circle bg-warning text-gray-dark"><i
className="glyphicon glyphicon-chevron-up"
/></span></small>
<strong className="px-1">17% higher</strong>
than last month
</p>
<p className="fs-sm text-gray-lighter mb-0">Remaining hours</p>
<button className="btn btn-xs btn-gray pull-right ml-xs">
<i className="fa fa-compress" /> track
</button>
<button className="btn btn-xs btn-gray pull-right">
<i className="fa fa-pause" /> pause
</button>
<p className="value4">2h 56m</p>
<br />
<div
ref={(r) => {
this.rickshawChart = r;
}} className="text-gray-dark chart-overflow-bottom" style={{ height: '130px' }}
/>
</div>
);
}
}
export default RickshawGraph;
export default RealtimeTraffic;
......
import React from 'react';
import { Nav, NavItem, NavLink } from 'reactstrap';
/* eslint-disable */
import $ from 'jquery';
import 'imports-loader?$=jquery,this=>window!jquery-mapael/js/maps/world_countries';
import 'imports-loader?$=jquery,this=>window!jquery-mapael/js/jquery.mapael';
/* eslint-enable */
import './YearsMap.scss';
import fakeWorldData from './MapData';
class YearsMap extends React.Component {
constructor(prop) {
super(prop);
this.state = {
activeYear: 2019,
};
this.triggerYear = this.triggerYear.bind(this);
}
componentDidMount() {
this.init();
}
init() {
const $map = $('#mapael');
const data = {
map: {
name: 'world_countries',
defaultArea: {
attrs: {
fill: '#eee', // gray-lighter
stroke: '#666', // 'gray'
'stroke-width': 0.1,
},
attrsHover: {
fill: '#999', // gray-light,
animDuration: 100,
},
},
defaultPlot: {
size: 17,
attrs: {
fill: '#f0b518', // brand-warning,
stroke: '#fff',
'stroke-width': 0,
'stroke-linejoin': 'round',
},
attrsHover: {
'stroke-width': 1,
animDuration: 100,
},
},
zoom: {
enabled: true,
step: 1,
maxLevel: 10,
mousewheel: false,
},
},
legend: {
area: {
display: false,
slices: [
{
max: 5000000,
attrs: {
fill: 'rgb(245, 249, 251)', // lightenColor('#ebeff1', .04)
},
label: 'Less than 5M',
},
{
min: 5000000,
max: 10000000,
attrs: {
fill: '#ebeff1',
},
label: 'Between 5M and 10M',
},
{
min: 10000000,
max: 50000000,
attrs: {
fill: '#eee', // gray-lighter
},
label: 'Between 10M and 50M',
},
{
min: 50000000,
attrs: {
fill: 'rgb(209, 213, 215)', // darkenColor('#ebeff1', .1)
},
label: 'More than 50M',
},
],
},
},
areas: fakeWorldData[this.state.activeYear].areas,
};
const height = 394;
$map.css('height', height);
if ($map.parents('.widget')[0]) {
$map.find('.map').css('height', parseInt($map.parents('.widget').css('height'), 10) - 35);
}
$map.mapael(data);
$map.trigger('zoom', { level: 6, latitude: 59.599254, longitude: 8.863224 });
}
triggerYear(year) {
this.setState({
activeYear: year,
});
const $map = $('#mapael');
$map.trigger('update', [{
mapOptions: fakeWorldData[year],
animDuration: 300,
}]);
}
render() {
return (<div>
<div className="mapael" id="mapael">
<div className="stats">
<h6 className="text-gray-dark">YEARLY <span className="fw-semi-bold">DISTRIBUTIONS</span></h6>
<span className="pull-left mr-xs">
<small><span className="circle bg-warning text-gray-dark">
<i className="fa fa-plus" /></span></small>
</span>
<p className="h4 m-0">
<strong>17% last year</strong>
</p>
</div>
<div className="map">
<span>Alternative content for the map</span>
</div>
<div className="areaLegend">
<span>Alternative content for the legend</span>
</div>
</div>
<Nav className="map-controls" pills fill>
<NavItem>
<NavLink active={this.state.activeYear === 2014} onClick={() => this.triggerYear(2014)}>2014</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2015} onClick={() => this.triggerYear(2015)}>2015</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2016} onClick={() => this.triggerYear(2016)}>2016</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2017} onClick={() => this.triggerYear(2017)}>2017</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2018} onClick={() => this.triggerYear(2018)}>2018</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2019} onClick={() => this.triggerYear(2019)}>2019</NavLink>
</NavItem>
</Nav>
</div>);
}
}
export default YearsMap;
@import '../../../../styles/app';
@import '../../../../../styles/app';
/* Mapael */
.mapTooltip {
position: fixed;
padding: 2px;
z-index: 1000;
max-width: 200px;
display: none;
background-color: #fff;
border: 1px solid #ccc;
border-radius: $border-radius;
font-size: $font-size-sm;
color: $text-color;
}
.zoomIn,
.zoomOut {
position: absolute;
bottom: 10px;
left: 10px;
width: 20px;
height: 20px;
box-sizing: content-box;
border: 1px solid #ccc;
background-color: #fff;
color: $text-color;
line-height: 20px;
text-align: center;
border-radius: $border-radius;
cursor: pointer;
font-weight: $font-weight-bold;
user-select: none;
}
.zoomOut {
left: 36px;
}
.mapael {
position: relative;
margin: (-$widget-padding-vertical) (-$widget-padding-horizontal) 0;
/* Mapael */
:global {
.mapTooltip {
position: absolute;
padding: 2px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: $border-radius;
font-size: $font-size-sm;
.map {
position: relative;
height: calc(100% - 20px);
}
.stats {
position: absolute;
z-index: 1;
top: 0;
left: 0;
margin: 5% 10%;
}
}
/* Part:Map Controls */
.map-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #bbb;
background-color: $addition-bg;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
> .nav-item > .nav-link {
border-radius: 0;
padding: 0.7143rem 0;
color: $text-color;
&:hover {
background-color: $gray-200;
color: $text-color;
}
}
.zoomIn,
.zoomOut {
position: absolute;
bottom: 10px;
left: 10px;
width: 20px;
height: 20px;
box-sizing: content-box;
border: 1px solid #ccc;
background-color: #fff;
> .nav-item > .nav-link.active {
&,
&:hover {
background-color: $white;
color: $text-color;
line-height: 20px;
text-align: center;
border-radius: $border-radius;
cursor: pointer;
font-weight: $font-weight-bold;
user-select: none;
}
.zoomOut {
left: 36px;
}
}
.map {
position: relative;
}
> .nav-item:first-child > a {
border-bottom-left-radius: $border-radius;
}
.stats {
position: absolute;
z-index: 1;
top: 0;
left: 0;
margin: 5% 10%;
}
> .nav-item:last-child > a {
border-bottom-right-radius: $border-radius;
}
}
.map svg {
height: 100%;
width: 100%;
}
......
{
"name": "widgets",
"version": "0.0.0",
"main": "./Widgets.js",
"private": true
}
{
"name": "calendar",
"version": "0.0.0",
"private": true,
"main": "./Calendar.js"
}
{
"name": "invoice",
"version": "0.0.0",
"private": true,
"main": "./Gallery.js"
}
{
"name": "invoice",
"version": "0.0.0",
"private": true,
"main": "./Invoice.js"
}
{
"name": "search",
"version": "0.0.0",
"private": true,
"main": "./Search.js"
}
{
"name": "timeline",
"version": "0.0.0",
"main": "./Timeline.js",
"private": true
}
{
"name": "FormsElements",
"version": "0.0.0",
"private": true,
"main": "./Elements.js"
}
{
"name": "FormValidation",
"version": "0.0.0",
"private": true,
"main": "./Validation.js"
}
{
"name": "FormWizard",
"version": "0.0.0",
"private": true,
"main": "./Wizard.js"
}
{
"name": "grid",
"version": "0.0.0",
"main": "./Grid.js",
"private": true
}
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter, Redirect, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { Container, Alert, Button } from 'reactstrap';
import Widget from '../../components/Widget';
import { loginUser, receiveToken } from '../../actions/user';
import jwt from "jsonwebtoken";
import microsoft from '../../images/microsoft.png';
class Login extends React.Component {
static propTypes = {
dispatch: PropTypes.func.isRequired,
};
static isAuthenticated(token) {
if (!token) return;
const date = new Date().getTime() / 1000;
const data = jwt.decode(token);
return date < data.exp;
}
constructor(props) {
super(props);
this.state = {
email: 'admin@flatlogic.com',
password: 'password',
};
this.doLogin = this.doLogin.bind(this);
this.googleLogin = this.googleLogin.bind(this);
this.microsoftLogin = this.microsoftLogin.bind(this);
this.changeEmail = this.changeEmail.bind(this);
this.changePassword = this.changePassword.bind(this);
this.signUp = this.signUp.bind(this);
}
changeEmail(event) {
this.setState({ email: event.target.value });
}
changePassword(event) {
this.setState({ password: event.target.value });
}
doLogin(e) {
e.preventDefault();
this.props.dispatch(loginUser({ email: this.state.email, password: this.state.password }));
}
googleLogin() {
this.props.dispatch(loginUser({social: "google"}));
}
microsoftLogin() {
this.props.dispatch(loginUser({social: "microsoft"}));
}
componentDidMount() {
const params = new URLSearchParams(this.props.location.search);
const token = params.get('token');
if (token) {
this.props.dispatch(receiveToken(token));
}
}
signUp() {
this.props.history.push('/register');
}
render() {
const { from } = this.props.location.state || { from: { pathname: '/app' } }; // eslint-disable-line
// cant access login page while logged in
if (Login.isAuthenticated(localStorage.getItem('token'))) {
return (
<Redirect to={from} />
);
}
return (
<div className="auth-page">
<Container>
<h5 className="auth-logo">
<i className="fa fa-circle text-gray" />
Sing App
<i className="fa fa-circle text-warning" />
</h5>
<Widget className="widget-auth mx-auto" title={<h3 className="mt-0">Login to your Web App</h3>}>
<p className="widget-auth-info">
Use your email to sign in.
</p>
<Alert className="alert-sm text-center mt-2" color="secondary">
This is a real app with Node.js backend - use
<br/>
<span className="font-weight-bold">"admin@flatlogic.com / password"</span>
<br/>
to login!
</Alert>
<form className="mt" onSubmit={this.doLogin}>
{
this.props.errorMessage && (
<Alert className="alert-sm" color="danger">
{this.props.errorMessage}
</Alert>
)
}
<div className="form-group">
<input className="form-control no-border" value={this.state.email} onChange={this.changeEmail} type="email" required name="email" placeholder="Email" />
</div>
<div className="form-group">
<input className="form-control no-border" value={this.state.password} onChange={this.changePassword} type="password" required name="password" placeholder="Password" />
</div>
<Button type="submit" color="inverse" className="auth-btn mb-3" size="sm">{this.props.isFetching ? 'Loading...' : 'Login'}</Button>
<p className="widget-auth-info">or sign in with</p>
<div className="social-buttons">
<Button onClick={this.googleLogin} color="primary" className="social-button mb-2">
<i className="social-icon social-google"/>
<p className="social-text">GOOGLE</p>
</Button>
<Button onClick={this.microsoftLogin} color="success" className="social-button">
<i className="social-icon social-microsoft"
style={{backgroundImage: `url(${microsoft})`}}/>
<p className="social-text">MICROSOFT</p>
</Button>
</div>
</form>
<p className="widget-auth-info">
Don't have an account? Sign up now!
</p>
<Link className="d-block text-center" to="register">Create an Account</Link>
</Widget>
</Container>
<footer className="auth-footer">
2019 &copy; Sing App - React Admin Dashboard Template.
</footer>
</div>
);
}
}
function mapStateToProps(state) {
return {
isFetching: state.auth.isFetching,
isAuthenticated: state.auth.isAuthenticated,
errorMessage: state.auth.errorMessage,
};
}
export default withRouter(connect(mapStateToProps)(Login));
{
"name": "login",
"version": "0.0.0",
"private": true,
"main": "./Login.js"
}
{
"name": "ProductEdit",
"version": "0.0.0",
"private": true,
"main": "./ProductEdit.js"
}
\ No newline at end of file
{
"name": "Management",
"version": "0.0.0",
"private": true,
"main": "./Management.js"
}
\ No newline at end of file
{
"name": "GoogleMap",
"version": "0.0.0",
"private": true,
"main": "./Google.js"
}
{
"name": "Vector",
"version": "0.0.0",
"main": "./Vector.js",
"private": true
}
import React from 'react';
import {
Row,
Col,
} from 'reactstrap';
import Widget from '../../components/Widget';
import s from './SPackage.module.scss';
import reactLogo from '../../images/react-logo.svg';
import angularLogo from '../../images/angularjs-logo.svg';
import angularJSLogo from '../../images/angular-logo.svg';
import vueLogo from '../../images/vue-logo.svg';
import jsLogo from '../../images/js-logo.svg';
class SPackage extends React.Component {
render() {
return (
<div>
<h2 className="page-title">Sing - <span className="fw-semi-bold">Package</span>&nbsp;
<small>More than 2000 man-hours already invested!</small>
</h2>
<p className="lead">Over 8,000 developers worldwide chose our bootstrap admin templates to build their web applications, SAAS and E-Commerce platforms faster. Jump in to burn through your gig too!</p>
<Row>
<Col lg={5} md={6}>
<Widget
title={
<h6>React JS Version</h6>
} settings collapse close
>
<img className={['rounded pull-left mb-1 mr-3', s.image].join(' ')} src={reactLogo} width="80" alt="" />
<h3>React JS Version</h3>
<p className="text-muted">We spent another <span className="fw-semi-bold">500</span> man-hours
developing and designing
React version, to save you time and money.</p>
<p><a href="https://reactjs.org/" rel="nofollow noopener noreferrer" target="_blank">React</a> is
the most trendy and advanced
component-based JavaScript library for building user interfaces. Our React
version follows latest industry
best practices and uses <strong>Redux</strong> as a state manager and
supports <strong>Server Side Rendering</strong> which makes this app incredibly fast
and SEO-friendly.
</p>
<p>This version is a great choice when you want to be in control
of your own codebase and
decide on development approaches that are the best for your project.
<a href="https://webpack.js.org/">Webpack</a> Module Bundler and Yarn as a package
manager are under the hood.</p>
<button className="btn btn-transparent btn-lg btn-block disabled">(You are here)</button>
</Widget>
</Col>
<Col lg={5} md={6} xs={12}>
<Widget
title={
<h6>Angular Version</h6>
} settings collapse close
>
<img className={['rounded pull-left mb-1 mr-3', s.image].join(' ')} src={angularLogo} width="80" alt="" />
<h3>Angular 2+ Version</h3>
<p className="text-muted">We spent around <span className="fw-semi-bold">500</span> man-hours
developing and designing
Angular version, to match high engineering requirements.</p>
<p><a href="https://angular.io" rel="nofollow noopener noreferrer" target="_blank">Angular</a> is the
most mature and wide spread
front-end framework created by Google and used by many established enterprises.
It is a very good choice when
your expect your application to have a well-engineered structure
and development workflow. If you are familiar
with Java or .NET ecosystems Angular is definitely your choice.
</p>
<p>Our app is built on top of latest <strong>Angular 5.0</strong> version and
uses <a href="https://webpack.js.org/">Webpack</a> Module Bundler and NPM as a package manager,
so everything
works out of the box! <br /><br /></p>
<a
className="btn btn-default btn-lg btn-block"
href="https://demo.flatlogic.com/sing-app/angular/"
>
Go to Demo
</a>
</Widget>
</Col>
<Col lg={5} md={6}>
<Widget
title={
<h6>AngularJS 1.X Version</h6>
} settings collapse close
>
<img className={['rounded pull-left mb-1 mr-3', s.image].join(' ')} src={angularJSLogo} width="80" alt="" />
<h3>AngularJS Version</h3>
<p className="text-muted">We don’t know about you but we’re very excited that it’s finally here!
Our brand new Light Blue Angular version.</p>
<p><strong>Angular 1.0</strong> have so many opportunities in comparison to HTML. It lets you
extend HTML vocabulary.
And as a result your application can be very expressive and readable.
<strong>Directives</strong> can hide complex DOM structure, CSS. They can let you invent new
HTML syntax, specific to your application.
We strongly believe that there’s nothing better than arranging an outstanding end-user experience.</p>
<p><a href="https://reactjs.org/" rel="nofollow noopener noreferrer" target="_blank">Angular</a>
should be definitely
among your top considerations when choosing the right framework.</p>
<p>Angular version makes it possible by letting responsive, fast-loading and
seamlessly-navigating application.</p>
<a
className="btn btn-default btn-lg btn-block"
href="https://demo.flatlogic.com/sing-app/angularjs/"
>
Go to Demo
</a>
</Widget>
</Col>
<Col lg={5} md={6} xs={12}>
<Widget
title={
<h6>Pure HTML5 Version</h6>
} settings collapse close
>
<img className={['rounded pull-left mb-1 mr-3', s.image].join(' ')} src={jsLogo} width="80" alt="" />
<h3>HTML5 Version</h3>
<p className="text-muted">During last 4 years we
invested more than <span className="fw-semi-bold">1000</span> man-hours
crafting and maintaining this version.</p>
<p>Basic HTML version is the most generic version of Light Blue App
that can be used with any platform
starting from PHP and Rails to .NET and Java. It contains pure
w3c-validated <strong>HTML5</strong> markup
and valid <strong>CSS3</strong> styles. It can work in two modes:
(a) as a <strong>Single
Page Application</strong>, using ajax to fetch page contents, or
(b) as a static application, where
pages served directly from server.
The mode can be switched by changing the
value of &nbsp;<code>window.PJAX_ENABLED</code> global variable.</p>
<p>Moreover, this version comes with three different color
schemes which you can easily switch based on your choice.</p>
<a
className="btn btn-default btn-lg btn-block"
href="https://demo.flatlogic.com/sing-app/html-bs4/dashboard/index.html"
>
Go to Demo
</a>
</Widget>
</Col>
<Col lg={5} md={6}>
<Widget
title={
<h6>Vue JS Version</h6>
} settings collapse close
>
<img className={['rounded pull-left mb-1 mr-3', s.image].join(' ')} src={vueLogo} width="80" alt="" />
<h3>VUE JS Version</h3>
<p className="text-muted">Coming soon version. Seed
project is <span className="fw-semi-bold">50%</span> ready.</p>
<p><a href="https://reactjs.org/" rel="nofollow noopener noreferrer" target="_blank">Vue</a> is a
an open-source progressive
JavaScript framework for building user interfaces. Vue is designed to be
incrementally adoptable meaning that
adding new libraries is made incredibly easy.
</p>
<p>Supporting Vue JS version is a main
priority of <a href="https://flatlogic.com">Flatlogic</a> for next months,
so seed version will ready really soon! <br /><br /><br /><br /><br /></p>
<a
className="btn btn-default btn-lg btn-block"
href="https://demo.flatlogic.com/sing-app-vue/#/app/main/analytics"
>
Go to Demo
</a>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default SPackage;
@import '../../styles/app';
.image {
width: 80px;
height: 80px;
}
{
"name": "package",
"version": "0.0.0",
"private": true,
"main": "./SPackage.js"
}
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
import {
Breadcrumb,
BreadcrumbItem,
} from 'reactstrap';
import Section from './components/Section/Section';
import Banner from './components/Banner/Banner';
import Description from './components/Description/Description';
import Slider from './components/Slider/Slider';
import { withRouter } from 'react-router';
import { connect } from 'react-redux';
import { getProductsRequest } from '../../actions/products';
class Product extends React.Component {
static propTypes = {
products: PropTypes.array,
dispatch: PropTypes.func.isRequired,
};
static defaultProps = {
products: []
};
componentDidMount() {
window.scrollTo(0,0);
this.props.dispatch(getProductsRequest());
}
findProduct(id) {
const {products} = this.props;
return products.find(p => p.id === id);
}
getId() {
const {match} = this.props;
return parseInt(match.params.id);
}
render () {
let product;
if (this.getId()) {
product = this.findProduct(this.getId());
} else {
product = {
img: 'static/media/img1.jpg',
title: 'trainers',
subtitle: 'Trainers In White',
price: 76,
rating: 4.6,
description_1: "Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies, or trainers) are shoes primarily designed for sports or other forms of physical exercise, but which are now also often used for everyday wear.",
description_2: "The term generally describes a type of footwear with a flexible sole made of rubber or synthetic material and an upper part made of leather or synthetic materials.",
code: 135234,
hashtag: "whitetrainers",
technology: [
"Ollie patch",
"Cup soles",
"Vulcanized rubber soles"
],
reviews: 32
}
}
const products = this.props.products;
return (
<div className="product-details">
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>E-commerce</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">E-commerce - <span className="fw-semi-bold">Product Detail</span></h1>
{
product && (
<div>
<Banner data={product}/>
<Section title="Product Description" h>
<Description data={product}/>
</Section>
<Section title="You may also like">
<Slider slides={products}/>
</Section>
</div>
)
}
</div>
)
}
}
function mapStateToProps(state) {
return {
products: state.products.data,
};
}
export default withRouter(connect(mapStateToProps)(Product));
import React, { Component } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import bag from '../../../../images/bag.svg';
import star from '../../../../images/stars/star.svg';
import starFilled from '../../../../images/stars/star-filled.svg';
import s from './Bag.module.scss';
class Bag extends Component {
state = {
favourite: this.props.favourite || false,
}
changeFavourite() {
this.setState(pvState => ({ favourite: !pvState.favourite }));
}
render() {
const { favourite } = this.state;
return (
<div className={s.bag} >
<button className={cx('btn', s.add)}>
add to bag
<img src={bag} alt="bag" />
</button>
<button className={cx('btn', s.star)} onClick={() => this.changeFavourite()}>
<img src={favourite ? starFilled : star} alt="star" />
</button>
</div>
);
}
}
Bag.propTypes = {
favourite: PropTypes.bool,
};
Bag.getDefaultProps = {
favourite: false,
};
export default Bag;
@import '../../../../styles/app';
.bag {
display: flex;
height: 50px;
}
.add {
width: 100%;
background-color: theme-color('dark');
text-transform: uppercase;
color: $white;
border: none;
margin-right: $spacer / 2;
display: flex;
align-items: center;
justify-content: center;
&:hover {
cursor: pointer;
}
&:focus {
outline: none;
}
img {
height: 20px;
margin-left: 10px;
}
}
.star {
display: flex;
justify-content: center;
align-items: center;
width: 55px;
border: 2px solid $border-color;
background: transparent;
&:hover {
cursor: pointer;
}
&:focus {
outline: none;
}
img {
height: 20px;
width: 20px;
}
}
import React from 'react';
import PropTypes from 'prop-types';
import General from '../General/General';
import Selects from '../Selects/Selects';
import Bag from '../Bag/Bag';
import mastercard from '../../../../images/payments/mastercard.svg';
import visa from '../../../../images/payments/visa.svg';
import aexpress from '../../../../images/payments/aexpress.svg';
import paypal from '../../../../images/payments/paypal.svg';
import s from './Banner.module.scss';
const Banner = ({ data }) => (
<div className={s.productDetailsBanner}>
<div className={s.productPhoto} style={{ backgroundImage: `url(${data.img})` }} />
<div className={s.productInfo}>
<General {...data} />
<button className={`btn-link ${s.productGuide}`}>Size Guide</button>
<Selects sizes={[1, 2, 3, 4, 5]} quantity={[1, 2, 3, 4, 5, 6, 7]} />
<Bag />
<div className={s.payments}>
<div style={{ backgroundImage: `url(${visa})` }} />
<div style={{ backgroundImage: `url(${mastercard})` }} />
<div style={{ backgroundImage: `url(${aexpress})` }} />
<div style={{ backgroundImage: `url(${paypal})` }} />
</div>
<span className={s.delivery}>FREE Delivery & Returns</span>
</div>
</div >
);
Banner.propTypes = {
data: PropTypes.any.isRequired,
};
export default Banner;
@import '../../../../styles/app';
.productDetailsBanner {
display: flex;
margin: $content-padding 0 75px;
border-radius: $border-radius;
box-shadow: var(--widget-shadow);
@include media-breakpoint-down(sm) {
flex-direction: column;
width: calc(100% + 30px);
box-shadow: none;
margin: auto -15px 0;
}
}
.productPhoto {
background-size: cover;
background-position: center;
width: 66.6%;
border-bottom-left-radius: $border-radius;
border-top-left-radius: $border-radius;
@include media-breakpoint-down(md) {
width: 55%;
}
@include media-breakpoint-down(sm) {
height: 300px;
width: 100%;
border-radius: 0;
}
}
.productInfo {
background: $white;
width: 33.3%;
padding: 15px $content-padding / 2;
border-bottom-right-radius: $border-radius;
border-top-right-radius: $border-radius;
@include media-breakpoint-down(md) {
width: 45%;
}
@include media-breakpoint-down(sm) {
width: 100%;
}
}
.productGuide {
color: $gray-500;
text-decoration: underline;
&:hover {
color: $gray-500;
text-decoration: none;
}
}
.payments {
display: flex;
height: 25px;
margin: 25px 0 $content-padding / 2;
div {
width: 40px;
margin-right: 15px;
border-radius: 2px;
background-size: cover;
background-position: center;
}
}
.delivery {
font-weight: $font-weight-normal;
color: $gray-500;
}
import React, { Component } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { Col, Row, Collapse } from 'reactstrap';
import s from './Description.module.scss';
import Rating from '../Rating/Rating';
class Description extends Component {
state = {
accordion: [false, false, false],
};
toggleAccordion(id) {
const { accordion } = this.state;
const newAccordion = [...accordion];
newAccordion[id] = !newAccordion[id];
this.setState({ accordion: newAccordion });
}
render() {
const { data } = this.props;
return (
<div>
<div className={s.productDescription}>
<div className={cx(s.productDescriptionInfo, s.productDescriptionBlock)}>
<h3>PRODUCT DESCRIPTION</h3>
<p className="dot-before">{data.description_1}</p>
<p className="dot-before">{data.description_2}</p>
</div>
<div className={s.productDescriptionBlock}>
<h3>PRODUCT CODE</h3>
<div>{data.code}</div>
</div>
<div className={s.productDescriptionBlock}>
<h3>SHARE</h3>
<div>
{/* eslint-disable */}
Share photo with a tag <a href="#">#{data.hashtag}</a>
{/* eslint-enable */}
<div className={s.socialList}>
<div><i className="fa fa-facebook"/></div>
<div><i className="fa fa-instagram"/></div>
<div><i className="fa fa-twitter"/></div>
</div>
</div>
</div>
<div className={s.productDescriptionBlock}>
<h3>TECHNOLOGY</h3>
<ul>
{data.technology.map(t => (
<li key={t} className="dot-before">{t}</li>
))}
</ul>
</div>
<div className={s.productDescriptionBlock}>
<h3>RATING & REVIEWS</h3>
<div className={s.reviews}>
<Rating rating={data.rating}/>
32 Reviews
{/* eslint-disable */}
<a href="#">Read all</a>
{/* eslint-enable */}
</div>
</div>
</div>
<Row className={cx(s.productDescription, s.productDescriptionMobile)}>
<Col xs="12">
<div className="card panel">
<div className='card-header panel-header panel-first' role="button" onClick={() => {this.toggleAccordion(0);}}>
<div className="mb-0">
<button className="accordion-toggle">
PRODUCT DESCRIPTION
<i className={`fa fa-angle-down fa-2x ${this.state.accordion[0] ? 'expanded' : ''}`}/>
</button>
</div>
</div>
<Collapse className="panel-body" isOpen={this.state.accordion[0]}>
<div className="card-body">
<p className="dot-before">{data.description_1}</p>
<p className="dot-before">{data.description_2}</p>
</div>
</Collapse>
</div>
<div className="card panel">
<div className='card-header panel-header' role="button" onClick={() => {
this.toggleAccordion(1);
}}>
<div className="mb-0">
<button className="accordion-toggle">
PRODUCT CODE
<i className={`fa fa-angle-down fa-2x ${this.state.accordion[1] ? 'expanded' : ''}`}/>
</button>
</div>
</div>
<Collapse className="panel-body" isOpen={this.state.accordion[1]}>
<div className="card-body">
{data.code}
</div>
</Collapse>
</div>
<div className="card panel">
<div className='card-header panel-header' role="button" onClick={() => {
this.toggleAccordion(2);
}}>
<div className="mb-0">
<button className="accordion-toggle">
SHARE
<i className={`fa fa-angle-down fa-2x ${this.state.accordion[2] ? 'expanded' : ''}`}/>
</button>
</div>
</div>
<Collapse className="panel-body" isOpen={this.state.accordion[2]}>
<div className="card-body">
{/* eslint-disable */}
Share photo with a tag <a href="#">#{data.hashtag}</a>
{/* eslint-enable */}
<div className={s.socialList}>
<div><i className="fa fa-facebook"/></div>
<div><i className="fa fa-instagram"/></div>
<div><i className="fa fa-twitter"/></div>
</div>
</div>
</Collapse>
</div>
<div className="card panel">
<div className='card-header panel-header' role="button" onClick={() => {
this.toggleAccordion(3);
}}>
<div className="mb-0">
<button className="accordion-toggle">
TECHNOLOGY
<i className={`fa fa-angle-down fa-2x ${this.state.accordion[3] ? 'expanded' : ''}`}/>
</button>
</div>
</div>
<Collapse className="panel-body" isOpen={this.state.accordion[3]}>
<div className="card-body">
<ul>
{data.technology.map(t => (
<li key={t} className="dot-before">{t}</li>
))}
</ul>
</div>
</Collapse>
</div>
<div className="card panel">
<div className='card-header panel-header' role="button" onClick={() => {
this.toggleAccordion(4);
}}>
<div className="mb-0">
<button className="accordion-toggle">
RATING & REVIEWS
<i className={`fa fa-angle-down fa-2x ${this.state.accordion[4] ? 'expanded' : ''}`}/>
</button>
</div>
</div>
<Collapse className="panel-body" isOpen={this.state.accordion[4]}>
<div className="card-body">
<div className={s.reviews}>
<Rating rating={data.rating}/>
32 Reviews
{/* eslint-disable */}
<a href="#">Read all</a>
{/* eslint-enable */}
</div>
</div>
</Collapse>
</div>
</Col>
</Row>
</div>
);
}
}
Description.propTypes = {
data: PropTypes.any.isRequired,
};
export default Description;
@import '../../../../styles/app';
.productDescription {
background-color: $white;
box-shadow: var(--widget-shadow);
border-radius: $border-radius;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
@include media-breakpoint-down(sm) {
display: none;
}
h3 {
font-size: 1.4rem;
font-weight: $font-weight-normal;
margin-bottom: 15px;
color: theme-color('dark');
}
:global .dot-before {
margin: 3px 0;
&::before {
content: '•';
margin-right: 7.5px;
}
}
a {
color: $link-color;
}
.productDescriptionInfo {
grid-row: 1 / 3;
grid-column: 1;
}
.socialList {
display: flex;
margin-top: $spacer;
div {
transition: $transition-base;
height: 25px;
width: 25px;
border-radius: 50%;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
color: $white;
&:hover {
cursor: pointer;
}
&:nth-child(1) {
background-color: #3b5998;
&:hover {
background-color: lighten(#3b5998, 10%);
}
}
&:nth-child(2) {
background-color: #8a3ab9;
&:hover {
background-color: lighten(#8a3ab9, 10%);
}
}
&:nth-child(3) {
background-color: #1dcaff;
&:hover {
background-color: lighten(#1dcaff, 10%);
}
}
}
}
.reviews {
display: flex;
flex-direction: column;
a {
margin-top: 5px;
}
}
& :global .panel-header {
background-color: $white;
border-top: 1px solid $gray-500;
button {
color: $gray-500;
width: 100%;
}
}
& :global .card-header {
padding-left: 0;
padding-right: 0;
}
& :global .card-body {
padding-top: 0;
padding-left: 0;
}
& :global .panel-first {
border-top: none;
}
}
.productDescriptionBlock {
padding: 30px $content-padding / 2;
font-weight: $font-weight-normal;
display: flex;
flex-direction: column;
&:nth-child(n + 4) {
padding-top: 0;
}
}
.productDescriptionMobile {
display: none !important;
margin: 0 !important;
font-weight: $font-weight-normal;
padding: 5px 5px 10px;
@include media-breakpoint-down(sm) {
display: block !important;
}
}
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import Rating from '../Rating/Rating';
import s from './General.module.scss';
const General = ({ rating, title, subtitle, price }) => (
<div className={s.general}>
<div className={s.ratingWrapper}>
<Rating rating={rating} />
</div>
<div className={s.dataWrapper}>
<span className={cx(s.title, 'title')}>{title}</span>
<span className={cx(s.subtitle, 'subtitle')}>{subtitle}</span></div>
<span className={s.price}>${price}</span>
</div>
);
General.propTypes = {
rating: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]).isRequired,
title: PropTypes.string.isRequired,
subtitle: PropTypes.string.isRequired,
price: PropTypes.any.isRequired,
};
export default General;
@import '../../../../styles/app';
.general {
display: flex;
flex-direction: column;
}
.title {
margin-top: $content-padding / 2;
font-weight: $font-weight-normal;
text-transform: uppercase;
font-size: $font-size-lg;
color: theme-color('dark');
}
.subtitle {
font-size: $font-size-lg;
font-weight: $font-weight-normal;
color: $gray-500;
text-transform: capitalize;
margin: 5px 0 25px;
}
.price {
font-weight: $font-weight-semi-bold;
font-size: $font-size-lg;
margin-bottom: 25px;
color: theme-color('dark');
}
.ratingWrapper {
display: flex;
@include media-breakpoint-down(sm) {
justify-content: flex-end;
}
}
.dataWrapper {
display: flex;
flex-direction: column;
@include media-breakpoint-down(sm) {
flex-direction: column-reverse;
margin-top: -31px;
& :global .title {
margin-bottom: 25px;
margin-top: 5px;
}
& :global .subtitle {
margin-bottom: 0;
}
}
}
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
/* eslint-disable */
import s from './Rating.module.scss';
/* eslint-enable */
const Rating = ({ rating, size }) => (
<div className={cx(s.rating, 'rating', { [s[`rating-${size}`]]: size })}>
{rating}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 49.94 49.94" width="17px" height="17px">
<path d="M48.856,22.73c0.983-0.958,1.33-2.364,0.906-3.671c-0.425-1.307-1.532-2.24-2.892-2.438l-12.092-1.757 c-0.515-0.075-0.96-0.398-1.19-0.865L28.182,3.043c-0.607-1.231-1.839-1.996-3.212-1.996c-1.372,0-2.604,0.765-3.211,1.996 L16.352,14c-0.23,0.467-0.676,0.79-1.191,0.865L3.069,16.622c-1.359,0.197-2.467,1.131-2.892,2.438 c-0.424,1.307-0.077,2.713,0.906,3.671l8.749,8.528c0.373,0.364,0.544,0.888,0.456,1.4L8.224,44.701 c-0.183,1.06,0.095,2.091,0.781,2.904c1.066,1.267,2.927,1.653,4.415,0.871l10.814-5.686c0.452-0.237,1.021-0.235,1.472,0 l10.815,5.686c0.526,0.277,1.087,0.417,1.666,0.417c1.057,0,2.059-0.47,2.748-1.288c0.687-0.813,0.964-1.846,0.781-2.904 l-2.065-12.042c-0.088-0.513,0.083-1.036,0.456-1.4L48.856,22.73z" fill="#ffc247" />
</svg>
</div>
);
Rating.propTypes = {
rating: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]).isRequired,
size: PropTypes.string,
};
Rating.defaultProps = {
size: '',
};
export default Rating;
@import '../../../../styles/app';
.rating {
display: flex;
font-size: $font-size-lg;
font-weight: $font-weight-semi-bold;
color: theme-color('warning');
align-items: center;
svg {
margin: -2px 0 0 10px;
}
}
.rating-sm {
font-size: $font-size-base;
svg {
height: 14px;
}
}
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import s from './Section.module.scss';
const Section = ({ title, children, h }) => (
<div className={s.section}>
<h2 className={cx(s.sectionTitle, { 'hideon-sm': h })}>{title}</h2>
{children}
</div>
);
Section.propTypes = {
title: PropTypes.string.isRequired,
children: PropTypes.node.isRequired,
h: PropTypes.bool,
};
Section.defaultProps = {
h: false,
};
export default Section;
@import '../../../../styles/app';
.section {
margin-bottom: $spacer * 5;
@include media-breakpoint-down(sm) {
background-color: $white;
margin: 0 -15px;
& :global .hideon-sm {
display: none;
}
}
&:last-child {
margin-bottom: 0;
}
}
.sectionTitle {
width: 100%;
text-align: center;
margin-bottom: $spacer * 2;
font-weight: $font-weight-normal;
color: theme-color('dark');
@include media-breakpoint-down(sm) {
font-size: 1.4rem;
margin-bottom: $content-padding / 2;
}
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
UncontrolledButtonDropdown,
DropdownMenu,
DropdownToggle,
DropdownItem,
} from 'reactstrap';
import s from './Selects.module.scss';
class Selects extends Component {
state = {
currentSize: 'Select size',
currentQuantity: 1,
}
changeState(field, value) {
this.setState({ [field]: value });
}
render() {
const { sizes, quantity } = this.props;
const { currentSize, currentQuantity } = this.state;
return (
<div className={s.selects}>
<UncontrolledButtonDropdown>
<DropdownToggle
caret color="default"
className="dropdown-toggle-split mr-xs"
>
{currentSize === 'Select size'
? currentSize
: `Size: ${currentSize}`}
</DropdownToggle>
<DropdownMenu>
{sizes.map(item =>
<DropdownItem key={item} onClick={() => this.changeState('currentSize', item)}>{item}</DropdownItem>,
)}
</DropdownMenu>
</UncontrolledButtonDropdown>
<UncontrolledButtonDropdown>
<DropdownToggle
caret color="default"
className="dropdown-toggle-split mr-xs"
>
{currentQuantity}
</DropdownToggle>
<DropdownMenu>
{quantity.map(item =>
<DropdownItem key={item} onClick={() => this.changeState('currentQuantity', item)}>{item}</DropdownItem>,
)}
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
);
}
}
Selects.propTypes = {
sizes: PropTypes.any.isRequired,
quantity: PropTypes.any.isRequired,
};
export default Selects;
@import '../../../../styles/app';
.selects {
display: flex;
margin: $spacer / 2 0;
& > div {
height: 50px;
button {
width: 100%;
margin-right: 0;
}
&:first-child {
width: 65%;
}
&:last-child {
width: calc(35% - #{$spacer / 2});
margin-left: $spacer / 2;
}
}
}
import React from 'react';
import PropTypes from 'prop-types';
import Slick from 'react-slick';
import SliderArrow from '../SliderArrow/SliderArrow';
import ProductCard from '../../../products/components/ProductCard/ProductCard';
import s from './Slider.module.scss';
const Slider = ({ slides }) => {
const itemsToDisplay = 4;
const settings = {
className: s.slick,
infinite: false,
speed: 500,
slidesToShow: itemsToDisplay,
slidesToScroll: 1,
initialSlide: 0,
nextArrow: <SliderArrow orientation="right" itemsToDisplay={itemsToDisplay} />,
prevArrow: <SliderArrow orientation="left" itemsToDisplay={itemsToDisplay} />,
responsive: [{
breakpoint: 992,
settings: {
slidesToShow: 3,
},
},
{
breakpoint: 575,
settings: {
slidesToShow: 2,
infinite: true,
},
},
{
breakpoint: 360,
settings: {
slidesToShow: 1,
infinite: true,
},
}],
};
return (
<div className={s.slider} >
<Slick {...settings}>
{slides.map(slide =>
<div className={s.sliderItem} key={slide.id}><ProductCard {...slide} /></div>)}
</Slick>
</div >
);
};
Slider.propTypes = {
slides: PropTypes.arrayOf(PropTypes.any).isRequired,
};
export default Slider;
@import '../../../../styles/app';
.slider {
width: 100%;
max-width: 1300px;
margin: 0 auto;
position: relative;
overflow: hidden;
@include media-breakpoint-down(sm) {
margin-bottom: -#{$content-padding / 2};
padding-bottom: 50px;
}
& :global .product-card {
margin-bottom: 0;
}
}
.sliderItem {
padding: 0 10px;
@include media-breakpoint-down(sm) {
padding: 5px;
}
}
.slick {
& :global .slick-track {
display: flex;
}
}
import React from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import arrow from '../../../../images/arrow.svg';
import s from './SliderArrow.module.scss';
const SliderArrow = ({ orientation, itemsToDisplay, currentSlide, slideCount, ...otherProps }) => {
const active = orientation === 'left'
? currentSlide !== 0
: currentSlide + itemsToDisplay < slideCount;
const orientationClass = orientation === 'left' ? s['arrow--left'] : s['arrow--right'];
return (
<button {...otherProps} className={cx(s.arrow, orientationClass, { [s.active]: active })}>
<img src={arrow} alt="arrow" />
</button>
);
};
SliderArrow.propTypes = {
orientation: PropTypes.string.isRequired,
currentSlide: PropTypes.number,
slideCount: PropTypes.number,
itemsToDisplay: PropTypes.number.isRequired,
};
SliderArrow.getDefaultProps = {
currentSlide: null,
slideCount: null,
};
export default SliderArrow;
@import '../../../../styles/app';
.arrow {
opacity: 0;
transition: 0.3s;
z-index: 99;
width: 50px;
height: 50px;
display: none;
align-items: center;
justify-content: center;
position: absolute;
top: 135px;
border: none;
background-color: rgba(0, 0, 0, 0.15);
&:focus {
outline: none;
}
&:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.25);
}
img {
height: 20px;
width: 20px;
}
}
.arrow--left {
left: 10px;
img {
transform: rotate(180deg);
}
}
.arrow--right {
right: 10px;
}
.active {
opacity: 1;
@include media-breakpoint-down(sm) {
opacity: 0;
}
}
{
"name": "product",
"version": "0.0.0",
"private": true,
"main": "./Product.js"
}
\ No newline at end of file
import React, { Component } from 'react';
import {
Breadcrumb,
BreadcrumbItem,
} from 'reactstrap';
import PropTypes from 'prop-types';
import FilterElement from './components/FilterElement/FilterElement';
import ProductCard from './components/ProductCard/ProductCard';
import MobileModal from './components/MobileModal/MobileModal';
import s from './Products.module.scss';
import { getProductsRequest } from '../../actions/products';
import { withRouter } from 'react-router';
import { connect } from 'react-redux';
const filtersData = [{
title: 'Filter',
data: [{
id: 0,
label: 'Type',
options: ['Shoes', 'Boots', 'Trainers'],
},
{
id: 1,
label: 'Brands',
options: ['All', 'Nike', 'Adidas'],
},
{
id: 2,
label: 'Size',
options: [7, 8, 9, 10, 11, 12, 12.5, 13],
},
{
id: 3,
label: 'Colour',
options: ['All', 'White', 'Black'],
},
{
id: 4,
label: 'Range',
options: ['All', '-', 'None'],
}],
},
{
id: 6,
title: 'Sort',
data: ['Favourite', 'Price', 'Popular'],
}];
class ProductList extends Component {
static propTypes = {
products: PropTypes.array,
dispatch: PropTypes.func.isRequired,
};
static defaultProps = {
products: []
};
state = {
isModalActive: false,
modalId: null,
};
openModal(id) {
this.setState({ isModalActive: true, modalId: id });
}
closeModal = () => {
this.setState({ isModalActive: false, modalId: null });
};
componentDidMount() {
this.props.dispatch(getProductsRequest());
}
render() {
const products = this.props.products;
const { isModalActive, modalId } = this.state;
return (
<div>
{!isModalActive &&
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>E-commerce</BreadcrumbItem>
</Breadcrumb>
{/* eslint-disable */}
<h1 className="page-title">E-commerce - <span className="fw-semi-bold">Product Grid</span></h1>
{/* eslint-enable */}
<div className={s.productsListFilters}>
{filtersData.map(item =>
(typeof item.data[0] === 'string'
? <FilterElement defaultLable={item.title} options={item.data} key={item.id} />
: item.data.map(i =>
<FilterElement defaultLable={i.label} options={i.options} key={i.id} />)),
)}
</div>
<div className={s.mobileFilterButtons}>
<button
className="btn btn-transparent btn-lg"
onClick={() => this.openModal(1)}
>
Sort <i className="fa fa-2x fa-angle-down" />
</button>
<button
className="btn btn-transparent btn-lg"
onClick={() => this.openModal(0)}
>
Filter <i className="fa fa-2x fa-angle-down" />
</button>
</div>
<div className={s.productsListElements}>
{products.map(item => <ProductCard key={item.id} {...item} />)}
</div>
</div>
}
<MobileModal active={isModalActive && modalId === 0} data={filtersData[0]} close={this.closeModal} />
<MobileModal active={isModalActive && modalId === 1} data={filtersData[1]} close={this.closeModal} />
</div >
);
}
}
function mapStateToProps(state) {
return {
products: state.products.data,
};
}
export default withRouter(connect(mapStateToProps)(ProductList));
@import '../../styles/app';
.productsListFilters {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-bottom: calc(#{$spacer} - 4px);
@include media-breakpoint-down(sm) {
display: none;
}
}
.mobileFilterButtons {
display: none;
margin: auto -15px 25px;
padding: 10px 0;
border-top: 1px solid $border-color;
border-bottom: 1px solid $border-color;
@include media-breakpoint-down(sm) {
display: flex;
}
button {
width: 50%;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
i {
color: $border-color;
margin-left: $content-padding / 4;
}
&:first-child {
border-right: 1px solid $border-color;
}
}
}
.productsListElements {
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(4, 1fr);
@include media-breakpoint-down(lg) {
grid-template-columns: repeat(3, 1fr);
}
@include media-breakpoint-down(sm) {
grid-template-columns: repeat(2, 1fr);
}
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
UncontrolledButtonDropdown,
DropdownMenu,
DropdownToggle,
DropdownItem,
} from 'reactstrap';
import s from './FilterElement.module.scss';
class FilterElement extends Component {
static propTypes = {
defaultLable: PropTypes.string.isRequired,
options: PropTypes.any.isRequired,
}
state = {
currentOption: this.props.options[0],
}
changeOption(currentOption) {
this.setState({ currentOption });
}
render() {
const { options, defaultLable } = this.props;
const { currentOption } = this.state;
return (
<div className={s.filterElement}>
<div className={s.filterElementLable}>{defaultLable}</div>
<UncontrolledButtonDropdown>
<DropdownToggle
caret color="default"
className="dropdown-toggle-split mr-xs"
>
{currentOption}&nbsp;&nbsp;
</DropdownToggle>
<DropdownMenu>
{options.map(item =>
<DropdownItem key={item} onClick={() => this.changeOption(item)}>{item}</DropdownItem>,
)}
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
);
}
}
export default FilterElement;
@import '../../../../styles/app';
.filterElement {
display: flex;
align-items: center;
margin-right: 30px;
margin-bottom: $content-padding / 2;
&:last-child {
margin-left: 0;
}
}
.filterElementLable {
margin-right: 10px;
font-weight: $font-weight-normal;
}
import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import check from '../../../../images/check.svg';
import s from './MobileMenuOption.module.scss';
const MobileMenuOption = (props) => {
const { active, children, onClick } = props;
return (
/*eslint-disable*/
<li
className={cx('option', s.option, { [s.active]: active })}
onClick={onClick}
>
{/*eslint-enable*/}
<span>
<img src={check} alt="check" />
</span>
{children}
</li>
);
};
MobileMenuOption.propTypes = {
active: PropTypes.bool,
children: PropTypes.node.isRequired,
onClick: PropTypes.func.isRequired,
};
MobileMenuOption.defaultProps = {
active: false,
};
export default MobileMenuOption;
@import '../../../../styles/app';
.option {
span {
margin: 0 $content-padding / 2 0 -10px;
transition: $sidebar-transition-time;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid $addition-bg;
display: flex;
align-items: center;
justify-content: center;
img {
transition: 0.3s;
width: 15px;
opacity: 0;
}
}
}
.active {
span {
img {
width: 15px;
opacity: 1;
}
}
}
import React, { Component } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import ModalMenuOption from '../MobileMenuOption/MobileMenuOption';
import closeImg from '../../../../images/cancel.svg';
import backImg from '../../../../images/back.svg';
import s from './MobileModal.module.scss';
class MobileModal extends Component {
state = {
data: this.props.data,
isPages: typeof this.props.data.data[0] !== 'string',
isPageOpened: false,
activePageId: 0,
activeOptions: {},
}
toggleOptionActive(field, value) {
const newActiveOption = {
...this.state.activeOptions,
[field]: value,
};
this.setState({ activeOptions: newActiveOption });
}
handleBackClick = () => {
this.setState({ activePageId: null, isPageOpened: false });
}
handleCloseClick = () => {
this.setState({ activePageId: null, isPageOpened: false });
this.props.close();
}
openPage(index) {
this.setState({ activePageId: index, isPageOpened: true });
}
render() {
const { active } = this.props;
const { activePageId, isPages, isPageOpened, data: { data, title }, activeOptions } = this.state;
const openedPage = isPageOpened && data[activePageId];
const renderedTitle = openedPage ? openedPage.label : title;
return (
<div className={cx(s.mobileModal, { [s.mobileModalActive]: active })}>
<div className={s.mobileModalTitle}>
<button onClick={openedPage ? this.handleBackClick : this.handleCloseClick}>
<img className={cx({ back: openedPage })} src={openedPage ? backImg : closeImg} alt="close" />
</button>
<h5>{renderedTitle}</h5>
</div>
<ul className={s.mobileModalBody}>
{/* eslint-disable */}
{isPages
? !isPageOpened
? data.map(({ label, id }, index) => <li onClick={() => this.openPage(index)} key={id}>{label}</li>)
: openedPage.options.map((option, index) => <ModalMenuOption
active={activeOptions[renderedTitle] === index}
onClick={() => this.toggleOptionActive(renderedTitle, index)}
key={index}
>
{option}
</ModalMenuOption>)
: data.map((option, index) => <ModalMenuOption
active={activeOptions[renderedTitle] === index}
onClick={() => this.toggleOptionActive(renderedTitle, index)}
key={index}
>
{option}
</ModalMenuOption>)}
{/* eslint-enable */}
</ul>
</div >
);
}
}
MobileModal.propTypes = {
active: PropTypes.bool,
close: PropTypes.func.isRequired,
data: PropTypes.any.isRequired,
};
MobileModal.defaultProps = {
active: false,
};
export default MobileModal;
@import '../../../../styles/app';
.mobileModal {
display: none;
margin: -#{$content-padding / 2} -15px;
min-height: calc(100vh - #{$navbar-height});
}
.mobileModalActive {
display: flex;
flex-direction: column;
}
.mobileModalTitle {
position: relative;
width: 100%;
height: $navbar-height;
display: flex;
justify-content: center;
align-items: center;
background-color: $addition-bg;
button {
left: 35px;
padding: 0;
border: none;
position: absolute;
background: transparent;
&:focus {
outline: none;
}
img {
height: 15px;
}
& :global .back {
height: 17px;
}
}
h5 {
margin: 0;
font-weight: $font-weight-normal;
}
}
.mobileModalBody {
min-height: calc(100vh - #{$navbar-height * 2});
background-color: $white;
padding-left: 35px;
li {
display: flex;
align-items: center;
height: $navbar-height;
border-bottom: 2px solid $addition-bg;
font-weight: $font-weight-normal;
}
& :global .option {
border: none;
}
}
import React, { Component } from 'react';
import cx from 'classnames';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import Rating from '../../../product/components/Rating/Rating';
import star from '../../../../images/stars/star.svg';
import starFilled from '../../../../images/stars/star-filled.svg';
import s from './ProductCard.module.scss';
class ProductCard extends Component {
state = {
favourite: this.props.favourite,
};
changeFavourite() {
this.setState(pvState => ({ favourite: !pvState.favourite }));
}
openProduct(id) {
this.props.history.push('/app/ecommerce/product/' + id);
}
render() {
const { img, title, subtitle, price, discount, rating, id, createdAt, updatedAt } = this.props;
const {favourite} = this.state;
const newPrice = discount ? price - (price * discount / 100) : price;
const label = discount ? "Sale" : createdAt === updatedAt ? "New" : null;
return (
<div className={[s.productCard, 'product-card'].join(' ')}>
<div onClick={() => {this.openProduct(id)}} className={s.productCardPhoto} style={{ backgroundImage: `url(${img})` }}>
{label && <div className={cx(s.label, label === 'Sale' ? 'bg-danger' : 'bg-success')}>{label}</div>}
<button className={s.star} onClick={() => this.changeFavourite()}>
<img src={favourite ? starFilled : star} alt="star" />
</button>
</div>
<div className={s.productCardDataWrapper}>
<div className={cx(s.productsCardTitle, 'title')}>{title}</div>
<div className={cx(s.productsCardDescription, 'description')}>{subtitle}</div>
</div>
<div className={s.productsCardPrice}>
{!discount
? `$${price}`
: <div className={s.sale}>
<span className={s.old}>${price}</span>
{discount}% off
<span className={s.new}> ${newPrice}</span>
</div>
}
{rating && <Rating rating={rating} size="sm" />}
</div>
</div>
);
}
}
ProductCard.propTypes = {
img: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
subtitle: PropTypes.string.isRequired,
price: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]).isRequired,
discount: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
rating: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]).isRequired,
};
ProductCard.getDefaultProps = {
rating: null,
};
export default withRouter(ProductCard);
@import '../../../../styles/app';
.productCard {
margin-bottom: $spacer * 5;
width: 100%;
@include media-breakpoint-down(sm) {
margin-bottom: $spacer;
}
}
.productCardPhoto {
width: 100%;
height: 320px;
background-position: center;
background-size: cover;
position: relative;
border-radius: $border-radius;
box-shadow: var(--widget-shadow);
@include media-breakpoint-down(sm) {
height: 200px;
}
@include media-breakpoint-down(md) {
height: 250px;
}
@include media-breakpoint-down(xs) {
height: 150px;
}
cursor: pointer;
transition: $transition-base;
&:hover {
transform: scale(1.01);
}
.label {
position: absolute;
left: 0;
top: 15px;
padding: 1px 11px;
color: $white;
}
.star {
position: absolute;
right: 15px;
top: 12px;
padding: 5px;
border-radius: 50%;
border: none;
background: $white;
display: flex;
@include media-breakpoint-down(sm) {
top: auto;
bottom: 12px;
padding: 8px;
}
&:hover {
cursor: pointer;
}
&:focus {
outline: none;
}
img {
height: 15px;
width: 15px;
}
}
}
.productCardDataWrapper {
display: flex;
flex-direction: column;
@include media-breakpoint-down(sm) {
flex-direction: column-reverse;
& :global .title {
margin: 2px 0 8px;
}
& :global .description {
margin-top: 10px;
}
}
}
.productsCardTitle {
text-transform: uppercase;
margin-top: $spacer;
letter-spacing: 0.1px;
font-weight: $font-weight-normal;
color: theme-color('dark');
}
.productsCardDescription {
text-transform: capitalize;
color: theme-color('inverce');
margin: 1.5px 0;
}
.productsCardPrice {
display: flex;
font-size: $font-size-larger;
font-weight: $font-weight-semi-bold;
align-items: center;
justify-content: space-between;
.sale {
font-weight: $font-weight-normal;
}
.old {
color: $border-color;
position: relative;
margin-right: $spacer;
&::before {
content: '';
width: 100%;
height: 1px;
left: 0;
bottom: 0;
transform: translateY(-10px);
background-color: $border-color;
position: absolute;
}
&::after {
content: '';
bottom: 2px;
position: absolute;
width: 1px;
height: 15px;
background-color: theme-color('light');
margin: 0 7.5px;
}
}
.new {
color: theme-color('danger');
font-weight: $font-weight-semi-bold;
}
& :global .rating {
flex-direction: row-reverse;
svg {
margin-right: 7.5px;
}
}
@include media-breakpoint-down(sm) {
& :global .rating {
display: none;
}
}
}
// Products photos
import img1 from '../../images/products/img1.jpg';
import img2 from '../../images/products/img2.jpg';
import img3 from '../../images/products/img3.jpg';
export default [
{
id: 0,
img: img1,
title: 'trainers',
description: 'Trainers In White',
price: 76,
favourite: true,
label: false,
},
{
id: 1,
img: img2,
title: 'boots',
description: 'Trainers In Blue',
price: {
old: 56,
new: 45,
percents: 20,
},
favourite: false,
label: 'Sale',
},
{
id: 2,
img: img3,
title: 'flat sandals',
description: 'Trainers In White',
price: 55,
favourite: false,
label: 'New',
},
];
{
"name": "products",
"version": "0.0.0",
"private": true,
"main": "./Products.js"
}
\ No newline at end of file
@import '../../styles/app';
.root {
// some styles
}
.profileContactContainer {
margin-top: -75px;
}
.profileContacts {
@include list-unstyled();
display: inline-block;
text-align: left;
> li {
margin-bottom: $spacer / 2;
}
> li > a {
color: lighten($text-color, 30%);
text-decoration: none;
@include hover-focus {
color: $text-color;
}
}
}
.profileAvatar {
border: 3px solid $white;
}
.profileStat {
border-left: none !important;
padding-right: 0 !important;
}
.profileStatValue {
font-size: 28px;
font-weight: $font-weight-base !important;
margin-bottom: 0;
}
.event {
background: $white;
border-radius: $border-radius;
padding: 20px 20px 0;
position: relative;
margin-bottom: $spacer;
box-shadow: var(--widget-shadow);
}
.eventTitle {
margin-bottom: 2px;
font-weight: $font-weight-semi-bold;
a {
text-decoration: none;
color: #7ca9dd;
}
small > a {
color: $text-muted;
}
}
.eventAvatar {
float: left;
margin-right: $spacer;
}
.eventAvatar > img {
width: 34px;
}
.eventBody {
font-size: 0.9rem;
margin-bottom: $spacer;
}
.eventFooter {
background-color: $gray-100;
margin: 20px -20px 0;
padding: 10px 20px;
}
.eventTimestamp {
color: $text-muted;
}
{
"name": "profile",
"version": "0.0.0",
"private": true,
"main": "./Profile.js"
}
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter, Redirect, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { Container, Alert, Button } from 'reactstrap';
import Widget from '../../components/Widget';
import { registerUser, registerError } from '../../actions/register';
import { loginUser } from '../../actions/user';
import microsoft from '../../images/microsoft.png';
import Login from '../login';
class Register extends React.Component {
static propTypes = {
dispatch: PropTypes.func.isRequired,
};
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
confirmPassword: ''
};
this.doRegister = this.doRegister.bind(this);
this.googleLogin = this.googleLogin.bind(this);
this.microsoftLogin = this.microsoftLogin.bind(this);
this.changeEmail = this.changeEmail.bind(this);
this.changePassword = this.changePassword.bind(this);
this.changeConfirmPassword = this.changeConfirmPassword.bind(this);
this.checkPassword = this.checkPassword.bind(this);
this.isPasswordValid = this.isPasswordValid.bind(this);
}
changeEmail(event) {
this.setState({email: event.target.value});
}
changePassword(event) {
this.setState({password: event.target.value});
}
changeConfirmPassword(event) {
this.setState({confirmPassword: event.target.value});
}
checkPassword() {
if (!this.isPasswordValid()) {
if (!this.state.password) {
this.props.dispatch(registerError("Password field is empty"));
} else {
this.props.dispatch(registerError("Passwords are not equal"));
}
setTimeout(() => {
this.props.dispatch(registerError());
}, 3 * 1000)
}
}
isPasswordValid() {
return this.state.password && this.state.password === this.state.confirmPassword;
}
doRegister(e) {
e.preventDefault();
if (!this.isPasswordValid()) {
this.checkPassword();
} else {
this.props.dispatch(registerUser({
creds: {
email: this.state.email,
password: this.state.password
},
history: this.props.history
}));
}
}
googleLogin() {
this.props.dispatch(loginUser({social: "google"}));
}
microsoftLogin() {
this.props.dispatch(loginUser({social: "microsoft"}));
}
render() {
const {from} = this.props.location.state || {from: {pathname: '/app'}}; // eslint-disable-line
// cant access login page while logged in
if (Login.isAuthenticated(localStorage.getItem('token'))) {
return (
<Redirect to={from}/>
);
}
return (
<div className="auth-page">
<Container>
<h5 className="auth-logo">
<i className="fa fa-circle text-gray"/>
Sing App
<i className="fa fa-circle text-warning"/>
</h5>
<Widget className="widget-auth mx-auto" title={<h3 className="mt-0">Create an account</h3>}>
<p className="widget-auth-info">
Please fill all fields below
</p>
<form className="mt" onSubmit={this.doRegister}>
{
this.props.errorMessage && (
<Alert className="alert-sm" color="danger">
{this.props.errorMessage}
</Alert>
)
}
<div className="form-group">
<input className="form-control no-border" value={this.state.email}
onChange={this.changeEmail} type="text" required name="email"
placeholder="Email"/>
</div>
<div className="form-group">
<input className="form-control no-border" value={this.state.password}
onChange={this.changePassword} type="password" required name="password"
placeholder="Password"/>
</div>
<div className="form-group">
<input className="form-control no-border" value={this.state.confirmPassword}
onChange={this.changeConfirmPassword} onBlur={this.checkPassword} type="password" required name="confirmPassword"
placeholder="Confirm"/>
</div>
<Button type="submit" color="inverse" className="auth-btn mb-3" size="sm">{this.props.isFetching ? 'Loading...' : 'Register'}</Button>
<p className="widget-auth-info">or sign up with</p>
<div className="social-buttons">
<Button onClick={this.googleLogin} color="primary" className="social-button mb-2">
<i className="social-icon social-google"/>
<p className="social-text">GOOGLE</p>
</Button>
<Button onClick={this.microsoftLogin} color="success" className="social-button">
<i className="social-icon social-microsoft"
style={{backgroundImage: `url(${microsoft})`}}/>
<p className="social-text">MICROSOFT</p>
</Button>
</div>
</form>
<p className="widget-auth-info">
Already have the account? Login now!
</p>
<Link className="d-block text-center" to="login">Enter the account</Link>
</Widget>
</Container>
<footer className="auth-footer">
2019 &copy; Sing App - React Admin Dashboard Template.
</footer>
</div>
);
}
}
function mapStateToProps(state) {
return {
isFetching: state.register.isFetching,
errorMessage: state.register.errorMessage,
};
}
export default withRouter(connect(mapStateToProps)(Register));
{
"name": "register",
"version": "0.0.0",
"private": true,
"main": "./Register.js"
}
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import Widget from '../../components/Widget';
class Subject extends PureComponent {
async componentDidUpdate() {
const isReceivingData = true;
}
render() {
const isReceivingData = true;
const display = isReceivingData ? 'none' : 'block';
const style = {
height: '1200px',
display: display
};
return (
<div>
<h1 className="page-title mb-xlg mt-lg">Photo <small> registration</small></h1>
<Widget
title={<h5><span className="fw-semi-bold">registrate photos</span></h5>}
fetchingData={true}>
<div>
<div className="text-center"style={style} />
<p className="fs-mini text-muted">
Stacked charts are excellent to track some dynamics within declared categories. An example of this
can be seen above. To create a Stacked Bar chart use <code>Bar(options)</code> and
set <code>stacked</code>, option to true.
</p>
</div>
</Widget>
</div>
);
}
}
function mapStateToProps(state) {
return {
labelData: state.labelData,
}
}
export default connect(mapStateToProps)(Subject);
{
"name": "Subject",
"version": "0.0.0",
"private": true,
"main": "./Subject.js"
}
import React from 'react';
import {
Breadcrumb,
BreadcrumbItem,
Progress,
Dropdown,
DropdownMenu,
DropdownToggle,
DropdownItem,
} from 'reactstrap';
import {
BootstrapTable,
TableHeaderColumn,
} from 'react-bootstrap-table';
import ReactTable from 'react-table';
import { reactTableData, reactBootstrapTableData } from './data';
import Widget from '../../../components/Widget';
import s from './Dynamic.modules.scss';
class Dynamic extends React.Component {
constructor(props) {
super(props);
this.state = {
reactTable: reactTableData(),
reactBootstrapTable: reactBootstrapTableData(),
};
}
renderSizePerPageDropDown = (props) => {
const limits = [];
props.sizePerPageList.forEach((limit) => {
limits.push(<DropdownItem key={limit} onClick={() => props.changeSizePerPage(limit)}>{ limit }</DropdownItem>);
});
return (
<Dropdown isOpen={props.open} toggle={props.toggleDropDown}>
<DropdownToggle color="default" caret>
{ props.currSizePerPage }
</DropdownToggle>
<DropdownMenu>
{ limits }
</DropdownMenu>
</Dropdown>
);
};
render() {
const options = {
sizePerPage: 10,
paginationSize: 3,
sizePerPageDropDown: this.renderSizePerPageDropDown,
};
function infoFormatter(cell) {
return (
<div>
<small>
Type:&nbsp;<span className="fw-semi-bold">{cell.type}</span>
</small>
<br />
<small>
Dimensions:&nbsp;<span className="fw-semi-bold">{cell.dimensions}</span>
</small>
</div>
);
}
function descriptionFormatter(cell) {
return (
<button className="btn-link">
{cell}
</button>
);
}
function progressFormatter(cell) {
return (
<Progress style={{ height: '15px' }} color={cell.type} value={cell.progress} />
);
}
function progressSortFunc(a, b, order) {
if (order === 'asc') {
return a.status.progress - b.status.progress;
}
return b.status.progress - a.status.progress;
}
function dateSortFunc(a, b, order) {
if (order === 'asc') {
return new Date(a.date).getTime() - new Date(b.date).getTime();
}
return new Date(b.date).getTime() - new Date(a.date).getTime();
}
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>Tables Dynamic</BreadcrumbItem>
</Breadcrumb>
<h2 className="page-title">Tables - <span className="fw-semi-bold">Dynamic</span></h2>
<Widget title={<h4>The <span className="fw-semi-bold">React</span> Way</h4>} collapse close>
<p>
Fully customizable Table. Built with <a href="https://allenfang.github.io/react-bootstrap-table/" target="_blank" rel="noopener noreferrer">react-bootstrap-table</a>
</p>
<BootstrapTable data={this.state.reactBootstrapTable} version="4" pagination options={options} search tableContainerClass={`table-striped table-hover ${s.bootstrapTable}`}>
<TableHeaderColumn className="width-50" columnClassName="width-50" dataField="id" isKey>
<span className="fs-sm">ID</span>
</TableHeaderColumn>
<TableHeaderColumn dataField="name" dataSort>
<span className="fs-sm">Name</span>
</TableHeaderColumn>
<TableHeaderColumn className="d-none d-md-table-cell" columnClassName="d-none d-md-table-cell" dataField="info" dataFormat={infoFormatter}>
<span className="fs-sm">Info</span>
</TableHeaderColumn>
<TableHeaderColumn className="d-none d-md-table-cell" columnClassName="d-none d-md-table-cell" dataField="description" dataFormat={descriptionFormatter}>
<span className="fs-sm">Description</span>
</TableHeaderColumn>
<TableHeaderColumn className="d-none d-md-table-cell" columnClassName="d-none d-md-table-cell" dataField="date" dataSort sortFunc={dateSortFunc}>
<span className="fs-sm">Date</span>
</TableHeaderColumn>
<TableHeaderColumn className="width-150" columnClassName="width-150" dataField="status" dataSort dataFormat={progressFormatter} sortFunc={progressSortFunc}>
<span className="fs-sm">Status</span>
</TableHeaderColumn>
</BootstrapTable>
</Widget>
<Widget title={<h4>React <span className="fw-semi-bold">Table</span></h4>} collapse close>
<p>
Simple table extension with sorting, filtering and pagination for React apps. Built with <a href="https://react-table.js.org/" target="_blank" rel="noopener noreferrer">react-table</a>
</p>
<ReactTable
data={this.state.reactTable}
filterable
columns={[
{
Header: 'NAME',
accessor: 'name',
},
{
Header: 'POSITION',
accessor: 'position',
},
{
Header: 'OFFICE',
accessor: 'office',
},
{
Header: 'EXT',
accessor: 'ext',
},
{
Header: 'START DATE',
accessor: 'startDate',
},
{
Header: 'SALARY',
accessor: 'salary',
},
]}
defaultPageSize={10}
className="-striped -highlight"
/>
</Widget>
</div>
);
}
}
export default Dynamic;
{
"name": "dynamic",
"version": "0.0.0",
"private": true,
"main": "./Dynamic.js"
}
@import '../../../styles/app';
.root {
// some styles
}
{
"name": "static",
"version": "0.0.0",
"private": true,
"main": "./Static.js"
}
import React, { Component } from 'react';
import cx from 'classnames';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Alert,
} from 'reactstrap';
import Widget from '../../../components/Widget';
class Alerts extends Component {
state = {
alerts: [{
id: 'al-1',
type: 'success',
msg: '<span class="fw-semi-bold">Success:</span> You successfully read this important alert message.',
visible: [true, true, true],
}, {
id: 'al-2',
type: 'info',
msg: '<span class="fw-semi-bold">Info:</span> This alert needs your attention, but it\'s not super important.',
visible: [true, true, true],
}, {
id: 'al-3',
type: 'warning',
msg: '<span class="fw-semi-bold"><strong>Warning:</strong></span> Best check yo self, you\'re not looking too good.',
visible: [true, true, true],
}, {
id: 'al-4',
type: 'danger',
msg: '<span class="fw-semi-bold">Danger:</span> Change this and that and try again. <a class="btn btn-default btn-xs float-right mr" href="#">Ignore</a> <a class="btn btn-danger btn-xs float-right mr-xs" href="#">Take this action</a>',
visible: [true, true, true],
}],
}
closeAlert(index, alertGroup) {
const newAlerts = [...this.state.alerts];
newAlerts[index].visible[alertGroup] = false;
this.setState({ alerts: newAlerts });
}
render() {
const { alerts } = this.state;
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Alerts</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Alerts</h1>
<Row>
<Col xs={12} md={8}>
<Widget
title={<h5>Alert <span className="fw-semi-bold">Messages</span></h5>}
close collapse
>
<p>Alerts are available for any length of text, as well as an optional dismiss button.</p>
{alerts.map((alert, index) => <Alert
key={alert.id} isOpen={alert.visible[0]} toggle={() => this.closeAlert(index, 0)}
color={alert.type}
>
<span dangerouslySetInnerHTML={{ __html: alert.msg }} />
</Alert>)}
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Transparent <span className="fw-semi-bold">Alerts</span></h5>}
close collapse
>
<p>Transparent alerts are available by adding <code>.alert-transparent</code> class.</p>
{alerts.map((alert, index) => <Alert
className="alert-transparent"
key={alert.id} isOpen={alert.visible[1]} toggle={() => this.closeAlert(index, 1)}
color={alert.type}
>
<span dangerouslySetInnerHTML={{ __html: alert.msg }} />
</Alert>)}
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Rounded <span className="fw-semi-bold">Alerts</span></h5>}
close collapse
>
<p>Rounded alerts are available by adding <code>.alert-rounded</code> class.</p>
{alerts.map((alert, index) => <Alert
className={cx('alert-rounded', { 'alert-transparent': index % 2 !== 1 })}
key={alert.id} isOpen={alert.visible[2]} toggle={() => this.closeAlert(index, 2)}
color={alert.type}
>
<span dangerouslySetInnerHTML={{ __html: alert.msg }} />
</Alert>)}
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Additional <span className="fw-semi-bold">Content</span></h5>}
close collapse
>
<p>Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</p>
<Alert color="success">
<h4 className="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message. This example text is going
to run a bit longer so that you can see how spacing within an alert works with this kind
of content.
</p>
<hr />
<p className="mb-0">
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
</Alert>
<Alert color="danger">
<h4 className="alert-heading">Well done!</h4>
<p>
Aww yeah, you successfully read this important alert message. This example text is going
to run a bit longer so that you can see how spacing within an alert works with this kind
of content.
</p>
</Alert>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default Alerts;
{
"name": "Alerts",
"version": "0.0.0",
"private": true,
"main": "./Alerts.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Badge,
} from 'reactstrap';
import Widget from '../../../components/Widget';
const Badges = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Badge</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Badge</h1>
<Row>
<Col xs={12} md={8}>
<Widget
title={<h5>Badge <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>
Badges scale to match the size of the immediate parent element by
using relative font sizing and em units.
</p>
<h1>Example heading <Badge color="primary">Primary</Badge></h1>
<h2>Example heading <Badge color="info">Info</Badge></h2>
<h3>Example heading <Badge color="warning">Warning</Badge></h3>
<h4>Example heading <Badge color="success">Success</Badge></h4>
<h5>Example heading <Badge color="danger">Danger</Badge></h5>
<h6>Example heading <Badge color="secondary">Secondary</Badge></h6>
<p>Badges can be used as part of links or buttons to provide a counter.</p>
<Button color="primary">Notifications <Badge color="danger">4</Badge></Button>
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Pill <span className="fw-semi-bold">Badges</span></h5>}
close collapse
>
<p>
Use the <code>pill</code> property to make badges more rounded
(with a larger border-radius and additional horizontal padding).
</p>
<Badge className="mr-xs" color="primary" pill>Primary</Badge>
<Badge className="mr-xs" color="info" pill>Info</Badge>
<Badge className="mr-xs" color="warning" pill>Warning</Badge>
<Badge className="mr-xs" color="success" pill>Success</Badge>
<Badge className="mr-xs" color="danger" pill>Danger</Badge>
<Badge className="mr-xs" color="secondary" pill>Secondary</Badge>
<Badge className="mr-xs" color="light" pill>Light</Badge>
<Badge className="mr-xs" color="dark" pill>Dark</Badge>
</Widget>
</Col>
<Col xs={12} md={8}>
<Widget
title={<h5>Pill <span className="fw-semi-bold">Badges</span></h5>}
close collapse
>
<p>
Using the contextual <code>href=&quot;&#35;&quot;</code> classes on
an <code>&lt;Badge&gt;</code> element quickly provide actionable badges with hover and focus states.
</p>
<Badge className="mr-xs" href="#" color="primary">Primary</Badge>
<Badge className="mr-xs" href="#" color="info">Info</Badge>
<Badge className="mr-xs" href="#" color="warning">Warning</Badge>
<Badge className="mr-xs" href="#" color="success">Success</Badge>
<Badge className="mr-xs" href="#" color="danger">Danger</Badge>
<Badge className="mr-xs" href="#" color="secondary">Secondary</Badge>
<Badge className="mr-xs" href="#" color="light">Light</Badge>
<Badge className="mr-xs" href="#" color="dark">Dark</Badge>
</Widget>
</Col>
</Row>
</div>
);
export default Badges;
{
"name": "Badge",
"version": "0.0.0",
"private": true,
"main": "./Badge.js"
}
{
"name": "UIButtons",
"version": "0.0.0",
"private": true,
"main": "./Buttons.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Badge,
Card,
CardBody,
CardTitle,
CardText,
CardImg,
} from 'reactstrap';
import lifestyleImg from '../../../images/cards/lifestyle.jpg';
import isometricImg from '../../../images/cards/isometric.jpg';
import mountainsImg from '../../../images/cards/mountains.jpeg';
import reactnativeImg from '../../../images/cards/rns.png';
const Cards = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Card</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Cards - <span className="fw-semi-bold">Examples</span></h1>
<p>
A card is a flexible and extensible content container. It includes options for headers and footers,
a wide variety of content, contextual background colors, and powerful display options. If you’re
familiar with Bootstrap 3, cards replace its old panels, wells, and thumbnails. Similar functionality
to those components is available as modifier classes for cards.
</p>
<Row>
<Col>
<Card
className="background-cover border-0 mb-xlg"
style={{ backgroundImage: `url(${lifestyleImg})` }}
>
<CardBody className="text-white">
<span>13 Mar</span>
<h3 className="mt-lg">Lifestyle brand</h3>
<p className="w-75">A lifestyle brand is a company that markets its products or services to embody the
interests, attitudes, and opinions of a group or a culture. Lifestyle brands
seek to inspire, guide, and motivate people, with the goal of their products
contributing to the definition of the consumer&apos;s way of life.</p>
<Button className="btn-rounded-f mt-lg" color="danger">Full Article</Button>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12} sm={6} md={4}>
<Card className="border-0 mb-xlg">
<CardImg top width="100%" src={isometricImg} alt="Card image cap" />
<CardBody>
<CardTitle>Isometric design</CardTitle>
<CardText>
Isometric projection is a method for visually representing three-dimensional in two
dimensions in technical and engineering drawings.
</CardText>
<div className="w-100 text-center">
<Button className="btn-rounded-f" color="primary">Full Article</Button>
</div>
</CardBody>
</Card>
</Col>
<Col xs={12} sm={6} md={4}>
<Card className="mb-xlg border-0">
<CardBody>
<button className="btn-link fw-semi-bold text-success">Avg Rating</button>
<button className="btn-link fw-semi-bold text-muted ml-sm">All Time</button>
<hr />
<div className="d-flex justify-content-between mb-lg">
<div className="text-warning">
<i className="fa fa-star mr-xs" />
<i className="fa fa-star mr-xs" />
<i className="fa fa-star mr-xs" />
<i className="fa fa-star mr-xs" />
<i className="fa fa-star" />
</div>
<span className="text-muted"><small>342 REVIEWS</small></span>
</div>
<div className="mb-lg">
<h3 className="text-success mb-0">69%</h3>
of customers recomend this product
</div>
<Button className="btn-rounded-f" color="success">Write a Review</Button>
</CardBody>
</Card>
<Card className="mb-xlg border-0" style={{ position: 'relative' }}>
<CardImg top width="100%" src={mountainsImg} alt="Card image cap" />
<Badge className="mt-lg fw-thin rounded-0" color="success" style={{ position: 'absolute' }}>New</Badge>
<CardBody>
<CardTitle>Weekly Inspiration</CardTitle>
<hr />
<CardText>
There are at least 109 mountains on Earts with elevations greeter than 7,200 meters
</CardText>
<Button className="border-0" color="default">Read More</Button>
</CardBody>
</Card>
</Col>
<Col xs={12} sm={6} md={4}>
<Card className="border-0">
<CardImg top width="100%" src={reactnativeImg} alt="Card image cap" />
<CardBody>
<small>Technology</small><br />
<CardTitle className="mb mt-xs">
React Native Starter
</CardTitle>
<hr />
<div className="w-100 d-flex justify-content-between align-items-center">
<span className="text-muted fw-semi-bold">from $49.95</span>
<Button color="info">Read more</Button>
</div>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
export default Cards;
{
"name": "Card",
"version": "0.0.0",
"private": true,
"main": "./Card.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
UncontrolledCarousel,
} from 'reactstrap';
import firstSlide from '../../../images/slides/1.jpg';
import secondSlide from '../../../images/slides/2.jpg';
import thirdSlide from '../../../images/slides/3.jpg';
const carouselItems = [
{ src: firstSlide, caption: '' },
{ src: secondSlide, caption: '' },
{ src: thirdSlide, caption: '' },
];
const Carousel = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Carousel</BreadcrumbItem>
</Breadcrumb>
<p>
The carousel is a slideshow for cycling through a series of content, built with
CSS 3D transforms and a bit of JavaScript. It works with a series of images, text,
or custom markup. It also includes support for previous/next controls and indicators.
</p>
<Row>
<Col>
<UncontrolledCarousel captionTex={null} items={carouselItems} />
</Col>
</Row>
</div>
);
export default Carousel;
{
"name": "Carousel",
"version": "0.0.0",
"private": true,
"main": "./Carousel.js"
}
{
"name": "UIIcons",
"version": "0.0.0",
"private": true,
"main": "./Icons.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Jumbotron,
Container,
} from 'reactstrap';
const Jumb = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Jumbotron</BreadcrumbItem>
</Breadcrumb>
<Jumbotron fluid>
<Container fluid>
<h1 className="display-3">Fluid jumbotron</h1>
<p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</Container>
</Jumbotron>
<Row>
<Col xs={12} md={8}>
<Jumbotron>
<h1 className="display-3">Hello, world!</h1>
<p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.</p>
<hr className="my-2" />
<p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
<p className="lead">
<Button color="primary">Learn More</Button>
</p>
</Jumbotron>
</Col>
</Row>
</div>
);
export default Jumb;
{
"name": "Jumbotron",
"version": "0.0.0",
"private": true,
"main": "./Jumbotron.js"
}
import React from 'react';
import {
Row, Col,
} from 'reactstrap';
import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
import SortableTree from 'react-sortable-tree';
import Widget from '../../../components/Widget';
import './ListGroups.scss';
const SortableItem = SortableElement(({ value }) => <li className="list-group-item">
<i className="fa fa-sort" />
<button className="close flex-last ml-auto" data-dismiss="alert">&times;</button>
&nbsp;&nbsp;&nbsp; {value.id} &nbsp;&nbsp;&nbsp;
{value.text}
</li>);
const SortableList = SortableContainer(({ items }) => (
<ul className="list-group list-group-sortable mt-xs">
{items.map((value, index) => (
<SortableItem key={`item-${index.toString()}`} index={index} value={value} />
))}
</ul>
));
const NestableItem = SortableElement(({ value }) => {
if (value.children) {
return (
<li className="dd-item">
<div className="dd-handle" data-id={value.id}> {value.text} </div>
<ol className="dd-list">
{value.children.map((child, index) => (
<NestableItem key={`nest-${index.toString()}`} index={index} value={child} />
))}
</ol>
</li>);
}
return (
<li className="dd-item">
<div className="dd-handle" data-id={value.id}> {value.text} </div>
</li>
);
});
class ListGroups extends React.Component {
constructor() {
super();
this.state = {
nestableFirstItems: [{ id: 1, title: 'Item 1' }, {
id: 2,
expanded: true,
title: 'Item 2',
children: [{ id: 3, title: 'Item 3' }, { id: 4, title: 'Item 4' }, {
id: 5,
title: 'Item 5',
expanded: true,
children: [{ id: 6, title: 'Item 6' }, {
id: 7, title: 'Item 7',
}, {
id: 8, title: 'Item 8',
}],
}, { id: 9, title: 'Item 9' }],
}],
nestableSecondItems: [{ id: 13, title: 'Item 13' }, { id: 14, title: 'Item 14' }, {
id: 15,
expanded: true,
title: 'Item 15',
children: [{ id: 16, title: 'Item 16' }, { id: 17, title: 'Item 17' }, {
id: 18, title: 'Item 18',
}],
}],
sortableList: [{
id: '03', text: ' Barnard\'s Star',
}, {
id: '01', text: 'The Sun',
}, {
id: '04', text: 'Wolf 359',
}, {
id: '02', text: 'Proxima Centauri',
}, {
id: '05', text: 'Lalande 21185',
}],
};
}
onSortEnd = ({ oldIndex, newIndex }) => {
this.setState({
sortableList: arrayMove(this.state.sortableList, oldIndex, newIndex),
});
};
render() {
return (
<div>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">UI List Groups</li>
</ol>
<h1 className="page-title">Lists - <span className="fw-semi-bold">Sortable Groups</span>
</h1>
<Widget
title={<h4> Grouped <span className="fw-semi-bold">Lists</span></h4>}
close refresh settings
>
<h3>Closest <span className="fw-semi-bold">Stars</span></h3>
<p>
Try to play around with this list. Are you ready to pass an exam on astronomy?
</p>
<SortableList items={this.state.sortableList} onSortEnd={this.onSortEnd} />
</Widget>
<Widget
title={<h3>Nestable <span className="fw-semi-bold">List</span></h3>}
close refresh settings
>
<p className="fs-mini">
There is a scientific theory that you can arrange this list in such way that there will
be no more saddness
in the whole world. Can you? Touch devices supported
</p>
<Row className="nestable">
<Col md="6" xs="12" className="mb-xs">
<SortableTree
treeData={this.state.nestableFirstItems}
onChange={nestableFirstItems => this.setState({ nestableFirstItems })}
/>
</Col>
<Col md="6">
<SortableTree
treeData={this.state.nestableSecondItems}
onChange={nestableSecondItems => this.setState({ nestableSecondItems })}
/>
</Col>
</Row>
</Widget>
</div>
);
}
}
export default ListGroups;
{
"name": "UIListGroups",
"version": "0.0.0",
"private": true,
"main": "./ListGroups.js"
}
{
"name": "Modal",
"version": "0.0.0",
"private": true,
"main": "./Modal.js"
}
import React, { Component } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Nav,
NavItem,
NavLink,
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from 'reactstrap';
import Widget from '../../../components/Widget';
class NavExamples extends Component {
state = {
isDropdownOpened: false,
};
toggleDropdown = () => {
this.setState(prevState => ({
isDropdownOpened: !prevState.isDropdownOpened,
}));
}
render() {
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Nav</BreadcrumbItem>
</Breadcrumb>
<Row>
<Col xs={12} md={6}>
<Widget
title={<h5>Base <span className="fw-semi-bold">Nav</span></h5>}
close collapse
>
<p>
Navigation available in Bootstrap share general markup and styles,
from the base .nav class to the active and disabled states. Swap
modifier classes to switch between each style.
</p>
<div className="bg-light p-3">
<Nav>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
<pre className="bg-light border-0 w-100 h-100">
<code className="text-danger">{'<Nav>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Another Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink disabled href="#">\n'}</code>
<code>{' Disabled Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-danger">{'</Nav>'}</code>
</pre>
</div>
<h5 className="mt">With dropdown</h5>
<Nav className="bg-light p-2">
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<Dropdown isOpen={this.state.isDropdownOpened} toggle={this.toggleDropdown}>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Tabs & Pills</h5>}
close collapse
>
<p>
Takes the basic <code>&lt;Nav&gt;</code> from above and adds the <code>tabs</code> property to generate a
tabbed interface. Use them to create tabbable regions with our tab
JavaScript plugin.
</p>
<div className="bg-light p-3">
<Nav tabs>
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
<pre className="bg-light border-0 w-100 h-100">
<code className="text-danger">{'<Nav tabs>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink href="#">\n'}</code>
<code>{' Another Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-info">{' <NavItem>\n'}</code>
<code className="text-warning">{' <NavLink disabled href="#">\n'}</code>
<code>{' Disabled Link\n'}</code>
<code className="text-warning">{' </NavLink>\n'}</code>
<code className="text-info">{' </NavItem>\n'}</code>
<code className="text-danger">{'</Nav>'}</code>
</pre>
</div>
<p className="mt">Do the same thing with the <code>pills</code> property.</p>
<div className="bg-light p-3">
<Nav pills>
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default NavExamples;
{
"name": "Nav",
"version": "0.0.0",
"private": true,
"main": "./Nav.js"
}
import React, { Component } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Navbar,
NavbarBrand,
NavbarToggler,
Collapse,
Nav,
NavItem,
NavLink,
} from 'reactstrap';
import Widget from '../../../components/Widget';
class NavbarExamples extends Component {
state = {
navs: [false, false, false, false],
}
toggle(id) {
const newState = Array(4).fill(false);
if (!this.state.navs[id]) {
newState[id] = true;
}
this.setState({ navs: newState });
}
render() {
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Navbar</BreadcrumbItem>
</Breadcrumb>
<Row>
<Col xs={12} md={9}>
<Widget
title={<h5>Navbar <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>Here’s what you need to know before getting started with the navbar:</p>
<ui>
<li>Navbars require a wrapping <code>&lt;Navbar&gt;</code> with <code>expand=&quot;*&quot;</code> for
responsive collapsing and color scheme classes.</li>
<li>Navbars and their contents are fluid by default. Use optional containers
to limit their horizontal width.</li>
<li>Use our spacing and flex utility classes for controlling spacing and alignment within navbars.</li>
<li>Navbars are responsive by default, but you can easily modify them to change that. Responsive
behavior depends on our Collapse JavaScript plugin.</li>
<li>Navbars are hidden by default when printing. Force them to be printed by adding <code>.d-print</code>
to the <code>.navbar</code>. See the display utility class.</li>
</ui>
<Navbar className="px-2 mt-lg" color="light" light expand="md">
<NavbarBrand href="/">Navbar</NavbarBrand>
<NavbarToggler className="ml-auto" onClick={() => this.toggle(0)} />
<Collapse isOpen={this.state.navs[0]} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>Features</NavLink>
</NavItem>
<NavItem>
<NavLink>Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</Widget>
</Col>
<Col xs={12} md={9}>
<Widget
title={<h5>Navbar <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>Theming the navbar has never been easier thanks to the combination of
theming classes and background-color utilities. Choose from <code>color=&quot;light&quot;</code>
for use with light background colors, or <code>color=&quot;dark&quot;</code> for dark background
colors. Then, customize with <code>.bg-*</code> utilities.</p>
<Navbar className="px-2 mt-lg" color="dark" dark expand="md">
<NavbarBrand href="/">Navbar</NavbarBrand>
<NavbarToggler className="ml-auto" onClick={() => this.toggle(1)} />
<Collapse isOpen={this.state.navs[1]} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>Features</NavLink>
</NavItem>
<NavItem>
<NavLink>Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<Navbar className="px-2 mt-lg" color="primary" dark expand="md">
<NavbarBrand href="/">Navbar</NavbarBrand>
<NavbarToggler className="ml-auto" onClick={() => this.toggle(2)} />
<Collapse isOpen={this.state.navs[2]} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>Features</NavLink>
</NavItem>
<NavItem>
<NavLink>Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<Navbar className="px-2 mt-lg" color="light" light expand="md">
<NavbarBrand href="/">Navbar</NavbarBrand>
<NavbarToggler className="ml-auto" onClick={() => this.toggle(3)} />
<Collapse isOpen={this.state.navs[3]} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink>Home</NavLink>
</NavItem>
<NavItem>
<NavLink>Features</NavLink>
</NavItem>
<NavItem>
<NavLink>Pricing</NavLink>
</NavItem>
<NavItem>
<NavLink disabled>Disabled</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</Widget>
</Col>
</Row>
</div>
);
}
}
export default NavbarExamples;
{
"name": "Navbar",
"version": "0.0.0",
"private": true,
"main": "./Navbar.js"
}
import React from 'react';
import {
Row, Col, Button,
} from 'reactstrap';
/* eslint-disable */
import 'imports-loader?$=jquery,this=>window!messenger/build/js/messenger';
/* eslint-enable */
import Widget from '../../../components/Widget';
import s from './Notifications.module.scss';
// todo @franckeeva what about server side rendering? this will fail unless launched as lazy route
const Messenger = window.Messenger;
/* eslint-disable */
function initializationMessengerCode() {
(function () {
let $,
FlatMessage,
spinner_template,
__hasProp = {}.hasOwnProperty,
__extends = function (child, parent) {
for (const key in parent) {
if (__hasProp.call(parent, key)) child[key] = parent[key];
}
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
return child;
};
$ = jQuery;
spinner_template = '<div class="messenger-spinner">\n <span class="messenger-spinner-side messenger-spinner-side-left">\n <span class="messenger-spinner-fill"></span>\n </span>\n <span class="messenger-spinner-side messenger-spinner-side-right">\n <span class="messenger-spinner-fill"></span>\n </span>\n</div>';
FlatMessage = (function (_super) {
__extends(FlatMessage, _super);
function FlatMessage() {
return FlatMessage.__super__.constructor.apply(this, arguments);
}
FlatMessage.prototype.template = function (opts) {
let $message;
$message = FlatMessage.__super__.template.apply(this, arguments);
$message.append($(spinner_template));
return $message;
};
return FlatMessage;
}(Messenger.Message));
Messenger.themes.air = {
Message: FlatMessage,
};
}).call(window);
}
/* eslint-enable */
class Notifications extends React.Component {
constructor() {
super();
this.addSuccessNotification = this.addSuccessNotification.bind(this);
this.addInfoNotification = this.addInfoNotification.bind(this);
this.addErrorNotification = this.addErrorNotification.bind(this);
this.toggleLocation = this.toggleLocation.bind(this);
this.state = {
locationClasses: 'messenger-fixed messenger-on-bottom messenger-on-right',
};
}
componentDidMount() {
initializationMessengerCode();
Messenger.options = {
extraClasses: this.state.locationClasses,
theme: 'air',
};
Messenger().post('Thanks for checking out Messenger!');
}
addSuccessNotification() {
Messenger().post({
extraClasses: this.state.locationClasses,
message: 'Showing success message was successful!',
type: 'success',
showCloseButton: true,
});
return false;
}
addInfoNotification() {
const msg = Messenger().post({
extraClasses: this.state.locationClasses,
message: 'Launching thermonuclear war...',
actions: {
cancel: {
label: 'cancel launch',
action: () => msg.update({
message: 'Thermonuclear war averted', type: 'success', actions: false,
}),
},
},
});
return false;
}
addErrorNotification() {
let i = 0;
Messenger().run({
errorMessage: 'Error destroying alien planet',
successMessage: 'Alien planet destroyed!',
extraClasses: this.state.locationClasses,
action(opts) {
/* eslint-disable */
if (++i < 3) {
return opts.error({
status: 500,
readyState: 0,
responseText: 0,
});
}
/* eslint-enable */
return opts.success();
},
});
}
toggleLocation(vertical = 'top', horizontal = '') {
let className = `messenger-fixed messenger-on-${vertical}`;
className += (horizontal === '') ? '' : ` messenger-on-${horizontal}`;
this.setState({
locationClasses: className,
});
Messenger.options = {
extraClasses: className,
theme: 'air',
};
Messenger();
}
render() {
return (
<div className={s.root}>
<ol className="breadcrumb">
<li className="breadcrumb-item">YOU ARE HERE</li>
<li className="breadcrumb-item active">UI Notifications</li>
</ol>
<h1 className="page-title">Messages - <span className="fw-semi-bold">Notifications</span>
</h1>
<Widget title={<h6> Messenger </h6>} close collapse settings>
<Row>
<Col lg="4" xs="12">
<h5 className="m-t-1">Layout options</h5>
<p>There are few position options available for notifications. You can click any of
them
to change notifications position:</p>
<div className="location-selector">
{ /* eslint-disable */}
<div
className="bit top left" onClick={() => {
this.toggleLocation('top', 'left');
}}
/>
<div
className="bit top right" onClick={() => {
this.toggleLocation('top', 'right');
}}
/>
<div
className="bit top" onClick={() => {
this.toggleLocation('top', '');
}}
/>
<div
className="bit bottom left" onClick={() => {
this.toggleLocation('bottom', 'left');
}}
/>
<div
className="bit bottom right" onClick={() => {
this.toggleLocation('bottom', 'right');
}}
/>
<div
className="bit bottom" onClick={() => {
this.toggleLocation('bottom', '');
}}
/>
{ /* eslint-enable */}
</div>
</Col>
<Col lg="4" xs="12">
<h5 className="m-t-1">Notification Types</h5>
<p>Different types of notifications for lost of use cases. Custom classes are also
supported.</p>
<p><Button color="info" id="show-info-message" onClick={this.addInfoNotification}>Info
Message</Button></p>
<p><Button color="danger" id="show-error-message" onClick={this.addErrorNotification}>Error
+ Retry Message</Button></p>
<p><Button
color="success" id="show-success-message" onClick={this.addSuccessNotification}
>Success
Message</Button></p>
</Col>
<Col lg="4" xs="12">
<h5 className="m-t-1">Dead Simple Usage</h5>
<p>Just few lines of code to instantiate a notifications object. Does not require
passing any options:</p>
<pre><code>{'Messenger().post("Thanks for checking out Messenger!");'}</code></pre>
<p>More complex example:</p>
<pre>
<code>{'\nMessenger().post({\n message: \'There was an explosion while processing your request.\',\n type: \'error\',\n showCloseButton: true\n});\n\n'}
</code>
</pre>
</Col>
</Row>
</Widget>
</div>
);
}
}
export default Notifications;
@import '../../../styles/app';
.root {
:global {
.location-selector {
width: 100%;
height: 220px;
border: 1px dashed #bbb;
background-color: $white;
position: relative;
}
.location-selector .bit {
@include transition(background-color 0.15s ease-in-out);
background-color: $gray-300;
cursor: pointer;
position: absolute;
}
.location-selector .bit:hover {
background-color: $gray-400;
}
.location-selector .bit.top,
.location-selector .bit.bottom {
height: 25%;
width: 40%;
margin: 0 30%;
}
.location-selector .bit.top {
top: 0;
}
.location-selector .bit.bottom {
bottom: 0;
}
.location-selector .bit.right,
.location-selector .bit.left {
height: 20%;
width: 20%;
margin-left: 0;
margin-right: 0;
}
.location-selector .bit.right {
right: 0;
}
.location-selector .bit.left {
left: 0;
}
}
}
{
"name": "UINotifications",
"version": "0.0.0",
"private": true,
"main": "./Notifications.js"
}
import React, { Component } from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Button,
Popover,
PopoverHeader,
PopoverBody,
Tooltip,
} from 'reactstrap';
import Widget from '../../../components/Widget';
class PopoverExamples extends Component {
state = {
tooltips: [false, false, false, false, false, false],
popovers: [false, false, false, false, false, false],
tooltipOpen: false,
}
toggle(id, field) {
const newState = [...this.state[field]];
newState.fill(false);
if (!this.state[field][id]) {
newState[id] = true;
}
this.setState({
[field]: newState,
});
}
render() {
return (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Badge</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Badge</h1>
<Row>
<Col xs={12} md={6}>
<Widget
className="mb-xlg"
title={<h5>Popover <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<Button
id="p-1" className="mr-xs" size="lg" color="danger"
onClick={() => this.toggle(0, 'popovers')}
>Click to toggle popover</Button>
<Button
id="p-2" color="danger" disabled
onClick={() => this.toggle(1, 'popovers')}
>Disabled button</Button>
</Widget>
<Widget
title={<h5>Popover <span className="fw-semi-bold">Directions</span></h5>}
close collapse
>
<Button
id="p-3" className="mr-xs mb-xs" color="info"
onClick={() => this.toggle(2, 'popovers')}
>Popover on top</Button>
<Button
id="p-4" className="mr-xs mb-xs" color="warning"
onClick={() => this.toggle(3, 'popovers')}
>Popover on right</Button>
<Button
id="p-5" className="mr-xs mb-xs" color="inverse"
onClick={() => this.toggle(4, 'popovers')}
>Popover on bottom</Button>
<Button
id="p-6" className="mr-xs mb-xs" color="default"
onClick={() => this.toggle(5, 'popovers')}
>Popover on left</Button>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
className="mb-xlg"
title={<h5>Tooltip <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<Button id="t-1" className="mr-sm" size="lg" color="success">Tooltip</Button>
<Button id="t-2" color="success" disabled>Disabled button</Button>
</Widget>
<Widget
title={<h5>Tooltip <span className="fw-semi-bold">Directions</span></h5>}
close collapse
>
<Button id="t-3" className="mr-xs mb-xs" color="info">Tooltip on top</Button>
<Button id="t-4" className="mr-xs mb-xs" color="warning">Tooltip on right</Button>
<Button id="t-5" className="mr-xs mb-xs" color="inverse">Tooltip on bottom</Button>
<Button id="t-6" className="mr-xs mb-xs" color="default">Tooltip on left</Button>
</Widget>
</Col>
</Row>
{/* Popovers & Tooltips */}
<Popover placement="top" isOpen={this.state.popovers[0]} target="p-1" toggle={() => this.toggle(0, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="top" isOpen={this.state.popovers[1]} target="p-2" toggle={() => this.toggle(1, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="top" isOpen={this.state.popovers[2]} target="p-3" toggle={() => this.toggle(2, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="right" isOpen={this.state.popovers[3]} target="p-4" toggle={() => this.toggle(3, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="bottom" isOpen={this.state.popovers[4]} target="p-5" toggle={() => this.toggle(4, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Popover placement="left" isOpen={this.state.popovers[5]} target="p-6" toggle={() => this.toggle(5, 'popovers')}>
<PopoverHeader>Popover Title</PopoverHeader>
<PopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</PopoverBody>
</Popover>
<Tooltip placement="top" isOpen={this.state.tooltips[0]} toggle={() => this.toggle(0, 'tooltips')} target="t-1">
Hello world!
</Tooltip>
<Tooltip placement="top" isOpen={this.state.tooltips[1]} toggle={() => this.toggle(1, 'tooltips')} target="t-2">
Hello world!
</Tooltip>
<Tooltip placement="top" isOpen={this.state.tooltips[2]} toggle={() => this.toggle(2, 'tooltips')} target="t-3">
Top
</Tooltip>
<Tooltip placement="right" isOpen={this.state.tooltips[3]} toggle={() => this.toggle(3, 'tooltips')} target="t-4">
Right
</Tooltip>
<Tooltip placement="bottom" isOpen={this.state.tooltips[4]} toggle={() => this.toggle(4, 'tooltips')} target="t-5">
Bottom
</Tooltip>
<Tooltip placement="left" isOpen={this.state.tooltips[5]} toggle={() => this.toggle(5, 'tooltips')} target="t-6">
Left
</Tooltip>
</div>
);
}
}
export default PopoverExamples;
{
"name": "Popovers",
"version": "0.0.0",
"private": true,
"main": "./Popovers.js"
}
import React from 'react';
import {
Row,
Col,
Breadcrumb,
BreadcrumbItem,
Progress,
} from 'reactstrap';
import Widget from '../../../components/Widget';
const ProgressExamples = () => (
<div>
<Breadcrumb>
<BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
<BreadcrumbItem active>UI Progress</BreadcrumbItem>
</Breadcrumb>
<h1 className="page-title">Progress</h1>
<Row>
<Col xs={12} md={6}>
<Widget
title={<h5>Progress <span className="fw-semi-bold">Example</span></h5>}
close collapse
>
<p>
Badges scale to match the size of the immediate parent element by
using relative font sizing and em units.
</p>
<Progress className="mb-sm" value="25" />
<Progress className="mb-sm" value="50" />
<Progress className="mb-sm" value="75" />
<Progress value="100" />
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Backgrounds</h5>}
close collaple
>
<p>
Use background utility classes to change the appearance of
individual progress bars.
</p>
<Progress className="mb-sm" value="25" color="info" />
<Progress className="mb-sm" value="50" color="warning" />
<Progress className="mb-sm" value="75" color="danger" />
<Progress value="100" color="success" />
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Labels</h5>}
close collapse
>
<p>
Add labels to your progress bars by placing text within the <code>&lt;Progress&gt;</code>
</p>
<Progress className="mb-sm" value="25">25%</Progress>
<Progress className="mb-sm" value="100" color="danger">Something was wrong!</Progress>
<Progress value="100" color="success">Completed!</Progress>
</Widget>
</Col>
<Col xs={12} md={6}>
<Widget
title={<h5>Size</h5>}
close collapse
>
<p>
We only set a height value on the <code>&lt;Progress&gt;</code>, so if you change that value the inner
bar will automatically resize accordingly. Also <code>.progress-sm</code> is available.
</p>
<Progress className="progress-sm mb-sm" value="25" color="dark">25%</Progress>
<Progress className="mb-sm" value="50" color="gray">50%</Progress>
<Progress value="75" color="secondary" style={{ height: '30px' }}>75%</Progress>
</Widget>
</Col>
<Col xs={12}>
<Widget
title={<h5><span className="fw-semi-bold">Striped</span> Progress</h5>}
close collapse
>
<Row>
<Col xs={12} md={6}>
<p>
Add <code>striped</code> property to any <code>&lt;Progress&gt;</code> to
apply a stripe via CSS gradient over the progress bar’s background color.
</p>
<Progress striped className="mb-sm" value="10" />
<Progress striped className="mb-sm" value="25" color="success" />
<Progress striped className="mb-sm" value="50" color="info" />
<Progress striped className="mb-sm" value="75" color="warning" />
<Progress striped value="100" color="danger" />
</Col>
<Col xs={12} md={6}>
<p>
The striped gradient can also be animated. Add <code>animated</code> property
to <code>&lt;Progress&gt;</code> to animate the stripes right to left via CSS3 animations.
</p>
<Progress animated striped className="mb-sm" value="10" color="danger" />
<Progress animated striped className="mb-sm" value="25" color="warning" />
<Progress animated striped className="mb-sm" value="50" color="info" />
<Progress animated striped className="mb-sm" value="75" color="success" />
<Progress animated striped value="100" />
</Col>
</Row>
</Widget>
</Col>
</Row>
</div>
);
export default ProgressExamples;
{
"name": "Progress",
"version": "0.0.0",
"private": true,
"main": "./Progress.js"
}
{
"name": "UITabsAccordion",
"version": "0.0.0",
"private": true,
"main": "./TabsAccordion.js"
}
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {
Row,
Col,
} from 'reactstrap';
import Widget from '../../components/Widget';
import s from './VideoAnalysis.module.scss';
class Dashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
checkedArr: [false, false, false],
};
}
async componentDidUpdate() {
const isReceivingData = true;
}
static propTypes = {
visits: PropTypes.any,
performance: PropTypes.any,
};
render() {
return (
<div className={s.root}>
<h1 className="page-title">Video Analysis <small><small>Performance</small></small></h1>
<Row>
<Col lg={9} xs={12}>
<Widget
title={<h5> Registrate <span className="fw-semi-bold">Video</span></h5>}
>
<div>
<div className="text-center" style={{ height: '300px' }} />
<p className="fs-mini text-muted">
</p>
</div>
</Widget>
</Col>
</Row>
<Row>
<Col lg={9} xs={12}>
<Widget
title={<h5><span className="fw-semi-bold">Results</span></h5>}
fetchingData={true}
>
<div>
<div className="text-center" style={{ height: '300px' }} />
<p className="fs-mini text-muted">
</p>
</div>
</Widget>
</Col>
</Row>
</div>
);
}
}
function mapStateToProps(state) {
return {
filters: state.filters,
}
}
export default connect(mapStateToProps)(Dashboard);
......@@ -21,3 +21,8 @@
}
}
}
.visitElement {
h6 {
font-size: 115%;
}
}
\ No newline at end of file
......
@import '../../styles/app';
/* Post User */
.post-user {
position: relative;
@include clearfix();
img {
border: 3px solid white;
}
}
/* Tags */
.tags {
padding-left: 0;
list-style: none;
@include clearfix();
> li {
float: left;
> a {
padding: 2px 8px;
font-size: $font-size-mini;
border-radius: 6px;
border: 1px solid white;
color: inherit;
text-decoration: none;
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.fa {
font-size: 8px;
margin-right: 3px;
opacity: 0.8;
}
}
}
> li + li > a {
margin-left: 6px;
}
}
.widget-top-overflow > img + .tags {
position: absolute;
bottom: 0;
right: 0;
margin: 20px;
}
/* Weather */
.widget-image .forecast {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
/* Chat List Group */
.widget-chat-list-group {
padding-top: $spacer/2;
.list-group-item {
margin-left: $widget-padding-horizontal;
margin-right: $widget-padding-horizontal;
padding: 0;
border: 0;
display: flex;
div {
width: 100%;
}
&:nth-child(even) {
margin-left: 75px;
}
&:hover {
background: none;
}
& + .list-group-item {
margin-top: 20px;
}
.thumb,
.thumb-sm {
float: left;
margin-right: 15px;
}
.time {
font-size: $font-size-sm;
color: $text-muted;
}
.sender {
margin-top: 5px;
margin-bottom: 5px;
font-size: $font-size-mini;
font-weight: $font-weight-normal;
color: theme-color('primary');
}
.body {
font-size: $font-size-mini;
margin-bottom: 0;
}
&.on-right {
div {
padding-right: 1rem;
}
.thumb,
.thumb-sm {
order: 1;
margin-left: auto;
margin-right: 0;
}
.time {
float: left;
}
.sender {
text-align: right;
}
}
}
}
import React from 'react';
import Rickshaw from 'rickshaw';
import $ from 'jquery';
import {
Row, Col,
} from 'reactstrap';
import Sparklines from '../../../../components/Sparklines';
import s from './ChangesChart.module.scss';
class ChangesChart extends React.Component {
constructor(prop) {
super(prop);
this.state = {
rickshawGraph: null,
sparklineData: [],
sparklineOptions: {},
};
this.onResizeRickshaw = this.onResizeRickshaw.bind(this);
this.initRickshaw = this.initRickshaw.bind(this);
this.initSparkline();
}
componentDidMount() {
this.initRickshaw();
window.addEventListener('resize', this.onResizeRickshaw);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResizeRickshaw);
}
onResizeRickshaw() {
this.state.graph.configure({ height: 100 });
this.state.graph.render();
}
initRickshaw() {
const seriesData = [[], []];
const random = new Rickshaw.Fixtures.RandomData(32);
for (let i = 0; i < 32; i += 1) {
random.addData(seriesData);
}
// eslint-disable-next-line
this.state.graph = new Rickshaw.Graph({
element: this.rickshawChart,
height: '100',
renderer: 'multi',
series: [{
name: 'pop',
data: seriesData.shift().map(d => ({ x: d.x, y: d.y })),
color: '#7bd47a', // (#64bd63, 0.9)
renderer: 'bar',
gapSize: 2,
min: 'auto',
strokeWidth: 3,
}, {
name: 'humidity',
data: seriesData.shift()
.map(d => ({ x: d.x, y: ((d.y * (Math.random() * 0.5)) + 30.1) })),
renderer: 'line',
color: '#fff',
gapSize: 2,
min: 'auto',
strokeWidth: 3,
}],
});
const hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: this.state.graph,
xFormatter: x => new Date(x * 1000).toString(),
});
hoverDetail.show();
this.state.graph.render();
}
initSparkline() {
const data = [3, 6, 2, 4, 5, 8, 6, 8];
const dataMax = Math.max.apply(null, data);
const backgroundData = data.map(() => dataMax);
// eslint-disable-next-line
this.state.sparklineData = [backgroundData, data];
// eslint-disable-next-line
this.state.sparklineOptions = [
{
type: 'bar',
height: 26,
barColor: '#eee',
barWidth: 7,
barSpacing: 5,
chartRangeMin: Math.min.apply(null, data),
tooltipFormat: new $.SPFormatClass(''),
},
{
composite: true,
type: 'bar',
barColor: '#64bd63',
barWidth: 7,
barSpacing: 5,
},
];
}
render() {
return (
<div className={s.changesChart}>
<div className={`${s.chart} bg-success btlr btrr`}>
<p className={s.chartValue}><i className="fa fa-caret-up" /> 352.79</p>
<p className={s.chartValueChange}>+2.04 (1.69%)</p>
<div
style={{ overflow: 'hidden' }}
ref={(r) => {
this.rickshawChart = r;
}}
/>
{/* <div rickshaw-chart [series]="series" [height]="100" [renderer]="'multi'"
[configureProps]="{gapSize: 0.5, min: 'auto', strokeWidth: 3}"></div> */}
</div>
<h4 className={s.chartTitle}><span className="fw-normal">Salt Lake City</span>, Utah</h4>
<p className="deemphasize">Today 13:34</p>
<div className="mt">
<Row>
<Col xs={6}>
<p className="h4 m-0">18.7M</p>
<p className="deemphasize">Shares Traded</p>
</Col>
<Col xs={6} className="text-right">
<p className="h4 m-0">19.9B</p>
<p className="deemphasize">Market Cap</p>
</Col>
</Row>
</div>
<div className="mt">
<Row>
<Col xs={6}>
<p className="h3 m-0 text-success fw-semi-bold">+120.93</p>
<p className="deemphasize">Yearly Change</p>
</Col>
<Col xs={6} className="text-right">
<div
className="sparkline" ref={(r) => {
this.sparklineRef = r;
}}
/>
<Sparklines data={this.state.sparklineData} options={this.state.sparklineOptions} />
<p className="deemphasize">GOOG</p>
</Col>
</Row>
</div>
</div>
);
}
}
export default ChangesChart;
@import '../../../../styles/app';
.changesChart {
.chart {
margin: -$widget-padding-vertical (-$widget-padding-horizontal) 0;
padding: $widget-padding-vertical 0 0;
}
.chartTitle {
margin: 20px 0 0;
}
.chartValue,
.chartValueChange {
padding: 0 $widget-padding-horizontal;
}
.chartValue {
margin-bottom: 0;
font-weight: $font-weight-bold;
font-size: 21px;
line-height: 1;
color: $white;
}
.chartValueChange {
color: rgba($white, 0.7);
font-size: $small-font-size;
margin-bottom: $spacer;
}
}
import React from 'react';
import {
Row,
Col,
Button,
Badge,
} from 'reactstrap';
import ReactFlot from 'react-flot';
import Widget from '../../../../components/Widget';
import s from './FlotCharts.module.scss';
class FlotCharts extends React.Component {
static generateRandomData(labels) {
function random() {
return (Math.floor(Math.random() * 30)) + 10;
}
const data = [];
let maxValueIndex = 5;
for (let i = 0; i < labels.length; i += 1) {
const randomSeries = [];
for (let j = 0; j < 25; j += 1) {
randomSeries.push([j, Math.floor(maxValueIndex * j) + random()]);
}
maxValueIndex -= 1;
data.push({
data: randomSeries,
showLabels: true,
label: labels[i].label,
labelPlacement: 'below',
canvasRender: true,
cColor: 'red',
color: labels[i].color,
});
}
return data;
}
render() {
const flotOptions = {
series: {
lines: {
show: true,
lineWidth: 1,
fill: false,
fillColor: { colors: [{ opacity: 0.001 }, { opacity: 0.5 }] },
},
points: {
show: false,
fill: true,
},
shadowSize: 0,
},
legend: false,
grid: {
show: false,
margin: 0,
labelMargin: 0,
axisMargin: 0,
hoverable: true,
clickable: true,
tickColor: 'rgba(255,255,255,1)',
borderWidth: 0,
},
};
const generateData = this.constructor.generateRandomData;
return (<Row>
<Col lg={6} xs={12}>
<Widget
title={<Row>
<Col xs={4}>
<h6>
Total Sales
</h6>
<p className="value5">
January, 2018
</p>
</Col>
<Col xs={4}>
<h5>
<small>Best</small>
</h5>
<p className="value6 fs-sm">
March, 2018 + 1
</p>
</Col>
</Row>}
settings close
>
<div className="chart-stats">
<p className="text-muted fs-mini mt-xs">
<i className="fi flaticon-placeholder fa-5x pull-left mr-3" />
<span className="fw-semi-bold text-gray-dark">Jess:</span> Seems like statically it&apos;s getting impossible
to achieve any sort of
results in nearest future. The only thing we can hope for is pressing one of these two buttons:
</p>
<div className="btn-toolbar">
<Button color="success" size="xs">Accept</Button>
<Button color="default" size="xs">Reject</Button>
</div>
</div>
<div className={`${s.chart} bg-body-light`}>
<ReactFlot
id="product-chart-1"
data={
generateData([{
label: 'Visitors', color: '#777',
}, {
label: 'Charts', color: '#dd5826',
}])}
options={flotOptions}
height={'100%'}
/>
</div>
</Widget>
</Col>
<Col lg={6} xs={12}>
<Widget
className=" widget-chart-stats-simple" title={<Row>
<Col xs={12}>
<h6 className="mb-0">
<span className="fw-semi-bold">Budget</span>&nbsp;<Badge pill color="danger">2019</Badge>
</h6>
<span className="text-muted fs-mini">monthly report will be available in <button className="btn-link">6 hours</button></span>
</Col>
</Row>}
settings close
>
<div className="chart-stats">
<div className="row">
<div className="col-md-5">
<div className="clearfix m-t-1">
<h6 className="pull-left text-muted mb-xs">
Income
</h6>
<p className="pull-right h6 mb-xs">
<span className="fw-semi-bold">$14,595</span>
</p>
</div>
<div className="clearfix">
<h6 className="pull-left no-margin text-muted">
Recent
</h6>
<p className="pull-right">
<span className="fw-semi-bold">$7,647</span>
</p>
</div>
</div>
<div className="col-md-3 text-right m-t-1">
<h6 className="text-muted mb-xs">Inqueries</h6>
<p className="fw-semi-bold">73 at 14am</p>
</div>
<div className="col-md-4 text-right m-t-1">
<h6 className="text-muted mb-xs">Last Updated</h6>
<p className="fw-semi-bold">23.06.2013</p>
</div>
</div>
</div>
<div className={`${s.chart} bg-body-light`}>
<ReactFlot
id="product-chart-2"
data={
generateData([{
label: 'Controllers', color: '#777',
}, {
label: 'Scopes', color: '#f0b518',
}])}
options={flotOptions}
height={'100%'}
/>
</div>
</Widget>
</Col>
</Row>
);
}
}
export default FlotCharts;
import React from 'react';
import $ from 'jquery'
import PropTypes from 'prop-types';
/* eslint-disable */
import 'metrojs/release/MetroJs.Full/MetroJs';
/* eslint-enable */
import './LiveTile.scss';
class LiveTile extends React.Component {
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]),
};
static defaultProps = {
children: null,
};
constructor(props) {
super(props);
this.state = {
id: `live-tile-${Math.floor(Math.random() * 255)}`,
};
}
componentDidMount() {
const el = $(`#${this.state.id}`);
el.css('height', el.data('height'))
.liveTile();
}
render() {
const {
children,
...attr
} = this.props;
return (
<div {...attr} id={this.state.id} className="live-tile">
{children}
</div>
);
}
}
export default LiveTile;
@import '../../../../styles/app';
/* Live Tiles */
.live-tile,
.list-tile,
.copy-tile,
.tile-strip .flip-list > li {
height: auto;
min-width: 100%;
margin: 0 !important;
color: inherit !important;
&.fade {
opacity: 1;
}
}
.live-tile p,
.list-tile p,
.copy-tile p {
padding: 0 !important;
}
.live-tile p,
.list-tile p,
.copy-tile p,
.live-tile .face,
.list-tile .face,
.copy-tile .face {
&.h1 {
font-size: $h1-font-size;
}
&.h2 {
font-size: $h2-font-size;
}
&.h3 {
font-size: $h3-font-size;
}
&.h4 {
font-size: $h4-font-size;
}
&.h5 {
font-size: $h5-font-size;
}
&.h6 {
font-size: $h6-font-size;
}
$font-sizes: $h1-font-size, $h2-font-size, $h3-font-size, $h4-font-size, $h5-font-size, $h6-font-size;
$i: 1;
@each $font-size in $font-sizes {
&.value#{$i} {
font-size: $font-size;
}
$i: $i + 1;
}
}
import React from 'react';
import $ from 'jquery';
import Sparklines from '../../../../components/Sparklines';
class NasdaqSparkline extends React.Component {
render() {
const data = [[4, 6, 5, 7, 5]];
const options = {
type: 'line',
width: '99%',
height: '60',
lineColor: '#666',
fillColor: 'transparent',
spotRadius: 5,
spotColor: '#666',
valueSpots: { '0:': '#666' },
highlightSpotColor: '#fff',
highlightLineColor: '#666',
minSpotColor: '#666',
maxSpotColor: '#dd5826',
tooltipFormat: new $
.SPFormatClass('<span style="color: white">&#9679;</span> {{prefix}}{{y}}{{suffix}}'),
chartRangeMin: Math.min.apply(null, data) - 1,
};
return (
<Sparklines data={data} options={options} />
);
}
}
export default NasdaqSparkline;
import React from 'react';
import {
Progress,
} from 'reactstrap';
import Rickshaw from 'rickshaw';
class RealtimeTraffic extends React.Component {
state = { graph: null }
constructor(prop) {
super(prop);
this.onResizeRickshaw = this.onResizeRickshaw.bind(this);
}
componentDidMount() {
this.initChart();
window.addEventListener('resize', this.onResizeRickshaw);
}
componentWillUnmount() {
window.removeEventListener('resize', this.onResizeRickshaw);
}
onResizeRickshaw() {
this.graph.configure({ height: 130 });
this.graph.render();
}
initChart() {
const seriesData = [[], []];
const random = new Rickshaw.Fixtures.RandomData(30);
for (let i = 0; i < 30; i += 1) {
random.addData(seriesData);
}
this.graph = new Rickshaw.Graph({
element: this.rickshawChart,
height: 130,
realtime: true,
series: [
{
color: '#343434', // 'gray-dark'
data: seriesData[0],
name: 'Uploads',
}, {
color: '#666', // gray,
data: seriesData[1],
name: 'Downloads',
},
],
});
const hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: this.graph,
xFormatter: x => new Date(x * 1000).toString(),
});
hoverDetail.show();
setInterval(() => {
random.removeData(seriesData);
random.addData(seriesData);
this.graph.update();
}, 1000);
this.graph.render();
}
render() {
return (
<div>
<h4 className="mb-lg">Recent <span className="fw-semi-bold">Update</span></h4>
<h6>Node.js <span className="fw-semi-bold">4.0.1 distribution</span></h6>
<Progress className="bg-gray-lighter progress-xs" color="danger" value="77" />
<p className="mt-sm mb fs-mini ">
<small><span className="circle bg-warning text-gray-dark"><i
className="glyphicon glyphicon-chevron-up"
/></span></small>
<strong className="px-1">17% higher</strong>
than last month
</p>
<p className="fs-sm text-gray-lighter mb-0">Remaining hours</p>
<button className="btn btn-xs btn-gray pull-right ml-xs">
<i className="fa fa-compress" /> track
</button>
<button className="btn btn-xs btn-gray pull-right">
<i className="fa fa-pause" /> pause
</button>
<p className="value4">2h 56m</p>
<br />
<div
ref={(r) => {
this.rickshawChart = r;
}} className="text-gray-dark chart-overflow-bottom" style={{ height: '130px' }}
/>
</div>
);
}
}
export default RealtimeTraffic;
import React from 'react';
import { Nav, NavItem, NavLink } from 'reactstrap';
/* eslint-disable */
import $ from 'jquery';
import 'imports-loader?$=jquery,this=>window!jquery-mapael/js/maps/world_countries';
import 'imports-loader?$=jquery,this=>window!jquery-mapael/js/jquery.mapael';
/* eslint-enable */
import './YearsMap.scss';
import fakeWorldData from './MapData';
class YearsMap extends React.Component {
constructor(prop) {
super(prop);
this.state = {
activeYear: 2019,
};
this.triggerYear = this.triggerYear.bind(this);
}
componentDidMount() {
this.init();
}
init() {
const $map = $('#mapael');
const data = {
map: {
name: 'world_countries',
defaultArea: {
attrs: {
fill: '#eee', // gray-lighter
stroke: '#666', // 'gray'
'stroke-width': 0.1,
},
attrsHover: {
fill: '#999', // gray-light,
animDuration: 100,
},
},
defaultPlot: {
size: 17,
attrs: {
fill: '#f0b518', // brand-warning,
stroke: '#fff',
'stroke-width': 0,
'stroke-linejoin': 'round',
},
attrsHover: {
'stroke-width': 1,
animDuration: 100,
},
},
zoom: {
enabled: true,
step: 1,
maxLevel: 10,
mousewheel: false,
},
},
legend: {
area: {
display: false,
slices: [
{
max: 5000000,
attrs: {
fill: 'rgb(245, 249, 251)', // lightenColor('#ebeff1', .04)
},
label: 'Less than 5M',
},
{
min: 5000000,
max: 10000000,
attrs: {
fill: '#ebeff1',
},
label: 'Between 5M and 10M',
},
{
min: 10000000,
max: 50000000,
attrs: {
fill: '#eee', // gray-lighter
},
label: 'Between 10M and 50M',
},
{
min: 50000000,
attrs: {
fill: 'rgb(209, 213, 215)', // darkenColor('#ebeff1', .1)
},
label: 'More than 50M',
},
],
},
},
areas: fakeWorldData[this.state.activeYear].areas,
};
const height = 394;
$map.css('height', height);
if ($map.parents('.widget')[0]) {
$map.find('.map').css('height', parseInt($map.parents('.widget').css('height'), 10) - 35);
}
$map.mapael(data);
$map.trigger('zoom', { level: 6, latitude: 59.599254, longitude: 8.863224 });
}
triggerYear(year) {
this.setState({
activeYear: year,
});
const $map = $('#mapael');
$map.trigger('update', [{
mapOptions: fakeWorldData[year],
animDuration: 300,
}]);
}
render() {
return (<div>
<div className="mapael" id="mapael">
<div className="stats">
<h6 className="text-gray-dark">YEARLY <span className="fw-semi-bold">DISTRIBUTIONS</span></h6>
<span className="pull-left mr-xs">
<small><span className="circle bg-warning text-gray-dark">
<i className="fa fa-plus" /></span></small>
</span>
<p className="h4 m-0">
<strong>17% last year</strong>
</p>
</div>
<div className="map">
<span>Alternative content for the map</span>
</div>
<div className="areaLegend">
<span>Alternative content for the legend</span>
</div>
</div>
<Nav className="map-controls" pills fill>
<NavItem>
<NavLink active={this.state.activeYear === 2014} onClick={() => this.triggerYear(2014)}>2014</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2015} onClick={() => this.triggerYear(2015)}>2015</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2016} onClick={() => this.triggerYear(2016)}>2016</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2017} onClick={() => this.triggerYear(2017)}>2017</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2018} onClick={() => this.triggerYear(2018)}>2018</NavLink>
</NavItem>
<NavItem>
<NavLink active={this.state.activeYear === 2019} onClick={() => this.triggerYear(2019)}>2019</NavLink>
</NavItem>
</Nav>
</div>);
}
}
export default YearsMap;
@import '../../../../styles/app';
/* Mapael */
.mapTooltip {
position: fixed;
padding: 2px;
z-index: 1000;
max-width: 200px;
display: none;
background-color: #fff;
border: 1px solid #ccc;
border-radius: $border-radius;
font-size: $font-size-sm;
color: $text-color;
}
.zoomIn,
.zoomOut {
position: absolute;
bottom: 10px;
left: 10px;
width: 20px;
height: 20px;
box-sizing: content-box;
border: 1px solid #ccc;
background-color: #fff;
color: $text-color;
line-height: 20px;
text-align: center;
border-radius: $border-radius;
cursor: pointer;
font-weight: $font-weight-bold;
user-select: none;
}
.zoomOut {
left: 36px;
}
.mapael {
position: relative;
margin: (-$widget-padding-vertical) (-$widget-padding-horizontal) 0;
.map {
position: relative;
height: calc(100% - 20px);
}
.stats {
position: absolute;
z-index: 1;
top: 0;
left: 0;
margin: 5% 10%;
}
}
/* Part:Map Controls */
.map-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #bbb;
background-color: $addition-bg;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
> .nav-item > .nav-link {
border-radius: 0;
padding: 0.7143rem 0;
color: $text-color;
&:hover {
background-color: $gray-200;
color: $text-color;
}
}
> .nav-item > .nav-link.active {
&,
&:hover {
background-color: $white;
color: $text-color;
font-weight: $font-weight-bold;
}
}
> .nav-item:first-child > a {
border-bottom-left-radius: $border-radius;
}
> .nav-item:last-child > a {
border-bottom-right-radius: $border-radius;
}
}
.map svg {
height: 100%;
width: 100%;
}
{
"name": "widgets",
"version": "0.0.0",
"main": "./Widgets.js",
"private": true
}
import { DISMISS_ALERT } from '../actions/alerts';
const defaultState = {
alertsList: [
{
id: 0,
title: 'Sales Report',
value: 16,
color: 'primary',
footer: 'Calculating x-axis bias... 65%',
},
{
id: 1,
title: 'Personal Responsibility',
value: 23,
color: 'danger',
footer: 'Provide required notes',
},
],
};
export default function alertsReducer(state = defaultState, action) {
let index;
switch (action.type) {
case DISMISS_ALERT:
state.alertsList.forEach((alert, alertIndex) => {
if (alert.id === action.id) {
index = alertIndex;
}
});
return Object.assign({}, state, {
alertsList: [
...state.alertsList.slice(0, index),
...state.alertsList.slice(index + 1),
],
});
default:
return state;
}
}
import { RECEIVED_DATA_SUCCESS, RECEIVING_DATA } from '../actions/analytics';
const defaultState = {
visits: {},
performance: {},
server: {},
revenue: [],
mainChart: [],
isReceiving: false
};
export default function analyticsReducer(state = defaultState, action) {
switch (action.type) {
case RECEIVED_DATA_SUCCESS:
const { visits, performance, server, revenue, mainChart } = action.payload;
return Object.assign({}, state, {
visits,
performance,
server,
revenue,
mainChart,
isReceiving: false
});
case RECEIVING_DATA:
return Object.assign({}, state, {
isReceiving: true
});
default:
return state;
}
}
import {
LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT_SUCCESS,
} from '../actions/user';
const token = localStorage.getItem('token');
export default function auth(state = {
isFetching: false,
isAuthenticated: !!token,
}, action) {
switch (action.type) {
case LOGIN_REQUEST:
return Object.assign({}, state, {
isFetching: true,
isAuthenticated: false,
});
case LOGIN_SUCCESS:
return Object.assign({}, state, {
isFetching: false,
isAuthenticated: true,
errorMessage: '',
});
case LOGIN_FAILURE:
return Object.assign({}, state, {
isFetching: false,
isAuthenticated: false,
errorMessage: action.payload,
});
case LOGOUT_SUCCESS:
return Object.assign({}, state, {
isAuthenticated: false,
});
default:
return state;
}
}
import { combineReducers } from 'redux';
import auth from './auth';
import navigation from './navigation';
import alerts from './alerts';
import layout from './layout';
import products from './products';
import register from './register';
import analytics from './analytics';
export default combineReducers({
alerts,
auth,
navigation,
layout,
products,
register,
analytics,
});
......
import {
RECEIVED_PRODUCTS,
RECEIVED_PRODUCT,
UPDATED_PRODUCT,
DELETED_PRODUCT,
RECEIVING_PRODUCTS,
RECEIVING_PRODUCT,
UPDATING_PRODUCT,
DELETING_PRODUCT,
RECEIVED_IMAGES
} from '../actions/products';
const defaultState = {
data: [],
images: [],
isReceiving: false,
isUpdating: false,
isDeleting: false,
idToDelete: null
};
export default function productsReducer(state = defaultState, action) {
switch (action.type) {
case RECEIVED_PRODUCTS:
return Object.assign({}, state, {
data: action.payload,
isReceiving: false,
});
case RECEIVED_PRODUCT:
return Object.assign({}, state, {
data: [...state.data, action.payload],
isReceiving: false,
});
case UPDATED_PRODUCT:
let index = state.data.findIndex(p => p.id === action.payload.id);
return Object.assign({}, state, {
data: state.data.map((p, i) => {
if (i === index) {
return Object.assign({}, p, action.payload);
}
return p;
}),
isUpdating: false,
});
case DELETED_PRODUCT:
let indexToDelete = state.data.findIndex(p => p.id === action.payload.id);
let data = [...state.data];
data.splice(indexToDelete, 1);
return Object.assign({}, state, {
data: [...data],
isDeleting: false,
idToDelete: null
});
case RECEIVING_PRODUCTS:
case RECEIVING_PRODUCT:
return Object.assign({}, state, {
isReceiving: true
});
case UPDATING_PRODUCT:
return Object.assign({}, state, {
isUpdating: true
});
case DELETING_PRODUCT:
return Object.assign({}, state, {
isDeleting: true,
idToDelete: action.payload.id
});
case RECEIVED_IMAGES:
return Object.assign({}, state, {
images: action.payload,
});
default:
return state;
}
}
import { REGISTER_FAILURE, REGISTER_REQUEST, REGISTER_SUCCESS } from '../actions/register';
export default function register(state = {
isFetching: false,
errorMessage: ''
}, action) {
switch (action.type) {
case REGISTER_REQUEST:
return Object.assign({}, state, {
isFetching: true,
});
case REGISTER_SUCCESS:
return Object.assign({}, state, {
isFetching: false,
errorMessage: '',
});
case REGISTER_FAILURE:
return Object.assign({}, state, {
isFetching: false,
errorMessage: action.payload,
});
default:
return state;
}
}
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read http://bit.ly/CRA-PWA.
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA pages.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit http://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
if (
response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
......@@ -15,7 +15,6 @@
@import '../../node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox';
@import '../../node_modules/messenger/build/css/messenger.css';
@import '../../node_modules/messenger/build/css/messenger-theme-air.css';
@import '../../node_modules/govpredict-morris/morris.css';
@import '../../node_modules/nvd3/build/nv.d3.css';
@import '../../node_modules/rickshaw/rickshaw.css';
@import '../../node_modules/react-table/react-table.css';
......
......@@ -908,6 +908,13 @@
dependencies:
regenerator-runtime "^0.13.2"
"@babel/runtime@^7.4.3", "@babel/runtime@^7.4.4":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
dependencies:
regenerator-runtime "^0.13.2"
"@babel/template@7.0.0-beta.44":
version "7.0.0-beta.44"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
......@@ -1011,6 +1018,83 @@
version "1.4.0"
resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
"@emotion/cache@^10.0.14", "@emotion/cache@^10.0.9":
version "10.0.14"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.14.tgz#56093cff025c04b0330bdd92afe8335ed326dd18"
integrity sha512-HNGEwWnPlNyy/WPXBXzbjzkzeZFV657Z99/xq2xs5yinJHbMfi3ioCvBJ6Y8Zc8DQzO9F5jDmVXJB41Ytx3QMw==
dependencies:
"@emotion/sheet" "0.9.3"
"@emotion/stylis" "0.8.4"
"@emotion/utils" "0.11.2"
"@emotion/weak-memoize" "0.2.3"
"@emotion/core@^10.0.9":
version "10.0.14"
resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.14.tgz#cac5c334b278d5b7688cfff39e460a5b50abb71c"
integrity sha512-G9FbyxLm3lSnPfLDcag8fcOQBKui/ueXmWOhV+LuEQg9HrqExuWnWaO6gm6S5rNe+AMcqLXVljf8pYgAdFLNSg==
dependencies:
"@babel/runtime" "^7.4.3"
"@emotion/cache" "^10.0.14"
"@emotion/css" "^10.0.14"
"@emotion/serialize" "^0.11.8"
"@emotion/sheet" "0.9.3"
"@emotion/utils" "0.11.2"
"@emotion/css@^10.0.14", "@emotion/css@^10.0.9":
version "10.0.14"
resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.14.tgz#95dacabdd0e22845d1a1b0b5968d9afa34011139"
integrity sha512-MozgPkBEWvorcdpqHZE5x1D/PLEHUitALQCQYt2wayf4UNhpgQs2tN0UwHYS4FMy5ROBH+0ALyCFVYJ/ywmwlg==
dependencies:
"@emotion/serialize" "^0.11.8"
"@emotion/utils" "0.11.2"
babel-plugin-emotion "^10.0.14"
"@emotion/hash@0.7.2":
version "0.7.2"
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.2.tgz#53211e564604beb9befa7a4400ebf8147473eeef"
integrity sha512-RMtr1i6E8MXaBWwhXL3yeOU8JXRnz8GNxHvaUfVvwxokvayUY0zoBeWbKw1S9XkufmGEEdQd228pSZXFkAln8Q==
"@emotion/memoize@0.7.2":
version "0.7.2"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.2.tgz#7f4c71b7654068dfcccad29553520f984cc66b30"
integrity sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w==
"@emotion/serialize@^0.11.8":
version "0.11.8"
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.8.tgz#e41dcf7029e45286a3e0cf922933e670fe05402c"
integrity sha512-Qb6Us2Yk1ZW8SOYH6s5z7qzXXb2iHwVeqc6FjXtac0vvxC416ki0eTtHNw4Q5smoyxdyZh3519NKGrQvvvrZ/Q==
dependencies:
"@emotion/hash" "0.7.2"
"@emotion/memoize" "0.7.2"
"@emotion/unitless" "0.7.4"
"@emotion/utils" "0.11.2"
csstype "^2.5.7"
"@emotion/sheet@0.9.3":
version "0.9.3"
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a"
integrity sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==
"@emotion/stylis@0.8.4":
version "0.8.4"
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c"
integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==
"@emotion/unitless@0.7.4":
version "0.7.4"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
"@emotion/utils@0.11.2":
version "0.11.2"
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.2.tgz#713056bfdffb396b0a14f1c8f18e7b4d0d200183"
integrity sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==
"@emotion/weak-memoize@0.2.3":
version "0.2.3"
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.3.tgz#dfa0c92efe44a1d1a7974fb49ffeb40ef2da5a27"
integrity sha512-zVgvPwGK7c1aVdUVc9Qv7SqepOGRDrqCw7KZPSZziWGxSlbII3gmvGLPzLX4d0n0BMbamBacUrN22zOMyFFEkQ==
"@hapi/address@2.x.x":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.0.0.tgz#9f05469c88cb2fd3dcd624776b54ee95c312126a"
......@@ -1169,6 +1253,14 @@
"@types/istanbul-reports" "^1.1.1"
"@types/yargs" "^12.0.9"
"@semantic-ui-react/event-stack@^3.1.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@semantic-ui-react/event-stack/-/event-stack-3.1.0.tgz#aadbe4a28b0dd7703c5f451640d0fefe66dd9208"
integrity sha512-WHtU9wutZByZtFZxzj4BVEk+rvWldZpZhRcyv6d84+XLSolm83zLHYJLTACGuSl6Xa/xpgVXquvm9GyMudkJYg==
dependencies:
exenv "^1.2.2"
prop-types "^15.6.2"
"@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
version "4.2.0"
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
......@@ -1575,6 +1667,14 @@ address@1.0.3, address@^1.0.1:
version "1.0.3"
resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
adler-32@~1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/adler-32/-/adler-32-1.2.0.tgz#6a3e6bf0a63900ba15652808cb15c6813d1a5f25"
integrity sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=
dependencies:
exit-on-epipe "~1.0.1"
printj "~1.1.0"
ajv-errors@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
......@@ -1940,6 +2040,22 @@ babel-plugin-dynamic-import-node@2.2.0:
dependencies:
object.assign "^4.1.0"
babel-plugin-emotion@^10.0.14:
version "10.0.14"
resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.14.tgz#c1d0e4621e303507ea7da57daa3cd771939d6df4"
integrity sha512-T7hdxJ4xXkKW3OXcizK0pnUJlBeNj/emjQZPDIZvGOuwl2adIgicQWRNkz6BuwKdDTrqaXQn1vayaL6aL8QW5A==
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@emotion/hash" "0.7.2"
"@emotion/memoize" "0.7.2"
"@emotion/serialize" "^0.11.8"
babel-plugin-macros "^2.0.0"
babel-plugin-syntax-jsx "^6.18.0"
convert-source-map "^1.5.0"
escape-string-regexp "^1.0.5"
find-root "^1.1.0"
source-map "^0.5.7"
babel-plugin-istanbul@^5.1.0:
version "5.1.4"
resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.1.4.tgz#841d16b9a58eeb407a0ddce622ba02fe87a752ba"
......@@ -1962,10 +2078,24 @@ babel-plugin-macros@2.5.1:
cosmiconfig "^5.2.0"
resolve "^1.10.0"
babel-plugin-macros@^2.0.0:
version "2.6.1"
resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz#41f7ead616fc36f6a93180e89697f69f51671181"
integrity sha512-6W2nwiXme6j1n2erPOnmRiWfObUhWH7Qw1LMi9XZy8cj+KtESu3T6asZvtk5bMQQjX8te35o7CFueiSdL/2NmQ==
dependencies:
"@babel/runtime" "^7.4.2"
cosmiconfig "^5.2.0"
resolve "^1.10.0"
babel-plugin-named-asset-import@1.0.0-next.103:
version "1.0.0-next.103"
resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-1.0.0-next.103.tgz#c2da5b8426705191710ad5b435a6577d68b21ae9"
babel-plugin-syntax-jsx@^6.18.0:
version "6.18.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
babel-plugin-syntax-object-rest-spread@^6.8.0:
version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
......@@ -2432,6 +2562,16 @@ ccount@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.4.tgz#9cf2de494ca84060a2a8d2854edd6dfb0445f386"
cfb@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/cfb/-/cfb-1.1.2.tgz#5dfff9813eb37757597272dae3da3b37b3edcc44"
integrity sha512-FAEjGHtrAF027TFkhDmTDNbRf97C33jBXRa9ODeabZRqYDglsq/F5uRpJfV5BitCH4yiyplHNBKx2xOhQb12PA==
dependencies:
adler-32 "~1.2.0"
commander "^2.16.0"
crc-32 "~1.2.0"
printj "~1.1.2"
chain-function@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.1.tgz#c63045e5b4b663fb86f1c6e186adaf1de402a1cc"
......@@ -2638,6 +2778,14 @@ code-point-at@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
codepage@~1.14.0:
version "1.14.0"
resolved "https://registry.yarnpkg.com/codepage/-/codepage-1.14.0.tgz#8cbe25481323559d7d307571b0fff91e7a1d2f99"
integrity sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=
dependencies:
commander "~2.14.1"
exit-on-epipe "~1.0.1"
collection-visit@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
......@@ -2703,10 +2851,15 @@ commander@^2.11.0:
version "2.19.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
commander@^2.19.0:
commander@^2.16.0, commander@^2.19.0:
version "2.20.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
commander@~2.14.1:
version "2.14.1"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.14.1.tgz#2235123e37af8ca3c65df45b026dbd357b01b9aa"
integrity sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw==
common-tags@^1.8.0:
version "1.8.0"
resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
......@@ -2764,6 +2917,23 @@ concat-stream@^1.5.0:
readable-stream "^2.2.2"
typedarray "^0.0.6"
condense-newlines@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/condense-newlines/-/condense-newlines-0.2.1.tgz#3de985553139475d32502c83b02f60684d24c55f"
integrity sha1-PemFVTE5R10yUCyDsC9gaE0kxV8=
dependencies:
extend-shallow "^2.0.1"
is-whitespace "^0.3.0"
kind-of "^3.0.2"
config-chain@^1.1.12:
version "1.1.12"
resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
integrity sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==
dependencies:
ini "^1.3.4"
proto-list "~1.2.1"
confusing-browser-globals@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.7.tgz#5ae852bd541a910e7ffb2dbb864a2d21a36ad29b"
......@@ -2798,7 +2968,7 @@ content-type@~1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
convert-source-map@^1.1.0, convert-source-map@^1.4.0:
convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
dependencies:
......@@ -2882,6 +3052,14 @@ cosmiconfig@^5.2.0:
js-yaml "^3.13.0"
parse-json "^4.0.0"
crc-32@~1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.0.tgz#cb2db6e29b88508e32d9dd0ec1693e7b41a18208"
integrity sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==
dependencies:
exit-on-epipe "~1.0.1"
printj "~1.1.0"
create-ecdh@^4.0.0:
version "4.0.3"
resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
......@@ -2918,6 +3096,14 @@ create-react-class@15.x, create-react-class@^15.5.2:
loose-envify "^1.3.1"
object-assign "^4.1.1"
create-react-context@<=0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
integrity sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==
dependencies:
fbjs "^0.8.0"
gud "^1.0.0"
cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
version "6.0.5"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
......@@ -3158,6 +3344,11 @@ cssstyle@^1.0.0:
dependencies:
cssom "0.3.x"
csstype@^2.5.7:
version "2.6.6"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
currently-unhandled@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
......@@ -3226,10 +3417,6 @@ decode-uri-component@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
deep-diff@^0.3.5:
version "0.3.8"
resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84"
deep-equal@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
......@@ -3478,9 +3665,10 @@ dotenv-expand@5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
dotenv@8.0.0:
dotenv@^8.0.0:
version "8.0.0"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.0.0.tgz#ed310c165b4e8a97bb745b0a9d99c31bda566440"
integrity sha512-30xVGqjLjiUOArT4+M5q9sYdvuR4riM6yK9wMcas9Vbp6zZa+ocC9dp6QoftuhTPhFAiLK/0C5Ni2nou/Bk8lg==
draft-js@^0.10.5:
version "0.10.5"
......@@ -3524,6 +3712,16 @@ ecdsa-sig-formatter@1.0.11:
dependencies:
safe-buffer "^5.0.1"
editorconfig@^0.15.3:
version "0.15.3"
resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
dependencies:
commander "^2.19.0"
lru-cache "^4.1.5"
semver "^5.6.0"
sigmund "^1.0.1"
ee-first@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
......@@ -3922,6 +4120,11 @@ exenv@^1.2.0, exenv@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
exit-on-epipe@~1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz#0bdd92e87d5285d267daa8171d0eb06159689692"
integrity sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==
exit@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
......@@ -4080,7 +4283,7 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"
fbjs@^0.8.1, fbjs@^0.8.15, fbjs@^0.8.9:
fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.15, fbjs@^0.8.9:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
dependencies:
......@@ -4156,6 +4359,11 @@ find-cache-dir@^2.0.0:
make-dir "^1.0.0"
pkg-dir "^3.0.0"
find-root@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
find-up@3.0.0, find-up@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
......@@ -4272,6 +4480,11 @@ forwarded@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
frac@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/frac/-/frac-1.1.2.tgz#3d74f7f6478c88a1b5020306d747dc6313c74d0b"
integrity sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==
fragment-cache@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
......@@ -4504,10 +4717,6 @@ google-maps-infobox@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/google-maps-infobox/-/google-maps-infobox-2.0.0.tgz#1ea6de93c0cdf4138c2d586331835c83dcc59dc2"
govpredict-morris@0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/govpredict-morris/-/govpredict-morris-0.5.1.tgz#3a16dd1cf48718cb992458ab49edc2748cbad2e1"
graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
version "4.1.11"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
......@@ -4520,6 +4729,11 @@ growly@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
gud@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
gzip-size@5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.0.0.tgz#a55ecd99222f4c48fd8c01c625ce3b349d0a0e80"
......@@ -5277,6 +5491,11 @@ is-utf8@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
is-whitespace@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
integrity sha1-Fjnssb4DauxppUy7QBz77XEUq38=
is-windows@^1.0.1, is-windows@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
......@@ -5729,6 +5948,17 @@ js-base64@^2.1.8:
version "2.4.9"
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.9.tgz#748911fb04f48a60c4771b375cac45a80df11c03"
js-beautify@^1.6.12:
version "1.10.1"
resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.10.1.tgz#bdfe738ddbcaa12e4fced5af2d7cfad59f60ac0a"
integrity sha512-4y8SHOIRC+/YQ2gs3zJEKBUraQerq49FJYyXRpdzUGYQzCq8q9xtIh0YXial1S5KmonVui4aiUb6XaGyjE51XA==
dependencies:
config-chain "^1.1.12"
editorconfig "^0.15.3"
glob "^7.1.3"
mkdirp "~0.5.1"
nopt "~4.0.1"
js-levenshtein@^1.1.3:
version "1.1.4"
resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.4.tgz#3a56e3cbf589ca0081eb22cd9ba0b1290a16d26e"
......@@ -5921,6 +6151,11 @@ jws@^3.2.2:
jwa "^1.4.1"
safe-buffer "^5.0.1"
keyboard-key@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/keyboard-key/-/keyboard-key-1.0.4.tgz#52d8fa07b7e17757072aa22a67fb4ae85e4c46b0"
integrity sha512-my04dE6BCwPpwoe4KYKfPxWiwgDYQOHrVmtzn1CfzmoEsGG/ef4oZGaXCzi1+iFhG7CN5JkOuxmei5OABY8/ag==
killable@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
......@@ -6224,6 +6459,14 @@ lru-cache@^4.0.1, lru-cache@^4.1.3:
pseudomap "^1.0.2"
yallist "^2.1.2"
lru-cache@^4.1.5:
version "4.1.5"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
dependencies:
pseudomap "^1.0.2"
yallist "^2.1.2"
make-dir@^1.0.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
......@@ -6305,6 +6548,11 @@ mem@^4.0.0:
mimic-fn "^1.0.0"
p-is-promise "^1.1.0"
memoize-one@^5.0.0:
version "5.0.5"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.5.tgz#8cd3809555723a07684afafcd6f756072ac75d7e"
integrity sha512-ey6EpYv0tEaIbM/nTDOpHciXUvd+ackQrJgEzBwemhZZIWZjcyodqEcrmqDy2BKRTM3a65kKBV4WtLXJDt26SQ==
memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
......@@ -6493,6 +6741,18 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
dependencies:
minimist "0.0.8"
moment-timezone@^0.5.26:
version "0.5.26"
resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.26.tgz#c0267ca09ae84631aa3dc33f65bedbe6e8e0d772"
integrity sha512-sFP4cgEKTCymBBKgoxZjYzlSovC20Y6J7y3nanDc5RoBIXKlZhoYwBoZGe3flwU6A372AcRwScH8KiwV6zjy1g==
dependencies:
moment ">= 2.9.0"
"moment@>= 2.9.0":
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
moment@^2.20.1, moment@^2.22.2:
version "2.22.2"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
......@@ -6732,7 +6992,7 @@ node-sass@4.12.0:
dependencies:
abbrev "1"
nopt@^4.0.1:
nopt@^4.0.1, nopt@~4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
dependencies:
......@@ -7291,7 +7551,7 @@ pnp-webpack-plugin@1.4.3:
dependencies:
ts-pnp "^1.1.2"
popper.js@^1.14.1:
popper.js@^1.14.1, popper.js@^1.14.4:
version "1.15.0"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
......@@ -7926,6 +8186,25 @@ pretty-format@^24.8.0:
ansi-styles "^3.2.0"
react-is "^16.8.4"
pretty@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
integrity sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=
dependencies:
condense-newlines "^0.2.1"
extend-shallow "^2.0.1"
js-beautify "^1.6.12"
prettysize@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/prettysize/-/prettysize-2.0.0.tgz#902c02480d865d9cc0813011c9feb4fa02ce6996"
integrity sha512-VVtxR7sOh0VsG8o06Ttq5TrI1aiZKmC+ClSn4eBPaNf4SHr5lzbYW+kYGX3HocBL/MfpVrRfFZ9V3vCbLaiplg==
printj@~1.1.0, printj@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/printj/-/printj-1.1.2.tgz#d90deb2975a8b9f600fb3a1c94e3f4c53c78a222"
integrity sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==
prismjs@^1.8.4, prismjs@~1.15.0:
version "1.15.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.15.0.tgz#8801d332e472091ba8def94976c8877ad60398d9"
......@@ -7992,6 +8271,11 @@ property-information@^5.0.0, property-information@^5.0.1:
dependencies:
xtend "^4.0.1"
proto-list@~1.2.1:
version "1.2.4"
resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
proxy-addr@~2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93"
......@@ -8368,7 +8652,14 @@ react-images@^0.5.19:
react-scrolllock "^2.0.1"
react-transition-group "2"
react-is@^16.8.1, react-is@^16.8.4:
react-input-autosize@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
integrity sha512-3+K4CD13iE4lQQ2WlF8PuV5htfmTRLH6MDnfndHM6LuBRszuXnuyIfE7nhSKt8AzRBZ50bu0sAhkNMeS5pxQQA==
dependencies:
prop-types "^15.5.8"
react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
version "16.8.6"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
......@@ -8407,6 +8698,18 @@ react-popper@^0.10.4:
popper.js "^1.14.1"
prop-types "^15.6.1"
react-popper@^1.3.3:
version "1.3.3"
resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.3.tgz#2c6cef7515a991256b4f0536cd4bdcb58a7b6af6"
integrity sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==
dependencies:
"@babel/runtime" "^7.1.2"
create-react-context "<=0.2.2"
popper.js "^1.14.4"
prop-types "^15.6.1"
typed-styles "^0.0.7"
warning "^4.0.2"
react-prop-toggle@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-prop-toggle/-/react-prop-toggle-1.0.2.tgz#8b0b7e74653606b1427cfcf6c4eaa9198330568e"
......@@ -8480,6 +8783,22 @@ react-select2-wrapper@^1.0.4-beta6:
select2 "^4.0.0"
shallow-equal-fuzzy "^0.0.2"
react-select@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.0.4.tgz#16bde37c24fd4f6444914d4681e78f15ffbc86d3"
integrity sha512-fbVISKa/lSUlLsltuatfUiKcWCNvdLXxFFyrzVQCBUsjxJZH/m7UMPdw/ywmRixAmwXAP++MdbNNZypOsiDEfA==
dependencies:
"@babel/runtime" "^7.4.4"
"@emotion/cache" "^10.0.9"
"@emotion/core" "^10.0.9"
"@emotion/css" "^10.0.9"
classnames "^2.2.5"
memoize-one "^5.0.0"
prop-types "^15.6.0"
raf "^3.4.0"
react-input-autosize "^2.2.1"
react-transition-group "^2.2.1"
react-shuffle@2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/react-shuffle/-/react-shuffle-2.1.0.tgz#978de4ed7ea006fd4eaa5b8756b607da3c05f7ef"
......@@ -8573,20 +8892,20 @@ react-transition-group@^1.2.0:
prop-types "^15.5.6"
warning "^3.0.0"
react-transition-group@^2.5.2:
version "2.5.2"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.2.tgz#9457166a9ba6ce697a3e1b076b3c049b9fb2c408"
react-transition-group@^2.2.1, react-transition-group@^2.6.1:
version "2.9.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
dependencies:
dom-helpers "^3.3.1"
dom-helpers "^3.4.0"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4"
react-transition-group@^2.6.1:
version "2.9.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
react-transition-group@^2.5.2:
version "2.5.2"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.2.tgz#9457166a9ba6ce697a3e1b076b3c049b9fb2c408"
dependencies:
dom-helpers "^3.4.0"
dom-helpers "^3.3.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4"
......@@ -8749,12 +9068,6 @@ reduce-css-calc@^2.0.0:
css-unit-converter "^1.1.1"
postcss-value-parser "^3.3.0"
redux-logger@^3.0.6:
version "3.0.6"
resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-3.0.6.tgz#f7555966f3098f3c88604c449cf0baf5778274bf"
dependencies:
deep-diff "^0.3.5"
redux-thunk@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
......@@ -9167,6 +9480,21 @@ selfsigned@^1.10.4:
dependencies:
node-forge "0.7.5"
semantic-ui-react@^0.87.3:
version "0.87.3"
resolved "https://registry.yarnpkg.com/semantic-ui-react/-/semantic-ui-react-0.87.3.tgz#59b6e1ca52b202bf6deed4c65e81b170b4a12bf6"
integrity sha512-YJgFYEheeFBMm/epZpIpWKF9glgSShdLPiY8zoUi+KJ0IKtLtbI8RbMD/ELbZkY+SO/IWbK/f/86pWt3PVvMVA==
dependencies:
"@babel/runtime" "^7.1.2"
"@semantic-ui-react/event-stack" "^3.1.0"
classnames "^2.2.6"
keyboard-key "^1.0.4"
lodash "^4.17.11"
prop-types "^15.6.2"
react-is "^16.7.0"
react-popper "^1.3.3"
shallowequal "^1.1.0"
"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
version "5.6.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
......@@ -9290,7 +9618,7 @@ shallowequal@^0.2.2:
dependencies:
lodash.keys "^3.1.2"
shallowequal@^1.0.2:
shallowequal@^1.0.2, shallowequal@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
......@@ -9323,6 +9651,11 @@ showdown@1.8.6:
dependencies:
yargs "^10.0.3"
sigmund@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=
signal-exit@^3.0.0, signal-exit@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
......@@ -9453,7 +9786,7 @@ source-map@^0.4.2:
dependencies:
amdefine ">=0.0.4"
source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6:
source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
......@@ -9520,6 +9853,13 @@ sprintf-js@~1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
ssf@~0.10.2:
version "0.10.2"
resolved "https://registry.yarnpkg.com/ssf/-/ssf-0.10.2.tgz#65b2b4fcdfd967bc8e8383a41349009893115976"
integrity sha512-rDhAPm9WyIsY8eZEKyE8Qsotb3j/wBdvMWBUsOhJdfhKGLfQidRjiBUV0y/MkyCLiXQ38FG6LWW/VYUtqlIDZQ==
dependencies:
frac "~1.1.2"
sshpk@^1.7.0:
version "1.15.1"
resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.15.1.tgz#b79a089a732e346c6e0714830f36285cd38191a2"
......@@ -10011,6 +10351,11 @@ type-is@~1.6.16:
media-typer "0.3.0"
mime-types "~2.1.18"
typed-styles@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
typedarray@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
......@@ -10288,6 +10633,13 @@ warning@^4.0.1:
dependencies:
loose-envify "^1.0.0"
warning@^4.0.2:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
dependencies:
loose-envify "^1.0.0"
watchpack@^1.5.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
......@@ -10644,6 +10996,19 @@ x-is-string@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
xlsx@^0.14.4:
version "0.14.4"
resolved "https://registry.yarnpkg.com/xlsx/-/xlsx-0.14.4.tgz#7c2ccfce81d56282df55d0cea76722ef83986c02"
integrity sha512-AYVNzZKmU9pxDf4d6dSOy52EivzRnJ5lo0Jyxqk7Pz5G+8dMCUsO1PdFlGj6C6MQZ8xBRPinmIpTHYzI2DyfXg==
dependencies:
adler-32 "~1.2.0"
cfb "^1.1.2"
codepage "~1.14.0"
commander "~2.17.1"
crc-32 "~1.2.0"
exit-on-epipe "~1.0.1"
ssf "~0.10.2"
xml-name-validator@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
......