From 9d20ce6daed1c9d93de199fbaab2a7d08c3bc8ff Mon Sep 17 00:00:00 2001 From: Shashwat Dubey Date: Sun, 15 Sep 2024 20:11:31 +0530 Subject: [PATCH 1/2] Added "spinnerPosition" prop to Spinner component --- src/index.tsx | 42 ++++++++++++++++++++++++++++++++++-------- src/pages.tsx | 23 ++++++++++++++++++++++- 2 files changed, 56 insertions(+), 9 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 7dce0a8..1320534 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -45,6 +45,11 @@ export type NextTopLoaderProps = { * @default true */ showSpinner?: boolean; + /** + * To change the corner position of the spinner. (top-left, top-right, bottom-left, bottom-right) + * @default "top-right" + */ + spinnerPosition?: string; /** * Animation settings using easing (a CSS easing string). * @default "ease" @@ -95,6 +100,7 @@ const NextTopLoader = ({ color: propColor, height: propHeight, showSpinner, + spinnerPosition, crawl, crawlSpeed, initialPosition, @@ -116,19 +122,38 @@ const NextTopLoader = ({ !shadow && shadow !== undefined ? '' : shadow - ? `box-shadow:${shadow}` - : `box-shadow:0 0 10px ${color},0 0 5px ${color}`; + ? `box-shadow:${shadow}` + : `box-shadow:0 0 10px ${color},0 0 5px ${color}`; // Check if to show at bottom const positionStyle = showAtBottom ? 'bottom: 0;' : 'top: 0;'; - const spinnerPositionStyle = showAtBottom ? 'bottom: 15px;' : 'top: 15px;'; + + // Setting the corner position of the spinner + let spinnerPositionStyle; + switch (spinnerPosition) { + case 'top-right': + spinnerPositionStyle = 'top: 15px; right: 15px;'; + break; + case 'top-left': + spinnerPositionStyle = 'top: 15px; left: 15px;'; + break; + case 'bottom-right': + spinnerPositionStyle = 'bottom: 15px; right: 15px;'; + break; + case 'bottom-left': + spinnerPositionStyle = 'bottom: 15px; left: 15px;'; + break; + default: + spinnerPositionStyle = 'top: 15px; right: 15px;'; + break; + } /** * CSS Styles for the NextTopLoader */ const styles = ( ); @@ -288,10 +313,10 @@ const NextTopLoader = ({ })((window as Window).history); /** - * Complete TopLoader Progress on replacing current entry of history stack - * @param {History} - * @returns {void} - */ + * Complete TopLoader Progress on replacing current entry of history stack + * @param {History} + * @returns {void} + */ ((history: History): void => { const replaceState = history.replaceState; history.replaceState = (...args) => { @@ -335,6 +360,7 @@ NextTopLoader.propTypes = { color: PropTypes.string, height: PropTypes.number, showSpinner: PropTypes.bool, + spinnerPosition: PropTypes.string, crawl: PropTypes.bool, crawlSpeed: PropTypes.number, initialPosition: PropTypes.number, diff --git a/src/pages.tsx b/src/pages.tsx index 6d69431..3b0f823 100644 --- a/src/pages.tsx +++ b/src/pages.tsx @@ -13,6 +13,7 @@ export const PagesTopLoader = ({ color: propColor, height: propHeight, showSpinner, + spinnerPosition, crawl, crawlSpeed, initialPosition, @@ -39,7 +40,26 @@ export const PagesTopLoader = ({ // Check if to show at bottom const positionStyle = showAtBottom ? 'bottom: 0;' : 'top: 0;'; - const spinnerPositionStyle = showAtBottom ? 'bottom: 15px;' : 'top: 15px;'; + + // Setting the corner position of the spinner + let spinnerPositionStyle; + switch (spinnerPosition) { + case 'top-right': + spinnerPositionStyle = 'top: 15px; right: 15px;'; + break; + case 'top-left': + spinnerPositionStyle = 'top: 15px; left: 15px;'; + break; + case 'bottom-right': + spinnerPositionStyle = 'bottom: 15px; right: 15px;'; + break; + case 'bottom-left': + spinnerPositionStyle = 'bottom: 15px; left: 15px;'; + break; + default: + spinnerPositionStyle = 'top: 15px; right: 15px;'; + break; + } /** * CSS Styles for the NextTopLoader @@ -85,6 +105,7 @@ PagesTopLoader.propTypes = { color: PropTypes.string, height: PropTypes.number, showSpinner: PropTypes.bool, + spinnerPosition: PropTypes.string, crawl: PropTypes.bool, crawlSpeed: PropTypes.number, initialPosition: PropTypes.number, From f7a15fe2ace3f19b42fee3db406b7fdff3ffb1ee Mon Sep 17 00:00:00 2001 From: Shashwat Dubey Date: Sun, 15 Sep 2024 20:12:58 +0530 Subject: [PATCH 2/2] Added documentation for "spinnerPosition" prop in the component. --- JSR.md | 3 +++ README.md | 3 +++ 2 files changed, 6 insertions(+) diff --git a/JSR.md b/JSR.md index dd447a2..25f7c72 100644 --- a/JSR.md +++ b/JSR.md @@ -144,6 +144,7 @@ If no props are passed to ``, below is the default configuratio height={3} crawl={true} showSpinner={true} + spinnerPosition="top-right" easing="ease" speed={200} shadow="0 0 10px #2299DD,0 0 5px #2299DD" @@ -162,6 +163,7 @@ If no props are passed to ``, below is the default configuratio - `height`: height of TopLoader in `px`. - `crawl`: auto incrementing behavior for the TopLoader. - `showSpinner`: to show spinner or not. +- `spinnerPosition`: to change the corner position of the spinner (top-right, top-left, bottom-right, bottom-left). - `shadow`: a smooth shadow for the TopLoader. (set to `false` to disable it) - `template`: to include custom HTML attributes for the TopLoader. - `zIndex`: defines zIndex for the TopLoader. @@ -177,6 +179,7 @@ If no props are passed to ``, below is the default configuratio | `height` | `number` | `3` | | `crawl` | `boolean` | `true` | | `showSpinner` | `boolean` | `true` | +| `spinnerPosition` | `string` | `"top-right"` | | `easing` | `string` | `"ease"` | | `speed` | `number` | `200` | | `shadow` | `string \| false` | `"0 0 10px ${color}, 0 0 5px ${color}"` | diff --git a/README.md b/README.md index c06c055..da4d0c4 100644 --- a/README.md +++ b/README.md @@ -135,6 +135,7 @@ If no props are passed to ``, below is the default configuratio height={3} crawl={true} showSpinner={true} + spinnerPosition="top-right" easing="ease" speed={200} shadow="0 0 10px #2299DD,0 0 5px #2299DD" @@ -153,6 +154,7 @@ If no props are passed to ``, below is the default configuratio - `height`: height of TopLoader in `px`. - `crawl`: auto incrementing behavior for the TopLoader. - `showSpinner`: to show spinner or not. +- `spinnerPosition`: to change the corner position of the spinner (top-right, top-left, bottom-right, bottom-left). - `shadow`: a smooth shadow for the TopLoader. (set to `false` to disable it) - `template`: to include custom HTML attributes for the TopLoader. - `zIndex`: defines zIndex for the TopLoader. @@ -168,6 +170,7 @@ If no props are passed to ``, below is the default configuratio | `height` | `number` | `3` | | `crawl` | `boolean` | `true` | | `showSpinner` | `boolean` | `true` | +| `spinnerPosition` | `string` | `"top-right"` | | `easing` | `string` | `"ease"` | | `speed` | `number` | `200` | | `shadow` | `string \| false` | `"0 0 10px #2299DD,0 0 5px #2299DD"` |