Options
All
  • Public
  • Public/Protected
  • All
Menu

A button that can change between multiple states:

                             +-------+
+---+------------------------> Idle  <------------------------+---+
|   |                        +---+---+                        |   |
|   |                            +                            |   |
|   |                         onPress                         |   |
|   |                            |                            |   |
|   |                     +------v------+                     |   |
|   |                     | Processing  |                     |   |
|   |                     +------+------+                     |   |
|   |                            |                            |   |
|   |                 +-resolve--+---reject-+                 |   |
|   |                 |                     |                 |   |
|   |       +---------+--------+   +--------+---------+       |   |
|   +-false-+ !!successTimeout |   | !!failureTimeout +-false-+   |
|           +---------+--------+   +--------+---------+           |
|                     |                     |                     |
|                +----+----+           +----+----+                |
|                | Success <---+   +---> Failure |                |
|                +----+----+ true true +----+----+                |
|                     |        |   |        |                     |
| +-------------------v--------++ ++--------v-------------------+ |
| | successTimeout === Infinity | | failureTimeout === Infinity | |
| +--------------+--------------+ +--------------+--------------+ |
|                |                               |                |
| +--------------v--------------+ +--------------v--------------+ |
+-+ await sleep(successTimeout) | | await sleep(failureTimeout) +-+
  +-----------------------------+ +-----------------------------+
example
Demo video code ``` Send} onPress={success} /> Send + Reset} successTimeout={1000} SuccessComponent={SuccessComponent} onPress={success} /> Send + No Reset} successTimeout={Infinity} SuccessComponent={SuccessComponent} onPress={success} /> Error + Reset} failureTimeout={1000} FailureComponent={FailureComponent} onPress={error} /> Error + No Reset} failureTimeout={Infinity} FailureComponent={FailureComponent} onPress={error} /> ```

Type parameters

  • SS

Hierarchy

Index

Constructors

constructor

Properties

Static ProcessingComponent

ProcessingComponent: Component<IAsyncButtonComponentState> = ActivityIndicator

The default activity indicator to show

Accessors

disabled

  • get disabled(): boolean

failure

  • get failure(): boolean

idle

  • get idle(): boolean

processing

  • get processing(): boolean

success

  • get success(): boolean

Methods

Optional UNSAFE_componentWillMount

  • UNSAFE_componentWillMount(): void

Optional UNSAFE_componentWillReceiveProps

  • UNSAFE_componentWillReceiveProps(nextProps: Readonly<IAsyncButtonProps>, nextContext: any): void

Optional UNSAFE_componentWillUpdate

Optional componentDidCatch

  • componentDidCatch(error: Error, errorInfo: ErrorInfo): void
  • Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.

    Parameters

    • error: Error
    • errorInfo: ErrorInfo

    Returns void

Optional componentDidMount

  • componentDidMount(): void
  • Called immediately after a component is mounted. Setting state here will trigger re-rendering.

    Returns void

Optional componentDidUpdate

  • Called immediately after updating occurs. Not called for the initial render.

    The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.

    Parameters

    Returns void

Optional componentWillMount

  • componentWillMount(): void

Optional componentWillReceiveProps

  • componentWillReceiveProps(nextProps: Readonly<IAsyncButtonProps>, nextContext: any): void

componentWillUnmount

  • componentWillUnmount(): void

Optional componentWillUpdate

Optional getSnapshotBeforeUpdate

  • Runs before React applies the result of render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before render causes changes to it.

    Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated lifecycle events from running.

    Parameters

    Returns SS | null

isDisabled

  • isDisabled(): boolean

isFailure

  • isFailure(): boolean
  • The asyncronous operation completed and the button is currently showing the failure state for failureTimeout

    Returns boolean

isIdle

  • isIdle(): boolean

isProcessing

  • isProcessing(): boolean

isSuccess

  • isSuccess(): boolean
  • The asyncronous operation completed and the button is currently showing the successful state for successTimeout

    Returns boolean

render

  • render(): React.ReactNode

reset

  • reset(): void

Optional shouldComponentUpdate

  • Called to determine whether the change in props and state should trigger a re-render.

    Component always returns true. PureComponent implements a shallow comparison on props and state and returns true if any props or states have changed.

    If false is returned, Component#render, componentWillUpdate and componentDidUpdate will not be called.

    Parameters

    Returns boolean