react-alp-loading-bar 5.1.2 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [5.2.0](https://github.com/christophehurpeau/alp/compare/react-alp-loading-bar@5.1.2...react-alp-loading-bar@5.2.0) (2023-03-19)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* update dev dependencies ([9d7e24f](https://github.com/christophehurpeau/alp/commit/9d7e24f8e504d47feae64ca618dc2b3a69babc38))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [5.1.2](https://github.com/christophehurpeau/alp/compare/react-alp-loading-bar@5.1.1...react-alp-loading-bar@5.1.2) (2023-01-31)
|
|
7
16
|
|
|
8
17
|
**Note:** Version bump only for package react-alp-loading-bar
|
|
@@ -15,7 +15,7 @@ interface WebsocketInterface {
|
|
|
15
15
|
on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;
|
|
16
16
|
}
|
|
17
17
|
export default class LoadingBar extends PureComponent<LoadingBarProps, LoadingBarState> {
|
|
18
|
-
static contextType: import("react").Context<import("
|
|
18
|
+
static contextType: import("react").Context<import("alp-types").Context>;
|
|
19
19
|
state: {
|
|
20
20
|
loading: boolean;
|
|
21
21
|
hidden: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAoCtC,UAAU,eAAe;IACvB,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAChE;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,kBAAkB;IAC1B,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,aAAa,CACnD,eAAe,EACf,eAAe,CAChB;IACC,MAAM,CAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAoCtC,UAAU,eAAe;IACvB,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAChE;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,kBAAkB;IAC1B,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,aAAa,CACnD,eAAe,EACf,eAAe,CAChB;IACC,MAAM,CAAC,WAAW,uDAAmB;IAErC,KAAK;;;;MAIH;IAEF,cAAc,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAE/C,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAE7C,cAAc,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAE/C,aAAa,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;IAE9C,iBAAiB,IAAI,IAAI;IAiBzB,kBAAkB,CAChB,SAAS,EAAE,eAAe,EAC1B,SAAS,EAAE,eAAe,GACzB,IAAI;IAUP,oBAAoB,IAAI,IAAI;IAO5B,YAAY,IAAI,kBAAkB;IAKlC,OAAO,CAAC,OAAO;IAgBf,OAAO,CAAC,OAAO;IAkBf,MAAM,IAAI,YAAY;CAmBvB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-browser.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n <Progress\n type=\"line\"\n status=\"active\"\n percent={progress}\n showInfo={false}\n />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n if (percent < 60) return percent + random() * 10 + 5;\n if (percent < 70) return percent + random() * 10 + 3;\n else if (percent < 80) return percent + random() + 5;\n else if (percent < 90) return percent + random() + 1;\n else if (percent < 95) return percent + 0.1;\n else return percent;\n};\n\ninterface LoadingBarProps {\n LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n loading: boolean;\n hidden: boolean;\n progress: number;\n}\n\ninterface WebsocketInterface {\n isConnected: () => boolean;\n on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n LoadingBarProps,\n LoadingBarState\n> {\n static contextType = ReactAlpContext;\n\n state = {\n loading: true,\n hidden: true,\n progress: 1,\n };\n\n fadeOffTimeout?: ReturnType<typeof setTimeout>;\n\n resetTimeout?: ReturnType<typeof setTimeout>;\n\n first20Timeout?: ReturnType<typeof setTimeout>;\n\n progressTimer?: ReturnType<typeof setTimeout>;\n\n componentDidMount(): void {\n const websocket = this.getWebsocket();\n if (websocket.isConnected()) {\n this.setState((prevState) => ({\n loading: false,\n progress: 100,\n hidden: prevState.hidden || prevState.progress === 100,\n }));\n }\n websocket.on('connect', () => {\n this.setState({ loading: false });\n });\n websocket.on('disconnect', () => {\n this.setState({ loading: true, progress: 1, hidden: false });\n });\n }\n\n componentDidUpdate(\n prevProps: LoadingBarProps,\n prevState: LoadingBarState,\n ): void {\n if (this.state.loading !== prevState.loading) {\n if (this.state.loading) {\n this.showBar();\n } else {\n this.hideBar();\n }\n }\n }\n\n componentWillUnmount(): void {\n if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n if (this.resetTimeout) clearTimeout(this.resetTimeout);\n if (this.first20Timeout) clearTimeout(this.first20Timeout);\n if (this.progressTimer) clearInterval(this.progressTimer);\n }\n\n getWebsocket(): WebsocketInterface {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n return (this.context as any).app.websocket;\n }\n\n private showBar(): void {\n if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n if (this.resetTimeout) clearTimeout(this.resetTimeout);\n\n this.first20Timeout = setTimeout(() => {\n this.setState({ progress: 20 });\n }, 100);\n\n this.progressTimer = setInterval(() => {\n this.setState((prevState) => {\n const newValue = calculatePercent(prevState.progress);\n return { progress: newValue };\n });\n }, 500);\n }\n\n private hideBar(): void {\n if (this.first20Timeout) clearTimeout(this.first20Timeout);\n if (this.progressTimer) clearInterval(this.progressTimer);\n\n this.fadeOffTimeout = setTimeout(() => {\n this.setState({\n progress: 100,\n });\n }, 500);\n\n this.resetTimeout = setTimeout(() => {\n this.setState({\n hidden: true,\n progress: 1,\n });\n }, 1000);\n }\n\n render(): ReactElement {\n const LoadingBarComponent = this.props.LoadingBarComponent;\n\n return (\n <div\n hidden={this.state.hidden}\n style={{\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex: 4,\n pointerEvents: 'none',\n }}\n >\n <LoadingBarComponent progress={this.state.progress} />\n </div>\n );\n }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","fadeOffTimeout","clearTimeout","resetTimeout","first20Timeout","progressTimer","clearInterval","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","_jsx","position","top","left","right","zIndex","pointerEvents","PureComponent","contextType","ReactAlpContext"],"mappings":";;;;;AAmBA,IAAMA,MAAM,GAAG,SAATA,
|
|
1
|
+
{"version":3,"file":"index-browser.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n <Progress\n type=\"line\"\n status=\"active\"\n percent={progress}\n showInfo={false}\n />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n if (percent < 60) return percent + random() * 10 + 5;\n if (percent < 70) return percent + random() * 10 + 3;\n else if (percent < 80) return percent + random() + 5;\n else if (percent < 90) return percent + random() + 1;\n else if (percent < 95) return percent + 0.1;\n else return percent;\n};\n\ninterface LoadingBarProps {\n LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n loading: boolean;\n hidden: boolean;\n progress: number;\n}\n\ninterface WebsocketInterface {\n isConnected: () => boolean;\n on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n LoadingBarProps,\n LoadingBarState\n> {\n static contextType = ReactAlpContext;\n\n state = {\n loading: true,\n hidden: true,\n progress: 1,\n };\n\n fadeOffTimeout?: ReturnType<typeof setTimeout>;\n\n resetTimeout?: ReturnType<typeof setTimeout>;\n\n first20Timeout?: ReturnType<typeof setTimeout>;\n\n progressTimer?: ReturnType<typeof setTimeout>;\n\n componentDidMount(): void {\n const websocket = this.getWebsocket();\n if (websocket.isConnected()) {\n this.setState((prevState) => ({\n loading: false,\n progress: 100,\n hidden: prevState.hidden || prevState.progress === 100,\n }));\n }\n websocket.on('connect', () => {\n this.setState({ loading: false });\n });\n websocket.on('disconnect', () => {\n this.setState({ loading: true, progress: 1, hidden: false });\n });\n }\n\n componentDidUpdate(\n prevProps: LoadingBarProps,\n prevState: LoadingBarState,\n ): void {\n if (this.state.loading !== prevState.loading) {\n if (this.state.loading) {\n this.showBar();\n } else {\n this.hideBar();\n }\n }\n }\n\n componentWillUnmount(): void {\n if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n if (this.resetTimeout) clearTimeout(this.resetTimeout);\n if (this.first20Timeout) clearTimeout(this.first20Timeout);\n if (this.progressTimer) clearInterval(this.progressTimer);\n }\n\n getWebsocket(): WebsocketInterface {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n return (this.context as any).app.websocket;\n }\n\n private showBar(): void {\n if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n if (this.resetTimeout) clearTimeout(this.resetTimeout);\n\n this.first20Timeout = setTimeout(() => {\n this.setState({ progress: 20 });\n }, 100);\n\n this.progressTimer = setInterval(() => {\n this.setState((prevState) => {\n const newValue = calculatePercent(prevState.progress);\n return { progress: newValue };\n });\n }, 500);\n }\n\n private hideBar(): void {\n if (this.first20Timeout) clearTimeout(this.first20Timeout);\n if (this.progressTimer) clearInterval(this.progressTimer);\n\n this.fadeOffTimeout = setTimeout(() => {\n this.setState({\n progress: 100,\n });\n }, 500);\n\n this.resetTimeout = setTimeout(() => {\n this.setState({\n hidden: true,\n progress: 1,\n });\n }, 1000);\n }\n\n render(): ReactElement {\n const LoadingBarComponent = this.props.LoadingBarComponent;\n\n return (\n <div\n hidden={this.state.hidden}\n style={{\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex: 4,\n pointerEvents: 'none',\n }}\n >\n <LoadingBarComponent progress={this.state.progress} />\n </div>\n );\n }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","_PureComponent","_inheritsLoose","_this","_len","args","_key","arguments","length","Array","call","apply","concat","state","loading","hidden","progress","_proto","prototype","componentDidMount","_this2","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","fadeOffTimeout","clearTimeout","resetTimeout","first20Timeout","progressTimer","clearInterval","context","app","_this3","setTimeout","setInterval","newValue","_this4","render","LoadingBarComponent","props","_jsx","style","position","top","left","right","zIndex","pointerEvents","children","PureComponent","contextType","ReactAlpContext"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-browsermodern.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n <Progress\n type=\"line\"\n status=\"active\"\n percent={progress}\n showInfo={false}\n />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n if (percent < 60) return percent + random() * 10 + 5;\n if (percent < 70) return percent + random() * 10 + 3;\n else if (percent < 80) return percent + random() + 5;\n else if (percent < 90) return percent + random() + 1;\n else if (percent < 95) return percent + 0.1;\n else return percent;\n};\n\ninterface LoadingBarProps {\n LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n loading: boolean;\n hidden: boolean;\n progress: number;\n}\n\ninterface WebsocketInterface {\n isConnected: () => boolean;\n on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n LoadingBarProps,\n LoadingBarState\n> {\n static contextType = ReactAlpContext;\n\n state = {\n loading: true,\n hidden: true,\n progress: 1,\n };\n\n fadeOffTimeout?: ReturnType<typeof setTimeout>;\n\n resetTimeout?: ReturnType<typeof setTimeout>;\n\n first20Timeout?: ReturnType<typeof setTimeout>;\n\n progressTimer?: ReturnType<typeof setTimeout>;\n\n componentDidMount(): void {\n const websocket = this.getWebsocket();\n if (websocket.isConnected()) {\n this.setState((prevState) => ({\n loading: false,\n progress: 100,\n hidden: prevState.hidden || prevState.progress === 100,\n }));\n }\n websocket.on('connect', () => {\n this.setState({ loading: false });\n });\n websocket.on('disconnect', () => {\n this.setState({ loading: true, progress: 1, hidden: false });\n });\n }\n\n componentDidUpdate(\n prevProps: LoadingBarProps,\n prevState: LoadingBarState,\n ): void {\n if (this.state.loading !== prevState.loading) {\n if (this.state.loading) {\n this.showBar();\n } else {\n this.hideBar();\n }\n }\n }\n\n componentWillUnmount(): void {\n if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n if (this.resetTimeout) clearTimeout(this.resetTimeout);\n if (this.first20Timeout) clearTimeout(this.first20Timeout);\n if (this.progressTimer) clearInterval(this.progressTimer);\n }\n\n getWebsocket(): WebsocketInterface {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n return (this.context as any).app.websocket;\n }\n\n private showBar(): void {\n if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n if (this.resetTimeout) clearTimeout(this.resetTimeout);\n\n this.first20Timeout = setTimeout(() => {\n this.setState({ progress: 20 });\n }, 100);\n\n this.progressTimer = setInterval(() => {\n this.setState((prevState) => {\n const newValue = calculatePercent(prevState.progress);\n return { progress: newValue };\n });\n }, 500);\n }\n\n private hideBar(): void {\n if (this.first20Timeout) clearTimeout(this.first20Timeout);\n if (this.progressTimer) clearInterval(this.progressTimer);\n\n this.fadeOffTimeout = setTimeout(() => {\n this.setState({\n progress: 100,\n });\n }, 500);\n\n this.resetTimeout = setTimeout(() => {\n this.setState({\n hidden: true,\n progress: 1,\n });\n }, 1000);\n }\n\n render(): ReactElement {\n const LoadingBarComponent = this.props.LoadingBarComponent;\n\n return (\n <div\n hidden={this.state.hidden}\n style={{\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex: 4,\n pointerEvents: 'none',\n }}\n >\n <LoadingBarComponent progress={this.state.progress} />\n </div>\n );\n }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","PureComponent","contextType","ReactAlpContext","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","fadeOffTimeout","clearTimeout","resetTimeout","first20Timeout","progressTimer","clearInterval","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","_jsx","position","top","left","right","zIndex","pointerEvents"],"mappings":";;;;AAmBA,MAAMA,MAAM,
|
|
1
|
+
{"version":3,"file":"index-browsermodern.es.js","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n <Progress\n type=\"line\"\n status=\"active\"\n percent={progress}\n showInfo={false}\n />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n if (percent < 60) return percent + random() * 10 + 5;\n if (percent < 70) return percent + random() * 10 + 3;\n else if (percent < 80) return percent + random() + 5;\n else if (percent < 90) return percent + random() + 1;\n else if (percent < 95) return percent + 0.1;\n else return percent;\n};\n\ninterface LoadingBarProps {\n LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n loading: boolean;\n hidden: boolean;\n progress: number;\n}\n\ninterface WebsocketInterface {\n isConnected: () => boolean;\n on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n LoadingBarProps,\n LoadingBarState\n> {\n static contextType = ReactAlpContext;\n\n state = {\n loading: true,\n hidden: true,\n progress: 1,\n };\n\n fadeOffTimeout?: ReturnType<typeof setTimeout>;\n\n resetTimeout?: ReturnType<typeof setTimeout>;\n\n first20Timeout?: ReturnType<typeof setTimeout>;\n\n progressTimer?: ReturnType<typeof setTimeout>;\n\n componentDidMount(): void {\n const websocket = this.getWebsocket();\n if (websocket.isConnected()) {\n this.setState((prevState) => ({\n loading: false,\n progress: 100,\n hidden: prevState.hidden || prevState.progress === 100,\n }));\n }\n websocket.on('connect', () => {\n this.setState({ loading: false });\n });\n websocket.on('disconnect', () => {\n this.setState({ loading: true, progress: 1, hidden: false });\n });\n }\n\n componentDidUpdate(\n prevProps: LoadingBarProps,\n prevState: LoadingBarState,\n ): void {\n if (this.state.loading !== prevState.loading) {\n if (this.state.loading) {\n this.showBar();\n } else {\n this.hideBar();\n }\n }\n }\n\n componentWillUnmount(): void {\n if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n if (this.resetTimeout) clearTimeout(this.resetTimeout);\n if (this.first20Timeout) clearTimeout(this.first20Timeout);\n if (this.progressTimer) clearInterval(this.progressTimer);\n }\n\n getWebsocket(): WebsocketInterface {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n return (this.context as any).app.websocket;\n }\n\n private showBar(): void {\n if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n if (this.resetTimeout) clearTimeout(this.resetTimeout);\n\n this.first20Timeout = setTimeout(() => {\n this.setState({ progress: 20 });\n }, 100);\n\n this.progressTimer = setInterval(() => {\n this.setState((prevState) => {\n const newValue = calculatePercent(prevState.progress);\n return { progress: newValue };\n });\n }, 500);\n }\n\n private hideBar(): void {\n if (this.first20Timeout) clearTimeout(this.first20Timeout);\n if (this.progressTimer) clearInterval(this.progressTimer);\n\n this.fadeOffTimeout = setTimeout(() => {\n this.setState({\n progress: 100,\n });\n }, 500);\n\n this.resetTimeout = setTimeout(() => {\n this.setState({\n hidden: true,\n progress: 1,\n });\n }, 1000);\n }\n\n render(): ReactElement {\n const LoadingBarComponent = this.props.LoadingBarComponent;\n\n return (\n <div\n hidden={this.state.hidden}\n style={{\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex: 4,\n pointerEvents: 'none',\n }}\n >\n <LoadingBarComponent progress={this.state.progress} />\n </div>\n );\n }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","PureComponent","contextType","ReactAlpContext","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","fadeOffTimeout","clearTimeout","resetTimeout","first20Timeout","progressTimer","clearInterval","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","_jsx","style","position","top","left","right","zIndex","pointerEvents","children"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-node16.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n <Progress\n type=\"line\"\n status=\"active\"\n percent={progress}\n showInfo={false}\n />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n if (percent < 60) return percent + random() * 10 + 5;\n if (percent < 70) return percent + random() * 10 + 3;\n else if (percent < 80) return percent + random() + 5;\n else if (percent < 90) return percent + random() + 1;\n else if (percent < 95) return percent + 0.1;\n else return percent;\n};\n\ninterface LoadingBarProps {\n LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n loading: boolean;\n hidden: boolean;\n progress: number;\n}\n\ninterface WebsocketInterface {\n isConnected: () => boolean;\n on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n LoadingBarProps,\n LoadingBarState\n> {\n static contextType = ReactAlpContext;\n\n state = {\n loading: true,\n hidden: true,\n progress: 1,\n };\n\n fadeOffTimeout?: ReturnType<typeof setTimeout>;\n\n resetTimeout?: ReturnType<typeof setTimeout>;\n\n first20Timeout?: ReturnType<typeof setTimeout>;\n\n progressTimer?: ReturnType<typeof setTimeout>;\n\n componentDidMount(): void {\n const websocket = this.getWebsocket();\n if (websocket.isConnected()) {\n this.setState((prevState) => ({\n loading: false,\n progress: 100,\n hidden: prevState.hidden || prevState.progress === 100,\n }));\n }\n websocket.on('connect', () => {\n this.setState({ loading: false });\n });\n websocket.on('disconnect', () => {\n this.setState({ loading: true, progress: 1, hidden: false });\n });\n }\n\n componentDidUpdate(\n prevProps: LoadingBarProps,\n prevState: LoadingBarState,\n ): void {\n if (this.state.loading !== prevState.loading) {\n if (this.state.loading) {\n this.showBar();\n } else {\n this.hideBar();\n }\n }\n }\n\n componentWillUnmount(): void {\n if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n if (this.resetTimeout) clearTimeout(this.resetTimeout);\n if (this.first20Timeout) clearTimeout(this.first20Timeout);\n if (this.progressTimer) clearInterval(this.progressTimer);\n }\n\n getWebsocket(): WebsocketInterface {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n return (this.context as any).app.websocket;\n }\n\n private showBar(): void {\n if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n if (this.resetTimeout) clearTimeout(this.resetTimeout);\n\n this.first20Timeout = setTimeout(() => {\n this.setState({ progress: 20 });\n }, 100);\n\n this.progressTimer = setInterval(() => {\n this.setState((prevState) => {\n const newValue = calculatePercent(prevState.progress);\n return { progress: newValue };\n });\n }, 500);\n }\n\n private hideBar(): void {\n if (this.first20Timeout) clearTimeout(this.first20Timeout);\n if (this.progressTimer) clearInterval(this.progressTimer);\n\n this.fadeOffTimeout = setTimeout(() => {\n this.setState({\n progress: 100,\n });\n }, 500);\n\n this.resetTimeout = setTimeout(() => {\n this.setState({\n hidden: true,\n progress: 1,\n });\n }, 1000);\n }\n\n render(): ReactElement {\n const LoadingBarComponent = this.props.LoadingBarComponent;\n\n return (\n <div\n hidden={this.state.hidden}\n style={{\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex: 4,\n pointerEvents: 'none',\n }}\n >\n <LoadingBarComponent progress={this.state.progress} />\n </div>\n );\n }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","PureComponent","contextType","ReactAlpContext","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","fadeOffTimeout","clearTimeout","resetTimeout","first20Timeout","progressTimer","clearInterval","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","_jsx","position","top","left","right","zIndex","pointerEvents"],"mappings":";;;;AAmBA,MAAMA,MAAM,
|
|
1
|
+
{"version":3,"file":"index-node16.mjs","sources":["../src/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { PureComponent } from 'react';\nimport ReactAlpContext from 'react-alp-context';\n\n/*\nExample with antd:\nimport { Progress } from 'antd';\n\nconst LoadingBarComponent = ({ progress }) => (\n <Progress\n type=\"line\"\n status=\"active\"\n percent={progress}\n showInfo={false}\n />\n);\n*/\n\n/* number between 0 and 1 */\nconst random = (): number => Math.ceil(Math.random() * 100) / 100;\n\n/**\n * around:\n * at 100ms 20%\n * at 1s 40%\n * at 2s 60%\n * at 3s 80%\n */\nconst calculatePercent = (percent: number): number => {\n if (percent < 60) return percent + random() * 10 + 5;\n if (percent < 70) return percent + random() * 10 + 3;\n else if (percent < 80) return percent + random() + 5;\n else if (percent < 90) return percent + random() + 1;\n else if (percent < 95) return percent + 0.1;\n else return percent;\n};\n\ninterface LoadingBarProps {\n LoadingBarComponent: React.ComponentType<{ progress: number }>;\n}\n\ninterface LoadingBarState {\n loading: boolean;\n hidden: boolean;\n progress: number;\n}\n\ninterface WebsocketInterface {\n isConnected: () => boolean;\n on: (event: 'connect' | 'disconnect', callback: () => unknown) => void;\n}\n\nexport default class LoadingBar extends PureComponent<\n LoadingBarProps,\n LoadingBarState\n> {\n static contextType = ReactAlpContext;\n\n state = {\n loading: true,\n hidden: true,\n progress: 1,\n };\n\n fadeOffTimeout?: ReturnType<typeof setTimeout>;\n\n resetTimeout?: ReturnType<typeof setTimeout>;\n\n first20Timeout?: ReturnType<typeof setTimeout>;\n\n progressTimer?: ReturnType<typeof setTimeout>;\n\n componentDidMount(): void {\n const websocket = this.getWebsocket();\n if (websocket.isConnected()) {\n this.setState((prevState) => ({\n loading: false,\n progress: 100,\n hidden: prevState.hidden || prevState.progress === 100,\n }));\n }\n websocket.on('connect', () => {\n this.setState({ loading: false });\n });\n websocket.on('disconnect', () => {\n this.setState({ loading: true, progress: 1, hidden: false });\n });\n }\n\n componentDidUpdate(\n prevProps: LoadingBarProps,\n prevState: LoadingBarState,\n ): void {\n if (this.state.loading !== prevState.loading) {\n if (this.state.loading) {\n this.showBar();\n } else {\n this.hideBar();\n }\n }\n }\n\n componentWillUnmount(): void {\n if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n if (this.resetTimeout) clearTimeout(this.resetTimeout);\n if (this.first20Timeout) clearTimeout(this.first20Timeout);\n if (this.progressTimer) clearInterval(this.progressTimer);\n }\n\n getWebsocket(): WebsocketInterface {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return\n return (this.context as any).app.websocket;\n }\n\n private showBar(): void {\n if (this.fadeOffTimeout) clearTimeout(this.fadeOffTimeout);\n if (this.resetTimeout) clearTimeout(this.resetTimeout);\n\n this.first20Timeout = setTimeout(() => {\n this.setState({ progress: 20 });\n }, 100);\n\n this.progressTimer = setInterval(() => {\n this.setState((prevState) => {\n const newValue = calculatePercent(prevState.progress);\n return { progress: newValue };\n });\n }, 500);\n }\n\n private hideBar(): void {\n if (this.first20Timeout) clearTimeout(this.first20Timeout);\n if (this.progressTimer) clearInterval(this.progressTimer);\n\n this.fadeOffTimeout = setTimeout(() => {\n this.setState({\n progress: 100,\n });\n }, 500);\n\n this.resetTimeout = setTimeout(() => {\n this.setState({\n hidden: true,\n progress: 1,\n });\n }, 1000);\n }\n\n render(): ReactElement {\n const LoadingBarComponent = this.props.LoadingBarComponent;\n\n return (\n <div\n hidden={this.state.hidden}\n style={{\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n zIndex: 4,\n pointerEvents: 'none',\n }}\n >\n <LoadingBarComponent progress={this.state.progress} />\n </div>\n );\n }\n}\n"],"names":["random","Math","ceil","calculatePercent","percent","LoadingBar","PureComponent","contextType","ReactAlpContext","state","loading","hidden","progress","componentDidMount","websocket","getWebsocket","isConnected","setState","prevState","on","componentDidUpdate","prevProps","showBar","hideBar","componentWillUnmount","fadeOffTimeout","clearTimeout","resetTimeout","first20Timeout","progressTimer","clearInterval","context","app","setTimeout","setInterval","newValue","render","LoadingBarComponent","props","_jsx","style","position","top","left","right","zIndex","pointerEvents","children"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-alp-loading-bar",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.2.0",
|
|
4
4
|
"description": "loading bar",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Christophe Hurpeau <christophe@hurpeau.com> (https://christophe.hurpeau.com)",
|
|
@@ -15,13 +15,15 @@
|
|
|
15
15
|
"engines": {
|
|
16
16
|
"node": ">=16.0.0"
|
|
17
17
|
},
|
|
18
|
-
"browserslist":
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
"browserslist": {
|
|
19
|
+
"production": [
|
|
20
|
+
"defaults",
|
|
21
|
+
"> 0.2%",
|
|
22
|
+
"not ie < 12",
|
|
23
|
+
"not safari < 10",
|
|
24
|
+
"not ios_saf < 10"
|
|
25
|
+
]
|
|
26
|
+
},
|
|
25
27
|
"main": "./dist/index-node16.mjs",
|
|
26
28
|
"types": "./dist/definitions/index.d.ts",
|
|
27
29
|
"module": "./dist/index-browser.es.js",
|
|
@@ -74,18 +76,17 @@
|
|
|
74
76
|
"react": "^18.1.0"
|
|
75
77
|
},
|
|
76
78
|
"dependencies": {
|
|
77
|
-
"@babel/runtime": "^7.
|
|
79
|
+
"@babel/runtime": "^7.21.0",
|
|
78
80
|
"alp-types": "3.1.0",
|
|
79
|
-
"react-alp-context": "5.
|
|
81
|
+
"react-alp-context": "5.2.0"
|
|
80
82
|
},
|
|
81
83
|
"devDependencies": {
|
|
82
|
-
"@babel/core": "7.
|
|
84
|
+
"@babel/core": "7.21.3",
|
|
83
85
|
"@babel/preset-env": "7.20.2",
|
|
84
86
|
"@babel/preset-react": "7.18.6",
|
|
85
|
-
"babel
|
|
86
|
-
"pob-babel": "35.5.0",
|
|
87
|
+
"pob-babel": "35.6.2",
|
|
87
88
|
"react": "18.2.0",
|
|
88
89
|
"typescript": "4.9.5"
|
|
89
90
|
},
|
|
90
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "f7dfa98e33968879e3b16541652a316e92782259"
|
|
91
92
|
}
|