Change UI

This commit is contained in:
GotPPay
2018-01-19 22:42:37 +01:00
parent e2d648980b
commit 48578d3ffe
4 changed files with 252 additions and 122 deletions

View File

@@ -1,7 +1,8 @@
import React, { Component } from 'react';
import {Button, SVGIcon, TextField} from 'react-md';
import '../css/components/IntentDetails.css';
import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH} from '../config/constants';
import '../css/Common.css';
import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH, INTENT_EXPLANATION_MAX_LENGTH} from '../config/constants';
class IntentDetails extends Component {
constructor(props){
@@ -14,6 +15,7 @@ class IntentDetails extends Component {
this.handleQuestionEdit = this.handleQuestionEdit.bind(this);
this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
this.handleIntentNameEdit = this.handleIntentNameEdit.bind(this);
this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind(this);
}
componentWillReceiveProps(props){
@@ -24,10 +26,19 @@ class IntentDetails extends Component {
return (
<div className="RightPanelBox">
<div className="QuestionBox">
<h5 className="PanelSubTitle"> In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.</h5>
<TextField
id="intent explanation"
lineDirection="center"
placeholder="To ask us about our services, say "
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
onChange={this.handleIntentExplanationEdit}
maxLength={INTENT_EXPLANATION_MAX_LENGTH}
value={this.state.intent.intentExplanation} />
<br/>
<TextField
id="intent name"
lineDirection="center"
placeholder="Intent name"
label="Question name"
className="md-cell md-cell--bottom IntentDetailsInputBoxes"
onChange={this.handleIntentNameEdit}
@@ -98,6 +109,13 @@ class IntentDetails extends Component {
this.setState({intent: newIntent});
}
handleIntentExplanationEdit(e,index){
if (e.length === INTENT_EXPLANATION_MAX_LENGTH) return;
let newIntent = this.state.intent;
newIntent.intentExplanation = e;
this.setState({intent: newIntent});
}
handleAnswerEdit(e){
if (e.length === ANSWER_MAX_LENGTH) return;
let newIntent = this.state.intent;