Merge pull request LucasBassetti#208 from digitalWestie/extra-control

Add an option for providing a custom control

Author: LucasBassetti

dist/react-simple-chatbot.js

@@ -72,7 +72,12 @@ class ChatBot extends Component {
     const chatSteps = {};
 
     const defaultBotSettings = { delay: botDelay, avatar: botAvatar };
-    const defaultUserSettings = { delay: userDelay, avatar: userAvatar, hideInput: false };
+    const defaultUserSettings = {
+      delay: userDelay,
+      avatar: userAvatar,
+      hideInput: false,
+      hideExtraControl: false
+    };
     const defaultCustomSettings = { delay: customDelay };
 
     for (let i = 0, len = steps.length; i < len; i += 1) {
@@ -246,6 +251,9 @@ class ChatBot extends Component {
     if (data && data.hideInput) {
       currentStep.hideInput = data.hideInput;
     }
+    if (data && data.hideExtraControl) {
+      currentStep.hideExtraControl = data.hideExtraControl;
+    }
     if (data && data.trigger) {
       currentStep.trigger = this.getTriggeredStep(data.trigger, data.value);
     }
@@ -592,6 +600,8 @@ class ChatBot extends Component {
     const {
       className,
       contentStyle,
+      extraControl,
+      controlStyle,
       floating,
       floatingIcon,
       floatingStyle,
@@ -621,6 +631,15 @@ class ChatBot extends Component {
       </Header>
     );
 
+    let customControl;
+    if (extraControl !== undefined) {
+      customControl = React.cloneElement(extraControl, {
+        disabled,
+        speaking,
+        invalid: inputInvalid
+      });
+    }
+
     const icon =
       (this.isInputValueEmpty() || speaking) && recognitionEnable ? <MicIcon /> : <SubmitIcon />;
 
@@ -680,18 +699,21 @@ class ChatBot extends Component {
                 {...inputAttributesOverride}
               />
             )}
-            {!currentStep.hideInput && !hideSubmitButton && (
-              <SubmitButton
-                className="rsc-submit-button"
-                style={submitButtonStyle}
-                onClick={this.handleSubmitButton}
-                invalid={inputInvalid}
-                disabled={disabled}
-                speaking={speaking}
-              >
-                {icon}
-              </SubmitButton>
-            )}
+            <div style={controlStyle} className="rsc-controls">
+              {!currentStep.hideInput && !currentStep.hideExtraControl && customControl}
+              {!currentStep.hideInput && !hideSubmitButton && (
+                <SubmitButton
+                  className="rsc-submit-button"
+                  style={submitButtonStyle}
+                  onClick={this.handleSubmitButton}
+                  invalid={inputInvalid}
+                  disabled={disabled}
+                  speaking={speaking}
+                >
+                  {icon}
+                </SubmitButton>
+              )}
+            </div>
           </Footer>
         </ChatBotContainer>
       </div>
@@ -711,8 +733,10 @@ ChatBot.propTypes = {
   contentStyle: PropTypes.objectOf(PropTypes.any),
   customDelay: PropTypes.number,
   customStyle: PropTypes.objectOf(PropTypes.any),
+  controlStyle: PropTypes.objectOf(PropTypes.any),
   enableMobileAutoFocus: PropTypes.bool,
   enableSmoothScroll: PropTypes.bool,
+  extraControl: PropTypes.objectOf(PropTypes.element),
   floating: PropTypes.bool,
   floatingIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   floatingStyle: PropTypes.objectOf(PropTypes.any),
@@ -759,9 +783,11 @@ ChatBot.defaultProps = {
   className: '',
   contentStyle: {},
   customStyle: {},
+  controlStyle: { position: 'absolute', right: '0', top: '0' },
   customDelay: 1000,
   enableMobileAutoFocus: false,
   enableSmoothScroll: false,
+  extraControl: undefined,
   floating: false,
   floatingIcon: <ChatIcon />,
   floatingStyle: {},

dist/react-simple-chatbot.js.map

@@ -21,9 +21,6 @@ const SubmitButton = styled.button`
   opacity: ${props => (props.disabled && !props.invalid ? '.5' : '1')};
   outline: none;
   padding: 14px 16px 12px 16px;
-  position: absolute;
-  right: 0;
-  top: 0;
   &:before {
     content: '';
     position: absolute;

lib/ChatBot.jsx

@@ -54,6 +54,11 @@ export default [
     types: ['boolean'],
     required: false
   },
+  {
+    key: 'hideExtraControl',
+    types: ['boolean'],
+    required: false
+  },
   {
     key: 'inputAttributes',
     types: ['object'],

lib/components/SubmitButton.jsx

@@ -24,6 +24,11 @@ export default [
     types: ['boolean'],
     required: false
   },
+  {
+    key: 'hideExtraControl',
+    types: ['boolean'],
+    required: false
+  },
   {
     key: 'inputAttributes',
     types: ['object'],

lib/schemas/customSchema.js

@@ -39,6 +39,11 @@ export default [
     types: ['boolean'],
     required: false
   },
+  {
+    key: 'hideExtraControl',
+    types: ['boolean'],
+    required: false
+  },
   {
     key: 'inputAttributes',
     types: ['object'],

lib/schemas/optionsSchema.js

@@ -9,6 +9,11 @@ export default [
     types: ['boolean'],
     required: true
   },
+  {
+    key: 'hideExtraControl',
+    types: ['boolean'],
+    required: false
+  },
   {
     key: 'trigger',
     types: ['string', 'number', 'function'],

lib/schemas/textSchema.js

@@ -371,4 +371,53 @@ describe('ChatBot', () => {
       expect(wrapper.find('input.rsc-input').props().autoComplete).to.be.equal('firstname');
     });
   });
+  
+  describe('Extra control', () => {
+    const CustomControl = () => (
+      <button className="my-button">custom</button>
+    );
+    const wrapper = mount(
+      <ChatBot
+        botDelay={10}
+        userDelay={10}
+        customDelay={10}
+        extraControl={<CustomControl />}
+        steps={[
+          {
+            id: '1',
+            user: true,
+            hideExtraControl: false,
+            trigger: '2'
+          },
+          {
+            id: '2',
+            user: true,
+            hideExtraControl: true,
+            trigger: '3'
+          },
+          {
+            id: '3',
+            message: 'end',
+            end: true
+          }
+        ]}
+      />,
+    );
+
+    it('should be rendered with an extra control beside submit button', () => {
+      expect(wrapper.find('div.rsc-controls button.my-button')).to.have.length(1);
+    });
+
+    it('the extra control should be hidden', () => {
+      console.log("Setting input value");
+      wrapper.setState({ inputValue: 'test' });
+      console.log("Simulate key press");
+      wrapper.find('input.rsc-input').simulate('keyPress', { key: 'Enter' });
+      setTimeout(() => {
+        console.log("testing hidden");
+        expect(wrapper.find('div.rsc-controls button.my-button')).to.have.length(0);  
+      }, 500);
+    });
+
+  });
 });