diff --git a/package.json b/package.json
index 9f764b5f..9916257b 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
"react-scale-text": "^1.2.2",
"react-select": "^1.2.1",
"react-transition-group": "^2.2.1",
+ "redbox-react": "^1.6.0",
"redux": "4.0.0",
"redux-logger": "^3.0.6",
"redux-raven-middleware": "^1.2.0",
diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js
index 3d7757d8..9ec80d71 100644
--- a/src/js/components/DeviceHeader/index.js
+++ b/src/js/components/DeviceHeader/index.js
@@ -1,5 +1,5 @@
import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';
import Icon from 'components/Icon';
import icons from 'config/icons';
@@ -34,7 +34,7 @@ const Name = styled.div`
display: block;
text-overflow: ellipsis;
overflow: hidden;
- white-space: nowrap;
+ white-space: no-wrap;
font-weight: 500;
font-size: 14px;
color: ${colors.TEXT_PRIMARY};
@@ -82,10 +82,6 @@ const Dot = styled.div`
height: 10px;
`;
-const StyledIcon = styled(Icon)`
- transform: rotate(180deg);
-`;
-
const DeviceHeader = ({
disabled = false,
handleOpen,
@@ -99,22 +95,20 @@ const DeviceHeader = ({
-
+
{label}
{getStatusName(status)}
- {deviceCount > 1 ? {deviceCount} : null}
- 1 && {deviceCount}}
+
diff --git a/src/js/components/Icon/index.js b/src/js/components/Icon/index.js
index d36e8b76..20711ffb 100644
--- a/src/js/components/Icon/index.js
+++ b/src/js/components/Icon/index.js
@@ -1,7 +1,36 @@
import React from 'react';
import PropTypes from 'prop-types';
+import styled, { css, keyframes } from 'styled-components';
-const Icon = ({ icon, size = 32, color = 'black' }) => {
+const rotate180up = keyframes`
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(180deg);
+ }
+`;
+
+const rotate180down = keyframes`
+ from {
+ transform: rotate(180deg);
+ }
+
+ to {
+ transform: rotate(0deg);
+ }
+`;
+
+const SvgWrapper = styled.svg`
+ animation: ${props => (props.isActive ? rotate180up : rotate180down)} 0.2s linear 1 forwards;
+`;
+
+const Path = styled.path``;
+
+const Icon = ({
+ icon, size = 32, color = 'black', isActive = false,
+}) => {
const styles = {
svg: {
display: 'inline-block',
@@ -13,24 +42,27 @@ const Icon = ({ icon, size = 32, color = 'black' }) => {
};
return (
-
+
);
};
Icon.propTypes = {
icon: PropTypes.string.isRequired,
size: PropTypes.number,
+ isActive: PropTypes.bool,
color: PropTypes.string,
};
diff --git a/src/js/support/ErrorBoundary.js b/src/js/support/ErrorBoundary.js
index 38624521..b72cf451 100644
--- a/src/js/support/ErrorBoundary.js
+++ b/src/js/support/ErrorBoundary.js
@@ -1,23 +1,19 @@
import React, { Component } from 'react';
+import RedBox from 'redbox-react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
- this.state = { hasError: false };
+ this.state = { hasError: false, error: false };
}
componentDidCatch(error, info) {
- // Display fallback UI
- this.setState({ hasError: true });
- console.error('error', error);
- // You can also log the error to an error reporting service
- // logErrorToMyService(error, info);
+ this.setState({ hasError: true, error });
}
render() {
if (this.state.hasError) {
- // You can render any custom fallback UI
- return
Something went wrong.
;
+ return ;
}
return this.props.children;
}
diff --git a/yarn.lock b/yarn.lock
index 3076e96f..e5c19095 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3234,6 +3234,12 @@ error-ex@^1.2.0, error-ex@^1.3.1:
dependencies:
is-arrayish "^0.2.1"
+error-stack-parser@^1.3.6:
+ version "1.3.6"
+ resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292"
+ dependencies:
+ stackframe "^0.3.1"
+
error@^7.0.2:
version "7.0.2"
resolved "https://registry.yarnpkg.com/error/-/error-7.0.2.tgz#a5f75fff4d9926126ddac0ea5dc38e689153cb02"
@@ -8100,6 +8106,15 @@ rechoir@^0.6.2:
dependencies:
resolve "^1.1.6"
+redbox-react@^1.6.0:
+ version "1.6.0"
+ resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.6.0.tgz#e753ac02595bc1bf695b3935889a4f5b1b5a21a1"
+ dependencies:
+ error-stack-parser "^1.3.6"
+ object-assign "^4.0.1"
+ prop-types "^15.5.4"
+ sourcemapped-stacktrace "^1.1.6"
+
redent@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -8861,6 +8876,10 @@ source-map-url@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+source-map@0.5.6:
+ version "0.5.6"
+ resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+
source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -8875,6 +8894,12 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+sourcemapped-stacktrace@^1.1.6:
+ version "1.1.8"
+ resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.8.tgz#6b7a3f1a6fb15f6d40e701e23ce404553480d688"
+ dependencies:
+ source-map "0.5.6"
+
spdx-correct@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
@@ -8956,6 +8981,10 @@ stack-utils@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620"
+stackframe@^0.3.1:
+ version "0.3.1"
+ resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4"
+
state-toggle@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.1.tgz#c3cb0974f40a6a0f8e905b96789eb41afa1cde3a"