Socket
Socket
Sign inDemoInstall

react-input-position

Package Overview
Dependencies
8
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.1.7 to 1.2.0

5

CHANGELOG.md
# Changelog
## 1.2.0 (September 26th, 2019)
- Added inversion of control props (onUpdate & overrideState)
- Fix touchmove resetting position issue
## 1.1.7 (September 1st, 2019)

@@ -4,0 +9,0 @@

202

dist/index.js

@@ -18,3 +18,3 @@ "use strict";

});
exports["default"] = void 0;
exports["default"] = exports.defaultState = void 0;

@@ -37,4 +37,2 @@ var _react = _interopRequireWildcard(require("react"));

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

@@ -44,2 +42,4 @@

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -63,2 +63,35 @@

var defaultState = {
active: false,
activePosition: {
x: 0,
y: 0
},
prevActivePosition: {
x: 0,
y: 0
},
passivePosition: {
x: 0,
y: 0
},
elementDimensions: {
width: 0,
height: 0
},
elementOffset: {
left: 0,
top: 0
},
itemPosition: {
x: 0,
y: 0
},
itemDimensions: {
width: 0,
height: 0
}
};
exports.defaultState = defaultState;
var ReactInputPosition =

@@ -82,34 +115,3 @@ /*#__PURE__*/

_defineProperty(_assertThisInitialized(_this), "state", {
active: false,
activePosition: {
x: 0,
y: 0
},
prevActivePosition: {
x: 0,
y: 0
},
passivePosition: {
x: 0,
y: 0
},
elementDimensions: {
width: 0,
height: 0
},
elementOffset: {
left: 0,
top: 0
},
itemPosition: {
x: 0,
y: 0
},
itemDimensions: {
width: 0,
height: 0
},
refreshToggle: false
});
_defineProperty(_assertThisInitialized(_this), "state", defaultState);

@@ -208,2 +210,47 @@ _defineProperty(_assertThisInitialized(_this), "containerRef", _react["default"].createRef());

}, {
key: "updateState",
value: function updateState(changes, cb) {
var _this3 = this;
var onUpdate = this.props.onUpdate;
if (this.props.overrideState) {
onUpdate && onUpdate(changes);
cb && cb.call(this);
return;
}
this.setState(function () {
return changes;
}, function () {
cb && cb.call(_this3);
onUpdate && onUpdate(_this3.getStateClone());
});
}
}, {
key: "getState",
value: function getState() {
if (this.props.overrideState) {
return this.props.overrideState;
} else {
return this.state;
}
}
}, {
key: "getStateClone",
value: function getStateClone() {
var state = this.getState();
var clonedState = {};
for (var key in state) {
if (_typeof(state[key]) === "object") {
clonedState[key] = _objectSpread({}, state[key]);
} else {
clonedState[key] = state[key];
}
}
return clonedState;
}
}, {
key: "refreshPosition",

@@ -277,4 +324,9 @@ value: function refreshPosition() {

itemPositionLimitBySize = _this$props2.itemPositionLimitBySize,
itemPositionLimitInternal = _this$props2.itemPositionLimitInternal; // Set container div info and active position
itemPositionLimitInternal = _this$props2.itemPositionLimitInternal;
var _this$getState = this.getState(),
activePosition = _this$getState.activePosition,
itemPosition = _this$getState.itemPosition; // Set container div info and active position
var stateUpdate = {

@@ -308,4 +360,4 @@ elementDimensions: {

stateUpdate.prevActivePosition = {
x: this.state.activePosition.x,
y: this.state.activePosition.y
x: activePosition.x,
y: activePosition.y
};

@@ -333,5 +385,3 @@ } // Set passive position

};
return this.setState(function () {
return stateUpdate;
}, this.startRefreshTimer);
return this.updateState(stateUpdate, this.startRefreshTimer);
}

@@ -348,3 +398,3 @@

} else if (trackItemPosition && updateItemPosition) {
stateUpdate.itemPosition = _utils["default"].calculateItemPosition(this.state.itemPosition, stateUpdate.prevActivePosition, stateUpdate.activePosition, itemMovementMultiplier);
stateUpdate.itemPosition = _utils["default"].calculateItemPosition(itemPosition, stateUpdate.prevActivePosition, stateUpdate.activePosition, itemMovementMultiplier);
} else {

@@ -359,5 +409,3 @@ shouldLimitItem = false;

this.setState(function () {
return stateUpdate;
}, this.startRefreshTimer);
this.updateState(stateUpdate, this.startRefreshTimer);
}

@@ -373,9 +421,7 @@ }, {

this.setState(function () {
return {
passivePosition: {
x: position.x - left,
y: position.y - top
}
};
this.updateState({
passivePosition: {
x: position.x - left,
y: position.y - top
}
});

@@ -391,3 +437,3 @@ }

if (!this.state.active) {
if (!this.getState().active) {
this.activate(position);

@@ -410,6 +456,4 @@ } else {

value: function deactivate() {
this.setState(function () {
return {
active: false
};
this.updateState({
active: false
});

@@ -420,7 +464,7 @@ }

value: function startRefreshTimer() {
var _this3 = this;
var _this4 = this;
if (!this.props.minUpdateSpeedInMs) return;
setTimeout(function () {
_this3.refresh = true;
_this4.refresh = true;
}, this.props.minUpdateSpeedInMs);

@@ -431,6 +475,6 @@ }

value: function startTapTimer() {
var _this4 = this;
var _this5 = this;
this.tapTimer = setTimeout(function () {
_this4.tapTimedOut = true;
_this5.tapTimedOut = true;
}, this.props.tapDurationInMs);

@@ -441,6 +485,6 @@ }

value: function startDoubleTapTimer() {
var _this5 = this;
var _this6 = this;
this.doubleTapTimer = setTimeout(function () {
_this5.doubleTapTimedOut = true;
_this6.doubleTapTimedOut = true;
}, this.props.doubleTapDurationInMs);

@@ -451,7 +495,7 @@ }

value: function startLongTouchTimer(e) {
var _this6 = this;
var _this7 = this;
this.longTouchTimer = setTimeout(function () {
if (_this6.touched) {
_this6.toggleActive(e);
if (_this7.touched) {
_this7.toggleActive(e);
}

@@ -463,6 +507,6 @@ }, this.props.longTouchDurationInMs);

value: function addMouseEventListeners() {
var _this7 = this;
var _this8 = this;
this.mouseHandlers.forEach(function (mouse) {
_this7.containerRef.current.addEventListener(mouse.event, mouse.handler);
_this8.containerRef.current.addEventListener(mouse.event, mouse.handler);
});

@@ -473,6 +517,6 @@ }

value: function addTouchEventListeners() {
var _this8 = this;
var _this9 = this;
this.touchHandlers.forEach(function (touch) {
_this8.containerRef.current.addEventListener(touch.event, touch.handler, _this8.supportsPassive ? {
_this9.containerRef.current.addEventListener(touch.event, touch.handler, _this9.supportsPassive ? {
passive: false

@@ -485,6 +529,6 @@ } : false);

value: function removeMouseEventListeners() {
var _this9 = this;
var _this10 = this;
this.mouseHandlers.forEach(function (mouse) {
_this9.containerRef.current.removeEventListener(mouse.event, mouse.handler);
_this10.containerRef.current.removeEventListener(mouse.event, mouse.handler);
});

@@ -495,6 +539,6 @@ }

value: function removeTouchEventListeners() {
var _this10 = this;
var _this11 = this;
this.touchHandlers.forEach(function (touch) {
_this10.containerRef.current.removeEventListener(touch.event, touch.handler, _this10.supportsPassive ? {
_this11.containerRef.current.removeEventListener(touch.event, touch.handler, _this11.supportsPassive ? {
passive: false

@@ -525,4 +569,6 @@ } : false);

cursorStyleActive = _this$props3.cursorStyleActive;
var active = this.state.active;
var _this$getState2 = this.getState(),
active = _this$getState2.active;
var combinedStyle = _objectSpread({}, style, {

@@ -540,3 +586,3 @@ WebkitUserSelect: "none",

ref: this.containerRef
}, _utils["default"].decorateChildren(children, _objectSpread({}, this.state, {
}, _utils["default"].decorateChildren(children, _objectSpread({}, this.getState(), {
itemRef: this.itemRef,

@@ -578,3 +624,5 @@ onLoadRefresh: this.onLoadRefresh

cursorStyle: _propTypes["default"].string,
cursorStyleActive: _propTypes["default"].string
cursorStyleActive: _propTypes["default"].string,
onUpdate: _propTypes["default"].func,
overrideState: _propTypes["default"].object
});

@@ -581,0 +629,0 @@

2

dist/mouseActivation/click.js

@@ -38,3 +38,3 @@ "use strict";

if (!this.state.active) {
if (!this.getState().active) {
return this.setPassivePosition(position);

@@ -41,0 +41,0 @@ }

2

dist/mouseActivation/doubleClick.js

@@ -34,3 +34,3 @@ "use strict";

if (!this.state.active) {
if (!this.getState().active) {
return this.setPassivePosition(position);

@@ -37,0 +37,0 @@ }

2

dist/mouseActivation/hover.js

@@ -26,3 +26,3 @@ "use strict";

if (!this.state.active) {
if (!this.getState().active) {
return this.activate(position);

@@ -29,0 +29,0 @@ }

4

dist/mouseActivation/mouseDown.js

@@ -30,3 +30,3 @@ "use strict";

if (!this.state.active) {
if (!this.getState().active) {
return this.setPassivePosition(position);

@@ -39,3 +39,3 @@ }

function mouseLeave() {
if (this.state.active) {
if (this.getState().active) {
this.deactivate();

@@ -42,0 +42,0 @@ }

7

dist/touchActivation/doubleTap.js

@@ -10,2 +10,3 @@ "use strict";

this.touched = true;
this.justTouched = true;
this.startTapTimer();

@@ -17,2 +18,3 @@ }

this.touched = false;
this.justTouched = false;

@@ -45,3 +47,3 @@ if (this.tapTimedOut) {

function touchMove(e) {
if (!this.state.active) return;
if (!this.getState().active) return;
if (e.cancelable) e.preventDefault();

@@ -53,3 +55,4 @@ var touch = e.touches[0];

};
this.setPosition(position, this.touched);
this.setPosition(position, this.touched && !this.justTouched);
this.justTouched = false;
}

@@ -56,0 +59,0 @@

7

dist/touchActivation/longTouch.js

@@ -10,2 +10,3 @@ "use strict";

this.touched = true;
this.justTouched = true;
clearTimeout(this.longTouchTimer);

@@ -24,2 +25,3 @@ var touch = e.touches[0];

this.touched = false;
this.justTouched = false;
}

@@ -40,5 +42,6 @@

if (!this.state.active) return;
if (!this.getState().active) return;
if (e.cancelable) e.preventDefault();
this.setPosition(position, this.touched);
this.setPosition(position, this.touched && !this.justTouched);
this.justTouched = false;
}

@@ -45,0 +48,0 @@

7

dist/touchActivation/tap.js

@@ -10,2 +10,3 @@ "use strict";

this.touched = true;
this.justTouched = true;
this.startTapTimer();

@@ -17,2 +18,3 @@ }

this.touched = false;
this.justTouched = false;

@@ -35,3 +37,3 @@ if (this.tapTimedOut) {

function touchMove(e) {
if (!this.state.active) return;
if (!this.getState().active) return;
if (e.cancelable) e.preventDefault();

@@ -43,3 +45,4 @@ var touch = e.touches[0];

};
this.setPosition(position, this.touched);
this.setPosition(position, this.touched && !this.justTouched);
this.justTouched = false;
}

@@ -46,0 +49,0 @@

7

dist/touchActivation/touch.js

@@ -10,2 +10,3 @@ "use strict";

this.touched = true;
this.justTouched = true;
var touch = e.touches[0];

@@ -22,2 +23,3 @@ var position = {

this.touched = false;
this.justTouched = false;
this.deactivate();

@@ -27,3 +29,3 @@ }

function touchMove(e) {
if (!this.state.active) return;
if (!this.getState().active) return;
if (e.cancelable) e.preventDefault();

@@ -35,3 +37,4 @@ var touch = e.touches[0];

};
this.setPosition(position, this.touched);
this.setPosition(position, this.touched && !this.justTouched);
this.justTouched = false;
}

@@ -38,0 +41,0 @@

2

package.json
{
"name": "react-input-position",
"version": "1.1.7",
"version": "1.2.0",
"description": "A React component that decorates it's children with mouse/touch position tracking, a status toggle fired by click/gesture events, and more.",

@@ -5,0 +5,0 @@ "keywords": [

40

README.md

@@ -166,2 +166,42 @@ # react-input-position

## Inversion of Control Props
All children passed to the component expand the tracked interaction area (unless they have absolute positioning, for example). Because of this, sometimes, you may want to access the mouse/touch information in a sibling component. The following props can be used together in order to lift state to a parent component. All funcionality will remain the same. See the example below the prop descriptions.
**onUpdate:** Used to pass a callback function which gets called on every state change with an object representing the new state. When used in combination with the overrideState prop, this callback will be called in place of internal setState with an object containing proposed state changes. Type: function
**overrideState:** Used to pass a state object which will be used instead of internal state. Since this causes the component to surrendor control of state, it must be used in combination with the onUpdate callback. Type: object
```JSX
import ReactInputPosition, {
MOUSE_ACTIVATION,
TOUCH_ACTIVATION,
defaultState
} from "react-input-position";
class ParentComponent extends React.Component {
state = defaultState;
onUpdate = (stateChanges) => {
this.setState(stateChanges);
};
render() {
return (
<div>
<ReactInputPoisiton
mouseActivationMethod={MOUSE_ACTIVATION.DOUBLE_CLICK}
touchActivationMethod={TOUCH_ACTIVATION.DOUBLE_TAP}
overrideState={this.state}
onUpdate={this.onUpdate}
>
<DecoratedChild />
</ReactInputPosition>
<SiblingComponent {...this.state} >
</div>
);
}
}
```
## Item Position Feature

@@ -168,0 +208,0 @@

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc