Skip to content

Commit baff37c

Browse files
chrisnojimachrisnojima
authored
fix compiler lints (#28544)
1 parent 1c0074f commit baff37c

File tree

22 files changed

+298
-210
lines changed

22 files changed

+298
-210
lines changed

‎shared/chat/conversation/list-area/index.desktop.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,6 @@ const useScrolling = (p: {
286286
) {
287287
programaticScrollRef.current = true
288288
const newTop = list.scrollHeight - scrollBottomOffsetRef.current
289-
//console.log('aaa uselayout', newTop, tempRef.current)
290289
list.scrollTop = newTop
291290
}
292291
return undefined

‎shared/chat/conversation/messages/wrapper/exploding-meta.tsx‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as C from '@/constants'
22
import * as React from 'react'
33
import {HighlightedContext, OrdinalContext} from '../ids-context'
44
import * as Kb from '@/common-adapters'
5-
import {addTicker, removeTicker, type TickerID} from '@/util/second-timer'
5+
import {addTicker, removeTicker} from '@/util/second-timer'
66
import {formatDurationShort} from '@/util/timestamp'
77
import SharedTimer, {type SharedTimerID} from '@/util/shared-timers'
88
import {animationDuration} from './exploding-height-retainer'
@@ -12,6 +12,7 @@ export type OwnProps = {onClick?: () => void}
1212
const ExplodingMetaContainer = React.memo(function ExplodingMetaContainer(p: OwnProps) {
1313
const {onClick} = p
1414
const ordinal = React.useContext(OrdinalContext)
15+
const [now, setNow] = React.useState(() => Date.now())
1516

1617
const {exploding, exploded, submitState, explodesAt, messageKey} = C.useChatContext(
1718
C.useShallow(s => {
@@ -48,54 +49,58 @@ const ExplodingMetaContainer = React.memo(function ExplodingMetaContainer(p: Own
4849
}
4950
}, [messageKey])
5051

51-
const tickerIDRef = React.useRef<TickerID>(0)
5252
const sharedTimerIDRef = React.useRef<SharedTimerID>(0)
53-
const forceUpdateIDRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
5453
const sharedTimerKeyRef = React.useRef('')
5554
const isParentHighlighted = React.useContext(HighlightedContext)
5655

57-
const [_force, setforce] = React.useState(0)
58-
const forceUpdate = React.useCallback(() => {
59-
setforce(f => f + 1)
60-
}, [])
61-
6256
const _secondLoop = React.useCallback(() => {
63-
const difference = explodesAt - Date.now()
57+
const n = Date.now()
58+
setNow(n)
59+
const difference = explodesAt - n
6460
if (difference <= 0 || exploded) {
6561
if (mode === 'countdown') {
6662
setMode('boom')
6763
}
68-
tickerIDRef.current && removeTicker(tickerIDRef.current)
6964
return
7065
}
71-
forceUpdate()
72-
}, [exploded, explodesAt, forceUpdate, mode, setMode, tickerIDRef])
66+
}, [exploded, explodesAt, mode, setMode])
7367

74-
const updateLoopRef = React.useRef<() => void>(() => {})
68+
const [inter, setInter] = React.useState(0)
7569
const updateLoop = React.useCallback(() => {
70+
setNow(Date.now())
7671
if (pending) {
72+
setInter(0)
7773
return
7874
}
7975

8076
const difference = explodesAt - Date.now()
8177
if (difference <= 0 || exploded) {
8278
setMode('boom')
79+
setInter(0)
8380
return
8481
}
8582
// we don't need a timer longer than 60000 (android complains also)
86-
const interval = Math.min(getLoopInterval(difference), 60000)
87-
if (interval < 1000) {
88-
tickerIDRef.current && removeTicker(tickerIDRef.current)
83+
setInter(Math.min(getLoopInterval(difference), 60000))
84+
}, [exploded, explodesAt, pending, setMode])
85+
86+
React.useEffect(() => {
87+
if (!inter) return () => {}
88+
89+
if (inter < 1000) {
8990
// switch to 'seconds' mode
90-
tickerIDRef.current = addTicker(_secondLoop)
91-
return
91+
const id = addTicker(_secondLoop)
92+
return () => {
93+
removeTicker(id)
94+
}
95+
} else {
96+
const id = setTimeout(() => {
97+
updateLoop()
98+
}, inter)
99+
return () => {
100+
clearTimeout(id)
101+
}
92102
}
93-
forceUpdateIDRef.current = setTimeout(() => {
94-
forceUpdate()
95-
updateLoopRef.current()
96-
}, interval)
97-
}, [_secondLoop, exploded, explodesAt, forceUpdate, forceUpdateIDRef, pending, setMode, tickerIDRef])
98-
updateLoopRef.current = updateLoop
103+
}, [inter, _secondLoop, updateLoop])
99104

100105
const _setHidden = React.useCallback(() => {
101106
mode !== 'hidden' && setMode('hidden')
@@ -141,14 +146,11 @@ const ExplodingMetaContainer = React.memo(function ExplodingMetaContainer(p: Own
141146
lastExplodedRef.current = exploded
142147

143148
return () => {
144-
tickerIDRef.current && removeTicker(tickerIDRef.current)
145149
sharedTimerIDRef.current &&
146150
SharedTimer.removeObserver(sharedTimerKeyRef.current, sharedTimerIDRef.current)
147-
forceUpdateIDRef.current && clearTimeout(forceUpdateIDRef.current)
148151
}
149-
}, [exploded, forceUpdateIDRef, messageKey, setMode, sharedTimerIDRef, sharedTimerKeyRef, tickerIDRef])
152+
}, [exploded, messageKey, setMode, sharedTimerIDRef, sharedTimerKeyRef])
150153

151-
const [now] = React.useState(() => Date.now())
152154
const backgroundColor = pending
153155
? Kb.Styles.globalColors.black
154156
: explodesAt - now < oneMinuteInMs

‎shared/common-adapters/dropdown.tsx‎

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -37,43 +37,46 @@ type DropdownButtonProps = {
3737
inline?: boolean
3838
loading?: boolean
3939
}
40-
export const DropdownButton = (props: DropdownButtonProps) => (
41-
<Kb.ClickableBox
42-
onClick={!props.disabled ? props.toggleOpen : undefined}
43-
style={Styles.collapseStyles([styles.dropdownBoxContainer, props.style])}
44-
>
45-
<Kb.Box2Measure
46-
direction="vertical"
47-
ref={props.popupAnchor}
48-
className={Styles.classNames('dropdown_border', {
49-
hover: !props.disabled,
50-
})}
51-
style={Styles.collapseStyles([
52-
styles.measureBox,
53-
{
54-
paddingRight: props.inline
55-
? Styles.globalMargins.tiny
56-
: Styles.isMobile
57-
? Styles.globalMargins.large
58-
: Styles.globalMargins.small,
59-
},
60-
props.disabled ? {opacity: 0.3} : {},
61-
{cursor: !props.disabled ? 'pointer' : undefined},
62-
{width: props.inline ? undefined : '100%'},
63-
])}
40+
export const DropdownButton = (props: DropdownButtonProps) => {
41+
const {disabled, toggleOpen, style, popupAnchor, selectedBoxStyle, inline, loading, selected} = props
42+
return (
43+
<Kb.ClickableBox
44+
onClick={!disabled ? toggleOpen : undefined}
45+
style={Styles.collapseStyles([styles.dropdownBoxContainer, style])}
6446
>
65-
<Kb.Box style={Styles.collapseStyles([styles.selectedBox, props.selectedBoxStyle])}>
66-
{props.loading ? <Kb.ProgressIndicator type="Small" /> : props.selected}
67-
</Kb.Box>
68-
<Kb.Icon
69-
type="iconfont-caret-down"
70-
inheritColor={true}
71-
sizeType="Tiny"
72-
style={{marginTop: Styles.isMobile ? 2 : -8}}
73-
/>
74-
</Kb.Box2Measure>
75-
</Kb.ClickableBox>
76-
)
47+
<Kb.Box2Measure
48+
direction="vertical"
49+
ref={popupAnchor}
50+
className={Styles.classNames('dropdown_border', {
51+
hover: !disabled,
52+
})}
53+
style={Styles.collapseStyles([
54+
styles.measureBox,
55+
{
56+
paddingRight: inline
57+
? Styles.globalMargins.tiny
58+
: Styles.isMobile
59+
? Styles.globalMargins.large
60+
: Styles.globalMargins.small,
61+
},
62+
disabled ? {opacity: 0.3} : {},
63+
{cursor: !disabled ? 'pointer' : undefined},
64+
{width: inline ? undefined : '100%'},
65+
])}
66+
>
67+
<Kb.Box style={Styles.collapseStyles([styles.selectedBox, selectedBoxStyle])}>
68+
{loading ? <Kb.ProgressIndicator type="Small" /> : selected}
69+
</Kb.Box>
70+
<Kb.Icon
71+
type="iconfont-caret-down"
72+
inheritColor={true}
73+
sizeType="Tiny"
74+
style={{marginTop: Styles.isMobile ? 2 : -8}}
75+
/>
76+
</Kb.Box2Measure>
77+
</Kb.ClickableBox>
78+
)
79+
}
7780

7881
type Props<N> = {
7982
disabled?: boolean

‎shared/common-adapters/floating-picker.native.tsx‎

Lines changed: 68 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,68 @@
1+
import * as React from 'react'
12
import * as Styles from '@/styles'
2-
import {SafeAreaView} from 'react-native'
3+
import SafeAreaView from './safe-area-view'
34
import {Picker} from '@react-native-picker/picker'
45
import {Box2} from './box'
56
import Overlay from './overlay'
67
import Text from './text'
78
import type {Props} from './floating-picker'
89

10+
const Kb = {
11+
Box2,
12+
Overlay,
13+
Picker,
14+
SafeAreaView,
15+
Text,
16+
}
17+
18+
// semi-controller to work around issues where a fully controlled one will cause the wheel on ios
19+
// to jump back and then slowly animate to the value you just went to
20+
function WrapPicker<T>(p: {
21+
initialValue?: T
22+
onValueChange: (v: T | undefined) => void
23+
prompt?: string
24+
style?: Styles.StylesCrossPlatform
25+
itemStyle?: Styles.StylesCrossPlatform
26+
options: Array<{label: string; value: T}>
27+
}) {
28+
const {initialValue, onValueChange, options, prompt, style, itemStyle} = p
29+
const [localValue, setLocalValue] = React.useState(initialValue)
30+
31+
const handleValueChange = React.useCallback(
32+
(value: T) => {
33+
const selectedOption = options.find(option => option.value === value)
34+
if (!selectedOption) return
35+
setLocalValue(selectedOption.value)
36+
onValueChange(selectedOption.value)
37+
},
38+
[onValueChange, options]
39+
)
40+
41+
return (
42+
<Picker
43+
selectedValue={localValue}
44+
onValueChange={handleValueChange}
45+
prompt={prompt}
46+
style={style}
47+
itemStyle={itemStyle}
48+
>
49+
{options.map((option, index) => (
50+
<Picker.Item key={index} label={option.label} value={option.value} />
51+
))}
52+
</Picker>
53+
)
54+
}
55+
56+
export {Picker}
57+
958
// NOTE: this doesn't seem to work well when debugging w/ chrome. aka if you scroll and set a value the native component will undo it a bunch and its very finnicky. works fine outside of that it seems
1059
const FloatingPicker = <T extends string | number>(props: Props<T>) => {
1160
if (!props.visible) {
1261
return null
1362
}
1463

1564
return (
16-
<Overlay
65+
<Kb.Overlay
1766
key={
1867
// Android bug: after selecting a new value (e.g. in
1968
// set-explode-popup), it flips to the new value, then back to the old
@@ -24,32 +73,29 @@ const FloatingPicker = <T extends string | number>(props: Props<T>) => {
2473
}
2574
onHidden={props.onHidden}
2675
>
27-
<Box2 direction="vertical" fullWidth={true} style={styles.menu}>
76+
<Kb.Box2 direction="vertical" fullWidth={true} style={styles.menu}>
2877
{props.header}
29-
<Box2 direction="horizontal" fullWidth={true} style={styles.actionButtons}>
30-
<Text type="BodySemibold" style={styles.link} onClick={props.onCancel}>
78+
<Kb.Box2 direction="horizontal" fullWidth={true} style={styles.actionButtons}>
79+
<Kb.Text type="BodySemibold" style={styles.link} onClick={props.onCancel}>
3180
Cancel
32-
</Text>
33-
<Box2 direction="horizontal" style={styles.flexOne} />
34-
<Text type="BodySemibold" style={styles.link} onClick={props.onDone}>
81+
</Kb.Text>
82+
<Kb.Box2 direction="horizontal" style={styles.flexOne} />
83+
<Kb.Text type="BodySemibold" style={styles.link} onClick={props.onDone}>
3584
Done
36-
</Text>
37-
</Box2>
85+
</Kb.Text>
86+
</Kb.Box2>
3887
{props.prompt}
39-
<Picker
40-
selectedValue={props.selectedValue}
41-
onValueChange={itemValue => props.onSelect(itemValue)}
88+
<WrapPicker<T>
89+
initialValue={props.selectedValue}
90+
onValueChange={props.onSelect}
4291
prompt={props.promptString}
4392
style={styles.picker}
4493
itemStyle={styles.item}
45-
>
46-
{props.items.map(item => (
47-
<Picker.Item key={item.label} {...item} />
48-
))}
49-
</Picker>
50-
<SafeAreaView style={styles.safeArea} />
51-
</Box2>
52-
</Overlay>
94+
options={props.items}
95+
/>
96+
<Kb.SafeAreaView style={styles.safeArea} />
97+
</Kb.Box2>
98+
</Kb.Overlay>
5399
)
54100
}
55101

@@ -101,7 +147,7 @@ const styles = Styles.styleSheetCreate(
101147
safeArea: {
102148
backgroundColor: Styles.globalColors.white,
103149
},
104-
} as const)
150+
}) as const
105151
)
106152

107153
export default FloatingPicker

‎shared/common-adapters/modal.tsx‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -54,34 +54,36 @@ type Props = {
5454
popupStyleCover?: Styles.StylesCrossPlatform
5555
}
5656

57-
const ModalInner = (props: Props) => (
58-
<>
59-
{props.header ? <Header {...props.header} /> : null}
60-
{props.banners ? props.banners : null}
61-
{props.noScrollView ? (
62-
Styles.isMobile ? (
63-
<Kb.BoxGrow>{props.children}</Kb.BoxGrow>
57+
const ModalInner = (props: Props) => {
58+
const {header, banners, noScrollView, backgroundStyle, footer} = props
59+
const {children, scrollViewRef, scrollViewContainerStyle, mode, fullscreen} = props
60+
return (
61+
<>
62+
{header ? <Header {...header} /> : null}
63+
{banners ? banners : null}
64+
{noScrollView ? (
65+
Styles.isMobile ? (
66+
<Kb.BoxGrow>{children}</Kb.BoxGrow>
67+
) : (
68+
children
69+
)
6470
) : (
65-
props.children
66-
)
67-
) : (
68-
<Kb.ScrollView
69-
ref={props.scrollViewRef}
70-
alwaysBounceVertical={false}
71-
style={Styles.collapseStyles([styles.scroll, props.backgroundStyle])}
72-
contentContainerStyle={Styles.collapseStyles([
73-
styles.scrollContentContainer,
74-
props.scrollViewContainerStyle,
75-
])}
76-
>
77-
{props.children}
78-
</Kb.ScrollView>
79-
)}
80-
{!!props.footer && (
81-
<Footer {...props.footer} wide={(props.mode ?? 'Default') === 'Wide'} fullscreen={!!props.fullscreen} />
82-
)}
83-
</>
84-
)
71+
<Kb.ScrollView
72+
ref={scrollViewRef}
73+
alwaysBounceVertical={false}
74+
style={Styles.collapseStyles([styles.scroll, backgroundStyle])}
75+
contentContainerStyle={Styles.collapseStyles([
76+
styles.scrollContentContainer,
77+
scrollViewContainerStyle,
78+
])}
79+
>
80+
{children}
81+
</Kb.ScrollView>
82+
)}
83+
{!!footer && <Footer {...footer} wide={(mode ?? 'Default') === 'Wide'} fullscreen={!!fullscreen} />}
84+
</>
85+
)
86+
}
8587

8688
/** TODO being deprecated. if you change this change modal2 and talk to #frontend **/
8789
const Modal = (props: Props) =>

0 commit comments

Comments
 (0)