nasso.dev
my fork of the bluesky client
Remove unused RN.Animated code (#6584)
* Remove unused RN.Animated code
* Rm more dead code
authored by
GitHub
ad83b830
6438ec6d
+3
-4
src/view/com/pager/Pager.tsx
+3
-4
src/view/com/pager/Pager.tsx
···
1
1
import React, {forwardRef} from 'react'
2
-
import {Animated, View} from 'react-native'
2
+
import {View} from 'react-native'
3
3
import PagerView, {
4
4
PagerViewOnPageScrollEvent,
5
5
PagerViewOnPageSelectedEvent,
···
10
10
import {atoms as a, native} from '#/alf'
11
11
12
12
export type PageSelectedEvent = PagerViewOnPageSelectedEvent
13
-
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)
14
13
15
14
export interface PagerRef {
16
15
setPage: (
···
138
137
selectedPage,
139
138
onSelect: onTabBarSelect,
140
139
})}
141
-
<AnimatedPagerView
140
+
<PagerView
142
141
ref={pagerView}
143
142
style={[a.flex_1]}
144
143
initialPage={initialPage}
···
146
145
onPageSelected={onPageSelectedInner}
147
146
onPageScroll={onPageScroll}>
148
147
{children}
149
-
</AnimatedPagerView>
148
+
</PagerView>
150
149
</View>
151
150
)
152
151
},
-148
src/view/com/util/Selector.tsx
-148
src/view/com/util/Selector.tsx
···
1
-
import {createRef, useMemo, useRef, useState} from 'react'
2
-
import {Animated, Pressable, StyleSheet, View} from 'react-native'
3
-
import {msg} from '@lingui/macro'
4
-
import {useLingui} from '@lingui/react'
5
-
6
-
import {usePalette} from '#/lib/hooks/usePalette'
7
-
import {Text} from './text/Text'
8
-
9
-
interface Layout {
10
-
x: number
11
-
width: number
12
-
}
13
-
14
-
export function Selector({
15
-
selectedIndex,
16
-
items,
17
-
panX,
18
-
onSelect,
19
-
}: {
20
-
selectedIndex: number
21
-
items: string[]
22
-
panX: Animated.Value
23
-
onSelect?: (index: number) => void
24
-
}) {
25
-
const {_} = useLingui()
26
-
const containerRef = useRef<View>(null)
27
-
const pal = usePalette('default')
28
-
const [itemLayouts, setItemLayouts] = useState<undefined | Layout[]>(
29
-
undefined,
30
-
)
31
-
const itemRefs = useMemo(
32
-
() => Array.from({length: items.length}).map(() => createRef<View>()),
33
-
[items.length],
34
-
)
35
-
36
-
const currentLayouts = useMemo(() => {
37
-
const left = itemLayouts?.[selectedIndex - 1] || {x: 0, width: 0}
38
-
const middle = itemLayouts?.[selectedIndex] || {x: 0, width: 0}
39
-
const right = itemLayouts?.[selectedIndex + 1] || {
40
-
x: middle.x + 20,
41
-
width: middle.width,
42
-
}
43
-
return [left, middle, right]
44
-
}, [selectedIndex, itemLayouts])
45
-
46
-
const underlineStyle = {
47
-
backgroundColor: pal.colors.text,
48
-
left: panX.interpolate({
49
-
inputRange: [-1, 0, 1],
50
-
outputRange: [
51
-
currentLayouts[0].x,
52
-
currentLayouts[1].x,
53
-
currentLayouts[2].x,
54
-
],
55
-
}),
56
-
width: panX.interpolate({
57
-
inputRange: [-1, 0, 1],
58
-
outputRange: [
59
-
currentLayouts[0].width,
60
-
currentLayouts[1].width,
61
-
currentLayouts[2].width,
62
-
],
63
-
}),
64
-
}
65
-
66
-
const onLayout = () => {
67
-
const promises = []
68
-
for (let i = 0; i < items.length; i++) {
69
-
promises.push(
70
-
new Promise<Layout>(resolve => {
71
-
if (!containerRef.current || !itemRefs[i].current) {
72
-
return resolve({x: 0, width: 0})
73
-
}
74
-
itemRefs[i].current?.measureLayout(
75
-
containerRef.current,
76
-
(x: number, _y: number, width: number) => {
77
-
resolve({x, width})
78
-
},
79
-
)
80
-
}),
81
-
)
82
-
}
83
-
Promise.all(promises).then((layouts: Layout[]) => {
84
-
setItemLayouts(layouts)
85
-
})
86
-
}
87
-
88
-
const onPressItem = (index: number) => {
89
-
onSelect?.(index)
90
-
}
91
-
92
-
const numItems = items.length
93
-
94
-
return (
95
-
<View
96
-
style={[pal.view, styles.outer]}
97
-
onLayout={onLayout}
98
-
ref={containerRef}>
99
-
<Animated.View style={[styles.underline, underlineStyle]} />
100
-
{items.map((item, i) => {
101
-
const selected = i === selectedIndex
102
-
return (
103
-
<Pressable
104
-
testID={`selector-${i}`}
105
-
key={item}
106
-
onPress={() => onPressItem(i)}
107
-
accessibilityLabel={_(msg`Select ${item}`)}
108
-
accessibilityHint={_(msg`Select option ${i} of ${numItems}`)}>
109
-
<View style={styles.item} ref={itemRefs[i]}>
110
-
<Text
111
-
style={
112
-
selected
113
-
? [styles.labelSelected, pal.text]
114
-
: [styles.label, pal.textLight]
115
-
}>
116
-
{item}
117
-
</Text>
118
-
</View>
119
-
</Pressable>
120
-
)
121
-
})}
122
-
</View>
123
-
)
124
-
}
125
-
126
-
const styles = StyleSheet.create({
127
-
outer: {
128
-
flexDirection: 'row',
129
-
paddingTop: 8,
130
-
paddingBottom: 12,
131
-
paddingHorizontal: 14,
132
-
},
133
-
item: {
134
-
marginRight: 14,
135
-
paddingHorizontal: 10,
136
-
},
137
-
label: {
138
-
fontWeight: '600',
139
-
},
140
-
labelSelected: {
141
-
fontWeight: '600',
142
-
},
143
-
underline: {
144
-
position: 'absolute',
145
-
height: 4,
146
-
bottom: 0,
147
-
},
148
-
})
-74
src/view/com/util/anim/TriggerableAnimated.tsx
-74
src/view/com/util/anim/TriggerableAnimated.tsx
···
1
-
import React from 'react'
2
-
import {Animated, StyleProp, View, ViewStyle} from 'react-native'
3
-
4
-
import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue'
5
-
6
-
type CreateAnimFn = (interp: Animated.Value) => Animated.CompositeAnimation
7
-
type FinishCb = () => void
8
-
9
-
interface TriggeredAnimation {
10
-
start: CreateAnimFn
11
-
style: (
12
-
interp: Animated.Value,
13
-
) => Animated.WithAnimatedValue<StyleProp<ViewStyle>>
14
-
}
15
-
16
-
export interface TriggerableAnimatedRef {
17
-
trigger: (anim: TriggeredAnimation, onFinish?: FinishCb) => void
18
-
}
19
-
20
-
type TriggerableAnimatedProps = React.PropsWithChildren<{}>
21
-
22
-
type PropsInner = TriggerableAnimatedProps & {
23
-
anim: TriggeredAnimation
24
-
onFinish: () => void
25
-
}
26
-
27
-
export const TriggerableAnimated = React.forwardRef<
28
-
TriggerableAnimatedRef,
29
-
TriggerableAnimatedProps
30
-
>(function TriggerableAnimatedImpl({children, ...props}, ref) {
31
-
const [anim, setAnim] = React.useState<TriggeredAnimation | undefined>(
32
-
undefined,
33
-
)
34
-
const [finishCb, setFinishCb] = React.useState<FinishCb | undefined>(
35
-
undefined,
36
-
)
37
-
React.useImperativeHandle(ref, () => ({
38
-
trigger(v: TriggeredAnimation, cb?: FinishCb) {
39
-
setFinishCb(() => cb) // note- wrap in function due to react behaviors around setstate
40
-
setAnim(v)
41
-
},
42
-
}))
43
-
const onFinish = () => {
44
-
finishCb?.()
45
-
setAnim(undefined)
46
-
setFinishCb(undefined)
47
-
}
48
-
return (
49
-
<View key="triggerable">
50
-
{anim ? (
51
-
<AnimatingView anim={anim} onFinish={onFinish} {...props}>
52
-
{children}
53
-
</AnimatingView>
54
-
) : (
55
-
children
56
-
)}
57
-
</View>
58
-
)
59
-
})
60
-
61
-
function AnimatingView({
62
-
anim,
63
-
onFinish,
64
-
children,
65
-
}: React.PropsWithChildren<PropsInner>) {
66
-
const interp = useAnimatedValue(0)
67
-
React.useEffect(() => {
68
-
anim?.start(interp).start(() => {
69
-
onFinish()
70
-
})
71
-
})
72
-
const animStyle = anim?.style(interp)
73
-
return <Animated.View style={animStyle}>{children}</Animated.View>
74
-
}
-201
src/view/com/util/text/RichText.tsx
-201
src/view/com/util/text/RichText.tsx
···
1
-
import React from 'react'
2
-
import {StyleProp, TextStyle} from 'react-native'
3
-
import {AppBskyRichtextFacet, RichText as RichTextObj} from '@atproto/api'
4
-
5
-
import {usePalette} from '#/lib/hooks/usePalette'
6
-
import {makeTagLink} from '#/lib/routes/links'
7
-
import {toShortUrl} from '#/lib/strings/url-helpers'
8
-
import {lh} from '#/lib/styles'
9
-
import {TypographyVariant, useTheme} from '#/lib/ThemeContext'
10
-
import {isNative} from '#/platform/detection'
11
-
import {TagMenu, useTagMenuControl} from '#/components/TagMenu'
12
-
import {TextLink} from '../Link'
13
-
import {Text} from './Text'
14
-
15
-
const WORD_WRAP = {wordWrap: 1}
16
-
17
-
/**
18
-
* @deprecated use `#/components/RichText`
19
-
*/
20
-
export function RichText({
21
-
testID,
22
-
type = 'md',
23
-
richText,
24
-
lineHeight = 1.2,
25
-
style,
26
-
numberOfLines,
27
-
selectable,
28
-
noLinks,
29
-
}: {
30
-
testID?: string
31
-
type?: TypographyVariant
32
-
richText?: RichTextObj
33
-
lineHeight?: number
34
-
style?: StyleProp<TextStyle>
35
-
numberOfLines?: number
36
-
selectable?: boolean
37
-
noLinks?: boolean
38
-
}) {
39
-
const theme = useTheme()
40
-
const pal = usePalette('default')
41
-
const lineHeightStyle = lh(theme, type, lineHeight)
42
-
43
-
if (!richText) {
44
-
return null
45
-
}
46
-
47
-
const {text, facets} = richText
48
-
if (!facets?.length) {
49
-
if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) {
50
-
style = {
51
-
fontSize: 26,
52
-
lineHeight: 30,
53
-
}
54
-
return (
55
-
// @ts-ignore web only -prf
56
-
<Text
57
-
testID={testID}
58
-
style={[style, pal.text]}
59
-
dataSet={WORD_WRAP}
60
-
selectable={selectable}>
61
-
{text}
62
-
</Text>
63
-
)
64
-
}
65
-
return (
66
-
<Text
67
-
testID={testID}
68
-
type={type}
69
-
style={[style, pal.text, lineHeightStyle]}
70
-
numberOfLines={numberOfLines}
71
-
// @ts-ignore web only -prf
72
-
dataSet={WORD_WRAP}
73
-
selectable={selectable}>
74
-
{text}
75
-
</Text>
76
-
)
77
-
}
78
-
if (!style) {
79
-
style = []
80
-
} else if (!Array.isArray(style)) {
81
-
style = [style]
82
-
}
83
-
84
-
const els = []
85
-
let key = 0
86
-
for (const segment of richText.segments()) {
87
-
const link = segment.link
88
-
const mention = segment.mention
89
-
const tag = segment.tag
90
-
if (
91
-
!noLinks &&
92
-
mention &&
93
-
AppBskyRichtextFacet.validateMention(mention).success
94
-
) {
95
-
els.push(
96
-
<TextLink
97
-
key={key}
98
-
type={type}
99
-
text={segment.text}
100
-
href={`/profile/${mention.did}`}
101
-
style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
102
-
dataSet={WORD_WRAP}
103
-
selectable={selectable}
104
-
/>,
105
-
)
106
-
} else if (link && AppBskyRichtextFacet.validateLink(link).success) {
107
-
if (noLinks) {
108
-
els.push(toShortUrl(segment.text))
109
-
} else {
110
-
els.push(
111
-
<TextLink
112
-
key={key}
113
-
type={type}
114
-
text={toShortUrl(segment.text)}
115
-
href={link.uri}
116
-
style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
117
-
dataSet={WORD_WRAP}
118
-
selectable={selectable}
119
-
/>,
120
-
)
121
-
}
122
-
} else if (
123
-
!noLinks &&
124
-
tag &&
125
-
AppBskyRichtextFacet.validateTag(tag).success
126
-
) {
127
-
els.push(
128
-
<RichTextTag
129
-
key={key}
130
-
text={segment.text}
131
-
type={type}
132
-
style={style}
133
-
lineHeightStyle={lineHeightStyle}
134
-
selectable={selectable}
135
-
/>,
136
-
)
137
-
} else {
138
-
els.push(segment.text)
139
-
}
140
-
key++
141
-
}
142
-
return (
143
-
<Text
144
-
testID={testID}
145
-
type={type}
146
-
style={[style, pal.text, lineHeightStyle]}
147
-
numberOfLines={numberOfLines}
148
-
// @ts-ignore web only -prf
149
-
dataSet={WORD_WRAP}
150
-
selectable={selectable}>
151
-
{els}
152
-
</Text>
153
-
)
154
-
}
155
-
156
-
function RichTextTag({
157
-
text: tag,
158
-
type,
159
-
style,
160
-
lineHeightStyle,
161
-
selectable,
162
-
}: {
163
-
text: string
164
-
type?: TypographyVariant
165
-
style?: StyleProp<TextStyle>
166
-
lineHeightStyle?: TextStyle
167
-
selectable?: boolean
168
-
}) {
169
-
const pal = usePalette('default')
170
-
const control = useTagMenuControl()
171
-
172
-
const open = React.useCallback(() => {
173
-
control.open()
174
-
}, [control])
175
-
176
-
return (
177
-
<React.Fragment>
178
-
<TagMenu control={control} tag={tag}>
179
-
{isNative ? (
180
-
<TextLink
181
-
type={type}
182
-
text={tag}
183
-
// segment.text has the leading "#" while tag.tag does not
184
-
href={makeTagLink(tag)}
185
-
style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
186
-
dataSet={WORD_WRAP}
187
-
selectable={selectable}
188
-
onPress={open}
189
-
/>
190
-
) : (
191
-
<Text
192
-
selectable={selectable}
193
-
type={type}
194
-
style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}>
195
-
{tag}
196
-
</Text>
197
-
)}
198
-
</TagMenu>
199
-
</React.Fragment>
200
-
)
201
-
}