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

Comparing version 0.5.5 to 0.5.6

CHANGELOG.md

@@ -0,1 +1,4 @@
+### v0.5.6
+* Use on a server - [Not working with NextJS](https://github.com/gaer87/react-swipe-to-delete-component/issues/31)
+
 ### v0.5.5
@@ -2,0 +5,0 @@ * Update libs and correct memory leak issue

dist/swipe-to-delete.min.js

 /*!
- * React-swipe-to-delete-component v0.5.4
+ * React-swipe-to-delete-component v0.5.6
  * A simple React component implement 'swipe to delete' UI-pattern.
  * https://github.com/gaer87/react-swipe-to-delete-component
 
- * Copyright 2020, Fedotov Alexander
+ * Copyright 2022, Fedotov Alexander
  * Released under the MIT license.
  */
-!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){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(8);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){var r=n(9),o=n(10);e.exports=function(e,t){return!t||"object"!==r(t)&&"function"!=typeof t?o(e):t}},function(e,t,n){e.exports=n(14)},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){function n(t){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?e.exports=n=function(e){return typeof e}:e.exports=n=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(t)}e.exports=n},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,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),n.d(t,"default",(function(){return w}));var r=n(2),o=n.n(r),i=n(3),a=n.n(i),c=n(5),s=n.n(c),u=n(6),l=n.n(u),f=n(4),p=n.n(f),h=n(0),d=n.n(h),v=n(1),m=n.n(v),y=function(){var e=d.a.createElement("svg",{x:"0px",y:"0px",width:"512px",height:"512px",viewBox:"0 0 900.5 900.5"},d.a.createElement("g",null,d.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"}),d.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"})),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null),d.a.createElement("g",null));return d.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()}};function E(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=p()(e);if(t){var o=p()(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return l()(this,n)}}var I=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){s()(n,e);var t=E(n);function n(){return o()(this,n),t.apply(this,arguments)}return a()(n,[{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"]}}]),n}(I),k=function(e){s()(n,e);var t=E(n);function n(){return o()(this,n),t.apply(this,arguments)}return a()(n,[{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"]}}]),n}(I);n(13);function P(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=p()(e);if(t){var o=p()(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return l()(this,n)}}var w=function(e){s()(n,e);var t=P(n);function n(e){var r;return o()(this,n),(r=t.call(this,e)).state={isDeleted:!1},r.model=new g({deleteSwipe:r.props.deleteSwipe}),r.device=I.factory(b.any()),r.bindHandlers(),r}return a()(n,[{key:"render",value:function(){var e=this;return this.state.isDeleted?null:d.a.createElement(this.props.tag,{className:"swipe-to-delete ".concat(this.props.classNameTag)},[d.a.createElement("div",{key:"delete",className:"js-delete"},this.props.background),d.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:"componentWillUnmount",value:function(){this.regionContent&&this.removeHandlers()}},{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:"removeHandlers",value:function(){var e=this.regionContent.firstChild;this.stopListenStartInteract(e),this.stopListenIsInteract(),this.offInteract(),this.stopListenStopInteract(e),this.stopListenEndInteract(e)}},{key:"startInteract",value:function(){var e=this;return new Promise((function(t){var n=e.regionContent.firstChild;e._onStartInteract=function(r){e.stopListenStartInteract(n),e.model.startX=e.device.getPageX(r),e.model.startY=e.device.getPageY(r),t()},n.addEventListener(e.device.getStartEventName(),e._onStartInteract,!1)}))}},{key:"stopListenStartInteract",value:function(e){e.removeEventListener(this.device.getStartEventName(),this._onStartInteract)}},{key:"isInteract",value:function(){var e=this;return new Promise((function(t,n){e._onIsInteract=function(r){e.stopListenIsInteract();var o=e.device.getPageX(r)-e.model.startX,i=e.device.getPageY(r)-e.model.startY;Math.abs(o)>Math.abs(i)?t():n()},document.addEventListener(e.device.getInteractEventName(),e._onIsInteract,!1)}))}},{key:"stopListenIsInteract",value:function(){document.removeEventListener(this.device.getInteractEventName(),this._onIsInteract)}},{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(o){e.stopListenStopInteract(r),e.onStopInteract(o,t,n)},e.device.getStopEventNames().forEach((function(t){return r.addEventListener(t,e._onStopInteract,!1)}))}))}},{key:"stopListenStopInteract",value:function(e){var t=this;this.device.getStopEventNames().forEach((function(n){return e.removeEventListener(n,t._onStopInteract)}))}},{key:"onStopInteract",value:function(e,t,n){this.offInteract(),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._onTransitionendDelete=function(n){e.stopListenEndInteract(t),r(n)},e._onTransitionendCancel=function(n){e.stopListenEndInteract(t),o(n)},e.model.isDelete(n)?(t.addEventListener("transitionend",e._onTransitionendDelete,!1),n<0?t.classList.add("js-transition-delete-left"):t.classList.add("js-transition-delete-right")):(t.addEventListener("transitionend",e._onTransitionendCancel,!1),t.classList.add("js-transition-cancel"))}));return r.then(this.onDelete,this.onCancel),r}},{key:"stopListenEndInteract",value:function(e){e.removeEventListener("transitionend",this._onTransitionendDelete),e.removeEventListener("transitionend",this._onTransitionendCancel)}},{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(){var e=this;this.setState({isDeleted:!0},(function(){e.props.onDelete(e.customProps)}))}},{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,t=Object.keys(n.propTypes);return Object.keys(this.props).filter((function(e){return!t.includes(e)})).reduce((function(t,n){return t[n]=e.props[n],t}),{})}}]),n}(d.a.Component);w.defaultProps={tag:"div",classNameTag:"",background:d.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)}(this,(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(12)()},function(e,t){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},e.exports.__esModule=!0,e.exports.default=e.exports},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),Object.defineProperty(e,"prototype",{writable:!1}),e},e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},e.exports.__esModule=!0,e.exports.default=e.exports,n(t)}e.exports=n,e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t,n){var r=n(8);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}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&r(e,t)},e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t,n){var r=n(9).default,o=n(10);e.exports=function(e,t){if(t&&("object"===r(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return o(e)},e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t,n){e.exports=n(14)},function(e,t){function n(t,r){return e.exports=n=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},e.exports.__esModule=!0,e.exports.default=e.exports,n(t,r)}e.exports=n,e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t){function n(t){return e.exports=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.exports.__esModule=!0,e.exports.default=e.exports,n(t)}e.exports=n,e.exports.__esModule=!0,e.exports.default=e.exports},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},e.exports.__esModule=!0,e.exports.default=e.exports},function(e,t,n){},function(e,t,n){"use strict";var r=n(13);function o(){}function i(){}i.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,i,a){if(a!==r){var s=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 s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bigint: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){"use strict";n.r(t),n.d(t,"default",(function(){return k}));var r=n(2),o=n.n(r),i=n(3),a=n.n(i),s=n(5),c=n.n(s),u=n(6),l=n.n(u),f=n(4),p=n.n(f),d=n(0),h=n.n(d),v=n(1),y=n.n(v),m=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()}};function x(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=p()(e);if(t){var o=p()(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return l()(this,n)}}var E=function(){function e(){o()(this,e)}return a()(e,null,[{key:"factory",value:function(e){return e?new I:new _}}]),e}(),I=function(e){c()(n,e);var t=x(n);function n(){return o()(this,n),t.apply(this,arguments)}return a()(n,[{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"]}}]),n}(E),_=function(e){c()(n,e);var t=x(n);function n(){return o()(this,n),t.apply(this,arguments)}return a()(n,[{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"]}}]),n}(E);n(11);function S(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=p()(e);if(t){var o=p()(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return l()(this,n)}}var k=function(e){c()(n,e);var t=S(n);function n(e){var r;return o()(this,n),(r=t.call(this,e)).state={isDeleted:!1},r.model=new g({deleteSwipe:r.props.deleteSwipe}),r.bindHandlers(),r}return a()(n,[{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.device=E.factory(b.any()),this.addHandlers()}},{key:"componentWillUnmount",value:function(){this.regionContent&&this.removeHandlers()}},{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:"removeHandlers",value:function(){var e=this.regionContent.firstChild;this.stopListenStartInteract(e),this.stopListenIsInteract(),this.offInteract(),this.stopListenStopInteract(e),this.stopListenEndInteract(e)}},{key:"startInteract",value:function(){var e=this;return new Promise((function(t){var n=e.regionContent.firstChild;e._onStartInteract=function(r){e.stopListenStartInteract(n),e.model.startX=e.device.getPageX(r),e.model.startY=e.device.getPageY(r),t()},n.addEventListener(e.device.getStartEventName(),e._onStartInteract,!1)}))}},{key:"stopListenStartInteract",value:function(e){e.removeEventListener(this.device.getStartEventName(),this._onStartInteract)}},{key:"isInteract",value:function(){var e=this;return new Promise((function(t,n){e._onIsInteract=function(r){e.stopListenIsInteract();var o=e.device.getPageX(r)-e.model.startX,i=e.device.getPageY(r)-e.model.startY;Math.abs(o)>Math.abs(i)?t():n()},document.addEventListener(e.device.getInteractEventName(),e._onIsInteract,!1)}))}},{key:"stopListenIsInteract",value:function(){document.removeEventListener(this.device.getInteractEventName(),this._onIsInteract)}},{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(o){e.stopListenStopInteract(r),e.onStopInteract(o,t,n)},e.device.getStopEventNames().forEach((function(t){return r.addEventListener(t,e._onStopInteract,!1)}))}))}},{key:"stopListenStopInteract",value:function(e){var t=this;this.device.getStopEventNames().forEach((function(n){return e.removeEventListener(n,t._onStopInteract)}))}},{key:"onStopInteract",value:function(e,t,n){this.offInteract(),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._onTransitionendDelete=function(n){e.stopListenEndInteract(t),r(n)},e._onTransitionendCancel=function(n){e.stopListenEndInteract(t),o(n)},e.model.isDelete(n)?(t.addEventListener("transitionend",e._onTransitionendDelete,!1),n<0?t.classList.add("js-transition-delete-left"):t.classList.add("js-transition-delete-right")):(t.addEventListener("transitionend",e._onTransitionendCancel,!1),t.classList.add("js-transition-cancel"))}));return r.then(this.onDelete,this.onCancel),r}},{key:"stopListenEndInteract",value:function(e){e.removeEventListener("transitionend",this._onTransitionendDelete),e.removeEventListener("transitionend",this._onTransitionendCancel)}},{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,t=Object.keys(n.propTypes);return Object.keys(this.props).filter((function(e){return!t.includes(e)})).reduce((function(t,n){return t[n]=e.props[n],t}),{})}}]),n}(h.a.Component);k.defaultProps={tag:"div",classNameTag:"",background:h.a.createElement(m,null),onDelete:function(){},onCancel:function(){},onLeft:function(){},onRight:function(){}},k.propTypes={children:y.a.element.isRequired,background:y.a.element,onDelete:y.a.func,onCancel:y.a.func,onLeft:y.a.func,onRight:y.a.func,tag:y.a.string,classNameTag:y.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}}}])}));

package.json

 {
   "name": "react-swipe-to-delete-component",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "A simple React component implement 'swipe to delete' UI-pattern.",
@@ -34,2 +34,5 @@ "homepage": "https://github.com/gaer87/react-swipe-to-delete-component",
   "github": "https://github.com/gaer87/react-swipe-to-delete-component",
+  "engines": {
+    "node": "^10.0.0"
+  },
   "devDependencies": {
@@ -36,0 +39,0 @@ "@babel/core": "^7.12.7",

README.md

@@ -11,5 +11,4 @@ # React-swipe-to-delete-component
 ```
-npm install --save react-swipe-to-delete-component
+npm install react-swipe-to-delete-component
 ```
-Else you can download the latest builds directly from the "dist" folder above.
 
@@ -26,2 +25,4 @@ ## Usage
 import SwipeToDelete from 'react-swipe-to-delete-component';
+// Import styles of the react-swipe-to-delete-component
+import 'react-swipe-to-delete-component/dist/swipe-to-delete.css';
 
@@ -31,3 +32,3 @@ const data = [
   {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'}
+  {id: 3, text: 'Good morning to 9M of you?!?! ❤️🙏🏻Feeling very grateful and giddy.', date: '12.01.2022'}
 ];
@@ -63,3 +64,3 @@
 ### Styles
-You may set up styles in "swipe-to-delete.css" under the comment "Custom styles". The class *js-content* is content region, *js-delete* is delete region. Classes *js-transition-delete-right* and *js-transition-delete-left* are added on a content component when it's swiped more than "deleteSwipe" options. Class *js-transition-cancel* is added when a content component swiped less than "deleteSwipe" options. Animations are made by CSS3 transition.
+The class *js-content* is content region, *js-delete* is delete region. Classes *js-transition-delete-right* and *js-transition-delete-left* are added on a content component when it's swiped more than "deleteSwipe" options. Class *js-transition-cancel* is added when a content component swiped less than "deleteSwipe" options. Animations are made by CSS3 transition.
 
@@ -66,0 +67,0 @@ ## Changes

src/js/main.jsx

@@ -17,3 +17,2 @@ import React from 'react';
     this.model = new Model({deleteSwipe: this.props.deleteSwipe});
-    this.device = Device.factory(isMobile.any());
 
@@ -39,2 +38,3 @@ this.bindHandlers();
   componentDidMount() {
+    this.device = Device.factory(isMobile.any());
     this.addHandlers();
@@ -214,5 +214,4 @@ }
   onDelete() {
-    this.setState({isDeleted: true}, () => {
-      this.props.onDelete(this.customProps);
-    });
+    this.props.onDelete(this.customProps);
+    this.setState({isDeleted: true});
   }
@@ -219,0 +218,0 @@

webpack.config.js

@@ -13,5 +13,6 @@ 'use strict';
     path: path.resolve(__dirname, 'dist'),
+    filename: 'swipe-to-delete.min.js',
     library: '[name]',
     libraryTarget: 'umd',
-    filename: 'swipe-to-delete.min.js',
+    globalObject: 'this'
   },
@@ -18,0 +19,0 @@

No alert changes

Improved metrics

Total package byte prevSize

39993

increased by2.33%

Number of lines in readme file

71

increased by1.43%

No dependency changes