react-native-slot-text 1.0.4 → 1.0.5
Sign up to get free protection for your applications and to get access to all the features.
- package/AnimatedNumbers.js +6 -4
- package/package.json +1 -1
- package/styles.d.ts +3 -0
- package/styles.js +3 -0
package/AnimatedNumbers.js
CHANGED
@@ -22,6 +22,7 @@ const DEFAULT_DURATION = 200;
|
|
22
22
|
* @returns {JSX.Element} The animated number component with slots for digits and commas.
|
23
23
|
*/
|
24
24
|
const AnimatedNumbers = (props) => {
|
25
|
+
const idRef = useRef(`slots-${Math.random().toString(36).substring(7)}`);
|
25
26
|
const [state, setState] = useState('idle');
|
26
27
|
const [oldNumber, setOldNumber] = useState([]);
|
27
28
|
const [newNumber, setNewNumber] = useState([]);
|
@@ -98,13 +99,12 @@ const AnimatedNumbers = (props) => {
|
|
98
99
|
else {
|
99
100
|
Animated.timing(containerWidth, {
|
100
101
|
toValue: e.nativeEvent.layout.width,
|
101
|
-
duration: props.animationDuration || DEFAULT_DURATION,
|
102
102
|
useNativeDriver: false,
|
103
|
-
|
103
|
+
duration: 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:
|
107
|
+
duration: 100,
|
108
108
|
useNativeDriver: false
|
109
109
|
}).start();
|
110
110
|
}
|
@@ -121,7 +121,9 @@ const AnimatedNumbers = (props) => {
|
|
121
121
|
{ width: containerWidth, height: containerHeight },
|
122
122
|
styles.animatedNumbers
|
123
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 })] }, `${
|
124
|
+
_jsx(ReAnimated.View, { entering: ZoomIn.delay(props.animationDuration || DEFAULT_DURATION).withInitialValues({ opacity: 0 }), exiting: StretchOutX.withInitialValues({ opacity: 1 }).duration(props.animationDuration || DEFAULT_DURATION), children: _jsx(Text, { style: props.fontStyle, children: "," }) }, `${idRef}-comma-${i}-old`), _jsx(Slot, { value: val, height: containerSize.height, initial: 0, final: outFinalPositions[i] || 0, animationDuration: props.animationDuration || DEFAULT_DURATION, fontStyle: props.fontStyle }, `${idRef}-${val}-${i}-old`)] }, `${idRef}-slot-${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), exiting: StretchOutX.withInitialValues({ opacity: 1 }).duration(props.animationDuration || DEFAULT_DURATION), style: styles.hiddenComma, 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 })] }, `${idRef}-${val}-${i}-new`))) })] }), newNumber.length > 0 &&
|
126
|
+
_jsxs(View, { onLayout: onMeasureLayout, style: styles.spacer, ref: measureRef, children: [props.prefix && _jsx(Text, { style: props.fontStyle, children: props.prefix }), newNumber.map((val, i) => (_jsx(Text, { style: props.fontStyle, children: val }, `${val}-${i}`)))] })] }));
|
125
127
|
};
|
126
128
|
/*
|
127
129
|
Basic logic:
|
package/package.json
CHANGED
package/styles.d.ts
CHANGED