action-area

v1.0.1

v1.0.0

STATUS

Passing

DOWNLOADS

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

6 years ago

SIZE

3 KB

ActionArea The purpose of this component is to provide a button like behaviour for a click like interaction within other components.

1 contributor

Install action-area as a package?

Copied

npm i @bit/tomlandau.belle.components.action-area

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

ActionArea

The purpose of this component is to provide a button like behaviour for a click like interaction within other components. Button can’t be used in such cases as it always will have it’s own focus which is not desired in components like DatePicker e.g. next month button.

Note: Use the ActionArea’s onUpdate instead of onClick as otherwise on iOS9 the ActionArea will trigger onFocus for it’s parent with a set tabindex.

Update the childProps based on the updated properties passed to the card.

As soon as the mouse enters the component the isHovered state is activated.

The state isHovered is not set to true in case onMouseEnter was triggered by a touch event.

Deactivate the isHovered state.

Activates the active state in case the main mouse button was pressed.

Triggers onUpdate in case the mouse button was pressed on this element.

In addition the active state is deactivated.

Updates the button to be active and makes sure the next onMouseEnter is ignored.

Triggers onUpdate in case the touch event started on this element and makes sure the next onMouseEnter is ignored.

Updates the button to be release and makes sure the next onMouseEnter is ignored.