From a605fe27397dc15b8c3fcf90c2677746d0c177b6 Mon Sep 17 00:00:00 2001 From: Bertoncelli Giovanni Date: Thu, 4 Oct 2018 12:43:45 +0200 Subject: [PATCH 1/2] Fixed problem with ReactPromps and with the layout --- src/CircularSlider.js | 462 +++++++++++++++++++++--------------------- src/ClockFace.js | 3 +- 2 files changed, 236 insertions(+), 229 deletions(-) diff --git a/src/CircularSlider.js b/src/CircularSlider.js index 89a84e3..05f7f31 100644 --- a/src/CircularSlider.js +++ b/src/CircularSlider.js @@ -1,256 +1,262 @@ -import React, { PureComponent, PropTypes } from 'react'; +import React, { PureComponent, } from 'react'; +import PropTypes from 'prop-types'; import { PanResponder, View } from 'react-native'; import Svg, { Circle, G, LinearGradient, Path, Defs, Stop } from 'react-native-svg'; import range from 'lodash.range'; import { interpolateHcl as interpolateGradient } from 'd3-interpolate'; import ClockFace from './ClockFace'; - function calculateArcColor(index0, segments, gradientColorFrom, gradientColorTo) { - const interpolate = interpolateGradient(gradientColorFrom, gradientColorTo); +const interpolate = interpolateGradient(gradientColorFrom, gradientColorTo); - return { - fromColor: interpolate(index0 / segments), - toColor: interpolate((index0 + 1) / segments), - } +return { +fromColor: interpolate(index0 / segments), +toColor: interpolate((index0 + 1) / segments), +} } function calculateArcCircle(index0, segments, radius, startAngle0 = 0, angleLength0 = 2 * Math.PI) { - // Add 0.0001 to the possible angle so when start = stop angle, whole circle is drawn - const startAngle = startAngle0 % (2 * Math.PI); - const angleLength = angleLength0 % (2 * Math.PI); - const index = index0 + 1; - const fromAngle = angleLength / segments * (index - 1) + startAngle; - const toAngle = angleLength / segments * index + startAngle; - const fromX = radius * Math.sin(fromAngle); - const fromY = -radius * Math.cos(fromAngle); - const realToX = radius * Math.sin(toAngle); - const realToY = -radius * Math.cos(toAngle); - - // add 0.005 to start drawing a little bit earlier so segments stick together - const toX = radius * Math.sin(toAngle + 0.005); - const toY = -radius * Math.cos(toAngle + 0.005); - - return { - fromX, - fromY, - toX, - toY, - realToX, - realToY, - }; +// Add 0.0001 to the possible angle so when start = stop angle, whole circle is drawn +const startAngle = startAngle0 % (2 * Math.PI); +const angleLength = angleLength0 % (2 * Math.PI); +const index = index0 + 1; +const fromAngle = angleLength / segments * (index - 1) + startAngle; +const toAngle = angleLength / segments * index + startAngle; +const fromX = radius * Math.sin(fromAngle); +const fromY = -radius * Math.cos(fromAngle); +const realToX = radius * Math.sin(toAngle); +const realToY = -radius * Math.cos(toAngle); + +// add 0.005 to start drawing a little bit earlier so segments stick together +const toX = radius * Math.sin(toAngle + 0.005); +const toY = -radius * Math.cos(toAngle + 0.005); + +return { +fromX, +fromY, +toX, +toY, +realToX, +realToY, +}; } function getGradientId(index) { - return `gradient${index}`; + return `gradient${index}`; } export default class CircularSlider extends PureComponent { - static propTypes = { - onUpdate: PropTypes.func.isRequired, - startAngle: PropTypes.number.isRequired, - angleLength: PropTypes.number.isRequired, - segments: PropTypes.number, - strokeWidth: PropTypes.number, - radius: PropTypes.number, - gradientColorFrom: PropTypes.string, - gradientColorTo: PropTypes.string, - showClockFace: PropTypes.bool, - clockFaceColor: PropTypes.string, - bgCircleColor: PropTypes.string, - stopIcon: PropTypes.element, - startIcon: PropTypes.element, - } - - static defaultProps = { - segments: 5, - strokeWidth: 40, - radius: 145, - gradientColorFrom: '#ff9800', - gradientColorTo: '#ffcf00', - clockFaceColor: '#9d9d9d', - bgCircleColor: '#171717', - } - - state = { - circleCenterX: false, - circleCenterY: false, - } - - componentWillMount() { - this._sleepPanResponder = PanResponder.create({ - onMoveShouldSetPanResponder: (evt, gestureState) => true, - onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, - onPanResponderGrant: (evt, gestureState) => this.setCircleCenter(), - onPanResponderMove: (evt, { moveX, moveY }) => { - const { circleCenterX, circleCenterY } = this.state; - const { angleLength, startAngle, onUpdate } = this.props; - - const currentAngleStop = (startAngle + angleLength) % (2 * Math.PI); - let newAngle = Math.atan2(moveY - circleCenterY, moveX - circleCenterX) + Math.PI/2; - - if (newAngle < 0) { - newAngle += 2 * Math.PI; - } +static propTypes = { +onUpdate: PropTypes.func.isRequired, +startAngle: PropTypes.number.isRequired, +angleLength: PropTypes.number.isRequired, +segments: PropTypes.number, +strokeWidth: PropTypes.number, +radius: PropTypes.number, +gradientColorFrom: PropTypes.string, +gradientColorTo: PropTypes.string, +showClockFace: PropTypes.bool, +clockFaceColor: PropTypes.string, +bgCircleColor: PropTypes.string, +stopIcon: PropTypes.element, +startIcon: PropTypes.element, +} - let newAngleLength = currentAngleStop - newAngle; +static defaultProps = { +segments: 5, +strokeWidth: 40, +radius: 145, +gradientColorFrom: '#ff9800', +gradientColorTo: '#ffcf00', +clockFaceColor: '#9d9d9d', +bgCircleColor: '#171717', +} - if (newAngleLength < 0) { - newAngleLength += 2 * Math.PI; - } +state = { +circleCenterX: false, +circleCenterY: false, +} - onUpdate({ startAngle: newAngle, angleLength: newAngleLength % (2 * Math.PI) }); - }, - }); +componentWillMount() { +this._sleepPanResponder = PanResponder.create({ +onMoveShouldSetPanResponder: (evt, gestureState) => true, +onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, +onPanResponderGrant: (evt, gestureState) => this.setCircleCenter(), - this._wakePanResponder = PanResponder.create({ - onMoveShouldSetPanResponder: (evt, gestureState) => true, - onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, - onPanResponderGrant: (evt, gestureState) => this.setCircleCenter(), - onPanResponderMove: (evt, { moveX, moveY }) => { - const { circleCenterX, circleCenterY } = this.state; - const { angleLength, startAngle, onUpdate } = this.props; + onPanResponderMove: (evt, { moveX, moveY }) => { + const { circleCenterX, circleCenterY } = this.state; + const { angleLength, startAngle, onUpdate } = this.props; - let newAngle = Math.atan2(moveY - circleCenterY, moveX - circleCenterX) + Math.PI/2; - let newAngleLength = (newAngle - startAngle) % (2 * Math.PI); + const currentAngleStop = (startAngle + angleLength) % (2 * Math.PI); + let newAngle = Math.atan2(moveY - circleCenterY, moveX - circleCenterX) + Math.PI/2; - if (newAngleLength < 0) { - newAngleLength += 2 * Math.PI; - } + if (newAngle < 0) { + newAngle += 2 * Math.PI; + } - onUpdate({ startAngle, angleLength: newAngleLength }); - }, - }); - } - - onLayout = () => { - this.setCircleCenter(); - } - - setCircleCenter = () => { - this._circle.measure((x, y, w, h, px, py) => { - const halfOfContainer = this.getContainerWidth() / 2; - this.setState({ circleCenterX: px + halfOfContainer, circleCenterY: py + halfOfContainer }); - }); - } - - getContainerWidth() { - const { strokeWidth, radius } = this.props; - return strokeWidth + radius * 2 + 2; - } - - render() { - const { startAngle, angleLength, segments, strokeWidth, radius, gradientColorFrom, gradientColorTo, bgCircleColor, - showClockFace, clockFaceColor, startIcon, stopIcon } = this.props; - - const containerWidth = this.getContainerWidth(); - - const start = calculateArcCircle(0, segments, radius, startAngle, angleLength); - const stop = calculateArcCircle(segments - 1, segments, radius, startAngle, angleLength); - - return ( - - this._circle = circle} - > - - { - range(segments).map(i => { - const { fromX, fromY, toX, toY } = calculateArcCircle(i, segments, radius, startAngle, angleLength); - const { fromColor, toColor } = calculateArcColor(i, segments, gradientColorFrom, gradientColorTo) - return ( - - - - - ) - }) - } - - - {/* - ##### Circle - */} - - - true, + onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, + onPanResponderGrant: (evt, gestureState) => this.setCircleCenter(), + + onPanResponderMove: (evt, { moveX, moveY }) => { + const { circleCenterX, circleCenterY } = this.state; + const { angleLength, startAngle, onUpdate } = this.props; + + let newAngle = Math.atan2(moveY - circleCenterY, moveX - circleCenterX) + Math.PI/2; + let newAngleLength = (newAngle - startAngle) % (2 * Math.PI); + + if (newAngleLength < 0) { + newAngleLength += 2 * Math.PI; + } + + onUpdate({ startAngle, angleLength: newAngleLength }); + }, +}); +} + +onLayout = () => { +this.setCircleCenter(); +} + +setCircleCenter = () => { +this._circle.measure((x, y, w, h, px, py) => { +const halfOfContainer = this.getContainerWidth() / 2; +this.setState({ circleCenterX: px + halfOfContainer, circleCenterY: py + halfOfContainer }); +}); +} + +getContainerWidth() { +const { strokeWidth, radius } = this.props; +return strokeWidth + radius * 2 + 2; +} + +render() { +const { startAngle, angleLength, segments, strokeWidth, radius, gradientColorFrom, gradientColorTo, bgCircleColor, +showClockFace, clockFaceColor, startIcon, stopIcon } = this.props; + +const containerWidth = this.getContainerWidth(); + +const start = calculateArcCircle(0, segments, radius, startAngle, angleLength); +const stop = calculateArcCircle(segments - 1, segments, radius, startAngle, angleLength); + +return ( + + this._circle = circle} + > + + { + range(segments).map(i => { + const { fromX, fromY, toX, toY } = calculateArcCircle(i, segments, radius, startAngle, angleLength); + const { fromColor, toColor } = calculateArcColor(i, segments, gradientColorFrom, gradientColorTo) + return ( + + + + + ) + }) + } + + + {/* + ##### Circle + */} + + + + { + showClockFace && ( + - { - showClockFace && ( - - ) - } - { - range(segments).map(i => { - const { fromX, fromY, toX, toY } = calculateArcCircle(i, segments, radius, startAngle, angleLength); - const d = `M ${fromX.toFixed(2)} ${fromY.toFixed(2)} A ${radius} ${radius} 0 0 1 ${toX.toFixed(2)} ${toY.toFixed(2)}`; - - return ( - - ) - }) - } - - {/* - ##### Stop Icon - */} - - this.setState({ angleLength: angleLength + Math.PI / 2 })} - {...this._wakePanResponder.panHandlers} - > - - { - stopIcon - } - - - {/* - ##### Start Icon - */} - - this.setState({ startAngle: startAngle - Math.PI / 2, angleLength: angleLength + Math.PI / 2 })} - {...this._sleepPanResponder.panHandlers} - > - { + const { fromX, fromY, toX, toY } = calculateArcCircle(i, segments, radius, startAngle, angleLength); + const d = `M ${fromX.toFixed(2)} ${fromY.toFixed(2)} A ${radius} ${radius} 0 0 1 ${toX.toFixed(2)} ${toY.toFixed(2)}`; + + return ( + - { - startIcon - } - - - - - ); - } + ) + }) + } + + {/* + ##### Stop Icon + */} + + this.setState({ angleLength: angleLength + Math.PI / 2 })} + {...this._wakePanResponder.panHandlers} + > + + { + stopIcon + } + + + {/* + ##### Start Icon + */} + + this.setState({ startAngle: startAngle - Math.PI / 2, angleLength: angleLength + Math.PI / 2 })} + {...this._sleepPanResponder.panHandlers} + > + + { + startIcon + } + + + + +); } +} \ No newline at end of file diff --git a/src/ClockFace.js b/src/ClockFace.js index c8d0db9..81cfb93 100644 --- a/src/ClockFace.js +++ b/src/ClockFace.js @@ -1,6 +1,7 @@ -import React, { PureComponent, PropTypes } from 'react'; +import React, { PureComponent } from 'react'; import { G, Circle, Text, Line } from 'react-native-svg'; import range from 'lodash.range'; +import PropTypes from 'prop-types'; export default class ClockFace extends PureComponent { From f9dcee73f25e558ab686902b5e7fcf3d6515563c Mon Sep 17 00:00:00 2001 From: Bertoncelli Giovanni Date: Thu, 4 Oct 2018 12:44:46 +0200 Subject: [PATCH 2/2] Updated package react svg --- package.json | 76 +++++++++++++++++++++++++++++++++------------------- 1 file changed, 49 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index 8cbda3e..cf25cba 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,48 @@ { - "name": "react-native-circular-slider", - "version": "1.0.1", - "description": "React Native component for creating circular slider", - "main": "src/CircularSlider.js", - "repository": { - "type": "git", - "url": "git+ssh://git@github.com/bgryszko/react-native-circular-slider.git" + "_from": "react-native-circular-slider", + "_id": "react-native-circular-slider@1.0.1", + "_inBundle": false, + "_integrity": "sha1-nWXAurkobE18t6tUBik0PeyM6CQ=", + "_location": "/react-native-circular-slider", + "_phantomChildren": {}, + "_requested": { + "type": "tag", + "registry": true, + "raw": "react-native-circular-slider", + "name": "react-native-circular-slider", + "escapedName": "react-native-circular-slider", + "rawSpec": "", + "saveSpec": null, + "fetchSpec": "latest" + }, + "_requiredBy": [ + "#USER", + "/" + ], + "_resolved": "https://registry.npmjs.org/react-native-circular-slider/-/react-native-circular-slider-1.0.1.tgz", + "_shasum": "9d65c0bab9286c4d7cb7ab540629343dec8ce824", + "_spec": "react-native-circular-slider", + "_where": "/Users/zeppingdev/Projects/sicce_contrall_test", + "author": { + "name": "Bart Gryszko", + "email": "b@gryszko.com" }, + "bugs": { + "url": "https://github.com/bgryszko/react-native-circular-slider/issues" + }, + "bundleDependencies": false, + "dependencies": { + "d3-interpolate": "^1.1.2", + "lodash.range": "^3.2.0", + "react-native-svg": ">=6.4.1" + }, + "deprecated": false, + "description": "React Native component for creating circular slider", + "files": [ + "src", + "README.md" + ], + "homepage": "https://github.com/bgryszko/react-native-circular-slider", "keywords": [ "react", "react-native", @@ -21,26 +57,12 @@ "timer", "react-component" ], - "author": { - "name": "Bart Gryszko", - "email": "b@gryszko.com" - }, - "files": [ - "src", - "README.md" - ], "license": "MIT", - "bugs": { - "url": "https://github.com/bgryszko/react-native-circular-slider/issues" - }, - "homepage": "https://github.com/bgryszko/react-native-circular-slider", - "dependencies": { - "d3-interpolate": "^1.1.2", - "lodash.range": "^3.2.0", - "react-native-svg": "^5.1.5" + "main": "src/CircularSlider.js", + "name": "react-native-circular-slider", + "repository": { + "type": "git", + "url": "git+ssh://git@github.com/bgryszko/react-native-circular-slider.git" }, - "peerDependencies": { - "react-native": ">=0.40.0", - "react": ">=15.4.0" - } + "version": "1.0.1" }