move the enter session editable to a custom component
This commit is contained in:
parent
7ba85921b1
commit
7c726c8f47
|
@ -121,7 +121,7 @@
|
|||
window.Session = window.Session || {};
|
||||
|
||||
window.Session.setNewSessionID = sessionID => {
|
||||
const el = document.querySelector('.session-signin-enter-session-id');
|
||||
const el = document.querySelector('.session-id-editable');
|
||||
const fx = new TextScramble(el);
|
||||
el.innerHTML = sessionID;
|
||||
fx.setText(sessionID);
|
||||
|
|
|
@ -220,9 +220,9 @@
|
|||
line-height: 20px;
|
||||
}
|
||||
|
||||
&-signin-enter-session-id {
|
||||
&-id-editable {
|
||||
height: 94px;
|
||||
width: 289px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
border: 2px solid $session-color-dark-grey;
|
||||
outline: 0;
|
||||
|
@ -242,4 +242,5 @@
|
|||
[contenteditable='true']:empty::before {
|
||||
content: attr(placeholder);
|
||||
color: $session-color-light-grey;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
|
|
@ -14,6 +14,8 @@ import { SessionConversationSearch } from './SessionConversationSearch';
|
|||
import { debounce } from 'lodash';
|
||||
import { cleanSearchTerm } from '../../util/cleanSearchTerm';
|
||||
import { SearchOptions } from '../../types/Search';
|
||||
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
|
||||
import { SessionIdEditable } from './SessionIdEditable';
|
||||
|
||||
export interface Props {
|
||||
searchTerm: string;
|
||||
|
|
|
@ -9,6 +9,7 @@ import {
|
|||
} from './SessionButton';
|
||||
import { trigger } from '../../shims/events';
|
||||
import { SessionHtmlRenderer } from './SessionHTMLRenderer';
|
||||
import { SessionIdEditable } from './SessionIdEditable';
|
||||
|
||||
enum SignInMode {
|
||||
Default,
|
||||
|
@ -442,14 +443,11 @@ export class RegistrationTabs extends React.Component<{}, State> {
|
|||
const enterSessionIDHere = window.i18n('enterSessionIDHere');
|
||||
|
||||
return (
|
||||
<div
|
||||
className="session-signin-enter-session-id"
|
||||
<SessionIdEditable
|
||||
editable={contentEditable}
|
||||
placeholder={enterSessionIDHere}
|
||||
contentEditable={contentEditable}
|
||||
onInput={(e: any) => {
|
||||
if (contentEditable) {
|
||||
this.onSecondDeviceSessionIDChanged(e);
|
||||
}
|
||||
onChange={(e: any) => {
|
||||
this.onSecondDeviceSessionIDChanged(e);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -0,0 +1,29 @@
|
|||
import React from 'react';
|
||||
|
||||
|
||||
interface Props {
|
||||
placeholder: string;
|
||||
editable?: boolean;
|
||||
onChange?: any;
|
||||
}
|
||||
|
||||
|
||||
export class SessionIdEditable extends React.PureComponent<Props> {
|
||||
|
||||
public render() {
|
||||
const { placeholder, editable, onChange } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="session-id-editable"
|
||||
placeholder={placeholder}
|
||||
contentEditable={editable}
|
||||
onInput={(e: any) => {
|
||||
if (editable) {
|
||||
onChange(e);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue