102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
// Copyright 2021 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import React, { forwardRef, useRef, ClipboardEvent } from 'react';
|
|
|
|
import { LocalizerType } from '../types/Util';
|
|
import { multiRef } from '../util/multiRef';
|
|
import * as grapheme from '../util/grapheme';
|
|
|
|
const MAX_GRAPHEME_COUNT = 32;
|
|
|
|
type PropsType = {
|
|
disabled?: boolean;
|
|
i18n: LocalizerType;
|
|
onChangeValue: (value: string) => void;
|
|
value: string;
|
|
};
|
|
|
|
/**
|
|
* Group titles must have fewer than MAX_GRAPHEME_COUNT glyphs. Ideally, we'd use the
|
|
* `maxLength` property on inputs, but that doesn't account for glyphs that are more than
|
|
* one UTF-16 code units. For example: `'💩💩'.length === 4`.
|
|
*
|
|
* This component effectively implements a "max grapheme length" on an input.
|
|
*
|
|
* At a high level, this component handles two methods of input:
|
|
*
|
|
* - `onChange`. *Before* the value is changed (in `onKeyDown`), we save the value and the
|
|
* cursor position. Then, in `onChange`, we see if the new value is too long. If it is,
|
|
* we revert the value and selection. Otherwise, we fire `onChangeValue`.
|
|
*
|
|
* - `onPaste`. If you're pasting something that will fit, we fall back to normal browser
|
|
* behavior, which calls `onChange`. If you're pasting something that won't fit, it's a
|
|
* noop.
|
|
*/
|
|
export const GroupTitleInput = forwardRef<HTMLInputElement, PropsType>(
|
|
({ i18n, disabled = false, onChangeValue, value }, ref) => {
|
|
const innerRef = useRef<HTMLInputElement | null>(null);
|
|
const valueOnKeydownRef = useRef<string>(value);
|
|
const selectionStartOnKeydownRef = useRef<number>(value.length);
|
|
|
|
return (
|
|
<div className="module-GroupInput--container">
|
|
<input
|
|
disabled={disabled}
|
|
className="module-GroupInput"
|
|
onKeyDown={() => {
|
|
const inputEl = innerRef.current;
|
|
if (!inputEl) {
|
|
return;
|
|
}
|
|
|
|
valueOnKeydownRef.current = inputEl.value;
|
|
selectionStartOnKeydownRef.current = inputEl.selectionStart || 0;
|
|
}}
|
|
onChange={() => {
|
|
const inputEl = innerRef.current;
|
|
if (!inputEl) {
|
|
return;
|
|
}
|
|
|
|
const newValue = inputEl.value;
|
|
if (grapheme.count(newValue) <= MAX_GRAPHEME_COUNT) {
|
|
onChangeValue(newValue);
|
|
} else {
|
|
inputEl.value = valueOnKeydownRef.current;
|
|
inputEl.selectionStart = selectionStartOnKeydownRef.current;
|
|
inputEl.selectionEnd = selectionStartOnKeydownRef.current;
|
|
}
|
|
}}
|
|
onPaste={(event: ClipboardEvent<HTMLInputElement>) => {
|
|
const inputEl = innerRef.current;
|
|
if (!inputEl) {
|
|
return;
|
|
}
|
|
|
|
const selectionStart = inputEl.selectionStart || 0;
|
|
const selectionEnd =
|
|
inputEl.selectionEnd || inputEl.selectionStart || 0;
|
|
const textBeforeSelection = value.slice(0, selectionStart);
|
|
const textAfterSelection = value.slice(selectionEnd);
|
|
|
|
const pastedText = event.clipboardData.getData('Text');
|
|
|
|
const newGraphemeCount =
|
|
grapheme.count(textBeforeSelection) +
|
|
grapheme.count(pastedText) +
|
|
grapheme.count(textAfterSelection);
|
|
|
|
if (newGraphemeCount > MAX_GRAPHEME_COUNT) {
|
|
event.preventDefault();
|
|
}
|
|
}}
|
|
placeholder={i18n('setGroupMetadata__group-name-placeholder')}
|
|
ref={multiRef<HTMLInputElement>(ref, innerRef)}
|
|
type="text"
|
|
value={value}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
);
|