Skip to content

Commit bb250f0

Browse files
vkoktashevvkoktashev
committed
delete console logs
1 parent 884740a commit bb250f0

File tree

8 files changed

+760
-680
lines changed

8 files changed

+760
-680
lines changed

‎src/stories/ProgressItem.tsx‎

Lines changed: 141 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,161 @@
1-
import React, { useEffect, useState, HtmlHTMLAttributes, useReducer } from "react";
2-
import { GREEN, GRAY, LIGHT_GRAY, LIGHT_GREEN, BAR_INACTIVE_COLOR, WHITE, BAR_ACTIVE_COLOR, } from "../utils/colors";
1+
import React, {
2+
useEffect,
3+
useState,
4+
HtmlHTMLAttributes,
5+
useReducer,
6+
} from "react";
7+
import {
8+
GREEN,
9+
GRAY,
10+
LIGHT_GRAY,
11+
LIGHT_GREEN,
12+
BAR_INACTIVE_COLOR,
13+
WHITE,
14+
BAR_ACTIVE_COLOR,
15+
} from "../utils/colors";
316
import { ProgressItemProps } from "../utils/interfaceHelper";
417
import { progressReducer, initialState, PROGRESS } from "./ProgressReducer";
518
import { View, StyleSheet, Dimensions } from "react-native";
619

7-
var isValid = true
8-
var isBlock = false
9-
var listener: any
10-
const OFFSET = 100
11-
const BAR_WIDTH = 100
12-
const BAR_HEIGHT = 7
20+
var isValid = true;
21+
var isBlock = false;
22+
var listener: any;
23+
const OFFSET = 100;
24+
const BAR_WIDTH = 100;
25+
const BAR_HEIGHT = 7;
1326

1427
function ProgressItem(props: ProgressItemProps) {
28+
// const [refreshProgress, setRefreshProgress] = useState(true)
29+
// const [progress, setProgress] = useState(0)
1530

16-
// const [refreshProgress, setRefreshProgress] = useState(true)
17-
// const [progress, setProgress] = useState(0)
31+
var [state, dispatch] = useReducer(progressReducer, initialState);
32+
var { progress } = state;
1833

19-
var [state, dispatch] = useReducer(progressReducer, initialState);
20-
var { progress } = state;
34+
const barActiveColor =
35+
props.barStyle && props.barStyle.barActiveColor
36+
? props.barStyle.barActiveColor
37+
: BAR_ACTIVE_COLOR;
38+
const barInActiveColor =
39+
props.barStyle && props.barStyle.barInActiveColor
40+
? props.barStyle.barInActiveColor
41+
: BAR_INACTIVE_COLOR;
42+
const barWidth =
43+
props.barStyle && props.barStyle.barWidth
44+
? props.barStyle.barWidth
45+
: BAR_WIDTH;
46+
const barHeight =
47+
props.barStyle && props.barStyle.barHeight
48+
? props.barStyle.barHeight
49+
: BAR_HEIGHT;
2150

22-
const barActiveColor = props.barStyle && props.barStyle.barActiveColor ? props.barStyle.barActiveColor : BAR_ACTIVE_COLOR
23-
const barInActiveColor = props.barStyle && props.barStyle.barInActiveColor ? props.barStyle.barInActiveColor : BAR_INACTIVE_COLOR
24-
const barWidth = props.barStyle && props.barStyle.barWidth ? props.barStyle.barWidth : BAR_WIDTH
25-
const barHeight = props.barStyle && props.barStyle.barHeight ? props.barStyle.barHeight : BAR_HEIGHT
51+
React.useEffect(() => {
52+
if (props.enableProgress) {
53+
if (progress >= 0 && progress < OFFSET) {
54+
if (progress == OFFSET - 2) {
55+
isValid = true;
56+
}
57+
if (!isBlock) {
58+
startProgress();
59+
} else {
60+
isBlock = false;
61+
dispatch({ type: PROGRESS, payload: progress + 1 });
62+
}
63+
} else {
64+
if (isValid) {
65+
clearTimeout(listener);
66+
isValid = false;
67+
props.onChangePosition();
68+
}
69+
}
70+
} else {
71+
blockProgress();
72+
}
73+
}, [progress, props.enableProgress]);
2674

27-
React.useEffect(() => {
28-
if (props.enableProgress) {
29-
if (progress >= 0 && progress < OFFSET) {
30-
if (progress == OFFSET - 2) {
31-
isValid = true
32-
}
33-
if (!isBlock) {
34-
startProgress()
35-
} else {
36-
isBlock = false
37-
dispatch({ type: PROGRESS, payload: progress + 1 })
38-
}
39-
} else {
40-
if (isValid) {
41-
clearTimeout(listener)
42-
isValid = false
43-
props.onChangePosition()
44-
}
45-
}
46-
} else {
47-
blockProgress()
48-
}
49-
}, [progress, props.enableProgress])
75+
React.useEffect(() => {
76+
if (props.enableProgress) {
77+
// This if condition is critical at it blocks the multiple callbacks for other position in row
78+
if (props.currentIndex === props.progressIndex) {
79+
if (props.progressIndex != 0) {
80+
blockProgress();
81+
dispatch({ type: PROGRESS, payload: 0 });
82+
} else {
83+
isValid = false;
84+
dispatch({ type: PROGRESS, payload: 0 });
85+
}
86+
}
87+
} else {
88+
blockProgress();
89+
}
90+
}, [props.progressIndex]);
5091

51-
React.useEffect(() => {
52-
if (props.enableProgress) {
53-
// This if condition is critical at it blocks the multiple callbacks for other position in row
54-
if (props.currentIndex === props.progressIndex) {
55-
if (props.progressIndex != 0) {
56-
blockProgress()
57-
dispatch({ type: PROGRESS, payload: 0 })
58-
console.log("Progress Change => === ", props.progressIndex)
59-
} else {
60-
isValid = false
61-
dispatch({ type: PROGRESS, payload: 0 })
62-
}
63-
}
64-
} else {
65-
blockProgress()
66-
}
67-
}, [props.progressIndex])
92+
function startProgress() {
93+
listener = setTimeout(() => {
94+
// setProgress(progress + 1)
95+
dispatch({ type: PROGRESS, payload: progress + 1 });
96+
}, props.duration);
97+
}
6898

69-
function startProgress() {
70-
listener = setTimeout(() => {
71-
// setProgress(progress + 1)
72-
dispatch({ type: PROGRESS, payload: progress + 1 })
73-
}, props.duration)
74-
}
99+
function blockProgress() {
100+
clearTimeout(listener);
101+
isValid = false;
102+
isBlock = true;
103+
}
75104

76-
function blockProgress() {
77-
clearTimeout(listener)
78-
isValid = false
79-
isBlock = true
80-
}
105+
return (
106+
<View
107+
style={[
108+
styles.mainParent,
109+
{
110+
minWidth: `${barWidth / props.size - 1}%`,
111+
backgroundColor: barInActiveColor,
112+
},
113+
]}
114+
>
115+
{props.currentIndex === props.progressIndex && (
116+
<View
117+
style={[
118+
styles.childActive,
119+
{
120+
width: `${progress}%`,
121+
height: barHeight,
122+
backgroundColor: barActiveColor,
123+
},
124+
]}
125+
/>
126+
)}
81127

82-
return (
83-
<View
84-
style={[
85-
styles.mainParent,
86-
{
87-
minWidth: `${barWidth / props.size - 1}%`,
88-
backgroundColor: barInActiveColor,
89-
}
90-
]}>
91-
92-
{props.currentIndex === props.progressIndex && (
93-
<View
94-
style={[
95-
styles.childActive,
96-
{
97-
width: `${progress}%`,
98-
height: barHeight,
99-
backgroundColor: barActiveColor,
100-
}]}
101-
/>
102-
)}
103-
104-
{(props.currentIndex != props.progressIndex) && (
105-
<View
106-
style={[
107-
styles.childInactive,
108-
{
109-
backgroundColor: props.currentIndex >= props.progressIndex ? barInActiveColor : barActiveColor,
110-
minWidth: `${barWidth / props.size - 1}%`,
111-
height: barHeight
112-
}
113-
]}
114-
/>
115-
)}
116-
</View>
117-
);
128+
{props.currentIndex != props.progressIndex && (
129+
<View
130+
style={[
131+
styles.childInactive,
132+
{
133+
backgroundColor:
134+
props.currentIndex >= props.progressIndex
135+
? barInActiveColor
136+
: barActiveColor,
137+
minWidth: `${barWidth / props.size - 1}%`,
138+
height: barHeight,
139+
},
140+
]}
141+
/>
142+
)}
143+
</View>
144+
);
118145
}
119146

120147
export default ProgressItem;
121148

122149
const styles = StyleSheet.create({
123-
mainParent: {
124-
// marginLeft: '0.5%',
125-
// marginRight: '0.5%',
126-
borderRadius: 20,
127-
},
128-
childActive: {
129-
borderRadius: 20,
130-
},
131-
childInactive: {
132-
borderRadius: 20,
133-
}
150+
mainParent: {
151+
// marginLeft: '0.5%',
152+
// marginRight: '0.5%',
153+
borderRadius: 20,
154+
},
155+
childActive: {
156+
borderRadius: 20,
157+
},
158+
childInactive: {
159+
borderRadius: 20,
160+
},
134161
});

‎src/stories/ProgressReducer.ts‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,24 @@
1-
import React from 'react';
1+
import React from "react";
22

33
export const initialState = {
4-
progress: 0,
5-
stopProgress: false,
4+
progress: 0,
5+
stopProgress: false,
66
};
77

88
type ActionType = {
9-
type: string;
10-
payload: any;
9+
type: string;
10+
payload: any;
1111
};
1212

13-
export const PROGRESS = 'PROGRESS',
14-
STOP_PROGRESS = 'STOP_PROGRESS';
13+
export const PROGRESS = "PROGRESS",
14+
STOP_PROGRESS = "STOP_PROGRESS";
1515

1616
export const progressReducer = (state: any, action: ActionType) => {
17-
// console.log(action.type, action.payload);
17+
switch (action.type) {
18+
case PROGRESS:
19+
return { ...state, progress: action.payload };
1820

19-
switch (action.type) {
20-
case PROGRESS:
21-
return {...state, progress: action.payload};
22-
23-
case STOP_PROGRESS:
24-
return {...state, stopProgress: action.payload};
25-
}
21+
case STOP_PROGRESS:
22+
return { ...state, stopProgress: action.payload };
23+
}
2624
};

0 commit comments

Comments
 (0)