Ui/FileDrop

/**
 * Attribute groups the file-drop component provides to the consumer's
 *  `toView` callback.
 */
type FileDropAttributes = Readonly<{
  input: ReadonlyArray<ChildAttribute>
  root: ReadonlyArray<ChildAttribute>
}>

/** Configuration for creating a file-drop model with `init`. */
type InitConfig = Readonly<{
  id: string
}>

/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
type ViewInputs = Readonly<{
  accept: ReadonlyArray<string>
  isDisabled: boolean
  multiple: boolean
  toView: (attributes: FileDropAttributes) => Html
}>

/** Union of all messages the file-drop component can produce. */
const Message: MessageUnion<{
  DroppedFiles: {
    files: NonEmptyArray<Schema<File>>
  }
  DroppedNonFiles: {}
  EnteredDragZone: {}
  LeftDragZone: {}
}>

/**
 * Schema for the file-drop component's state.
 * 
 * `isDragOver` controls the `data-drag-over` attribute on the root while a
 * drag is hovering. The html layer's `OnDragEnter`/`OnDragLeave` handlers
 * track the per-element active state internally so transitions between
 * children of the zone do not flicker the boolean off-and-on.
 */
const Model: Struct<{
  id: String
  isDragOver: Boolean
}>

/**
 * The file-drop component's OutMessages: `ReceivedFiles` on the happy
 * path and `RejectedNonFiles` when a drop event fires without files.
 */
const OutMessage: MessageUnion<{
  ReceivedFiles: {
    files: NonEmptyArray<Schema<File>>
  }
  RejectedNonFiles: {}
}>

/**
 * Renders an accessible file-drop zone by publishing attribute groups
 *  for a `<label>`-wrapped hidden file input.
 */
const view: SubmodelView<FileDrop.Model, {
  _tag: "EnteredDragZone"
} | {
  _tag: "LeftDragZone"
} | {
  _tag: "DroppedFiles"
  files: readonly [File, File]
} | {
  _tag: "DroppedNonFiles"
}, Readonly<{
  accept: readonly Array<string>
  isDisabled: boolean
  multiple: boolean
  toView: (attributes: FileDropAttributes) => Html
}>>