Recording-Editor.js

import React from "react";
import styled from "@emotion/styled";
import { Button } from "@rebass/emotion";
import { Label, Input } from "@rebass/forms";
import { Formik } from "formik";

import Dialog from "./Dialog";

const StyledButton = styled(Button)`
  background-color: #74b49b;
  cursor: pointer;
`;

const StyledLabel = styled(Label)`
  color: #74b49b;
  margin-bottom: 4px;
`;

const StyledInput = styled(Input)`
  color: #74b49b;
  border-radius: 3px;
  background-color: #f4f9f4;
`;

const StyledTextarea = styled("textarea")`
  color: #74b49b;
  background-color: #f4f9f4;
  width: 100%;
  min-height: 80px;
  border-radius: 3px;
  resize: vertical;
`;

const FormInputs = styled("div")`
  max-height: 450px;
  overflow: scroll;
  padding: 16px;

  @media (max-height: 570px) {
    max-height: 300px;
  }

  @media (max-height: 675px) {
    max-height: 350px;
  }
`;

const Actions = styled("div")`
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 24px;
`;

const InputContainer = styled("div")`
  margin-bottom: 16px;
`;

const Title = styled("h2")`
  color: #74b49b;
`;

const RecordingEditor = props => (
  <Dialog onDismiss={props.onDismiss}>
    <Title>{props.title ? "Edit Note" : "Create Note"}</Title>
    <Formik
      initialValues={{
        title: props.title || "",
        text: props.text
      }}
      onSubmit={(values, { setSubmitting, resetForm }) => {
        props.onSave({
          title: values.title || `${values.text.substr(0, 20)}...`,
          text: values.text
        });
        setSubmitting(false);
        resetForm();
        props.onDismiss();
      }}
    >
      {({ values, handleSubmit, isSubmitting, handleChange }) => (
        <form onSubmit={handleSubmit}>
          <FormInputs>
            <InputContainer>
              <StyledLabel htmlFor="title">Title</StyledLabel>
              <StyledInput
                type="text"
                name="title"
                value={values.title}
                onChange={handleChange}
              />
            </InputContainer>

            <InputContainer>
              <StyledLabel htmlFor="text">Note</StyledLabel>
              <StyledTextarea
                name="text"
                value={values.text}
                onChange={handleChange}
              />
            </InputContainer>
          </FormInputs>

          <Actions>
            <StyledButton
              onClick={() => {
                props.onDismiss();
              }}
              style={{ marginRight: "8px" }}
            >
              Cancel
            </StyledButton>
            <StyledButton type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Saving..." : "Save"}
            </StyledButton>
          </Actions>
        </form>
      )}
    </Formik>
  </Dialog>
);

export default RecordingEditor;