Socket
Socket
Sign inDemoInstall

@rmwc/circular-progress

Package Overview
Dependencies
Maintainers
1
Versions
153
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rmwc/circular-progress - npm Package Compare versions

Comparing version 14.0.10 to 14.0.11

2

index.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("@rmwc/base"),D=require("@material/circular-progress"),h=require("react"),N={xsmall:24,small:24,medium:32,large:48,xlarge:48},p={24:12,32:16,48:24},$={24:8.75,32:12.5,48:18},y={24:54.978,32:78.54,48:113.097},S={24:27.489,32:39.27,48:56.549},b={24:2.5,32:3,48:4},M={24:2,32:2.4,48:3.2},T=o=>{const{foundation:i,...g}=d.useFoundation({props:o,elements:{rootEl:!0,determinateCircleEl:!0},foundation:({rootEl:t,determinateCircleEl:n})=>new D.MDCCircularProgressFoundation({addClass:r=>t.addClass(r),getDeterminateCircleAttribute:r=>{var a;return(a=n.ref)==null?void 0:a.getAttribute(r)},hasClass:r=>t.hasClass(r),removeClass:r=>t.removeClass(r),removeAttribute:r=>t.removeProp(r),setAttribute:(r,a)=>{t.setProp(r,a)},setDeterminateCircleAttribute:(r,a)=>{var u;return(u=n.ref)==null?void 0:u.setAttribute(r,a)}})}),[m,l]=h.useState(void 0);return h.useEffect(()=>{i.setProgress(o.progress||0);const t=o.progress!==void 0;t!==m&&(i.setDeterminate(t),l(t))},[o.progress,m,i]),h.useEffect(()=>{o.closed?i.close():i.open()},[o.closed,i]),{foundation:i,...g}},k=d.createComponent(function(i,g){const{closed:m,size:l="small",max:t=1,min:n=0,progress:r,...a}=i,{rootEl:u,determinateCircleEl:v}=T(i),f=d.useClassNames(i,["mdc-circular-progress",`rmwc-circular-progress--${l}`,{"mdc-circular-progress--closed":m}]),P=r!==void 0,x=typeof l=="number",e=N[x?"medium":l],C=x?{...a.style,fontSize:`${l}px`,width:`${l}px`,height:`${l}px`}:{...a.style},j=c=>c<n?0:c>t?1:(c-n)/(t-n),A=c=>r!==void 0?{strokeDasharray:`${2*Math.PI*(c/2.4)*j(r)}, 666.66%`,width:`${c}px`,height:`${c}px`}:void 0,_=c=>({cx:p[c],cy:p[c],r:$[c],strokeDasharray:y[c],strokeDashoffset:S[c],strokeWidth:b[c]});return s.jsx(d.Tag,{"aria-valuenow":r,"aria-valuemin":n,"aria-valuemax":t,...a,style:C,className:f,element:u,ref:g,role:"progressbar",children:P?s.jsx("div",{className:"mdc-circular-progress__determinate-container",children:s.jsxs("svg",{className:"mdc-circular-progress__determinate-circle-graphic",viewBox:`0 0 ${e} ${e}`,children:[s.jsx("circle",{className:"mdc-circular-progress__determinate-track",cx:e/2,cy:e/2,r:e/2.4,strokeWidth:"4"}),s.jsx(d.Tag,{tag:"circle",className:"mdc-circular-progress__determinate-circle",style:A(e),cx:e/2,cy:e/2,r:e/2.4,element:v,strokeDashoffset:"113.097",strokeWidth:"4"})]})}):s.jsx("div",{className:"mdc-circular-progress__indeterminate-container",children:s.jsxs("div",{className:"mdc-circular-progress__spinner-layer",children:[s.jsx("div",{className:"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left",children:s.jsx("svg",{className:"mdc-circular-progress__indeterminate-circle-graphic",viewBox:`0 0 ${e} ${e}`,children:s.jsx("circle",{..._(e)})})}),s.jsx("div",{className:"mdc-circular-progress__gap-patch",children:s.jsx("svg",{className:"mdc-circular-progress__indeterminate-circle-graphic",viewBox:`0 0 ${e} ${e}`,children:s.jsx("circle",{..._(e),strokeWidth:M[e]})})}),s.jsx("div",{className:"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right",children:s.jsx("svg",{className:"mdc-circular-progress__indeterminate-circle-graphic",viewBox:`0 0 ${e} ${e}`,children:s.jsx("circle",{..._(e)})})})]})})})});exports.CircularProgress=k;
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),m=require("@rmwc/base"),N=require("@material/circular-progress"),h=require("react"),$={xsmall:24,small:24,medium:32,large:48,xlarge:48},p={24:12,32:16,48:24},b={24:8.75,32:12.5,48:18},y={24:54.978,32:78.54,48:113.097},S={24:27.489,32:39.27,48:56.549},M={24:2.5,32:3,48:4},T={24:2,32:2.4,48:3.2},k=o=>{const{foundation:i,...g}=m.useFoundation({props:o,elements:{rootEl:!0,determinateCircleEl:!0},foundation:({rootEl:t,determinateCircleEl:n})=>new N.MDCCircularProgressFoundation({addClass:r=>t.addClass(r),getDeterminateCircleAttribute:r=>{var l;return(l=n.ref)==null?void 0:l.getAttribute(r)},hasClass:r=>t.hasClass(r),removeClass:r=>t.removeClass(r),removeAttribute:r=>t.removeProp(r),setAttribute:(r,l)=>{t.setProp(r,l)},setDeterminateCircleAttribute:(r,l)=>{var d;return(d=n.ref)==null?void 0:d.setAttribute(r,l)}})}),[u,a]=h.useState(void 0);return h.useEffect(()=>{i.setProgress(o.progress||0);const t=o.progress!==void 0;t!==u&&(i.setDeterminate(t),a(t))},[o.progress,u,i]),h.useEffect(()=>{o.closed?i.close():i.open()},[o.closed,i]),{foundation:i,...g}},w=m.createComponent(function(i,g){const{closed:u,size:a="small",max:t=1,min:n=0,progress:r,label:l,...d}=i,{rootEl:v,determinateCircleEl:f}=k(i),P=m.useClassNames(i,["mdc-circular-progress",`rmwc-circular-progress--${a}`,{"mdc-circular-progress--closed":u}]),C=r!==void 0,x=typeof a=="number",e=$[x?"medium":a],j=x?{...d.style,fontSize:`${a}px`,width:`${a}px`,height:`${a}px`}:{...d.style},A=c=>c<n?0:c>t?1:(c-n)/(t-n),D=c=>r!==void 0?{strokeDasharray:`${2*Math.PI*(c/2.4)*A(r)}, 666.66%`,width:`${c}px`,height:`${c}px`}:void 0,_=c=>({cx:p[c],cy:p[c],r:b[c],strokeDasharray:y[c],strokeDashoffset:S[c],strokeWidth:M[c]});return s.jsx(m.Tag,{"aria-valuenow":r,"aria-valuemin":n,"aria-valuemax":t,"aria-label":l,...d,style:j,className:P,element:v,ref:g,role:"progressbar",children:C?s.jsx("div",{className:"mdc-circular-progress__determinate-container",children:s.jsxs("svg",{className:"mdc-circular-progress__determinate-circle-graphic",viewBox:`0 0 ${e} ${e}`,children:[s.jsx("circle",{className:"mdc-circular-progress__determinate-track",cx:e/2,cy:e/2,r:e/2.4,strokeWidth:"4"}),s.jsx(m.Tag,{tag:"circle",className:"mdc-circular-progress__determinate-circle",style:D(e),cx:e/2,cy:e/2,r:e/2.4,element:f,strokeDashoffset:"113.097",strokeWidth:"4"})]})}):s.jsx("div",{className:"mdc-circular-progress__indeterminate-container",children:s.jsxs("div",{className:"mdc-circular-progress__spinner-layer",children:[s.jsx("div",{className:"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left",children:s.jsx("svg",{className:"mdc-circular-progress__indeterminate-circle-graphic",viewBox:`0 0 ${e} ${e}`,children:s.jsx("circle",{..._(e)})})}),s.jsx("div",{className:"mdc-circular-progress__gap-patch",children:s.jsx("svg",{className:"mdc-circular-progress__indeterminate-circle-graphic",viewBox:`0 0 ${e} ${e}`,children:s.jsx("circle",{..._(e),strokeWidth:T[e]})})}),s.jsx("div",{className:"mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right",children:s.jsx("svg",{className:"mdc-circular-progress__indeterminate-circle-graphic",viewBox:`0 0 ${e} ${e}`,children:s.jsx("circle",{..._(e)})})})]})})})});exports.CircularProgress=w;

2

lib/circular-progress.d.ts

@@ -14,2 +14,4 @@ declare type Size = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';

size?: Size | number;
/** The label which will set an aria-label. */
label?: string;
}

@@ -16,0 +18,0 @@ export declare const CircularProgress: {

6

package.json
{
"name": "@rmwc/circular-progress",
"version": "14.0.10",
"version": "14.0.11",
"main": "./index.js",

@@ -42,5 +42,5 @@ "types": "./index.d.ts",

"@material/circular-progress": "^14.0.0",
"@rmwc/base": "14.0.10",
"@rmwc/types": "14.0.10"
"@rmwc/base": "14.0.11",
"@rmwc/types": "14.0.11"
}
}

37

README.md

@@ -16,3 +16,3 @@ # Circular Progress

```jsx
<CircularProgress />
<CircularProgress label="progress" />
```

@@ -22,6 +22,6 @@

<>
<CircularProgress progress={0.3} />
<CircularProgress progress={0.6} />
<CircularProgress progress={0.9} />
<CircularProgress progress={1} />
<CircularProgress label="progress" progress={0.3} />
<CircularProgress label="progress" progress={0.6} />
<CircularProgress label="progress" progress={0.9} />
<CircularProgress label="progress" progress={1} />
</>

@@ -34,8 +34,8 @@ ```

<>
<CircularProgress size="xsmall" />
<CircularProgress size="small" />
<CircularProgress size="medium" />
<CircularProgress size="large" />
<CircularProgress size="xlarge" />
<CircularProgress size={72} />
<CircularProgress label="xsmall progress" size="xsmall" />
<CircularProgress label="small progress" size="small" />
<CircularProgress label="medium progress" size="medium" />
<CircularProgress label="large progress" size="large" />
<CircularProgress label="xlarge progress" size="xlarge" />
<CircularProgress label="progress" size={72} />
</>

@@ -49,3 +49,3 @@ ```

<Button
icon={<CircularProgress theme="secondary" />}
icon={<CircularProgress label="progress" theme="secondary" />}
label="Cookies"

@@ -55,7 +55,15 @@ />

<List>
<SimpleListItem graphic={<CircularProgress />} text="Pizza" />
<SimpleListItem
graphic={<CircularProgress label="progress" />}
text="Pizza"
/>
<SimpleListItem graphic="favorite" text="Icecream" />
</List>
<Chip icon={<CircularProgress size="xsmall" />} label="Donuts" />
<ChipSet>
<Chip
icon={<CircularProgress label="progress" size="xsmall" />}
label="Donuts"
/>
</ChipSet>
</>

@@ -72,2 +80,3 @@ ```

| `closed` | `boolean` | Hides the progress bar. Adding / removing this prop will trigger an animation in or out. |
| `label` | `string` | The label which will set an aria-label. |
| `max` | `number` | Max value for determinate progress bars. |

@@ -74,0 +83,0 @@ | `min` | `number` | Min value for determinate progress bars. |

index.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc