Skip to content

Commit 97004bc

Browse files
mukesh-simformmukesh-simform
authored
Merge pull request #21 from SimformSolutionsPvtLtd/feature/UNT-T8848
Verify all the props and fix type errors
2 parents c5b63c1 + 368c4b7 commit 97004bc

File tree

13 files changed

+214
-113
lines changed

13 files changed

+214
-113
lines changed

‎README.md‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -233,16 +233,16 @@ export default SpeedoMeterVariant;
233233
| radius | 100 | number | Size of component | ✅ | ✅ |
234234
| **min\*** | 0 | number | Minimum value | ✅ | ✅ |
235235
| **max\*** | 100 | number | Maximum value | ✅ | ✅ |
236-
| step | 1 | number | Step value for component | ✅ | ✅ |
236+
| step | 1 | number | Step value for component | ✅ | ❌ |
237237
| markerValue | - | number | Show marker on specific number | ✅ | ✅ |
238238
| **value\*** | 0 | numbe | Show selection upto this value | ✅ | ✅ |
239-
| title | - | string | Title for component | ✅ | ✅ |
239+
| title | - | string | Title for component | ✅ | ❌ |
240240
| subTitle | Goal | string | Subtitle for component | ✅ | ❌ |
241241
| unit | RadilaSlider: 'kCal', SpeedoMeter: 'MB/S' | string | Unit for component | ✅ | ✅ |
242-
| thumbRadius | 18 | number | Thumb for component | ✅ | ✅ |
243-
| thumbColor | #008ABC | string | Color for thumb | ✅ | ✅ |
244-
| thumbBorderWidth | 5 | number | Width for thumb | ✅ | ✅ |
245-
| thumbBorderColor | #FFFFFF | string | Border Color for thumb | ✅ | ✅ |
242+
| thumbRadius | 18 | number | Radius for thumb | ✅ | ❌ |
243+
| thumbColor | #008ABC | string | Color for thumb | ✅ | ❌ |
244+
| thumbBorderWidth | 5 | number | Width for thumb | ✅ | ❌ |
245+
| thumbBorderColor | #FFFFFF | string | Border Color for thumb | ✅ | ❌ |
246246
| markerLineSize | 50 | number | Size of marker line | ✅ | ✅ |
247247
| sliderWidth | 18 | number | Width of slider | ✅ | ✅ |
248248
| sliderTrackColor | #E5E5E5 | string | Color of unselected slider track | ✅ | ✅ |
@@ -251,23 +251,23 @@ export default SpeedoMeterVariant;
251251
| linearGradient | [ { stop: '0%', color:'#ffaca6' }, { stop: '100%', color: '#EA4800' }] | object | Gradient color of selected track | ✅ | ✅ |
252252
| **onChange\*** | - | function | Callback function which fired on change in track | ✅ | ✅ |
253253
| onComplete | - | function | Callback function which defines what to do after completion | ✅ | ✅ |
254-
| centerContentStyle | {} | object | Center content style | ✅ | ✅ |
255-
| titleStyle | {} | object | Status title container style | ✅ | ✅ |
256-
| subTitleStyle | {} | object | Status subtitle text style | ✅ | ✅ |
254+
| centerContentStyle | {} | object | Center content style | ✅ | ❌ |
255+
| titleStyle | {} | object | Status title container style | ✅ | ❌ |
256+
| subTitleStyle | {} | object | Status subtitle text style | ✅ | ❌ |
257257
| valueStyle | {} | object | Center value style | ✅ | ✅ |
258-
| buttonContainerStyle | {} | object | Button container style | ✅ | ✅ |
259-
| leftIconStyle | {} | object | Left Icon style | ✅ | ✅ |
260-
| rightIconStyle | {} | object | Right Icon style | ✅ | ✅ |
258+
| buttonContainerStyle | {} | object | Button container style | ✅ | ❌ |
259+
| leftIconStyle | {} | object | Left Icon style | ✅ | ❌ |
260+
| rightIconStyle | {} | object | Right Icon style | ✅ | ❌ |
261261
| contentStyle | {} | object | Whole content style | ✅ | ✅ |
262262
| unitStyle | {} | object | Unit text style | ✅ | ✅ |
263263
| style | {} | object | Inner container style | ✅ | ✅ |
264-
| openingRadian | RadialSlider: Math.PI / 3 , SpeedoMeter:0.01 | number | Radian of component | ✅ | ✅ |
264+
| openingRadian | RadialSlider: Math.PI / 3 , SpeedoMeter:0.057 | number | Radian of component | ✅ | ✅ |
265265
| disabled | false | boolean | If true, buttons will be in disabled state | ✅ | ❌ |
266266
| isHideSlider | false | boolean | If true, slider will be hidden | ✅ | ✅ |
267267
| isHideCenterContent | false | boolean | If true, center content will be hidden | ✅ | ✅ |
268268
| isHideTitle | false | boolean | If true, title will be hidden | ✅ | ❌ |
269269
| isHideSubtitle | false | boolean | If true, subtitle will be hidden | ✅ | ❌ |
270-
| isHideValue | false | boolean | If true, value will be hidden | ✅ | ❌ |
270+
| isHideValue | false | boolean | If true, value will be hidden | ✅ | ✅ |
271271
| isHideTailText | false | boolean | If true, tail text will be hidden | ✅ | ✅ |
272272
| isHideButtons | false | boolean | If true, buttons will be hidden | ✅ | ❌ |
273273
| isHideLines | false | boolean | If true,slider lines will be hidden | ✅ | ✅ |
@@ -283,11 +283,11 @@ export default SpeedoMeterVariant;
283283
| markerPositionX | 20 | number | Marker position for right and left | ❌ | ✅ |
284284
| needleBackgroundColor | #A020F0 | string | Background color for needle | ❌ | ✅ |
285285
| needleColor | #175BAD | string | Color for needle | ❌ | ✅ |
286-
| needleBorderWidth | 1.5 | number | Width of needle | ❌ | ✅ |
287-
| needleHeight | 30 | number | Width of needle | ❌ | ✅ |
286+
| needleBorderWidth | 1.5 | number | Width of needle border | ❌ | ✅ |
287+
| needleHeight | 30 | number | Height of needle | ❌ | ✅ |
288288
| markerValueInterval | 10 | number | Show number of value in sequence | ❌ | ✅ |
289289
| markerValueColor | #333333 | string | Color for marker value | ❌ | ✅ |
290-
| strokeLinecap | butt | string | Different types of strokeline like butt ,square ,round | ❌ | ✅ |
290+
| strokeLinecap | butt | string | Line terminations, can be butt, line, or square | ❌ | ✅ |
291291

292292
---
293293

‎package.json‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "react-native-radial-slider",
33
"version": "0.0.1",
44
"description": "React Native component to select or highlight a specific value from a range of values",
5-
"homepage": "https://github.com/SimformSolutionsPvtLtd/react-native-radial-slider/blob/main/README.md",
5+
"homepage": "https://github.com/SimformSolutionsPvtLtd/react-native-radial-slider#readme",
66
"main": "lib/index.js",
77
"types": "lib/index.d.ts",
88
"author": "Simform Solutions",
@@ -55,7 +55,8 @@
5555
"react-native": "^0.67.1",
5656
"react-native-svg": "^12.1.0",
5757
"react-test-renderer": "^17.0.2",
58-
"typescript": "^4.5.5"
58+
"typescript": "^4.5.5",
59+
"patch-package": "^6.4.7"
5960
},
6061
"peerDependencies": {
6162
"react": "*",
@@ -92,8 +93,5 @@
9293
"extends": [
9394
"@commitlint/config-conventional"
9495
]
95-
},
96-
"dependencies": {
97-
"patch-package": "^6.4.7"
9896
}
9997
}

‎src/components/RadialSlider/LineContent.tsx‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
import { Platform } from 'react-native';
22
import React, { useState, useEffect } from 'react';
3-
import type { RadialSliderProps } from './types';
3+
import type { LineContentProps } from './types';
44
import { G, Line } from 'react-native-svg';
5-
import type { defaultProps } from './SliderDefaultProps';
65
import { useRadialSlider } from './hooks';
6+
import { Colors } from '../../theme';
77

8-
const LineContent = (props: RadialSliderProps & typeof defaultProps) => {
8+
const LineContent = (props: LineContentProps) => {
99
const [markerPositionValues, setMarkerPositionValues] = useState([]);
1010
const {
11-
radius,
12-
linearGradient,
13-
thumbBorderWidth,
14-
markerLineSize,
15-
lineColor,
16-
lineSpace,
17-
min,
18-
max,
11+
radius = 100,
12+
linearGradient = [],
13+
thumbBorderWidth = 5,
14+
markerLineSize = 50,
15+
lineColor = Colors.grey,
16+
lineSpace = 3,
17+
min = 0,
18+
max = 100,
1919
markerValue,
2020
isHideMarkerLine,
21-
fixedMarker,
21+
fixedMarker = false,
2222
value,
23-
markerValueInterval,
23+
markerValueInterval = 10,
2424
} = props;
2525

2626
const {
@@ -48,7 +48,8 @@ const LineContent = (props: RadialSliderProps & typeof defaultProps) => {
4848
{lines.map((_value, index) => {
4949
const plusActiveIndex = index === 0 ? 0 : 1;
5050
const activeIndex =
51-
((((value - min) * 100) / (max - min)) * lineCount) / 100 +
51+
(((((value as number) - min) * 100) / (max - min)) * lineCount) /
52+
100 +
5253
plusActiveIndex;
5354

5455
const getMarketIndex = () => {
@@ -60,7 +61,9 @@ const LineContent = (props: RadialSliderProps & typeof defaultProps) => {
6061
};
6162

6263
const markIndex = Math.floor(
63-
(((((!fixedMarker ? (markerValue as number) : value) - min) * 100) /
64+
(((((!fixedMarker ? (markerValue as number) : (value as number)) -
65+
min) *
66+
100) /
6467
(max - min)) *
6568
lineCount) /
6669
100

‎src/components/RadialSlider/MarkerValueContent.tsx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
import React from 'react';
2-
import type { SpeedoMeterProps } from './types';
3-
import type { defaultSpeedoMeterProps } from './SpeedometerDefaultProps';
2+
import type { MarkerValueContentProps } from './types';
43
import { G, Text as SVGText } from 'react-native-svg';
54
import { useRadialSlider } from './hooks';
65

7-
const MarkerValueContent = (
8-
props: SpeedoMeterProps & typeof defaultSpeedoMeterProps
9-
) => {
6+
const MarkerValueContent = (props: MarkerValueContentProps) => {
107
const {
11-
radius,
12-
thumbBorderWidth,
13-
min,
14-
max,
8+
radius = 100,
9+
thumbBorderWidth = 5,
10+
min = 0,
11+
max = 100,
1512
markerValue,
16-
fixedMarker,
17-
markerValueInterval,
13+
fixedMarker = false,
14+
markerValueInterval = 10,
1815
value,
1916
markerValueColor,
2017
} = props;
@@ -26,7 +23,9 @@ const MarkerValueContent = (
2623
<>
2724
{marks.map((mark, index) => {
2825
const markIndex = Math.floor(
29-
(((((!fixedMarker ? (markerValue as number) : value) - min) * 100) /
26+
(((((!fixedMarker ? (markerValue as number) : (value as number)) -
27+
min) *
28+
100) /
3029
(max - min)) *
3130
lineCount) /
3231
100

0 commit comments

Comments
 (0)