@cyberkaidev/ui 0.1.0 → 0.1.1
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/lib/module/components/Chips.js +22 -5
- package/lib/module/components/Chips.js.map +1 -1
- package/lib/module/components/RippleEffect.js +27 -14
- package/lib/module/components/RippleEffect.js.map +1 -1
- package/lib/typescript/src/components/Chips.d.ts.map +1 -1
- package/lib/typescript/src/components/RippleEffect.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/Chips.tsx +20 -4
- package/src/components/RippleEffect.tsx +38 -17
|
@@ -14,7 +14,8 @@ export function Chips({
|
|
|
14
14
|
testID
|
|
15
15
|
}) {
|
|
16
16
|
const {
|
|
17
|
-
colors
|
|
17
|
+
colors,
|
|
18
|
+
borderRadius
|
|
18
19
|
} = useTheme();
|
|
19
20
|
const styles = useThemedStyles(makeStyles);
|
|
20
21
|
const isInteractive = typeof onPress === 'function';
|
|
@@ -53,15 +54,25 @@ export function Chips({
|
|
|
53
54
|
disabled,
|
|
54
55
|
prefix,
|
|
55
56
|
scheme = 'surface'
|
|
56
|
-
}) => /*#__PURE__*/
|
|
57
|
+
}) => /*#__PURE__*/_jsx(Button, {
|
|
57
58
|
testID: `chip-${String(key)}`,
|
|
58
59
|
disabled: !isInteractive || disabled,
|
|
60
|
+
rippleContainerBorderRadius: Number(borderRadius.radius_20),
|
|
59
61
|
style: [styles.button, schemeButton[scheme], disabled ? styles.dimmed : null],
|
|
60
62
|
onPress: () => onPress?.(key),
|
|
61
|
-
children:
|
|
63
|
+
children: prefix == null ? /*#__PURE__*/_jsx(Text, {
|
|
62
64
|
color: schemeTextColor[scheme],
|
|
63
65
|
children: label
|
|
64
|
-
})
|
|
66
|
+
}) : /*#__PURE__*/_jsxs(View, {
|
|
67
|
+
style: styles.row,
|
|
68
|
+
children: [/*#__PURE__*/_jsx(View, {
|
|
69
|
+
style: styles.prefix,
|
|
70
|
+
children: prefix
|
|
71
|
+
}), /*#__PURE__*/_jsx(Text, {
|
|
72
|
+
color: schemeTextColor[scheme],
|
|
73
|
+
children: label
|
|
74
|
+
})]
|
|
75
|
+
})
|
|
65
76
|
}, String(key)))
|
|
66
77
|
})
|
|
67
78
|
});
|
|
@@ -83,9 +94,15 @@ function makeStyles(t) {
|
|
|
83
94
|
borderStyle: 'solid',
|
|
84
95
|
flexDirection: 'row',
|
|
85
96
|
alignItems: 'center',
|
|
86
|
-
gap: t.spaces.horizontal.s,
|
|
87
97
|
overflow: 'hidden'
|
|
88
98
|
},
|
|
99
|
+
row: {
|
|
100
|
+
flexDirection: 'row',
|
|
101
|
+
alignItems: 'center'
|
|
102
|
+
},
|
|
103
|
+
prefix: {
|
|
104
|
+
marginRight: t.spaces.horizontal.s
|
|
105
|
+
},
|
|
89
106
|
dimmed: {
|
|
90
107
|
opacity: 0.5
|
|
91
108
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ScrollView","StyleSheet","View","useTheme","useThemedStyles","Text","Button","jsx","_jsx","jsxs","_jsxs","Chips","data","marginB","marginT","onPress","testID","colors","styles","makeStyles","isInteractive","schemeButton","surface","borderColor","border","backgroundColor","on_surface","primary","schemeTextColor","text","style","container","marginTop","marginBottom","children","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","content","map","key","label","disabled","prefix","scheme","String","button","dimmed","color","t","create","width","gap","spaces","l","paddingHorizontal","pageSpacing","m","paddingVertical","vertical","xs","
|
|
1
|
+
{"version":3,"names":["ScrollView","StyleSheet","View","useTheme","useThemedStyles","Text","Button","jsx","_jsx","jsxs","_jsxs","Chips","data","marginB","marginT","onPress","testID","colors","borderRadius","styles","makeStyles","isInteractive","schemeButton","surface","borderColor","border","backgroundColor","on_surface","primary","schemeTextColor","text","style","container","marginTop","marginBottom","children","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","content","map","key","label","disabled","prefix","scheme","String","rippleContainerBorderRadius","Number","radius_20","button","dimmed","color","row","t","create","width","gap","spaces","l","paddingHorizontal","pageSpacing","m","paddingVertical","vertical","xs","borderWidth","borderStyle","flexDirection","alignItems","overflow","marginRight","s","opacity"],"sourceRoot":"../../../src","sources":["components/Chips.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -74,19 +74,13 @@ export function RippleEffect({
|
|
|
74
74
|
};
|
|
75
75
|
ripplesRef.current.set(ripple.unique, ripple);
|
|
76
76
|
activeRippleRef.current = ripple.unique;
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}).start();
|
|
83
|
-
Animated.timing(ripple.opacity, {
|
|
84
|
-
toValue: rippleOpacity,
|
|
85
|
-
duration: Math.min(rippleDuration, PRESS_FADE_IN_DURATION),
|
|
86
|
-
useNativeDriver: true
|
|
87
|
-
}).start();
|
|
77
|
+
|
|
78
|
+
// The entrance animation is kicked off from `RippleCircle`'s mount effect,
|
|
79
|
+
// not here: on the New Architecture, starting a native-driven animation on
|
|
80
|
+
// an `Animated.Value` before its `Animated.View` is mounted leaves the
|
|
81
|
+
// native driver with no view to attach to, so the ripple never shows.
|
|
88
82
|
setRippleIds(current => current.concat(ripple.unique));
|
|
89
|
-
}, [layout.width, layout.height, onPressIn, rippleCentered,
|
|
83
|
+
}, [layout.width, layout.height, onPressIn, rippleCentered, rippleSequential, rippleSize]);
|
|
90
84
|
const handlePressOut = React.useCallback(event => {
|
|
91
85
|
onPressOut?.(event);
|
|
92
86
|
const releasedUnique = activeRippleRef.current;
|
|
@@ -128,7 +122,9 @@ export function RippleEffect({
|
|
|
128
122
|
if (!ripple) return null;
|
|
129
123
|
return /*#__PURE__*/_jsx(RippleCircle, {
|
|
130
124
|
ripple: ripple,
|
|
131
|
-
color: color
|
|
125
|
+
color: color,
|
|
126
|
+
duration: rippleDuration,
|
|
127
|
+
toOpacity: rippleOpacity
|
|
132
128
|
}, id);
|
|
133
129
|
})
|
|
134
130
|
})]
|
|
@@ -136,7 +132,9 @@ export function RippleEffect({
|
|
|
136
132
|
}
|
|
137
133
|
function RippleCircleComponent({
|
|
138
134
|
ripple,
|
|
139
|
-
color
|
|
135
|
+
color,
|
|
136
|
+
duration,
|
|
137
|
+
toOpacity
|
|
140
138
|
}) {
|
|
141
139
|
const {
|
|
142
140
|
locationX,
|
|
@@ -145,6 +143,21 @@ function RippleCircleComponent({
|
|
|
145
143
|
scale,
|
|
146
144
|
opacity
|
|
147
145
|
} = ripple;
|
|
146
|
+
React.useEffect(() => {
|
|
147
|
+
Animated.timing(scale, {
|
|
148
|
+
toValue: 1,
|
|
149
|
+
duration,
|
|
150
|
+
easing: Easing.out(Easing.ease),
|
|
151
|
+
useNativeDriver: true
|
|
152
|
+
}).start();
|
|
153
|
+
Animated.timing(opacity, {
|
|
154
|
+
toValue: toOpacity,
|
|
155
|
+
duration: Math.min(duration, PRESS_FADE_IN_DURATION),
|
|
156
|
+
useNativeDriver: true
|
|
157
|
+
}).start();
|
|
158
|
+
// Entrance runs exactly once, when the ripple view mounts.
|
|
159
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
160
|
+
}, []);
|
|
148
161
|
const rippleStyle = {
|
|
149
162
|
top: locationY - CIRCLE_RADIUS,
|
|
150
163
|
[I18nManager.isRTL ? 'right' : 'left']: locationX - CIRCLE_RADIUS,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Animated","Easing","I18nManager","Pressable","StyleSheet","View","useColors","jsx","_jsx","jsxs","_jsxs","CIRCLE_RADIUS","RELEASE_GROW_DURATION","RELEASE_FADE_DURATION","PRESS_FADE_IN_DURATION","RippleEffect","children","rippleColor","rippleOpacity","rippleDuration","rippleSize","rippleContainerBorderRadius","rippleCentered","rippleSequential","rippleFades","disabled","onLayout","onPressIn","onPressOut","pressableProps","colors","color","text","layout","setLayout","useState","width","height","rippleIds","setRippleIds","ripplesRef","useRef","Map","activeRippleRef","uniqueRef","handleLayout","event","nativeEvent","handlePressIn","useCallback","current","size","w2","h2","locationX","locationY","offsetX","Math","abs","offsetY","radius","sqrt","ripple","unique","scale","Value","opacity","set","
|
|
1
|
+
{"version":3,"names":["React","Animated","Easing","I18nManager","Pressable","StyleSheet","View","useColors","jsx","_jsx","jsxs","_jsxs","CIRCLE_RADIUS","RELEASE_GROW_DURATION","RELEASE_FADE_DURATION","PRESS_FADE_IN_DURATION","RippleEffect","children","rippleColor","rippleOpacity","rippleDuration","rippleSize","rippleContainerBorderRadius","rippleCentered","rippleSequential","rippleFades","disabled","onLayout","onPressIn","onPressOut","pressableProps","colors","color","text","layout","setLayout","useState","width","height","rippleIds","setRippleIds","ripplesRef","useRef","Map","activeRippleRef","uniqueRef","handleLayout","event","nativeEvent","handlePressIn","useCallback","current","size","w2","h2","locationX","locationY","offsetX","Math","abs","offsetY","radius","sqrt","ripple","unique","scale","Value","opacity","set","concat","handlePressOut","releasedUnique","get","removeRipple","delete","filter","id","parallel","timing","toValue","duration","useNativeDriver","start","pointerEvents","style","styles","container","borderRadius","map","RippleCircle","toOpacity","RippleCircleComponent","useEffect","easing","out","ease","min","rippleStyle","top","isRTL","backgroundColor","transform","interpolate","inputRange","outputRange","circle","memo","create","absoluteFillObject","overflow","position"],"sourceRoot":"../../../src","sources":["components/RippleEffect.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../../src/components/Chips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,CAAC;AAEvD,KAAK,QAAQ,CAAC,IAAI,IAAI;IACpB,GAAG,EAAE,IAAI,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,CAAC,IAAI,IAAI;IACjB,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;IACvB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,sDAAsD;AACtD,wBAAgB,KAAK,CAAC,IAAI,EAAE,EAC1B,IAAI,EACJ,OAAW,EACX,OAAW,EACX,OAAO,EACP,MAAM,GACP,EAAE,KAAK,CAAC,IAAI,CAAC,+
|
|
1
|
+
{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../../src/components/Chips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,CAAC;AAEvD,KAAK,QAAQ,CAAC,IAAI,IAAI;IACpB,GAAG,EAAE,IAAI,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,CAAC,IAAI,IAAI;IACjB,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;IACvB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,sDAAsD;AACtD,wBAAgB,KAAK,CAAC,IAAI,EAAE,EAC1B,IAAI,EACJ,OAAW,EACX,OAAW,EACX,OAAO,EACP,MAAM,GACP,EAAE,KAAK,CAAC,IAAI,CAAC,+BA8Db"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RippleEffect.d.ts","sourceRoot":"","sources":["../../../../src/components/RippleEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAGV,cAAc,EACf,MAAM,cAAc,CAAC;AAatB,KAAK,KAAK,GAAG,cAAc,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAOF,qEAAqE;AACrE,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,aAAmB,EACnB,cAAoB,EACpB,UAAc,EACd,2BAA+B,EAC/B,cAAsB,EACtB,gBAAwB,EACxB,WAAkB,EAClB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,GAAG,cAAc,EAClB,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"RippleEffect.d.ts","sourceRoot":"","sources":["../../../../src/components/RippleEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAGV,cAAc,EACf,MAAM,cAAc,CAAC;AAatB,KAAK,KAAK,GAAG,cAAc,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAOF,qEAAqE;AACrE,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,aAAmB,EACnB,cAAoB,EACpB,UAAc,EACd,2BAA+B,EAC/B,cAAsB,EACtB,gBAAwB,EACxB,WAAkB,EAClB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,GAAG,cAAc,EAClB,EAAE,KAAK,qBA0IP"}
|
package/package.json
CHANGED
package/src/components/Chips.tsx
CHANGED
|
@@ -35,7 +35,7 @@ export function Chips<Item>({
|
|
|
35
35
|
onPress,
|
|
36
36
|
testID,
|
|
37
37
|
}: Props<Item>) {
|
|
38
|
-
const { colors } = useTheme();
|
|
38
|
+
const { colors, borderRadius } = useTheme();
|
|
39
39
|
const styles = useThemedStyles(makeStyles);
|
|
40
40
|
const isInteractive = typeof onPress === 'function';
|
|
41
41
|
|
|
@@ -72,6 +72,7 @@ export function Chips<Item>({
|
|
|
72
72
|
testID={`chip-${String(key)}`}
|
|
73
73
|
key={String(key)}
|
|
74
74
|
disabled={!isInteractive || disabled}
|
|
75
|
+
rippleContainerBorderRadius={Number(borderRadius.radius_20)}
|
|
75
76
|
style={[
|
|
76
77
|
styles.button,
|
|
77
78
|
schemeButton[scheme],
|
|
@@ -79,8 +80,17 @@ export function Chips<Item>({
|
|
|
79
80
|
]}
|
|
80
81
|
onPress={() => onPress?.(key)}
|
|
81
82
|
>
|
|
82
|
-
{prefix
|
|
83
|
-
|
|
83
|
+
{/* Keep this a single child when there is no prefix — a falsy
|
|
84
|
+
leading child still reserves a flex `gap` slot on the New
|
|
85
|
+
Architecture, which reads as extra padding on the label side. */}
|
|
86
|
+
{prefix == null ? (
|
|
87
|
+
<Text color={schemeTextColor[scheme]}>{label}</Text>
|
|
88
|
+
) : (
|
|
89
|
+
<View style={styles.row}>
|
|
90
|
+
<View style={styles.prefix}>{prefix}</View>
|
|
91
|
+
<Text color={schemeTextColor[scheme]}>{label}</Text>
|
|
92
|
+
</View>
|
|
93
|
+
)}
|
|
84
94
|
</Button>
|
|
85
95
|
))}
|
|
86
96
|
</ScrollView>
|
|
@@ -105,9 +115,15 @@ function makeStyles(t: ThemeType) {
|
|
|
105
115
|
borderStyle: 'solid',
|
|
106
116
|
flexDirection: 'row',
|
|
107
117
|
alignItems: 'center',
|
|
108
|
-
gap: t.spaces.horizontal.s,
|
|
109
118
|
overflow: 'hidden',
|
|
110
119
|
},
|
|
120
|
+
row: {
|
|
121
|
+
flexDirection: 'row',
|
|
122
|
+
alignItems: 'center',
|
|
123
|
+
},
|
|
124
|
+
prefix: {
|
|
125
|
+
marginRight: t.spaces.horizontal.s,
|
|
126
|
+
},
|
|
111
127
|
dimmed: {
|
|
112
128
|
opacity: 0.5,
|
|
113
129
|
},
|
|
@@ -109,19 +109,10 @@ export function RippleEffect({
|
|
|
109
109
|
ripplesRef.current.set(ripple.unique, ripple);
|
|
110
110
|
activeRippleRef.current = ripple.unique;
|
|
111
111
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
useNativeDriver: true,
|
|
117
|
-
}).start();
|
|
118
|
-
|
|
119
|
-
Animated.timing(ripple.opacity, {
|
|
120
|
-
toValue: rippleOpacity,
|
|
121
|
-
duration: Math.min(rippleDuration, PRESS_FADE_IN_DURATION),
|
|
122
|
-
useNativeDriver: true,
|
|
123
|
-
}).start();
|
|
124
|
-
|
|
112
|
+
// The entrance animation is kicked off from `RippleCircle`'s mount effect,
|
|
113
|
+
// not here: on the New Architecture, starting a native-driven animation on
|
|
114
|
+
// an `Animated.Value` before its `Animated.View` is mounted leaves the
|
|
115
|
+
// native driver with no view to attach to, so the ripple never shows.
|
|
125
116
|
setRippleIds((current) => current.concat(ripple.unique));
|
|
126
117
|
},
|
|
127
118
|
[
|
|
@@ -129,8 +120,6 @@ export function RippleEffect({
|
|
|
129
120
|
layout.height,
|
|
130
121
|
onPressIn,
|
|
131
122
|
rippleCentered,
|
|
132
|
-
rippleDuration,
|
|
133
|
-
rippleOpacity,
|
|
134
123
|
rippleSequential,
|
|
135
124
|
rippleSize,
|
|
136
125
|
]
|
|
@@ -194,7 +183,15 @@ export function RippleEffect({
|
|
|
194
183
|
{rippleIds.map((id) => {
|
|
195
184
|
const ripple = ripplesRef.current.get(id);
|
|
196
185
|
if (!ripple) return null;
|
|
197
|
-
return
|
|
186
|
+
return (
|
|
187
|
+
<RippleCircle
|
|
188
|
+
key={id}
|
|
189
|
+
ripple={ripple}
|
|
190
|
+
color={color}
|
|
191
|
+
duration={rippleDuration}
|
|
192
|
+
toOpacity={rippleOpacity}
|
|
193
|
+
/>
|
|
194
|
+
);
|
|
198
195
|
})}
|
|
199
196
|
</View>
|
|
200
197
|
</Pressable>
|
|
@@ -204,11 +201,35 @@ export function RippleEffect({
|
|
|
204
201
|
type RippleCircleProps = {
|
|
205
202
|
ripple: RippleItemType;
|
|
206
203
|
color: string;
|
|
204
|
+
duration: number;
|
|
205
|
+
toOpacity: number;
|
|
207
206
|
};
|
|
208
207
|
|
|
209
|
-
function RippleCircleComponent({
|
|
208
|
+
function RippleCircleComponent({
|
|
209
|
+
ripple,
|
|
210
|
+
color,
|
|
211
|
+
duration,
|
|
212
|
+
toOpacity,
|
|
213
|
+
}: RippleCircleProps) {
|
|
210
214
|
const { locationX, locationY, radius, scale, opacity } = ripple;
|
|
211
215
|
|
|
216
|
+
React.useEffect(() => {
|
|
217
|
+
Animated.timing(scale, {
|
|
218
|
+
toValue: 1,
|
|
219
|
+
duration,
|
|
220
|
+
easing: Easing.out(Easing.ease),
|
|
221
|
+
useNativeDriver: true,
|
|
222
|
+
}).start();
|
|
223
|
+
|
|
224
|
+
Animated.timing(opacity, {
|
|
225
|
+
toValue: toOpacity,
|
|
226
|
+
duration: Math.min(duration, PRESS_FADE_IN_DURATION),
|
|
227
|
+
useNativeDriver: true,
|
|
228
|
+
}).start();
|
|
229
|
+
// Entrance runs exactly once, when the ripple view mounts.
|
|
230
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
231
|
+
}, []);
|
|
232
|
+
|
|
212
233
|
const rippleStyle = {
|
|
213
234
|
top: locationY - CIRCLE_RADIUS,
|
|
214
235
|
[I18nManager.isRTL ? 'right' : 'left']: locationX - CIRCLE_RADIUS,
|