react-powerplug/src/index.js.flow

Give life to your dumb components

// @flow

import * as React from 'react'

/* Utils */

type Updater<T> = (value: ((updater: T) => T) | T) => 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,
|}) => 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 FocusManager: React.ComponentType<
  | {| onChange?: FocusManagerChange, render: FocusManagerRender |}
  | {| onChange?: FocusManagerChange, children: FocusManagerRender |}
>

/* Form */

type FormChange<T> = T => void

type FormRender<T> = ({|
  values: T,
  input: <K: $Keys<T>>(
    key: K
  ) => {|
    value: string,
    set: Updater<string>,
    bind: {|
      value: string,
      onChange: (SyntheticInputEvent<*>) => 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]: string }> 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 |}
>

/* Input */

type InputChange = (value: string) => void

type InputRender = ({|
  value: string,
  set: Updater<string>,
  bind: {| value: string, onChange: (SyntheticInputEvent<*>) => void |},
|}) => React.Node

declare export var Input: React.ComponentType<
  | {| initial?: string, onChange?: InputChange, render: InputRender |}
  | {| initial?: string, onChange?: InputChange, children: InputRender |}
>

/* List */

type ListChange<T> = (list: $ReadOnlyArray<T>) => void

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

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

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

/* Set */

type SetChange<T> = (values: $ReadOnlyArray<T>) => void

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

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

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

/* Map */

type MapChange<T> = T => void

type MapRender<T, K = $Keys<T>> = ({|
  values: T,
  set: (key: K, value: $ElementType<T, K>) => void,
  over: (key: K, fn: ($ElementType<T, K>) => $ElementType<T, K>) => void,
  get: (key: K) => $ElementType<T, K>,
|}) => React.Node

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

declare export class Map<T: Object> extends React.Component<MapProps<T>, *> {}

/* State */

type StateChange<T> = T => void

type StateRender<T> = ({|
  state: T,
  setState: (updated: $Shape<T> | (T => $Shape<T>), cb?: () => void) => void,
|}) => 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>,
|}) => 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>,
|}) => 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