66 lines
2.4 KiB
JavaScript
66 lines
2.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {Button, TextField} from 'react-md';
|
|
import '../css/Common.css';
|
|
import '../css/components/LaunchRequest.css';
|
|
import { INVOCATION_NAME_MAX_LENGTH, INVOCATION_ANSWER_MAX_LENGTH } from '../config/constants';
|
|
|
|
class LaunchRequest extends Component {
|
|
constructor(props){
|
|
super(props);
|
|
|
|
this.state = {invocationName: props.invocationName, invocationAnswer: props.invocationAnswer};
|
|
|
|
this.handleNameEdit = this.handleNameEdit.bind(this);
|
|
this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
|
|
}
|
|
|
|
componentWillReceiveProps(props){
|
|
this.setState({invocationName: props.invocationName, invocationAnswer: props.invocationAnswer});
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="RightPanelBox">
|
|
<h5 className="PanelSubTitle"> Invocation name customers use to activate the skill. For example "Open Saburly" or "Talk to Saburly" </h5>
|
|
<TextField
|
|
id="invocation name"
|
|
lineDirection="center"
|
|
placeholder="saburly"
|
|
label="Invocation name"
|
|
className="md-cell md-cell--bottom InvocationInputBoxes"
|
|
maxLength={INVOCATION_NAME_MAX_LENGTH}
|
|
onChange={this.handleNameEdit}
|
|
value={this.state.invocationName}/>
|
|
<br></br>
|
|
<h5 className="PanelSubTitle" >Answer customers get from Alexa when they activate the skill.</h5>
|
|
<TextField
|
|
id="invocation answer"
|
|
lineDirection="center"
|
|
placeholder="We are Saburly, ask us something about us"
|
|
label="Answer"
|
|
className="md-cell md-cell--bottom InvocationInputBoxes"
|
|
maxLength={INVOCATION_ANSWER_MAX_LENGTH}
|
|
onChange={this.handleAnswerEdit}
|
|
value={this.state.invocationAnswer}/>
|
|
<br></br>
|
|
<br></br>
|
|
<Button className="SaveButton" flat primary swapTheming
|
|
onClick={()=>{this.props.onSaveClick(this.state.invocationName, this.state.invocationAnswer)}}
|
|
disabled={this.props.waiting}>Save</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
handleNameEdit(e){
|
|
if (e.length === INVOCATION_NAME_MAX_LENGTH || !(/^[a-z,.' ]*$/.test(e))) return;
|
|
this.setState({invocationName: e});
|
|
}
|
|
|
|
handleAnswerEdit(e){
|
|
if (e.length === INVOCATION_ANSWER_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
|
|
this.setState({invocationAnswer: e});
|
|
}
|
|
}
|
|
|
|
export default LaunchRequest;
|