disable input buttons during sending

This commit is contained in:
igoradamenko
2018-05-26 18:26:12 +03:00
parent e5ffbb1b96
commit f468b7c3ee
3 changed files with 13 additions and 4 deletions
@@ -1,5 +1,6 @@
.input__button_type_preview {
background: #fff;
color: #000;
&:hover, &:focus {
box-shadow: inset 0 0 0 2px #0aa;
@@ -10,4 +10,9 @@
&:focus {
outline: none;
}
&:disabled {
opacity: .5;
pointer-events: none;
}
}
+7 -4
View File
@@ -18,6 +18,7 @@ export default class Input extends Component {
this.state = {
preview: null,
isErrorShown: false,
isDisabled: false,
maxLength: config.max_comment_size || DEFAULT_MAX_COMMENT_SIZE,
commentLength: 0,
};
@@ -94,7 +95,7 @@ export default class Input extends Component {
if (!text || !text.trim()) return;
this.setState({ isFieldDisabled: true, isErrorShown: false });
this.setState({ isDisabled: true, isErrorShown: false });
const request = mods.mode === 'edit'
? api.edit({ text, id })
@@ -113,7 +114,7 @@ export default class Input extends Component {
.catch(() => {
this.setState({ isErrorShown: true });
})
.finally(() => this.setState({ isFieldDisabled: false }));
.finally(() => this.setState({ isDisabled: false }));
}
getPreview() {
@@ -130,7 +131,7 @@ export default class Input extends Component {
});
}
render(props, { isFieldDisabled, isErrorShown, preview, maxLength, commentLength }) {
render(props, { isDisabled, isErrorShown, preview, maxLength, commentLength }) {
const charactersLeft = maxLength - commentLength;
const { mods = {}, value = null, errorMessage } = props;
@@ -145,7 +146,7 @@ export default class Input extends Component {
onInput={this.onInput}
onKeyDown={this.onKeyDown}
ref={r => (this.fieldNode = r)}
disabled={isFieldDisabled}
disabled={isDisabled}
/>
{
@@ -167,12 +168,14 @@ export default class Input extends Component {
<button
className={b('input__button', {}, { type: 'preview' })}
type="button"
disabled={isDisabled}
onClick={this.getPreview}
>Preview</button>
<button
className={b('input__button', {}, { type: 'send' })}
type="submit"
disabled={isDisabled}
>Send</button>
{