mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

One SearchInput to rule them all

Browse source
This commit is contained in:
Josh Perez 2021-05-10 20:50:43 -04:00 • committed by GitHub
parent c62b5a900e
commit 24b7790829
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 266 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

35
ts/components/CompositionInput.tsx
View file

@ -34,6 +34,7 @@ import {
} from '../quill/util';
import { SignalClipboard } from '../quill/signal-clipboard';
import { DirectionalBlot } from '../quill/block/blot';
import { getClassNamesFor } from '../util/getClassNamesFor';
Quill.register('formats/emoji', EmojiBlot);
Quill.register('formats/mention', MentionBlot);
@ -80,17 +81,7 @@ export type Props = {
};
const MAX_LENGTH = 64 * 1024;
function getClassName(
moduleClassName?: string,
modifier?: string | null
): string | undefined {
if (!moduleClassName || !modifier) {
return undefined;
}
return `${moduleClassName}${modifier}`;
}
const BASE_CLASS_NAME = 'module-composition-input';
export const CompositionInput: React.ComponentType<Props> = props => {
const {
@ -525,7 +516,7 @@ export const CompositionInput: React.ComponentType<Props> = props => {
return (
<ReactQuill
className="module-composition-input__quill"
className={`${BASE_CLASS_NAME}__quill`}
onFocus={() => callbacksRef.current.onFocus()}
onBlur={() => callbacksRef.current.onBlur()}
onChange={() => callbacksRef.current.onChange()}
@ -642,29 +633,19 @@ export const CompositionInput: React.ComponentType<Props> = props => {
// eslint-disable-next-line max-len
/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
const getClassName = getClassNamesFor(BASE_CLASS_NAME, moduleClassName);
return (
<Manager>
<Reference>
{({ ref }) => (
<div
className={classNames(
'module-composition-input__input',
getClassName(moduleClassName, '__input')
)}
ref={ref}
>
<div className={getClassName('__input')} ref={ref}>
<div
ref={scrollerRef}
onClick={focus}
className={classNames(
'module-composition-input__input__scroller',
large
? 'module-composition-input__input__scroller--large'
: null,
getClassName(moduleClassName, '__scroller'),
large
? getClassName(moduleClassName, '__scroller--large')
: null
getClassName('__input__scroller'),
large ? getClassName('__input__scroller--large') : null
)}
>
{reactQuill}