Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
atomic-spinner
Advanced tools
atomic-spinner - npm Package Compare versions
Comparing version 1.0.10 to 1.0.11
@@ -1,41 +0,2 @@ | ||
| import * as React from 'react'; | ||
| export declare type NucleusProps = { | ||
| particleFillColor: string; | ||
| particleBorderColor: string; | ||
| particleCount: number; | ||
| particleSize: number; | ||
| distanceFromCenter: number; | ||
| }; | ||
| export declare function Nucleus({ particleFillColor, particleBorderColor, particleCount, particleSize, distanceFromCenter }: NucleusProps): JSX.Element; | ||
| export declare type ElectronPathProps = { | ||
| color: string; | ||
| width: number; | ||
| rotationAngle: number; | ||
| }; | ||
| export declare const ElectronPath: ({ color, width, rotationAngle }: ElectronPathProps) => JSX.Element; | ||
| export declare type ElectronProps = { | ||
| rotationAngle: number; | ||
| orbitTime: number; | ||
| spacetimeOffset: number; | ||
| size: number; | ||
| colorPalette: string[]; | ||
| }; | ||
| export declare const Electron: ({ rotationAngle, orbitTime, spacetimeOffset, size, colorPalette }: ElectronProps) => JSX.Element; | ||
| export declare type AtomicSpinnerProps = { | ||
| atomSize?: number; | ||
| displayElectronPaths?: boolean; | ||
| displayNucleus?: boolean; | ||
| electronColorPalette?: string[]; | ||
| electronPathCount?: number; | ||
| electronPathColor?: string; | ||
| electronPathWidth?: number; | ||
| electronsPerPath?: number; | ||
| electronSize?: number; | ||
| nucleusParticleFillColor?: string; | ||
| nucleusParticleBorderColor?: string; | ||
| nucleusParticleCount?: number; | ||
| nucleusParticleSize?: number; | ||
| nucleusDistanceFromCenter?: number; | ||
| }; | ||
| declare const _default: React.MemoExoticComponent<({ atomSize, displayElectronPaths, displayNucleus, electronColorPalette, electronPathCount, electronPathColor, electronPathWidth, electronsPerPath, electronSize, nucleusParticleFillColor, nucleusParticleBorderColor, nucleusParticleCount, nucleusParticleSize, nucleusDistanceFromCenter }: AtomicSpinnerProps) => JSX.Element>; | ||
| export default _default; | ||
| import AtomicSpinner from './AtomicSpinner'; | ||
| export default AtomicSpinner; |
| "use strict"; | ||
| var __importStar = (this && this.__importStar) || function (mod) { | ||
| if (mod && mod.__esModule) return mod; | ||
| var result = {}; | ||
| if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; | ||
| result["default"] = mod; | ||
| return result; | ||
| var __importDefault = (this && this.__importDefault) || function (mod) { | ||
| return (mod && mod.__esModule) ? mod : { "default": mod }; | ||
| }; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| const React = __importStar(require("react")); | ||
| function Nucleus({ particleFillColor, particleBorderColor, particleCount, particleSize, distanceFromCenter }) { | ||
| const startingAngle = Math.random() * 2 * Math.PI; | ||
| const particles = Array.from({ length: particleCount }) | ||
| .map((_, i) => { | ||
| const angle = startingAngle + i * ((2 * Math.PI) / particleCount); | ||
| const offsetX = distanceFromCenter * Math.cos(angle); | ||
| const offsetY = distanceFromCenter * Math.sin(angle); | ||
| return (React.createElement("g", { key: i }, | ||
| React.createElement("circle", { cx: 50 + offsetX, cy: 50 + offsetY, r: particleSize, fill: particleFillColor, stroke: particleBorderColor, strokeWidth: 0.3 }))); | ||
| }); | ||
| particles.sort(({ key }) => (Number(key) % (particleCount / 3) ? 1 : -1)); | ||
| return React.createElement(React.Fragment, null, particles); | ||
| } | ||
| exports.Nucleus = Nucleus; | ||
| exports.ElectronPath = ({ color, width, rotationAngle }) => { | ||
| return (React.createElement("g", { transform: `rotate(${rotationAngle} 50 50)` }, | ||
| React.createElement("use", { xlinkHref: "#electronPath", stroke: color, strokeWidth: width }))); | ||
| }; | ||
| exports.Electron = ({ rotationAngle, orbitTime, spacetimeOffset, size, colorPalette }) => { | ||
| let unusedColors = []; | ||
| const getRandomElectronColor = () => { | ||
| if (!unusedColors.length) { | ||
| unusedColors = [...colorPalette]; | ||
| } | ||
| return unusedColors.splice(Math.floor(Math.random() * (unusedColors.length)), 1)[0]; | ||
| }; | ||
| return (React.createElement("g", { transform: `rotate(${rotationAngle} 50 50)` }, | ||
| React.createElement("circle", { cx: "50", cy: "15", r: size, fill: getRandomElectronColor() }, | ||
| React.createElement("animateMotion", { dur: `${orbitTime}s`, repeatCount: "indefinite", begin: `${spacetimeOffset}s` }, | ||
| React.createElement("mpath", { xlinkHref: "#electron" }))))); | ||
| }; | ||
| const AtomicSpinner = ({ atomSize = 200, displayElectronPaths = true, displayNucleus = true, electronColorPalette = ['#0081C9', '#5BC0F8', '#86E5FF'], electronPathCount = 3, electronPathColor = '#707070', electronPathWidth = 0.5, electronsPerPath = 2, electronSize = 1.5, nucleusParticleFillColor = '#707070', nucleusParticleBorderColor = '#999', nucleusParticleCount = 6, nucleusParticleSize = 2.5, nucleusDistanceFromCenter = 2.5 }) => { | ||
| const electronPaths = Array.from({ length: electronPathCount }) | ||
| .map((_, i) => ({ | ||
| rotationAngle: 0 + i * (180 / electronPathCount), | ||
| electronCount: electronsPerPath, | ||
| electronOrbitTime: 2 + Math.random() * 1 | ||
| })); | ||
| return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", width: atomSize, height: atomSize, viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid" }, | ||
| React.createElement("defs", null, | ||
| React.createElement("path", { id: "electronPath", d: "M50 15A15 35 0 0 1 50 85A15 35 0 0 1 50 15", fill: "none" }), | ||
| React.createElement("path", { id: "electron", d: "M0 0A15 35 0 0 1 0 70A15 35 0 0 1 0 0", fill: "none" })), | ||
| displayNucleus | ||
| && (React.createElement(Nucleus, { particleCount: nucleusParticleCount, particleSize: nucleusParticleSize, distanceFromCenter: nucleusDistanceFromCenter, particleFillColor: nucleusParticleFillColor, particleBorderColor: nucleusParticleBorderColor })), | ||
| displayElectronPaths | ||
| && electronPaths.map(({ rotationAngle }) => (React.createElement(exports.ElectronPath, { key: `electron-path-${rotationAngle}`, color: electronPathColor, width: electronPathWidth, rotationAngle: rotationAngle }))), | ||
| electronPaths.map(({ electronCount, rotationAngle, electronOrbitTime }) => Array.from({ length: electronCount }) | ||
| .map((_, i) => (React.createElement(exports.Electron, { key: `electron-${i}`, rotationAngle: rotationAngle, orbitTime: electronOrbitTime, size: electronSize, spacetimeOffset: -electronOrbitTime + i * (electronOrbitTime / (electronCount)), colorPalette: electronColorPalette })))))); | ||
| }; | ||
| exports.default = React.memo(AtomicSpinner); | ||
| const AtomicSpinner_1 = __importDefault(require("./AtomicSpinner")); | ||
| exports.default = AtomicSpinner_1.default; |
| { | ||
| "name": "atomic-spinner", | ||
| "version": "1.0.10", | ||
| "version": "1.0.11", | ||
| "description": "Loading spinner that looks like an atom", | ||
@@ -14,7 +14,6 @@ "author": "David Lounsbrough", | ||
| "scripts": { | ||
| "build": "rm -rf dist && tsc && pnpm minify", | ||
| "minify": "uglifyjs --compress -o dist/index.min.js -- dist/index.js", | ||
| "build": "rm -rf dist && tsc", | ||
| "publish-npm": "pnpm build && npm publish", | ||
| "build-demo": "pnpm --prefix demo build", | ||
| "deploy-demo": "gh-pages -d demo/build" | ||
| "deploy-demo": "pnpm build-demo && gh-pages -d demo/build" | ||
| }, | ||
@@ -46,5 +45,4 @@ "keywords": [ | ||
| "react-dom": "^18.2.0", | ||
| "typescript": "^2.9.2", | ||
| "uglify-js": "^3.17.4" | ||
| "typescript": "^2.9.2" | ||
| } | ||
| } |
@@ -7,2 +7,6 @@ [](https://www.npmjs.com/package/atomic-spinner) | ||
| ## Live Demo | ||
| https://codenough-llc.github.io/atomic-spinner/ | ||
| ## Examples | ||
@@ -17,7 +21,5 @@  | ||
| ``` | ||
| ```sh | ||
| yarn add atomic-spinner | ||
| ``` | ||
| ```sh | ||
@@ -32,24 +34,24 @@ pnpm i atomic-spinner | ||
| function MyComponent() { | ||
| return ( | ||
| <AtomicSpinner | ||
| atomSize={200} | ||
| displayElectronPaths | ||
| displayNucleus | ||
| electronColorPalette={[ '#0081C9', '#5BC0F8', '#86E5FF' ]} | ||
| electronPathCount={3} | ||
| electronPathColor="#707070" | ||
| electronPathWidth={0.5} | ||
| electronsPerPath={2} | ||
| electronSize={1.5} | ||
| nucleusParticleFillColor="#707070" | ||
| nucleusParticleBorderColor="#999" | ||
| nucleusParticleCount={6} | ||
| nucleusParticleSize={2.5} | ||
| nucleusDistanceFromCenter={2.5} | ||
| /> | ||
| ) | ||
| } | ||
| const App = () => <AtomicSpinner /> | ||
| export default MyComponent | ||
| export default App | ||
| ``` | ||
| ## Options | ||
| | prop | type | default | | ||
| | ---- | ---- | ------- | | ||
| | atomSize | number | 200 | | ||
| | displayElectronPaths | bool | false | | ||
| | displayNucleus | bool | false | | ||
| | electronColorPalette | string[] | [ '#0081C9', '#5BC0F8', '#86E5FF' ] | | ||
| | electronPathCount | number | 3 | | ||
| | electronPathColor | string | #707070 | | ||
| | electronPathWidth | number | 0.5 | | ||
| | electronsPerPath | number | 2 | | ||
| | electronSize | number | 1.5 | | ||
| | nucleusParticleFillColor | string | #707070 | | ||
| | nucleusParticleBorderColor | string | #999 | | ||
| | nucleusParticleCount | number | 6 | | ||
| | nucleusParticleSize | number | 2.5 | | ||
| | nucleusDistanceFromCenter | number | 2.5 | |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-14.29%
6
- Number of package files
- increased by116.67%
13
- Lines of code
- increased by54.81%
161
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by3.77%
55
Worsened metrics
- Total package byte prevSize
- decreased by-6.9%
12468
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes