react-rn-progressor/mobile/Fence/Fence.js

A customizable collection of progress indicators for React and React Native

Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName='src/mobile/Fence/Fence.js';var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();var _react=require('react');var _react2=_interopRequireDefault(_react);var _propTypes=require('prop-types');var _propTypes2=_interopRequireDefault(_propTypes);var _reactNative=require('react-native');var _subcomponents=require('./helpers/subcomponents');function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self,call){if(!self){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call&&(typeof call==="object"||typeof call==="function")?call:self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function, not "+typeof superClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:false,writable:true,configurable:true}});if(superClass)Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass;}var UIManager=_reactNative.NativeModules.UIManager;if(UIManager.setLayoutAnimationEnabledExperimental){UIManager.setLayoutAnimationEnabledExperimental(true);}var FenceProgressor=function(_React$Component){_inherits(FenceProgressor,_React$Component);function FenceProgressor(){_classCallCheck(this,FenceProgressor);return _possibleConstructorReturn(this,(FenceProgressor.__proto__||Object.getPrototypeOf(FenceProgressor)).apply(this,arguments));}_createClass(FenceProgressor,[{key:'componentWillReceiveProps',value:function componentWillReceiveProps(nextProps){var _props=this.props,progress=_props.progress,animDuration=_props.animDuration,animEasing=_props.animEasing;var config={duration:animDuration,update:{type:_reactNative.LayoutAnimation.Types[animEasing]}};if(progress!==nextProps.progress){_reactNative.LayoutAnimation.configureNext(config);}}},{key:'render',value:function render(){var _props2=this.props,progress=_props2.progress,blockNumber=_props2.blockNumber,width=_props2.width,height=_props2.height,activeColor=_props2.activeColor,inactiveColor=_props2.inactiveColor;var activeBlocks=new Array(blockNumber).fill(false);var currentProgress=progress;if(currentProgress>100){currentProgress=100;}else if(currentProgress<0){currentProgress=0;}activeBlocks=activeBlocks.map(function(block,i){var activeBlockNumber=Math.floor(currentProgress*blockNumber/100);return i<=activeBlockNumber-1;});return _react2.default.createElement(_subcomponents.Container,{style:{width:width,height:height},__source:{fileName:_jsxFileName,lineNumber:64}},activeBlocks.map(function(_,i){return _react2.default.createElement(_subcomponents.Block,{key:i,width:width,height:height,aColor:activeColor,iaColor:inactiveColor,active:activeBlocks[i],__source:{fileName:_jsxFileName,lineNumber:67}});}));}}]);return FenceProgressor;}(_react2.default.Component);FenceProgressor.defaultProps={progress:0,blockNumber:10,width:200,height:30,activeColor:'#8DE969',inactiveColor:'#eee',animDuration:400,animEasing:'spring'};FenceProgressor.propTypes={progress:_propTypes2.default.number.isRequired,blockNumber:_propTypes2.default.number,width:_propTypes2.default.number.isRequired,height:_propTypes2.default.number,activeColor:_propTypes2.default.string,inactiveColor:_propTypes2.default.string,animDuration:_propTypes2.default.number,animEasing:_propTypes2.default.string};exports.default=FenceProgressor;