박선진 / video-emergency-detection

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

delete unnecessary codes from template code

Expand all
Inline Side-by-side
Showing 415 changed files with 20 additions and 4784 deletions
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
15 .env.development.local 15 .env.development.local
16 .env.test.local 16 .env.test.local
17 .env.production.local 17 .env.production.local
18 +.env
18 19
19 npm-debug.log* 20 npm-debug.log*
20 yarn-debug.log* 21 yarn-debug.log*
......
This diff could not be displayed because it is too large.
...@@ -61,14 +61,12 @@ ...@@ -61,14 +61,12 @@
61 "bootstrap_calendar": "https://github.com/xero/bootstrap_calendar.git#1.0.1", 61 "bootstrap_calendar": "https://github.com/xero/bootstrap_calendar.git#1.0.1",
62 "classnames": "^2.2.6", 62 "classnames": "^2.2.6",
63 "draft-js": "^0.10.5", 63 "draft-js": "^0.10.5",
64 - "easy-pie-chart": "^2.1.7",
65 "flot": "^0.8.0-alpha", 64 "flot": "^0.8.0-alpha",
66 "flot.dashes": "https://github.com/cquartier/flot.dashes.git", 65 "flot.dashes": "https://github.com/cquartier/flot.dashes.git",
67 "font-awesome": "4.7.0", 66 "font-awesome": "4.7.0",
68 "formsy-react": "0.19.5", 67 "formsy-react": "0.19.5",
69 "fullcalendar": "^3.9.0", 68 "fullcalendar": "^3.9.0",
70 "glyphicons-halflings": "^1.9.1", 69 "glyphicons-halflings": "^1.9.1",
71 - "govpredict-morris": "0.5.1",
72 "jasny-bootstrap": "^3.1.3", 70 "jasny-bootstrap": "^3.1.3",
73 "jquery": "^3.3.1", 71 "jquery": "^3.3.1",
74 "jquery-mapael": "^2.2.0", 72 "jquery-mapael": "^2.2.0",
...@@ -83,7 +81,10 @@ ...@@ -83,7 +81,10 @@
83 "messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2", 81 "messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",
84 "metrojs": "0.9.77", 82 "metrojs": "0.9.77",
85 "moment": "^2.22.2", 83 "moment": "^2.22.2",
84 + "moment-timezone": "^0.5.26",
86 "nvd3": "1.8.6", 85 "nvd3": "1.8.6",
86 + "pretty": "^2.0.0",
87 + "prettysize": "^2.0.0",
87 "rc-color-picker": "^1.2.6", 88 "rc-color-picker": "^1.2.6",
88 "rc-hammerjs": "0.6.9", 89 "rc-hammerjs": "0.6.9",
89 "react": "^16.5.2", 90 "react": "^16.5.2",
...@@ -107,6 +108,7 @@ ...@@ -107,6 +108,7 @@
107 "react-router-dom": "^4.3.1", 108 "react-router-dom": "^4.3.1",
108 "react-router-hash-link": "^1.2.1", 109 "react-router-hash-link": "^1.2.1",
109 "react-scrollspy": "^3.3.5", 110 "react-scrollspy": "^3.3.5",
111 + "react-select": "^3.0.4",
110 "react-select2-wrapper": "^1.0.4-beta6", 112 "react-select2-wrapper": "^1.0.4-beta6",
111 "react-shuffle": "2.1.0", 113 "react-shuffle": "2.1.0",
112 "react-slick": "^0.23.1", 114 "react-slick": "^0.23.1",
...@@ -122,9 +124,11 @@ ...@@ -122,9 +124,11 @@
122 "redux": "^4.0.1", 124 "redux": "^4.0.1",
123 "redux-thunk": "^2.3.0", 125 "redux-thunk": "^2.3.0",
124 "rickshaw": "1.6.6", 126 "rickshaw": "1.6.6",
127 + "semantic-ui-react": "^0.87.3",
125 "showdown": "1.8.6", 128 "showdown": "1.8.6",
126 "skycons": "^1.0.0", 129 "skycons": "^1.0.0",
127 - "widgster": "^1.0.0" 130 + "widgster": "^1.0.0",
131 + "xlsx": "^0.14.4"
128 }, 132 },
129 "devDependencies": { 133 "devDependencies": {
130 "@babel/core": "7.4.4", 134 "@babel/core": "7.4.4",
...@@ -140,10 +144,10 @@ ...@@ -140,10 +144,10 @@
140 "bfj": "6.1.1", 144 "bfj": "6.1.1",
141 "bundle-loader": "0.5.6", 145 "bundle-loader": "0.5.6",
142 "case-sensitive-paths-webpack-plugin": "2.2.0", 146 "case-sensitive-paths-webpack-plugin": "2.2.0",
143 - "chalk": "2.4.2", 147 + "chalk": "^2.4.2",
144 "css-loader": "2.1.1", 148 "css-loader": "2.1.1",
145 - "dotenv": "8.0.0", 149 + "dotenv": "^8.2.0",
146 - "dotenv-expand": "5.1.0", 150 + "dotenv-expand": "^5.1.0",
147 "eslint": "5.16.0", 151 "eslint": "5.16.0",
148 "eslint-config-react-app": "4.0.1", 152 "eslint-config-react-app": "4.0.1",
149 "eslint-loader": "2.1.1", 153 "eslint-loader": "2.1.1",
...@@ -175,7 +179,7 @@ ...@@ -175,7 +179,7 @@
175 "style-loader": "0.23.0", 179 "style-loader": "0.23.0",
176 "terser-webpack-plugin": "1.2.3", 180 "terser-webpack-plugin": "1.2.3",
177 "url-loader": "1.1.2", 181 "url-loader": "1.1.2",
178 - "webpack": "4.31.0", 182 + "webpack": "^4.31.0",
179 "webpack-dev-server": "3.3.1", 183 "webpack-dev-server": "3.3.1",
180 "webpack-manifest-plugin": "2.0.4", 184 "webpack-manifest-plugin": "2.0.4",
181 "webpack-raphael": "2.1.4", 185 "webpack-raphael": "2.1.4",
......

10.4 KB | W: | H:

12 KB | W: | H:

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

5.18 KB | W: | H:

12 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 work correctly both with client-side routing and a non-root public URL. 19 work correctly both with client-side routing and a non-root public URL.
20 Learn how to configure a non-root public URL by running `npm run build`. 20 Learn how to configure a non-root public URL by running `npm run build`.
21 --> 21 -->
22 - <title>Sing App React Dashboard - Admin Template built with React</title> 22 + <title>Video Emergency Detection</title>
23 <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."> 23 <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.">
24 <meta name="keywords" content="react admin, react dashboard, react admin template, react theme, react dashboard template, react dashboard template"> 24 <meta name="keywords" content="react admin, react dashboard, react admin template, react theme, react dashboard template, react dashboard template">
25 <meta name="author" content="Flatlogic LLC."> 25 <meta name="author" content="Flatlogic LLC.">
......
1 -export const DISMISS_ALERT = 'DISMISS_ALERT';
2 -
3 -export function dismissAlert(id) {
4 - return {
5 - type: DISMISS_ALERT,
6 - id,
7 - };
8 -}
1 -import axios from 'axios';
2 -
3 -export const RECEIVED_DATA_SUCCESS = 'RECEIVED_DATA_SUCCESS';
4 -export const RECEIVING_DATA = 'RECEIVING_DATA';
5 -
6 -export function receiveDataRequest() {
7 - return (dispatch) => {
8 - dispatch(receivingData());
9 - axios.get('/analytics').then(res => {
10 - dispatch(receiveDataSuccess(res.data));
11 - })
12 - };
13 -}
14 -
15 -export function receiveDataSuccess(payload) {
16 - return {
17 - type: RECEIVED_DATA_SUCCESS,
18 - payload
19 - }
20 -}
21 -
22 -export function receivingData() {
23 - return {
24 - type: RECEIVING_DATA
25 - }
26 -}
27 -
28 -
29 -
30 -
1 -import axios from 'axios';
2 -import { toast } from 'react-toastify';
3 -
4 -export const RECEIVED_PRODUCTS = 'RECEIVED_PRODUCTS';
5 -export const RECEIVING_PRODUCTS = 'RECEIVING_PRODUCTS';
6 -export const RECEIVED_PRODUCT = 'RECEIVED_PRODUCT';
7 -export const RECEIVING_PRODUCT = 'RECEIVING_PRODUCT';
8 -export const UPDATED_PRODUCT = 'UPDATED_PRODUCT';
9 -export const UPDATING_PRODUCT = 'UPDATING_PRODUCT';
10 -export const DELETED_PRODUCT = 'DELETED_PRODUCT';
11 -export const DELETING_PRODUCT = 'DELETING_PRODUCT';
12 -export const RECEIVED_IMAGES = 'RECEIVED_IMAGES';
13 -
14 -export function getProductsRequest() {
15 - return (dispatch) => {
16 - dispatch(receivingProducts());
17 - axios.get('/products').then(res => {
18 - dispatch(receiveProducts(res.data));
19 - })
20 - };
21 -}
22 -
23 -export function loadProductRequest(id) {
24 - return (dispatch) => {
25 - dispatch(receivingProduct());
26 - axios.get('/products/' + id).then(res => {
27 - dispatch(receiveProduct(res.data));
28 - })
29 - };
30 -}
31 -
32 -export function updateProductRequest(product) {
33 - return (dispatch) => {
34 - dispatch(updatingProduct());
35 - axios.put('/products/' + product.id, product).then(res => {
36 - dispatch(updateProduct(res.data));
37 - toast.success("Product has been Updated!");
38 - })
39 - };
40 -}
41 -
42 -export function createProductRequest(payload) {
43 - return (dispatch) => {
44 - dispatch(updatingProduct());
45 - axios.post('/products', payload.product).then(res => {
46 - dispatch(updateProduct(res.data));
47 - payload.history.push('/app/ecommerce/management');
48 - toast.success("Product has been Created!");
49 - })
50 - };
51 -}
52 -
53 -export function deleteProductRequest(payload) {
54 - return (dispatch) => {
55 - dispatch(deletingProduct(payload));
56 - axios.delete('/products/' + payload.id).then(res => {
57 - dispatch(deleteProduct({id: payload.id}));
58 - if (payload.history.location.pathname !== '/app/ecommerce/management') {
59 - payload.history.push('/app/ecommerce/management');
60 - }
61 - toast.success("Product has been Deleted!");
62 - })
63 - };
64 -}
65 -
66 -export function getProductsImagesRequest(payload) {
67 - return (dispatch) => {
68 - axios.get('/products/images-list').then(res => {
69 - dispatch(receiveProductImages(res.data));
70 - if (!payload.img && res.data.length) {
71 - dispatch(updateProduct({id: payload.id, img: res.data[0]}));
72 - }
73 - })
74 - };
75 -}
76 -
77 -export function receiveProductImages(payload) {
78 - return {
79 - type: RECEIVED_IMAGES,
80 - payload
81 - }
82 -}
83 -
84 -
85 -export function receiveProducts(payload) {
86 - return {
87 - type: RECEIVED_PRODUCTS,
88 - payload
89 - }
90 -}
91 -
92 -export function receivingProducts() {
93 - return {
94 - type: RECEIVING_PRODUCTS
95 - }
96 -}
97 -
98 -export function receiveProduct(payload) {
99 - return {
100 - type: RECEIVED_PRODUCT,
101 - payload
102 - }
103 -}
104 -
105 -export function receivingProduct() {
106 - return {
107 - type: RECEIVING_PRODUCT
108 - }
109 -}
110 -
111 -export function updateProduct(payload) {
112 - return {
113 - type: UPDATED_PRODUCT,
114 - payload
115 - }
116 -}
117 -
118 -export function updatingProduct() {
119 - return {
120 - type: UPDATING_PRODUCT
121 - }
122 -}
123 -
124 -export function deleteProduct(payload) {
125 - return {
126 - type: DELETED_PRODUCT,
127 - payload
128 - }
129 -}
130 -
131 -export function deletingProduct(payload) {
132 - return {
133 - type: DELETING_PRODUCT,
134 - payload
135 - }
136 -}
137 -
138 -
1 -import axios from 'axios';
2 -import { toast } from 'react-toastify';
3 -
4 -export const REGISTER_REQUEST = 'REGISTER_REQUEST';
5 -export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
6 -export const REGISTER_FAILURE = 'REGISTER_FAILURE';
7 -
8 -function requestRegister() {
9 - return {
10 - type: REGISTER_REQUEST,
11 - };
12 -}
13 -
14 -export function receiveRegister() {
15 - return {
16 - type: REGISTER_SUCCESS
17 - };
18 -}
19 -
20 -export function registerError(payload) {
21 - return {
22 - type: REGISTER_FAILURE,
23 - payload,
24 - };
25 -}
26 -
27 -export function registerUser(payload) {
28 - return (dispatch) => {
29 - dispatch(requestRegister());
30 - debugger;
31 - const creds = payload.creds;
32 - if (creds.email.length > 0 && creds.password.length > 0) {
33 - axios.post("/user/signup", creds).then(res => {
34 - dispatch(receiveRegister());
35 - toast.success("You've been registered successfully");
36 - payload.history.push('/login');
37 - }).catch(err => {
38 - dispatch(registerError(err.response.data));
39 - })
40 -
41 - } else {
42 - dispatch(registerError('Something was wrong. Try again'));
43 - }
44 - };
45 -}
1 -import axios from 'axios';
2 -import config from '../config';
3 -import jwt from "jsonwebtoken";
4 -
5 -export const LOGIN_REQUEST = 'LOGIN_REQUEST';
6 -export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
7 -export const LOGIN_FAILURE = 'LOGIN_FAILURE';
8 -export const LOGOUT_REQUEST = 'LOGOUT_REQUEST';
9 -export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
10 -export const LOGOUT_FAILURE = 'LOGOUT_FAILURE';
11 -
12 -function requestLogin() {
13 - return {
14 - type: LOGIN_REQUEST,
15 - };
16 -}
17 -
18 -export function receiveLogin() {
19 - return {
20 - type: LOGIN_SUCCESS
21 - };
22 -}
23 -
24 -function loginError(payload) {
25 - return {
26 - type: LOGIN_FAILURE,
27 - payload,
28 - };
29 -}
30 -
31 -function requestLogout() {
32 - return {
33 - type: LOGOUT_REQUEST,
34 - };
35 -}
36 -
37 -export function receiveLogout() {
38 - return {
39 - type: LOGOUT_SUCCESS,
40 - };
41 -}
42 -
43 -// Logs the user out
44 -export function logoutUser() {
45 - return (dispatch) => {
46 - dispatch(requestLogout());
47 - localStorage.removeItem('token');
48 - localStorage.removeItem('user');
49 - document.cookie = 'token=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
50 - axios.defaults.headers.common['Authorization'] = "";
51 - dispatch(receiveLogout());
52 - };
53 -}
54 -
55 -export function receiveToken(token) {
56 - return (dispatch) => {
57 - let user = jwt.decode(token).user;
58 - delete user.id;
59 - localStorage.setItem('token', token);
60 - localStorage.setItem('user', JSON.stringify(user));
61 - axios.defaults.headers.common['Authorization'] = "Bearer " + token;
62 - dispatch(receiveLogin());
63 - }
64 -}
65 -
66 -export function loginUser(creds) {
67 - return (dispatch) => {
68 - dispatch(requestLogin());
69 - if (creds.social) {
70 - window.location.href = config.baseURLApi + "/user/signin/" + creds.social + (process.env.NODE_ENV === "production" ? "?app=sing-app-react" : "");
71 - }
72 - else if (creds.email.length > 0 && creds.password.length > 0) {
73 - axios.post("/user/signin/local", creds).then(res => {
74 - const token = res.data.token;
75 - dispatch(receiveToken(token));
76 - }).catch(err => {
77 - dispatch(loginError(err.response.data));
78 - })
79 -
80 - } else {
81 - dispatch(loginError('Something was wrong. Try again'));
82 - }
83 - };
84 -}
...@@ -10,21 +10,6 @@ import ErrorPage from '../pages/error'; ...@@ -10,21 +10,6 @@ import ErrorPage from '../pages/error';
10 10
11 import '../styles/theme.scss'; 11 import '../styles/theme.scss';
12 import LayoutComponent from '../components/Layout'; 12 import LayoutComponent from '../components/Layout';
13 -import DocumentationLayoutComponent from '../documentation/DocumentationLayout';
14 -import Login from '../pages/login';
15 -import Register from '../pages/register';
16 -import { logoutUser } from '../actions/user';
17 -
18 -const PrivateRoute = ({dispatch, component, ...rest }) => {
19 - if (!Login.isAuthenticated(localStorage.getItem('token'))) {
20 - dispatch(logoutUser());
21 - return (<Redirect to="/login"/>)
22 - } else {
23 - return ( // eslint-disable-line
24 - <Route {...rest} render={props => (React.createElement(component, props))}/>
25 - );
26 - }
27 -};
28 13
29 const CloseButton = ({closeToast}) => <i onClick={closeToast} className="la la-close notifications-close"/> 14 const CloseButton = ({closeToast}) => <i onClick={closeToast} className="la la-close notifications-close"/>
30 15
...@@ -41,14 +26,9 @@ class App extends React.PureComponent { ...@@ -41,14 +26,9 @@ class App extends React.PureComponent {
41 <Switch> 26 <Switch>
42 <Route path="/" exact render={() => <Redirect to="/app/main"/>}/> 27 <Route path="/" exact render={() => <Redirect to="/app/main"/>}/>
43 <Route path="/app" exact render={() => <Redirect to="/app/main"/>}/> 28 <Route path="/app" exact render={() => <Redirect to="/app/main"/>}/>
44 - <PrivateRoute path="/app" dispatch={this.props.dispatch} component={LayoutComponent}/> 29 + <Route path="/app" component={LayoutComponent}/>
45 - <Route path="/documentation" exact
46 - render={() => <Redirect to="/documentation/getting-started/overview"/>}/>
47 - <Route path="/documentation" component={DocumentationLayoutComponent}/>
48 - <Route path="/register" exact component={Register}/>
49 - <Route path="/login" exact component={Login}/>
50 <Route path="/error" exact component={ErrorPage}/> 30 <Route path="/error" exact component={ErrorPage}/>
51 - <Redirect from="*" to="/app/main/analytics"/> 31 + <Redirect from="*" to="/app/main/"/>
52 </Switch> 32 </Switch>
53 </HashRouter> 33 </HashRouter>
54 </div> 34 </div>
...@@ -58,7 +38,6 @@ class App extends React.PureComponent { ...@@ -58,7 +38,6 @@ class App extends React.PureComponent {
58 } 38 }
59 39
60 const mapStateToProps = state => ({ 40 const mapStateToProps = state => ({
61 - isAuthenticated: state.auth.isAuthenticated,
62 }); 41 });
63 42
64 export default connect(mapStateToProps)(App); 43 export default connect(mapStateToProps)(App);
......
1 -import React from 'react';
2 -import PropTypes from 'prop-types';
3 -import { withRouter } from 'react-router-dom';
4 -import { ListGroup, ListGroupItem, InputGroup, InputGroupAddon, Input, InputGroupText } from 'reactstrap';
5 -import $ from 'jquery';
6 -
7 -import * as a1 from '../../images/people/a1.jpg';
8 -import * as a2 from '../../images/people/a2.jpg';
9 -import * as a3 from '../../images/people/a3.jpg';
10 -import * as a4 from '../../images/people/a4.jpg';
11 -import * as a5 from '../../images/people/a5.jpg';
12 -import * as a6 from '../../images/people/a6.jpg';
13 -import * as avatar from '../../images/avatar.png';
14 -
15 -import s from './Chat.module.scss';
16 -
17 -class Chat extends React.Component {
18 - static propTypes = {
19 - chatOpen: PropTypes.bool,
20 - };
21 -
22 - static defaultProps = {
23 - chatOpen: false,
24 - };
25 -
26 - constructor(props) {
27 - super(props);
28 -
29 - this.handleChangeContacts = this.handleChangeContacts.bind(this);
30 - this.openMessages = this.openMessages.bind(this);
31 - this.filterConversations = this.filterConversations.bind(this);
32 - this.filterMessages = this.filterMessages.bind(this);
33 - this.addMessage = this.addMessage.bind(this);
34 -
35 - this.state = {
36 - todayConversations: [{
37 - name: 'Chris Gray',
38 - status: 'success',
39 - lastMessage: 'Hey! What\'s up? So many times since we',
40 - image: a2,
41 - messages: [{
42 - id: 0,
43 - text: 'Hey! What\'s up?',
44 - }, {
45 - id: 1,
46 - text: 'Are you there?',
47 - }, {
48 - id: 2,
49 - text: 'Let me know when you come back.',
50 - }, {
51 - id: 3,
52 - text: 'I am here!',
53 - fromMe: true,
54 - }],
55 - }, {
56 - name: 'Jamey Brownlow',
57 - status: 'gray-light',
58 - lastMessage: 'Good news coming tonight. Seems they agreed to proceed',
59 - image: avatar,
60 - }, {
61 - name: 'Livia Walsh',
62 - status: 'danger',
63 - lastMessage: 'Check out my latest email plz!',
64 - image: a1,
65 - }, {
66 - name: 'Jaron Fitzroy',
67 - status: 'gray-light',
68 - lastMessage: 'What about summer break?',
69 - image: avatar,
70 - }, {
71 - name: 'Mike Lewis',
72 - status: 'success',
73 - lastMessage: 'Just ain\'t sure about the weekend now. 90% I\'ll make it.',
74 - image: a4,
75 - }],
76 - lastWeekConversations: [{
77 - name: 'Freda Edison',
78 - status: 'gray-light',
79 - lastMessage: 'Hey what\'s up? Me and Monica going for a lunch somewhere. Wanna join?',
80 - image: a6,
81 - }, {
82 - name: 'Livia Walsh',
83 - status: 'success',
84 - lastMessage: 'Check out my latest email plz!',
85 - image: a5,
86 - }, {
87 - name: 'Jaron Fitzroy',
88 - status: 'warning',
89 - lastMessage: 'What about summer break?',
90 - image: a3,
91 - }, {
92 - name: 'Mike Lewis',
93 - status: 'gray-light',
94 - lastMessage: 'Just ain\'t sure about the weekend now. 90% I\'ll make it.',
95 - image: avatar,
96 - }],
97 - chatMessageOpened: true,
98 - conversation: Object,
99 - searchValue: '',
100 - };
101 - }
102 -
103 - openMessages(conversation, e) {
104 - this.setState({
105 - conversation,
106 - chatMessageOpened: false,
107 - });
108 - $(e.currentTarget).removeClass('active').find('.badge').remove();
109 - }
110 -
111 - addMessage(e) {
112 - if (e.key === 'Enter') {
113 - const value = {
114 - text: e.target.value,
115 - fromMe: true,
116 - };
117 -
118 - this.setState({
119 - conversation: Object.assign({}, this.state.conversation, {
120 - messages: [
121 - ...this.state.conversation.messages || [],
122 - value,
123 - ],
124 - }),
125 - });
126 -
127 - e.target.value = ''; // eslint-disable-line
128 - }
129 - }
130 -
131 - handleChangeContacts(event) {
132 - this.setState({ searchValue: event.target.value });
133 - }
134 -
135 - filterConversations(item) {
136 - const isFindName = item.name.toLowerCase()
137 - .indexOf(this.state.searchValue.toLowerCase()) !== -1;
138 - const isFindMessage = item.lastMessage.toLowerCase()
139 - .indexOf(this.state.searchValue.toLowerCase()) !== -1;
140 - return isFindName || isFindMessage;
141 - }
142 -
143 - filterMessages(item) {
144 - return item.text.toLowerCase().indexOf(this.state.searchValue.toLowerCase()) !== -1;
145 - }
146 -
147 - render() {
148 - return (
149 - <aside className={[s.root, this.props.chatOpen ? s.chatOpen : ''].join(' ')}>
150 - <header className={s.chatHeader}>
151 - <h4 className={s.chatTitle}>Contacts</h4>
152 - <div className="input-group input-group-transparent">
153 - <InputGroup size="sm">
154 - <Input placeholder="Search..." value={this.state.searchValue} onChange={this.handleChangeContacts} />
155 - <InputGroupAddon addonType="append">
156 - <InputGroupText>
157 - <i className="fa fa-search"/>
158 - </InputGroupText>
159 - </InputGroupAddon>
160 - </InputGroup>
161 - </div>
162 - </header>
163 - <div className={[s.chatPanel, s.chatContacts, this.state.chatMessageOpened ? s.chatMessageOpen : ''].join(' ')}>
164 - <h5 className={s.navTitle}>TODAY</h5>
165 - <ListGroup id="chat-sidebar-user-group" className={s.chatSidebarUserGroup}>
166 - {this.state.todayConversations
167 - .filter(this.filterConversations)
168 - .map(item =>
169 - <ListGroupItem
170 - key={item.name}
171 - onClick={e => this.openMessages(item, e)}
172 - >
173 - <i className={['fa fa-circle float-right', `text-${item.status}`].join(' ')} />
174 - <span className="thumb-sm float-left mr">
175 - <img className="rounded-circle" src={item.image} alt="..." />
176 - </span>
177 - <div>
178 - <h6 className={s.messageSender}>{item.name}</h6>
179 - <p className={s.messagePreview}>{item.lastMessage}</p>
180 - </div>
181 - </ListGroupItem>,
182 - )}
183 - </ListGroup>
184 -
185 - <h5 className={s.navTitle}>LAST WEEK</h5>
186 - <ListGroup className={s.chatSidebarUserGroup}>
187 - {this.state.lastWeekConversations
188 - .filter(this.filterConversations)
189 - .map(item =>
190 - <ListGroupItem
191 - key={item.name}
192 - onClick={e => this.openMessages(item, e)}
193 - >
194 - <i className={['fa fa-circle float-right', `text-${item.status}`].join(' ')} />
195 - <span className="thumb-sm pull-left mr">
196 - <img className="rounded-circle" src={item.image} alt="..." />
197 - </span>
198 - <div>
199 - <h6 className={s.messageSender}>{item.name}</h6>
200 - <p className={s.messagePreview}>{item.lastMessage}</p>
201 - </div>
202 - </ListGroupItem>,
203 - )}
204 - </ListGroup>
205 - </div>
206 - <div className={[s.chatPanel, s.chatMessages, this.state.chatMessageOpened ? '' : s.chatMessageOpen].join(' ')}>
207 - <h6 className={s.messagesTitle}>
208 - {/* eslint-disable */}
209 - <a onClick={() => this.setState({ chatMessageOpened: true })}>
210 - <i className="fa fa-angle-left mr-xs" />
211 - {this.state.conversation.name}
212 - </a>
213 - {/* eslint-disable */}
214 - </h6>
215 - <ListGroup>
216 - {this.state.conversation.messages &&
217 - this.state.conversation.messages
218 - .filter(this.filterMessages)
219 - .map(item => <ListGroupItem key={item.id} className={[item.fromMe ? s.fromMe : '', s.messageItem]}>
220 - <span className="thumb-sm">
221 - <img className="rounded-circle"
222 - src={item.fromMe ? avatar : this.state.conversation.image} alt="..."/>
223 - </span>
224 - <div className={s.messageBody}>{item.text}</div>
225 - </ListGroupItem>,
226 - )}
227 - </ListGroup>
228 -
229 - <footer className={[s.chatFooter, 'form-group'].join(' ')}>
230 - <input className="form-control fs-mini" onKeyPress={this.addMessage} type="text"
231 - placeholder="Type your message"/>
232 - </footer>
233 - </div>
234 - </aside>
235 - );
236 - }
237 -}
238 -
239 -export default withRouter(Chat);
1 -@import '../../styles/app';
2 -
3 -.root {
4 - position: fixed;
5 - overflow: hidden;
6 - top: 0;
7 - bottom: 0;
8 - right: -$chat-sidebar-width-open;
9 - width: $chat-sidebar-width-open;
10 - border-left: $sidebar-border;
11 - background-color: var(--chat-sidebar-bg-color);
12 - color: #aaa;
13 - transition: right 0.3s ease-in-out;
14 -
15 - @include media-breakpoint-down(md) {
16 - right: -($chat-sidebar-width-open + 25px);
17 - width: $chat-sidebar-width-open + 25px;
18 - }
19 -
20 - &.chatOpen {
21 - right: 0;
22 - }
23 -
24 - .chatHeader {
25 - position: absolute;
26 - width: 100%;
27 - top: 0;
28 - z-index: 3;
29 - padding: 10px;
30 - background-color: var(--chat-sidebar-bg-color);
31 -
32 - input {
33 - padding: 0.6rem 0.85rem;
34 - line-height: 1.5;
35 - }
36 -
37 - .chatTitle {
38 - margin: 10px;
39 - text-transform: uppercase;
40 - font-size: 15px;
41 - font-weight: 400;
42 - }
43 - }
44 -
45 - .chatPanel {
46 - position: absolute;
47 - top: 0;
48 - bottom: 0;
49 - width: 100%;
50 -
51 - :global .list-group-item {
52 - border: 0;
53 - padding: 10px 20px;
54 - z-index: 1;
55 -
56 - .cirle {
57 - font-size: 11px;
58 - line-height: 37px;
59 - margin-left: auto;
60 - }
61 - }
62 -
63 - .navTitle {
64 - margin: 35px 10px 5px 20px;
65 - font-size: 14px;
66 - }
67 -
68 - .navTitle:first-child {
69 - margin-top: 0;
70 - }
71 -
72 - .messageSender {
73 - text-overflow: ellipsis;
74 - color: var(--sidebar-color);
75 - }
76 -
77 - .messagePreview {
78 - margin: 0;
79 - width: 100px;
80 - white-space: nowrap;
81 - overflow: hidden;
82 - text-overflow: ellipsis;
83 - font-size: 85%;
84 - color: #999;
85 - }
86 - }
87 -
88 - .chatContacts {
89 - padding-top: 105px;
90 - left: -100%;
91 - transition: left 0.2s ease-in-out;
92 -
93 - :global .list-group {
94 - margin-top: 10px;
95 -
96 - :global .list-group-item {
97 - cursor: pointer;
98 - }
99 - }
100 -
101 - &.chatMessageOpen {
102 - left: 0;
103 - overflow-y: auto;
104 -
105 - @include scroll-bar(rgba($white, 0.3));
106 - }
107 - }
108 -
109 - .chatMessages {
110 - padding-top: 100px;
111 - right: -100%;
112 - transition: right 0.2s ease-in-out;
113 - background-color: var(--sidebar-bg-color);
114 -
115 - :global .list-group {
116 - position: absolute;
117 - top: 134px; // header height
118 - bottom: 47px; // footer height
119 - width: 100%;
120 - padding-top: 0.5rem;
121 - overflow-y: auto;
122 -
123 - @include scroll-bar(rgba($white, 0.3));
124 -
125 - :global .list-group-item {
126 - align-items: flex-start;
127 - }
128 -
129 - :global .thumb-sm {
130 - float: left;
131 - }
132 - }
133 -
134 - .messageBody {
135 - position: relative;
136 - margin-left: 50px;
137 - padding: 10px;
138 - font-size: 13px;
139 - font-weight: $font-weight-normal;
140 - background-color: $gray-200;
141 - color: $text-color;
142 - border-radius: 0.25rem;
143 -
144 - &::before {
145 - right: 100%;
146 - top: 8px;
147 - content: '';
148 - height: 0;
149 - width: 0;
150 - position: absolute;
151 - border: 10px solid rgba(0, 0, 0, 0);
152 - border-right-color: $gray-200;
153 - }
154 - }
155 -
156 - .fromMe {
157 - flex-direction: row-reverse;
158 -
159 - :global .thumb-sm {
160 - float: right;
161 - }
162 -
163 - .messageBody {
164 - margin-left: 0;
165 - margin-right: 50px;
166 - background-color: theme-color('warning');
167 - color: $gray-800;
168 -
169 - &::before {
170 - right: auto;
171 - left: 100%;
172 - border-right-color: rgba(0, 0, 0, 0);
173 - border-left-color: theme-color('warning');
174 - }
175 - }
176 - }
177 -
178 - .chatFooter {
179 - position: absolute;
180 - z-index: 1;
181 - bottom: 0;
182 - width: 100%;
183 - margin-bottom: 0;
184 - padding: 10px;
185 - background-color: $white;
186 - }
187 -
188 - &.chatMessageOpen {
189 - right: 0;
190 - }
191 -
192 - .messagesTitle {
193 - margin-bottom: 0;
194 -
195 - a {
196 - display: block;
197 - margin-top: -7px;
198 - padding: 17px 16px;
199 - }
200 - }
201 - }
202 -
203 - .chatSidebarUserGroup {
204 - :global .list-group-item {
205 - transition: $transition-base;
206 - }
207 -
208 - :global .list-group-item.active {
209 - background: rgba($white, 0.1);
210 - }
211 -
212 - :global .list-group-item.active h6 {
213 - color: theme-color('warning');
214 - font-weight: $badge-font-weight;
215 - }
216 -
217 - :global .list-group-item:hover {
218 - background: var(--sidebar-action-bg);
219 - }
220 -
221 - :global .badge {
222 - margin: 8px 5px 0 0;
223 - padding: 3px 5px;
224 - }
225 -
226 - :global .fa {
227 - margin-top: 11px;
228 - }
229 - }
230 -
231 - .messageItem {
232 - &:hover {
233 - background: transparent;
234 - }
235 - }
236 -}
1 -import React from 'react';
2 -import { connect } from 'react-redux';
3 -import PropTypes from 'prop-types';
4 -import { withRouter } from 'react-router';
5 -import {
6 - Navbar,
7 - Nav,
8 - Dropdown,
9 - NavItem,
10 - NavLink,
11 - Badge,
12 - DropdownToggle,
13 - DropdownMenu,
14 - DropdownItem,
15 - UncontrolledTooltip,
16 - InputGroupAddon,
17 - InputGroup,
18 - Input,
19 - Form,
20 - FormGroup,
21 -} from 'reactstrap';
22 -import $ from 'jquery';
23 -
24 -import Notifications from '../Notifications';
25 -import { logoutUser } from '../../actions/user';
26 -import { toggleSidebar, openSidebar, closeSidebar, changeActiveSidebarItem } from '../../actions/navigation';
27 -
28 -import a5 from '../../images/people/a5.jpg';
29 -import a6 from '../../images/people/a6.jpg';
30 -
31 -import s from './Header.module.scss'; // eslint-disable-line css-modules/no-unused-class
32 -
33 -class Header extends React.Component {
34 - static propTypes = {
35 - sidebarOpened: PropTypes.bool.isRequired,
36 - sidebarStatic: PropTypes.bool.isRequired,
37 - chatToggle: PropTypes.func.isRequired,
38 - dispatch: PropTypes.func.isRequired,
39 - location: PropTypes.shape({
40 - pathname: PropTypes.string,
41 - }).isRequired,
42 - };
43 -
44 - constructor(props) {
45 - super(props);
46 -
47 - this.toggleMenu = this.toggleMenu.bind(this);
48 - this.switchSidebar = this.switchSidebar.bind(this);
49 - this.toggleNotifications = this.toggleNotifications.bind(this);
50 - this.toggleSidebar = this.toggleSidebar.bind(this);
51 - this.doLogout = this.doLogout.bind(this);
52 -
53 - this.state = {
54 - menuOpen: false,
55 - notificationsOpen: false,
56 - notificationsTabSelected: 1,
57 - };
58 - }
59 - componentDidMount() {
60 - if (window.innerWidth > 576) {
61 - setTimeout(() => {
62 - const $chatNotification = $('#chat-notification');
63 - $chatNotification.removeClass('hide').addClass('animated fadeIn')
64 - .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', () => {
65 - $chatNotification.removeClass('animated fadeIn');
66 - setTimeout(() => {
67 - $chatNotification.addClass('animated fadeOut')
68 - .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd' +
69 - ' oanimationend animationend', () => {
70 - $chatNotification.addClass('hide');
71 - });
72 - }, 6000);
73 - });
74 - $chatNotification.siblings('#toggle-chat')
75 - .append('<i class="chat-notification-sing animated bounceIn"></i>');
76 - }, 4000);
77 - }
78 -
79 - $('#search-input').on('blur focus', (e) => {
80 - $('#search-input').parents('.input-group')[e.type === 'focus' ? 'addClass' : 'removeClass']('focus');
81 - });
82 - }
83 -
84 - toggleNotifications() {
85 - this.setState({
86 - notificationsOpen: !this.state.notificationsOpen,
87 - });
88 - }
89 -
90 - doLogout() {
91 - this.props.dispatch(logoutUser());
92 - }
93 -
94 - // collapse/uncolappse
95 - switchSidebar() {
96 - if (this.props.sidebarOpened) {
97 - this.props.dispatch(closeSidebar());
98 - this.props.dispatch(changeActiveSidebarItem(null));
99 - } else {
100 - const paths = this.props.location.pathname.split('/');
101 - paths.pop();
102 - this.props.dispatch(openSidebar());
103 - this.props.dispatch(changeActiveSidebarItem(paths.join('/')));
104 - }
105 - }
106 -
107 - // static/non-static
108 - toggleSidebar() {
109 - this.props.dispatch(toggleSidebar());
110 - if (this.props.sidebarStatic) {
111 - localStorage.setItem('staticSidebar', 'false');
112 - this.props.dispatch(changeActiveSidebarItem(null));
113 - } else {
114 - localStorage.setItem('staticSidebar', 'true');
115 - const paths = this.props.location.pathname.split('/');
116 - paths.pop();
117 - this.props.dispatch(changeActiveSidebarItem(paths.join('/')));
118 - }
119 - }
120 -
121 - toggleMenu() {
122 - this.setState({
123 - menuOpen: !this.state.menuOpen,
124 - });
125 - }
126 - render() {
127 - const user = JSON.parse(localStorage.getItem('user') || {});
128 -
129 - const firstUserLetter = (user.name|| user.email || "P")[0].toUpperCase();
130 -
131 - return (
132 - <Navbar className={`${s.root} d-print-none`}>
133 - <Nav>
134 - <NavItem>
135 - <NavLink className="d-md-down-none ml-5" id="toggleSidebar" onClick={this.toggleSidebar}>
136 - <i className="la la-bars" />
137 - </NavLink>
138 - <UncontrolledTooltip placement="bottom" target="toggleSidebar">
139 - Turn on/off<br />sidebar<br />collapsing
140 - </UncontrolledTooltip>
141 - <NavLink className="fs-lg d-lg-none" onClick={this.switchSidebar}>
142 - <span className="rounded rounded-lg bg-gray text-white d-md-none"><i className="la la-bars" /></span>
143 - <i className="la la-bars ml-3 d-sm-down-none" />
144 - </NavLink>
145 - </NavItem>
146 - <NavItem className="d-sm-down-none">
147 - <NavLink className="px-2">
148 - <i className="la la-refresh" />
149 - </NavLink>
150 - </NavItem>
151 - <NavItem className="d-sm-down-none">
152 - <NavLink className="px-2">
153 - <i className="la la-times" />
154 - </NavLink>
155 - </NavItem>
156 -
157 - </Nav>
158 -
159 - <Form className="d-sm-down-none ml-5" inline>
160 - <FormGroup>
161 - <InputGroup className="input-group-no-border">
162 - <InputGroupAddon addonType="prepend">
163 - <i className="la la-search" />
164 - </InputGroupAddon>
165 - <Input id="search-input" placeholder="Search Dashboard" />
166 - </InputGroup>
167 - </FormGroup>
168 - </Form>
169 -
170 - <NavLink className={`${s.navbarBrand} d-md-none`}>
171 - <i className="fa fa-circle text-gray mr-n-sm" />
172 - <i className="fa fa-circle text-warning" />
173 - &nbsp;
174 - sing
175 - &nbsp;
176 - <i className="fa fa-circle text-warning mr-n-sm" />
177 - <i className="fa fa-circle text-gray" />
178 - </NavLink>
179 -
180 - <Nav className="ml-auto">
181 - <Dropdown nav isOpen={this.state.notificationsOpen} toggle={this.toggleNotifications} id="basic-nav-dropdown" className={`${s.notificationsMenu} d-sm-down-none`}>
182 - <DropdownToggle nav caret>
183 - <span className={`${s.avatar} rounded-circle thumb-sm float-left mr-2`}>
184 - {user.avatar || user.email === "admin@flatlogic.com" ? (
185 - <img src={user.avatar || a5} alt="..."/>
186 - ) : (
187 - <span>{firstUserLetter}</span>
188 - )}
189 - </span>
190 - <span className="small">{user.name || user.email || "Philip smith"}</span>
191 - <span className="ml-1 circle bg-warning text-white fw-bold">13</span>
192 - </DropdownToggle>
193 - <DropdownMenu right className={`${s.notificationsWrapper} py-0 animated animated-fast fadeInUp`}>
194 - <Notifications />
195 - </DropdownMenu>
196 - </Dropdown>
197 - <Dropdown nav isOpen={this.state.menuOpen} toggle={this.toggleMenu} className="d-sm-down-none">
198 - <DropdownToggle nav>
199 - <i className="la la-cog" />
200 - </DropdownToggle>
201 - <DropdownMenu right className="super-colors">
202 - <DropdownItem><i className="la la-user" /> My Account</DropdownItem>
203 - <DropdownItem divider />
204 - <DropdownItem href="/calendar">Calendar</DropdownItem>
205 - <DropdownItem href="/inbox">Inbox &nbsp;&nbsp;<Badge color="danger" pill className="animated bounceIn">9</Badge></DropdownItem>
206 - <DropdownItem divider />
207 - <DropdownItem onClick={this.doLogout}><i className="la la-sign-out" /> Log Out</DropdownItem>
208 - </DropdownMenu>
209 - </Dropdown>
210 - <NavItem>
211 - <NavLink className="d-sm-down-none mr-5" id="toggle-chat" onClick={this.props.chatToggle}>
212 - <i className="la la-globe" />
213 - </NavLink>
214 - <div id="chat-notification" className={`${s.chatNotification} hide `}>
215 - <div className={s.chatNotificationInner}>
216 - <h6 className={`${s.title} d-flex`}>
217 - <span className="thumb-xs">
218 - <img src={a6} alt="" className="rounded-circle mr-xs float-left" />
219 - </span>
220 - Jess Smith
221 - </h6>
222 - <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>
223 - </div>
224 - </div>
225 - </NavItem>
226 - <NavItem className="fs-lg d-md-none">
227 - <NavLink href="#" onClick={this.props.chatToggle}>
228 - <span className="rounded rounded-lg bg-gray text-white"><i className="la la-globe" /></span>
229 - </NavLink>
230 - </NavItem>
231 - </Nav>
232 - </Navbar>
233 - );
234 - }
235 -}
236 -
237 -function mapStateToProps(store) {
238 - return {
239 - sidebarOpened: store.navigation.sidebarOpened,
240 - sidebarStatic: store.navigation.sidebarStatic,
241 - };
242 -}
243 -
244 -export default withRouter(connect(mapStateToProps)(Header));
245 -
1 -@import '../../styles/app';
2 -
3 -.root {
4 - z-index: 100;
5 - background: var(--navbar-bg);
6 - box-shadow: var(--navbar-shadow);
7 -
8 - @include media-breakpoint-down(sm) {
9 - padding: 7px 0;
10 - }
11 -
12 - :global {
13 - .input-group {
14 - overflow: hidden;
15 - }
16 -
17 - .input-group-prepend {
18 - background-color: #fff;
19 - transition: background-color ease-in-out 0.15s;
20 - border-top-left-radius: 0.3rem;
21 - border-bottom-left-radius: 0.3rem;
22 - display: flex;
23 - justify-content: center;
24 - align-items: center;
25 - width: 35px;
26 - }
27 -
28 - .focus .input-group-prepend {
29 - background: #f8f9fa;
30 - }
31 - }
32 -}
33 -
34 -.logo {
35 - font-size: 16px;
36 -}
37 -
38 -.navbarForm {
39 - padding: 6px 0 6px 1rem;
40 - margin-left: 10px;
41 - display: inline-block;
42 - top: 2px;
43 - width: auto;
44 -
45 - .inputAddon {
46 - position: relative;
47 - display: inline;
48 - border: none;
49 - background-color: #fff;
50 - transition: background-color ease-in-out 0.15s;
51 - }
52 -
53 - input {
54 - border: none;
55 - padding: 0.6rem 0.85rem 0.6rem 0;
56 - display: inline !important;
57 - width: 250px !important;
58 - top: 2px;
59 - }
60 -}
61 -
62 -.chatNotification {
63 - position: absolute;
64 - right: 35px;
65 - top: 50px;
66 - z-index: 20;
67 - margin-top: 3px;
68 - padding: 5px 0;
69 - cursor: pointer;
70 -
71 - &::before {
72 - content: ' ';
73 - position: absolute;
74 - top: 0;
75 - right: 18px;
76 - width: 0;
77 - height: 0;
78 - border-left: 5px solid transparent;
79 - border-right: 5px solid transparent;
80 - border-bottom: 5px solid $gray-800;
81 - }
82 -
83 - .chatNotificationInner {
84 - min-width: 120px;
85 - padding: 8px;
86 - font-size: 12px;
87 - border-radius: 0.25rem;
88 - text-decoration: none;
89 - background-color: $gray-800;
90 - color: #fff;
91 - }
92 -
93 - .text {
94 - margin-top: 5px;
95 - margin-bottom: 0;
96 - color: $gray-600;
97 - }
98 -
99 - .title {
100 - margin: 0;
101 - font-weight: 600;
102 - line-height: 28px;
103 - font-size: 0.875rem;
104 -
105 - span {
106 - margin-right: 7px;
107 - }
108 - }
109 -}
110 -
111 -.navbarBrand {
112 - position: absolute;
113 - left: 0;
114 - right: 0;
115 - top: 0;
116 - bottom: 0;
117 - display: flex;
118 - justify-content: center;
119 - align-items: center;
120 - font-weight: 700;
121 - font-size: 1.25rem;
122 - pointer-events: none;
123 -
124 - i {
125 - font-size: 10px;
126 - }
127 -}
128 -
129 -.notificationsMenu {
130 - :global .dropdown-menu {
131 - left: auto !important;
132 - right: 0 !important;
133 - top: $navbar-height !important;
134 - }
135 -}
136 -
137 -.notificationsWrapper {
138 - width: min-content;
139 -}
140 -
141 -.avatar {
142 - display: flex;
143 - align-items: center;
144 - justify-content: center;
145 - overflow: hidden;
146 - height: 40px;
147 - width: 40px;
148 - background: $warning;
149 - font-weight: 600;
150 - font-size: 18px;
151 -}
1 -import React, { Component } from 'react';
2 -import cx from 'classnames';
3 -import { Button } from 'reactstrap';
4 -import PropTypes from 'prop-types';
5 -import { connect } from 'react-redux';
6 -import { DashboardThemes } from '../../reducers/layout';
7 -import { changeTheme } from '../../actions/layout';
8 -
9 -import Widget from '../Widget';
10 -
11 -import s from './Helper.module.scss'; // eslint-disable-line
12 -import themeDark from '../../images/theme-dark.png';
13 -import themeLight from '../../images/theme-light.png';
14 -
15 -class Helper extends Component {
16 - static propTypes = {
17 - dispatch: PropTypes.func.isRequired,
18 - dashboardTheme: PropTypes.string
19 - };
20 -
21 - static defaultProps = {
22 - dashboardTheme: DashboardThemes.DARK
23 - };
24 -
25 - state = { isOpened: false };
26 -
27 - toggle = () => {
28 - this.setState(prevState => ({
29 - isOpened: !prevState.isOpened,
30 - }));
31 - };
32 -
33 - changeTheme = (state) => {
34 - this.props.dispatch(changeTheme(state));
35 - };
36 -
37 - render() {
38 - const { isOpened } = this.state;
39 - return (
40 - <div className={cx(s.themeHelper, { [s.themeHelperOpened]: isOpened })}>
41 - <Widget
42 - className={s.themeHelperContent}
43 - bodyClass="mt-3"
44 - title={
45 - <header className={cx(s.themeHelperHeader, 'd-flex p-0')}>
46 - <Button color="warning" className={s.themeHelperBtn} onClick={this.toggle}>
47 - <div className={cx(s.themeHelperSpinner, 'text-white')}>
48 - <i className="la la-cog" />
49 - <i className="la la-cog" />
50 - </div>
51 - </Button>
52 - <h6>Theme</h6>
53 - </header>
54 - }
55 - >
56 - <div className={s.themeSwitcher}>
57 - <div className={cx(s.theme, "mb-3")}>
58 - <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/>
59 - <label htmlFor="css-light">
60 - <img className={s.themeImage} src={themeLight} alt="light theme"/>
61 - </label>
62 - </div>
63 - <div className={s.theme}>
64 - <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/>
65 - <label htmlFor="css-dark">
66 - <img className={s.themeImage} src={themeDark} alt="dark theme"/>
67 - </label>
68 - </div>
69 - </div>
70 - <div className="mt-4">
71 - <Button
72 - href="https://flatlogic.com/admin-dashboards/sing-app-react"
73 - target="_blank"
74 - className="btn-rounded-f btn-block fs-mini"
75 - color="warning"
76 - >
77 - <span className="text-white">Purchase</span>
78 - </Button>
79 - <Button
80 - href="http://demo.flatlogic.com/sing-app/documentation/"
81 - target="_blank"
82 - className="btn-rounded-f btn-block fs-mini text-white"
83 - >
84 - Documentation
85 - </Button>
86 - </div>
87 - <div className="d-flex justify-content-between mt-lg">
88 - <Button
89 - href="https://flatlogic.com/contact"
90 - target="_blank"
91 - className="btn-outline-default btn-rounded-f fs-mini text-muted px-2"
92 - >
93 - <i className="glyphicon glyphicon-headphones mr-xs" />
94 - Support
95 - </Button>
96 - <Button
97 - href="https://github.com/flatlogic/sing-app"
98 - target="_blank"
99 - className="btn-outline-default btn-rounded-f fs-mini text-muted px-2"
100 - >
101 - <i className="fa fa-github mr-xs" />
102 - Github
103 - </Button>
104 - </div>
105 - <div className="mt-lg d-flex flex-column align-items-center theme-helper__sharing">
106 - <span className="fs-sm">
107 - Thank you for sharing!
108 - </span>
109 - <div className="d-flex justify-content-center text-light mt-2">
110 - <a
111 - target="_blank"
112 - rel="noopener noreferrer"
113 - href="https://twitter.com/intent/tweet?text=Amazing%20dashboard%20built%20with%20NodeJS,%20React%20and%20Bootstrap!&url=https://github.com/flatlogic/react-dashboard&via=flatlogic"
114 - >
115 - <i className="fa fa-twitter pr-1" />
116 - </a>
117 - <a
118 - href="https://www.facebook.com/search/top/?q=flatlogic%20llc"
119 - target="_blank"
120 - rel="noopener noreferrer"
121 - >
122 - <i className="fa fa-facebook pl-1" />
123 - </a>
124 - </div>
125 - </div>
126 - </Widget>
127 - </div>
128 - );
129 - }
130 -}
131 -
132 -function mapStateToProps(store) {
133 - return {
134 - dashboardTheme: store.layout.dashboardTheme,
135 - };
136 -}
137 -
138 -export default connect(mapStateToProps)(Helper);
1 -@import '../../styles/app';
2 -
3 -.themeHelper {
4 - width: $sidebar-width-open;
5 - position: fixed;
6 - right: -$sidebar-width-open;
7 - top: $navbar-height * 1.5;
8 - z-index: 100;
9 -
10 - @include transition(right $sidebar-transition-time ease-in-out);
11 -
12 - & :global {
13 - .abc-radio-secondary input[type="radio"]:not(:checked)+label::before {
14 - background-color: #798892;
15 - }
16 -
17 - .abc-radio-warning input[type="radio"]:not(:checked)+label::before {
18 - background-color: theme-color('warning');
19 - }
20 - }
21 -
22 - .themeSwitcher {
23 - display: flex;
24 - flex-direction: column;
25 - align-items: center;
26 -
27 - .theme {
28 - position: relative;
29 -
30 - &,
31 - & > label {
32 - width: 100%;
33 - height: max-content;
34 - }
35 -
36 - & > input {
37 - position: absolute;
38 - width: 0;
39 - height: 0;
40 - padding: 0;
41 - margin: 0;
42 - pointer-events: none;
43 - opacity: 0;
44 - }
45 -
46 - & > label {
47 - margin: 0;
48 - border: 1px solid $input-border-color;
49 - padding: 3px;
50 - border-radius: $border-radius;
51 - transition: background-color .2s ease-in-out;
52 - cursor: pointer;
53 - display: block;
54 -
55 - &:hover {
56 - background-color: $gray-200;
57 - }
58 - }
59 -
60 - & > input:checked + label {
61 - background-color: $gray-300;
62 - }
63 -
64 - .themeImage {
65 - width: 100%;
66 - }
67 - }
68 - }
69 -
70 - &.themeHelperOpened {
71 - right: 0;
72 - }
73 -
74 - .themeHelperBtn {
75 - position: absolute;
76 - width: $sidebar-width-open / 4;
77 - transform: translateX(-76px);
78 - margin-top: -($widget-padding-vertical);
79 - cursor: pointer;
80 - z-index: 200;
81 - border-radius: 50% 0 0 50%;
82 - padding: $spacer * 0.8 $spacer / 2 $spacer * 0.8 $spacer;
83 - &,
84 - &:not(.active) {
85 - box-shadow: $widget-shadow-designated !important;
86 - }
87 -
88 - i {
89 - animation-duration: 6500ms;
90 - animation-iteration-count: infinite;
91 - animation-timing-function: linear;
92 - }
93 -
94 - i:first-of-type {
95 - animation-name: spin;
96 - margin-right: -$spacer * 1.15;
97 - vertical-align: text-bottom;
98 - }
99 -
100 - i:last-of-type {
101 - animation-name: spin-reverse;
102 - vertical-align: $font-size-sm;
103 - }
104 - }
105 -
106 - .themeHelperSpinner {
107 - font-size: $font-size-lg * 1.4;
108 - line-height: initial;
109 - }
110 -
111 - .themeHelperHeader {
112 - padding-top: 0;
113 -
114 - h6 {
115 - margin: auto;
116 - }
117 - }
118 -
119 - .themeHelperContent {
120 - box-shadow: $widget-shadow-designated;
121 - border-radius: 0;
122 - }
123 -
124 - .themeHelperSharing {
125 - font-size: $font-size-lg;
126 - cursor: pointer;
127 - }
128 -
129 - :global .glyphicon {
130 - vertical-align: top;
131 - }
132 -
133 - @keyframes spin {
134 - 0% {
135 - transform: rotate(0deg);
136 - }
137 -
138 - 50% {
139 - transform: rotate(360deg);
140 - }
141 - }
142 -
143 - @keyframes spin-reverse {
144 - 0% {
145 - transform: rotate(0deg);
146 - }
147 -
148 - 50% {
149 - transform: rotate(-360deg);
150 - }
151 - }
152 -}
1 -import React from 'react';
2 -import PropTypes from 'prop-types';
3 -import Formsy from 'formsy-react';
4 -
5 -Formsy.addValidationRule('isRange', (values, value, array) => (value >= array[0] && value <= array[1]));
6 -
7 -class InputValidation extends React.Component {
8 - /* eslint-disable */
9 - static propTypes = {
10 - trigger: PropTypes.string,
11 - type: PropTypes.string,
12 - className: PropTypes.string,
13 - name: PropTypes.string,
14 - id: PropTypes.string,
15 - placeholder: PropTypes.string,
16 - setValue: PropTypes.func,
17 - isFormSubmitted: PropTypes.func,
18 - getErrorMessage: PropTypes.func,
19 - showRequired: PropTypes.func,
20 - };
21 - /* eslint-enable */
22 -
23 - static defaultProps = {
24 - trigger: null,
25 - type: 'text',
26 - className: '',
27 - name: '',
28 - id: '',
29 - placeholder: '',
30 - };
31 -
32 - constructor() {
33 - super();
34 - this.changeValue = this.changeValue.bind(this);
35 - }
36 -
37 - changeValue(event) {
38 - this.props.setValue(event.currentTarget.value);
39 - }
40 -
41 - render() {
42 - const errorMessageObj = (this.props.isFormSubmitted() || this.props.trigger) ? this.props.getErrorMessage() : null;
43 - const required = (this.props.isFormSubmitted() && this.props.showRequired()) ?
44 - <span className={'help-block text-danger'}>This value is required.</span> : null;
45 - const errorMsg = [];
46 - if (errorMessageObj) {
47 - Object.keys(errorMessageObj).forEach((type) => {
48 - errorMsg.push(errorMessageObj[type]);
49 - });
50 - }
51 - const errorList = errorMsg.map((msg, index) =>
52 - <span key={`msg-err-${index.toString()}`} className={'help-block text-danger'}>{msg}</span>,
53 - );
54 -
55 - return (
56 - <div className={this.props.className}>
57 - <input
58 - type={this.props.type}
59 - name={this.props.name}
60 - id={this.props.id}
61 - className={'form-control'}
62 - onBlur={this.changeValue}
63 - placeholder={this.props.placeholder}
64 - />
65 - {required}
66 - {errorList}
67 - </div>
68 - );
69 - }
70 -}
71 -
72 -export default Formsy.HOC(InputValidation);
This diff is collapsed. Click to expand it.
1 -/* eslint-env mocha */
2 -/* eslint-disable padded-blocks, no-unused-expressions */
3 -
4 -import React from 'react';
5 -import { expect } from 'chai';
6 -import { render } from 'enzyme';
7 -import configureStore from 'redux-mock-store';
8 -import thunk from 'redux-thunk';
9 -import App from '../App';
10 -import Layout from './Layout';
11 -
12 -const middlewares = [thunk];
13 -const mockStore = configureStore(middlewares);
14 -const initialState = {};
15 -
16 -describe('Layout', () => {
17 - it('renders children correctly', () => {
18 - const store = mockStore(initialState);
19 -
20 - const wrapper = render(
21 - <App context={{ insertCss: () => {}, store }}>
22 - <Layout>
23 - <div className="child" />
24 - </Layout>
25 - </App>,
26 - );
27 - expect(wrapper.find('div.child').length).to.eq(1);
28 - });
29 -
30 -});
1 -import React from 'react';
2 -import {
3 - ButtonGroup,
4 - Button,
5 -} from 'reactstrap';
6 -import classnames from 'classnames';
7 -import NotificationsDemo from './notifications-demo/Notifications';
8 -import NewNotificationsDemo from './notifications-demo/NewNotifications';
9 -import MessagesDemo from './notifications-demo/Messages';
10 -import ProgressDemo from './notifications-demo/Progress';
11 -
12 -import s from './Notifications.module.scss';
13 -
14 -class Notifications extends React.Component {
15 - constructor(props) {
16 - super(props);
17 -
18 - this.state = {
19 - notificationsTabSelected: 1,
20 - newNotifications: null,
21 - isLoad: false,
22 - };
23 - }
24 -
25 - changeNotificationsTab(tab) {
26 - this.setState({
27 - notificationsTabSelected: tab,
28 - newNotifications: null,
29 - });
30 - }
31 -
32 - loadNotifications() {
33 - this.setState({
34 - isLoad: true,
35 - });
36 -
37 - setTimeout(() => {
38 - this.setState({
39 - newNotifications: (<NewNotificationsDemo />),
40 - isLoad: false,
41 - });
42 - }, 1500);
43 - }
44 -
45 - render() {
46 - let notificationsTab;
47 -
48 - switch (this.state.notificationsTabSelected) {
49 - case 1:
50 - notificationsTab = (<NotificationsDemo />);
51 - break;
52 - case 2:
53 - notificationsTab = (<MessagesDemo />);
54 - break;
55 - case 3:
56 - notificationsTab = (<ProgressDemo />);
57 - break;
58 - default:
59 - notificationsTab = (<NotificationsDemo />);
60 - break;
61 - }
62 - return (
63 - <section className={`${s.notifications} card navbar-notifications`}>
64 - <header className={[s.cardHeader, 'card-header'].join(' ')}>
65 - <div className="text-center mb-sm">
66 - <strong>You have 13 notifications</strong>
67 - </div>
68 - <ButtonGroup id="notification-buttons">
69 - <Button color="secondary" onClick={() => this.changeNotificationsTab(1)} active={this.state.notificationsTabSelected === 1}>Notifications</Button>
70 - <Button color="secondary" onClick={() => this.changeNotificationsTab(2)} active={this.state.notificationsTabSelected === 2}>Messages</Button>
71 - <Button color="secondary" onClick={() => this.changeNotificationsTab(3)} active={this.state.notificationsTabSelected === 3}>Progress</Button>
72 - </ButtonGroup>
73 - </header>
74 - {this.state.newNotifications || notificationsTab}
75 - <footer className={[s.cardFooter, 'text-sm', 'card-footer'].join(' ')}>
76 - <Button
77 - color="link"
78 - className={classnames({ disabled: this.state.isLoad }, s.btnNotificationsReload, 'btn-xs', 'float-right', 'py-0')}
79 - onClick={() => this.loadNotifications()}
80 - id="load-notifications-btn"
81 - >
82 - {this.state.isLoad ? <span><i className="la la-refresh la-spin" /> Loading...</span> : <i className="la la-refresh" />}
83 - </Button>
84 - <span className="fs-mini">Synced at: 21 Apr 2014 18:36</span>
85 - </footer>
86 - </section>
87 - );
88 - }
89 -}
90 -
91 -export default Notifications;
1 -@import '../../styles/app';
2 -
3 -.notifications {
4 - @include media-breakpoint-up(md) {
5 - width: 333px;
6 - }
7 -
8 - height: 100%;
9 - border: none;
10 -}
11 -
12 -.cardHeader {
13 - border-radius: 0;
14 -}
15 -
16 -.cardFooter {
17 - padding-top: 14px;
18 - padding-bottom: 14px;
19 -}
20 -
21 -.btnNotificationsReload {
22 - color: $navbar-link-color;
23 - outline: none;
24 -
25 - i::before {
26 - top: 2px;
27 - }
28 -}
1 -@import '../../../styles/app';
2 -
3 -.listGroup {
4 - display: block;
5 - height: 320px;
6 - overflow-y: scroll;
7 -
8 - .listGroupItem:first-child {
9 - border: none;
10 - }
11 -}
12 -
13 -.listGroupItem {
14 - transition: background-color 0.15s ease-in-out;
15 - text-decoration: none;
16 - color: $gray-700;
17 - border-left: none;
18 - border-right: none;
19 - display: block;
20 -
21 - :global .progress {
22 - transition: background 0.15s ease-in-out;
23 -
24 - &:hover {
25 - background: $black;
26 - }
27 - }
28 -
29 - &:hover {
30 - background-color: $list-group-hover-bg;
31 -
32 - :global .progress {
33 - background: $white !important;
34 - }
35 - }
36 -
37 - &:first-child {
38 - border-top: none;
39 - border-top-right-radius: 0;
40 - border-top-left-radius: 0;
41 - }
42 -
43 - &:last-child {
44 - border-bottom: none;
45 - border-bottom-right-radius: 0;
46 - border-bottom-left-radius: 0;
47 - }
48 -}
49 -
50 -.notificationIcon {
51 - margin-right: 1rem;
52 - float: left;
53 -
54 - @include clearfix;
55 -}
1 -import React from 'react';
2 -import {
3 - ListGroup,
4 - ListGroupItem,
5 -} from 'reactstrap';
6 -
7 -import a1 from '../../../images/people/a1.jpg';
8 -import a2 from '../../../images/people/a2.jpg';
9 -import a4 from '../../../images/people/a4.jpg';
10 -import a6 from '../../../images/people/a6.jpg';
11 -import avatar from '../../../images/avatar.png';
12 -
13 -import s from './ListGroup.module.scss'; // eslint-disable-line
14 -
15 -class MessagesDemo extends React.Component {
16 - render() {
17 - return (
18 - <ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
19 - <ListGroupItem className={[s.listGroupItem, 'bg-warning-light'].join(' ')}>
20 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
21 - <img className="rounded-circle" src={a2} alt="..." />
22 - <i className="status status-bottom bg-success" />
23 - </span>
24 - <time className="text-link help float-right">10 sec ago</time>
25 - <h6 className="m-0 fw-bold mb-1">Chris Gray</h6>
26 - <p className="deemphasize text-ellipsis m-0">Hey! What&apos;s up? So many times since we</p>
27 - </ListGroupItem>
28 - <ListGroupItem className={s.listGroupItem}>
29 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
30 - <img className="rounded-circle" src={avatar} alt="..." />
31 - <i className="status status-bottom bg-success" />
32 - </span>
33 - <time className="text-link help float-right">2 min ago</time>
34 - <h6 className="m-0 mb-1">Jamey Brownlow</h6>
35 - <p className="deemphasize text-ellipsis m-0">Good news coming tonight. Seems they agreed to proceed</p>
36 - </ListGroupItem>
37 - <ListGroupItem className={s.listGroupItem}>
38 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
39 - <img className="rounded-circle" src={a1} alt="..." />
40 - <i className="status status-bottom bg-warning" />
41 - </span>
42 - <time className="text-link help float-right">9 min ago</time>
43 - <h6 className="m-0 mb-1">Livia Walsh</h6>
44 - <p className="deemphasize text-ellipsis m-0">Check out my latest email plz!</p>
45 - </ListGroupItem>
46 - <ListGroupItem className={s.listGroupItem}>
47 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
48 - <img className="rounded-circle" src={avatar} alt="..." />
49 - <i className="status status-bottom bg-danger" />
50 - </span>
51 - <time className="text-link help float-right">12:56 AM</time>
52 - <h6 className="m-0 mb-1">Jaron Fitzroy</h6>
53 - <p className="deemphasize text-ellipsis m-0">What about summer break?</p>
54 - </ListGroupItem>
55 - <ListGroupItem className={s.listGroupItem}>
56 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
57 - <img className="rounded-circle" src={a4} alt="..." />
58 - <i className="status status-bottom bg-gray-light" />
59 - </span>
60 - <time className="text-link help float-right">Yesterday</time>
61 - <h6 className="m-0 mb-1">Mike Lewis</h6>
62 - <p className="deemphasize text-ellipsis m-0">Just ain&apos;t sure about the weekend now. 90% I&apos;ll make it.</p>
63 - </ListGroupItem>
64 - <ListGroupItem className={s.listGroupItem}>
65 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
66 - <img className="rounded-circle" src={a6} alt="..." />
67 - <i className="status status-bottom bg-success" />
68 - </span>
69 - <time className="text-link help float-right">Apr 23</time>
70 - <h6 className="m-0 mb-1">Freda Edison</h6>
71 - <p className="deemphasize text-ellipsis m-0">Hey what&apos;s up? Me and Monica going for a lunch somewhere. Wanna join?</p>
72 - </ListGroupItem>
73 - </ListGroup>
74 - );
75 - }
76 -}
77 -
78 -export default MessagesDemo;
1 -import React from 'react';
2 -import {
3 - ListGroup,
4 - ListGroupItem,
5 - Button,
6 -} from 'reactstrap';
7 -
8 -import s from './ListGroup.module.scss';
9 -
10 -import a3 from '../../../images/people/a3.jpg';
11 -import a5 from '../../../images/people/a5.jpg';
12 -import a6 from '../../../images/people/a6.jpg';
13 -
14 -class NewNotificationsDemo extends React.Component {
15 - render() {
16 - return (
17 - <ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
18 - <ListGroupItem className={`${s.listGroupItem} bg-attention`}>
19 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
20 - <i className="fa fa-check text-success fa-lg" />
21 - </span>
22 - <p className="m-0 overflow-hidden">
23 - 2 issues require your approval.
24 - {/* eslint-disable */}
25 - &nbsp;<a href="#">The Search Project</a> completed on time!
26 - {/* eslint-enable */}
27 - <time className="help-block m-0">
28 - just now
29 - </time>
30 - </p>
31 - </ListGroupItem>
32 - <ListGroupItem className={`${s.listGroupItem} bg-attention`}>
33 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
34 - <img className="rounded-circle" src={a6} alt="..." />
35 - </span>
36 - <p className="m-0 overflow-hidden">
37 - <button className="btn-link">Jeniffer Willington</button>has just endorsed you with 50 points!
38 - <time className="help-block m-0">
39 - 30 sec ago
40 - </time>
41 - </p>
42 - </ListGroupItem>
43 - <ListGroupItem className={s.listGroupItem}>
44 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
45 - <img className="rounded-circle" src={a3} alt="..." />
46 - </span>
47 - <p className="m-0 overflow-hidden">
48 - 1 new user just signed up! Check out
49 - {/* eslint-disable */}
50 - &nbsp;<a href="#">Monica Smith</a>'s account.
51 - {/* eslint-enable */}
52 - <time className="help-block m-0">
53 - 2 mins ago
54 - </time>
55 - </p>
56 - </ListGroupItem>
57 - <ListGroupItem className={s.listGroupItem}>
58 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
59 - <i className="glyphicon glyphicon-upload fa-lg" />
60 - </span>
61 - <p className="text-ellipsis m-0">
62 - 2.1.0-pre-alpha just released.
63 - <time className="help-block m-0">
64 - 5h ago
65 - </time>
66 - </p>
67 - </ListGroupItem>
68 - <ListGroupItem className={s.listGroupItem}>
69 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
70 - <i className="fa fa-bolt fa-lg" />
71 - </span>
72 - <p className="text-ellipsis m-0 overflow-hidden">
73 - Server load limited.
74 - <time className="help-block m-0">
75 - 7h ago
76 - </time>
77 - </p>
78 - </ListGroupItem>
79 - <ListGroupItem className={s.listGroupItem}>
80 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
81 - <img className="rounded-circle" src={a5} alt="..." />
82 - </span>
83 - <p className="m-0 overflow-hidden">
84 - {/* eslint-disable */}
85 - User <a href="#">Jeff</a> registered
86 - {/* eslint-enable */}
87 - &nbsp;&nbsp;
88 - <Button size="xs" color="success" className="mr-1">Allow</Button>
89 - <Button size="xs" color="danger">Deny</Button>
90 - <time className="help-block m-0">
91 - 12:18 AM
92 - </time>
93 - </p>
94 - </ListGroupItem>
95 - <ListGroupItem className={s.listGroupItem}>
96 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
97 - <i className="fa fa-shield fa-lg" />
98 - </span>
99 - <p className="m-0 overflow-hidden">
100 - {/* eslint-disable */}
101 - Instructions for changing your Envato Account password. Please
102 - check your account <a href="#">security page</a>.
103 - {/* eslint-enable */}
104 - <time className="help-block m-0">
105 - 12:18 AM
106 - </time>
107 - </p>
108 - </ListGroupItem>
109 - <ListGroupItem className={s.listGroupItem}>
110 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
111 - <span className="rounded bg-primary rounded-lg">
112 - <i className="fa fa-facebook text-white" />
113 - </span>
114 - </span>
115 - <p className="text-ellipsis m-0">
116 - New <strong>76</strong> facebook likes received.
117 - <time className="help-block m-0">
118 - 15 Apr 2014
119 - </time>
120 - </p>
121 - </ListGroupItem>
122 - <ListGroupItem className={s.listGroupItem}>
123 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
124 - <span className="circle circle-lg bg-gray-dark">
125 - <i className="fa fa-circle-o text-white" />
126 - </span>
127 - </span>
128 - <p className="text-ellipsis m-0">
129 - Dark matter detected.
130 - <time className="help-block m-0">
131 - 15 Apr 2014
132 - </time>
133 - </p>
134 - </ListGroupItem>
135 - </ListGroup>
136 - );
137 - }
138 -}
139 -
140 -export default NewNotificationsDemo;
1 -import React from 'react';
2 -import {
3 - ListGroup,
4 - ListGroupItem,
5 - Button,
6 -} from 'reactstrap';
7 -
8 -import s from './ListGroup.module.scss';
9 -
10 -import a3 from '../../../images/people/a3.jpg';
11 -import a5 from '../../../images/people/a5.jpg';
12 -
13 -class NotificationsDemo extends React.Component {
14 - render() {
15 - return (
16 - <ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
17 - <ListGroupItem className={s.listGroupItem}>
18 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
19 - <img className="rounded-circle" src={a3} alt="..." />
20 - </span>
21 - <p className="m-0 overflow-hidden">
22 - 1 new user just signed up! Check out
23 - {/* eslint-disable */}
24 - &nbsp;<a href="#">Monica Smith</a>'s account.
25 - {/* eslint-enable */}
26 - <time className="help-block m-0">
27 - 2 mins ago
28 - </time>
29 - </p>
30 - </ListGroupItem>
31 - <ListGroupItem className={s.listGroupItem}>
32 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
33 - <i className="glyphicon glyphicon-upload fa-lg" />
34 - </span>
35 - <p className="text-ellipsis m-0">
36 - 2.1.0-pre-alpha just released.
37 - <time className="help-block m-0">
38 - 5h ago
39 - </time>
40 - </p>
41 - </ListGroupItem>
42 - <ListGroupItem className={s.listGroupItem}>
43 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
44 - <i className="fa fa-bolt fa-lg" />
45 - </span>
46 - <p className="text-ellipsis m-0 overflow-hidden">
47 - Server load limited.
48 - <time className="help-block m-0">
49 - 7h ago
50 - </time>
51 - </p>
52 - </ListGroupItem>
53 - <ListGroupItem className={s.listGroupItem}>
54 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
55 - <img className="rounded-circle" src={a5} alt="..." />
56 - </span>
57 - <p className="m-0 overflow-hidden">
58 - {/* eslint-disable */}
59 - User <a href="#">Jeff</a> registered
60 - {/* eslint-enable */}
61 - &nbsp;&nbsp;
62 - <Button size="xs" color="success" className="mr-1">Allow</Button>
63 - <Button size="xs" color="danger">Deny</Button>
64 - <time className="help-block m-0">
65 - 12:18 AM
66 - </time>
67 - </p>
68 - </ListGroupItem>
69 - <ListGroupItem className={s.listGroupItem}>
70 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
71 - <i className="fa fa-shield fa-lg" />
72 - </span>
73 - <p className="m-0 overflow-hidden">
74 - {/* eslint-disable */}
75 - Instructions for changing your Envato Account password. Please
76 - check your account <a href="#">security page</a>.
77 - {/* eslint-enable */}
78 - <time className="help-block m-0">
79 - 12:18 AM
80 - </time>
81 - </p>
82 - </ListGroupItem>
83 - <ListGroupItem className={s.listGroupItem}>
84 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
85 - <span className="rounded bg-primary rounded-lg">
86 - <i className="fa fa-facebook text-white" />
87 - </span>
88 - </span>
89 - <p className="text-ellipsis m-0">
90 - New <strong>76</strong> facebook likes received.
91 - <time className="help-block m-0">
92 - 15 Apr 2014
93 - </time>
94 - </p>
95 - </ListGroupItem>
96 - <ListGroupItem className={s.listGroupItem}>
97 - <span className={[s.notificationIcon, 'thumb-sm'].join(' ')}>
98 - <span className="circle circle-lg bg-gray-dark">
99 - <i className="fa fa-circle-o text-white" />
100 - </span>
101 - </span>
102 - <p className="text-ellipsis m-0">
103 - Dark matter detected.
104 - <time className="help-block m-0">
105 - 15 Apr 2014
106 - </time>
107 - </p>
108 - </ListGroupItem>
109 - </ListGroup>
110 - );
111 - }
112 -}
113 -
114 -export default NotificationsDemo;
1 -import React from 'react';
2 -import {
3 - ListGroup,
4 - ListGroupItem,
5 - Progress,
6 - UncontrolledTooltip,
7 -} from 'reactstrap';
8 -
9 -import s from './ListGroup.module.scss'; // eslint-disable-line
10 -
11 -class ProgressDemo extends React.Component {
12 - render() {
13 - return (
14 - <ListGroup className={[s.listGroup, 'thin-scroll'].join(' ')}>
15 - <ListGroupItem className={s.listGroupItem}>
16 - <span className="text-muted float-right">60%</span>
17 - <h6 className="m-0 mb-1 text-gray">
18 - <strong>Urgent:</strong>
19 - &nbsp;Rails 4.1.0 upgrade
20 - </h6>
21 - <Progress className={['m-0'].join(' ')} color="primary" value="60" />
22 - <span className="help-block">3 notes added by James 2h ago...</span>
23 - </ListGroupItem>
24 - <ListGroupItem className={s.listGroupItem}>
25 - <span className="text-muted float-right">83%</span>
26 - <h6 className="m-0 mb-1 text-gray">
27 - <strong>Primary:</strong>
28 - &nbsp;Sing Web App
29 - </h6>
30 - <Progress className={['progress-sm', 'm-0'].join(' ')} color="success" value="83" />
31 - <span className="help-block">verifying stable probability status</span>
32 - </ListGroupItem>
33 - <ListGroupItem className={s.listGroupItem}>
34 - <span className="text-muted float-right">44%</span>
35 - <h6 className="m-0 mb-1">
36 - <span className="circle bg-gray-dark text-warning" id="TooltipQuestion">
37 - <i className="fa fa-question" />
38 - </span>
39 - <UncontrolledTooltip placement="bottom" target="TooltipQuestion">
40 - 2 issues require your attention
41 - </UncontrolledTooltip>
42 - &nbsp;
43 - Finish The Road to Hell Song
44 - </h6>
45 - <Progress className={['progress-sm', 'm-0'].join(' ')} color="gray-dark" value="44" />
46 - <span className="help-block">last update: 2h ago</span>
47 - </ListGroupItem>
48 - <ListGroupItem className={s.listGroupItem}>
49 - <span className="text-muted float-right">86%</span>
50 - <h6 className="m-0 mb-1 deemphasize text-gray">
51 - Complete project planning
52 - </h6>
53 - <Progress className={['progress-xs', 'm-0'].join(' ')} color="danger" value="86" />
54 - <span className="help-block">no, no way this is not working...</span>
55 - </ListGroupItem>
56 - <ListGroupItem className={s.listGroupItem}>
57 - <span className="text-muted float-right">100%</span>
58 - <h6 className="m-0 mb-1 deemphasize text-gray">
59 - <strong>Completed:</strong>
60 - &nbsp;Instruct newbies on coding standards
61 - </h6>
62 - <Progress className={['progress-xs', 'm-0'].join(' ')} color="primary" value="100" />
63 - <span className="help-block">last update: April 22, 2014 2:36 pm</span>
64 - </ListGroupItem>
65 - </ListGroup>
66 - );
67 - }
68 -}
69 -
70 -export default ProgressDemo;
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 9
10 a { 10 a {
11 display: block; 11 display: block;
12 - color: var(--sidebar-color); 12 + color: #a6b2c1;
13 text-decoration: none; 13 text-decoration: none;
14 cursor: pointer; 14 cursor: pointer;
15 15
......
This diff is collapsed. Click to expand it.
1 -import React from 'react';
2 -import PropTypes from 'prop-types';
3 -import ReactDOM from 'react-dom';
4 -
5 -const Skycons = require('skycons')(window || {});
6 -
7 -class Skycon extends React.Component {
8 - static propTypes = {
9 - color: PropTypes.string.isRequired,
10 - autoPlay: PropTypes.bool,
11 - icon: PropTypes.oneOf([ // eslint-disable-line
12 - 'CLEAR_DAY',
13 - 'CLEAR_NIGHT',
14 - 'PARTLY_CLOUDY_DAY',
15 - 'PARTLY_CLOUDY_NIGHT',
16 - 'CLOUDY',
17 - 'RAIN',
18 - 'SLEET',
19 - 'SNOW',
20 - 'WIND',
21 - 'FOG',
22 - ]),
23 - width: PropTypes.string.isRequired,
24 - height: PropTypes.string.isRequired,
25 - };
26 -
27 - static defaultProps = {
28 - color: null,
29 - autoPlay: true,
30 - width: '100%',
31 - height: '100%',
32 - };
33 -
34 - constructor(props) {
35 - super(props);
36 -
37 - this.state = {
38 - skycons: new Skycons({ color: this.props.color }),
39 - };
40 - }
41 -
42 - componentDidMount() {
43 - const { skycons } = this.state;
44 - skycons.add(ReactDOM.findDOMNode(this), Skycons[this.props.icon]); // eslint-disable-line
45 -
46 - if (this.props.autoPlay) {
47 - skycons.play();
48 - }
49 - }
50 -
51 - componentWillReceiveProps(nextProps) {
52 - this.state.skycons.set(ReactDOM.findDOMNode(this), Skycons[nextProps.icon]); // eslint-disable-line
53 - }
54 -
55 - play() {
56 - this.state.skycons.play();
57 - }
58 -
59 - pause() {
60 - this.state.skycons.pause();
61 - }
62 -
63 - render() {
64 - const {
65 - ...restPops
66 - } = this.props;
67 -
68 - return (
69 - <canvas width={this.props.width} height={this.props.height} {...restPops} />
70 - );
71 - }
72 -}
73 -
74 -export default Skycon;
1 -import React from 'react';
2 -
3 -import $ from 'jquery';
4 -import PropTypes from 'prop-types';
5 -
6 -/* eslint-disable */
7 -import 'imports-loader?jQuery=jquery,this=>window!jquery-sparkline';
8 -/* eslint-enable */
9 -
10 -class Sparklines extends React.Component {
11 - static propTypes = {
12 - data: PropTypes.arrayOf(
13 - PropTypes.arrayOf(PropTypes.number),
14 - ),
15 - options: PropTypes.oneOfType([
16 - PropTypes.arrayOf(
17 - PropTypes.shape({
18 - type: PropTypes.string.isRequired,
19 - }),
20 - ),
21 - PropTypes.shape({
22 - type: PropTypes.string.isRequired,
23 - }),
24 - ]),
25 - };
26 -
27 - static defaultProps = {
28 - data: [],
29 - options: {},
30 - };
31 -
32 - componentDidMount() {
33 - this.initSparkline();
34 - }
35 -
36 - initSparkline() {
37 - const $el = $(this.sparklineRef);
38 -
39 - const model = $.type(this.data) === 'string' ?
40 - this.props.data.replace(/(^,)|(,$)/g, '')
41 - : this.props.data;
42 - const options = this.props.options;
43 -
44 - if ($.type(model) === 'array' && $.type(options) === 'array') {
45 - options.forEach((singleOptions, i) => {
46 - if (i === 0) {
47 - $el.sparkline(model[i], singleOptions);
48 - } else { // set composite for next calls
49 - $el.sparkline(model[i], $.extend({ composite: true }, singleOptions));
50 - }
51 - });
52 - } else {
53 - const data = $.type(model) === 'array' ? model : model.split(',');
54 - $el.sparkline(data, options);
55 - }
56 - }
57 -
58 - render() {
59 - return (
60 - <div
61 - className="sparkline" ref={(r) => {
62 - this.sparklineRef = r;
63 - }}
64 - />
65 - );
66 - }
67 -}
68 -
69 -export default Sparklines;
1 -const hostApi = process.env.NODE_ENV === "development" ? "http://localhost" : "https://flatlogic-node-backend.herokuapp.com"; 1 +const hostApi = process.env.NODE_ENV === "development" ? "http://localhost" : "http://localhost";
2 -const portApi = process.env.NODE_ENV === "development" ? 8080 : ""; 2 +const portApi = process.env.NODE_ENV === "development" ? 8080 : 4000;
3 const baseURLApi = `${hostApi}${portApi ? `:${portApi}` : ``}`; 3 const baseURLApi = `${hostApi}${portApi ? `:${portApi}` : ``}`;
4 4
5 export default { 5 export default {
......
1 -import React, { Component } from 'react';
2 -import PropTypes from 'prop-types';
3 -
4 -class Bundle extends Component {
5 - static propTypes = {
6 - load: PropTypes.func.isRequired,
7 - children: PropTypes.func.isRequired,
8 - };
9 -
10 - static generateBundle = loadModule => () => (
11 - /* eslint-disable */
12 - <Bundle load={loadModule}>
13 - {Mod => Mod ? <Mod /> : <div style={{ textAlign: 'center', paddingTop: '35vh' }}>Loading</div>}
14 - </Bundle>
15 - /* eslint-enable */
16 - );
17 -
18 -
19 - state = {
20 - // short for "module" but that's a keyword in js, so "mod"
21 - mod: null,
22 - };
23 -
24 - componentWillMount() {
25 - this.load(this.props);
26 - }
27 -
28 - componentWillReceiveProps(nextProps) {
29 - if (nextProps.load !== this.props.load) {
30 - this.load(nextProps);
31 - }
32 - }
33 -
34 - load(props) {
35 - this.setState({
36 - mod: null,
37 - });
38 - props.load((mod) => {
39 - this.setState({
40 - // handle both es imports and cjs
41 - mod: mod.default ? mod.default : mod,
42 - });
43 - });
44 - }
45 -
46 - render() {
47 - return this.props.children(this.state.mod);
48 - }
49 -}
50 -
51 -export default Bundle;
1 const config = { 1 const config = {
2 - name: 'sing', 2 + name: 'Video Emergency Detection',
3 - title: 'Sing Dashboard App built with React JS by Flatlogic', 3 + title: 'Video Emergency Detection',
4 version: '3.8.0', 4 version: '3.8.0',
5 settings: { 5 settings: {
6 screens: { 6 screens: {
......
1 -import React, { Component } from 'react';
2 -import hoistStatics from 'hoist-non-react-statics';
3 -import { updateMeta } from '../DOMUtils';
4 -import { defaultMeta } from '../config';
5 -
6 -function withMeta(ComposedComponent) {
7 - class WithMeta extends Component {
8 - componentWillMount() {
9 - if (ComposedComponent.meta) {
10 - Object.keys(ComposedComponent.meta).forEach((metaKey) => {
11 - if (metaKey === 'title') {
12 - document.title = `${ComposedComponent.meta[metaKey]} - ${defaultMeta[metaKey]}`;
13 - return;
14 - }
15 - updateMeta(metaKey, ComposedComponent.meta[metaKey]);
16 - });
17 - }
18 - }
19 -
20 - componentWillUnmount() {
21 - Object.keys(defaultMeta).forEach((metaKey) => {
22 - if (metaKey === 'title') {
23 - document.title = defaultMeta[metaKey];
24 - return;
25 - }
26 - updateMeta(metaKey, defaultMeta[metaKey]);
27 - });
28 - }
29 -
30 - render() {
31 - return <ComposedComponent {...this.props} />;
32 - }
33 - }
34 -
35 - WithMeta.ComposedComponent = ComposedComponent;
36 - return hoistStatics(WithMeta, ComposedComponent);
37 -}
38 -
39 -export default withMeta;
1 -import React from 'react';
2 -import { connect } from 'react-redux';
3 -import PropTypes from 'prop-types';
4 -import classnames from 'classnames';
5 -import { Link } from 'react-router-dom';
6 -import { withRouter } from 'react-router';
7 -import {
8 - Navbar,
9 - Nav,
10 - NavItem,
11 - NavLink,
12 -} from 'reactstrap';
13 -
14 -import { openSidebar, closeSidebar, changeActiveSidebarItem } from '../actions/navigation';
15 -
16 -import s from '../components/Header/Header.module.scss'; // eslint-disable-line css-modules/no-unused-class
17 -import sd from './styles.module.scss';
18 -
19 -import twitterLogo from '../images/documentation/twitter-logo.svg';
20 -import dribbleLogo from '../images/documentation/dribble-logo.svg';
21 -import facebookLogo from '../images/documentation/facebook-logo.svg';
22 -import instagramLogo from '../images/documentation/instagram-logo.svg';
23 -import linkedinLogo from '../images/documentation/linkedin-logo.svg';
24 -import githubLogo from '../images/documentation/github-logo.svg';
25 -
26 -class Header extends React.Component {
27 - static propTypes = {
28 - sidebarOpened: PropTypes.bool.isRequired,
29 - sidebarStatic: PropTypes.bool.isRequired,
30 - chatToggle: PropTypes.func.isRequired,
31 - dispatch: PropTypes.func.isRequired,
32 - location: PropTypes.shape({
33 - pathname: PropTypes.string,
34 - }).isRequired,
35 - };
36 -
37 - constructor(props) {
38 - super(props);
39 -
40 - this.toggleMenu = this.toggleMenu.bind(this);
41 - this.switchSidebar = this.switchSidebar.bind(this);
42 -
43 - this.state = {
44 - menuOpen: false,
45 - notificationsOpen: false,
46 - notificationsTabSelected: 1,
47 - };
48 - }
49 -
50 - // collapse/uncolappse
51 - switchSidebar() {
52 - if (this.props.sidebarOpened) {
53 - this.props.dispatch(closeSidebar());
54 - this.props.dispatch(changeActiveSidebarItem(null));
55 - } else {
56 - const paths = this.props.location.pathname.split('/');
57 - paths.pop();
58 - this.props.dispatch(openSidebar());
59 - this.props.dispatch(changeActiveSidebarItem(paths.join('/')));
60 - }
61 - }
62 -
63 - toggleMenu() {
64 - this.setState({
65 - menuOpen: !this.state.menuOpen,
66 - });
67 - }
68 - render() {
69 - return (
70 - <Navbar className={classnames(s.root, sd.header, 'd-print-none')}>
71 - <div className="container">
72 - <div className="row w-100 d-flex align-items-center">
73 - <Nav>
74 - <NavItem>
75 - <NavLink className="fs-lg d-lg-none d-md-none" onClick={this.switchSidebar}>
76 - <span className="rounded rounded-lg text-white d-md-none"><i className="la la-bars" /></span>
77 - <i className="la la-bars ml-3 d-sm-down-none" />
78 - </NavLink>
79 - </NavItem>
80 - <NavItem>
81 - <NavLink className={classnames(s.logo, 'd-sm-down-none px-4')} href={'/documentation'}>
82 - <span className={'fw-semi-bold'}>Sing App React</span> &nbsp; Documentation
83 - </NavLink>
84 - </NavItem>
85 - </Nav>
86 -
87 - <NavLink className={`${s.navbarBrand} d-md-none text-muted`}>
88 - <i className="fa fa-circle text-gray mr-n-sm" />
89 - <i className="fa fa-circle text-warning" />
90 - &nbsp;
91 - documentation
92 - &nbsp;
93 - <i className="fa fa-circle text-warning mr-n-sm" />
94 - <i className="fa fa-circle text-muted" />
95 - </NavLink>
96 -
97 - <Nav className="ml-auto">
98 - <NavItem className="d-flex alight-items-center d-md-down-none">
99 - <NavLink href="https://twitter.com/flatlogic" className="mr-1">
100 - <img src={twitterLogo} alt="twitter" />
101 - </NavLink>
102 - <NavLink href="https://dribbble.com/flatlogic" className="mr-1">
103 - <img src={dribbleLogo} alt="dribble" />
104 - </NavLink>
105 - <NavLink href="https://dribbble.com/flatlogic" className="mr-1">
106 - <img src={facebookLogo} alt="facebook" />
107 - </NavLink>
108 - <NavLink href="https://instagram.com/flatlogiccom/" className="mr-1">
109 - <img src={instagramLogo} alt="instagram" />
110 - </NavLink>
111 - <NavLink href="https://www.linkedin.com/company/flatlogic/" className="mr-1">
112 - <img src={linkedinLogo} alt="linkedin" />
113 - </NavLink>
114 - <NavLink href="https://github.com/flatlogic" className="mr-3">
115 - <img src={githubLogo} alt="github" />
116 - </NavLink>
117 - </NavItem>
118 - <NavItem className="d-flex align-items-center">
119 - <NavItem className="d-md-down-none">
120 - <Link to="/" className="btn btn-default">
121 - Live Preview
122 - </Link>
123 - </NavItem>
124 - <NavLink href="https://flatlogic.com/admin-dashboards/sing-app-react" target="_blank" className="mr-1">
125 - <button className="btn btn-warning text-gray fw-semi-bold">
126 - Buy Now
127 - </button>
128 - </NavLink>
129 - </NavItem>
130 - </Nav>
131 - </div>
132 - </div>
133 - </Navbar>
134 - );
135 - }
136 -}
137 -
138 -function mapStateToProps(store) {
139 - return {
140 - sidebarOpened: store.navigation.sidebarOpened,
141 - sidebarStatic: store.navigation.sidebarStatic,
142 - };
143 -}
144 -
145 -export default withRouter(connect(mapStateToProps)(Header));
146 -
1 -import React from 'react';
2 -import PropTypes from 'prop-types';
3 -import { connect } from 'react-redux';
4 -import { Col } from 'reactstrap';
5 -import classnames from 'classnames';
6 -import { Switch, Route, withRouter } from 'react-router';
7 -import Hammer from 'rc-hammerjs';
8 -
9 -import Header from './DocumentationHeader';
10 -import Sidebar from './DocumentationSidebar';
11 -import { openSidebar, closeSidebar, changeActiveSidebarItem, toggleSidebar } from '../actions/navigation';
12 -import s from '../components/Layout/Layout.module.scss';
13 -import sd from './styles.module.scss';
14 -
15 -import Overview from './pages/getting-started/Overview'
16 -import Licences from './pages/getting-started/Licences';
17 -import QuickStart from './pages/getting-started/QuickStart';
18 -import Alerts from './pages/components/Alerts';
19 -import Badge from './pages/components/Badge';
20 -import Buttons from './pages/components/Buttons';
21 -import Card from './pages/components/Card';
22 -import Carousel from './pages/components/Carousel';
23 -import Modal from './pages/components/Modal';
24 -import Nav from './pages/components/Nav';
25 -import Navbar from './pages/components/Navbar';
26 -import Popovers from './pages/components/Popovers';
27 -import Progress from './pages/components/Progress';
28 -import Tabs from './pages/components/Tabs';
29 -import Libs from './pages/Libs';
30 -import Pages from './pages/Pages';
31 -
32 -class Layout extends React.Component {
33 - static propTypes = {
34 - sidebarStatic: PropTypes.bool,
35 - sidebarOpened: PropTypes.bool,
36 - dispatch: PropTypes.func.isRequired,
37 - };
38 -
39 - static defaultProps = {
40 - sidebarStatic: false,
41 - sidebarOpened: false,
42 - };
43 -
44 - constructor(props) {
45 - super(props);
46 - this.handleSwipe = this.handleSwipe.bind(this);
47 -
48 - this.state = {
49 - chatOpen: false,
50 - width: window.innerWidth,
51 - };
52 -
53 - }
54 -
55 -
56 - componentDidMount() {
57 - const staticSidebar = JSON.parse(localStorage.getItem('staticSidebar'));
58 - if (staticSidebar) {
59 - this.props.dispatch(toggleSidebar());
60 - } else if (this.props.sidebarOpened) {
61 - setTimeout(() => {
62 - this.props.dispatch(closeSidebar());
63 - this.props.dispatch(changeActiveSidebarItem(null));
64 - }, 2500);
65 - }
66 -
67 - window.addEventListener('resize', this.handleResize.bind(this));
68 - }
69 -
70 - handleResize() {
71 - this.setState({
72 - width: window.innerWidth,
73 - })
74 -
75 - if(window.innerWidth < 768 && this.props.sidebarOpened) {
76 - this.props.dispatch(closeSidebar());
77 - }
78 - }
79 -
80 - handleSwipe(e) {
81 - if ('ontouchstart' in window) {
82 - if (e.direction === 4 && !this.state.chatOpen) {
83 - this.props.dispatch(openSidebar());
84 - return;
85 - }
86 -
87 - if (e.direction === 2 && this.props.sidebarOpened) {
88 - this.props.dispatch(closeSidebar());
89 - return;
90 - }
91 - }
92 - }
93 -
94 - render() {
95 - return (
96 - <div
97 - className={[
98 - s.root,
99 - sd.root,
100 - this.state.width > 768 && s.sidebarStatic,
101 - this.state.width < 768 && !this.props.sidebarOpened ? s.sidebarClose : '',
102 - ].join(' ')}
103 - >
104 - <Header />
105 - <div>
106 - <Hammer onSwipe={this.handleSwipe}>
107 - <main className={classnames(s.content, sd.content)}>
108 - <div className="container">
109 - <div className="row">
110 - <Sidebar width={this.state.width} />
111 - <Col xl={10} md={9}>
112 - <Switch>
113 - <Route path="/documentation/getting-started/overview" exact component={Overview} />
114 - <Route path="/documentation/getting-started/licences" exact component={Licences} />
115 - <Route path="/documentation/getting-started/quick-start" exact component={QuickStart} />
116 - <Route path="/documentation/components/alerts" exact component={Alerts} />
117 - <Route path="/documentation/components/badge" exact component={Badge} />
118 - <Route path="/documentation/components/buttons" exact component={Buttons} />
119 - <Route path="/documentation/components/card" exact component={Card} />
120 - <Route path="/documentation/components/carousel" exact component={Carousel} />
121 - <Route path="/documentation/components/modal" exact component={Modal} />
122 - <Route path="/documentation/components/nav" exact component={Nav} />
123 - <Route path="/documentation/components/navbar" exact component={Navbar} />
124 - <Route path="/documentation/components/popovers" exact component={Popovers} />
125 - <Route path="/documentation/components/tabs-accordion" exact component={Tabs} />
126 - <Route path="/documentation/components/progress" exact component={Progress} />
127 - <Route path="/documentation/libs" exact component={Libs} />
128 - <Route path="/documentation/pages" exact component={Pages} />
129 - </Switch>
130 - </Col>
131 - </div>
132 - </div>
133 - </main>
134 - </Hammer>
135 - </div>
136 - </div>
137 - );
138 - }
139 -}
140 -
141 -function mapStateToProps(store) {
142 - return {
143 - sidebarOpened: store.navigation.sidebarOpened,
144 - sidebarStatic: store.navigation.sidebarStatic,
145 - };
146 -}
147 -
148 -export default withRouter(connect(mapStateToProps)(Layout));
1 -import React from 'react';
2 -import PropTypes from 'prop-types';
3 -import classnames from 'classnames';
4 -import { connect } from 'react-redux';
5 -import { Col } from 'reactstrap';
6 -import { withRouter } from 'react-router-dom';
7 -import s from '../components/Sidebar/Sidebar.module.scss';
8 -import sd from './styles.module.scss'
9 -import { LinksGroup } from './components';
10 -
11 -import { openSidebar, closeSidebar, changeActiveSidebarItem } from '../actions/navigation';
12 -import isScreen from '../core/screenHelper';
13 -
14 -class Sidebar extends React.Component {
15 - static propTypes = {
16 - sidebarStatic: PropTypes.bool,
17 - sidebarOpened: PropTypes.bool,
18 - dispatch: PropTypes.func.isRequired,
19 - activeItem: PropTypes.string,
20 - location: PropTypes.shape({
21 - pathname: PropTypes.string,
22 - }).isRequired,
23 - };
24 -
25 - static defaultProps = {
26 - sidebarStatic: false,
27 - sidebarOpened: false,
28 - activeItem: '',
29 - };
30 -
31 - constructor(props) {
32 - super(props);
33 -
34 - this.onMouseEnter = this.onMouseEnter.bind(this);
35 - this.onMouseLeave = this.onMouseLeave.bind(this);
36 - }
37 -
38 - onMouseEnter() {
39 - if (!this.props.sidebarStatic && (isScreen('lg') || isScreen('xl'))) {
40 - const paths = this.props.location.pathname.split('/');
41 - paths.pop();
42 - this.props.dispatch(openSidebar());
43 - this.props.dispatch(changeActiveSidebarItem(paths.join('/')));
44 - }
45 - }
46 -
47 - onMouseLeave() {
48 - if (!this.props.sidebarStatic && (isScreen('lg') || isScreen('xl'))) {
49 - this.props.dispatch(closeSidebar());
50 - this.props.dispatch(changeActiveSidebarItem(null));
51 - }
52 - }
53 -
54 - render() {
55 - return (
56 - <Col xl={2} md={3}>
57 - <nav
58 - className={[s.root, sd.sidebar, this.props.width > 768 && s.staticSidebar].join(' ')}
59 - >
60 - <ul className={classnames(s.nav, sd.nav)}>
61 - <LinksGroup
62 - onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
63 - activeItem={this.props.activeItem}
64 - header="Getting Started"
65 - isHeader
66 - link="/documentation/getting-started"
67 - index="getting-started"
68 - childrenLinks={[
69 - {
70 - header: 'Overview', link: '/documentation/getting-started/overview',
71 - },
72 - {
73 - header: 'Licences', link: '/documentation/getting-started/licences',
74 - },
75 - {
76 - header: 'Quick Start', link: '/documentation/getting-started/quick-start',
77 - }
78 - ]}
79 - />
80 - <LinksGroup
81 - onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
82 - activeItem={this.props.activeItem}
83 - header="Pages"
84 - isHeader
85 - link="/documentation/pages"
86 - index="pages"
87 - />
88 - <LinksGroup
89 - onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
90 - activeItem={this.props.activeItem}
91 - header="Components"
92 - isHeader
93 - link="/documentation/components"
94 - index="components"
95 - childrenLinks={[
96 - {
97 - header: 'Alerts', link: '/documentation/components/alerts',
98 - },
99 - {
100 - header: 'Badge', link: '/documentation/components/badge',
101 - },
102 - {
103 - header: 'Buttons', link: '/documentation/components/buttons',
104 - },
105 - {
106 - header: 'Card', link: '/documentation/components/card',
107 - },
108 - {
109 - header: 'Carousel', link: '/documentation/components/carousel',
110 - },
111 - {
112 - header: 'Modal', link: '/documentation/components/modal',
113 - },
114 - {
115 - header: 'Nav', link: '/documentation/components/nav',
116 - },
117 - {
118 - header: 'Navbar', link: '/documentation/components/navbar',
119 - },
120 - {
121 - header: 'Popovers & Tooltips', link: '/documentation/components/popovers',
122 - },
123 - {
124 - header: 'Progress', link: '/documentation/components/progress',
125 - },
126 - {
127 - header: 'Tabs & Accordion', link: '/documentation/components/tabs-accordion',
128 - },
129 - ]}
130 - />
131 - <LinksGroup
132 - onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}
133 - activeItem={this.props.activeItem}
134 - header="Libs"
135 - isHeader
136 - link="/documentation/libs"
137 - index="libs"
138 - />
139 - {/*<LinksGroup*/}
140 - {/*onActiveSidebarItemChange={activeItem => this.props.dispatch(changeActiveSidebarItem(activeItem))}*/}
141 - {/*activeItem={this.props.activeItem}*/}
142 - {/*header="FAQ"*/}
143 - {/*isHeader*/}
144 - {/*link="/documentation/faq"*/}
145 - {/*index="faq"*/}
146 - {/*childrenLinks={[*/}
147 - {/*{*/}
148 - {/*header: 'Analytics', link: '/app/main/analytics',*/}
149 - {/*}*/}
150 - {/*]}*/}
151 - {/*/>*/}
152 - </ul>
153 -
154 - <a className={classnames('d-md-down-none', sd.company)} href="http://flatlogic.com/" target="_blank" rel="noopener noreferrer">
155 - <img alt="company logo" src="https://cdn.dribbble.com/users/883507/avatars/small/7ca04141e335237d393ab41008adb46d.png?1509465697"/>
156 - Proudly built and maintained by <br/> Flatlogic
157 - </a>
158 - </nav >
159 - </Col>
160 - );
161 - }
162 -}
163 -
164 -function mapStateToProps(store) {
165 - return {
166 - sidebarOpened: store.navigation.sidebarOpened,
167 - sidebarStatic: store.navigation.sidebarStatic,
168 - alertsList: store.alerts.alertsList,
169 - activeItem: store.navigation.activeItem,
170 - };
171 -}
172 -
173 -export default withRouter(connect(mapStateToProps)(Sidebar));
1 -import React from 'react';
2 -
3 -import LinksGroupComponent from '../../components/Sidebar/LinksGroup/LinksGroup'
4 -import s from './styles.module.scss';
5 -
6 -export const LinksGroup = (props) => (
7 - <div className={s.linksGroupWrapper}>
8 - <LinksGroupComponent {...props} />
9 - </div>
10 -);
1 -.linksGroupWrapper :global(.collapse ul),
2 -.linksGroupWrapper :global(.collapsing ul),
3 -.linksGroupWrapper :global(li > a):hover {
4 - background: #FFFBF8 !important;
5 -}
6 -
7 -.linksGroupWrapper :global(li > a) {
8 - color: #495057 !important;
9 -}
This diff is collapsed. Click to expand it.
1 -import React, {Component} from 'react';
2 -import { Row, Col, Breadcrumb, BreadcrumbItem } from 'reactstrap';
3 -import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
4 -import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
5 -import ProductCard from '../../pages/products/components/ProductCard/ProductCard';
6 -import products from '../../pages/products/mock'
7 -import { Link } from 'react-router-dom';
8 -
9 -import Widget from '../../components/Widget/Widget';
10 -import Scrollspy from "./ScrollSpyComponent";
11 -
12 -export default class Pages extends Component {
13 - render() {
14 - return (
15 - <Row>
16 - <Col md={10}>
17 - <Breadcrumb>
18 - <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
19 - <BreadcrumbItem>Documentation</BreadcrumbItem>
20 - <BreadcrumbItem active>Pages</BreadcrumbItem>
21 - </Breadcrumb>
22 - </Col>
23 - <Col lg={9}>
24 - <Widget id="Auth">
25 - <h3>Auth</h3>
26 - <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>
27 - <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>
28 - <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>
29 - <p><b>Important note.</b> Credentials validation must be on the server side.</p>
30 - <p>Another important part of authentication is <code>PrivateRoute</code> component. That’s how it looks like.</p>
31 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'const PrivateRoute = ({ dispatch, component, ...rest }) => {\n' +
32 - ' if (!Login.isAuthenticated(localStorage.getItem(\'token\'))) {\n' +
33 - ' dispatch(logoutUser());\n' +
34 - ' return (<Redirect to=\'/login\'/>)\n' +
35 - ' } else {\n' +
36 - ' return (\n' +
37 - ' <Route {...rest} render={props => (React.createElement(component, props))}/>\n' +
38 - ' );\n' +
39 - ' }\n' +
40 - '};'}</SyntaxHighlighter>
41 - <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>
42 - </Widget>
43 - <Widget id="Inbox">
44 - <h3>Inbox</h3>
45 - <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>
46 - <ul>
47 - <li>Messages filter & search</li>
48 - <li>Compose</li>
49 - <li>Read/unread, star/unstar, delete actionsy</li>
50 - <li>Message attachments</li>
51 - <li>Reply functionality</li>
52 - </ul>
53 - <Link className="btn btn-primary" to="/app/inbox">Demo</Link>
54 - </Widget>
55 - <Widget id="Dashboards">
56 - <h3>Dashboards</h3>
57 - <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>
58 - <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>
59 - <p>Main chart made with D3.js library, most powerful charts library. Other components are just a plain markup with state</p>
60 - <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>
61 - <p>All of this component can be used on any page of the application.</p>
62 - <p>
63 - <Link className="btn btn-primary mr-sm" to="/app/main/analytics">Analytics</Link>
64 - <Link className="btn btn-primary" to="/app/main/visits">Visits</Link>
65 - </p>
66 - </Widget>
67 - <Widget id="E-Commerce">
68 - <h3>E-commerce</h3>
69 - <p className="alert alert-secondary font-weight-bold"><span className="text-warning">Important note.</span> This section is fully supported by <a
70 - href="https://github.com/flatlogic/nodejs-backend" rel="noopener noreferrer" target="_blank">Node.js
71 - backend</a> data.
72 - </p>
73 - <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>
74 - <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>
75 - <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>
76 - <p>&bull; Product details is a detailed product card with a lot informative description.</p>
77 - <p>Examples of <code>ProductCard</code> component:</p>
78 - <Row>
79 - <Col md={6}>
80 - <ProductCard {...products[0]} />
81 - </Col>
82 - <Col md={6}>
83 - <ProductCard {...products[2]} />
84 - </Col>
85 - </Row>
86 - <p>
87 - <Link className="btn btn-primary mr-sm" to="/app/ecommerce/management">Management</Link>
88 - <Link className="btn btn-primary mr-sm" to="/app/ecommerce/products">List</Link>
89 - <Link className="btn btn-primary" to="/app/ecommerce/product">Details</Link>
90 - </p>
91 - </Widget>
92 - </Col>
93 - <Col lg={3}>
94 - <Scrollspy
95 - title="PAGES"
96 - prefix="pages"
97 - ids={[
98 - 'Auth',
99 - 'Inbox',
100 - 'Dashboards',
101 - 'E-Commerce',
102 - ]} />
103 - </Col>
104 - </Row>
105 - )
106 - }
107 -}
1 -import React from "react";
2 -import { HashLink as Link } from 'react-router-hash-link';
3 -import Scrollspy from "react-scrollspy";
4 -
5 -import s from '../styles.module.scss';
6 -
7 -export default (props) => (
8 - <div
9 - className="border-left pl-4 d-md-down-none"
10 - style={{
11 - position: 'fixed',
12 - overflowY: 'auto',
13 - maxHeight: 'calc(100vh - 130px)',
14 - paddingLeft: '15px'
15 - }}
16 - >
17 - <h6 className="fw-semi-bold">{props.title}</h6>
18 - <Scrollspy
19 - items={props.ids}
20 - currentClassName={s.activeScrollSpy}
21 - offset={-170}
22 - >
23 - {props.ids.map((id) => (
24 - <li key="id" className="mb-xs"><Link to={`/documentation/${props.prefix}#${id}`} className={s.scrollSpy}>{id.split('-').join(' ')}</Link></li>
25 - ))}
26 - </Scrollspy>
27 - </div>
28 -)
1 -import React, { Component } from 'react';
2 -import { Row, Col, Breadcrumb, BreadcrumbItem, Alert, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
3 -import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
4 -import classnames from 'classnames';
5 -import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
6 -
7 -const alerts = [{
8 - id: 'al-1',
9 - type: 'success',
10 - msg: '<span class="fw-semi-bold">Success:</span> You successfully read this important alert message.',
11 - visible: [true, true, true],
12 -}, {
13 - id: 'al-2',
14 - type: 'info',
15 - msg: '<span class="fw-semi-bold">Info:</span> This alert needs your attention, but it\'s not super important.',
16 - visible: [true, true, true],
17 -}, {
18 - id: 'al-3',
19 - type: 'warning',
20 - msg: '<span class="fw-semi-bold"><strong>Warning:</strong></span> Best check yo self, you\'re not looking too good.',
21 - visible: [true, true, true],
22 -}, {
23 - id: 'al-4',
24 - type: 'danger',
25 - 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>',
26 - visible: [true, true, true],
27 -}];
28 -
29 -class Overview extends Component {
30 - state = {
31 - defaultAlertsTabId: '1',
32 - transparentAlertsTabId: '1',
33 - };
34 -
35 - changeTab(field, id) {
36 - this.setState({
37 - [field]: id,
38 - })
39 - }
40 -
41 - render() {
42 - return (
43 - <Row>
44 - <Col md={10}>
45 - <Breadcrumb>
46 - <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
47 - <BreadcrumbItem>Documentation</BreadcrumbItem>
48 - <BreadcrumbItem>Components</BreadcrumbItem>
49 - <BreadcrumbItem active>Alerts</BreadcrumbItem>
50 - </Breadcrumb>
51 - </Col>
52 - <Col lg={9}>
53 - <h2>Alerts</h2>
54 - <p className="mb-lg">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
55 - <SyntaxHighlighter language='javascript' style={tomorrow}>
56 - {"import { Alert } from 'reactstrap';"}
57 - </SyntaxHighlighter>
58 - <Nav tabs className="bg-transparent mt">
59 - <NavItem>
60 - <NavLink
61 - className={classnames({ active: this.state.defaultAlertsTabId === '1' })}
62 - onClick={() => {
63 - this.changeTab('defaultAlertsTabId', '1');
64 - }}
65 - >
66 - Example
67 - </NavLink>
68 - </NavItem>
69 - <NavItem>
70 - <NavLink
71 - className={classnames({ active: this.state.defaultAlertsTabId === '2' })}
72 - onClick={() => {
73 - this.changeTab('defaultAlertsTabId', '2');
74 - }}
75 - >
76 - Code
77 - </NavLink>
78 - </NavItem>
79 - </Nav>
80 - <TabContent className="mb-xlg" activeTab={this.state.defaultAlertsTabId}>
81 - <TabPane tabId="1">
82 - <p>Alerts are available for any length of text, as well as an optional dismiss button.</p>
83 - {alerts.map((alert, index) => <Alert
84 - key={alert.id} isOpen={alert.visible[0]} toggle={() => this.closeAlert(index, 0)}
85 - color={alert.type}
86 - >
87 - <span dangerouslySetInnerHTML={{__html: alert.msg}}/>
88 - </Alert>)}
89 - </TabPane>
90 - <TabPane tabId="2">
91 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<Alert\n' +
92 - ' isOpen={true}\n' +
93 - ' toggle={this.closeAlert}\n' +
94 - ' color="danger"\n' +
95 - '>\n' +
96 - ' <h1>Alert Content</h1>\n' +
97 - '</Alert>'}</SyntaxHighlighter>
98 - </TabPane>
99 - </TabContent>
100 - <Nav tabs className="bg-transparent">
101 - <NavItem>
102 - <NavLink
103 - className={classnames({ active: this.state.transparentAlertsTabId === '1' })}
104 - onClick={() => {
105 - this.changeTab('transparentAlertsTabId', '1');
106 - }}
107 - >
108 - Example
109 - </NavLink>
110 - </NavItem>
111 - <NavItem>
112 - <NavLink
113 - className={classnames({ active: this.state.transparentAlertsTabId === '2' })}
114 - onClick={() => {
115 - this.changeTab('transparentAlertsTabId', '2');
116 - }}
117 - >
118 - Code
119 - </NavLink>
120 - </NavItem>
121 - </Nav>
122 - <TabContent className="mb-xlg" activeTab={this.state.transparentAlertsTabId}>
123 - <TabPane tabId="1">
124 - <p>Alerts are available for any length of text, as well as an optional dismiss button.</p>
125 - {alerts.map((alert, index) => <Alert
126 - className="alert-transparent"
127 - key={alert.id} isOpen={alert.visible[0]} toggle={() => this.closeAlert(index, 0)}
128 - color={alert.type}
129 - >
130 - <span dangerouslySetInnerHTML={{__html: alert.msg}}/>
131 - </Alert>)}
132 - </TabPane>
133 - <TabPane tabId="2">
134 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<Alert\n' +
135 - ' className="alert-transparent"\n' +
136 - ' isOpen={true}\n' +
137 - ' toggle={this.closeAlert}\n' +
138 - ' color="danger"\n' +
139 - '>\n' +
140 - ' <h1>Alert Content</h1>\n' +
141 - '</Alert>'}</SyntaxHighlighter>
142 - </TabPane>
143 - </TabContent>
144 - For more examples please refer to <a href="https://reactstrap.github.io/components/alerts/" target="_blank" rel="noopener noreferrer">Reactstrap Alerts</a>
145 - </Col>
146 - </Row>
147 - );
148 - }
149 -}
150 -
151 -export default Overview;
1 -import React, { Component } from 'react';
2 -import { Row, Col, Breadcrumb, BreadcrumbItem, Badge, Button, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
3 -import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
4 -import classnames from 'classnames';
5 -import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
6 -
7 -class Badges extends Component {
8 - state = {
9 - defaultBadgesTabId: '1',
10 - pillsBadgesTabId: '1',
11 - };
12 -
13 - changeTab(field, id) {
14 - this.setState({
15 - [field]: id,
16 - })
17 - }
18 -
19 - render() {
20 - return (
21 - <Row>
22 - <Col md={10}>
23 - <Breadcrumb>
24 - <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
25 - <BreadcrumbItem>Documentation</BreadcrumbItem>
26 - <BreadcrumbItem>Components</BreadcrumbItem>
27 - <BreadcrumbItem active>Badge</BreadcrumbItem>
28 - </Breadcrumb>
29 - </Col>
30 - <Col lg={9}>
31 - <h2>Badge</h2>
32 - <p className="mb-lg">Documentation and examples for badges, our small count and labeling component.</p>
33 - <SyntaxHighlighter language='javascript' style={tomorrow}>
34 - {"import { Badge } from 'reactstrap';"}
35 - </SyntaxHighlighter>
36 - <Nav tabs className="bg-transparent mt">
37 - <NavItem>
38 - <NavLink
39 - className={classnames({ active: this.state.defaultBadgesTabId === '1' })}
40 - onClick={() => {
41 - this.changeTab('defaultBadgesTabId', '1');
42 - }}
43 - >
44 - Example
45 - </NavLink>
46 - </NavItem>
47 - <NavItem>
48 - <NavLink
49 - className={classnames({ active: this.state.defaultBadgesTabId === '2' })}
50 - onClick={() => {
51 - this.changeTab('defaultBadgesTabId', '2');
52 - }}
53 - >
54 - Code
55 - </NavLink>
56 - </NavItem>
57 - </Nav>
58 - <TabContent className="mb-xlg" activeTab={this.state.defaultBadgesTabId}>
59 - <TabPane tabId="1">
60 - <h1>Example heading <Badge color="primary">Primary</Badge></h1>
61 - <h2>Example heading <Badge color="info">Info</Badge></h2>
62 - <h3>Example heading <Badge color="warning">Warning</Badge></h3>
63 - <h4>Example heading <Badge color="success">Success</Badge></h4>
64 - <h5>Example heading <Badge color="danger">Danger</Badge></h5>
65 - <h6>Example heading <Badge color="secondary">Secondary</Badge></h6>
66 - <p>Badges can be used as part of links or buttons to provide a counter.</p>
67 - <Button color="primary">Notifications <Badge color="danger">4</Badge></Button>
68 - </TabPane>
69 - <TabPane tabId="2">
70 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<h1>Example heading <Badge color="primary">Primary</Badge></h1>\n' +
71 - '<h2>Example heading <Badge color="info">Info</Badge></h2>\n' +
72 - '<h3>Example heading <Badge color="warning">Warning</Badge></h3>\n' +
73 - '<h4>Example heading <Badge color="success">Success</Badge></h4>\n' +
74 - '<h5>Example heading <Badge color="danger">Danger</Badge></h5>\n' +
75 - '<h6>Example heading <Badge color="secondary">Secondary</Badge></h6>\n\n' +
76 - '<Button color="primary">Notifications <Badge color="danger">4</Badge></Button>'}</SyntaxHighlighter>
77 - </TabPane>
78 - </TabContent>
79 - <Nav tabs className="bg-transparent">
80 - <NavItem>
81 - <NavLink
82 - className={classnames({ active: this.state.pillsBadgesTabId === '1' })}
83 - onClick={() => {
84 - this.changeTab('pillsBadgesTabId', '1');
85 - }}
86 - >
87 - Example
88 - </NavLink>
89 - </NavItem>
90 - <NavItem>
91 - <NavLink
92 - className={classnames({ active: this.state.pillsBadgesTabId === '2' })}
93 - onClick={() => {
94 - this.changeTab('pillsBadgesTabId', '2');
95 - }}
96 - >
97 - Code
98 - </NavLink>
99 - </NavItem>
100 - </Nav>
101 - <TabContent className="mb-xlg" activeTab={this.state.pillsBadgesTabId}>
102 - <TabPane tabId="1">
103 - <h4>Pill badges</h4>
104 - <p>
105 - <Badge className="mr-xs" color="primary" pill>Primary</Badge>
106 - <Badge className="mr-xs" color="info" pill>Info</Badge>
107 - <Badge className="mr-xs" color="warning" pill>Warning</Badge>
108 - <Badge className="mr-xs" color="success" pill>Success</Badge>
109 - <Badge className="mr-xs" color="danger" pill>Danger</Badge>
110 - <Badge className="mr-xs" color="secondary" pill>Secondary</Badge>
111 - <Badge className="mr-xs" color="light" pill>Light</Badge>
112 - <Badge className="mr-xs" color="dark" pill>Dark</Badge>
113 - </p>
114 - <h4>Badges with link</h4>
115 - <p>
116 - <Badge className="mr-xs" href="#" color="primary">Primary</Badge>
117 - <Badge className="mr-xs" href="#" color="info">Info</Badge>
118 - <Badge className="mr-xs" href="#" color="warning">Warning</Badge>
119 - <Badge className="mr-xs" href="#" color="success">Success</Badge>
120 - <Badge className="mr-xs" href="#" color="danger">Danger</Badge>
121 - <Badge className="mr-xs" href="#" color="secondary">Secondary</Badge>
122 - <Badge className="mr-xs" href="#" color="light">Light</Badge>
123 - <Badge className="mr-xs" href="#" color="dark">Dark</Badge>
124 - </p>
125 - </TabPane>
126 - <TabPane tabId="2">
127 - <SyntaxHighlighter language='javascript' style={tomorrow}>
128 - {'<Badge className="mr-xs" color="primary" pill>Primary</Badge> \n' +
129 - '<Badge className="mr-xs" href="#" color="primary">Primary</Badge>'}
130 - </SyntaxHighlighter>
131 - </TabPane>
132 - </TabContent>
133 - For more examples please refer to <a href="https://reactstrap.github.io/components/badge/" target="_blank" rel="noopener noreferrer">Reactstrap Badge</a>
134 - </Col>
135 - </Row>
136 - );
137 - }
138 -}
139 -
140 -export default Badges;
1 -import React, { Component } from 'react';
2 -import { Row, Col, Breadcrumb, BreadcrumbItem, Button, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
3 -import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
4 -import classnames from 'classnames';
5 -import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
6 -
7 -class Buttons extends Component {
8 - state = {
9 - defaultButtonTabId: '1',
10 - outlineButtonsTabId: '1',
11 - buttonsSizeTabId: '1'
12 - };
13 -
14 - changeTab(field, id) {
15 - this.setState({
16 - [field]: id,
17 - })
18 - }
19 -
20 - render() {
21 - return (
22 - <Row>
23 - <Col md={10}>
24 - <Breadcrumb>
25 - <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
26 - <BreadcrumbItem>Documentation</BreadcrumbItem>
27 - <BreadcrumbItem>Components</BreadcrumbItem>
28 - <BreadcrumbItem active>Buttons</BreadcrumbItem>
29 - </Breadcrumb>
30 - </Col>
31 -
32 - <Col lg={9}>
33 - <h2>Buttons</h2>
34 - <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>
35 - <SyntaxHighlighter language='javascript' style={tomorrow}>
36 - {"import { Button } from 'reactstrap';"}
37 - </SyntaxHighlighter>
38 - <Nav tabs className="bg-transparent mt">
39 - <NavItem>
40 - <NavLink
41 - className={classnames({ active: this.state.defaultButtonTabId === '1' })}
42 - onClick={() => {
43 - this.changeTab('defaultButtonTabId', '1');
44 - }}
45 - >
46 - Example
47 - </NavLink>
48 - </NavItem>
49 - <NavItem>
50 - <NavLink
51 - className={classnames({ active: this.state.defaultButtonTabId === '2' })}
52 - onClick={() => {
53 - this.changeTab('defaultButtonTabId', '2');
54 - }}
55 - >
56 - Code
57 - </NavLink>
58 - </NavItem>
59 - </Nav>
60 - <TabContent className="mb-xlg" activeTab={this.state.defaultButtonTabId}>
61 - <TabPane tabId="1">
62 - <Button color="default" className="width-100 mb-xs mr-xs">Default</Button>
63 - <Button color="primary" className="width-100 mb-xs mr-xs">Primary</Button>
64 - <Button color="info" className="width-100 mb-xs mr-xs">Info</Button>
65 - <Button color="success" className="width-100 mb-xs mr-xs">Success</Button>
66 - <Button color="warning" className="width-100 mb-xs mr-xs">Warning</Button>
67 - <Button color="danger" className="width-100 mb-xs mr-xs">Danger</Button>
68 - <Button color="gray" className="width-100 mb-xs mr-xs">Gray</Button>
69 - <Button color="inverse" className="width-100 mb-xs mr-xs">Inverse</Button>
70 - </TabPane>
71 - <TabPane tabId="2">
72 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<Button color="default" className="width-100 mb-xs mr-xs">Default</Button>\n' +
73 - '<Button color="primary">Primary</Button>\n' +
74 - '<Button color="info">Info</Button>\n' +
75 - '<Button color="success">Success</Button>\n' +
76 - '<Button color="warning"">Warning</Button>\n' +
77 - '<Button color="danger">Danger</Button>\n' +
78 - '<Button color="gray">Gray</Button>\n' +
79 - '<Button color="inverse">Inverse</Button>'}</SyntaxHighlighter>
80 - </TabPane>
81 - </TabContent>
82 - <Nav tabs className="bg-transparent">
83 - <NavItem>
84 - <NavLink
85 - className={classnames({ active: this.state.outlineButtonsTabId === '1' })}
86 - onClick={() => {
87 - this.changeTab('outlineButtonsTabId', '1');
88 - }}
89 - >
90 - Example
91 - </NavLink>
92 - </NavItem>
93 - <NavItem>
94 - <NavLink
95 - className={classnames({ active: this.state.outlineButtonsTabId === '2' })}
96 - onClick={() => {
97 - this.changeTab('outlineButtonsTabId', '2');
98 - }}
99 - >
100 - Code
101 - </NavLink>
102 - </NavItem>
103 - </Nav>
104 - <TabContent className="mb-xlg" activeTab={this.state.outlineButtonsTabId}>
105 - <TabPane tabId="1">
106 - <Button outline color="default" className="width-100 mb-xs mr-xs">Default</Button>
107 - <Button outline color="primary" className="width-100 mb-xs mr-xs">Primary</Button>
108 - <Button outline color="info" className="width-100 mb-xs mr-xs">Info</Button>
109 - <Button outline color="success" className="width-100 mb-xs mr-xs">Success</Button>
110 - <Button outline color="warning" className="width-100 mb-xs mr-xs">Warning</Button>
111 - <Button outline color="danger" className="width-100 mb-xs mr-xs">Danger</Button>
112 - <Button outline color="gray" className="width-100 mb-xs mr-xs">Gray</Button>
113 - <Button outline color="inverse" className="width-100 mb-xs mr-xs">Inverse</Button>
114 - </TabPane>
115 - <TabPane tabId="2">
116 - <SyntaxHighlighter language='javascript' style={tomorrow}>
117 - {'<Button outline color="default">Default</Button>\n' +
118 - '<Button outline color="primary">Primary</Button>\n' +
119 - '<Button outline color="info">Info</Button>\n' +
120 - '<Button outline color="success">Success</Button>\n' +
121 - '<Button outline color="warning">Warning</Button>\n' +
122 - '<Button outline color="danger">Danger</Button>\n' +
123 - '<Button outline color="gray"">Gray</Button>\n' +
124 - '<Button outline color="inverse">Inverse</Button>'}
125 - </SyntaxHighlighter>
126 - </TabPane>
127 - </TabContent>
128 - <Nav tabs className="bg-transparent">
129 - <NavItem>
130 - <NavLink
131 - className={classnames({ active: this.state.buttonsSizeTabId === '1' })}
132 - onClick={() => {
133 - this.changeTab('buttonsSizeTabId', '1');
134 - }}
135 - >
136 - Example
137 - </NavLink>
138 - </NavItem>
139 - <NavItem>
140 - <NavLink
141 - className={classnames({ active: this.state.buttonsSizeTabId === '2' })}
142 - onClick={() => {
143 - this.changeTab('buttonsSizeTabId', '2');
144 - }}
145 - >
146 - Code
147 - </NavLink>
148 - </NavItem>
149 - </Nav>
150 - <TabContent className="mb-xlg" activeTab={this.state.buttonsSizeTabId}>
151 - <TabPane tabId="1">
152 - <p className="fs-mini text-muted">
153 - Fancy larger or smaller buttons?
154 - Four separate sizes available for all use cases:
155 - from tiny 10px button to large one.
156 - </p>
157 - <p>
158 - <Button color="default" size="lg" className="mb-xs mr-xs">Large button</Button>
159 - <Button color="primary" className="mb-xs mr-xs">Default button</Button>
160 - <Button color="info" size="sm" className="mb-xs mr-xs">Small button</Button>
161 - <Button color="success" size="xs" className="mb-xs mr-xs">Tiny button</Button>
162 - </p>
163 - </TabPane>
164 - <TabPane tabId="2">
165 - <SyntaxHighlighter language='javascript' style={tomorrow}>
166 - {'<Button color="default" size="lg">Large button</Button>\n' +
167 - '<Button color="primary">Default button</Button>\n' +
168 - '<Button color="info" size="sm">Small button</Button>\n' +
169 - '<Button color="success" size="xs">Tiny button</Button>'}
170 - </SyntaxHighlighter>
171 - </TabPane>
172 - </TabContent>
173 - For more examples please refer to <a href="https://reactstrap.github.io/components/buttons/" target="_blank" rel="noopener noreferrer">Reactstrap Buttons</a>
174 - </Col>
175 - </Row>
176 - );
177 - }
178 -}
179 -
180 -export default Buttons;
1 -import React, { Component } from 'react';
2 -import { Row, Col, Breadcrumb, BreadcrumbItem, Button, Card, CardBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
3 -import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
4 -import classnames from 'classnames';
5 -import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
6 -
7 -class Buttons extends Component {
8 - state = {
9 - defaultCardTabId: '1',
10 - };
11 -
12 - changeTab(field, id) {
13 - this.setState({
14 - [field]: id,
15 - })
16 - }
17 -
18 - render() {
19 - return (
20 - <Row>
21 - <Col md={10}>
22 - <Breadcrumb>
23 - <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
24 - <BreadcrumbItem>Documentation</BreadcrumbItem>
25 - <BreadcrumbItem>Components</BreadcrumbItem>
26 - <BreadcrumbItem active>Card</BreadcrumbItem>
27 - </Breadcrumb>
28 - </Col>
29 -
30 - <Col lg={9}>
31 - <h2>Card</h2>
32 - <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>
33 - <SyntaxHighlighter language='javascript' style={tomorrow}>
34 - {"import { Card, CardBody } from 'reactstrap';"}
35 - </SyntaxHighlighter>
36 - <Nav tabs className="bg-transparent mt">
37 - <NavItem>
38 - <NavLink
39 - className={classnames({ active: this.state.defaultCardTabId === '1' })}
40 - onClick={() => {
41 - this.changeTab('defaultCardTabId', '1');
42 - }}
43 - >
44 - Example
45 - </NavLink>
46 - </NavItem>
47 - <NavItem>
48 - <NavLink
49 - className={classnames({ active: this.state.defaultCardTabId === '2' })}
50 - onClick={() => {
51 - this.changeTab('defaultCardTabId', '2');
52 - }}
53 - >
54 - Code
55 - </NavLink>
56 - </NavItem>
57 - </Nav>
58 - <TabContent className="mb-xlg" activeTab={this.state.defaultCardTabId}>
59 - <TabPane tabId="1">
60 - <Card className="border-0">
61 - <CardBody>
62 - <button className="btn-link fw-semi-bold text-success">Avg Rating</button>
63 - <button className="btn-link fw-semi-bold text-muted ml-sm">All Time</button>
64 - <hr />
65 - <div className="d-flex justify-content-between mb-lg">
66 - <div className="text-warning">
67 - <i className="fa fa-star mr-xs" />
68 - <i className="fa fa-star mr-xs" />
69 - <i className="fa fa-star mr-xs" />
70 - <i className="fa fa-star mr-xs" />
71 - <i className="fa fa-star" />
72 - </div>
73 - <span className="text-muted"><small>342 REVIEWS</small></span>
74 - </div>
75 - <div className="mb-lg">
76 - <h3 className="text-success mb-0">69%</h3>
77 - of customers recomend this product
78 - </div>
79 - <Button className="btn-rounded-f" color="success">Write a Review</Button>
80 - </CardBody>
81 - </Card>
82 - </TabPane>
83 - <TabPane tabId="2">
84 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<Card className="border-0">\n' +
85 - ' <CardBody>\n' +
86 - ' <button className="btn-link fw-semi-bold text-success">Avg Rating</button>\n' +
87 - ' <button className="btn-link fw-semi-bold text-muted ml-sm">All Time</button>\n' +
88 - ' <hr />\n' +
89 - ' <div className="d-flex justify-content-between mb-lg">\n' +
90 - ' <div className="text-warning">\n' +
91 - ' <i className="fa fa-star mr-xs" />\n' +
92 - ' <i className="fa fa-star mr-xs" />\n' +
93 - ' <i className="fa fa-star mr-xs" />\n' +
94 - ' <i className="fa fa-star mr-xs" />\n' +
95 - ' <i className="fa fa-star" />\n' +
96 - ' </div>\n' +
97 - ' <span className="text-muted"><small>342 REVIEWS</small></span>\n' +
98 - ' </div>\n' +
99 - ' <div className="mb-lg">\n' +
100 - ' <h3 className="text-success mb-0">69%</h3>\n' +
101 - ' of customers recomend this product\n' +
102 - ' </div>\n' +
103 - ' <Button className="btn-rounded-f" color="success">Write a Review</Button>\n' +
104 - ' </CardBody>\n' +
105 - '</Card>'}</SyntaxHighlighter>
106 - </TabPane>
107 - </TabContent>
108 - For more examples please refer to <a href="https://reactstrap.github.io/components/card/" target="_blank" rel="noopener noreferrer">Reactstrap Card</a>
109 - </Col>
110 - </Row>
111 - );
112 - }
113 -}
114 -
115 -export default Buttons;
1 -import React, { Component } from 'react';
2 -import { Row, Col, Breadcrumb, BreadcrumbItem, UncontrolledCarousel } from 'reactstrap';
3 -import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
4 -import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
5 -
6 -import firstSlide from '../../../images/slides/1.jpg';
7 -import secondSlide from '../../../images/slides/2.jpg';
8 -import thirdSlide from '../../../images/slides/3.jpg';
9 -
10 -const carouselItems = [
11 - { src: firstSlide, caption: '' },
12 - { src: secondSlide, caption: '' },
13 - { src: thirdSlide, caption: '' },
14 -];
15 -
16 -class Buttons extends Component {
17 - render() {
18 - return (
19 - <Row>
20 - <Col md={10}>
21 - <Breadcrumb>
22 - <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
23 - <BreadcrumbItem>Documentation</BreadcrumbItem>
24 - <BreadcrumbItem>Components</BreadcrumbItem>
25 - <BreadcrumbItem active>Carousel</BreadcrumbItem>
26 - </Breadcrumb>
27 - </Col>
28 - <Col lg={9}>
29 - <h2>Carousel</h2>
30 - <p className="mb-lg">A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
31 - <SyntaxHighlighter language='javascript' style={tomorrow}>
32 - {"import { UncontrolledCarousel} from 'reactstrap';"}
33 - </SyntaxHighlighter>
34 - <UncontrolledCarousel className="mb-lg mt-lg" captionTex={null} items={carouselItems} />
35 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'const carouselItems = [\n' +
36 - ' { src: firstSlide, caption: \'\' },\n' +
37 - ' { src: secondSlide, caption: \'\' },\n' +
38 - ' { src: thirdSlide, caption: \'\' },\n' +
39 - '];\n' +
40 - '\n' +
41 - '<UncontrolledCarousel captionTex={null} items={carouselItems} />'}
42 - </SyntaxHighlighter>
43 - For more examples please refer to <a href="https://reactstrap.github.io/components/carousel/" target="_blank"
44 - rel="noopener noreferrer">Reactstrap Carousel</a>
45 - </Col>
46 - </Row>
47 - );
48 - }
49 -}
50 -
51 -export default Buttons;
This diff is collapsed. Click to expand it.
1 -import React, { Component } from 'react';
2 -import { Row, Col, Breadcrumb, BreadcrumbItem, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
3 -import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
4 -import classnames from 'classnames';
5 -import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
6 -
7 -class NavPage extends Component {
8 - state = {
9 - defaultNavTabId: '1',
10 - verticalNavTabId: '1',
11 - pillsNavTabId: '1',
12 - };
13 -
14 - changeTab(field, id) {
15 - this.setState({
16 - [field]: id,
17 - })
18 - }
19 -
20 - render() {
21 - return (
22 - <Row>
23 - <Col md={10}>
24 - <Breadcrumb>
25 - <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
26 - <BreadcrumbItem>Documentation</BreadcrumbItem>
27 - <BreadcrumbItem>Components</BreadcrumbItem>
28 - <BreadcrumbItem active>Nav</BreadcrumbItem>
29 - </Breadcrumb>
30 - </Col>
31 -
32 - <Col lg={9}>
33 - <h2>Nav</h2>
34 - <p className="mb-lg">Change the style of Nav component with modifiers and utilities. Mix and match as needed, or build your own.</p>
35 - <SyntaxHighlighter language='javascript' style={tomorrow}>
36 - {"import { Nav, NavItem, NavLink } from 'reactstrap';"}
37 - </SyntaxHighlighter>
38 - <Nav tabs className="bg-transparent mt">
39 - <NavItem>
40 - <NavLink
41 - className={classnames({ active: this.state.defaultNavTabId === '1' })}
42 - onClick={() => {
43 - this.changeTab('defaultNavTabId', '1');
44 - }}
45 - >
46 - Example
47 - </NavLink>
48 - </NavItem>
49 - <NavItem>
50 - <NavLink
51 - className={classnames({ active: this.state.defaultNavTabId === '2' })}
52 - onClick={() => {
53 - this.changeTab('defaultNavTabId', '2');
54 - }}
55 - >
56 - Code
57 - </NavLink>
58 - </NavItem>
59 - </Nav>
60 - <TabContent className="mb-xlg" activeTab={this.state.defaultNavTabId}>
61 - <TabPane tabId="1">
62 - <Nav>
63 - <NavItem>
64 - <NavLink href="#">Link</NavLink>
65 - </NavItem>
66 - <NavItem>
67 - <NavLink href="#">Link</NavLink>
68 - </NavItem>
69 - <NavItem>
70 - <NavLink href="#">Another Link</NavLink>
71 - </NavItem>
72 - <NavItem>
73 - <NavLink disabled href="#">Disabled Link</NavLink>
74 - </NavItem>
75 - </Nav>
76 - </TabPane>
77 - <TabPane tabId="2">
78 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<Nav>\n' +
79 - ' <NavItem>\n' +
80 - ' <NavLink href="#">Link</NavLink>\n' +
81 - ' </NavItem>\n' +
82 - ' <NavItem>\n' +
83 - ' <NavLink href="#">Link</NavLink>\n' +
84 - ' </NavItem>\n' +
85 - ' <NavItem>\n' +
86 - ' <NavLink href="#">Another Link</NavLink>\n' +
87 - ' </NavItem>\n' +
88 - ' <NavItem>\n' +
89 - ' <NavLink disabled href="#">Disabled Link</NavLink>\n' +
90 - ' </NavItem>\n' +
91 - '</Nav>'}</SyntaxHighlighter>
92 - </TabPane>
93 - </TabContent>
94 - <Nav tabs className="bg-transparent mt">
95 - <NavItem>
96 - <NavLink
97 - className={classnames({ active: this.state.verticalNavTabId === '1' })}
98 - onClick={() => {
99 - this.changeTab('verticalNavTabId', '1');
100 - }}
101 - >
102 - Example
103 - </NavLink>
104 - </NavItem>
105 - <NavItem>
106 - <NavLink
107 - className={classnames({ active: this.state.verticalNavTabId === '2' })}
108 - onClick={() => {
109 - this.changeTab('verticalNavTabId', '2');
110 - }}
111 - >
112 - Code
113 - </NavLink>
114 - </NavItem>
115 - </Nav>
116 - <TabContent className="mb-xlg" activeTab={this.state.verticalNavTabId}>
117 - <TabPane tabId="1">
118 - <Nav vertical>
119 - <NavItem>
120 - <NavLink href="#">Link</NavLink>
121 - </NavItem>
122 - <NavItem>
123 - <NavLink href="#">Link</NavLink>
124 - </NavItem>
125 - <NavItem>
126 - <NavLink href="#">Another Link</NavLink>
127 - </NavItem>
128 - <NavItem>
129 - <NavLink disabled href="#">Disabled Link</NavLink>
130 - </NavItem>
131 - </Nav>
132 - </TabPane>
133 - <TabPane tabId="2">
134 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<Nav vertical>\n' +
135 - ' <NavItem>\n' +
136 - ' <NavLink href="#">Link</NavLink>\n' +
137 - ' </NavItem>\n' +
138 - ' <NavItem>\n' +
139 - ' <NavLink href="#">Link</NavLink>\n' +
140 - ' </NavItem>\n' +
141 - ' <NavItem>\n' +
142 - ' <NavLink href="#">Another Link</NavLink>\n' +
143 - ' </NavItem>\n' +
144 - ' <NavItem>\n' +
145 - ' <NavLink disabled href="#">Disabled Link</NavLink>\n' +
146 - ' </NavItem>\n' +
147 - '</Nav>'}</SyntaxHighlighter>
148 - </TabPane>
149 - </TabContent>
150 - <Nav tabs className="bg-transparent mt">
151 - <NavItem>
152 - <NavLink
153 - className={classnames({ active: this.state.pillsNavTabId === '1' })}
154 - onClick={() => {
155 - this.changeTab('pillsNavTabId', '1');
156 - }}
157 - >
158 - Example
159 - </NavLink>
160 - </NavItem>
161 - <NavItem>
162 - <NavLink
163 - className={classnames({ active: this.state.pillsNavTabId === '2' })}
164 - onClick={() => {
165 - this.changeTab('pillsNavTabId', '2');
166 - }}
167 - >
168 - Code
169 - </NavLink>
170 - </NavItem>
171 - </Nav>
172 - <TabContent className="mb-xlg" activeTab={this.state.pillsNavTabId}>
173 - <TabPane tabId="1">
174 - <Nav pills>
175 - <NavItem>
176 - <NavLink href="#" active>Link</NavLink>
177 - </NavItem>
178 - <NavItem>
179 - <NavLink href="#">Link</NavLink>
180 - </NavItem>
181 - <NavItem>
182 - <NavLink href="#">Another Link</NavLink>
183 - </NavItem>
184 - <NavItem>
185 - <NavLink disabled href="#">Disabled Link</NavLink>
186 - </NavItem>
187 - </Nav>
188 - </TabPane>
189 - <TabPane tabId="2">
190 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<Nav>\n' +
191 - ' <NavItem pills>\n' +
192 - ' <NavLink href="#" active>Link</NavLink>\n' +
193 - ' </NavItem>\n' +
194 - ' <NavItem>\n' +
195 - ' <NavLink href="#">Link</NavLink>\n' +
196 - ' </NavItem>\n' +
197 - ' <NavItem>\n' +
198 - ' <NavLink href="#">Another Link</NavLink>\n' +
199 - ' </NavItem>\n' +
200 - ' <NavItem>\n' +
201 - ' <NavLink disabled href="#">Disabled Link</NavLink>\n' +
202 - ' </NavItem>\n' +
203 - '</Nav>'}</SyntaxHighlighter>
204 - </TabPane>
205 - </TabContent>
206 - For more examples please refer to <a href="https://reactstrap.github.io/components/card/" target="_blank" rel="noopener noreferrer">Reactstrap Card</a>
207 - </Col>
208 - </Row>
209 - );
210 - }
211 -}
212 -
213 -export default NavPage;
1 -import React, { Component } from 'react';
2 -import {
3 - Row,
4 - Col,
5 - Breadcrumb,
6 - BreadcrumbItem,
7 - TabContent,
8 - TabPane,
9 - Nav,
10 - NavItem,
11 - NavLink,
12 - Navbar,
13 - NavbarBrand,
14 - NavbarToggler,
15 - Collapse,
16 - UncontrolledDropdown,
17 - DropdownToggle,
18 - DropdownMenu,
19 - DropdownItem
20 -} from 'reactstrap';
21 -import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
22 -import classnames from 'classnames';
23 -import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
24 -
25 -class NavbarPage extends Component {
26 - state = {
27 - defaultNavTabId: '1',
28 - verticalNavTabId: '1',
29 - pillsNavTabId: '1',
30 - };
31 -
32 - changeTab(field, id) {
33 - this.setState({
34 - [field]: id,
35 - })
36 - }
37 -
38 - render() {
39 - return (
40 - <Row>
41 - <Col md={10}>
42 - <Breadcrumb>
43 - <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
44 - <BreadcrumbItem>Documentation</BreadcrumbItem>
45 - <BreadcrumbItem>Components</BreadcrumbItem>
46 - <BreadcrumbItem active>Navbar</BreadcrumbItem>
47 - </Breadcrumb>
48 - </Col>
49 -
50 - <Col lg={9}>
51 - <h2>Navbar</h2>
52 - <p className="mb-lg">Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar.
53 - Includes support for branding, navigation, and more, including support for our collapse plugin.</p>
54 - <SyntaxHighlighter language='javascript' style={tomorrow}>
55 - {"import {\n" +
56 - " Nav,\n" +
57 - " NavItem,\n" +
58 - " NavLink,\n" +
59 - " Navbar,\n" +
60 - " NavbarBrand,\n" +
61 - " NavbarToggler,\n" +
62 - " Collapse,\n" +
63 - " UncontrolledDropdown,\n" +
64 - " DropdownToggle,\n" +
65 - " DropdownMenu,\n" +
66 - " DropdownItem\n" +
67 - "} from 'reactstrap';"}
68 - </SyntaxHighlighter>
69 - <Nav tabs className="bg-transparent mt">
70 - <NavItem>
71 - <NavLink
72 - className={classnames({ active: this.state.defaultNavTabId === '1' })}
73 - onClick={() => {
74 - this.changeTab('defaultNavTabId', '1');
75 - }}
76 - >
77 - Example
78 - </NavLink>
79 - </NavItem>
80 - <NavItem>
81 - <NavLink
82 - className={classnames({ active: this.state.defaultNavTabId === '2' })}
83 - onClick={() => {
84 - this.changeTab('defaultNavTabId', '2');
85 - }}
86 - >
87 - Code
88 - </NavLink>
89 - </NavItem>
90 - </Nav>
91 - <TabContent className="mb-xlg" activeTab={this.state.defaultNavTabId}>
92 - <TabPane tabId="1">
93 - <Navbar color="light" light expand="md">
94 - <NavbarBrand href="/">Sing</NavbarBrand>
95 - <NavbarToggler />
96 - <Collapse navbar>
97 - <Nav className="ml-auto" navbar>
98 - <NavItem>
99 - <NavLink href="#">Components</NavLink>
100 - </NavItem>
101 - <NavItem>
102 - <NavLink href="#">Documentation</NavLink>
103 - </NavItem>
104 - <UncontrolledDropdown nav inNavbar>
105 - <DropdownToggle nav caret>
106 - Options
107 - </DropdownToggle>
108 - <DropdownMenu right>
109 - <DropdownItem>
110 - Option 1
111 - </DropdownItem>
112 - <DropdownItem>
113 - Option 2
114 - </DropdownItem>
115 - <DropdownItem divider />
116 - <DropdownItem>
117 - Reset
118 - </DropdownItem>
119 - </DropdownMenu>
120 - </UncontrolledDropdown>
121 - </Nav>
122 - </Collapse>
123 - </Navbar>
124 - </TabPane>
125 - <TabPane tabId="2">
126 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<Navbar color="light" light expand="md">\n' +
127 - ' <NavbarBrand href="/">Sing</NavbarBrand>\n' +
128 - ' <NavbarToggler />\n' +
129 - ' <Collapse navbar>\n' +
130 - ' <Nav className="ml-auto" navbar>\n' +
131 - ' <NavItem>\n' +
132 - ' <NavLink href="#">Components</NavLink>\n' +
133 - ' </NavItem>\n' +
134 - ' <NavItem>\n' +
135 - ' <NavLink href="#">Documentation</NavLink>\n' +
136 - ' </NavItem>\n' +
137 - ' <UncontrolledDropdown nav inNavbar>\n' +
138 - ' <DropdownToggle nav caret>\n' +
139 - ' Options\n' +
140 - ' </DropdownToggle>\n' +
141 - ' <DropdownMenu right>\n' +
142 - ' <DropdownItem>\n' +
143 - ' Option 1\n' +
144 - ' </DropdownItem>\n' +
145 - ' <DropdownItem>\n' +
146 - ' Option 2\n' +
147 - ' </DropdownItem>\n' +
148 - ' <DropdownItem divider />\n' +
149 - ' <DropdownItem>\n' +
150 - ' Reset\n' +
151 - ' </DropdownItem>\n' +
152 - ' </DropdownMenu>\n' +
153 - ' </UncontrolledDropdown>\n' +
154 - ' </Nav>\n' +
155 - ' </Collapse>\n' +
156 - '</Navbar>'}</SyntaxHighlighter>
157 - </TabPane>
158 - </TabContent>
159 - For more examples please refer to <a href="https://reactstrap.github.io/components/card/" target="_blank" rel="noopener noreferrer">Reactstrap Card</a>
160 - </Col>
161 - </Row>
162 - );
163 - }
164 -}
165 -
166 -export default NavbarPage;
1 -import React, { Component } from 'react';
2 -import {
3 - Row,
4 - Col,
5 - Breadcrumb,
6 - BreadcrumbItem,
7 - TabContent,
8 - TabPane,
9 - Nav,
10 - NavItem,
11 - NavLink,
12 - Button,
13 - Popover,
14 - PopoverHeader,
15 - PopoverBody,
16 - UncontrolledTooltip,
17 -} from 'reactstrap';
18 -import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
19 -import classnames from 'classnames';
20 -import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
21 -
22 -class NavbarPage extends Component {
23 - state = {
24 - defaultPopoversTabId: '1',
25 - defaultTooltipsTabId: '1',
26 - popovers: {
27 - 1: false,
28 - 2: false,
29 - 3: false,
30 - 4: false,
31 - }
32 - };
33 -
34 - changeTab(field, id) {
35 - this.setState({
36 - [field]: id,
37 - })
38 - }
39 -
40 - toggle(id) {
41 - this.setState(prevState => ({
42 - popovers: {
43 - ...prevState.popovers,
44 - [id]: !prevState.popovers[id],
45 - },
46 - }))
47 - }
48 -
49 - render() {
50 - return (
51 - <Row>
52 - <Col md={10}>
53 - <Breadcrumb>
54 - <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
55 - <BreadcrumbItem>Documentation</BreadcrumbItem>
56 - <BreadcrumbItem>Components</BreadcrumbItem>
57 - <BreadcrumbItem active>Popovers & Tooltips</BreadcrumbItem>
58 - </Breadcrumb>
59 - </Col>
60 -
61 - <Col lg={9}>
62 - <h2>Popovers</h2>
63 - <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>
64 - <SyntaxHighlighter language='javascript' style={tomorrow}>
65 - {"import { Popover, PopoverHeader, PopoverBody, UncontrolledTooltip } from 'reactstrap';"}
66 - </SyntaxHighlighter>
67 - <Nav tabs className="bg-transparent mt">
68 - <NavItem>
69 - <NavLink
70 - className={classnames({ active: this.state.defaultPopoversTabId === '1' })}
71 - onClick={() => {
72 - this.changeTab('defaultPopoversTabId', '1');
73 - }}
74 - >
75 - Example
76 - </NavLink>
77 - </NavItem>
78 - <NavItem>
79 - <NavLink
80 - className={classnames({ active: this.state.defaultPopoversTabId === '2' })}
81 - onClick={() => {
82 - this.changeTab('defaultPopoversTabId', '2');
83 - }}
84 - >
85 - Code
86 - </NavLink>
87 - </NavItem>
88 - </Nav>
89 - <TabContent className="mb-xlg" activeTab={this.state.defaultPopoversTabId}>
90 - <TabPane tabId="1">
91 - <Button className="mr" id="popover-1" type="button" color="success" onClick={() => this.toggle(1)}>
92 - Bottom
93 - </Button>
94 - <Button className="mr" id="popover-2" type="button" color="danger" onClick={() => this.toggle(2)}>
95 - Right
96 - </Button>
97 - <Button className="mr" id="popover-3" type="button" color="warning" onClick={() => this.toggle(3)}>
98 - Top
99 - </Button>
100 - <Button className="mr" id="popover-4" type="button" color="info" onClick={() => this.toggle(4)}>
101 - Left
102 - </Button>
103 - <Popover placement="bottom" isOpen={this.state.popovers[1]} target="popover-1" toggle={() => this.toggle(1)}>
104 - <PopoverHeader>Popover Title</PopoverHeader>
105 - <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
106 - </Popover>
107 - <Popover placement="right" isOpen={this.state.popovers[2]} target="popover-2" toggle={() => this.toggle(2)}>
108 - <PopoverHeader>Popover Title</PopoverHeader>
109 - <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
110 - </Popover>
111 - <Popover placement="top" isOpen={this.state.popovers[3]} target="popover-3" toggle={() => this.toggle(3)}>
112 - <PopoverHeader>Popover Title</PopoverHeader>
113 - <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
114 - </Popover>
115 - <Popover placement="left" isOpen={this.state.popovers[4]} target="popover-4" toggle={() => this.toggle(4)}>
116 - <PopoverHeader>Popover Title</PopoverHeader>
117 - <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
118 - </Popover>
119 - </TabPane>
120 - <TabPane tabId="2">
121 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<Button id="popover" type="button" color="info" onClick={this.toggle}>\n' +
122 - ' Top\n' +
123 - '</Button>\n\n' +
124 - '<Popover placement="top" isOpen={this.state.isPopoverActive} target="popover" toggle={this.toggle}>\n' +
125 - ' <PopoverHeader>Popover Title</PopoverHeader>\n' +
126 - ' <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>\n' +
127 - '</Popover>'}</SyntaxHighlighter>
128 - </TabPane>
129 - </TabContent>
130 - <h2>Tooltips</h2>
131 - <Nav tabs className="bg-transparent mt">
132 - <NavItem>
133 - <NavLink
134 - className={classnames({ active: this.state.defaultTooltipsTabId === '1' })}
135 - onClick={() => {
136 - this.changeTab('defaultTooltipsTabId', '1');
137 - }}
138 - >
139 - Example
140 - </NavLink>
141 - </NavItem>
142 - <NavItem>
143 - <NavLink
144 - className={classnames({ active: this.state.defaultTooltipsTabId === '2' })}
145 - onClick={() => {
146 - this.changeTab('defaultTooltipsTabId', '2');
147 - }}
148 - >
149 - Code
150 - </NavLink>
151 - </NavItem>
152 - </Nav>
153 - <TabContent className="mb-xlg" activeTab={this.state.defaultTooltipsTabId}>
154 - <TabPane tabId="1">
155 - <Button className="mr" id="tooltip-1" type="button" color="success">
156 - Bottom
157 - </Button>
158 - <Button className="mr" id="tooltip-2" type="button" color="danger">
159 - Right
160 - </Button>
161 - <Button className="mr" id="tooltip-3" type="button" color="warning">
162 - Top
163 - </Button>
164 - <Button className="mr" id="tooltip-4" type="button" color="info">
165 - Left
166 - </Button>
167 - <UncontrolledTooltip placement="bottom" target="tooltip-1">
168 - Hello world!
169 - </UncontrolledTooltip>
170 - <UncontrolledTooltip placement="right" target="tooltip-2">
171 - Hello world!
172 - </UncontrolledTooltip>
173 - <UncontrolledTooltip placement="top" target="tooltip-3">
174 - Hello world!
175 - </UncontrolledTooltip>
176 - <UncontrolledTooltip placement="left" target="tooltip-4">
177 - Hello world!
178 - </UncontrolledTooltip>
179 - </TabPane>
180 - <TabPane tabId="2">
181 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<Button className="mr" id="tooltip" type="button" color="info">\n' +
182 - ' Left\n' +
183 - '</Button>\n\n' +
184 - '<UncontrolledTooltip placement="left" target="tooltip">\n' +
185 - ' Hello world!\n' +
186 - '</UncontrolledTooltip>'}</SyntaxHighlighter>
187 - </TabPane>
188 - </TabContent>
189 - For more examples please refer to <a href="https://reactstrap.github.io/components/popovers/" target="_blank" rel="noopener noreferrer">Reactstrap Popovers</a>
190 - &nbsp;and <a href="https://reactstrap.github.io/components/tooltips/" target="_blank" rel="noopener noreferrer">Reactstrap Tooltips</a>
191 - </Col>
192 - </Row>
193 - );
194 - }
195 -}
196 -
197 -export default NavbarPage;
1 -import React, { Component } from 'react';
2 -import { Row, Col, Breadcrumb, BreadcrumbItem, Progress, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
3 -import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
4 -import classnames from 'classnames';
5 -import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
6 -
7 -class Buttons extends Component {
8 - state = {
9 - defaultProgressTabId: '1',
10 - };
11 -
12 - changeTab(field, id) {
13 - this.setState({
14 - [field]: id,
15 - })
16 - }
17 -
18 - render() {
19 - return (
20 - <Row>
21 - <Col md={10}>
22 - <Breadcrumb>
23 - <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
24 - <BreadcrumbItem>Documentation</BreadcrumbItem>
25 - <BreadcrumbItem>Components</BreadcrumbItem>
26 - <BreadcrumbItem active>Progress</BreadcrumbItem>
27 - </Breadcrumb>
28 - </Col>
29 -
30 - <Col lg={9}>
31 - <h2>Progress</h2>
32 - <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>
33 - <SyntaxHighlighter language='javascript' style={tomorrow}>
34 - {"import { Progress } from 'reactstrap';"}
35 - </SyntaxHighlighter>
36 - <Nav tabs className="bg-transparent mt">
37 - <NavItem>
38 - <NavLink
39 - className={classnames({ active: this.state.defaultProgressTabId === '1' })}
40 - onClick={() => {
41 - this.changeTab('defaultProgressTabId', '1');
42 - }}
43 - >
44 - Example
45 - </NavLink>
46 - </NavItem>
47 - <NavItem>
48 - <NavLink
49 - className={classnames({ active: this.state.defaultProgressTabId === '2' })}
50 - onClick={() => {
51 - this.changeTab('defaultProgressTabId', '2');
52 - }}
53 - >
54 - Code
55 - </NavLink>
56 - </NavItem>
57 - </Nav>
58 - <TabContent className="mb-xlg" activeTab={this.state.defaultProgressTabId}>
59 - <TabPane tabId="1">
60 - <div className="text-center">0%</div>
61 - <Progress />
62 - <div className="text-center">25%</div>
63 - <Progress value="25" />
64 - <div className="text-center">50%</div>
65 - <Progress value={50} />
66 - <div className="text-center">75%</div>
67 - <Progress striped value={75} />
68 - <div className="text-center">100%</div>
69 - <Progress animated value="100" />
70 - <div className="text-center">Multiple bars</div>
71 - <Progress multi>
72 - <Progress bar value="15" />
73 - <Progress bar color="success" value="30" />
74 - <Progress bar color="info" value="25" />
75 - <Progress bar color="warning" value="20" />
76 - <Progress bar color="danger" value="5" />
77 - </Progress>
78 - </TabPane>
79 - <TabPane tabId="2">
80 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<div className="text-center">0%</div>\n' +
81 - '<Progress />\n' +
82 - '<div className="text-center">25%</div>\n' +
83 - '<Progress value="25" />\n' +
84 - '<div className="text-center">50%</div>\n' +
85 - '<Progress value={50} />\n' +
86 - '<div className="text-center">75%</div>\n' +
87 - '<Progress striped value={75} />\n' +
88 - '<div className="text-center">100%</div>\n' +
89 - '<Progress animated value="100" />\n' +
90 - '<div className="text-center">Multiple bars</div>\n' +
91 - '<Progress multi>\n' +
92 - ' <Progress bar value="15" />\n' +
93 - ' <Progress bar color="success" value="30" />\n' +
94 - ' <Progress bar color="info" value="25" />\n' +
95 - ' <Progress bar color="warning" value="20" />\n' +
96 - ' <Progress bar color="danger" value="5" />\n' +
97 - '</Progress>'}</SyntaxHighlighter>
98 - </TabPane>
99 - </TabContent>
100 - For more examples please refer to <a href="https://reactstrap.github.io/components/progress/" target="_blank" rel="noopener noreferrer">Reactstrap Progress</a>
101 - </Col>
102 - </Row>
103 - );
104 - }
105 -}
106 -
107 -export default Buttons;
1 -import React, { Component } from 'react';
2 -import { Row, Col, Breadcrumb, BreadcrumbItem, Collapse, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
3 -import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism';
4 -import classnames from 'classnames';
5 -import { tomorrow } from 'react-syntax-highlighter/dist/styles/prism';
6 -
7 -class Buttons extends Component {
8 - state = {
9 - defaultTabsTabId: '1',
10 - accordion: [false, false, false],
11 - };
12 -
13 - changeTab(field, id) {
14 - this.setState({
15 - [field]: id,
16 - })
17 - }
18 -
19 - toggleAccordion(id) {
20 - const arr = [];
21 - arr.length = this.state.accordion.length;
22 - arr.fill(false);
23 - arr[id] = !this.state.accordion[id];
24 - this.setState({
25 - accordion: arr,
26 - });
27 - }
28 -
29 - render() {
30 - return (
31 - <Row>
32 - <Col md={10}>
33 - <Breadcrumb>
34 - <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
35 - <BreadcrumbItem>Documentation</BreadcrumbItem>
36 - <BreadcrumbItem>Components</BreadcrumbItem>
37 - <BreadcrumbItem active>Tabs & Accordion</BreadcrumbItem>
38 - </Breadcrumb>
39 - </Col>
40 -
41 - <Col lg={9}>
42 - <h2>Tabs</h2>
43 - <p className="mb-lg">Activates a tab element and content container.</p>
44 - <SyntaxHighlighter language='javascript' style={tomorrow}>
45 - {"import { TabContent, TabPane } from 'reactstrap';"}
46 - </SyntaxHighlighter>
47 - <h4 className="mt-lg">Example</h4>
48 - <Nav tabs className="bg-transparent mt">
49 - <NavItem>
50 - <NavLink
51 - className={classnames({ active: this.state.defaultTabsTabId === '1' })}
52 - onClick={() => {
53 - this.changeTab('defaultTabsTabId', '1');
54 - }}
55 - >
56 - Tab 1
57 - </NavLink>
58 - </NavItem>
59 - <NavItem>
60 - <NavLink
61 - className={classnames({ active: this.state.defaultTabsTabId === '2' })}
62 - onClick={() => {
63 - this.changeTab('defaultTabsTabId', '2');
64 - }}
65 - >
66 - Tab 2
67 - </NavLink>
68 - </NavItem>
69 - </Nav>
70 - <TabContent className="mb-xlg" activeTab={this.state.defaultTabsTabId}>
71 - <TabPane tabId="1">
72 - First tab content
73 - </TabPane>
74 - <TabPane tabId="2">
75 - Second tab content
76 - </TabPane>
77 - </TabContent>
78 - <h4>Code</h4>
79 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<TabContent className="mb-xlg" activeTab={this.state.activeTabId}>\n' +
80 - ' <TabPane tabId="1">\n' +
81 - ' First tab content\n' +
82 - ' </TabPane>\n' +
83 - ' <TabPane tabId="2">\n' +
84 - ' Second tab content\n' +
85 - ' </TabPane>\n' +
86 - '</TabContent>'}</SyntaxHighlighter>
87 - For more examples please refer to <a href="https://reactstrap.github.io/components/tabs/"
88 - rel="noopener noreferrer" target="_blank">Reactstrap Tabs</a>
89 - <h2 className="mt-lg">Accordion</h2>
90 - <p className="mb-lg">Activates a tab element and content container.</p>
91 - <SyntaxHighlighter language='javascript' style={tomorrow}>
92 - {"import { Collapse } from 'reactstrap';"}
93 - </SyntaxHighlighter>
94 - <h4 className="mt-lg">Example</h4>
95 - <div className="card panel mt-lg mb-xs">
96 - { /* eslint-disable */ }
97 - <div
98 - className="card-header panel-header bg-light" role="button"
99 - onClick={() => { this.toggleAccordion(0); }}
100 - >
101 - { /* eslint-enable */ }
102 - <div className="mb-0">
103 - {/* eslint-disable-next-line */}
104 - <a className="accordion-toggle" role="button">
105 - Collapsible Group Item
106 - <i className={`fa fa-angle-down ${this.state.accordion[0] ? 'expanded' : ''}`} />
107 - </a>
108 - </div>
109 - </div>
110 - <Collapse className="panel-body" isOpen={this.state.accordion[0]}>
111 - <p>Get base styles and flexible support for collapsible components like accordions and navigation.
112 - Using the collapse plugin, we built a simple accordion by extending the panel component.
113 - </p>
114 - </Collapse>
115 - </div>
116 - <div className="card panel mb-xs">
117 - { /* eslint-disable */ }
118 - <div
119 - className="card-header panel-header bg-light" role="button"
120 - onClick={() => { this.toggleAccordion(1); }}
121 - >
122 - { /* eslint-enable */ }
123 - <div className="mb-0">
124 - {/* eslint-disable-next-line */}
125 - <a className="accordion-toggle" role="button">
126 - Normal Text Insertion
127 - <i className={`fa fa-angle-down ${this.state.accordion[1] ? 'expanded' : ''}`} />
128 - </a>
129 - </div>
130 - </div>
131 - <Collapse className="panel-body" isOpen={this.state.accordion[1]}>
132 - <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.
133 - </p>
134 - </Collapse>
135 - </div>
136 - <div className="card panel mb-lg">
137 - { /* eslint-disable */ }
138 - <div
139 - className="card-header panel-header bg-light" role="button"
140 - onClick={() => { this.toggleAccordion(2); }}
141 - >
142 - { /* eslint-enable */ }
143 - <div className="mb-0">
144 - {/* eslint-disable-next-line */}
145 - <a className="accordion-toggle" role="button">
146 - Random from the Web
147 - <i className={`fa fa-angle-down ${this.state.accordion[2] ? 'expanded' : ''}`} />
148 - </a>
149 - </div>
150 - </div>
151 - <Collapse className="panel-body" isOpen={this.state.accordion[2]}>
152 - <p><span className="fw-semi-bold">Light Blue</span> - is a next generation admin template based
153 - on the latest Metro design. There are few reasons we want to tell you, why we have created it:
154 - We didn't like the darkness of most of admin templates, so we created this light one.
155 - We didn't like the high contrast of most of admin templates, so we created this unobtrusive one.
156 - We searched for a solution of how to make widgets look like real widgets, so we decided that
157 - deep background - is what makes widgets look real.
158 - </p>
159 - <p className="no-margin text-muted"><em>- Some One</em></p>
160 - </Collapse>
161 - </div>
162 - <h4>Code</h4>
163 - <SyntaxHighlighter language='javascript' style={tomorrow}>{'<div className="card panel mb-xs">\n' +
164 - ' <div\n' +
165 - ' className="card-header panel-header bg-light" role="button"\n' +
166 - ' onClick={this.toggleAccordion}\n' +
167 - ' >\n' +
168 - ' <div className="mb-0">\n' +
169 - ' <a className="accordion-toggle" role="button">\n' +
170 - ' Normal Text Insertion\n' +
171 - ' <i className={["fa fa-angle-down", this.state.isAccordionOpened ? "expanded" : ""].join(" ")} />\n' +
172 - ' </a>\n' +
173 - ' </div>\n' +
174 - ' </div>\n' +
175 - ' <Collapse className="panel-body" isOpen={this.state.isAccordionOpened}>\n' +
176 - ' <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' +
177 - ' </p>\n' +
178 - ' </Collapse>\n' +
179 - '</div>'}</SyntaxHighlighter>
180 - For more examples please refer to <a href="https://reactstrap.github.io/components/collapse/" target="_blank" rel="noopener noreferrer">Reactstrap Collapse</a>
181 - </Col>
182 - </Row>
183 - );
184 - }
185 -}
186 -
187 -export default Buttons;
1 -import React from 'react';
2 -import { Row, Col, Breadcrumb, BreadcrumbItem, Table } from 'reactstrap';
3 -
4 -import Widget from '../../../components/Widget/Widget';
5 -import Scrollspy from "../ScrollSpyComponent";
6 -
7 -const Licences = () => (
8 - <Row>
9 - <Col md={10}>
10 - <Breadcrumb>
11 - <BreadcrumbItem>YOU ARE HERE</BreadcrumbItem>
12 - <BreadcrumbItem>Documentation</BreadcrumbItem>
13 - <BreadcrumbItem>Getting Started</BreadcrumbItem>
14 - <BreadcrumbItem active>Licences</BreadcrumbItem>
15 - </Breadcrumb>
16 - </Col>
17 - <Col lg={9}>
18 - <Widget id="Licences">
19 - <h2>Licences</h2>
20 - <p className="lead">
21 - A license grants you a non-exclusive and non-transferable right to use
22 - and incorporate the item in your personal or commercial projects.
23 - If your end product including an item is going to be free to the end user then
24 - a Single License is what you need. An Extended License is required if the
25 - end user must pay to use the end product.
26 - </p>
27 - <Table>
28 - <thead>
29 - <tr>
30 - <th></th>
31 - <th>Single</th>
32 - <th>Extended</th>
33 - </tr>
34 - </thead>
35 - <tbody>
36 - <tr>
37 - <td>Hundreds unique components</td>
38 - <td className="text-success fw-bold">+</td>
39 - <td className="text-success fw-bold">+</td>
40 - </tr>
41 - <tr>
42 - <td>All pages</td>
43 - <td className="text-success fw-bold">+</td>
44 - <td className="text-success fw-bold">+</td>
45 - </tr>
46 - <tr>
47 - <td>Free Updates</td>
48 - <td>3 months</td>
49 - <td>6 months</td>
50 - </tr>
51 - <tr>
52 - <td>Paying users allowed</td>
53 - <td className="text-danger fw-bold">-</td>
54 - <td className="text-success fw-bold">+</td>
55 - </tr>
56 - </tbody>
57 - </Table>
58 - </Widget>
59 - <Widget id="Single">
60 - <h3>Single Application License</h3>
61 - <p className="lead">
62 - Your use of the item is restricted to a single application. You may use the item
63 - in work which you are creating for your own purposes or for your client. You must
64 - not incorporate the item in a work which is created for redistribution or resale
65 - by you or your client. The item may not be redistributed or resold. You may not
66 - charge users for using your application.
67 - </p>
68 - </Widget>
69 - <Widget id="Extended">
70 - <h3>Extended Application License</h3>
71 - <p className="lead">
72 - Your use of the item is restricted to a single application.
73 - You may use the item in work which you are creating for your own
74 - purposes or for your clients. You are licensed to use the Item to create one single
75 - End Product for yourself or for one client (a “single application”), and the
76 - End Product may be Sold and users may be charged for using it (e.g. you are building
77 - SAAS application).
78 - </p>
79 - </Widget>
80 - <p class="mt">
81 - In case if you need any clarifications considering licenses feel free
82 - to contact us via email: <a class="text-warning" href="mailto:support@flatlogic.com">support@flatlogic.com</a>.
83 - </p>
84 - </Col>
85 - <Col lg={3}>
86 - <Scrollspy
87 - title="LICENCES"
88 - prefix="getting-started/licences"
89 - ids={[
90 - 'Licences',
91 - 'Single',
92 - 'Extended',
93 - ]} />
94 - </Col>
95 - </Row>
96 -);
97 -
98 -export default Licences;
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.