Updated to styled-components v4.

- Replaced innerRef with ref

- Added css helper for interpolating keyframes.

- Added test for speaking submit button to catch rendering error

Author: pascalgagneur

lib/ChatBot.jsx

@@ -31,6 +31,18 @@ class ChatBot extends Component {
   constructor(props) {
     super(props);
 
+    this.content = null;
+    this.input = null;
+
+    this.setContentRef = element => {
+      this.content = element;
+    };
+
+    this.setInputRef = element => {
+      this.input = element;
+    };
+
+
     this.state = {
       renderedSteps: [],
       previousSteps: [],
@@ -665,7 +677,7 @@ class ChatBot extends Component {
           {!hideHeader && header}
           <Content
             className="rsc-content"
-            innerRef={contentRef => (this.content = contentRef)}
+            ref={this.setContentRef}
             floating={floating}
             style={contentStyle}
             height={height}
@@ -679,7 +691,7 @@ class ChatBot extends Component {
                 <Input
                   type="textarea"
                   style={inputStyle}
-                  innerRef={inputRef => (this.input = inputRef)}
+                  ref={this.setInputRef}
                   className="rsc-input"
                   placeholder={inputInvalid ? '' : inputPlaceholder}
                   onKeyPress={this.handleKeyPress}

lib/components/Input.jsx

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
 import { invalidInput } from '../common/animations';
+import styled, { css } from 'styled-components';
 
 const Input = styled.input`
-  animation: ${props => props.invalid ? `${invalidInput} .2s ease` : ''};
+  animation: ${props => props.invalid ? css`${invalidInput} .2s ease` : ''};
   border: 0;
   border-radius: 0;
   border-bottom-left-radius: 10px;

lib/components/SubmitButton.jsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import defaultTheme from '../theme';
 import { pulse } from '../common/animations';
 
@@ -31,7 +31,7 @@ const SubmitButton = styled.button`
     height: 23px;
     border-radius: 50%;
     animation: ${({ theme, speaking }) =>
-      speaking ? `${pulse(theme.headerBgColor)} 2s ease infinite` : ''};
+      speaking ? css`${pulse(theme.headerBgColor)} 2s ease infinite` : ''};
   }
   &:not(:disabled):hover {
     opacity: 0.7;

package-lock.json

@@ -74,7 +74,7 @@
     "react-addons-test-utils": "^15.6.2",
     "react-test-renderer": "^16.0.0",
     "sinon": "^7.1.0",
-    "styled-components": "^3.4.10",
+    "styled-components": "^4.1.3",
     "uglifyjs-webpack-plugin": "^0.4.6",
     "webpack": "^4.23.1",
     "webpack-bundle-analyzer": "^2.13.1",

package.json

@@ -14,4 +14,10 @@ describe('SubmitButton', () => {
     const wrapper = mount(<SubmitButton invalid={true} />);
     expect(wrapper.props().invalid).to.be.equal(true);
   });
+
+  it('should render a speaking button', () => {
+    const wrapper = mount(<SubmitButton speaking={true} />);
+    expect(wrapper.props().speaking).to.be.equal(true);
+  });
+
 });