Clean up inviteLink handling, harden compose input
This commit is contained in:
parent
986d8a66bc
commit
fc12d02a8d
12 changed files with 59 additions and 3 deletions
|
@ -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'),
|
||||
|
|
|
@ -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 ? (
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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={{
|
||||
|
|
|
@ -53,6 +53,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
|
|||
onSetSkinTone: action('onSetSkinTone'),
|
||||
recentEmojis: [],
|
||||
removeLinkPreview: action('removeLinkPreview'),
|
||||
setSecureInput: action('setSecureInput'),
|
||||
skinTone: 0,
|
||||
});
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue