Skip to content

React Inactivity Validator Component based on Google's Material UI design with features to auto ok and auto cancel after certain timeout.

Notifications You must be signed in to change notification settings

revanth0212/inactivity-dialog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Inactivity Dialog

React Inactivity Validator Component based on Google's Material UI design with features to auto ok and auto cancel after certain timeout.

An example can be seen here: https://revanth0212.github.io/inactivity-dialog/

Motivation

It is hard to keep track of keyboard events and mouse events when working on a shared document for instance which has a temporary lock on it in a multi user environment. This led to the Inactivity Validator Dialog. Also it has features like Auto OK or Auto Cancel (like in the Waze mobile application).

Features

  1. Material UI
  2. Auto Ok / Auto Cancel (Like in case of Waze App)
  3. Check for Keyboard and Mouse Events to auto renew timer
  4. Heavily Customizable (both functionally and aesthetically)

Installation

You can use npm or yarn.

npm install inactivity-dialog

or

yarn add inactivity-dialog

Usage

Once done with the installation, you can get the component into your module using your favorite bundler/builder api. For instance,

import InactivityDialog from 'inactivity-dialog'

or

const InactivityDialog = require('inactivity-dialog')

Props

Name Type Default Value Description
autoUnlockTimeout number 60 Number of Seconds it takes for the timer to Auto OK / Cancel.
timeout number 180000 Number of milliseconds of inactivity it takes for the dialog to come on to the screen.
beforeInactivityDialogOpen function () => {} Function that will be called before the Inactivity Dialog shows up on the UI.
beforeInactivityDialogClose function () => {} Function that will be called before the Inactivity Dialog moves away from the UI.
handleSubmit function () => {} Function that will be called when the submit button is clicked (Right side button).
handleCancel function () => {} Function that will be called when the cancel button is clicked (Left side button).
cancelButtonText string 'Cancel' Text that needs to be shows on the cancel button.
submitButtonText string 'Submit' Text that needs to be shown on the submit button.
userQuestion string 'Are you sure you want to submit?' User question / message that needs to be shown on the dialog.
successfulMessage string 'Submitted sucessfully' Successful message that needs to be shown on the dialog when the user clicks submit.
SuccessFulIcon node < LockOpen color="green" /> The Icon that needs to be shown when the submit button is either clicked by user or auto clicked due to timer expiry. The default icon is a material ui icon taken from https://material.io/icons/.
UserActionWaitingIcon node < LockOutline color="#0D5DB8" /> The Icon that needs to be shown when the dialog is opened and waiting for user action. The default icon is a material ui icon taken from https://material.io/icons/.
buttonLabelStyle object { color: '#0D5DB8' } CSS styling that will be applied on the Cancel and Submit button labels.
userActionWaitingColor string '#0D5DB8' Color that will be used for the user question and timeout indicator. This will take precedence over color if provided in userQuestionStyle prop.
successfulActionColor string 'green' Color that will be used for the successful message. This will take precedence over color if provided in successfulMessageStyle prop.
userQuestionStyle object {} Styling that will be applied on the User question component.
successfulMessageStyle object {} Styling that will be applied on the Successful message component.

Example

import  MuiThemeProvider  from  'material-ui/styles/MuiThemeProvider'

import  InactivityDialog  from  'inactivity-dialog'

<MuiThemeProvider>

    <InactivityDialog
    
	    handleSubmit={this.handleInactivityTimeoutSubmit}
	    
	    handleCancel={this.handleInactivityTimeoutCancel}
	    
	    timeout={10000}
	    
	    autoUnlockTimeout={60}
	    
	    beforeInactivityDialogOpen={this.beforeInactivityDialogOpen}
	    
	    beforeInactivityDialogClose={this.beforeInactivityDialogClose}
	    
	    cancelButtonText="No, Stay"
	    
	    submitButtonText="Yes, Leave"
	    
	    successfulMessage="Successfully auto clicked submit button."
	    
	    userQuestion="Do you want to perform certain action?"
    
    />
    
</MuiThemeProvider>

If you notice, we are wrapping the InactivityDialog component inside MuiThemeProvider. This is because the inactivity-dialog component uses material UI dialog component which needs the MuiThemeProvider to render.

Make sure one of the parent component of Inactivity Dialog are wrapped inside the MuiThemeProvider.

Wanna Contribute?

This project is based on create-react-app. If you are familiar with the project structure and the module's goal, please branch out from master and create a PR once done.

Use

npm run start 

to start the local server.

An example has been provided in

App.js

file.

About

React Inactivity Validator Component based on Google's Material UI design with features to auto ok and auto cancel after certain timeout.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published