Fix code review issues

Marek Rozmus · Marek Rozmus · commit cf483d20d3ba · 2019-09-16T14:54:06.000+02:00
diff --git a/examples/.eslintrc b/examples/.eslintrc
@@ -13,6 +13,6 @@
   "rules": {
     "no-undef": "error",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "error"
   }
 }
diff --git a/examples/src/App.js b/examples/src/App.js
@@ -65,7 +65,7 @@ function App() {
   return (
     <div className={styles.example}>
       <h3>react-swipeable-list example</h3>
-      <h5>(switch on dev tools to mobile view)</h5>
+      <h5>(try also mobile view in dev tools for touch events)</h5>
       <h3>Simple example</h3>
       <span className={styles.actionInfo}>{triggeredSimpleItemAction}</span>
       <div className={styles.listContainer}>
diff --git a/examples/src/ComplexListItem.css b/examples/src/ComplexListItem.css
@@ -4,6 +4,8 @@
   border-bottom: 1px solid #c4c4c4;
   flex: 1;
   min-width: 0;
+  user-select: none;
+  cursor: pointer;
 }
 
 .label {
diff --git a/examples/src/app.css b/examples/src/app.css
@@ -17,8 +17,7 @@ h5 {
 }
 
 .listContainer {
-  width: 300px;
-  padding: 8px;
+  width: 360px;
 }
 
 .listItem {
@@ -27,6 +26,9 @@ h5 {
   width: 100%;
   display: flex;
   align-items: center;
+  padding: 4px 8px;
+  user-select: none;
+  cursor: pointer;
 }
 
 .contentLeft {
@@ -52,7 +54,55 @@ h5 {
 }
 
 .complexListContainer {
-  width: 300px;
-  height: 150px;
-  padding: 8px;
+  width: 360px;
+  height: 180px;
+  border-top: 1px solid gray;
+  border-bottom: 1px solid gray;
+}
+
+/* The device with borders */
+.smartphone {
+  position: relative;
+  width: 360px;
+  height: 640px;
+  margin: auto;
+  border: 16px black solid;
+  border-top-width: 60px;
+  border-bottom-width: 60px;
+  border-radius: 36px;
+}
+
+/* The horizontal line on the top of the device */
+.smartphone::before {
+  content: '';
+  display: block;
+  width: 60px;
+  height: 5px;
+  position: absolute;
+  top: -30px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #333;
+  border-radius: 10px;
+}
+
+/* The circle on the bottom of the device */
+.smartphone::after {
+  content: '';
+  display: block;
+  width: 35px;
+  height: 35px;
+  position: absolute;
+  left: 50%;
+  bottom: -65px;
+  transform: translate(-50%, -50%);
+  background: #333;
+  border-radius: 50%;
+}
+
+/* The screen (or content) of the device */
+.smartphone .content {
+  width: 360px;
+  height: 640px;
+  background: white;
 }
diff --git a/examples/src/index.html b/examples/src/index.html
@@ -10,6 +10,8 @@
       name="viewport"
       content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"
     />
+    <meta name="description" content="React swipeable list example" />
+    <meta name="keywords" content="React,Component,Swipe,List,JavaScript" />
     <title>Swipeable list example</title>
   </head>
   <body>
diff --git a/examples/src/index.js b/examples/src/index.js
@@ -1,6 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import styles from './app.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <div className={styles.smartphone}>
+    <div className={styles.content}>
+      <App />
+    </div>
+  </div>,
+  document.getElementById('root')
+);

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,6 @@`
`13`	`13`	`"rules": {`
`14`	`14`	`"no-undef": "error",`
`15`	`15`	`"react-hooks/rules-of-hooks": "error",`
`16`		`- "react-hooks/exhaustive-deps": "warn"`
	`16`	`+ "react-hooks/exhaustive-deps": "error"`
`17`	`17`	`}`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,8 @@`
`4`	`4`	`border-bottom: 1px solid #c4c4c4;`
`5`	`5`	`flex: 1;`
`6`	`6`	`min-width: 0;`
	`7`	`+ user-select: none;`
	`8`	`+ cursor: pointer;`
`7`	`9`	`}`
`8`	`10`
`9`	`11`	`.label {`