Start withSwipe example

klarna · Jun 14, 2017 · 585e172 · 585e172
1 parent e6114da
commit 585e172
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
  },
  "homepage": "https://github.com/klarna/higher-order-components#readme",
  "devDependencies": {
+ "prettier": "^1.4.4",
  "prop-types": "^15.5.10",
  "react": "^15.5.0",
  "react-component-queries": "^2.1.1",

diff --git a/sagui.config.js b/sagui.config.js
@@ -15,7 +15,7 @@ module.exports = {
  'withTheme',
  'withTouchProps',
  'withUncontrolledProp',
- 'withUniqueFormIdentifier'
+ 'withUniqueFormIdentifier',
  ],
- pages: ['example/index']
+ pages: ['example/index', 'example/WithSwipeExample'],
 }
diff --git a/src/example/WithSwipeExample.html b/src/example/WithSwipeExample.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>withSwipe - @klarna/higher-order-components examples</title>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+ <style>body {margin: 0; background-color: #f0f0f0;}</style>
+</head>
+<body>
+ <div id="root"></div>
+</body>
+</html>
diff --git a/src/example/WithSwipeExample.js b/src/example/WithSwipeExample.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { withSwipe } from '../'
+
+const WithSwipe = withSwipe({ velocityThreshold: 0.2 })(function Swipable({ ...props }) {
+ return (
+ <article
+ style={{ backgroundColor: 'grey', width: 100, height: 100, alignSelf: 'center' }}
+ {...props}
+ >
+ <h1>withSwipe</h1>
+ </article>
+ )
+})
+
+render(
+ <main
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ width: '100vw',
+ height: '100vh',
+ }}
+ >
+ <WithSwipe
+ onSwipeLeft={() => console.log('SWIPED_LEFT')}
+ onSwipeRight={() => console.log('SWIPED_RIGHT')}
+ onSwipeUp={() => console.log('SWIPED_UP')}
+ onSwipeDown={() => console.log('SWIPED_DOWN')}
+ />
+ </main>,
+ document.getElementById('root')
+)
diff --git a/src/example/WithUncontrolledPropExample.js b/src/example/WithUncontrolledPropExample.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { withUncontrolledProp } from '../'
+
+export default withUncontrolledProp({
+ prop: 'counter',
+ defaultProp: 'defaultCounter',
+ handlers: {
+ onClick: ({ counter }) => () => counter + 1,
+ },
+})(function StatelessCounter({ counter, onClick }) {
+ return (
+ <article>
+ <h1>withUncontrolledProp</h1>
+ <p>
+ <button onClick={onClick}>Add one</button>
+ Counter: {counter}
+ </p>
+ </article>
+ )
+})
diff --git a/src/example/index.js b/src/example/index.js
@@ -9,7 +9,7 @@ import WithHoverPropsExample from './WithHoverPropsExample'
 import WithMouseDownPropsExample from './WithMouseDownPropsExample'
 import WithTouchPropsExample from './WithTouchPropsExample'
 
-const Example = ({ children }) => (
+const Example = ({ children }) =>
  <div
  style={{
  backgroundColor: 'white',
@@ -20,11 +20,10 @@ const Example = ({ children }) => (
  >
  {children}
  </div>
-)
 
 const Page = componentQueries(
  ({ width }) => (width < 800 ? { mobile: true } : { mobile: false })
-)(({ mobile }) => (
+)(({ mobile }) =>
  <main style={{ padding: 20 }}>
  <h1
  style={{
@@ -58,6 +57,11 @@ const Page = componentQueries(
  <Example>
  <WithHoverPropsExample />
  </Example>
+ <Example>
+ <article>
+ <h1><a href="example/WithSwipeExample.html">withSwipe</a></h1>
+ </article>
+ </Example>
  <Example>
  <WithMouseDownPropsExample />
  </Example>
@@ -66,6 +70,6 @@ const Page = componentQueries(
  </Example>
  </section>
  </main>
-))
+)
 
 render(<Page />, document.getElementById('root'))
diff --git a/src/index.js b/src/index.js
@@ -6,6 +6,7 @@ import _withNotifyOnLowFPS from './withNotifyOnLowFPS'
 import _withHoverProps from './withHoverProps'
 import _withMouseDownProps from './withMouseDownProps'
 import _withTheme from './withTheme'
+import _withSwipe from './withSwipe'
 import _withTouchProps from './withTouchProps'
 import _withUncontrolledProp from './withUncontrolledProp'
 import _withUniqueFormIdentifier from './withUniqueFormIdentifier'
@@ -17,6 +18,7 @@ export const withFocusProps = _withFocusProps
 export const withNotifyOnLowFPS = _withNotifyOnLowFPS
 export const withHoverProps = _withHoverProps
 export const withMouseDownProps = _withMouseDownProps
+export const withSwipe = _withSwipe
 export const withTheme = _withTheme
 export const withTouchProps = _withTouchProps
 export const withUncontrolledProp = _withUncontrolledProp

diff --git a/src/withSwipe.js b/src/withSwipe.js
@@ -0,0 +1,98 @@
+import React, { Component } from 'react'
+
+const initialState = {
+ position: {
+ startX: '',
+ startY: '',
+ deltaDistance: 0,
+ previousDeltaY: 0,
+ },
+ time: {
+ startTime: null,
+ },
+}
+
+export default ({ velocityThreshold }) => Target =>
+ class App extends Component {
+ constructor() {
+ super()
+
+ this.state = initialState
+ }
+ TouchStart(e) {
+ this.setState({
+ time: {
+ ...this.state.time,
+ startTime: new Date().getTime(),
+ },
+ position: {
+ ...this.state.position,
+ mouseStartX: e.touches[0].clientX,
+ mouseStartY: e.touches[0].clientY,
+ boxX: e.target.getBoundingClientRect().left,
+ boxY: e.target.getBoundingClientRect().top,
+ deltaDistance: 0,
+ },
+ })
+ }
+ TouchMove(e) {
+ e.persist()
+ console.log('touchY', e.touches[0].clientY)
+ console.log('mouseStartY', this.state.position.mouseStartY)
+ console.log('boxY', this.state.position.boxY)
+ console.log('deltaY', e.touches[0].clientY - this.state.position.mouseStartY)
+ const changeX = e.touches[0].clientX - this.state.position.mouseStartX,
+ changeY = e.touches[0].clientY - this.state.position.mouseStartY
+
+ this.setState({
+ position: {
+ ...this.state.position,
+ deltaDistance: e.touches[0].clientY - this.state.position.mouseStartY,
+ },
+ style: {
+ ...this.state.style,
+ transform: `translate( ${0}px, ${this.state.position.previousDeltaY + changeY}px)`,
+ },
+ })
+ }
+ TouchEnd(e) {
+ const deltaTime = new Date().getTime() - this.state.time.startTime
+ const velocity = this.state.position.deltaDistance / deltaTime
+ this.gestureHandler(velocity)
+ console.log('new boxY', this.state.position.boxY + this.state.position.deltaDistance)
+ this.setState({
+ position: {
+ ...this.state.position,
+ previousDeltaY: this.state.position.previousDeltaY + this.state.position.deltaDistance,
+ },
+ })
+ }
+
+ gestureHandler(velocity) {
+ const THRESHOLD = velocityThreshold
+
+ switch (true) {
+ case velocity < -THRESHOLD:
+ this.props.onSwipeUp && this.props.onSwipeUp()
+ break
+ case velocity > THRESHOLD:
+ this.props.onSwipeUp && this.props.onSwipeDown()
+ break
+ default:
+ console.log('INVALID_SWIPE')
+ }
+ }
+ render() {
+ const { onSwipeUp, onSwipeDown, ...props } = this.props
+ return (
+ <div
+ style={this.state.style}
+ onTouchStart={e => this.TouchStart(e)}
+ onTouchEnd={e => this.TouchEnd(e)}
+ onTouchMove={e => this.TouchMove(e)}
+ >
+ <Target {...props} />
+ </div>
+ )
+ }
+ }
diff --git a/src/withTheme.js b/src/withTheme.js
@@ -3,14 +3,14 @@ import wrapDisplayName from 'recompose/wrapDisplayName'
 import { withPropsFromContext } from 'react-context-props'
 
 const withTheme = adapter => Target => {
- const WithTheme = withPropsFromContext(['theme'])(({ theme, ...props }) => (
+ const WithTheme = withPropsFromContext(['theme'])(({ theme, ...props }) =>
  <Target
  {...{
  ...props,
  ...(theme ? adapter(theme, props) : {}),
  }}
  />
- ))
+ )
 
  WithTheme.displayName = wrapDisplayName(Target, 'withTheme')
 

diff --git a/yarn.lock b/yarn.lock
@@ -4654,6 +4654,10 @@ prettier@^1.3.1:
  jest-validate "19.0.0"
  minimist "1.2.0"
 
+prettier@^1.4.4:
+ version "1.4.4"
+ resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.4.4.tgz#a8d1447b14c9bf67e6d420dcadd10fb9a4fad65a"
+
 pretty-error@^2.0.2:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.0.tgz#87f4e9d706a24c87d6cbee9fabec001fcf8c75d8"