message-form-example.js

import * as React from "react";
import { submitMessage } from "./chat";

// Form
// Input
// SubmitButton
// AttachList
// NewAttachButtons

const Example = () => {
  const [message, setMessage] = React.useState("");
  const [attachList, setAttachList] = React.useState([]);

  const sendMessage = () => submitMessage({ message });
  const addAttach = attach => setAttachList(list => list.concat(attach));
  const isSendDisabled = message.trim().length || attachList.length

  return (
    <MessageFormTemplate
      input={<MessageInput value={message} onChange={setMessage} />}
      sendButton={<SendButton onSubmit={sendMessage} disabled={isSendDisabled} />}
      buttons={
        <AttachControls onCreate={addAttach}>
          <AttachNoteButton onCreate={addAttach} />
        </AttachControls>
      }
      extra={<AttachList list={attachList} minimizable />}
    />
  );
};

/*
-------------------------------
[ Message...           ] [Send]
[+] [Note]
[{note.txt}] [{image.pdf}]
*/

const AttachNoteButton = ({ onCreate }) => {
  const [isOpened, setOpened] = React.useState(false);
  const [content, setContent] = React.useState("");

  const openPanel = () => setOpened(true);
  const closePanel = () => setOpened(false);
  const sendAttach = () => onCreate({ type: "note", content });

  return (
    <>
      <AttachButton onClick={openPanel}>Note</AttachButton>
      <PanelPopup
        show={isOpened}
        onClose={closePanel}
        onCancel={closePanel}
        onSubmit={sendAttach}
      >
        <TextArea value={content} onChange={setContent} />
      </PanelPopup>
    </>
  );
};