Clean up inviteLink handling, harden compose input

This commit is contained in:
Scott Nonnenberg 2021-05-06 12:06:20 -07:00 committed by GitHub
parent 986d8a66bc
commit fc12d02a8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 59 additions and 3 deletions

View file

@ -40,6 +40,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
clearQuotedMessage: action('clearQuotedMessage'),
getQuotedMessage: action('getQuotedMessage'),
sortedGroupMembers: [],
setSecureInput: action('setSecureInput'),
// EmojiButton
onPickEmoji: action('onPickEmoji'),
onSetSkinTone: action('onSetSkinTone'),

View file

@ -67,6 +67,7 @@ export type Props = Pick<
| 'draftBodyRanges'
| 'clearQuotedMessage'
| 'getQuotedMessage'
| 'setSecureInput'
> &
Pick<
EmojiButtonProps,
@ -113,6 +114,7 @@ export const CompositionArea = ({
clearQuotedMessage,
getQuotedMessage,
sortedGroupMembers,
setSecureInput,
// EmojiButton
onPickEmoji,
onSetSkinTone,
@ -470,6 +472,7 @@ export const CompositionArea = ({
clearQuotedMessage={clearQuotedMessage}
getQuotedMessage={getQuotedMessage}
sortedGroupMembers={sortedGroupMembers}
setSecureInput={setSecureInput}
/>
</div>
{!large ? (

View file

@ -28,6 +28,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
getQuotedMessage: action('getQuotedMessage'),
onPickEmoji: action('onPickEmoji'),
large: boolean('large', overrideProps.large || false),
setSecureInput: action('setSecureInput'),
sortedGroupMembers: overrideProps.sortedGroupMembers || [],
skinTone: select(
'skinTone',

View file

@ -76,6 +76,7 @@ export type Props = {
onSubmit(message: string, mentions: Array<BodyRangeType>): unknown;
getQuotedMessage(): unknown;
clearQuotedMessage(): unknown;
setSecureInput(enabled: boolean): unknown;
};
const MAX_LENGTH = 64 * 1024;
@ -103,6 +104,7 @@ export const CompositionInput: React.ComponentType<Props> = props => {
skinTone,
draftText,
draftBodyRanges,
setSecureInput,
getQuotedMessage,
clearQuotedMessage,
sortedGroupMembers,
@ -259,6 +261,20 @@ export const CompositionInput: React.ComponentType<Props> = props => {
return false;
};
const onFocus = (): void => {
setSecureInput(true);
};
const onBlur = (): void => {
setSecureInput(false);
};
React.useEffect(() => {
return () => {
setSecureInput(false);
};
}, [setSecureInput]);
const onEnter = (): boolean => {
const quill = quillRef.current;
const emojiCompletion = emojiCompletionRef.current;
@ -494,6 +510,8 @@ export const CompositionInput: React.ComponentType<Props> = props => {
onChange,
onEnter,
onEscape,
onFocus,
onBlur,
onPickEmoji,
onShortKeyEnter,
onTab,
@ -508,6 +526,8 @@ export const CompositionInput: React.ComponentType<Props> = props => {
return (
<ReactQuill
className="module-composition-input__quill"
onFocus={() => callbacksRef.current.onFocus()}
onBlur={() => callbacksRef.current.onBlur()}
onChange={() => callbacksRef.current.onChange()}
defaultValue={delta}
modules={{

View file

@ -53,6 +53,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
onSetSkinTone: action('onSetSkinTone'),
recentEmojis: [],
removeLinkPreview: action('removeLinkPreview'),
setSecureInput: action('setSecureInput'),
skinTone: 0,
});

View file

@ -49,6 +49,7 @@ export type DataPropsType = {
caretLocation?: number
) => unknown;
onTextTooLong: () => void;
setSecureInput: (enabled: boolean) => void;
} & Pick<EmojiButtonProps, 'recentEmojis' | 'skinTone'>;
type ActionPropsType = Pick<
@ -78,6 +79,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
recentEmojis,
removeLinkPreview,
skinTone,
setSecureInput,
}) => {
const inputRef = useRef<null | HTMLInputElement>(null);
const inputApiRef = React.useRef<InputApi | undefined>();
@ -306,6 +308,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
onPickEmoji={onPickEmoji}
onSubmit={forwardMessage}
onTextTooLong={onTextTooLong}
setSecureInput={setSecureInput}
/>
<div className="module-ForwardMessageModal__emoji">
<EmojiButton