🎉 initial commit

Author: jsdario

.gitignore

@@ -0,0 +1,53 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
+
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots

.npmignore

@@ -0,0 +1,58 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
+
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+
+
+### Also ignore:
+example
+.vscode

Diagnose.js

@@ -0,0 +1,193 @@
+import React, { Component } from 'react'
+import {
+  Dimensions,
+  PanResponder,
+  StyleSheet,
+  View,
+} from 'react-native'
+import { throttle } from 'lodash'
+
+const GREY_LIGHT = '#eeeeee'
+
+export class Dial extends Component {
+  static defaultProps = {
+    initialRadius: 1,
+    initialAngle: 0,
+    precision: 0,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      startingAngle: this.props.initialAngle,
+      startingRadius: this.props.initialRadius,
+      releaseAngle: this.props.initialAngle,
+      releaseRadius: this.props.initialRadius,
+      angle: this.props.initialAngle,
+      radius: this.props.initialRadius,
+    }
+    this.offset = { x: 0, y: 0 }
+    this.updateState = throttle(this.updateState.bind(this), 16)
+  }
+
+  componentWillMount () {
+    this._panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: (e, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (e, gestureState) => {
+        this.measureOffset() // measure again
+        const { deg, radius } = this.calcAngle(e.nativeEvent)
+        this.setState({ startingAngle: deg, startingRadius: radius })
+        return true
+      },
+      onMoveShouldSetPanResponder: (e, g) => true,
+      onMoveShouldSetPanResponderCapture: (e, gestureState) => true,
+      onPanResponderGrant: (e, gestureState) => true,
+      onPanResponderMove: (e, gestureState) => {
+        this.updateAngle(gestureState)
+      },
+      onPanResponderRelease: (e, gestureState) => {
+        const {
+          angle,
+          radius,
+          releaseAngle,
+          releaseRadius,
+        } = this.state
+
+        if (angle !== releaseAngle || radius !== releaseRadius) {
+          this.setState({
+            releaseAngle: angle,
+            releaseRadius: radius,
+          })
+        }
+      },
+    })
+  }
+
+  onLayout (nativeEvent) {
+    /*
+    * Multiple measures to avoid the gap between animated
+    * and not animated views
+    */
+    this.measureOffset()
+    setTimeout(() => this.measureOffset(), 200)
+  }
+
+  measureOffset () {
+    /*
+    * const {x, y, width, height} = nativeEvent.layout
+    * onlayout values are different than measureInWindow
+    * x and y are the distances to its previous element
+    * but in measureInWindow they are relative to the window
+    */
+    const { width: screenWidth } = Dimensions.get('window')
+
+    this.self.measureInWindow((x, y, width, height) => {
+      this.offset = {
+        x: x % screenWidth + width / 2,
+        y: y + height / 2,
+      }
+      this.radius = width / 2
+    })
+  }
+
+  updateAngle (gestureState) {
+    let { deg, radius } = this.calcAngle(gestureState)
+    if (deg < 0) deg += 360
+    if (Math.abs(this.state.angle - deg) > this.props.precision) {
+      this.updateState({ deg, radius })
+    }
+  }
+
+  calcAngle (gestureState) {
+    const { pageX, pageY, moveX, moveY } = gestureState
+    const [x, y] = [pageX || moveX, pageY || moveY]
+    const [dx, dy] = [x - this.offset.x, y - this.offset.y]
+    return {
+      deg: Math.atan2(dy, dx) * 180 / Math.PI + 120,
+      radius: Math.sqrt(dy * dy + dx * dx) / this.radius, // pitagoras r^2 = x^2 + y^2 normalizado
+    }
+  }
+
+  updateState ({ deg, radius = this.state.radius }) {
+    radius = this.state.releaseRadius + radius - this.state.startingRadius
+    if (radius < this.props.radiusMin) radius = this.props.radiusMin
+    else if (radius > this.props.radiusMax) radius = this.props.radiusMax
+
+    const angle = deg + this.state.releaseAngle - this.state.startingAngle
+    if (deg < 0) deg += 360
+
+    if (angle !== this.state.angle || radius !== this.state.radius) {
+      this.setState({ angle, radius })
+      if (this.props.onValueChange) this.props.onValueChange(angle, radius)
+    }
+  }
+
+  render () {
+    const rotate = this.props.fixed ? '0deg' : `${this.state.angle}deg`
+    const scale = this.props.elastic ? this.state.radius : 1
+
+    return (
+      <View
+        onLayout={(nativeEvent) => this.onLayout(nativeEvent)}
+        ref={(node) => { this.self = node }}
+        style={[styles.coverResponder, this.props.responderStyle]}
+        {...this._panResponder.panHandlers}
+      >
+        {this.props.children
+          ? <View style={[this.props.wrapperStyle, { transform: [{ rotate }, { scale }] }]}>
+            {this.props.children}
+          </View>
+          : <DefaultDial style={this.props.style} rotate={rotate} scale={scale} />
+        }
+      </View>
+    )
+  }
+}
+
+export const DefaultDial = ({ style = {}, rotate = '0rad', scale = 1 }) => (
+  <View
+    style={[styles.dial, style, {
+      transform: [
+        { rotate }, { scale },
+      ]
+    }]} >
+    <View style={styles.innerDialDecorator}>
+      <View style={styles.pointer} />
+    </View>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  coverResponder: {
+    padding: 20, // needs a minimum
+  },
+  dial: {
+    width: 120,
+    height: 120,
+    backgroundColor: 'white',
+    borderRadius: 60,
+    elevation: 5,
+    shadowColor: GREY_LIGHT,
+    shadowOffset: { width: 1, height: 2 },
+    shadowOpacity: 0.8,
+    shadowRadius: 1,
+  },
+  innerDialDecorator: {
+    top: 10,
+    left: 10,
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    backgroundColor: 'white',
+    elevation: 3,
+  },
+  pointer: {
+    top: 20,
+    left: 20,
+    position: 'absolute',
+    width: 10,
+    height: 10,
+    backgroundColor: 'rgb(221,223,226)',
+    borderRadius: 5,
+  },
+})

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Netbeast
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,52 @@
+# react-native-dial
+![npm version](https://badge.fury.io/js/react-native-dial.svg)
+
+<a href="https://getyeti.co" target="_blank">
+   <img alt="works with yeti" src="works-with-yeti.png" width="100" />
+</a>
+
+> This package powers [Yeti Smart Home](https://getyeti.co) and is used in production.
+
+A react native reusable and efficient dial knob element.
+
+```javascript
+import { Dial } from 'react-native-dial'
+// ...
+<Dial 
+   initialRadius={brightness * DIF_RADIUS / 100 + MIN_RADIUS}
+   radiusMax={MAX_RADIUS}
+   radiusMin={MIN_RADIUS}
+   onPress={() => this.toggle()}
+   responderStyle={styles.responderStyle}
+   wrapperStyle={styles.wheelWrapper}
+   onValueChange={(a, r) => this.changeBrightness(r)} />
+```
+
+<img alt="demo screenshot" src="screenshot.png" width="350" />
+
+
+Some properties:
+```
+<Dial
+ fixed // disallows angle updates
+ elastic // allows scaling the element
+ initialAngle={Number}
+ initialRadius={Number}
+ radiusMax={Number}
+ radiusMin={Number}
+ responderStyle={ReactNative.Styles}
+ wrapperStyle={ReactNative.Styles}
+ >
+ {/* 
+   Optionally you can pass children so it renders a different component of your choice as a Dial,
+   that can change in scale and angle
+ */}
+   <YourCustomDial />
+ </Dial>
+ 
+```
+
+More documentation is incoming, in the meanwhile please read the source code. It is a single file!
+PRs and issues are more than welcome.
+
+Follow us in Github or https://twitter.com/netbeast_co.

example/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

example/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2