react-native-slot-text 1.0.0 → 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- package/AnimatedNumbers.js +9 -9
- package/README.md +10 -18
- package/package.json +1 -1
- package/styles.d.ts +0 -2
- package/styles.js +0 -2
package/AnimatedNumbers.js
CHANGED
@@ -1,11 +1,11 @@
|
|
1
|
-
import { jsx as _jsx,
|
2
|
-
import { useEffect, useState, useRef, useCallback } from "react";
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
2
|
+
import { useEffect, useState, useRef, useCallback, Fragment } from "react";
|
3
3
|
import { View, Text, Animated } from "react-native";
|
4
4
|
import ReAnimated, { ZoomIn, StretchOutX } from 'react-native-reanimated';
|
5
5
|
import styles from './styles';
|
6
6
|
import Slot from './Slot';
|
7
7
|
import { formatString } from "./helpers";
|
8
|
-
const
|
8
|
+
const DEFAULT_DURATION = 200;
|
9
9
|
/**
|
10
10
|
* AnimatedNumbers Component
|
11
11
|
*
|
@@ -98,13 +98,13 @@ const AnimatedNumbers = (props) => {
|
|
98
98
|
else {
|
99
99
|
Animated.timing(containerWidth, {
|
100
100
|
toValue: e.nativeEvent.layout.width,
|
101
|
-
duration: props.animationDuration ||
|
101
|
+
duration: props.animationDuration || DEFAULT_DURATION,
|
102
102
|
useNativeDriver: false,
|
103
|
-
delay: containerSize.width > e.nativeEvent.layout.width ? props.animationDuration ||
|
103
|
+
delay: containerSize.width > e.nativeEvent.layout.width ? props.animationDuration || DEFAULT_DURATION : 0
|
104
104
|
}).start();
|
105
105
|
Animated.timing(containerHeight, {
|
106
106
|
toValue: e.nativeEvent.layout.height,
|
107
|
-
duration: props.animationDuration ||
|
107
|
+
duration: props.animationDuration || DEFAULT_DURATION,
|
108
108
|
useNativeDriver: false
|
109
109
|
}).start();
|
110
110
|
}
|
@@ -120,9 +120,9 @@ const AnimatedNumbers = (props) => {
|
|
120
120
|
return (_jsxs(_Fragment, { children: [_jsxs(Animated.View, { style: [
|
121
121
|
{ width: containerWidth, height: containerHeight },
|
122
122
|
styles.animatedNumbers
|
123
|
-
], children: [_jsx(View, { style: styles.slotsContainer, children: oldNumber.map((val, i) => (_jsxs(
|
124
|
-
_jsx(ReAnimated.View, { entering: ZoomIn.delay(props.animationDuration ||
|
125
|
-
_jsx(ReAnimated.View, { entering: ZoomIn.delay(props.animationDuration ||
|
123
|
+
], children: [_jsx(View, { style: styles.slotsContainer, children: oldNumber.map((val, i) => (_jsxs(Fragment, { children: [(oldNumber.length - i) % 3 === 0 && i > 1 && props.includeComma &&
|
124
|
+
_jsx(ReAnimated.View, { entering: ZoomIn.delay(props.animationDuration || DEFAULT_DURATION).withInitialValues({ opacity: 0 }), exiting: StretchOutX.withInitialValues({ opacity: 1 }), children: _jsx(Text, { style: props.fontStyle, children: "," }) }), _jsx(Slot, { value: val, height: containerSize.height, initial: 0, final: outFinalPositions[i] || 0, animationDuration: props.animationDuration || DEFAULT_DURATION, fontStyle: props.fontStyle })] }, `${val}-${i}`))) }), _jsx(View, { style: styles.slotsContainer, children: newNumber.map((val, i) => (_jsxs(Fragment, { children: [(newNumber.length - i) % 3 === 0 && i > 1 && props.includeComma &&
|
125
|
+
_jsx(ReAnimated.View, { entering: ZoomIn.delay(props.animationDuration || DEFAULT_DURATION).withInitialValues({ opacity: 0 }), exiting: StretchOutX.withInitialValues({ opacity: 1 }), children: _jsx(Text, { style: props.fontStyle, children: "," }) }), _jsx(Slot, { value: val, initial: inZeroPositions[i] || -1, final: inZeroPositions[i] ? 0 : -1, height: containerSize.height, animationDuration: props.animationDuration || DEFAULT_DURATION, fontStyle: props.fontStyle, onCompleted: onCompleted })] }, `${val}-${i}-new`))) })] }), _jsxs(View, { onLayout: onMeasureLayout, style: styles.spacer, ref: measureRef, children: [props.prefix && _jsx(Text, { style: props.fontStyle, children: props.prefix }), oldNumber.map((val, i) => (_jsx(Text, { style: props.fontStyle, children: val }, `${val}-${i}`)))] })] }));
|
126
126
|
};
|
127
127
|
/*
|
128
128
|
Basic logic:
|
package/README.md
CHANGED
@@ -8,29 +8,21 @@ bun install react-native-slot-text
|
|
8
8
|
|
9
9
|
This project was created using `bun init` in bun v1.1.21. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
|
10
10
|
|
11
|
-
|
11
|
+
|
12
|
+
|
13
|
+
https://github.com/user-attachments/assets/192d168a-6497-4035-9c8e-b39b88dabf56
|
14
|
+
|
12
15
|
|
13
16
|
|
14
17
|
## Usage
|
15
18
|
|
16
19
|
```
|
17
|
-
<
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
maximumTrackTintColor={theme.colors.quinaryText}
|
24
|
-
minimumTrackTintColor={theme.colors.blueText}
|
25
|
-
thumbTintColor={theme.colors.whiteText}
|
26
|
-
thumbStyle={{
|
27
|
-
width: 18,
|
28
|
-
height: 18,
|
29
|
-
shadowColor: theme.colors.navShadow,
|
30
|
-
shadowOffset: { width: 0, height: 1 },
|
31
|
-
shadowOpacity: 1,
|
32
|
-
shadowRadius: 1,
|
33
|
-
}}
|
20
|
+
<SlotText
|
21
|
+
fontStyle={styles.animatedNumbers}
|
22
|
+
value={`${value}`}
|
23
|
+
prefix='$'
|
24
|
+
animationDuration={200}
|
25
|
+
includeComma={true}
|
34
26
|
/>
|
35
27
|
```
|
36
28
|
|
package/package.json
CHANGED
package/styles.d.ts
CHANGED
@@ -6,13 +6,11 @@ declare const styles: {
|
|
6
6
|
position: "absolute";
|
7
7
|
flexDirection: "row";
|
8
8
|
opacity: number;
|
9
|
-
gap: number;
|
10
9
|
};
|
11
10
|
slotsContainer: {
|
12
11
|
position: "absolute";
|
13
12
|
flexDirection: "row";
|
14
13
|
justifyContent: "center";
|
15
|
-
gap: number;
|
16
14
|
};
|
17
15
|
};
|
18
16
|
export default styles;
|
package/styles.js
CHANGED
@@ -7,13 +7,11 @@ const styles = StyleSheet.create({
|
|
7
7
|
position: 'absolute',
|
8
8
|
flexDirection: 'row',
|
9
9
|
opacity: 0,
|
10
|
-
gap: 2
|
11
10
|
},
|
12
11
|
slotsContainer: {
|
13
12
|
position: 'absolute',
|
14
13
|
flexDirection: 'row',
|
15
14
|
justifyContent: 'center',
|
16
|
-
gap: 2,
|
17
15
|
}
|
18
16
|
});
|
19
17
|
export default styles;
|