react-powerplug/src/index.js.flow

Give life to your dumb components

// @flow

import * as React from 'react'

/* Utils */

type Updater<T> = (updater: (T => T) | T) => void

type Reset = (cb?: () => void) => void

/* Active */

type ActiveChange = (active: boolean) => void

type ActiveRender = ({|
  active: boolean,
  bind: {| onMouseDown: () => void, onMouseUp: () => void |},
|}) => React.Node

declare export var Active: React.ComponentType<
  | {| onChange?: ActiveChange, render: ActiveRender |}
  | {| onChange?: ActiveChange, children: ActiveRender |}
>

/* Compose */

declare export var Compose: React.ComponentType<Object>

/* Counter */

type CounterChange = (count: number) => void

type CounterRender = ({|
  count: number,
  inc: () => void,
  dec: () => void,
  incBy: (step: number) => void,
  decBy: (step: number) => void,
  reset: Reset,
|}) => React.Node

declare export var Counter: React.ComponentType<
  | {| initial?: number, onChange?: CounterChange, render: CounterRender |}
  | {| initial?: number, onChange?: CounterChange, children: CounterRender |}
>

/* Focus */

type FocusChange = (focused: boolean) => void

type FocusRender = ({|
  focused: boolean,
  bind: {| onFocus: () => void, onBlur: () => void |},
|}) => React.Node

declare export var Focus: React.ComponentType<
  | {| onChange?: FocusChange, render: FocusRender |}
  | {| onChange?: FocusChange, children: FocusRender |}
>

/* FocusManager */

type FocusManagerChange = (focused: boolean) => void

type FocusManagerRender = ({|
  focused: boolean,
  blur: () => void,
  bind: {|
    tabIndex: number,
    onFocus: () => void,
    onBlur: () => void,
    onMouseDown: () => void,
    onMouseUp: () => void,
  |},
|}) => React.Node

declare export var unstable_FocusManager: React.ComponentType<
  | {| onChange?: FocusManagerChange, render: FocusManagerRender |}
  | {| onChange?: FocusManagerChange, children: FocusManagerRender |}
>

/* Form */

type FormChange<T> = T => void

type FormRender<T> = ({|
  values: T,
  setValues: ((T => $Shape<T>) | $Shape<T>) => void,
  reset: Reset,
  field: <K: $Keys<T>>(
    key: K
  ) => {|
    value: $ElementType<T, K>,
    set: Updater<$ElementType<T, K>>,
    bind: {|
      value: $ElementType<T, K>,
      onChange: (
        event: { target: { value: $ElementType<T, K> } } | $ElementType<T, K>
      ) => void,
    |},
  |},
|}) => React.Node

type FormProps<T> =
  | {| initial: T, onChange?: FormChange<T>, render: FormRender<T> |}
  | {| initial: T, onChange?: FormChange<T>, children: FormRender<T> |}

declare export class Form<T: { +[string]: mixed }> extends React.Component<
  FormProps<T>
> {}

/* Hover */

type HoverChange = (hovered: boolean) => void

type HoverRender = ({|
  hovered: boolean,
  bind: {| onMouseEnter: () => void, onMouseLeave: () => void |},
|}) => React.Node

declare export var Hover: React.ComponentType<
  | {| onChange?: HoverChange, render: HoverRender |}
  | {| onChange?: HoverChange, children: HoverRender |}
>

/* Field */

type FieldChange<T> = (value: T) => void

type FieldRender<T> = ({|
  value: T,
  set: Updater<T>,
  reset: Reset,
  bind: {| value: T, onChange: (SyntheticInputEvent<*>) => void |},
|}) => React.Node

type FieldProps<T> =
  | {| initial?: T, onChange?: FieldChange<T>, render: FieldRender<T> |}
  | {| initial?: T, onChange?: FieldChange<T>, children: FieldRender<T> |}

declare export class Field<T> extends React.Component<FieldProps<T>> {}

/* List */

type ListValues<T> = $ReadOnlyArray<T>

type ListChange<T> = (list: ListValues<T>) => void

type ListRender<T> = ({|
  list: ListValues<T>,
  first: () => T | void,
  last: () => T | void,
  set: Updater<ListValues<T>>,
  push: (...values: ListValues<T>) => void,
  pull: (predicate: (T) => boolean) => void,
  sort: (compare: (a: T, b: T) => -1 | 0 | 1) => void,
  reset: Reset,
|}) => React.Node

type ListProps<T> =
  | {|
      initial: ListValues<T>,
      onChange?: ListChange<T>,
      render: ListRender<T>,
    |}
  | {|
      initial: ListValues<T>,
      onChange?: ListChange<T>,
      children: ListRender<T>,
    |}

declare export class List<T> extends React.Component<ListProps<T>> {}

/* Set */

type SetValues<T> = $ReadOnlyArray<T>

type SetChange<T> = (values: SetValues<T>) => void

type SetRender<T> = ({|
  values: SetValues<T>,
  add: (key: T) => void,
  clear: () => void,
  remove: (key: T) => void,
  has: (key: T) => boolean,
  reset: Reset,
|}) => React.Node

type SetProps<T> =
  | {| initial: SetValues<T>, onChange?: SetChange<T>, render: SetRender<T> |}
  | {| initial: SetValues<T>, onChange?: SetChange<T>, children: SetRender<T> |}

declare export class Set<T> extends React.Component<SetProps<T>> {}

/* Map */

type MapValues<T> = { [key: string]: T }

type MapChange<T> = (MapValues<T>) => void

type MapRender<T> = ({|
  values: MapValues<T>,
  clear: () => void,
  reset: Reset,
  set: (key: string, value: (T => T) | T) => void,
  get: (key: string) => T,
  has: (key: string) => boolean,
  delete: (key: string) => void,
|}) => React.Node

type MapProps<T> =
  | {| initial: MapValues<T>, onChange?: MapChange<T>, render: MapRender<T> |}
  | {| initial: MapValues<T>, onChange?: MapChange<T>, children: MapRender<T> |}

declare export class Map<T> extends React.Component<MapProps<T>> {}

/* State */

type StateChange<T> = T => void

type StateRender<T> = ({|
  state: T,
  setState: (updater: (T => $Shape<T>) | $Shape<T>, cb?: () => void) => void,
  resetState: Reset,
|}) => React.Node

type StateProps<T> =
  | {| initial: T, onChange?: StateChange<T>, render: StateRender<T> |}
  | {| initial: T, onChange?: StateChange<T>, children: StateRender<T> |}

declare export class State<T: Object> extends React.Component<StateProps<T>> {}

/* Interval */

type IntervalRender = ({|
  start: (delay?: number) => void,
  stop: () => void,
  toggle: () => void,
|}) => React.Node

type IntervalProps =
  | {| delay?: ?number, render: IntervalRender |}
  | {| delay?: ?number, children: IntervalRender |}

declare export class Interval extends React.Component<IntervalProps> {}

/* Toggle */

type ToggleChange = (on: boolean) => void

type ToggleRender = ({|
  on: boolean,
  toggle: () => void,
  set: Updater<boolean>,
  setOn: () => void,
  setOff: () => void,
  reset: Reset,
|}) => React.Node

declare export var Toggle: React.ComponentType<
  | {| initial?: boolean, onChange?: ToggleChange, render: ToggleRender |}
  | {| initial?: boolean, onChange?: ToggleChange, children: ToggleRender |}
>

/* Touch */

type TouchChange = (touched: boolean) => void

type TouchRender = ({|
  touched: boolean,
  bind: {| onTouchStart: () => void, onTouchEnd: () => void |},
|}) => React.Node

declare export var Touch: React.ComponentType<
  | {| onChange?: TouchChange, render: TouchRender |}
  | {| onChange?: TouchChange, children: TouchRender |}
>

/* Value */

type ValueChange<T> = (value: T) => void

type ValueRender<T> = ({|
  value: T,
  set: Updater<T>,
  reset: Reset,
|}) => React.Node

type ValueProps<T> =
  | {| initial: T, onChange?: ValueChange<T>, render: ValueRender<T> |}
  | {| initial: T, onChange?: ValueChange<T>, children: ValueRender<T> |}

declare export class Value<T> extends React.Component<ValueProps<T>> {}

/* composeEvents */

type Events = { [name: string]: Function }

declare export function composeEvents(...Array<Events>): Events