├── .editorconfig ├── .flowconfig ├── .github ├── FUNDING.yml └── workflows │ └── build.yml ├── .gitignore ├── .node-version ├── .vscode └── settings.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── interfaces └── external-modules │ └── topbar.js ├── package-lock.json ├── package.json └── src ├── __tests__ └── index.js ├── index.d.ts └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | indent_style = space 10 | indent_size = 2 11 | 12 | [*.md] 13 | # Allow
from Markdown 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | .*/node_modules/.* 3 | .*/lib/.* 4 | .*/__tests__/.* 5 | 6 | [include] 7 | node_modules 8 | 9 | [libs] 10 | interfaces 11 | 12 | [options] 13 | esproposal.class_instance_fields=enable 14 | esproposal.class_static_fields=enable 15 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | tidelift: "npm/react-topbar-progress-indicator" 2 | github: MoOx 3 | ko_fi: moox__ 4 | custom: https://www.paypal.com/paypalme/MoOx 5 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | tests: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v2 10 | - uses: actions/setup-node@v2 11 | with: 12 | node-version-file: ".node-version" 13 | 14 | - uses: actions/cache@v2 15 | with: 16 | path: ~/.npm 17 | key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} 18 | restore-keys: | 19 | ${{ runner.os }}-node- 20 | 21 | - run: npm ci 22 | 23 | - run: npm test 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS X crap 2 | .DS_Store 3 | 4 | # no log 5 | .log 6 | 7 | # Node.js / npm 8 | node_modules 9 | -------------------------------------------------------------------------------- /.node-version: -------------------------------------------------------------------------------- 1 | 16 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "javascript.validate.enable": false, 3 | "typescript.format.enable": false, 4 | "typescript.validate.enable": false, 5 | "flow.useBundledFlow": false, 6 | "eslint.enable": true 7 | } 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog of `react-topbar-progress-indicator` 2 | 3 | ## 4.1.1 - 2022-03-07 4 | 5 | - Fix TypeScript declaration: Remove unnecessary generic args [#28](https://github.com/MoOx/react-topbar-progress-indicator/pull/28) by [@lpsinger](https://github.com/lpsinger) 6 | 7 | ## 4.1.0 - 2020-01-31 8 | 9 | - Add Typescript declaration [#10](https://github.com/MoOx/react-topbar-progress-indicator/pull/10) by @komsitr 10 | 11 | ## 4.0.2 - 2019-09-30 12 | 13 | - Fix: avoid arrow function to improve browser compatibility 14 | 15 | ## 4.0.1 - 2019-08-16 16 | 17 | - Fix: use var instead of const/let for compatibility as this module is not transpiled 18 | 19 | ## 4.0.0 - 2019-08-16 20 | 21 | - Switch from a React class to a function with `useEffect()` (require React 16.8) 22 | 23 | ### Internal 24 | 25 | - No more babel, just vanilla JS (typed with flow annotations in comments) 26 | 27 | ## 3.0.0 - 2019-08-16 28 | 29 | - React 16.9.0 compat (replace `componentWillMount` by `componentDidMount`) [#5](https://github.com/MoOx/react-topbar-progress-indicator/issues/5) 30 | 31 | ### Internal 32 | 33 | - Test on node 8 & 10 34 | - Babel 6 -> 7 35 | - Test ava -> jest 36 | - Removed eslint & nyc on the codebase (unecessary considering the non complexity of the code of this component) 37 | - Added prettier 38 | 39 | ## 2.0.0 - 2016-04-01 40 | 41 | - react 16 compat 42 | - update props type via babel-plugin-flow-react-proptypes 43 | - use of babel-preset-env for transpilation instead of es2015 44 | 45 | ## 1.0.0 - 2016-04-01 46 | 47 | ✨ Initial release 48 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to make participation in our project and our 7 | community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and 9 | expression, level of experience, education, socio-economic status, nationality, 10 | personal appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | - Using welcoming and inclusive language 18 | - Being respectful of differing viewpoints and experiences 19 | - Gracefully accepting constructive criticism 20 | - Focusing on what is best for the community 21 | - Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | - The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | - Trolling, insulting/derogatory comments, and personal or political attacks 28 | - Public or private harassment 29 | - Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | - Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or reject 41 | comments, commits, code, wiki edits, issues, and other contributions that are 42 | not aligned to this Code of Conduct, or to ban temporarily or permanently any 43 | contributor for other behaviors that they deem inappropriate, threatening, 44 | offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies within all project spaces, and it also applies when 49 | an individual is representing the project or its community in public spaces. 50 | Examples of representing a project or community include using an official 51 | project e-mail address, posting via an official social media account, or acting 52 | as an appointed representative at an online or offline event. Representation of 53 | a project may be further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at . All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an 62 | incident. Further details of specific enforcement policies may be posted 63 | separately. 64 | 65 | Project maintainers who do not follow or enforce the Code of Conduct in good 66 | faith may face temporary or permanent repercussions as determined by other 67 | members of the project's leadership. 68 | 69 | ## Attribution 70 | 71 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 72 | version 1.4, available at 73 | https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 74 | 75 | [homepage]: https://www.contributor-covenant.org 76 | 77 | For answers to common questions about this code of conduct, see 78 | https://www.contributor-covenant.org/faq 79 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guide to `react-topbar-progress-indicator` 2 | 3 | 8 | 9 | We love your input! We want to make contributing to this project as easy and 10 | transparent as possible, whether it's: 11 | 12 | - Reporting a bug 13 | - Discussing the current state of the code 14 | - Submitting a fix 15 | - Proposing new features 16 | - Becoming a maintainer 17 | 18 | We use GitHub to 19 | 20 | - host code 21 | - track issues and feature requests 22 | - accept pull requests. 23 | - tag & publish release as well as pushing those to npm. 24 | 25 | ## Reporting bugs or requesting a feature 26 | 27 | We use GitHub issues to track public bugs or discuss about new features. Please 28 | write bug reports or feature requests with detail, background, and sample code 29 | if necessary. 30 | 31 | Just try to 32 | [open a new issue](https://github.com/MoOx/react-topbar-progress-indicator/issues/new/choose) 33 | & follow the instructions that should be prefilled for 34 | [bug](.github/ISSUE_TEMPLATE/bug.md) or 35 | [feature request](.github/ISSUE_TEMPLATE/feature.md). 36 | 37 | People _love_ thorough bug reports. Not even kidding. 38 | 39 | ## Fixing bugs & implementing features 40 | 41 | We use [Github flow](https://guides.github.com/introduction/flow/index.html), so 42 | most code changes happen through Pull Requests. 43 | 44 | [Pull Requests](https://help.github.com/en/articles/about-pull-requests) are the 45 | best way to propose changes to the codebase since they notify watchers & allow 46 | contributors to discuss about changes. 47 | 48 | We actively welcome your pull requests. 49 | 50 | To make a pull request, you need to: 51 | 52 | 1. [Fork the repo](https://help.github.com/en/articles/fork-a-repo) 53 | 2. Clone it and install dependencies 54 | 55 | ```console 56 | git clone https://github.com/MoOx/react-topbar-progress-indicator 57 | cd react-native 58 | yarn 59 | ``` 60 | 61 | 3. Create a local branch, from `master` (unless specified differently) 62 | 63 | ```console 64 | git checkout -b 65 | ``` 66 | 67 | 4. Add your changes! 68 | 69 | - If you've added code that should be tested, add tests. 70 | - If you've changed APIs, update the documentation. 71 | 72 | 5. Ensure the everything is still fine. 73 | 74 | ```console 75 | yarn test 76 | ``` 77 | 78 | 6. Commit & push your branch online 79 | 80 | ```console 81 | git add -A . 82 | git commit -m "Your commit message" 83 | ``` 84 | 85 | 7. [Create a pull request](https://help.github.com/en/articles/creating-a-pull-request) 86 | 87 | _If you are new to Git or GitHub, we encourage you to have a look to 88 | [makeapullrequest.com](http://makeapullrequest.com)._ 89 | 90 | ## Code styling 91 | 92 | Everything as been automated: as soon as you commit, everything should be 93 | automatically reformated if necessary (thanks to a transparent git hook) so we 94 | don't have to think about it! 95 | 96 | ## Licensing 97 | 98 | By contributing, you agree that your contributions will be licensed under our 99 | MIT License. 100 | 101 | When you submit code changes, your submissions are understood to be under the 102 | same [MIT License](./LICENSE) that covers the project. Feel free to contact the 103 | maintainers if that's a concern. 104 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 "MoOx" Maxime Thirouin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-topbar-progress-indicator 2 | 3 | [![Build Status](https://github.com/MoOx/react-topbar-progress-indicator/workflows/Build/badge.svg)](https://github.com/MoOx/react-topbar-progress-indicator/actions) 4 | [![Version](https://img.shields.io/npm/v/react-topbar-progress-indicator.svg)](https://github.com/MoOx/react-topbar-progress-indicator/blob/master/CHANGELOG.md) 5 | 6 | > `topbar` progress indicator as a React component 7 | 8 | Will simply `show()` and `hide()` [topbar](https://github.com/buunguyen/topbar) 9 | when the component is respectively mounted and unmounted. 10 | 11 | **Since topbar is a singleton, using `` multiples times will 12 | take this in consideration. This means that `hide()` will only be called when 13 | all `` have been unmounted.** 14 | 15 | For example, if you render 2 `` and unmount one (eg: you are doing 2 16 | async things and only once is done), `hide()` won't be called. 17 | You will need to have both instances unmounted. 18 | 19 | ## Installation 20 | 21 | ```console 22 | npm install react-topbar-progress-indicator 23 | ## or 24 | yarn add react-topbar-progress-indicator 25 | ``` 26 | 27 | ## Usage 28 | 29 | ```js 30 | import TopBarProgress from "react-topbar-progress-indicator"; 31 | 32 | TopBarProgress.config({ 33 | barColors: { 34 | "0": "#fff", 35 | "1.0": "#fff" 36 | }, 37 | shadowBlur: 5 38 | }); 39 | 40 | const YourThing = () => { 41 | return
{this.state.loading && }
; 42 | }; 43 | ``` 44 | 45 | ### Config 46 | 47 | Since `topbar` is a singleton, you should configure via `Topbar.config()`. 48 | 49 | #### `barThickness` (Integer, px) 50 | 51 | The progress bar thickness in `px` (default: 3). 52 | 53 | #### `barColors` (Object { progress: color }) 54 | 55 | Object of gradient color stops used to draw the progress bar. 56 | 57 | Example: 58 | 59 | ```js 60 | barColors: { 61 | "0": "#f00", 62 | "0.5": "#0f0", 63 | "1.0": "#00f", 64 | }, 65 | ``` 66 | 67 | #### `shadowBlur` 68 | 69 | Integer of the shadow blur in `px` (default: `10`). 70 | 71 | #### `shadowColor` 72 | 73 | String that represent the shadow color (hexa, default: `#000`). 74 | 75 | --- 76 | 77 | ## Changelog 78 | 79 | Check the [changelog](./CHANGELOG.md) for more informations about recent 80 | releases. 81 | You might also find [releases notes on GitHub](https://github.com/MoOx/react-topbar-progress-indicator/releases). 82 | 83 | ## Contribute 84 | 85 | _⇄ Pull requests and ★ Stars are always welcome._ 86 | 87 | Please read the [contribution guidelines](./CONTRIBUTING.md) before contributing. 88 | 89 | ## Code of Conduct 90 | 91 | We want the community to be friendly and respectful to each other. Please read 92 | [our full code of conduct](./CODE_OF_CONDUCT.md) so that you can understand what 93 | actions will and will not be tolerated. 94 | 95 | ## License 96 | 97 | [MIT](./LICENSE) 98 | 99 | ## Security contact information 100 | 101 | To report a security vulnerability, please use the 102 | [Tidelift security contact](https://tidelift.com/security). 103 | Tidelift will coordinate the fix and disclosure. 104 | -------------------------------------------------------------------------------- /interfaces/external-modules/topbar.js: -------------------------------------------------------------------------------- 1 | declare module "topbar" { 2 | declare module.exports: { 3 | show: () => void, 4 | hide: () => void, 5 | config: (?Object) => void 6 | }; 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-topbar-progress-indicator", 3 | "version": "4.1.1", 4 | "description": "topbar progress indicator React component", 5 | "keywords": [ 6 | "react", 7 | "topbar", 8 | "progress", 9 | "progressbar", 10 | "loading", 11 | "loader", 12 | "indicator" 13 | ], 14 | "author": "Maxime Thirouin", 15 | "license": "MIT", 16 | "repository": "https://github.com/MoOx/react-topbar-progress-indicator.git", 17 | "main": "src/index.js", 18 | "types": "src/index.d.ts", 19 | "dependencies": { 20 | "topbar": "^0.1.3" 21 | }, 22 | "devDependencies": { 23 | "flow-bin": "^0.105.2", 24 | "husky": "^3.0.3", 25 | "jest": "^28.1.3", 26 | "npmpub": "^5.0.0", 27 | "prettier": "^1.18.2", 28 | "pretty-quick": "^1.11.1", 29 | "react": "^16.9.0", 30 | "react-dom": "^16.9.0", 31 | "react-test-renderer": "^16.9.0" 32 | }, 33 | "peerDependencies": { 34 | "react": ">=16.8.0" 35 | }, 36 | "scripts": { 37 | "test": "flow src && jest src", 38 | "release": "npmpub" 39 | }, 40 | "husky": { 41 | "hooks": { 42 | "pre-commit": "pretty-quick --staged" 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/__tests__/index.js: -------------------------------------------------------------------------------- 1 | const React = require("react"); 2 | const renderer = require("react-test-renderer"); 3 | 4 | const ReactTopBar = require("../index"); 5 | 6 | test("ReactTopBar can show topbar", () => { 7 | let count = 0; 8 | 9 | const topbar = { 10 | show() { 11 | count++; 12 | }, 13 | hide() {} 14 | }; 15 | 16 | let root; 17 | renderer.act(() => { 18 | root = renderer.create( 19 | React.createElement(ReactTopBar, { topbar: topbar }) 20 | ); 21 | }); 22 | renderer.act(() => { 23 | root.unmount(); 24 | }); 25 | 26 | expect(count).toBe(1); 27 | }); 28 | 29 | test("ReactTopBar can hide topbar", () => { 30 | let count = 0; 31 | 32 | const topbar = { 33 | show() {}, 34 | hide() { 35 | count++; 36 | } 37 | }; 38 | 39 | let root; 40 | renderer.act(() => { 41 | root = renderer.create( 42 | React.createElement(ReactTopBar, { topbar: topbar }) 43 | ); 44 | }); 45 | renderer.act(() => { 46 | root.unmount(); 47 | }); 48 | 49 | expect(count).toBe(1); 50 | }); 51 | 52 | test("ReactTopBar can show/hide topbar", () => { 53 | let count = 0; 54 | 55 | const topbar = { 56 | show() { 57 | count++; 58 | }, 59 | hide() { 60 | count++; 61 | } 62 | }; 63 | 64 | let root; 65 | renderer.act(() => { 66 | root = renderer.create( 67 | React.createElement(ReactTopBar, { topbar: topbar }) 68 | ); 69 | }); 70 | renderer.act(() => { 71 | root.unmount(); 72 | }); 73 | 74 | expect(count).toBe(2); 75 | }); 76 | 77 | test("ReactTopBar can show/hide topbar even with multiples call, but once", () => { 78 | let count = 0; 79 | 80 | const topbar = { 81 | show() { 82 | count++; 83 | }, 84 | hide() { 85 | count++; 86 | } 87 | }; 88 | 89 | let root; 90 | renderer.act(() => { 91 | root = renderer.create( 92 | React.createElement(ReactTopBar, { topbar: topbar }) 93 | ); 94 | }); 95 | let root2; 96 | renderer.act(() => { 97 | root2 = renderer.create( 98 | React.createElement(ReactTopBar, { topbar: topbar }) 99 | ); 100 | }); 101 | 102 | renderer.act(() => { 103 | root.unmount(); 104 | }); 105 | renderer.act(() => { 106 | root2.unmount(); 107 | }); 108 | 109 | expect(count).toBe(2); 110 | }); 111 | 112 | test("ReactTopBar exposes topbar config function", () => { 113 | expect(typeof ReactTopBar.config).toBe("function"); 114 | }); 115 | -------------------------------------------------------------------------------- /src/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import * as React from "react"; 4 | 5 | export interface TopBarConfig { 6 | barThickness?: number; 7 | barColors?: any; 8 | shadowBlur?: number; 9 | shadowColor?: string; 10 | } 11 | 12 | export default class TopBarProgress extends React.Component { 13 | static config(config: TopBarConfig): void; 14 | } 15 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | var React = require("react"); 4 | 5 | // topbar require window, so here is an universal workaround 6 | var topbar = 7 | typeof window === "undefined" 8 | ? { 9 | show: function() {}, 10 | hide: function() {}, 11 | config: function() {} 12 | } 13 | : require("topbar"); 14 | 15 | var semaphore /*: number*/ = 0; 16 | 17 | /*:: 18 | type Props = { 19 | topbar?: typeof topbar 20 | }; 21 | */ 22 | 23 | var getTopBar = function(props /*: Props*/) /*: typeof topbar*/ { 24 | return props.topbar || topbar; 25 | }; 26 | 27 | function TopBar(props /*: Props */) { 28 | React.useEffect(function() { 29 | if (semaphore === 0) { 30 | getTopBar(props).show(); 31 | } 32 | semaphore++; 33 | 34 | return function() { 35 | semaphore--; 36 | if (semaphore === 0) { 37 | getTopBar(props).hide(); 38 | } 39 | }; 40 | }, []); 41 | 42 | return null; 43 | } 44 | 45 | TopBar.config = topbar.config; 46 | 47 | module.exports = TopBar; 48 | --------------------------------------------------------------------------------