availity/react-block-ui

Easy way to block the user from interacting with your UI.

Deprecation Notice: This package is no longer supported. Please switch to @availity/block-ui.

react-block-ui

Easy way to block the user from interacting with your UI.

About

This library contains easy to use components to prevent the user from interacting with the user interface based on some conditions.

There is also a separate component which works with redux to help block and unblock automatically based on redux action types. See the ReduxBlockUi component for more details.

Documentation

See: https://availity.github.io/react-block-ui/

Installation

Install react-block-ui via NPM

npm install --save react-block-ui react react-dom

Import the components you need, example:

import BlockUi from 'react-block-ui';
import ReduxBlockUi from 'react-block-ui/redux'; // only for redux
import reduxMiddleware from 'react-block-ui/reduxMiddleware'; // only for redux
import from 'react-block-ui/style.css';

Development

Install dependencies:

npm install

Run examples at http://localhost:8080/ with webpack dev server:

npm start

Run tests:

npm test

Run tests & coverage report:

npm test:coverage

Watch tests:

npm run test:watch

Disclaimer

Open source software components distributed or made available in the Availity Materials are licensed to Company under the terms of the applicable open source license agreements, which may be found in text files included in the Availity Materials.

License

MIT

react-block-ui's Issues

IE11 throws an "Unspecified error" accessing document.activeElement from an <iframe>

This was a real pain to track down, but apparently IE 11 will just throw Unspecified error. when accessing document.activeElement from an <iframe>, sometimes.

aria-busy renders "0" on screen

version: 1.1.3

the following is rendering on the DOM when using BlockUi component:

<div aria-busy="0">0<div>

code:

 <BlockUi keepInView tag="div" blocking={blocking} message={message}>
      {children}
    </BlockUi>

How can I stop the "0" from rendering on screen?

Warning | validateDOMNesting For Helper Ref

Currently if a user wants to override the tag prop of react-block-ui they can but it doesn't account for warnings that may come up if per say we were to have a tag of <tbody>

Example Code:

<BlockUI tag="tbody">
   <td>hello</td>
</BlockUI>

rendered HTML

<tbody>
   <td>hello</td>
   <span />
</tbody>

Warning: validateDOMNesting(...): <span> cannot appear as a child of <tbody>.

Code Link

I would suggest the we move the span ref helper out of the component and return BlockUI as a fragment of both. Then we can just have the span grab the same element from helper.previousSibling to allow any tag to be overridden for the BlockUI tag prop.

Could not find type declaration for module react-block-ui

My project is written in typescript and I can't use this component.

By importing the library in my component I get the following error:

Version: 1.1.3 - 1.1.4

Installing package on version 1.1.4 is not exposing css and redux files at the root folder. Version 1.1.3 works fine.

Current behavior

Installing the package at version 1.1.4 is not exposing the redux and css files on the root folder. Consequently, importing react-block-ui/redux', react-block-ui/reduxMiddleware and react-block-ui/style.css fails.

Installing the package at version 1.1.3 exposes the files at the root folder as expected.

Expected behavior

Files should be exposed so I can import them as shown in the docs.

Steps to recreate the problem

1. Create a new node project (npm init -y)
2. Install package: npm install react-block-ui
3. Check package files in the node_modules folder

Environment

• Windows 10 Professional
• NodeJS 6.13.1 (legacy system)
• npm 5.6.0

error when using react component as tag

Until now I could use BlockUI with a React component as tag and it worked out as expected, but since the latest update I get the following error:

this.wrapper.contains is not a function in file BlockUi.js:89

I debugged it a little bit and saw that there it is expected that this.wrapper is a DOM element to be able to call the contains function. But if tag was a React component this.wrapper will be a react component and won't have a contains function.

I am not sure if you want to allow React components as tags or not but if you want to allow them this bug should be fixed. In the meantime I went back to using "div" as tag and everything works now.

Elements in a blocked area should not accept actions triggered by the keyboard

If I click a button and block its parent, I may still click the button it with space or enter keys.

Also, I may navigate with tab to the elements inside the blocked area.

It should block all user's interactions with the children components, not only mouse actions.

Remain in screen

Current the dots are absolute 50% from the container it is in. But if the container is too high the dots may appear off-screen. Is there any way to make sure that when the container is high, at least the dots would not disapper?

Move to availity-react

I am considering moving this over to availity-react and refactoring to hooks as from scanning the code will make the code footprint much smaller. Maintainability-wise would be much easier in one place.

We can also show the range of options using the storybook knobs as compared to the current docs. We are also writing a better documentation site using gatsby and we can add more documentation into that once it gets released.

Thoughts @TheSharpieOne? @robmcguinness?

Children lose state on block and unblock

I am not sure if I am doing something wrong (I am quite new to react), but when I use BlockUi with children which have a state (like a Form) they get recreated and lose their state on block.

I tracked down why this happens and it seams to be since BlockUi's render function has an if in which it decides how to render. Each case returns its own element with the children inside but then it seams that react doesn't know that the children inside this two Tag elements are the same and destroys the old one and recreates the new one everytime we block or unblock the component.

react-block-ui throwing error in my tests

When I test my component with jest, enzyme and enzyme-to-json, react-block-ui is randomly throwing an error in the new focus-control code.

 PASS  src\components\__tests__\ErrorMessage.test.tsx
 PASS TypeError: Cannot read property 'focus' of null
    at Immediate.<anonymous> (C:\Projeto\v2-react\SIMM\node_modules\react-block-ui\lib\BlockUi.js:93:37)
    at runCallback (timers.js:649:20)
    at tryOnImmediate (timers.js:622:5)
    at processImmediate [as _immediateCallback] (timers.js:594:5)

It will be difficult for me to create a minimal test case.

Maybe some null-check in react-block-ui will solve the issue.

reduxMiddleware examples/documentation wrong?

The examples and doc show:
import reduxMiddleware from 'react-block-ui/reduxMiddleware';

Should be:
import reduxMiddleware from 'react-block-ui/lib/reduxMiddleware';

thx

Allow passing of aria-label for Accessibility

I am unable to pass down an aria-label attribute to add better context to the loading indicator. Currently, the component is announcing "dot dot dot" when using a screen reader instead of something more informative. Having the ability to pass this attribute will help teams be able to provide more informative labels to the loading indicators in their components.

The issue, along with a screen shot of ANDI showing what I hear using a screen reader, can be found in our Availity SO here.

React functional component : can we setState on form load as all components are disabled

Using functional react component with hooks:

Requirement: when page load, data populates, from backend, into dropdowns and multi-select tables(tables with checkboxes). On Submit button click, I need to use this consolidates object (for the default values selected) to make another REST call.
NOTE : No change handler called for any of these ui components.

Issue:
1)The state is not set at all and if I try to it goes to infinite loop. as it keeps rendering the page again and again.
2) if I try to set state and use it, being an async call, state is not available at that time.

Suggestion needed: is there a way to setState of the default selected values on form load.

If, I setState of components in one of the handlers, it works but here I cannot touch any of the handlers at all(all are disabled), how can I setState

setImmediate() is a non-standard function

Hi...got an Reference Error today, and found this is because setImmedaite() got called in componentWillReceiveProps(). can you fix it, I really like react-block-ui :)

How to change the overlay opacity.

Question - Block only one child in a list

I have the following scenario where we display a list in Cards within the Card we have icons that will trigger an action and API call. When the promise is yet to resolve, we would like to give the user some feedback. I was trying to be clever and use the BlockUI to only block that specific card that the user was interacting with. Can this package do what i'm asking?

In combination with MUI and rematch I am getting: Module not found: Can't resolve 'react-block-ui/reduxMiddleware' in

store.js

import { init } from '@rematch/core';
import createPersistPlugin from '@rematch/persist';
import { routerMiddleware, connectRouter } from 'connected-react-router';
import { createBrowserHistory } from 'history';

import reduxMiddleware from 'react-block-ui/reduxMiddleware'; // only for redux

import * as models from 'models';

export const history = createBrowserHistory();

const persistPlugin = createPersistPlugin({
  blacklist: [
    'persist',
  ],
  whitelist: [
    'user',
    ...
  ],
});

export default init({
  models,
  plugins: [persistPlugin],
  redux: {
    reducers: {
      router: connectRouter(history),
    },
    middlewares: [
      reduxMiddleware,
      routerMiddleware(history),
    ],
  },
});

Error

Double checking package installation

Doesn’t block responsive design

Works fine when the layout is standard with two components next to each other, but when the screen shrinks and the view goes responsive, the block UI only covers the top components. The bottom component is still editable

keepInView no more working

Hi,

Thanks for the lib, but keepInView is no more working on 1.1.3.

Can you do something please ?

Unable to improve reduxMiddleware from react-block-ui/reduxMiddleware

When I import reduxMiddleware , save the change

// ./index.js
import reduxMiddleware from "react-block-ui/reduxMiddleware";

A compile error comes out :

Failed to compile.
./src/index.js
Module not found: Can't resolve 'react-block-ui/reduxMiddleware' in 'myprojectdir\src'

react : 16.12.0
redux : 4.0.4
react-block-ui: 1.3.2

I really hope someone could tell me why and how can I fix this. thanks.

keepInView start working after scroll

https://stackblitz.com/edit/react-block-ui?file=Example.js

Like you see above KeepInView start working after using scroll and next blocking works correctly.
Do you have any idea to solve this problem ?

Warning: unstable_flushDiscreteUpdates

For react deps:

    "react": "^16.9.0",
    "react-block-ui": "^1.3.1",
    "react-color": "^2.17.3",
    "react-dom": "^16.9.0",

There is now this warning showing up

Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
    in BlockUi

React 16.9 warning - componentWillReceiveProps

Just an FYI... with react 16.9 I see the warning below. Seems componentWillReceiveProps is used in one place in the src (and a few places in tests).

react-dom.development.js:11494 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: BlockUi

Uncaught TypeError: Cannot read property 'focus' of null

testing with version: 0.2.3

getting Uncaught TypeError: Cannot read property 'focus' of null from
https://github.com/Availity/react-block-ui/blob/master/src/BlockUi.js at line 66

 if(this.focused && this.focused !== document.body) {
            setImmediate(() => this.topFocus.focus()) // <--------here 
 }

Sample code to recreate the issue

import React from 'react'
import BlockUi from 'react-block-ui'

export default class TestComp extends React.Component {
  constructor(props){
    super(props)
    this.state = {text:'',progress:false}
  }

  render (){
    return (<div>
      <BlockUi tag="div" blocking={this.state.progress}>
        <label>This is Sample</label>
        <input type="text" value={this.state.value} onChange={(e)=>{
          this.setState({text:e.value,progress:true})
          Promise.resolve({})
            .then(()=>{
              this.setState({text:e.value,progress:false})
            })
        }}/>
      </BlockUi>
    </div>)
  }
}

Module not found: Error: Cannot resolve module 'react-block-ui'

I installed react-block-ui but webpack is unable to load it. It is looking for it in node_modules but there is no index.js file installed?
Here is my import statement:
import BlockUi from 'react-block-ui';

This the file structure that gets downloaded for react-block-ui
react-block-ui/
node_modules/
License
package.json
README.md
redux.js

Is there more that should be downloaded? How can I fix this error?

Thanks in advance

Cannot find module: 'react-block-ui/redux'. Make sure this package is installed.

I am using redux and I used ReduxBlockUI in my form submission by refering the document https://availity.github.io/react-block-ui/components/ReduxBlockUi/ It's working fine but when I run
sudo npm run build
I am facing the issue unable to get build directory.

Failed to compile.
Cannot find module: 'react-block-ui/redux'. Make sure this package is installed.
You can install this package by running: yarn add react-block-ui/redux.

Use Portal for span in BlockUI to prevent validateDomNesting warnings

<BlockUI /> renders a <span> to the DOM to use as a ref. See here:

react-block-ui/src/BlockUi.js

Line 175 in e5e2d0c

<span ref={this.setHelper} />

This can cause validateDomNestingwarnings in certain situations. Take this situation for example:

// ...
<table>
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <BlockUi tag="tbody">
    <tr>
      <td>row</td>
    </tr>
    // BlockUi renders a span here as a ref which is not a valid child of tbody
  </BlockUi>
</table>

Suggested Solution

Using ReactDOM.createPortal, render that <span> to the body tag of the document instead of as a child of the BlockUI's tag

react-block-ui doesn't work with Nextjs

even with the state having {blocking : true} all child components were accessible to interact

Cannot use react-block-ui with React 17

React 17 is not a peer dependency of react-block-ui so I can't install it without forcing. If react-block-ui works with React 17 the peer dependencies should be updated.

PropTypes is deprecated in React 15.5

I was fiddling around upgrading my React project's packages to their latest versions, including React itself, and as I finished the process and ran npm start, I've got the following warning on the console:

As you can see, the warning is being generated by this component. So I just wanted to let you guys know about this issue.

Cheers

ERROR in ./~/react-block-ui/style.css

I just use react-block-ui in my react project.
First I run
npm install --save react-block-ui react react-dom

And write something like

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ContentBody from './components/content_body';
import NavBar from './components/NavBar.js';
import Main from './components/Main.js';
import { BrowserRouter } from "react-router-dom";

import BlockUi from 'react-block-ui';
import 'react-block-ui/style.css';
import { Button } from 'react-bootstrap';



class App extends Component{
  constructor(props) {
    super(props);

    this.toggleBlocking = this.toggleBlocking.bind(this);
    this.state = {
      blocking: false,
    };
  }

	toggleBlocking() {
		this.setState({blocking: !this.state.blocking});
	}

	render(){
		return (
			<div>
				<BlockUi tag="div" blocking={this.state.blocking}>
			 	<NavBar />
				<Main />
				</BlockUi>
		        <Button onClick={this.toggleBlocking} color="primary">Toggle Block</Button>

			</div>
		);
	}
}

But I get the following error

ERROR in ./~/react-block-ui/style.css
Module parse failed: /home/hungwenc/1111-drones-map/node_modules/react-block-ui/style.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:0)
    at Parser.pp$4.raise (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseExpression (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:1573:21)
    at Parser.pp$1.parseStatement (/home/hungwenc/1111-drones-map/node_modules/webpack/node_modules/acorn/dist/acorn.js:727:47)
 @ ./src/index.js 31:0-35

Is there any bug in the library?

Typings problem with tag prop

Just tried upgrading to latest, and we're getting typescript errors with the tag="div" prop:

Type 'string' is not assignable to type '{(...args: any[]) => any) & string'.  ts(2322)

The problem seems to be that in reactblockui.d.ts:

tag?: (...args: any[]) => any | string,

should be:

tag?: ((...args: any[]) => any) | string,

(note the parens around the entire expression before the or operator)

Delay overlay opacity

Sorry, this is not a library bug, but I'm trying to delay the opacity change as a transition but anything I tried didn't work.

Something as:

.block-ui-overlay {
	transition-property: opacity;
	transition-delay: 3s;
}

I'm not expert on CSS transition. Can this be made?

Still able to navigate with tab between inputs and enter data

When the loader appears, the focus is lost but I still can press the tab key to navigate between inputs and enter data there. (Screenshot and video are attached.)

https://user-images.githubusercontent.com/16920879/126608797-c21dc682-08e0-4a82-aa8c-bbf4b71b5946.mov

Default loader being used

I'm finding the default loader isn't being overridden by my chosen loading component, here's my code:

<BlockUi blocking={isLoading} loader={<FontAwesome size="2x" name="spinner" pulse />}>
    {wrapped components}
</BlockUi>

What I'm seeing is the default (3 dots) loader sitting underneath the BlockUi wrapped components when the loading state is set.

Everything else works fine.

Anything I'm missing here?

ComponentWillReceiveProps has been renamed, and is not recommended for use.

These warnings keep showing:

react-dom.development.js:88 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: BlockUi