Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-ruler
Advanced tools
react-native-ruler - npm Package Compare versions
Comparing version 0.0.7 to 0.1.0
| { | ||
| "name": "react-native-ruler", | ||
| "version": "0.0.7", | ||
| "version": "0.1.0", | ||
| "description": "A devtool for measuring pixel dimensions on your React Native screens", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -25,4 +25,6 @@ # react-native-ruler | ||
| - Tap the bottom right corner of the ruler to swap between axis | ||
| ## License | ||
| react-native-ruler is [MIT licensed](https://github.com/lfkwtz/react-native-ruler/tree/master/LICENSE) |
| import React, { PureComponent } from 'react'; | ||
| import { View } from 'react-native'; | ||
| import { MeasureY } from './MeasureY'; | ||
| // import { MeasureX } from "./MeasureX"; | ||
| // TODO: finish MeasureX | ||
| import { MeasureX } from './MeasureX'; | ||
| export class RNRuler extends PureComponent { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| showY: true, | ||
| }; | ||
| this.swapLines = this.swapLines.bind(this); | ||
| } | ||
| swapLines() { | ||
| this.setState({ showY: !this.state.showY }); | ||
| } | ||
| render() { | ||
| const { showY } = this.state; | ||
| return ( | ||
| <View style={{ height: '100%', width: '100%', position: 'absolute' }}> | ||
| {/* <MeasureX /> */} | ||
| <MeasureY /> | ||
| <View | ||
| style={{ | ||
| height: '100%', | ||
| width: '100%', | ||
| position: 'absolute', | ||
| zIndex: 100, | ||
| }} | ||
| > | ||
| {showY ? ( | ||
| <MeasureY swapLines={this.swapLines} /> | ||
| ) : ( | ||
| <MeasureX swapLines={this.swapLines} /> | ||
| )} | ||
| </View> | ||
@@ -14,0 +38,0 @@ ); |
@@ -12,3 +12,4 @@ import React, { PureComponent } from 'react'; | ||
| pan: new Animated.ValueXY(), | ||
| xLine: 0, | ||
| opacity: new Animated.Value(1), | ||
| xLine: null, | ||
| }; | ||
@@ -23,3 +24,6 @@ | ||
| this.panResponder = PanResponder.create({ | ||
| onStartShouldSetPanResponder: () => { | ||
| onStartShouldSetPanResponder: ({ nativeEvent }, { numberActiveTouches }) => { | ||
| if (nativeEvent.pageY > height * 0.95 || numberActiveTouches > 1) { | ||
| this.props.swapLines(); | ||
| } | ||
| return true; | ||
@@ -33,7 +37,12 @@ }, | ||
| ]), | ||
| onPanResponderRelease: (e, gesture) => { | ||
| const xLine = width + gesture.dx - 30; | ||
| onPanResponderRelease: (e, { dx }) => { | ||
| const xLine = width + dx - 30; | ||
| console.log('x location', xLine); | ||
| this.setState({ xLine }); | ||
| Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 } }).start(); | ||
| this.setState({ xLine, opacity: new Animated.Value(1) }, () => { | ||
| Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 } }).start(); | ||
| Animated.timing(this.state.opacity, { | ||
| toValue: 0, | ||
| duration: 1500, | ||
| }).start(); | ||
| }); | ||
| }, | ||
@@ -43,23 +52,27 @@ }); | ||
| modifyVerticalAlignment({ tick }) { | ||
| if (tick < 10) { | ||
| return { alignItems: 'flex-end' }; | ||
| } else if (tick > height - 10) { | ||
| return { alignItems: 'flex-start' }; | ||
| setAlignment({ mark }) { | ||
| if (mark === 0) { | ||
| return 2; | ||
| } else if (mark === height) { | ||
| return -12; | ||
| } | ||
| return 2; | ||
| } | ||
| renderVerticalRulerTicks() { | ||
| const ticks = [0, height * 0.25, height * 0.5, height * 0.75, height]; | ||
| return ticks.map((tick) => { | ||
| renderHatchMarks() { | ||
| const marks = [0, height * 0.25, height * 0.5, height * 0.75, height]; | ||
| return marks.map((mark, idx) => { | ||
| return ( | ||
| <View | ||
| key={tick} | ||
| // style={[ | ||
| // { alignItems: "center" }, | ||
| // this.modifyVerticalAlignment({ tick }) | ||
| // ]} | ||
| > | ||
| <View key={mark}> | ||
| <View style={{ width: 10, height: 1, backgroundColor: 'black' }} /> | ||
| <Text style={{ fontSize: 10 }}>{tick}</Text> | ||
| <Text | ||
| style={{ | ||
| fontSize: 11, | ||
| position: 'absolute', | ||
| top: this.setAlignment({ mark }), | ||
| left: 1, | ||
| }} | ||
| > | ||
| {mark} | ||
| </Text> | ||
| </View> | ||
@@ -71,3 +84,3 @@ ); | ||
| render() { | ||
| const { xLine, pan } = this.state; | ||
| const { xLine, pan, opacity } = this.state; | ||
@@ -79,13 +92,31 @@ const panStyle = { | ||
| return ( | ||
| <View style={{ height: '100%', width: '100%', position: 'absolute' }}> | ||
| <Text | ||
| <View | ||
| style={{ | ||
| height: '100%', | ||
| width: '100%', | ||
| position: 'absolute', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <Animated.Text | ||
| style={{ | ||
| opacity, | ||
| position: 'absolute', | ||
| left: xLine - 15, | ||
| top: 15, | ||
| transform: [{ rotate: '90deg' }], | ||
| fontSize: 80, | ||
| }} | ||
| testID="linePosition" | ||
| > | ||
| {xLine.toFixed(2)} | ||
| </Text> | ||
| {xLine === null ? '' : xLine.toFixed(2)} | ||
| </Animated.Text> | ||
| {/* <Text | ||
| style={{ | ||
| position: "absolute", | ||
| left: xLine - 55 + (xLine < 100 ? 10 : 0), | ||
| top: height / 2, | ||
| fontWeight: "bold" | ||
| }} | ||
| > | ||
| {xLine.toFixed(2)} | ||
| </Text> */} | ||
| <View | ||
@@ -96,16 +127,17 @@ style={{ | ||
| height, | ||
| backgroundColor: 'black', | ||
| backgroundColor: xLine === null ? 'transparent' : 'black', | ||
| left: xLine, | ||
| }} | ||
| /> | ||
| <Text | ||
| style={{ | ||
| position: 'absolute', | ||
| left: xLine - 30, | ||
| top: 15, | ||
| transform: [{ rotate: '90deg' }], | ||
| }} | ||
| > | ||
| {xLine.toFixed(2)} | ||
| </Text> | ||
| {/* <Text | ||
| style={{ | ||
| position: "absolute", | ||
| left: xLine + 5, | ||
| top: height / 2, | ||
| fontWeight: "bold", | ||
| transform: [{ rotate: "90deg" }] | ||
| }} | ||
| > | ||
| {xLine.toFixed(2)} | ||
| </Text> */} | ||
| <Animated.View | ||
@@ -120,3 +152,2 @@ {...this.panResponder.panHandlers} | ||
| height: '100%', | ||
| zIndex: 10, | ||
| }, | ||
@@ -127,3 +158,3 @@ ]} | ||
| style={{ | ||
| backgroundColor: 'yellow', | ||
| backgroundColor: 'rgba(254,229,95,0.9)', | ||
| width: 30, | ||
@@ -135,5 +166,6 @@ height, | ||
| borderRightWidth: 1, | ||
| justifyContent: 'space-between', | ||
| }} | ||
| > | ||
| {/* {this.renderVerticalRulerTicks()} */} | ||
| {this.renderHatchMarks()} | ||
| </View> | ||
@@ -145,10 +177,1 @@ </Animated.View> | ||
| } | ||
| const defaultStyles = StyleSheet.create({ | ||
| lineText: { | ||
| position: 'absolute', | ||
| textAlign: 'center', | ||
| width: '100%', | ||
| fontWeight: 'bold', | ||
| }, | ||
| }); |
@@ -12,3 +12,4 @@ import React, { PureComponent } from 'react'; | ||
| pan: new Animated.ValueXY(), | ||
| yLine: 0, | ||
| opacity: new Animated.Value(1), | ||
| yLine: null, | ||
| }; | ||
@@ -23,3 +24,6 @@ | ||
| this.panResponder = PanResponder.create({ | ||
| onStartShouldSetPanResponder: () => { | ||
| onStartShouldSetPanResponder: ({ nativeEvent }, { numberActiveTouches }) => { | ||
| if (nativeEvent.pageX > width * 0.95 || numberActiveTouches > 1) { | ||
| this.props.swapLines(); | ||
| } | ||
| return true; | ||
@@ -33,7 +37,13 @@ }, | ||
| ]), | ||
| onPanResponderRelease: (e, gesture) => { | ||
| const yLine = height + gesture.dy - 30; | ||
| onPanResponderRelease: (e, { dy }) => { | ||
| const yLine = height + dy - 30; | ||
| console.log('y location', yLine); | ||
| this.setState({ yLine }); | ||
| Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 } }).start(); | ||
| this.setState({ yLine, opacity: new Animated.Value(1) }, () => { | ||
| Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 } }).start(); | ||
| Animated.timing(this.state.opacity, { | ||
| toValue: 0, | ||
| duration: 1500, | ||
| }).start(); | ||
| }); | ||
| }, | ||
@@ -43,3 +53,3 @@ }); | ||
| modifyAlignment({ mark }) { | ||
| setAlignment({ mark }) { | ||
| if (mark === 0) { | ||
@@ -57,5 +67,5 @@ return { alignItems: 'flex-start' }; | ||
| return ( | ||
| <View key={mark} style={[{ width: 50 }, this.modifyAlignment({ mark })]}> | ||
| <View key={mark} style={[{ width: 50 }, this.setAlignment({ mark })]}> | ||
| <View style={{ width: 1, height: 10, backgroundColor: 'black' }} /> | ||
| <Text>{mark}</Text> | ||
| <Text style={{ fontSize: 11 }}>{mark}</Text> | ||
| </View> | ||
@@ -67,3 +77,3 @@ ); | ||
| render() { | ||
| const { yLine, pan } = this.state; | ||
| const { yLine, pan, opacity } = this.state; | ||
@@ -75,13 +85,31 @@ const panStyle = { | ||
| return ( | ||
| <View style={{ height: '100%', width: '100%', position: 'absolute' }}> | ||
| <Text | ||
| style={[ | ||
| defaultStyles.lineText, | ||
| { | ||
| top: yLine - 15, | ||
| }, | ||
| ]} | ||
| <View | ||
| style={{ | ||
| height: '100%', | ||
| width: '100%', | ||
| position: 'absolute', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| <Animated.Text | ||
| style={{ | ||
| opacity, | ||
| position: 'absolute', | ||
| fontSize: 80, | ||
| }} | ||
| testID="linePosition" | ||
| > | ||
| {yLine.toFixed(2)} | ||
| </Text> | ||
| {yLine === null ? '' : yLine.toFixed(2)} | ||
| </Animated.Text> | ||
| {/* <Text | ||
| style={[ | ||
| defaultStyles.lineText, | ||
| { | ||
| top: yLine - 15 | ||
| } | ||
| ]} | ||
| > | ||
| {yLine.toFixed(2)} | ||
| </Text> */} | ||
| <View | ||
@@ -92,16 +120,16 @@ style={{ | ||
| height: 1, | ||
| backgroundColor: 'black', | ||
| backgroundColor: yLine === null ? 'transparent' : 'black', | ||
| top: yLine, | ||
| }} | ||
| /> | ||
| <Text | ||
| style={[ | ||
| defaultStyles.lineText, | ||
| { | ||
| top: yLine, | ||
| }, | ||
| ]} | ||
| > | ||
| {yLine.toFixed(2)} | ||
| </Text> | ||
| {/* <Text | ||
| style={[ | ||
| defaultStyles.lineText, | ||
| { | ||
| top: yLine | ||
| } | ||
| ]} | ||
| > | ||
| {yLine.toFixed(2)} | ||
| </Text> */} | ||
| <Animated.View | ||
@@ -116,3 +144,2 @@ {...this.panResponder.panHandlers} | ||
| width: '100%', | ||
| zIndex: 10, | ||
| }, | ||
@@ -123,3 +150,3 @@ ]} | ||
| style={{ | ||
| backgroundColor: 'yellow', | ||
| backgroundColor: 'rgba(254,229,95,0.9)', | ||
| justifyContent: 'space-between', | ||
@@ -126,0 +153,0 @@ flexDirection: 'row', |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.31%
722087
- Lines of code
- increased by23.65%
366
- Number of lines in readme file
- increased by7.14%
30
No dependency changes