Merge pull request LucasBassetti#114 from gamedevsam/master

Hide input option, customize height plus fix for styled-components

Author: LucasBassetti

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

dist/react-simple-chatbot.js

@@ -214,6 +214,9 @@ class ChatBot extends Component {
     if (data && data.value) {
       currentStep.value = data.value;
     }
+    if (data && data.hideInput) {
+      currentStep.hideInput = data.hideInput;
+    }
     if (data && data.trigger) {
       currentStep.trigger = this.getTriggeredStep(data.trigger, data.value);
     }
@@ -509,6 +512,7 @@ class ChatBot extends Component {
       inputInvalid,
       inputValue,
       opened,
+      currentStep,
       renderedSteps,
       speaking,
       recognitionEnable,
@@ -528,6 +532,7 @@ class ChatBot extends Component {
       style,
       submitButtonStyle,
       width,
+      height,
     } = this.props;
 
     const header = headerComponent || (
@@ -564,32 +569,37 @@ class ChatBot extends Component {
           opened={opened}
           style={style}
           width={width}
+          height={height}
         >
           {!hideHeader && header}
           <Content
             className="rsc-content"
             innerRef={contentRef => (this.content = contentRef)}
             floating={floating}
             style={contentStyle}
+            height={height}
+            hideInput={currentStep.hideInput}
           >
             {_.map(renderedSteps, this.renderStep)}
           </Content>
           <Footer className="rsc-footer" style={footerStyle}>
-            <Input
-              type="textarea"
-              style={inputStyle}
-              innerRef={inputRef => (this.input = inputRef)}
-              className="rsc-input"
-              placeholder={inputInvalid ? '' : inputPlaceholder}
-              onKeyPress={this.handleKeyPress}
-              onChange={this.onValueChange}
-              value={inputValue}
-              floating={floating}
-              invalid={inputInvalid}
-              disabled={disabled}
-              hasButton={!hideSubmitButton}
-            />
-            {!hideSubmitButton && (
+            {!currentStep.hideInput && (
+              <Input
+                type="textarea"
+                style={inputStyle}
+                innerRef={inputRef => (this.input = inputRef)}
+                className="rsc-input"
+                placeholder={inputInvalid ? '' : inputPlaceholder}
+                onKeyPress={this.handleKeyPress}
+                onChange={this.onValueChange}
+                value={inputValue}
+                floating={floating}
+                invalid={inputInvalid}
+                disabled={disabled}
+                hasButton={!hideSubmitButton}
+              />
+            )}
+            {!currentStep.hideInput && !hideSubmitButton && (
               <SubmitButton
                 className="rsc-submit-button"
                 style={submitButtonStyle}
@@ -643,6 +653,7 @@ ChatBot.propTypes = {
   userAvatar: PropTypes.string,
   userDelay: PropTypes.number,
   width: PropTypes.string,
+  height: PropTypes.string,
 };
 
 ChatBot.defaultProps = {
@@ -677,6 +688,7 @@ ChatBot.defaultProps = {
   toggleFloating: undefined,
   userDelay: 1000,
   width: '350px',
+  height: '520px',
   botAvatar:
     'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIHN0eWxlPSJmaWxsOiM5M0M3RUY7IiBkPSJNMzAyLjU0NSw2OS44MThjMC0yNS43MDctMjAuODQtNDYuNTQ1LTQ2LjU0NS00Ni41NDVzLTQ2LjU0NSwyMC44MzgtNDYuNTQ1LDQ2LjU0NQ0KCWMwLDE3LjIyNSw5LjM2NSwzMi4yNTQsMjMuMjczLDQwLjMwNHY4My44MThoNDYuNTQ1di04My44MThDMjkzLjE4MSwxMDIuMDczLDMwMi41NDUsODcuMDQzLDMwMi41NDUsNjkuODE4eiIvPg0KPHBhdGggc3R5bGU9ImZpbGw6IzVBOEJCMDsiIGQ9Ik0yNTYsMjMuMjczdjE3MC42NjdoMjMuMjczdi04My44MThjMTMuOTA4LTguMDQ5LDIzLjI3My0yMy4wNzcsMjMuMjczLTQwLjMwNA0KCUMzMDIuNTQ1LDQ0LjExMSwyODEuNzA1LDIzLjI3MywyNTYsMjMuMjczeiIvPg0KPHJlY3QgeT0iMjQwLjQ4NSIgc3R5bGU9ImZpbGw6IzkzQzdFRjsiIHdpZHRoPSIyNDguMjQyIiBoZWlnaHQ9IjEyNC4xMjEiLz4NCjxyZWN0IHg9IjI2My43NTgiIHk9IjI0MC40ODUiIHN0eWxlPSJmaWxsOiM1QThCQjA7IiB3aWR0aD0iMjQ4LjI0MiIgaGVpZ2h0PSIxMjQuMTIxIi8+DQo8cmVjdCB4PSIxODYuMTgyIiB5PSIzNjQuNjA2IiBzdHlsZT0iZmlsbDojOTNDN0VGOyIgd2lkdGg9IjEzOS42MzYiIGhlaWdodD0iMTI0LjEyMSIvPg0KPHJlY3QgeD0iMjU2IiB5PSIzNjQuNjA2IiBzdHlsZT0iZmlsbDojNUE4QkIwOyIgd2lkdGg9IjY5LjgxOCIgaGVpZ2h0PSIxMjQuMTIxIi8+DQo8cmVjdCB4PSI0Ni41NDUiIHk9IjE2Mi45MDkiIHN0eWxlPSJmaWxsOiNDQ0U5Rjk7IiB3aWR0aD0iNDE4LjkwOSIgaGVpZ2h0PSIyNzkuMjczIi8+DQo8cmVjdCB4PSIyNTYiIHk9IjE2Mi45MDkiIHN0eWxlPSJmaWxsOiM5M0M3RUY7IiB3aWR0aD0iMjA5LjQ1NSIgaGVpZ2h0PSIyNzkuMjczIi8+DQo8cGF0aCBzdHlsZT0iZmlsbDojM0M1RDc2OyIgZD0iTTE5My45MzksMjcxLjUxNWMwLDE3LjEzOC0xMy44OTQsMzEuMDMtMzEuMDMsMzEuMDNsMCwwYy0xNy4xMzYsMC0zMS4wMy0xMy44OTItMzEuMDMtMzEuMDNsMCwwDQoJYzAtMTcuMTM4LDEzLjg5NC0zMS4wMywzMS4wMy0zMS4wM2wwLDBDMTgwLjA0NiwyNDAuNDg1LDE5My45MzksMjU0LjM3NywxOTMuOTM5LDI3MS41MTVMMTkzLjkzOSwyNzEuNTE1eiIvPg0KPHBhdGggc3R5bGU9ImZpbGw6IzFFMkUzQjsiIGQ9Ik0zODAuMTIxLDI3MS41MTVjMCwxNy4xMzgtMTMuODk0LDMxLjAzLTMxLjAzLDMxLjAzbDAsMGMtMTcuMTM3LDAtMzEuMDMtMTMuODkyLTMxLjAzLTMxLjAzbDAsMA0KCWMwLTE3LjEzOCwxMy44OTQtMzEuMDMsMzEuMDMtMzEuMDNsMCwwQzM2Ni4yMjcsMjQwLjQ4NSwzODAuMTIxLDI1NC4zNzcsMzgwLjEyMSwyNzEuNTE1TDM4MC4xMjEsMjcxLjUxNXoiLz4NCjxwYXRoIHN0eWxlPSJmaWxsOiMzQzVENzY7IiBkPSJNMTg2LjE4MiwzNDkuMDkxYzAsMzguNTU4LDMxLjI1OCw2OS44MTgsNjkuODE4LDY5LjgxOGwwLDBjMzguNTU4LDAsNjkuODE4LTMxLjI2LDY5LjgxOC02OS44MTgNCglIMTg2LjE4MnoiLz4NCjxwYXRoIHN0eWxlPSJmaWxsOiMxRTJFM0I7IiBkPSJNMjU2LDM0OS4wOTFjMCwzOC41NTgsMCw0Ni41NDUsMCw2OS44MThsMCwwYzM4LjU1OCwwLDY5LjgxOC0zMS4yNiw2OS44MTgtNjkuODE4SDI1NnoiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K',
   userAvatar:

lib/ChatBot.jsx

@@ -11,6 +11,7 @@ const ChatBotContainer = styled.div`
   bottom: ${props => props.floating ? '32px' : 'initial'};
   right: ${props => props.floating ? '32px' : 'initial'};
   width: ${props => props.width};
+  height: ${props => props.height};
   z-index: 999;
   transform: ${props => props.opened ? 'scale(1)' : 'scale(0)'};
   transform-origin: bottom right;

lib/ChatBotContainer.jsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Content = styled.div`
-  height: 400px;
+  height: calc(${props => props.height} - ${props => props.hideInput ? '56px' : '112px'});
   overflow-y: scroll;
   margin-top: 2px;
   padding-top: 6px;

lib/Content.jsx

@@ -54,4 +54,9 @@ export default [
     types: ['object'],
     required: false,
   },
+  {
+    key: 'hideInput',
+    types: ['boolean'],
+    required: false,
+  }
 ];

lib/schemas/customSchema.js

@@ -24,4 +24,9 @@ export default [
     types: ['object'],
     required: false,
   },
+  {
+    key: 'hideInput',
+    types: ['boolean'],
+    required: false,
+  }
 ];

lib/schemas/optionsSchema.js

@@ -39,4 +39,9 @@ export default [
     types: ['object'],
     required: false,
   },
+  {
+    key: 'hideInput',
+    types: ['boolean'],
+    required: false,
+  }
 ];