2019-12-18 07:46:09 +01:00
|
|
|
import React from 'react';
|
2020-01-31 04:03:04 +01:00
|
|
|
import classNames from 'classnames';
|
2019-12-18 07:46:09 +01:00
|
|
|
|
|
|
|
interface Props {
|
2020-01-16 05:40:36 +01:00
|
|
|
placeholder?: string;
|
2019-12-30 03:33:38 +01:00
|
|
|
text?: string;
|
2019-12-19 00:06:05 +01:00
|
|
|
editable?: boolean;
|
|
|
|
onChange?: any;
|
2020-01-29 04:41:12 +01:00
|
|
|
onPressEnter?: any;
|
2019-12-18 07:46:09 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export class SessionIdEditable extends React.PureComponent<Props> {
|
2020-01-29 04:41:12 +01:00
|
|
|
private readonly inputRef: any;
|
2020-01-28 06:39:12 +01:00
|
|
|
|
|
|
|
public constructor(props: Props) {
|
|
|
|
super(props);
|
|
|
|
this.inputRef = React.createRef();
|
2020-01-29 04:41:12 +01:00
|
|
|
this.handleChange = this.handleChange.bind(this);
|
|
|
|
this.handleKeyDown = this.handleKeyDown.bind(this);
|
2019-12-19 00:06:05 +01:00
|
|
|
}
|
2019-12-18 07:46:09 +01:00
|
|
|
|
2020-01-28 06:39:12 +01:00
|
|
|
public focus() {
|
|
|
|
if (this.inputRef.current) {
|
|
|
|
this.inputRef.current.focus();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-12-19 00:06:05 +01:00
|
|
|
public render() {
|
2020-01-29 04:41:12 +01:00
|
|
|
const { placeholder, editable, text } = this.props;
|
2019-12-18 07:46:09 +01:00
|
|
|
|
2019-12-19 00:06:05 +01:00
|
|
|
return (
|
2020-01-31 04:03:04 +01:00
|
|
|
<div className={classNames('session-id-editable', !editable && 'session-id-editable-disabled')}>
|
2020-01-30 00:55:28 +01:00
|
|
|
<textarea
|
2020-01-30 06:57:03 +01:00
|
|
|
className="session-id-editable-textarea"
|
2020-01-30 00:55:28 +01:00
|
|
|
ref={this.inputRef}
|
|
|
|
placeholder={placeholder}
|
|
|
|
disabled={!editable}
|
|
|
|
spellCheck={false}
|
|
|
|
onKeyDown={this.handleKeyDown}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
value={text}
|
|
|
|
/>
|
|
|
|
</div>
|
2019-12-19 00:06:05 +01:00
|
|
|
);
|
|
|
|
}
|
2020-01-29 04:41:12 +01:00
|
|
|
|
|
|
|
private handleChange(e: any) {
|
|
|
|
const { editable, onChange } = this.props;
|
|
|
|
if (editable) {
|
|
|
|
onChange(e.target.value);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private handleKeyDown(e: any) {
|
|
|
|
const { editable, onPressEnter } = this.props;
|
|
|
|
if (editable && e.keyCode === 13) {
|
|
|
|
e.preventDefault();
|
|
|
|
// tslint:disable-next-line: no-unused-expression
|
|
|
|
onPressEnter && onPressEnter();
|
|
|
|
}
|
|
|
|
}
|
2019-12-18 07:46:09 +01:00
|
|
|
}
|