88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
// Copyright 2022 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import React, { useEffect } from 'react';
|
|
import { noop } from 'lodash';
|
|
import { Button } from './Button';
|
|
import { Modal } from './Modal';
|
|
import type { LocalizerType, ThemeType } from '../types/Util';
|
|
import type { SmartCompositionTextAreaProps } from '../state/smart/CompositionTextArea';
|
|
|
|
export type Props = {
|
|
i18n: LocalizerType;
|
|
onClose: () => void;
|
|
onSubmit: (text: string) => void;
|
|
draftText: string;
|
|
theme: ThemeType;
|
|
RenderCompositionTextArea: (
|
|
props: SmartCompositionTextAreaProps
|
|
) => JSX.Element;
|
|
};
|
|
|
|
export const AddCaptionModal = ({
|
|
i18n,
|
|
onClose,
|
|
onSubmit,
|
|
draftText,
|
|
RenderCompositionTextArea,
|
|
theme,
|
|
}: Props): JSX.Element => {
|
|
const [messageText, setMessageText] = React.useState('');
|
|
|
|
const [isScrolledTop, setIsScrolledTop] = React.useState(true);
|
|
const [isScrolledBottom, setIsScrolledBottom] = React.useState(true);
|
|
|
|
const scrollerRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
// add footer/header dividers depending on the state of scroll
|
|
const updateScrollState = React.useCallback(() => {
|
|
const scrollerEl = scrollerRef.current;
|
|
if (scrollerEl) {
|
|
setIsScrolledTop(scrollerEl.scrollTop === 0);
|
|
setIsScrolledBottom(
|
|
scrollerEl.scrollHeight - scrollerEl.scrollTop ===
|
|
scrollerEl.clientHeight
|
|
);
|
|
}
|
|
}, [scrollerRef]);
|
|
|
|
useEffect(() => {
|
|
updateScrollState();
|
|
}, [updateScrollState]);
|
|
|
|
const handleSubmit = React.useCallback(() => {
|
|
onSubmit(messageText);
|
|
}, [messageText, onSubmit]);
|
|
|
|
return (
|
|
<Modal
|
|
i18n={i18n}
|
|
modalName="AddCaptionModal"
|
|
hasXButton
|
|
hasHeaderDivider={!isScrolledTop}
|
|
hasFooterDivider={!isScrolledBottom}
|
|
moduleClassName="AddCaptionModal"
|
|
padded={false}
|
|
title="Add a message"
|
|
onClose={onClose}
|
|
modalFooter={
|
|
<Button onClick={handleSubmit}>
|
|
{i18n('AddCaptionModal__submit-button')}
|
|
</Button>
|
|
}
|
|
>
|
|
<RenderCompositionTextArea
|
|
maxLength={1500}
|
|
whenToShowRemainingCount={1450}
|
|
placeholder={i18n('AddCaptionModal__placeholder')}
|
|
onChange={setMessageText}
|
|
scrollerRef={scrollerRef}
|
|
draftText={draftText}
|
|
onSubmit={noop}
|
|
onScroll={updateScrollState}
|
|
theme={theme}
|
|
/>
|
|
</Modal>
|
|
);
|
|
};
|