Skip to content

Commit 7e5663c

Browse files
irekrogirekrog
committed
refactor: update currentLevel state to allow null and enhance background color logic in example app
1 parent 1774eb3 commit 7e5663c

1 file changed

Lines changed: 101 additions & 77 deletions

File tree

‎example/App.tsx‎

Lines changed: 101 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const { width } = Dimensions.get('window');
2424

2525
function App() {
2626
const [isOn, setIsOn] = useState(false);
27-
const [currentLevel, setCurrentLevel] = useState(0);
27+
const [currentLevel, setCurrentLevel] = useState<number | null>(null);
2828
const scaleAnim = useRef(new Animated.Value(1)).current;
2929

3030
const { toggle, setLevel, getMaxLevel } = useTorch({
@@ -35,7 +35,7 @@ function App() {
3535
console.log('Torch error:', error.code);
3636
},
3737
onLevelChanged: level => {
38-
setCurrentLevel(level ?? 1);
38+
setCurrentLevel(level ?? null);
3939
},
4040
});
4141

@@ -74,7 +74,7 @@ function App() {
7474

7575
interface AppContentProps {
7676
isOn: boolean;
77-
currentLevel: number;
77+
currentLevel: number | null;
7878
maxLevel: number;
7979
scaleAnim: Animated.Value;
8080
onToggle: () => void;
@@ -91,12 +91,28 @@ function AppContent({
9191
}: AppContentProps) {
9292
const insets = useSafeAreaInsets();
9393

94+
// Calculate background color based on brightness level
95+
const getBackgroundColor = () => {
96+
if (!isOn || currentLevel === null) {
97+
return '#0f0f1e';
98+
}
99+
100+
const intensity = currentLevel / maxLevel;
101+
102+
// Interpolate between dark blue and golden yellow
103+
const r = Math.round(15 + (255 - 15) * intensity * 0.3);
104+
const g = Math.round(15 + (215 - 15) * intensity * 0.3);
105+
const b = Math.round(30 + (0 - 30) * intensity * 0.2);
106+
107+
return `rgb(${r}, ${g}, ${b})`;
108+
};
109+
94110
const containerStyle = [
95111
styles.container,
96-
isOn ? styles.containerOn : styles.containerOff,
97112
{
98113
paddingTop: insets.top,
99114
paddingBottom: insets.bottom,
115+
backgroundColor: getBackgroundColor(),
100116
},
101117
];
102118

@@ -123,6 +139,9 @@ function AppContent({
123139
isOn ? styles.bulbSocketOn : styles.bulbSocketOff,
124140
];
125141

142+
// Calculate glow opacity based on brightness level
143+
const glowOpacity = currentLevel !== null ? currentLevel / maxLevel : 0;
144+
126145
return (
127146
<View style={containerStyle}>
128147
<View style={styles.header}>
@@ -133,7 +152,16 @@ function AppContent({
133152
</View>
134153

135154
<View style={styles.torchContainer}>
136-
{isOn && <View style={styles.glow} />}
155+
{isOn && (
156+
<View
157+
style={[
158+
styles.glow,
159+
{
160+
opacity: 0.3 + glowOpacity * 0.5,
161+
},
162+
]}
163+
/>
164+
)}
137165

138166
<Pressable onPress={onToggle}>
139167
<Animated.View style={torchButtonStyle}>
@@ -166,76 +194,78 @@ function AppContent({
166194
</Text>
167195
</View>
168196

169-
<View style={styles.controlsContainer}>
170-
<View style={styles.levelInfo}>
171-
<Text style={styles.levelLabel}>Brightness</Text>
172-
<Text style={styles.levelValue}>
173-
{currentLevel} / {maxLevel}
174-
</Text>
175-
</View>
197+
{isOn && (
198+
<View style={styles.controlsContainer}>
199+
<View style={styles.levelInfo}>
200+
<Text style={styles.levelLabel}>Brightness</Text>
201+
<Text style={styles.levelValue}>
202+
{currentLevel ?? 0} / {maxLevel}
203+
</Text>
204+
</View>
176205

177-
<View style={styles.sliderContainer}>
178-
<Text style={styles.sliderLabel}>MIN</Text>
179-
<Slider
180-
value={currentLevel}
181-
minimumValue={1}
182-
maximumValue={maxLevel}
183-
step={1}
184-
onValueChange={value => {
185-
onLevelChange(value[0]);
186-
}}
187-
containerStyle={styles.slider}
188-
minimumTrackTintColor="#ffd700"
189-
maximumTrackTintColor="#2d2d44"
190-
thumbTintColor="#ffd700"
191-
thumbStyle={styles.thumb}
192-
trackStyle={styles.track}
193-
/>
194-
<Text style={styles.sliderLabel}>MAX</Text>
195-
</View>
206+
<View style={styles.sliderContainer}>
207+
<Text style={styles.sliderLabel}>MIN</Text>
208+
<Slider
209+
value={currentLevel ?? 1}
210+
minimumValue={1}
211+
maximumValue={maxLevel}
212+
step={1}
213+
onValueChange={value => {
214+
onLevelChange(value[0]);
215+
}}
216+
containerStyle={styles.slider}
217+
minimumTrackTintColor="#ffd700"
218+
maximumTrackTintColor="#2d2d44"
219+
thumbTintColor="#ffd700"
220+
thumbStyle={styles.thumb}
221+
trackStyle={styles.track}
222+
/>
223+
<Text style={styles.sliderLabel}>MAX</Text>
224+
</View>
196225

197-
<View style={styles.quickActions}>
198-
<Text style={styles.quickActionsTitle}>Quick Actions</Text>
199-
<View style={styles.quickButtonsRow}>
200-
<Pressable
201-
style={({ pressed }) => [
202-
styles.quickButton,
203-
pressed && styles.quickButtonPressed,
204-
]}
205-
onPress={() => onLevelChange(Math.round(maxLevel * 0.25))}
206-
>
207-
<Text style={styles.quickButtonText}>25%</Text>
208-
</Pressable>
209-
<Pressable
210-
style={({ pressed }) => [
211-
styles.quickButton,
212-
pressed && styles.quickButtonPressed,
213-
]}
214-
onPress={() => onLevelChange(Math.round(maxLevel * 0.5))}
215-
>
216-
<Text style={styles.quickButtonText}>50%</Text>
217-
</Pressable>
218-
<Pressable
219-
style={({ pressed }) => [
220-
styles.quickButton,
221-
pressed && styles.quickButtonPressed,
222-
]}
223-
onPress={() => onLevelChange(Math.round(maxLevel * 0.75))}
224-
>
225-
<Text style={styles.quickButtonText}>75%</Text>
226-
</Pressable>
227-
<Pressable
228-
style={({ pressed }) => [
229-
styles.quickButton,
230-
pressed && styles.quickButtonPressed,
231-
]}
232-
onPress={() => onLevelChange(maxLevel)}
233-
>
234-
<Text style={styles.quickButtonText}>MAX</Text>
235-
</Pressable>
226+
<View style={styles.quickActions}>
227+
<Text style={styles.quickActionsTitle}>Quick Actions</Text>
228+
<View style={styles.quickButtonsRow}>
229+
<Pressable
230+
style={({ pressed }) => [
231+
styles.quickButton,
232+
pressed && styles.quickButtonPressed,
233+
]}
234+
onPress={() => onLevelChange(Math.round(maxLevel * 0.25))}
235+
>
236+
<Text style={styles.quickButtonText}>25%</Text>
237+
</Pressable>
238+
<Pressable
239+
style={({ pressed }) => [
240+
styles.quickButton,
241+
pressed && styles.quickButtonPressed,
242+
]}
243+
onPress={() => onLevelChange(Math.round(maxLevel * 0.5))}
244+
>
245+
<Text style={styles.quickButtonText}>50%</Text>
246+
</Pressable>
247+
<Pressable
248+
style={({ pressed }) => [
249+
styles.quickButton,
250+
pressed && styles.quickButtonPressed,
251+
]}
252+
onPress={() => onLevelChange(Math.round(maxLevel * 0.75))}
253+
>
254+
<Text style={styles.quickButtonText}>75%</Text>
255+
</Pressable>
256+
<Pressable
257+
style={({ pressed }) => [
258+
styles.quickButton,
259+
pressed && styles.quickButtonPressed,
260+
]}
261+
onPress={() => onLevelChange(maxLevel)}
262+
>
263+
<Text style={styles.quickButtonText}>MAX</Text>
264+
</Pressable>
265+
</View>
236266
</View>
237267
</View>
238-
</View>
268+
)}
239269
</View>
240270
);
241271
}
@@ -244,12 +274,6 @@ const styles = StyleSheet.create({
244274
container: {
245275
flex: 1,
246276
},
247-
containerOn: {
248-
backgroundColor: '#1a1a2e',
249-
},
250-
containerOff: {
251-
backgroundColor: '#0f0f1e',
252-
},
253277
header: {
254278
alignItems: 'center',
255279
paddingTop: 30,

0 commit comments

Comments
 (0)