Persist drafts

This commit is contained in:
Scott Nonnenberg 2019-08-06 17:40:25 -07:00
parent 5ebd8bc690
commit 9d4f2afa5a
23 changed files with 1048 additions and 720 deletions

View file

@ -33,11 +33,12 @@ export type OwnProps = {
readonly micCellEl?: HTMLElement;
readonly attCellEl?: HTMLElement;
readonly attachmentListEl?: HTMLElement;
onChooseAttachment(): unknown;
};
export type Props = Pick<
CompositionInputProps,
'onSubmit' | 'onEditorSizeChange' | 'onEditorStateChange'
'onSubmit' | 'onEditorSizeChange' | 'onEditorStateChange' | 'startingText'
> &
Pick<
EmojiButtonProps,
@ -69,12 +70,13 @@ export const CompositionArea = ({
i18n,
attachmentListEl,
micCellEl,
attCellEl,
onChooseAttachment,
// CompositionInput
onSubmit,
compositionApi,
onEditorSizeChange,
onEditorStateChange,
startingText,
// EmojiButton
onPickEmoji,
onSetSkinTone,
@ -94,7 +96,7 @@ export const CompositionArea = ({
clearShowPickerHint,
}: Props) => {
const [disabled, setDisabled] = React.useState(false);
const [showMic, setShowMic] = React.useState(true);
const [showMic, setShowMic] = React.useState(!startingText);
const [micActive, setMicActive] = React.useState(false);
const [dirty, setDirty] = React.useState(false);
const [large, setLarge] = React.useState(false);
@ -179,23 +181,17 @@ export const CompositionArea = ({
// The following is a work-around to allow react to lay-out backbone-managed
// dom nodes until those functions are in React
const micCellRef = React.useRef<HTMLDivElement>(null);
const attCellRef = React.useRef<HTMLDivElement>(null);
React.useLayoutEffect(
() => {
const { current: micCellContainer } = micCellRef;
const { current: attCellContainer } = attCellRef;
if (micCellContainer && micCellEl) {
emptyElement(micCellContainer);
micCellContainer.appendChild(micCellEl);
}
if (attCellContainer && attCellEl) {
emptyElement(attCellContainer);
attCellContainer.appendChild(attCellEl);
}
return noop;
},
[micCellRef, attCellRef, micCellEl, attCellEl, large, dirty, showMic]
[micCellRef, micCellEl, large, dirty, showMic]
);
React.useLayoutEffect(
@ -235,8 +231,12 @@ export const CompositionArea = ({
/>
) : null;
const attButtonFragment = (
<div className="module-composition-area__button-cell" ref={attCellRef} />
const attButton = (
<div className="module-composition-area__button-cell">
<div className="choose-file">
<button className="paperclip thumbnail" onClick={onChooseAttachment} />
</div>
</div>
);
const sendButtonFragment = (
@ -318,13 +318,14 @@ export const CompositionArea = ({
onEditorStateChange={onEditorStateChange}
onDirtyChange={setDirty}
skinTone={skinTone}
startingText={startingText}
/>
</div>
{!large ? (
<>
{stickerButtonFragment}
{!dirty ? micButtonFragment : null}
{attButtonFragment}
{attButton}
</>
) : null}
</div>
@ -337,7 +338,7 @@ export const CompositionArea = ({
>
{emojiButtonFragment}
{stickerButtonFragment}
{attButtonFragment}
{attButton}
{!dirty ? micButtonFragment : null}
{dirty || !showMic ? sendButtonFragment : null}
</div>