From 02b98ef5ad6af8b698597f30d4cf4f8da9d398ec Mon Sep 17 00:00:00 2001 From: Marek Rozmus Date: Fri, 10 Jan 2020 11:39:56 +0100 Subject: [PATCH 1/3] Add css autoprefixer to example --- examples/package-lock.json | 150 ++++++++++++++++++++++++--------- examples/package.json | 2 + examples/postcss.config.js | 3 + examples/webpack.config.dev.js | 3 +- examples/webpack.config.js | 3 +- 5 files changed, 118 insertions(+), 43 deletions(-) create mode 100644 examples/postcss.config.js diff --git a/examples/package-lock.json b/examples/package-lock.json index fa1415c..bfaf29c 100644 --- a/examples/package-lock.json +++ b/examples/package-lock.json @@ -2620,42 +2620,10 @@ "postcss-value-parser": "^4.0.2" }, "dependencies": { - "browserslist": { - "version": "4.8.0", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.0.tgz", - "integrity": "sha512-HYnxc/oLRWvJ3TsGegR0SRL/UDnknGq2s/a8dYYEO+kOQ9m9apKoS5oiathLKZdh/e9uE+/J3j92qPlGD/vTqA==", - "dev": true, - "requires": { - "caniuse-lite": "^1.0.30001012", - "electron-to-chromium": "^1.3.317", - "node-releases": "^1.1.41" - } - }, - "caniuse-lite": { - "version": "1.0.30001015", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001015.tgz", - "integrity": "sha512-/xL2AbW/XWHNu1gnIrO8UitBGoFthcsDgU9VLK1/dpsoxbaD5LscHozKze05R6WLsBvLhqv78dAPozMFQBYLbQ==", - "dev": true - }, - "electron-to-chromium": { - "version": "1.3.322", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.322.tgz", - "integrity": "sha512-Tc8JQEfGQ1MzfSzI/bTlSr7btJv/FFO7Yh6tanqVmIWOuNCu6/D1MilIEgLtmWqIrsv+o4IjpLAhgMBr/ncNAA==", - "dev": true - }, - "node-releases": { - "version": "1.1.42", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.42.tgz", - "integrity": "sha512-OQ/ESmUqGawI2PRX+XIRao44qWYBBfN54ImQYdWVTQqUckuejOg76ysSqDBK8NG3zwySRVnX36JwDQ6x+9GxzA==", - "dev": true, - "requires": { - "semver": "^6.3.0" - } - }, "postcss": { - "version": "7.0.23", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.23.tgz", - "integrity": "sha512-hOlMf3ouRIFXD+j2VJecwssTwbvsPGJVMzupptg+85WA+i7MwyrydmQAgY3R+m0Bc0exunhbJmijy8u8+vufuQ==", + "version": "7.0.26", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz", + "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==", "dev": true, "requires": { "chalk": "^2.4.2", @@ -2663,12 +2631,6 @@ "supports-color": "^6.1.0" } }, - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -3075,6 +3037,32 @@ "integrity": "sha1-JtII6onje1y95gJQoV8DHBak1ms=", "dev": true }, + "caller-callsite": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz", + "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=", + "dev": true, + "requires": { + "callsites": "^2.0.0" + }, + "dependencies": { + "callsites": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", + "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=", + "dev": true + } + } + }, + "caller-path": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz", + "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=", + "dev": true, + "requires": { + "caller-callsite": "^2.0.0" + } + }, "callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -6001,6 +5989,15 @@ "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", "dev": true }, + "import-cwd": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz", + "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=", + "dev": true, + "requires": { + "import-from": "^2.1.0" + } + }, "import-fresh": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz", @@ -6019,6 +6016,15 @@ } } }, + "import-from": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz", + "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=", + "dev": true, + "requires": { + "resolve-from": "^3.0.0" + } + }, "import-lazy": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz", @@ -6325,6 +6331,12 @@ } } }, + "is-directory": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz", + "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=", + "dev": true + }, "is-extendable": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", @@ -7921,6 +7933,62 @@ "postcss": "^7.0.14" } }, + "postcss-load-config": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz", + "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==", + "dev": true, + "requires": { + "cosmiconfig": "^5.0.0", + "import-cwd": "^2.0.0" + }, + "dependencies": { + "cosmiconfig": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz", + "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==", + "dev": true, + "requires": { + "import-fresh": "^2.0.0", + "is-directory": "^0.3.1", + "js-yaml": "^3.13.1", + "parse-json": "^4.0.0" + } + }, + "import-fresh": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz", + "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=", + "dev": true, + "requires": { + "caller-path": "^2.0.0", + "resolve-from": "^3.0.0" + } + }, + "parse-json": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz", + "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=", + "dev": true, + "requires": { + "error-ex": "^1.3.1", + "json-parse-better-errors": "^1.0.1" + } + } + } + }, + "postcss-loader": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz", + "integrity": "sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==", + "dev": true, + "requires": { + "loader-utils": "^1.1.0", + "postcss": "^7.0.0", + "postcss-load-config": "^2.0.0", + "schema-utils": "^1.0.0" + } + }, "postcss-markdown": { "version": "0.36.0", "resolved": "https://registry.npmjs.org/postcss-markdown/-/postcss-markdown-0.36.0.tgz", diff --git a/examples/package.json b/examples/package.json index eee2ec6..ca9ae2e 100644 --- a/examples/package.json +++ b/examples/package.json @@ -32,6 +32,7 @@ "@babel/plugin-proposal-class-properties": "7.7.4", "@babel/preset-env": "7.7.6", "@babel/preset-react": "7.7.4", + "autoprefixer": "^9.7.3", "babel-eslint": "10.0.3", "babel-loader": "8.0.6", "css-loader": "3.3.0", @@ -42,6 +43,7 @@ "eslint-plugin-react-hooks": "2.3.0", "gh-pages": "2.1.1", "html-webpack-plugin": "3.2.0", + "postcss-loader": "^3.0.0", "prettier": "1.19.1", "style-loader": "1.0.1", "stylelint": "12.0.0", diff --git a/examples/postcss.config.js b/examples/postcss.config.js new file mode 100644 index 0000000..b0f214d --- /dev/null +++ b/examples/postcss.config.js @@ -0,0 +1,3 @@ +module.exports = { + plugins: [require('autoprefixer')] +}; diff --git a/examples/webpack.config.dev.js b/examples/webpack.config.dev.js index a26132f..de51e4e 100644 --- a/examples/webpack.config.dev.js +++ b/examples/webpack.config.dev.js @@ -36,7 +36,8 @@ module.exports = { options: { modules: true } - } + }, + { loader: 'postcss-loader' } ] } ] diff --git a/examples/webpack.config.js b/examples/webpack.config.js index 3864b6a..53cc285 100644 --- a/examples/webpack.config.js +++ b/examples/webpack.config.js @@ -36,7 +36,8 @@ module.exports = { options: { modules: true } - } + }, + { loader: 'postcss-loader' } ] }, { From d4880bc3f25ce546efe668e26a90799a5b87da7d Mon Sep 17 00:00:00 2001 From: Marek Rozmus Date: Fri, 10 Jan 2020 15:11:27 +0100 Subject: [PATCH 2/3] Add separate method for mouse move and touch move --- examples/webpack.config.dev.js | 9 ++++++++- src/SwipeableListItem.js | 22 +++++++++++++++++++--- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/examples/webpack.config.dev.js b/examples/webpack.config.dev.js index de51e4e..0e11725 100644 --- a/examples/webpack.config.dev.js +++ b/examples/webpack.config.dev.js @@ -37,7 +37,14 @@ module.exports = { modules: true } }, - { loader: 'postcss-loader' } + { + loader: 'postcss-loader', + options: { + config: { + path: path.join(__dirname, 'src', 'examples') + } + } + } ] } ] diff --git a/src/SwipeableListItem.js b/src/SwipeableListItem.js index be93375..1bdc640 100644 --- a/src/SwipeableListItem.js +++ b/src/SwipeableListItem.js @@ -102,12 +102,28 @@ class SwipeableListItem extends PureComponent { requestAnimationFrame(this.updatePosition); }; - handleTouchMove = event => this.handleMove(event, event.targetTouches[0]); + handleMouseMove = event => { + if (this.dragStartedWithinItem()) { + const { clientX, clientY } = event; + + this.setDragDirection(clientX, clientY); - handleMouseMove = event => this.handleMove(event, event); + if (this.isSwiping()) { + event.stopPropagation(); + event.preventDefault(); - handleMove = (event, { clientX, clientY }) => { + const delta = clientX - this.dragStartPoint.x; + if (this.shouldMoveItem(delta)) { + this.left = delta; + } + } + } + }; + + handleTouchMove = event => { if (this.dragStartedWithinItem()) { + const { clientX, clientY } = event.targetTouches[0]; + this.setDragDirection(clientX, clientY); if (!event.cancelable) { From 926c275b595f74aa39918e08f1d0e2c9ac19c3ab Mon Sep 17 00:00:00 2001 From: Marek Rozmus Date: Fri, 10 Jan 2020 15:18:49 +0100 Subject: [PATCH 3/3] Fix code review issues --- src/SwipeableListItem.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/SwipeableListItem.js b/src/SwipeableListItem.js index 1bdc640..67c1a26 100644 --- a/src/SwipeableListItem.js +++ b/src/SwipeableListItem.js @@ -113,6 +113,7 @@ class SwipeableListItem extends PureComponent { event.preventDefault(); const delta = clientX - this.dragStartPoint.x; + if (this.shouldMoveItem(delta)) { this.left = delta; } @@ -135,6 +136,7 @@ class SwipeableListItem extends PureComponent { event.preventDefault(); const delta = clientX - this.dragStartPoint.x; + if (this.shouldMoveItem(delta)) { this.left = delta; }