New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

react-repeatable

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-repeatable - npm Package Compare versions

Comparing version
1.1.1
 to
2.0.0
+48
-46
package.json
{
"name": "react-repeatable",
"version": "1.1.1",
"version": "2.0.0",
"description": "A press and hold wrapper component that can trigger hold action multiple times while holding down.",

@@ -10,11 +10,13 @@ "main": "lib/index.js",

"scripts": {
"prepublish": "npm run eslint && npm test && npm run clean && npm run build && npm run build-examples",
"build": "babel --out-dir ./lib ./src",
"build-examples": "cd examples; webpack",
"clean": "rm -f lib/*",
"prepare": "npm run lint && npm test && npm run clean && npm run build && npm run styleguide:build",
"build": "webpack-cli",
"clean": "rm -f {lib,dist}/*",
"demo": "http-server -p 8000 docs/",
"eslint": "eslint --ext .js --ext .jsx *.js examples src test",
"test": "tap test/*.js --node-arg=--require --node-arg=babel-register --node-arg=--require --node-arg=babel-polyfill",
"coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=babel-register --nyc-arg=--require --nyc-arg=babel-polyfill | coveralls",
"dev": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --content-base ../docs"
"lint": "npm run eslint",
"eslint": "eslint --ext .js --ext .jsx *.js src test",
"test": "tap test/*.js --node-arg=--require --node-arg=@babel/register --node-arg=--require --node-arg=@babel/polyfill",
"coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=@babel/register --nyc-arg=--require --nyc-arg=@babel/polyfill | coveralls",
"dev": "npm run styleguide",
"styleguide": "styleguidist server",
"styleguide:build": "styleguidist build"
},

@@ -54,41 +56,41 @@ "repository": {

"devDependencies": {
"@trendmicro/react-anchor": "~0.5.6",
"@trendmicro/react-buttons": "~1.3.0",
"babel-cli": "~6.26.0",
"babel-core": "~6.26.0",
"babel-eslint": "~8.2.2",
"babel-loader": "~7.1.3",
"babel-plugin-transform-decorators-legacy": "~1.3.4",
"babel-preset-env": "~1.6.1",
"babel-preset-react": "~6.24.1",
"babel-preset-stage-0": "~6.24.1",
"coveralls": "~3.0.0",
"css-loader": "~0.28.10",
"enzyme": "~3.3.0",
"enzyme-adapter-react-16": "~1.1.1",
"eslint": "~4.18.1",
"eslint-config-trendmicro": "~1.3.0",
"eslint-loader": "~1.9.0",
"eslint-plugin-import": "~2.9.0",
"eslint-plugin-jsx-a11y": "~6.0.3",
"eslint-plugin-react": "~7.7.0",
"file-loader": "~1.1.9",
"html-webpack-plugin": "~2.30.1",
"@babel/cli": "~7.5.5",
"@babel/core": "~7.5.5",
"@babel/polyfill": "~7.4.4",
"@babel/preset-env": "~7.5.5",
"@babel/preset-react": "~7.0.0",
"@babel/register": "~7.5.5",
"@trendmicro/babel-config": "~1.0.0-alpha",
"babel-eslint": "~10.0.2",
"babel-loader": "~8.0.6",
"classnames": "~2.2.6",
"coveralls": "~3.0.5",
"cross-env": "~5.2.0",
"css-loader": "~3.1.0",
"enzyme": "~3.10.0",
"enzyme-adapter-react-16": "~1.14.0",
"eslint": "~6.0.1",
"eslint-config-trendmicro": "~1.4.1",
"eslint-loader": "~2.2.1",
"eslint-plugin-import": "~2.18.1",
"eslint-plugin-jsx-a11y": "~6.2.3",
"eslint-plugin-react": "~7.14.2",
"find-imports": "~1.1.0",
"html-webpack-plugin": "~3.2.0",
"http-server": "~0.11.1",
"jsdom": "~11.6.2",
"nib": "~1.1.2",
"rc-slider": "~8.6.0",
"react": "~16.2.0",
"react-dom": "~16.2.0",
"sinon": "^4.4.2",
"style-loader": "~0.20.2",
"stylint": "~1.5.9",
"stylint-loader": "~1.0.0",
"stylus-loader": "~3.0.2",
"tap": "~11.1.1",
"trendmicro-ui": "~0.5.1",
"url-loader": "~0.6.2",
"webpack": "~3.10.0",
"webpack-dev-server": "~2.9.7"
"jsdom": "~15.1.1",
"rc-slider": "~8.6.13",
"react": "~16.8.0",
"react-bootstrap-buttons": "~0.5.0",
"react-dom": "~16.8.0",
"react-github-corner": "~2.3.0",
"react-styleguidist": "~9.1.11",
"sinon": "~7.3.2",
"style-loader": "~0.23.1",
"styled-components": "~4.3.2",
"tap": "~14.4.2",
"webpack": "~4.36.1",
"webpack-cli": "~3.3.6",
"webpack-dev-server": "~3.7.2"
}
}
+19
-6
README.md

@@ -17,5 +17,4 @@ # react-repeatable [![build status](https://travis-ci.org/cheton/react-repeatable.svg?branch=master)](https://travis-ci.org/cheton/react-repeatable) [![Coverage Status](https://coveralls.io/repos/github/cheton/react-repeatable/badge.svg?branch=master)](https://coveralls.io/github/cheton/react-repeatable?branch=master)

```js
```jsx
<Repeatable
style={{ display: 'inline-block' }}
repeatDelay={500}

@@ -39,8 +38,22 @@ repeatInterval={32}

>
<button type="button">
Press Me
</button>
Press Me
</Repeatable>
```
### Repeatable Button
```jsx
const RepeatableButton = ({ onClick, ...props }) => (
<Repeatable
tag="button"
type="button"
onHold={onClick}
onRelease={onClick}
{...props}
/>
);
<RepeatableButton onClick={handleClick} />
```
## API

@@ -60,3 +73,3 @@

:--- | :--- | :------ | :----------
componentClass | element | 'div' | A custom element for this component.
tag | element | 'div' | A custom element for this component.
disabled | Boolean | false | Set it to true to disable event actions.

@@ -63,0 +76,0 @@ repeatDelay | Number | 500 | The time (in milliseconds) to wait before the first hold action is being triggered.

-9
lib/index.js
'use strict';
var _Repeatable = require('./Repeatable');
var _Repeatable2 = _interopRequireDefault(_Repeatable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
module.exports = _Repeatable2.default;
-228
lib/Repeatable.js
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
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 _class, _temp2;
var _chainedFunction = require('chained-function');
var _chainedFunction2 = _interopRequireDefault(_chainedFunction);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
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 Repeatable = (_temp2 = _class = function (_PureComponent) {
_inherits(Repeatable, _PureComponent);
function Repeatable() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, Repeatable);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Repeatable.__proto__ || Object.getPrototypeOf(Repeatable)).call.apply(_ref, [this].concat(args))), _this), _this.repeatDelayTimer = null, _this.repeatIntervalTimer = null, _this.repeatAmount = 0, _this.acquireTimer = function () {
var repeatDelay = Math.max(Number(_this.props.repeatDelay) || 0, 0);
var repeatInterval = Math.max(Number(_this.props.repeatInterval) || 0, 0);
var repeatCount = Math.max(Number(_this.props.repeatCount) || 0, 0);
_this.repeatAmount = 0;
_this.releaseTimer();
_this.repeatDelayTimer = setTimeout(function () {
if (repeatCount > 0 && _this.repeatAmount >= repeatCount) {
return;
}
_this.repeatAmount++;
if (typeof _this.props.onHoldStart === 'function') {
_this.props.onHoldStart();
}
if (typeof _this.props.onHold === 'function') {
_this.props.onHold();
}
_this.repeatIntervalTimer = setInterval(function () {
if (repeatCount > 0 && _this.repeatAmount >= repeatCount) {
return;
}
_this.repeatAmount++;
if (typeof _this.props.onHold === 'function') {
_this.props.onHold();
}
}, repeatInterval);
}, repeatDelay);
}, _this.releaseTimer = function () {
if (_this.repeatDelayTimer) {
clearTimeout(_this.repeatDelayTimer);
_this.repeatDelayTimer = null;
}
if (_this.repeatIntervalTimer) {
clearInterval(_this.repeatIntervalTimer);
_this.repeatIntervalTimer = null;
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Repeatable, [{
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.repeatAmount = 0;
this.releaseTimer();
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props,
Component = _props.componentClass,
disabled = _props.disabled,
repeatDelay = _props.repeatDelay,
repeatInterval = _props.repeatInterval,
repeatCount = _props.repeatCount,
onPress = _props.onPress,
onHoldStart = _props.onHoldStart,
onHold = _props.onHold,
onHoldEnd = _props.onHoldEnd,
onRelease = _props.onRelease,
onMouseDown = _props.onMouseDown,
onTouchStart = _props.onTouchStart,
onTouchCancel = _props.onTouchCancel,
onTouchEnd = _props.onTouchEnd,
props = _objectWithoutProperties(_props, ['componentClass', 'disabled', 'repeatDelay', 'repeatInterval', 'repeatCount', 'onPress', 'onHoldStart', 'onHold', 'onHoldEnd', 'onRelease', 'onMouseDown', 'onTouchStart', 'onTouchCancel', 'onTouchEnd']);
var release = function release(event) {
if (_this2.repeatAmount > 0) {
if (typeof _this2.props.onHoldEnd === 'function') {
_this2.props.onHoldEnd();
}
}
_this2.repeatAmount = 0;
_this2.releaseTimer();
if (typeof _this2.props.onRelease === 'function') {
_this2.props.onRelease(event);
}
};
var press = function press(event) {
event.persist();
var releaseOnce = function releaseOnce(event) {
document.documentElement.removeEventListener('mouseup', releaseOnce);
release(event);
};
document.documentElement.addEventListener('mouseup', releaseOnce);
if (typeof _this2.props.onPress === 'function') {
_this2.props.onPress(event);
}
_this2.acquireTimer();
};
return _react2.default.createElement(Component, _extends({
role: 'presentation'
}, props, {
onMouseDown: (0, _chainedFunction2.default)(onMouseDown, function (event) {
if (disabled) {
return;
}
press(event);
}),
onTouchStart: (0, _chainedFunction2.default)(onTouchStart, function (event) {
if (disabled) {
return;
}
press(event);
}),
onTouchCancel: (0, _chainedFunction2.default)(onTouchCancel, function (event) {
if (disabled) {
return;
}
release(event);
}),
onTouchEnd: (0, _chainedFunction2.default)(onTouchEnd, function (event) {
if (disabled) {
return;
}
release(event);
})
}));
}
}]);
return Repeatable;
}(_react.PureComponent), _class.propTypes = {
// A custom element for this component.
componentClass: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]),
// Set it to true to disable event actions.
disabled: _propTypes2.default.bool,
// The time (in milliseconds) to wait before the first hold action is being triggered.
repeatDelay: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
// The time interval (in milliseconds) on how often to trigger a hold action.
repeatInterval: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
// The number of times the hold action will take place. A zero value will disable the repeat counter.
repeatCount: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
// Callback fired when the mousedown or touchstart event is triggered.
onPress: _propTypes2.default.func,
// Callback fired once before the first hold action.
onHoldStart: _propTypes2.default.func,
// Callback fired mutiple times while holding down.
onHold: _propTypes2.default.func,
// Callback fired once after the last hold action.
onHoldEnd: _propTypes2.default.func,
// Callback fired when the mouseup, touchcancel, or touchend event is triggered.
onRelease: _propTypes2.default.func,
onMouseDown: _propTypes2.default.func,
onTouchStart: _propTypes2.default.func,
onTouchCancel: _propTypes2.default.func,
onTouchEnd: _propTypes2.default.func
}, _class.defaultProps = {
componentClass: 'div',
disabled: false,
repeatDelay: 500,
repeatInterval: 32,
repeatCount: 0
}, _temp2);
exports.default = Repeatable;