moox / react-topbar-progress-indicator Goto Github PK

View Code? Open in Web Editor NEW

109.0 4.0 6.0 655 KB

`topbar` progress indicator as a React component

License: MIT License

JavaScript 100.00%

react react-component topbar

react-topbar-progress-indicator's Introduction

react-topbar-progress-indicator

topbar progress indicator as a React component

Will simply show() and hide() topbar when the component is respectively mounted and unmounted.

Since topbar is a singleton, using <TopBarProgress /> multiples times will take this in consideration. This means that hide() will only be called when all <TopBarProgress /> have been unmounted.

For example, if you render 2 <TopBarProgress /> and unmount one (eg: you are doing 2 async things and only once is done), hide() won't be called. You will need to have both instances unmounted.

Installation

npm install react-topbar-progress-indicator
## or
yarn add react-topbar-progress-indicator

Usage

import TopBarProgress from "react-topbar-progress-indicator";

TopBarProgress.config({
  barColors: {
    "0": "#fff",
    "1.0": "#fff"
  },
  shadowBlur: 5
});

const YourThing = () => {
  return <div>{this.state.loading && <TopBarProgress />}</div>;
};

Config

Since topbar is a singleton, you should configure via Topbar.config().

`barThickness` (Integer, px)

The progress bar thickness in px (default: 3).

`barColors` (Object { progress: color })

Object of gradient color stops used to draw the progress bar.

Example:

  barColors: {
    "0": "#f00",
    "0.5": "#0f0",
    "1.0": "#00f",
  },

`shadowBlur`

Integer of the shadow blur in px (default: 10).

`shadowColor`

String that represent the shadow color (hexa, default: #000).

Changelog

Check the changelog for more informations about recent releases. You might also find releases notes on GitHub.

Contribute

⇄ Pull requests and ★ Stars are always welcome.

Please read the contribution guidelines before contributing.

Code of Conduct

We want the community to be friendly and respectful to each other. Please read our full code of conduct so that you can understand what actions will and will not be tolerated.

License

MIT

Security contact information

To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.

react-topbar-progress-indicator's People

Contributors

Stargazers

Watchers

Forkers

wuct kkkrist tylerkahn komsitr harishdeivanayagam lpsinger

react-topbar-progress-indicator's Issues

Renamed lifecycles in latest React

As of React 16.9.0 we're getting warnings while using this handy little progress bar:

Warning: componentWillMount has been renamed, and is not recommended for use.
update-on-async-rendering

We can certainly replace it with our own, but was just wondering if there are plans for a new release which fixes such problems.

Add an id/class attribute to canvas element

Hi, Could you add an id or class to topbar canvas element so that it would be easier to style it? Thank you.

Edit: Nevermind, I've added className: "topbar" to the config and it worked!

Can't click through the indicator

Seems the iframe containing the topbar is much taller than its visual height. I have some user controls near the top of the page, and the topbar blocks them from being clicked when it's present. Is there a way to fix this? I tried putting pointer-events: none; on the iframe, but this doesn't work, probably for security reasons to prevent people from click jacking. At a loss for how to fix this...

Breaks in IE11

IE11 doesn't support arrow functions so it throws a Syntax error when trying to parse the arrow function defaults.

Remove `expect` and `expect-jsx` from devDependencies

Actually, expect has not been used in the test. Maybe we could removeexpect and expect-jsx from devDependencies?

Build error when using Vite with React Typescript

Vite v2.6.4
Typescript v4.3.2
React v17.0.0

testing with Jest and React Testing Library fails with TypeError message

Hi, I'm trying to test this library with Jest and React Testing Library and could use some help.

RouteLoadingBar.js:

import React, { useEffect, useState } from "react";
import { useLocation } from from "react-router-dom";
import TopBarProgress from "react-topbar-progress-indicator";

TopBarProgress.config({
    barColors: {
        "0": "#98b3d8",
        "1.0": "#98b3d8",
    },
    className: "topbar",
});

function RouteLoadingBar() {
    const location = useLocation();
    const [showBar, setShowBar] = useState(false);

    useEffect(() => {
        setShowBar(true);
        setTimeout(() => setShowBar(false), 600);
    }, [location.pathname]);

    if (showBar) {
        return <TopBarProgress />
    }
    return "";
}


export default RouteLoadingBar;

RouteLoadingBar.test.js:

import React from "react";
import { render, screen } from "@testing-library/react";

import { Header } from "../";
import RouteLoadingBar from "./RouteLoadingBar";

it("should display Loading Bar when switching routes", () => {
        const { debug } = render(
                    <div>
                         <Header /> 
                        <LoadingBar/>
                    </div>
        );

        // act(() => { fireEvent.click(screen.getByText("Manage policies")); });
        // debug(undefined, 300000)
});

The above test fails rendering TopBarProgress with the following error:

TypeError: Cannot set property 'shadowBlur' of null
  31 |
  32 |     it("should display Loading bar when switching routes", () => {
> 33 |         const { debug } = render(
     |                           ^
  34 |                     <div>
  at repaint (node_modules/topbar/topbar.js:57:28)
  at Object.progress (node_modules/topbar/topbar.js:111:17)
  at Object.show (node_modules/topbar/topbar.js:96:24)
  at node_modules/react-topbar-progress-indicator/src/index.js:30:24
  at invokePassiveEffectCreate (../../node_modules/react-dom/cjs/react-dom.development.js:23487:20)
  at HTMLUnknownElement.callCallback (../../node_modules/react-dom/cjs/react-dom.development.js:3945:14)
  at HTMLUnknownElement.callTheUserObjectsOperation (../../node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
  at innerInvokeEventListeners (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
  at invokeEventListeners (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
  at HTMLUnknownElementImpl._dispatch (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
  at HTMLUnknownElementImpl.dispatchEvent (../../node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
  at HTMLUnknownElement.dispatchEvent (../../node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
  at Object.invokeGuardedCallbackDev (../../node_modules/react-dom/cjs/react-dom.development.js:3994:16)
  at invokeGuardedCallback (../../node_modules/react-dom/cjs/react-dom.development.js:4056:31)
  at flushPassiveEffectsImpl (../../node_modules/react-dom/cjs/react-dom.development.js:23574:9)
  at unstable_runWithPriority (../../node_modules/scheduler/cjs/scheduler.development.js:468:12)
  at runWithPriority$1 (../../node_modules/react-dom/cjs/react-dom.development.js:11276:10)
  at flushPassiveEffects (../../node_modules/react-dom/cjs/react-dom.development.js:23447:14)
  at Object.<anonymous>.flushWork (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:992:10)
  at act (../../node_modules/react-dom/cjs/react-dom-test-utils.development.js:1107:9)
  at render (node_modules/@testing-library/react/dist/pure.js:95:26)
  at Object.<anonymous> (src/components/RouteLoadingBar/RouteLoadingBar.test.js:33:27)

I would like to mention that I've tried adding "shadowBlur" prop to the config but the test still failed.

Could upgrading "topbar" library solve this?

Release latest version.

Would you be willing to release a new version with the fixes from #3, so that this can be used in React 16?