react-customizable-progressbar - npm Package Compare versions

Comparing version 0.2.2 to 1.0.0

dist/ReactCustomizableProgressbar.js

@@ -1,1 +0,1 @@
-!function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory(require("react")):"function"==typeof define&&define.amd?define(["react"],factory):"object"==typeof exports?exports.ReactCustomizableProgressbar=factory(require("react")):root.ReactCustomizableProgressbar=factory(root.react)}(this,function(__WEBPACK_EXTERNAL_MODULE__1__){return function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function(){return module.default}:function(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=2)}([function(module,exports,__webpack_require__){module.exports=__webpack_require__(4)()},function(module,exports){module.exports=__WEBPACK_EXTERNAL_MODULE__1__},function(module,exports,__webpack_require__){module.exports=__webpack_require__(3)},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(1),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(0),prop_types__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _getPrototypeOf(o){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(o){return o.__proto__||Object.getPrototypeOf(o)})(o)}function _setPrototypeOf(o,p){return(_setPrototypeOf=Object.setPrototypeOf||function(o,p){return o.__proto__=p,o})(o,p)}function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}var ReactCustomizableProgressbar=function(_Component){function ReactCustomizableProgressbar(){var _getPrototypeOf2,_this,self,call;!function(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,ReactCustomizableProgressbar);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return self=this,call=(_getPrototypeOf2=_getPrototypeOf(ReactCustomizableProgressbar)).call.apply(_getPrototypeOf2,[this].concat(args)),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this=!call||"object"!==_typeof(call)&&"function"!=typeof call?_assertThisInitialized(self):call)),"state",{animationInited:!1}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"componentDidMount",function(){var _this$props=_this.props,initialAnimation=_this$props.initialAnimation,initialAnimationDelay=_this$props.initialAnimationDelay;initialAnimation&&setTimeout(_this.initAnimation,initialAnimationDelay)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"initAnimation",function(){_this.setState({animationInited:!0})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getProgress",function(){var _this$props2=_this.props,initialAnimation=_this$props2.initialAnimation,progress=_this$props2.progress,animationInited=_this.state.animationInited;return initialAnimation&&!animationInited?0:progress}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getStrokeDashoffset",function(strokeLength){var _this$props3=_this.props,counterClockwise=_this$props3.counterClockwise,inverse=_this$props3.inverse,steps=_this$props3.steps,progressLength=strokeLength/steps*(steps-_this.getProgress());return inverse?counterClockwise?0:progressLength-strokeLength:counterClockwise?-1*progressLength:progressLength}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getStrokeDashArray",function(strokeLength,circumference){var _this$props4=_this.props,counterClockwise=_this$props4.counterClockwise,inverse=_this$props4.inverse,steps=_this$props4.steps,progress=_this.getProgress();return inverse?"".concat(strokeLength/steps*(steps-progress),", ").concat(circumference):counterClockwise?"".concat(strokeLength*(progress/100),", ").concat(circumference):"".concat(strokeLength,", ").concat(circumference)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getTrackStrokeDashArray",function(strokeLength,circumference){var initialAnimation=_this.props.initialAnimation,animationInited=_this.state.animationInited;return initialAnimation&&!animationInited?"0, ".concat(circumference):"".concat(strokeLength,", ").concat(circumference)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getExtendedWidth",function(){var _this$props5=_this.props,strokeWidth=_this$props5.strokeWidth,pointerRadius=_this$props5.pointerRadius,pointerStrokeWidth=_this$props5.pointerStrokeWidth,trackStrokeWidth=_this$props5.trackStrokeWidth,pointerWidth=pointerRadius+pointerStrokeWidth;return strokeWidth<pointerWidth&&trackStrokeWidth<pointerWidth?2*pointerWidth:trackStrokeWidth<strokeWidth?2*strokeWidth:2*trackStrokeWidth}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getPointerAngle",function(){var _this$props6=_this.props,cut=_this$props6.cut,counterClockwise=_this$props6.counterClockwise,steps=_this$props6.steps,progress=_this.getProgress();return counterClockwise?(360-cut)/steps*(steps-progress):(360-cut)/steps*progress}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"render",function(){var _this$props7=_this.props,radius=_this$props7.radius,pointerRadius=_this$props7.pointerRadius,pointerStrokeWidth=_this$props7.pointerStrokeWidth,pointerFillColor=_this$props7.pointerFillColor,pointerStrokeColor=_this$props7.pointerStrokeColor,fillColor=_this$props7.fillColor,trackStrokeWidth=_this$props7.trackStrokeWidth,trackStrokeColor=_this$props7.trackStrokeColor,trackStrokeLinecap=_this$props7.trackStrokeLinecap,strokeColor=_this$props7.strokeColor,strokeWidth=_this$props7.strokeWidth,strokeLinecap=_this$props7.strokeLinecap,rotate=_this$props7.rotate,cut=_this$props7.cut,children=_this$props7.children,trackTransition=_this$props7.trackTransition,transition=_this$props7.transition,className=_this$props7.className,d=2*radius,width=d+_this.getExtendedWidth(),circumference=2*Math.PI*radius,strokeLength=circumference/360*(360-cut);return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{className:className?"progress-ReactCustomizableProgressbar ".concat(className):"progress-ReactCustomizableProgressbar",style:{position:"relative",width:"".concat(width,"px")}},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("svg",{width:width,height:width,viewBox:"0 0 ".concat(width," ").concat(width),style:{transform:"rotate(".concat(rotate,"deg)")}},0<trackStrokeWidth&&react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("circle",{cx:width/2,cy:width/2,r:radius,fill:"none",stroke:trackStrokeColor,strokeWidth:trackStrokeWidth,strokeDasharray:_this.getTrackStrokeDashArray(strokeLength,circumference),strokeLinecap:trackStrokeLinecap,className:"progress-ReactCustomizableProgressbar-track",style:{transition:trackTransition}}),0<strokeWidth&&react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("circle",{cx:width/2,cy:width/2,r:radius,fill:fillColor,stroke:strokeColor,strokeWidth:strokeWidth,strokeDasharray:_this.getStrokeDashArray(strokeLength,circumference),strokeDashoffset:_this.getStrokeDashoffset(strokeLength),strokeLinecap:strokeLinecap,className:"progress-ReactCustomizableProgressbar-progress",style:{transition:transition}}),0<pointerRadius&&react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("circle",{cx:d,cy:"50%",r:pointerRadius,fill:pointerFillColor,stroke:pointerStrokeColor,strokeWidth:pointerStrokeWidth,className:"progress-ReactCustomizableProgressbar-progress-pointer",style:{transformOrigin:"50% 50%",transform:"rotate(".concat(_this.getPointerAngle(),"deg) translate(").concat(_this.getExtendedWidth()/2,"px)"),transition:transition}})),children||null)}),_this}return function(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&_setPrototypeOf(subClass,superClass)}(ReactCustomizableProgressbar,react__WEBPACK_IMPORTED_MODULE_0__["Component"]),ReactCustomizableProgressbar}();ReactCustomizableProgressbar.propTypes={radius:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number.isRequired,progress:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number.isRequired,steps:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,cut:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,rotate:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,strokeWidth:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,strokeColor:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,fillColor:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string.isRequired,strokeLinecap:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,transition:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,pointerRadius:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,pointerStrokeWidth:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,pointerStrokeColor:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,pointerFillColor:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,trackStrokeWidth:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,trackStrokeColor:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,trackStrokeLinecap:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,trackTransition:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,initialAnimation:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,initialAnimationDelay:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,inverse:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,counterClockwise:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,children:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.element,className:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string},ReactCustomizableProgressbar.defaultProps={radius:100,progress:0,steps:100,cut:0,rotate:-90,strokeWidth:20,strokeColor:"indianred",fillColor:"none",strokeLinecap:"round",transition:".3s ease",pointerRadius:0,pointerStrokeWidth:20,pointerStrokeColor:"indianred",pointerFillColor:"white",trackStrokeColor:"#e6e6e6",trackStrokeWidth:20,trackStrokeLinecap:"round",trackTransition:".3s ease",counterClockwise:!1,inverse:!1,initialAnimation:!1,initialAnimationDelay:0,className:null},__webpack_exports__.default=ReactCustomizableProgressbar},function(module,exports,__webpack_require__){"use strict";var ReactPropTypesSecret=__webpack_require__(5);function emptyFunction(){}module.exports=function(){function shim(props,propName,componentName,location,propFullName,secret){if(secret!==ReactPropTypesSecret){var err=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw err.name="Invariant Violation",err}}function getShim(){return shim}var ReactPropTypes={array:shim.isRequired=shim,bool:shim,func:shim,number:shim,object:shim,string:shim,symbol:shim,any:shim,arrayOf:getShim,element:shim,instanceOf:getShim,node:shim,objectOf:getShim,oneOf:getShim,oneOfType:getShim,shape:getShim,exact:getShim};return ReactPropTypes.checkPropTypes=emptyFunction,ReactPropTypes.PropTypes=ReactPropTypes}},function(module,exports,__webpack_require__){"use strict";module.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}])});
+!function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory(require("react")):"function"==typeof define&&define.amd?define(["react"],factory):"object"==typeof exports?exports.ReactCustomizableProgressbar=factory(require("react")):root.ReactCustomizableProgressbar=factory(root.react)}(this,function(__WEBPACK_EXTERNAL_MODULE__1__){return function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function(){return module.default}:function(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=2)}([function(module,exports,__webpack_require__){module.exports=__webpack_require__(4)()},function(module,exports){module.exports=__WEBPACK_EXTERNAL_MODULE__1__},function(module,exports,__webpack_require__){module.exports=__webpack_require__(3)},function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(1),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(0),prop_types__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _getPrototypeOf(o){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(o){return o.__proto__||Object.getPrototypeOf(o)})(o)}function _setPrototypeOf(o,p){return(_setPrototypeOf=Object.setPrototypeOf||function(o,p){return o.__proto__=p,o})(o,p)}function _assertThisInitialized(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}var ReactCustomizableProgressbar=function(_Component){function ReactCustomizableProgressbar(){var _getPrototypeOf2,_this,self,call;!function(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}(this,ReactCustomizableProgressbar);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return self=this,call=(_getPrototypeOf2=_getPrototypeOf(ReactCustomizableProgressbar)).call.apply(_getPrototypeOf2,[this].concat(args)),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this=!call||"object"!==_typeof(call)&&"function"!=typeof call?_assertThisInitialized(self):call)),"state",{animationInited:!1}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"initAnimation",function(){_this.setState({animationInited:!0})}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getProgress",function(){var _this$props=_this.props,initialAnimation=_this$props.initialAnimation,progress=_this$props.progress,animationInited=_this.state.animationInited;return initialAnimation&&!animationInited?0:progress}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getStrokeDashoffset",function(strokeLength){var _this$props2=_this.props,counterClockwise=_this$props2.counterClockwise,inverse=_this$props2.inverse,steps=_this$props2.steps,progressLength=strokeLength/steps*(steps-_this.getProgress());return inverse?counterClockwise?0:progressLength-strokeLength:counterClockwise?-1*progressLength:progressLength}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getStrokeDashArray",function(strokeLength,circumference){var _this$props3=_this.props,counterClockwise=_this$props3.counterClockwise,inverse=_this$props3.inverse,steps=_this$props3.steps,progress=_this.getProgress();return inverse?"".concat(strokeLength/steps*(steps-progress),", ").concat(circumference):counterClockwise?"".concat(strokeLength*(progress/100),", ").concat(circumference):"".concat(strokeLength,", ").concat(circumference)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getTrackStrokeDashArray",function(strokeLength,circumference){var initialAnimation=_this.props.initialAnimation,animationInited=_this.state.animationInited;return initialAnimation&&!animationInited?"0, ".concat(circumference):"".concat(strokeLength,", ").concat(circumference)}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getExtendedWidth",function(){var _this$props4=_this.props,strokeWidth=_this$props4.strokeWidth,pointerRadius=_this$props4.pointerRadius,pointerStrokeWidth=_this$props4.pointerStrokeWidth,trackStrokeWidth=_this$props4.trackStrokeWidth,pointerWidth=pointerRadius+pointerStrokeWidth;return strokeWidth<pointerWidth&&trackStrokeWidth<pointerWidth?2*pointerWidth:trackStrokeWidth<strokeWidth?2*strokeWidth:2*trackStrokeWidth}),_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)),"getPointerAngle",function(){var _this$props5=_this.props,cut=_this$props5.cut,counterClockwise=_this$props5.counterClockwise,steps=_this$props5.steps,progress=_this.getProgress();return counterClockwise?(360-cut)/steps*(steps-progress):(360-cut)/steps*progress}),_this}var Constructor,protoProps,staticProps;return function(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&_setPrototypeOf(subClass,superClass)}(ReactCustomizableProgressbar,react__WEBPACK_IMPORTED_MODULE_0__["Component"]),Constructor=ReactCustomizableProgressbar,(protoProps=[{key:"componentDidMount",value:function(){var _this$props6=this.props,initialAnimation=_this$props6.initialAnimation,initialAnimationDelay=_this$props6.initialAnimationDelay;initialAnimation&&setTimeout(this.initAnimation,initialAnimationDelay)}},{key:"render",value:function(){var _this$props7=this.props,radius=_this$props7.radius,pointerRadius=_this$props7.pointerRadius,pointerStrokeWidth=_this$props7.pointerStrokeWidth,pointerFillColor=_this$props7.pointerFillColor,pointerStrokeColor=_this$props7.pointerStrokeColor,fillColor=_this$props7.fillColor,trackStrokeWidth=_this$props7.trackStrokeWidth,trackStrokeColor=_this$props7.trackStrokeColor,trackStrokeLinecap=_this$props7.trackStrokeLinecap,strokeColor=_this$props7.strokeColor,strokeWidth=_this$props7.strokeWidth,strokeLinecap=_this$props7.strokeLinecap,rotate=_this$props7.rotate,cut=_this$props7.cut,children=_this$props7.children,trackTransition=_this$props7.trackTransition,transition=_this$props7.transition,className=_this$props7.className,d=2*radius,width=d+this.getExtendedWidth(),circumference=2*Math.PI*radius,strokeLength=circumference/360*(360-cut);return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{className:className?"RCP ".concat(className):"RCP",style:{position:"relative",width:"".concat(width,"px")}},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("svg",{width:width,height:width,viewBox:"0 0 ".concat(width," ").concat(width),style:{transform:"rotate(".concat(rotate,"deg)")}},0<trackStrokeWidth&&react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("circle",{cx:width/2,cy:width/2,r:radius,fill:"none",stroke:trackStrokeColor,strokeWidth:trackStrokeWidth,strokeDasharray:this.getTrackStrokeDashArray(strokeLength,circumference),strokeLinecap:trackStrokeLinecap,className:"RCP__track",style:{transition:trackTransition}}),0<strokeWidth&&react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("circle",{cx:width/2,cy:width/2,r:radius,fill:fillColor,stroke:strokeColor,strokeWidth:strokeWidth,strokeDasharray:this.getStrokeDashArray(strokeLength,circumference),strokeDashoffset:this.getStrokeDashoffset(strokeLength),strokeLinecap:strokeLinecap,className:"RCP__progress",style:{transition:transition}}),0<pointerRadius&&react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("circle",{cx:d,cy:"50%",r:pointerRadius,fill:pointerFillColor,stroke:pointerStrokeColor,strokeWidth:pointerStrokeWidth,className:"RCP__pointer",style:{transformOrigin:"50% 50%",transform:"rotate(".concat(this.getPointerAngle(),"deg) translate(").concat(this.getExtendedWidth()/2,"px)"),transition:transition}})),children||null)}}])&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),ReactCustomizableProgressbar}();ReactCustomizableProgressbar.propTypes={radius:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number.isRequired,progress:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number.isRequired,steps:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,cut:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,rotate:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,strokeWidth:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,strokeColor:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,fillColor:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string.isRequired,strokeLinecap:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,transition:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,pointerRadius:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,pointerStrokeWidth:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,pointerStrokeColor:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,pointerFillColor:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,trackStrokeWidth:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,trackStrokeColor:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,trackStrokeLinecap:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,trackTransition:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string,initialAnimation:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,initialAnimationDelay:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.number,inverse:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,counterClockwise:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.bool,children:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.element,className:prop_types__WEBPACK_IMPORTED_MODULE_1___default.a.string},ReactCustomizableProgressbar.defaultProps={radius:100,progress:0,steps:100,cut:0,rotate:-90,strokeWidth:20,strokeColor:"indianred",fillColor:"none",strokeLinecap:"round",transition:".3s ease",pointerRadius:0,pointerStrokeWidth:20,pointerStrokeColor:"indianred",pointerFillColor:"white",trackStrokeColor:"#e6e6e6",trackStrokeWidth:20,trackStrokeLinecap:"round",trackTransition:".3s ease",counterClockwise:!1,inverse:!1,initialAnimation:!1,initialAnimationDelay:0,className:null},__webpack_exports__.default=ReactCustomizableProgressbar},function(module,exports,__webpack_require__){"use strict";var ReactPropTypesSecret=__webpack_require__(5);function emptyFunction(){}module.exports=function(){function shim(props,propName,componentName,location,propFullName,secret){if(secret!==ReactPropTypesSecret){var err=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw err.name="Invariant Violation",err}}function getShim(){return shim}var ReactPropTypes={array:shim.isRequired=shim,bool:shim,func:shim,number:shim,object:shim,string:shim,symbol:shim,any:shim,arrayOf:getShim,element:shim,instanceOf:getShim,node:shim,objectOf:getShim,oneOf:getShim,oneOfType:getShim,shape:getShim,exact:getShim};return ReactPropTypes.checkPropTypes=emptyFunction,ReactPropTypes.PropTypes=ReactPropTypes}},function(module,exports,__webpack_require__){"use strict";module.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}])});

package.json

 {
     "name": "react-customizable-progressbar",
-    "version": "0.2.2",
+    "version": "1.0.0",
     "main": "./dist/ReactCustomizableProgressbar.js",
-    "files": ["dist"],
+    "files": [
+        "dist"
+    ],
     "scripts": {
@@ -7,0 +9,0 @@ "format": "prettier --write {src,examples}/**/*.{js,jsx}",

README.md

@@ -28,5 +28,5 @@ # react-customizable-progressbar
 ```jsx
-import Bar from 'react-customizable-progressbar'
+import ProgressBar from 'react-customizable-progressbar'
 
-<Bar
+<ProgressBar
     progress={60}
@@ -70,8 +70,21 @@ radius={100}
 ```css
-.progress-bar {}
-.progress-bar-track {}
-.progress-bar-progress {}
-.progress-bar-pointer {}
+.RCP {}
+.RCP__track {}
+.RCP__progress {}
+.RCP__pointer {}
 ```
 
+You can use these default indicator styles to center it both horizontally and vertically
+```css
+display: flex;
+justify-content: center;
+text-align: center;
+position: absolute;
+top: 0;
+width: 100%;
+height: 100%;
+margin: 0 auto;
+user-select: none;
+```
+
 ### Run examples locally
@@ -78,0 +91,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19634

increased by2.21%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

94

increased by16.05%

No dependency changes