Remove unused RN.Animated code (#6584)
* Remove unused RN.Animated code * Rm more dead code
This commit is contained in:
dan
@@ -1,5 +1,5 @@
|
|||||||
import React, {forwardRef} from 'react'
|
import React, {forwardRef} from 'react'
|
||||||
import {Animated, View} from 'react-native'
|
import {View} from 'react-native'
|
||||||
import PagerView, {
|
import PagerView, {
|
||||||
PagerViewOnPageScrollEvent,
|
PagerViewOnPageScrollEvent,
|
||||||
PagerViewOnPageSelectedEvent,
|
PagerViewOnPageSelectedEvent,
|
||||||
@@ -10,7 +10,6 @@ import {LogEvents} from '#/lib/statsig/events'
|
|||||||
import {atoms as a, native} from '#/alf'
|
import {atoms as a, native} from '#/alf'
|
||||||
|
|
||||||
export type PageSelectedEvent = PagerViewOnPageSelectedEvent
|
export type PageSelectedEvent = PagerViewOnPageSelectedEvent
|
||||||
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)
|
|
||||||
|
|
||||||
export interface PagerRef {
|
export interface PagerRef {
|
||||||
setPage: (
|
setPage: (
|
||||||
@@ -138,7 +137,7 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
|
|||||||
selectedPage,
|
selectedPage,
|
||||||
onSelect: onTabBarSelect,
|
onSelect: onTabBarSelect,
|
||||||
})}
|
})}
|
||||||
<AnimatedPagerView
|
<PagerView
|
||||||
ref={pagerView}
|
ref={pagerView}
|
||||||
style={[a.flex_1]}
|
style={[a.flex_1]}
|
||||||
initialPage={initialPage}
|
initialPage={initialPage}
|
||||||
@@ -146,7 +145,7 @@ export const Pager = forwardRef<PagerRef, React.PropsWithChildren<Props>>(
|
|||||||
onPageSelected={onPageSelectedInner}
|
onPageSelected={onPageSelectedInner}
|
||||||
onPageScroll={onPageScroll}>
|
onPageScroll={onPageScroll}>
|
||||||
{children}
|
{children}
|
||||||
</AnimatedPagerView>
|
</PagerView>
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,148 +0,0 @@
|
|||||||
import {createRef, useMemo, useRef, useState} from 'react'
|
|
||||||
import {Animated, Pressable, StyleSheet, View} from 'react-native'
|
|
||||||
import {msg} from '@lingui/macro'
|
|
||||||
import {useLingui} from '@lingui/react'
|
|
||||||
|
|
||||||
import {usePalette} from '#/lib/hooks/usePalette'
|
|
||||||
import {Text} from './text/Text'
|
|
||||||
|
|
||||||
interface Layout {
|
|
||||||
x: number
|
|
||||||
width: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Selector({
|
|
||||||
selectedIndex,
|
|
||||||
items,
|
|
||||||
panX,
|
|
||||||
onSelect,
|
|
||||||
}: {
|
|
||||||
selectedIndex: number
|
|
||||||
items: string[]
|
|
||||||
panX: Animated.Value
|
|
||||||
onSelect?: (index: number) => void
|
|
||||||
}) {
|
|
||||||
const {_} = useLingui()
|
|
||||||
const containerRef = useRef<View>(null)
|
|
||||||
const pal = usePalette('default')
|
|
||||||
const [itemLayouts, setItemLayouts] = useState<undefined | Layout[]>(
|
|
||||||
undefined,
|
|
||||||
)
|
|
||||||
const itemRefs = useMemo(
|
|
||||||
() => Array.from({length: items.length}).map(() => createRef<View>()),
|
|
||||||
[items.length],
|
|
||||||
)
|
|
||||||
|
|
||||||
const currentLayouts = useMemo(() => {
|
|
||||||
const left = itemLayouts?.[selectedIndex - 1] || {x: 0, width: 0}
|
|
||||||
const middle = itemLayouts?.[selectedIndex] || {x: 0, width: 0}
|
|
||||||
const right = itemLayouts?.[selectedIndex + 1] || {
|
|
||||||
x: middle.x + 20,
|
|
||||||
width: middle.width,
|
|
||||||
}
|
|
||||||
return [left, middle, right]
|
|
||||||
}, [selectedIndex, itemLayouts])
|
|
||||||
|
|
||||||
const underlineStyle = {
|
|
||||||
backgroundColor: pal.colors.text,
|
|
||||||
left: panX.interpolate({
|
|
||||||
inputRange: [-1, 0, 1],
|
|
||||||
outputRange: [
|
|
||||||
currentLayouts[0].x,
|
|
||||||
currentLayouts[1].x,
|
|
||||||
currentLayouts[2].x,
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
width: panX.interpolate({
|
|
||||||
inputRange: [-1, 0, 1],
|
|
||||||
outputRange: [
|
|
||||||
currentLayouts[0].width,
|
|
||||||
currentLayouts[1].width,
|
|
||||||
currentLayouts[2].width,
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
|
|
||||||
const onLayout = () => {
|
|
||||||
const promises = []
|
|
||||||
for (let i = 0; i < items.length; i++) {
|
|
||||||
promises.push(
|
|
||||||
new Promise<Layout>(resolve => {
|
|
||||||
if (!containerRef.current || !itemRefs[i].current) {
|
|
||||||
return resolve({x: 0, width: 0})
|
|
||||||
}
|
|
||||||
itemRefs[i].current?.measureLayout(
|
|
||||||
containerRef.current,
|
|
||||||
(x: number, _y: number, width: number) => {
|
|
||||||
resolve({x, width})
|
|
||||||
},
|
|
||||||
)
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Promise.all(promises).then((layouts: Layout[]) => {
|
|
||||||
setItemLayouts(layouts)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const onPressItem = (index: number) => {
|
|
||||||
onSelect?.(index)
|
|
||||||
}
|
|
||||||
|
|
||||||
const numItems = items.length
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
style={[pal.view, styles.outer]}
|
|
||||||
onLayout={onLayout}
|
|
||||||
ref={containerRef}>
|
|
||||||
<Animated.View style={[styles.underline, underlineStyle]} />
|
|
||||||
{items.map((item, i) => {
|
|
||||||
const selected = i === selectedIndex
|
|
||||||
return (
|
|
||||||
<Pressable
|
|
||||||
testID={`selector-${i}`}
|
|
||||||
key={item}
|
|
||||||
onPress={() => onPressItem(i)}
|
|
||||||
accessibilityLabel={_(msg`Select ${item}`)}
|
|
||||||
accessibilityHint={_(msg`Select option ${i} of ${numItems}`)}>
|
|
||||||
<View style={styles.item} ref={itemRefs[i]}>
|
|
||||||
<Text
|
|
||||||
style={
|
|
||||||
selected
|
|
||||||
? [styles.labelSelected, pal.text]
|
|
||||||
: [styles.label, pal.textLight]
|
|
||||||
}>
|
|
||||||
{item}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</Pressable>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
outer: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
paddingTop: 8,
|
|
||||||
paddingBottom: 12,
|
|
||||||
paddingHorizontal: 14,
|
|
||||||
},
|
|
||||||
item: {
|
|
||||||
marginRight: 14,
|
|
||||||
paddingHorizontal: 10,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
fontWeight: '600',
|
|
||||||
},
|
|
||||||
labelSelected: {
|
|
||||||
fontWeight: '600',
|
|
||||||
},
|
|
||||||
underline: {
|
|
||||||
position: 'absolute',
|
|
||||||
height: 4,
|
|
||||||
bottom: 0,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
@@ -1,74 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {Animated, StyleProp, View, ViewStyle} from 'react-native'
|
|
||||||
|
|
||||||
import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue'
|
|
||||||
|
|
||||||
type CreateAnimFn = (interp: Animated.Value) => Animated.CompositeAnimation
|
|
||||||
type FinishCb = () => void
|
|
||||||
|
|
||||||
interface TriggeredAnimation {
|
|
||||||
start: CreateAnimFn
|
|
||||||
style: (
|
|
||||||
interp: Animated.Value,
|
|
||||||
) => Animated.WithAnimatedValue<StyleProp<ViewStyle>>
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TriggerableAnimatedRef {
|
|
||||||
trigger: (anim: TriggeredAnimation, onFinish?: FinishCb) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
type TriggerableAnimatedProps = React.PropsWithChildren<{}>
|
|
||||||
|
|
||||||
type PropsInner = TriggerableAnimatedProps & {
|
|
||||||
anim: TriggeredAnimation
|
|
||||||
onFinish: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export const TriggerableAnimated = React.forwardRef<
|
|
||||||
TriggerableAnimatedRef,
|
|
||||||
TriggerableAnimatedProps
|
|
||||||
>(function TriggerableAnimatedImpl({children, ...props}, ref) {
|
|
||||||
const [anim, setAnim] = React.useState<TriggeredAnimation | undefined>(
|
|
||||||
undefined,
|
|
||||||
)
|
|
||||||
const [finishCb, setFinishCb] = React.useState<FinishCb | undefined>(
|
|
||||||
undefined,
|
|
||||||
)
|
|
||||||
React.useImperativeHandle(ref, () => ({
|
|
||||||
trigger(v: TriggeredAnimation, cb?: FinishCb) {
|
|
||||||
setFinishCb(() => cb) // note- wrap in function due to react behaviors around setstate
|
|
||||||
setAnim(v)
|
|
||||||
},
|
|
||||||
}))
|
|
||||||
const onFinish = () => {
|
|
||||||
finishCb?.()
|
|
||||||
setAnim(undefined)
|
|
||||||
setFinishCb(undefined)
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<View key="triggerable">
|
|
||||||
{anim ? (
|
|
||||||
<AnimatingView anim={anim} onFinish={onFinish} {...props}>
|
|
||||||
{children}
|
|
||||||
</AnimatingView>
|
|
||||||
) : (
|
|
||||||
children
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
function AnimatingView({
|
|
||||||
anim,
|
|
||||||
onFinish,
|
|
||||||
children,
|
|
||||||
}: React.PropsWithChildren<PropsInner>) {
|
|
||||||
const interp = useAnimatedValue(0)
|
|
||||||
React.useEffect(() => {
|
|
||||||
anim?.start(interp).start(() => {
|
|
||||||
onFinish()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
const animStyle = anim?.style(interp)
|
|
||||||
return <Animated.View style={animStyle}>{children}</Animated.View>
|
|
||||||
}
|
|
||||||
@@ -1,201 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import {StyleProp, TextStyle} from 'react-native'
|
|
||||||
import {AppBskyRichtextFacet, RichText as RichTextObj} from '@atproto/api'
|
|
||||||
|
|
||||||
import {usePalette} from '#/lib/hooks/usePalette'
|
|
||||||
import {makeTagLink} from '#/lib/routes/links'
|
|
||||||
import {toShortUrl} from '#/lib/strings/url-helpers'
|
|
||||||
import {lh} from '#/lib/styles'
|
|
||||||
import {TypographyVariant, useTheme} from '#/lib/ThemeContext'
|
|
||||||
import {isNative} from '#/platform/detection'
|
|
||||||
import {TagMenu, useTagMenuControl} from '#/components/TagMenu'
|
|
||||||
import {TextLink} from '../Link'
|
|
||||||
import {Text} from './Text'
|
|
||||||
|
|
||||||
const WORD_WRAP = {wordWrap: 1}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated use `#/components/RichText`
|
|
||||||
*/
|
|
||||||
export function RichText({
|
|
||||||
testID,
|
|
||||||
type = 'md',
|
|
||||||
richText,
|
|
||||||
lineHeight = 1.2,
|
|
||||||
style,
|
|
||||||
numberOfLines,
|
|
||||||
selectable,
|
|
||||||
noLinks,
|
|
||||||
}: {
|
|
||||||
testID?: string
|
|
||||||
type?: TypographyVariant
|
|
||||||
richText?: RichTextObj
|
|
||||||
lineHeight?: number
|
|
||||||
style?: StyleProp<TextStyle>
|
|
||||||
numberOfLines?: number
|
|
||||||
selectable?: boolean
|
|
||||||
noLinks?: boolean
|
|
||||||
}) {
|
|
||||||
const theme = useTheme()
|
|
||||||
const pal = usePalette('default')
|
|
||||||
const lineHeightStyle = lh(theme, type, lineHeight)
|
|
||||||
|
|
||||||
if (!richText) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const {text, facets} = richText
|
|
||||||
if (!facets?.length) {
|
|
||||||
if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) {
|
|
||||||
style = {
|
|
||||||
fontSize: 26,
|
|
||||||
lineHeight: 30,
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
// @ts-ignore web only -prf
|
|
||||||
<Text
|
|
||||||
testID={testID}
|
|
||||||
style={[style, pal.text]}
|
|
||||||
dataSet={WORD_WRAP}
|
|
||||||
selectable={selectable}>
|
|
||||||
{text}
|
|
||||||
</Text>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Text
|
|
||||||
testID={testID}
|
|
||||||
type={type}
|
|
||||||
style={[style, pal.text, lineHeightStyle]}
|
|
||||||
numberOfLines={numberOfLines}
|
|
||||||
// @ts-ignore web only -prf
|
|
||||||
dataSet={WORD_WRAP}
|
|
||||||
selectable={selectable}>
|
|
||||||
{text}
|
|
||||||
</Text>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (!style) {
|
|
||||||
style = []
|
|
||||||
} else if (!Array.isArray(style)) {
|
|
||||||
style = [style]
|
|
||||||
}
|
|
||||||
|
|
||||||
const els = []
|
|
||||||
let key = 0
|
|
||||||
for (const segment of richText.segments()) {
|
|
||||||
const link = segment.link
|
|
||||||
const mention = segment.mention
|
|
||||||
const tag = segment.tag
|
|
||||||
if (
|
|
||||||
!noLinks &&
|
|
||||||
mention &&
|
|
||||||
AppBskyRichtextFacet.validateMention(mention).success
|
|
||||||
) {
|
|
||||||
els.push(
|
|
||||||
<TextLink
|
|
||||||
key={key}
|
|
||||||
type={type}
|
|
||||||
text={segment.text}
|
|
||||||
href={`/profile/${mention.did}`}
|
|
||||||
style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
|
|
||||||
dataSet={WORD_WRAP}
|
|
||||||
selectable={selectable}
|
|
||||||
/>,
|
|
||||||
)
|
|
||||||
} else if (link && AppBskyRichtextFacet.validateLink(link).success) {
|
|
||||||
if (noLinks) {
|
|
||||||
els.push(toShortUrl(segment.text))
|
|
||||||
} else {
|
|
||||||
els.push(
|
|
||||||
<TextLink
|
|
||||||
key={key}
|
|
||||||
type={type}
|
|
||||||
text={toShortUrl(segment.text)}
|
|
||||||
href={link.uri}
|
|
||||||
style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
|
|
||||||
dataSet={WORD_WRAP}
|
|
||||||
selectable={selectable}
|
|
||||||
/>,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
} else if (
|
|
||||||
!noLinks &&
|
|
||||||
tag &&
|
|
||||||
AppBskyRichtextFacet.validateTag(tag).success
|
|
||||||
) {
|
|
||||||
els.push(
|
|
||||||
<RichTextTag
|
|
||||||
key={key}
|
|
||||||
text={segment.text}
|
|
||||||
type={type}
|
|
||||||
style={style}
|
|
||||||
lineHeightStyle={lineHeightStyle}
|
|
||||||
selectable={selectable}
|
|
||||||
/>,
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
els.push(segment.text)
|
|
||||||
}
|
|
||||||
key++
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Text
|
|
||||||
testID={testID}
|
|
||||||
type={type}
|
|
||||||
style={[style, pal.text, lineHeightStyle]}
|
|
||||||
numberOfLines={numberOfLines}
|
|
||||||
// @ts-ignore web only -prf
|
|
||||||
dataSet={WORD_WRAP}
|
|
||||||
selectable={selectable}>
|
|
||||||
{els}
|
|
||||||
</Text>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function RichTextTag({
|
|
||||||
text: tag,
|
|
||||||
type,
|
|
||||||
style,
|
|
||||||
lineHeightStyle,
|
|
||||||
selectable,
|
|
||||||
}: {
|
|
||||||
text: string
|
|
||||||
type?: TypographyVariant
|
|
||||||
style?: StyleProp<TextStyle>
|
|
||||||
lineHeightStyle?: TextStyle
|
|
||||||
selectable?: boolean
|
|
||||||
}) {
|
|
||||||
const pal = usePalette('default')
|
|
||||||
const control = useTagMenuControl()
|
|
||||||
|
|
||||||
const open = React.useCallback(() => {
|
|
||||||
control.open()
|
|
||||||
}, [control])
|
|
||||||
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
<TagMenu control={control} tag={tag}>
|
|
||||||
{isNative ? (
|
|
||||||
<TextLink
|
|
||||||
type={type}
|
|
||||||
text={tag}
|
|
||||||
// segment.text has the leading "#" while tag.tag does not
|
|
||||||
href={makeTagLink(tag)}
|
|
||||||
style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}
|
|
||||||
dataSet={WORD_WRAP}
|
|
||||||
selectable={selectable}
|
|
||||||
onPress={open}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Text
|
|
||||||
selectable={selectable}
|
|
||||||
type={type}
|
|
||||||
style={[style, lineHeightStyle, pal.link, {pointerEvents: 'auto'}]}>
|
|
||||||
{tag}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</TagMenu>
|
|
||||||
</React.Fragment>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user