migrate element card to handle 3 states

[joshdmiller]

Overview

Modify the current Element Card to allow for three states: empty, read-only, and editing.

Depends on #135.

UI Concept

Empty State

The checkbox icon is not applicable.

Editing State

The existing component's styles for non-read-only instances should be preserved.

Read Only

The existing component's styles for read-only instances should be preserved.

The read only state looks like the editing state, but has no footer and no means to interact with it. Reacts to an onclick handler.

Spec

Signature

type ElementCard = {
  _id: string,
  title: ?string,
  content: ?RawDraftContent,
  cover: ?string,
  world_id: ?string,
  files: ?array,
};

type Props = {
  element: ?ElementCard,
  readonly: ?bool = true,
  style: ?Object,

  create: ?func,
  setTitle: ?func,
  setContent: ?func,
  deleteElement: ?func,
  addAttachment: ?func,
  deleteAttachment: ?func,
  setCover: ?func,
};

type RenderedComponent = 'div' | Card;

All props not intended for this component are passed unaltered to the RenderedComponent.

Lifecycle

The component has three states: empty, read-only, and editing.

Empty State

If no element prop is provided, the component is in the empty state. The readonly prop prevents edit/save actions and conversions to other states.

The empty state is intended to indicate that adding a new element is easy. It will eventually be used as the placeholder atop the element list to add a new element (instead of the FAB).

On focus within the placeholder inline edit or on successful upload of an image, the state is transformed into the "Editing State", where adding information to the note is possible.

RenderedComponent = Card;

Editing State

When an element prop is provided and readonly is not truthy, the component is in editing mode.

When in editing mode, the footer is visible, and the title/body are editable. This is equivalent to the current element card when not in read-only.

When in this mode and there is no _id prop and is not awaiting one from a save action (i.e. the element has yet to be created), the save actions (attachments, covers, titles, content changes, etc) must call the create callback, passing in an ElementCard object.

RenderedComponent = 'div';

Read Only

When an element prop is provided and readonly is truthy, the component is in read-only mode.

When in read-only mode, the editor has no footer and all content is displayed read-only. Content within the body is also capped at a specific height and its contents "ghosted" to indicate more content is available. This is equivalent to the current element card when in read-only.

RenderedComponent = Card;