esoftplay-event 0.0.1-v → 0.0.1-w
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/event/order_detail.tsx +1 -1
- package/id.json +1 -0
- package/package.json +1 -1
- package/event/countdown_animated.tsx +0 -194
package/event/order_detail.tsx
CHANGED
|
@@ -536,7 +536,7 @@ export default function m(props: EventOrder_detailProps): any {
|
|
|
536
536
|
|
|
537
537
|
<UseCondition if={result?.is_luckydraw && result?.is_luckydraw == 2}>
|
|
538
538
|
<View style={{ margin: 15, padding: 10, marginBottom: 0, justifyContent: 'center', alignContent: 'center', alignItems: 'center', borderRadius: 7, backgroundColor: LibStyle.colorBgGrey, paddingBottom: 10, ...LibStyle.elevation(3) }}>
|
|
539
|
-
<LibTextstyle textStyle='headline' text={esp.lang("event/order_detail", "already_join_lucky_draw")} style={{ color: '#c9c9c9', fontWeight: 'bold' }} />
|
|
539
|
+
<LibTextstyle textStyle='headline' text={result?.config_luckydraw != null ? esp.lang("event/order_detail", "already_follow") + result?.config_luckydraw?.title : esp.lang("event/order_detail", "already_join_lucky_draw")} style={{ color: '#c9c9c9', fontWeight: 'bold' }} />
|
|
540
540
|
</View>
|
|
541
541
|
</UseCondition>
|
|
542
542
|
|
package/id.json
CHANGED
|
@@ -930,6 +930,7 @@
|
|
|
930
930
|
"event/order_detail": {
|
|
931
931
|
"Checked_within_10_minutes_after_payment_is_made": "Dicek dalam 10 menit setelah pembayaran dilakukan",
|
|
932
932
|
"This_Event_Has_Changed_the_Event_Date_Please_Reschedule_or_Refund": "Event ini Mengalami Perubahan Tanggal Event, Silahkan Reschedule atau Melakukan Refund",
|
|
933
|
+
"already_follow": "Sudah mengikuti ",
|
|
933
934
|
"already_join_lucky_draw": "Sudah mengikuti lucky draw",
|
|
934
935
|
"back_err": "Oops",
|
|
935
936
|
"back_to_homepage": "Kembali ke Halaman Utama",
|
package/package.json
CHANGED
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
// withHooks
|
|
2
|
-
import esp from 'esoftplay/esp';
|
|
3
|
-
import moment from 'esoftplay/moment';
|
|
4
|
-
import useSafeState from 'esoftplay/state';
|
|
5
|
-
import React, { useEffect, useRef } from 'react';
|
|
6
|
-
import { Text, View } from 'react-native';
|
|
7
|
-
import Animated, { Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
export interface EventCountdown_animatedProps {
|
|
11
|
-
expired: string,
|
|
12
|
-
expiredText?: string,
|
|
13
|
-
style?: any,
|
|
14
|
-
containerStyle?: any,
|
|
15
|
-
onlyDay?: boolean,
|
|
16
|
-
onExpired?: () => void,
|
|
17
|
-
hideTimeUnit?: boolean
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
const fixSingleNumber = (number: number) => number < 10 ? '0' + number : number;
|
|
21
|
-
|
|
22
|
-
type AnimatedDigitProps = {
|
|
23
|
-
value: number;
|
|
24
|
-
fontSize?: number;
|
|
25
|
-
hideIfZero?: boolean;
|
|
26
|
-
t?: number;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export function AnimatedDigit({
|
|
30
|
-
value,
|
|
31
|
-
fontSize = 32,
|
|
32
|
-
hideIfZero = false,
|
|
33
|
-
t = 400, // slightly longer for smoother motion
|
|
34
|
-
}: AnimatedDigitProps) {
|
|
35
|
-
const translateY = useSharedValue(0);
|
|
36
|
-
const opacity = useSharedValue(1);
|
|
37
|
-
const animating = useSharedValue(false);
|
|
38
|
-
|
|
39
|
-
const [currentValue, setCurrentValue] = useSafeState(value);
|
|
40
|
-
const [nextValue, setNextValue] = useSafeState<number | null>(null);
|
|
41
|
-
|
|
42
|
-
useEffect(() => {
|
|
43
|
-
if (animating.value || value === currentValue) return;
|
|
44
|
-
|
|
45
|
-
animating.value = true;
|
|
46
|
-
runOnJS(setNextValue)(value);
|
|
47
|
-
|
|
48
|
-
// Prepare for transition
|
|
49
|
-
translateY.value = 0;
|
|
50
|
-
opacity.value = 1;
|
|
51
|
-
|
|
52
|
-
// Animate upward + fade blend for smooth rolling effect
|
|
53
|
-
translateY.value = withTiming(-fontSize, {
|
|
54
|
-
duration: t,
|
|
55
|
-
easing: Easing.out(Easing.cubic),
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
opacity.value = withTiming(0.3, {
|
|
59
|
-
duration: t * 0.8,
|
|
60
|
-
easing: Easing.out(Easing.quad),
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
// After animation completes
|
|
64
|
-
setTimeout(() => {
|
|
65
|
-
runOnJS(setCurrentValue)(value);
|
|
66
|
-
runOnJS(setNextValue)(null);
|
|
67
|
-
|
|
68
|
-
// Reset instantly below and fade back in smoothly
|
|
69
|
-
translateY.value = fontSize;
|
|
70
|
-
translateY.value = withTiming(0, {
|
|
71
|
-
duration: t * 0.8,
|
|
72
|
-
easing: Easing.out(Easing.cubic),
|
|
73
|
-
});
|
|
74
|
-
opacity.value = withTiming(1, {
|
|
75
|
-
duration: t * 0.9,
|
|
76
|
-
easing: Easing.out(Easing.cubic),
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
animating.value = false;
|
|
80
|
-
}, t);
|
|
81
|
-
}, [value]);
|
|
82
|
-
|
|
83
|
-
const animatedStyle = useAnimatedStyle(() => ({
|
|
84
|
-
transform: [{ translateY: translateY.value }],
|
|
85
|
-
opacity: opacity.value,
|
|
86
|
-
}));
|
|
87
|
-
|
|
88
|
-
return (
|
|
89
|
-
<View style={{ height: fontSize + 8, overflow: "hidden", justifyContent: "center" }} >
|
|
90
|
-
<Animated.View style={animatedStyle}>
|
|
91
|
-
{/* Current number */}
|
|
92
|
-
<Text allowFontScaling={false} style={{ fontSize, fontWeight: "bold", textAlign: "center" }}>{currentValue}</Text>
|
|
93
|
-
{/* Next number rolling from bottom */}
|
|
94
|
-
{nextValue !== null && (
|
|
95
|
-
<Text allowFontScaling={false} style={{ fontSize, fontWeight: "bold", textAlign: "center" }}>{nextValue}</Text>
|
|
96
|
-
)}
|
|
97
|
-
</Animated.View>
|
|
98
|
-
</View>
|
|
99
|
-
);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
export default function m(props: EventCountdown_animatedProps): any {
|
|
103
|
-
const [timeLeft, setTimeLeft] = useSafeState<any>(null);
|
|
104
|
-
const timerRef = useRef<NodeJS.Timeout | null>(null);
|
|
105
|
-
|
|
106
|
-
useEffect(() => {
|
|
107
|
-
startCountdown();
|
|
108
|
-
return () => {
|
|
109
|
-
if (timerRef.current) clearTimeout(timerRef.current);
|
|
110
|
-
};
|
|
111
|
-
}, []);
|
|
112
|
-
|
|
113
|
-
function startCountdown() {
|
|
114
|
-
const loop = () => {
|
|
115
|
-
const diff = moment(props.expired).duration(moment().toDate());
|
|
116
|
-
|
|
117
|
-
if (diff <= 0) {
|
|
118
|
-
setTimeLeft(null);
|
|
119
|
-
props.onExpired?.();
|
|
120
|
-
return;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
const duration = diff;
|
|
124
|
-
const newTime = {
|
|
125
|
-
days: Math.floor(duration.asDays().toString()),
|
|
126
|
-
hours: parseInt(duration.hours().toString()),
|
|
127
|
-
minutes: parseInt(duration.minutes().toString()),
|
|
128
|
-
seconds: parseInt(duration.seconds().toString())
|
|
129
|
-
};
|
|
130
|
-
|
|
131
|
-
setTimeLeft(newTime);
|
|
132
|
-
timerRef.current = setTimeout(loop, 1000);
|
|
133
|
-
};
|
|
134
|
-
|
|
135
|
-
loop();
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
if (!timeLeft) {
|
|
139
|
-
return (
|
|
140
|
-
<Text allowFontScaling={false} style={[props.style]}>
|
|
141
|
-
{props.expiredText || esp.lang("market/countdown", "expired")}
|
|
142
|
-
</Text>
|
|
143
|
-
);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
const fontSize = props.style?.fontSize || 18;
|
|
147
|
-
|
|
148
|
-
const timeKeys = [
|
|
149
|
-
esp.lang("market/countdown", "day"),
|
|
150
|
-
esp.lang("market/countdown", "hour"),
|
|
151
|
-
esp.lang("market/countdown", "minutes"),
|
|
152
|
-
esp.lang("market/countdown", "second")
|
|
153
|
-
];
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
const values: any = Object.values(timeLeft)
|
|
157
|
-
|
|
158
|
-
const renderNumber = (num: number, timeUnit: string, index?: number) => {
|
|
159
|
-
const str: string = String(fixSingleNumber(num));
|
|
160
|
-
const hide = index == 0 || index == 1
|
|
161
|
-
|
|
162
|
-
return (
|
|
163
|
-
<View style={{ flexDirection: 'row' }}>
|
|
164
|
-
{
|
|
165
|
-
str.length > 0 && [...str].map((d, i) => (
|
|
166
|
-
<AnimatedDigit key={i} value={Number(d)} fontSize={fontSize} hideIfZero={hide} style={props.style} />
|
|
167
|
-
))
|
|
168
|
-
}
|
|
169
|
-
{
|
|
170
|
-
!props.hideTimeUnit && timeUnit && <Text allowFontScaling={false} style={[{ fontSize }, props.style]}> {timeUnit}</Text>
|
|
171
|
-
}
|
|
172
|
-
</View>
|
|
173
|
-
);
|
|
174
|
-
};
|
|
175
|
-
|
|
176
|
-
return (
|
|
177
|
-
<View style={[{ flexDirection: 'row', alignItems: 'center' }, props.containerStyle]}>
|
|
178
|
-
{props.onlyDay ? (
|
|
179
|
-
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
180
|
-
{renderNumber(timeLeft.days, timeKeys[0])}
|
|
181
|
-
</View>
|
|
182
|
-
) : (
|
|
183
|
-
<View style={{ flexDirection: 'row' }}>
|
|
184
|
-
{timeKeys.map((key, i) => (
|
|
185
|
-
<React.Fragment key={key}>
|
|
186
|
-
{renderNumber(values[i], timeKeys[i].charAt(0) + (i < 3 ? ' : ' : ''), i)}
|
|
187
|
-
</React.Fragment>
|
|
188
|
-
))}
|
|
189
|
-
</View>
|
|
190
|
-
)}
|
|
191
|
-
</View>
|
|
192
|
-
);
|
|
193
|
-
|
|
194
|
-
}
|