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;
|
2020-02-04 08:07:31 +01:00
|
|
|
value?: 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;
|
2020-02-04 23:59:55 +01:00
|
|
|
maxLength?: number;
|
2020-07-14 05:12:07 +02:00
|
|
|
isGroup?: boolean;
|
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-07-14 05:12:07 +02:00
|
|
|
const {
|
|
|
|
placeholder,
|
|
|
|
editable,
|
|
|
|
text,
|
|
|
|
value,
|
|
|
|
maxLength,
|
|
|
|
isGroup,
|
|
|
|
} = this.props;
|
2019-12-18 07:46:09 +01:00
|
|
|
|
2019-12-19 00:06:05 +01:00
|
|
|
return (
|
2020-01-31 05:43:17 +01:00
|
|
|
<div
|
|
|
|
className={classNames(
|
|
|
|
'session-id-editable',
|
|
|
|
!editable && 'session-id-editable-disabled'
|
|
|
|
)}
|
|
|
|
>
|
2020-01-30 00:55:28 +01:00
|
|
|
<textarea
|
2020-07-14 05:12:07 +02:00
|
|
|
className={classNames(
|
|
|
|
isGroup
|
|
|
|
? 'group-id-editable-textarea'
|
|
|
|
: '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}
|
2020-04-02 06:43:07 +02:00
|
|
|
onBlur={this.handleChange}
|
2020-02-04 08:07:31 +01:00
|
|
|
value={value || text}
|
2020-02-04 23:59:55 +01:00
|
|
|
maxLength={maxLength}
|
2020-01-30 00:55:28 +01:00
|
|
|
/>
|
|
|
|
</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;
|
2020-05-11 02:37:40 +02:00
|
|
|
|
2020-01-29 04:41:12 +01:00
|
|
|
if (editable) {
|
|
|
|
onChange(e.target.value);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private handleKeyDown(e: any) {
|
|
|
|
const { editable, onPressEnter } = this.props;
|
2020-03-24 01:58:11 +01:00
|
|
|
if (editable && e.key === 'Enter') {
|
2020-01-29 04:41:12 +01:00
|
|
|
e.preventDefault();
|
|
|
|
// tslint:disable-next-line: no-unused-expression
|
|
|
|
onPressEnter && onPressEnter();
|
|
|
|
}
|
|
|
|
}
|
2019-12-18 07:46:09 +01:00
|
|
|
}
|