Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: react-native-component/react-native-smart-gesture-password
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: consenlabs/react-native-smart-gesture-password
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Able to merge. These branches can be automatically merged.
  • 1 commit
  • 7 files changed
  • 1 contributor

Commits on Jan 17, 2018

  1. update to react 16

    sapjax committed Jan 17, 2018

    Unverified

    This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
    Copy the full SHA
    c96290c View commit details
Showing with 183 additions and 59 deletions.
  1. +7 −7 Arrow.js
  2. +17 −16 Circle.js
  3. +24 −23 GesturePassword.js
  4. +7 −7 Line.js
  5. +5 −5 Point.js
  6. +119 −0 package-lock.json
  7. +4 −1 package.json
14 changes: 7 additions & 7 deletions Arrow.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, {
PropTypes,
Component,
} from 'react'
import PropTypes from 'prop-types'
import {
StyleSheet,
View,
@@ -44,7 +44,7 @@ export default class Arrow extends Component {
this._transform = Utils.getArrowTransform(props.start, props.end, props.width, this._borderWidth, props.vertexDeg)
}

render () {
render() {
return (
<View
style={[styles.container, {
@@ -55,11 +55,11 @@ export default class Arrow extends Component {
borderBottomColor: 'transparent',
left: this._transform.origin.x,
top: this._transform.origin.y,
transform: [{translateX: this._transform.translateX},
{translateY: this._transform.translateY},
{rotateZ: this._transform.rotateRad + 'rad'}]
}]}/>
)
transform: [{ translateX: this._transform.translateX },
{ translateY: this._transform.translateY },
{ rotateZ: this._transform.rotateRad + 'rad' }]
}]} />
)

}

33 changes: 17 additions & 16 deletions Circle.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, {
PropTypes,
Component,
} from 'react'
import PropTypes from 'prop-types'
import {
StyleSheet,
View,
@@ -36,14 +36,14 @@ export default class Circle extends Component {
}

// 构造
constructor (props) {
constructor(props) {
super(props)
// 初始状态
this.state = {}
this._diameter = props.radius * 2
}

render () {
render() {
return (
<View
//onLayout={ (e) => {
@@ -52,19 +52,20 @@ export default class Circle extends Component {
// //console.log(e.nativeEvent)
//}}
style={[
styles.container,
this.props.isFill ?
{backgroundColor: this.props.color, } :
{borderColor: this.props.color, borderWidth: this.props.borderWidth, backgroundColor: this.props.backgroundColor },
{width: this._diameter,
height: this._diameter,
borderRadius: this.props.radius,
//left: this.props.position.left - borderWidth,
//top: this.props.position.top - borderWidth,
left: this.props.position.left,
top: this.props.position.top,
}
]}>
styles.container,
this.props.isFill ?
{ backgroundColor: this.props.color, } :
{ borderColor: this.props.color, borderWidth: this.props.borderWidth, backgroundColor: this.props.backgroundColor },
{
width: this._diameter,
height: this._diameter,
borderRadius: this.props.radius,
//left: this.props.position.left - borderWidth,
//top: this.props.position.top - borderWidth,
left: this.props.position.left,
top: this.props.position.top,
}
]}>
{this.props.children}
</View>
)
47 changes: 24 additions & 23 deletions GesturePassword.js
Original file line number Diff line number Diff line change
@@ -6,9 +6,9 @@
*/

import React, {
PropTypes,
Component,
} from 'react'
import PropTypes from 'prop-types'
import {
PanResponder,
Dimensions,
@@ -31,7 +31,7 @@ const styles = StyleSheet.create({
}
})

const {width: deviceWidth, height: deviceHeight} = Dimensions.get('window')
const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window')

export default class GesturePassword extends Component {

@@ -69,7 +69,7 @@ export default class GesturePassword extends Component {
}

// 构造
constructor (props) {
constructor(props) {
super(props)

// 初始状态
@@ -90,7 +90,7 @@ export default class GesturePassword extends Component {
this._sequence = []
}

componentWillMount () {
componentWillMount() {

this._panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
@@ -103,13 +103,13 @@ export default class GesturePassword extends Component {

}

componentWillReceiveProps (nextProps) {
componentWillReceiveProps(nextProps) {
this.setState({
isWarning: nextProps.isWarning
});
}

render () {
render() {
return (
<View style={[this.props.style, styles.container]}>
{this.props.topComponent}
@@ -120,7 +120,8 @@ export default class GesturePassword extends Component {
overflow: 'hidden',
width: this.props.gestureAreaLength,
height: this.props.gestureAreaLength,
marginHorizontal: this._gestureAreaMarginHorizontal,}}>
marginHorizontal: this._gestureAreaMarginHorizontal,
}}>
{this._renderLines()}
{this._renderPoints()}
{this.props.showArrow ? this._renderArrows() : null}
@@ -130,7 +131,7 @@ export default class GesturePassword extends Component {
)
}

componentWillUnmount () {
componentWillUnmount() {
if (this._timer != null) {
clearTimeout(this._timer)
this._timer = null
@@ -143,7 +144,7 @@ export default class GesturePassword extends Component {
this._initializePoints()
}

_renderArrows () {
_renderArrows() {
return this.state.arrows.map((arrow, index) => {
if (this.state.isWarning) {
arrow.color = this.props.warningColor
@@ -160,12 +161,12 @@ export default class GesturePassword extends Component {
end={{
x: arrow.end.x - this._gestureAreaLeft,
y: arrow.end.y - this._gestureAreaTop,
}}/>
}} />
)
})
}

_renderPoints () {
_renderPoints() {
return this.state.points.map((point, index) => {
return (
<Point
@@ -179,12 +180,12 @@ export default class GesturePassword extends Component {
isActive={point.isActive}
isWarning={point.isActive ? this.state.isWarning : false}
index={point.index}
position={point.position}/>
position={point.position} />
)
})
}

_renderLines () {
_renderLines() {
return this.state.lines.map((line, index) => {
if (this.state.isWarning) {
line.color = this.props.warningColor
@@ -201,14 +202,14 @@ export default class GesturePassword extends Component {
end={{
x: line.end.x - this._gestureAreaLeft,
y: line.end.y - this._gestureAreaTop,
}}/>
}} />
)
})
}

_initializePoints () {
_initializePoints() {
//avoid repeat invoking(for android)
if(this.state.points.length) {
if (this.state.points.length) {
return
}

@@ -235,7 +236,7 @@ export default class GesturePassword extends Component {
})
}

_getTouchPoint (location) {
_getTouchPoint(location) {
for (let point of this.state.points) {
if (Utils.isPointInPath(location, point.origin, this._pointRadius)) {
return point
@@ -244,31 +245,31 @@ export default class GesturePassword extends Component {
return null
}

_addSequence (index) {
_addSequence(index) {
//if (~this._sequence.findIndex((item) => item === index)) {
if (this._sequence.includes(index)) {
return
}
this._sequence.push(index)
}

_addArrow (arrow) {
_addArrow(arrow) {
this.state.arrows.push(arrow)
let arrows = this.state.arrows
this.setState({
arrows
})
}

_addLine (line) {
_addLine(line) {
this.state.lines.push(line)
let lines = this.state.lines
this.setState({
lines
})
}

_updateLine (start, end) {
_updateLine(start, end) {
this._currentLine.start = start
this._currentLine.end = end

@@ -278,14 +279,14 @@ export default class GesturePassword extends Component {
})
}

_setToActive (point) {
_setToActive(point) {
point.isActive = true
this.setState({
points: this.state.points,
})
}

_reset () {
_reset() {
let points = this.state.points.map((point, index) => {
point.isActive = false
return point
14 changes: 7 additions & 7 deletions Line.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, {
PropTypes,
Component,
} from 'react'
import PropTypes from 'prop-types'
import {
StyleSheet,
View,
@@ -35,13 +35,13 @@ export default class Line extends Component {
}

// 构造
constructor (props) {
constructor(props) {
super(props)
// 初始状态
this.state = {}
}

render () {
render() {
let transform = Utils.getLineTransform(this.props.start, this.props.end)

return (
@@ -52,10 +52,10 @@ export default class Line extends Component {
height: this.props.lineWidth,
left: this.props.start.x,
top: this.props.start.y - this.props.lineWidth / 2,
transform: [{translateX: transform.translateX},
{translateY: transform.translateY},
{rotateZ: transform.rotateRad + 'rad'}]
}]}/>
transform: [{ translateX: transform.translateX },
{ translateY: transform.translateY },
{ rotateZ: transform.rotateRad + 'rad' }]
}]} />
)
}

10 changes: 5 additions & 5 deletions Point.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, {
PropTypes,
Component,
} from 'react'
import PropTypes from 'prop-types'
import {
StyleSheet,
View,
@@ -33,7 +33,7 @@ export default class Point extends Component {
}

// 构造
constructor (props) {
constructor(props) {
super(props)
// 初始状态
this.state = {}
@@ -48,10 +48,10 @@ export default class Point extends Component {

}

render () {
render() {
this._color = this.props.isWarning ?
this.props.warningColor :
( this.props.isActive ? this.props.activeColor : this.props.color )
(this.props.isActive ? this.props.activeColor : this.props.color)

return (
<Circle
@@ -60,7 +60,7 @@ export default class Point extends Component {
radius={this.props.radius}
borderWidth={this.props.borderWidth}
position={this._outerCirclePosition}>
{ (this.props.isActive || this.props.isWarning) ? (
{(this.props.isActive || this.props.isWarning) ? (
<Circle
isFill={true}
color={this._color}
Loading