react-swipe-to-delete-component - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

CHANGELOG.md

@@ -0,1 +1,4 @@
+### v0.5.2
+* Pass custom props to "onDelete" and "onCancel" callbacks.
+
 ### v0.5.1
@@ -2,0 +5,0 @@ * Updated Webpack from 1st to 4th version. Update Babel from 6th to 7th version.

dist/swipe-to-delete.min.js

 /*!
- * React-swipe-to-delete-component v0.5.0
+ * React-swipe-to-delete-component v0.5.2
  * A simple React component implement 'swipe to delete' UI-pattern.
@@ -9,2 +9,2 @@ * https://github.com/gaer87/react-swipe-to-delete-component
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.SwipeToDeleteComponent=t(require("react")):e.SwipeToDeleteComponent=t(e.React)}(window,function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=7)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(11)()},function(e,t){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}},function(e,t,n){var r=n(8),o=n(9);e.exports=function(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?o(e):t}},function(e,t){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(t)}e.exports=n},function(e,t,n){var r=n(10);e.exports=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&r(e,t)}},function(e,t,n){e.exports=n(14)},function(e,t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=r=function(e){return n(e)}:e.exports=r=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":n(e)},r(t)}e.exports=r},function(e,t){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},function(e,t){function n(t,r){return e.exports=n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},n(t,r)}e.exports=n},function(e,t,n){"use strict";var r=n(12);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,i,a){if(a!==r){var c=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 c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){},function(e,t,n){"use strict";n.r(t);var r=n(2),o=n.n(r),i=n(3),a=n.n(i),c=n(4),u=n.n(c),s=n(5),l=n.n(s),f=n(6),d=n.n(f),p=n(0),h=n.n(p),v=n(1),m=n.n(v),y=function(){var e=h.a.createElement("svg",{x:"0px",y:"0px",width:"512px",height:"512px",viewBox:"0 0 900.5 900.5"},h.a.createElement("g",null,h.a.createElement("path",{d:"M176.415,880.5c0,11.046,8.954,20,20,20h507.67c11.046,0,20-8.954,20-20V232.487h-547.67V880.5L176.415,880.5z    M562.75,342.766h75v436.029h-75V342.766z M412.75,342.766h75v436.029h-75V342.766z M262.75,342.766h75v436.029h-75V342.766z",fill:"#FFFFFF"}),h.a.createElement("path",{d:"M618.825,91.911V20c0-11.046-8.954-20-20-20h-297.15c-11.046,0-20,8.954-20,20v71.911v12.5v12.5H141.874   c-11.046,0-20,8.954-20,20v50.576c0,11.045,8.954,20,20,20h34.541h547.67h34.541c11.046,0,20-8.955,20-20v-50.576   c0-11.046-8.954-20-20-20H618.825v-12.5V91.911z M543.825,112.799h-187.15v-8.389v-12.5V75h187.15v16.911v12.5V112.799z",fill:"#FFFFFF"})),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null));return h.a.createElement("div",null,e,e)},g=function(){function e(t){var n=t.deleteSwipe,r=void 0===n?.5:n;o()(this,e),this.deleteSwipe=r,this.startX=0,this.startY=0,this.erasePrevX()}return a()(e,[{key:"erasePrevX",value:function(){this.prevX=null}},{key:"calcSwipePercent",value:function(e){return e.shift/e.width}},{key:"isDelete",value:function(e){return Math.abs(e)>=this.deleteSwipe}}]),e}(),b={Android:function(){return navigator.userAgent.match(/Android/i)},BlackBerry:function(){return navigator.userAgent.match(/BlackBerry/i)},iOS:function(){return navigator.userAgent.match(/iPhone|iPad|iPod/i)},Opera:function(){return navigator.userAgent.match(/Opera Mini/i)},Windows:function(){return navigator.userAgent.match(/IEMobile/i)},any:function(){return this.Android()||this.BlackBerry()||this.iOS()||this.Opera()||this.Windows()}},E=function(){function e(){o()(this,e)}return a()(e,null,[{key:"factory",value:function(e){return e?new S:new k}}]),e}(),S=function(e){function t(){return o()(this,t),u()(this,l()(t).apply(this,arguments))}return d()(t,e),a()(t,[{key:"getPageX",value:function(e){return e.targetTouches[0].pageX}},{key:"getPageY",value:function(e){return e.targetTouches[0].pageY}},{key:"getStartEventName",value:function(){return"touchstart"}},{key:"getInteractEventName",value:function(){return"touchmove"}},{key:"getStopEventNames",value:function(){return["touchend"]}}]),t}(E),k=function(e){function t(){return o()(this,t),u()(this,l()(t).apply(this,arguments))}return d()(t,e),a()(t,[{key:"getPageX",value:function(e){return e.pageX}},{key:"getPageY",value:function(e){return e.pageY}},{key:"getStartEventName",value:function(){return"mousedown"}},{key:"getInteractEventName",value:function(){return"mousemove"}},{key:"getStopEventNames",value:function(){return["mouseup","mouseleave"]}}]),t}(E);n(13);n.d(t,"default",function(){return w});var w=function(e){function t(e){var n;return o()(this,t),(n=u()(this,l()(t).call(this,e))).state={isDeleted:!1},n.model=new g({deleteSwipe:n.props.deleteSwipe}),n.device=E.factory(b.any()),n.bindHandlers(),n}return d()(t,e),a()(t,[{key:"render",value:function(){var e=this;return this.state.isDeleted?null:h.a.createElement(this.props.tag,{className:"swipe-to-delete ".concat(this.props.classNameTag)},[h.a.createElement("div",{key:"delete",className:"js-delete"},this.props.background),h.a.createElement("div",{key:"content",className:"js-content",ref:function(t){return e.regionContent=t}},this.props.children)])}},{key:"componentDidMount",value:function(){this.addHandlers()}},{key:"bindHandlers",value:function(){this.addHandlers=this.addHandlers.bind(this),this.isInteract=this.isInteract.bind(this),this.interact=this.interact.bind(this),this.onMove=this.onMove.bind(this),this.stopInteract=this.stopInteract.bind(this),this.offInteract=this.offInteract.bind(this),this.endInteract=this.endInteract.bind(this),this.onDelete=this.onDelete.bind(this),this.onCancel=this.onCancel.bind(this)}},{key:"addHandlers",value:function(){this.startInteract().then(this.isInteract).then(this.interact).then(this.stopInteract).then(this.endInteract).catch(this.addHandlers)}},{key:"startInteract",value:function(){var e=this;return new Promise(function(t){var n=e.regionContent.firstChild;n.addEventListener(e.device.getStartEventName(),function r(o){n.removeEventListener(e.device.getStartEventName(),r,!1),e.model.startX=e.device.getPageX(o),e.model.startY=e.device.getPageY(o),t()},!1)})}},{key:"isInteract",value:function(){var e=this;return new Promise(function(t,n){document.addEventListener(e.device.getInteractEventName(),function r(o){document.removeEventListener(e.device.getInteractEventName(),r,!1);var i=e.device.getPageX(o)-e.model.startX,a=e.device.getPageY(o)-e.model.startY;Math.abs(i)>Math.abs(a)?t():n()},!1)})}},{key:"interact",value:function(){document.addEventListener(this.device.getInteractEventName(),this.onMove,!1)}},{key:"offInteract",value:function(){document.removeEventListener(this.device.getInteractEventName(),this.onMove,!1)}},{key:"onMove",value:function(e){this.moveAt(e),this.callMoveCB(e)}},{key:"moveAt",value:function(e){var t=this.regionContent.firstChild,n=this.device.getPageX(e)-this.model.startX;t.style.left="".concat(n,"px")}},{key:"callMoveCB",value:function(e){var t=this.device.getPageX(e),n=t-(this.model.prevX||this.model.startX);n&&(n>0?this.props.onRight(e):this.props.onLeft(e),this.model.prevX=t)}},{key:"stopInteract",value:function(){var e=this;return new Promise(function(t,n){var r=e.regionContent.firstChild;e._onStopInteract=function(r){return e.onStopInteract(r,t,n)},e.device.getStopEventNames().forEach(function(t){return r.addEventListener(t,e._onStopInteract,!1)})})}},{key:"onStopInteract",value:function(e,t,n){var r=this,o=this.regionContent.firstChild;this.offInteract(),this.device.getStopEventNames().forEach(function(e){return o.removeEventListener(e,r._onStopInteract,!1)}),this.model.erasePrevX(),e.currentTarget.offsetLeft?t():n()}},{key:"endInteract",value:function(){var e=this,t=this.regionContent.firstChild,n=this.getSwipePercent(),r=new Promise(function(r,o){e.model.isDelete(n)?(t.addEventListener("transitionend",function(e){return r(e)},!1),n<0?t.classList.add("js-transition-delete-left"):t.classList.add("js-transition-delete-right")):(t.addEventListener("transitionend",function(e){return o(e)},!1),t.classList.add("js-transition-cancel"))});return r.then(this.onDelete,this.onCancel),r}},{key:"getSwipePercent",value:function(){var e=this.regionContent.firstChild.offsetLeft,t=this.regionContent.clientWidth;return this.model.calcSwipePercent({shift:e,width:t})}},{key:"onDelete",value:function(){this.props.onDelete(),this.setState({isDeleted:!0})}},{key:"onCancel",value:function(e){this.props.onCancel();var t=e.currentTarget;t.classList.remove("js-transition-cancel"),this.model.startX=this.model.startY=t.style.left=0}}]),t}(h.a.Component);w.defaultProps={tag:"div",classNameTag:"",background:h.a.createElement(y,null),onDelete:function(){},onCancel:function(){},onLeft:function(){},onRight:function(){}},w.propTypes={children:m.a.element.isRequired,background:m.a.element,onDelete:m.a.func,onCancel:m.a.func,onLeft:m.a.func,onRight:m.a.func,tag:m.a.string,classNameTag:m.a.string,deleteSwipe:function(e,t,n){var r=e[t];if(r)return"number"!=typeof r?new Error('Invalid prop "deleteSwipe" in '.concat(n,": can be number only.")):r<0||r>1?new Error('Invalid prop "deleteSwipe" in '.concat(n,": can be in range [0, 1].")):void 0}}}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.SwipeToDeleteComponent=t(require("react")):e.SwipeToDeleteComponent=t(e.React)}(window,function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=7)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(11)()},function(e,t){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}},function(e,t){function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.exports=function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e}},function(e,t,n){var r=n(8),o=n(9);e.exports=function(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?o(e):t}},function(e,t){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(t)}e.exports=n},function(e,t,n){var r=n(10);e.exports=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&r(e,t)}},function(e,t,n){e.exports=n(14)},function(e,t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=r=function(e){return n(e)}:e.exports=r=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":n(e)},r(t)}e.exports=r},function(e,t){e.exports=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}},function(e,t){function n(t,r){return e.exports=n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},n(t,r)}e.exports=n},function(e,t,n){"use strict";var r=n(12);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,i,a){if(a!==r){var c=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 c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:o};return n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){},function(e,t,n){"use strict";n.r(t);var r=n(2),o=n.n(r),i=n(3),a=n.n(i),c=n(4),s=n.n(c),u=n(5),l=n.n(u),f=n(6),p=n.n(f),d=n(0),h=n.n(d),v=n(1),m=n.n(v),y=function(){var e=h.a.createElement("svg",{x:"0px",y:"0px",width:"512px",height:"512px",viewBox:"0 0 900.5 900.5"},h.a.createElement("g",null,h.a.createElement("path",{d:"M176.415,880.5c0,11.046,8.954,20,20,20h507.67c11.046,0,20-8.954,20-20V232.487h-547.67V880.5L176.415,880.5z    M562.75,342.766h75v436.029h-75V342.766z M412.75,342.766h75v436.029h-75V342.766z M262.75,342.766h75v436.029h-75V342.766z",fill:"#FFFFFF"}),h.a.createElement("path",{d:"M618.825,91.911V20c0-11.046-8.954-20-20-20h-297.15c-11.046,0-20,8.954-20,20v71.911v12.5v12.5H141.874   c-11.046,0-20,8.954-20,20v50.576c0,11.045,8.954,20,20,20h34.541h547.67h34.541c11.046,0,20-8.955,20-20v-50.576   c0-11.046-8.954-20-20-20H618.825v-12.5V91.911z M543.825,112.799h-187.15v-8.389v-12.5V75h187.15v16.911v12.5V112.799z",fill:"#FFFFFF"})),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null),h.a.createElement("g",null));return h.a.createElement("div",null,e,e)},g=function(){function e(t){var n=t.deleteSwipe,r=void 0===n?.5:n;o()(this,e),this.deleteSwipe=r,this.startX=0,this.startY=0,this.erasePrevX()}return a()(e,[{key:"erasePrevX",value:function(){this.prevX=null}},{key:"calcSwipePercent",value:function(e){return e.shift/e.width}},{key:"isDelete",value:function(e){return Math.abs(e)>=this.deleteSwipe}}]),e}(),b={Android:function(){return navigator.userAgent.match(/Android/i)},BlackBerry:function(){return navigator.userAgent.match(/BlackBerry/i)},iOS:function(){return navigator.userAgent.match(/iPhone|iPad|iPod/i)},Opera:function(){return navigator.userAgent.match(/Opera Mini/i)},Windows:function(){return navigator.userAgent.match(/IEMobile/i)},any:function(){return this.Android()||this.BlackBerry()||this.iOS()||this.Opera()||this.Windows()}},E=function(){function e(){o()(this,e)}return a()(e,null,[{key:"factory",value:function(e){return e?new S:new k}}]),e}(),S=function(e){function t(){return o()(this,t),s()(this,l()(t).apply(this,arguments))}return p()(t,e),a()(t,[{key:"getPageX",value:function(e){return e.targetTouches[0].pageX}},{key:"getPageY",value:function(e){return e.targetTouches[0].pageY}},{key:"getStartEventName",value:function(){return"touchstart"}},{key:"getInteractEventName",value:function(){return"touchmove"}},{key:"getStopEventNames",value:function(){return["touchend"]}}]),t}(E),k=function(e){function t(){return o()(this,t),s()(this,l()(t).apply(this,arguments))}return p()(t,e),a()(t,[{key:"getPageX",value:function(e){return e.pageX}},{key:"getPageY",value:function(e){return e.pageY}},{key:"getStartEventName",value:function(){return"mousedown"}},{key:"getInteractEventName",value:function(){return"mousemove"}},{key:"getStopEventNames",value:function(){return["mouseup","mouseleave"]}}]),t}(E);n(13);n.d(t,"default",function(){return w});var w=function(e){function t(e){var n;return o()(this,t),(n=s()(this,l()(t).call(this,e))).state={isDeleted:!1},n.model=new g({deleteSwipe:n.props.deleteSwipe}),n.device=E.factory(b.any()),n.bindHandlers(),n}return p()(t,e),a()(t,[{key:"render",value:function(){var e=this;return this.state.isDeleted?null:h.a.createElement(this.props.tag,{className:"swipe-to-delete ".concat(this.props.classNameTag)},[h.a.createElement("div",{key:"delete",className:"js-delete"},this.props.background),h.a.createElement("div",{key:"content",className:"js-content",ref:function(t){return e.regionContent=t}},this.props.children)])}},{key:"componentDidMount",value:function(){this.addHandlers()}},{key:"bindHandlers",value:function(){this.addHandlers=this.addHandlers.bind(this),this.isInteract=this.isInteract.bind(this),this.interact=this.interact.bind(this),this.onMove=this.onMove.bind(this),this.stopInteract=this.stopInteract.bind(this),this.offInteract=this.offInteract.bind(this),this.endInteract=this.endInteract.bind(this),this.onDelete=this.onDelete.bind(this),this.onCancel=this.onCancel.bind(this)}},{key:"addHandlers",value:function(){this.startInteract().then(this.isInteract).then(this.interact).then(this.stopInteract).then(this.endInteract).catch(this.addHandlers)}},{key:"startInteract",value:function(){var e=this;return new Promise(function(t){var n=e.regionContent.firstChild;n.addEventListener(e.device.getStartEventName(),function r(o){n.removeEventListener(e.device.getStartEventName(),r,!1),e.model.startX=e.device.getPageX(o),e.model.startY=e.device.getPageY(o),t()},!1)})}},{key:"isInteract",value:function(){var e=this;return new Promise(function(t,n){document.addEventListener(e.device.getInteractEventName(),function r(o){document.removeEventListener(e.device.getInteractEventName(),r,!1);var i=e.device.getPageX(o)-e.model.startX,a=e.device.getPageY(o)-e.model.startY;Math.abs(i)>Math.abs(a)?t():n()},!1)})}},{key:"interact",value:function(){document.addEventListener(this.device.getInteractEventName(),this.onMove,!1)}},{key:"offInteract",value:function(){document.removeEventListener(this.device.getInteractEventName(),this.onMove,!1)}},{key:"onMove",value:function(e){this.moveAt(e),this.callMoveCB(e)}},{key:"moveAt",value:function(e){var t=this.regionContent.firstChild,n=this.device.getPageX(e)-this.model.startX;t.style.left="".concat(n,"px")}},{key:"callMoveCB",value:function(e){var t=this.device.getPageX(e),n=t-(this.model.prevX||this.model.startX);n&&(n>0?this.props.onRight(e):this.props.onLeft(e),this.model.prevX=t)}},{key:"stopInteract",value:function(){var e=this;return new Promise(function(t,n){var r=e.regionContent.firstChild;e._onStopInteract=function(r){return e.onStopInteract(r,t,n)},e.device.getStopEventNames().forEach(function(t){return r.addEventListener(t,e._onStopInteract,!1)})})}},{key:"onStopInteract",value:function(e,t,n){var r=this,o=this.regionContent.firstChild;this.offInteract(),this.device.getStopEventNames().forEach(function(e){return o.removeEventListener(e,r._onStopInteract,!1)}),this.model.erasePrevX(),e.currentTarget.offsetLeft?t():n()}},{key:"endInteract",value:function(){var e=this,t=this.regionContent.firstChild,n=this.getSwipePercent(),r=new Promise(function(r,o){e.model.isDelete(n)?(t.addEventListener("transitionend",function(e){return r(e)},!1),n<0?t.classList.add("js-transition-delete-left"):t.classList.add("js-transition-delete-right")):(t.addEventListener("transitionend",function(e){return o(e)},!1),t.classList.add("js-transition-cancel"))});return r.then(this.onDelete,this.onCancel),r}},{key:"getSwipePercent",value:function(){var e=this.regionContent.firstChild.offsetLeft,t=this.regionContent.clientWidth;return this.model.calcSwipePercent({shift:e,width:t})}},{key:"onDelete",value:function(){this.props.onDelete(this.customProps),this.setState({isDeleted:!0})}},{key:"onCancel",value:function(e){this.props.onCancel(this.customProps);var t=e.currentTarget;t.classList.remove("js-transition-cancel"),this.model.startX=this.model.startY=t.style.left=0}},{key:"customProps",get:function(){var e=this,n=Object.keys(t.propTypes);return Object.keys(this.props).filter(function(e){return!n.includes(e)}).reduce(function(t,n){return t[n]=e.props[n],t},{})}}]),t}(h.a.Component);w.defaultProps={tag:"div",classNameTag:"",background:h.a.createElement(y,null),onDelete:function(){},onCancel:function(){},onLeft:function(){},onRight:function(){}},w.propTypes={children:m.a.element.isRequired,background:m.a.element,onDelete:m.a.func,onCancel:m.a.func,onLeft:m.a.func,onRight:m.a.func,tag:m.a.string,classNameTag:m.a.string,deleteSwipe:function(e,t,n){var r=e[t];if(r)return"number"!=typeof r?new Error('Invalid prop "deleteSwipe" in '.concat(n,": can be number only.")):r<0||r>1?new Error('Invalid prop "deleteSwipe" in '.concat(n,": can be in range [0, 1].")):void 0}}}])});

gulpfile.js

@@ -14,11 +14,9 @@ const gulp = require('gulp');
 
-gulp.task('clean', () => del([paths.dist]));
+const clean = () => del([paths.dist])
 
-gulp.task('webpack', ['clean'], () => {
-  return gulp.src(paths.src)
-    .pipe(stream(webpackConfig))
-    .pipe(gulp.dest(paths.dist));
-});
+const wp = () => gulp.src(paths.src)
+  .pipe(stream(webpackConfig))
+  .pipe(gulp.dest(paths.dist));
 
-gulp.task('banner', ['webpack'], () => {
+const banner = () => {
   const comment =
@@ -38,10 +36,6 @@ `/*!
     .pipe(gulp.dest(paths.dist));
-});
+}
 
-gulp.task('build', [
-  'clean',
-  'webpack',
-  'banner',
-]);
-
-gulp.task('default', ['build']);
+const build = gulp.series(clean, wp, banner);
+exports.build = build;
+exports.default = gulp.series(build);

package.json

 {
   "name": "react-swipe-to-delete-component",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "A simple React component implement 'swipe to delete' UI-pattern.",
@@ -8,5 +8,5 @@ "homepage": "https://github.com/gaer87/react-swipe-to-delete-component",
   "scripts": {
-    "start": "gulp",
-    "dev": "webpack-dev-server --config ./example/webpack.config.js --open",
-    "example:dist": "webpack --config ./example/webpack.config.js",
+    "start": "webpack-dev-server --config ./example/webpack.config.js --open",
+    "build": "gulp",
+    "build:example": "webpack --config ./example/webpack.config.js",
     "test": "jest --watch",
@@ -45,9 +45,9 @@ "test:coverage": "jest --coverage",
     "del": "^2.2.0",
-    "eslint": "^3.14.1",
-    "eslint-plugin-react": "^6.9.0",
-    "gulp": "^3.9.1",
-    "gulp-rename": "^1.2.2",
-    "gulp-replace": "^0.5.4",
-    "gulp-uglify": "^1.5.3",
-    "gulp-util": "^3.0.7",
+    "eslint": "^6.5.0",
+    "eslint-plugin-react": "^7.14.3",
+    "gulp": "^4.0.2",
+    "gulp-rename": "^1.4.0",
+    "gulp-replace": "^1.0.0",
+    "gulp-uglify": "^3.0.2",
+    "gulp-util": "^3.0.8",
     "jest": "^24.8.0",
@@ -54,0 +54,0 @@ "mini-css-extract-plugin": "^0.6.0",

README.md

@@ -22,16 +22,14 @@ # React-swipe-to-delete-component
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 // Import the react-swipe-to-delete-component
 import SwipeToDelete from 'react-swipe-to-delete-component';
-// CommonJS
-// var SwipeToDelete = require('react-swipe-to-delete-component').default;
 
 const data = [
-  {id: 1, text: 'Best part of the day ☕', date: '5.03.2016'},
-  {id: 2, text: 'What\'s everybody reading?', date: '3.03.2016'},
-  {id: 3, text: 'End of summer reading list', date: '1.03.2016'}
+  {id: 1, text: 'End of summer reading list', date: '1.03.2016'},
+  {id: 2, text: 'Somewhere in the middle 📸', date: '23.01.2017'},
+  {id: 3, text: 'Good morning to 9M of you?!?! ❤️🙏🏻Feeling very grateful and giddy.', date: '12.01.2019'}
 ];
 
 const list = data.map(item => (
-  <SwipeToDelete key={item.id}>
+  <SwipeToDelete key={item.id} item={item}>
     <a className="list-group-item">
@@ -58,4 +56,4 @@ <h4 className="list-group-item-heading">{item.date}</h4>
 - **deleteSwipe** - This is a number. If a content component is swiped more this the number than a swipe-to-delete component will start a delete animation. By default, it's equal "0.5". *Optional*.
-- **onDelete** - This is a function. If a content component is deleted then It will be called. *Optional*.
-- **onCancel** - This is a function. If a content component isn't deleted then It will be called. *Optional*.
+- **onDelete** - This is a function. If a content component is deleted then it will be called. It receives custom props from a `<SwipeToDelete />` component. *Optional*.
+- **onCancel** - This is a function. If a content component isn't deleted then it will be called. It receives custom props from a `<SwipeToDelete />` component. *Optional*.
 - **onRight/onLeft** - This is a function. If a content component is swiped then these functions is called. *Optional*.
@@ -62,0 +60,0 @@

src/js/main.jsx

@@ -172,3 +172,3 @@ import React from 'react';
   onDelete() {
-    this.props.onDelete();
+    this.props.onDelete(this.customProps);
     this.setState({isDeleted: true});
@@ -178,3 +178,3 @@ }
   onCancel(e) {
-    this.props.onCancel();
+    this.props.onCancel(this.customProps);
 
@@ -186,2 +186,11 @@ const target = e.currentTarget;
   }
+
+  get customProps() {
+    const props = Object.keys(SwipeToDelete.propTypes);
+    const customProps = Object.keys(this.props).filter(name => !props.includes(name));
+    return customProps.reduce((memo, name) => {
+      memo[name] = this.props[name];
+      return memo;
+    }, {});
+  }
 }
@@ -188,0 +197,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36627

increased by1.89%

Lines of code

442

increased by0.68%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

70

decreased by-2.78%

No dependency changes