-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TS migration] Migrate 'DisplayNames' component to TypeScript #30843
[TS migration] Migrate 'DisplayNames' component to TypeScript #30843
Conversation
type HTMLElementWithText = HTMLElement & RNText; | ||
|
||
function DisplayNamesWithToolTip({shouldUseFullTitle, fullTitle, displayNamesWithTooltips, textStyles = [], numberOfLines = 1}: DisplayNamesProps) { | ||
const containerRef = useRef<HTMLElementWithText>(null); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just wondering if this will be always a html element ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@kubabutkiewicz If I type it with just Text it gives errors, because Text ref doesn't have getBoundingClientRect
, offsetWidth
, scrollWidth
props
ref={(el) => (containerRef.current = el)} | ||
style={[textStyles, styles.pRelative, numberOfLines === 1 ? styles.noWrap : {}]} | ||
numberOfLines={numberOfLines || undefined} | ||
ref={containerRef} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why this logic change?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@kubabutkiewicz There are two reasons:
- With old logic it gives ts error:
Cannot assign to current because it is a read-only property.
- I console log
containerRef
with old and updated logic and it seems to have the same result.
childRefs={childRefs} | ||
addComma={index < props.displayNamesWithTooltips.length - 1} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why removing that?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@kubabutkiewicz I haven't found it's being used in the component it's passed to
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm 😄
LGTM! 😄 |
Reviewer Checklist
Screenshots/VideosAndroid: Nativeandroid-native-2023-11-10_16.32.22.mp4Android: mWeb Chromeandroid-chrome-2023-11-10_16.26.26.mp4iOS: Nativeios-native-2023-11-10_16.46.52.mp4iOS: mWeb Safariios-safari-2023-11-10_16.22.04.mp4MacOS: Chrome / Safaridesktop-chrome-2023-11-10_16.14.52.mp4MacOS: Desktopdesktop-app-2023-11-10_16.48.44.mp4 |
@VickyStash I'm getting some strange behaviour when switching between reports. Pretty consistently I manage to get into a state where tooltips don't show anywhere (this doesn't happen on main or staging) after switching between a few reports: desktop-chrome-2023-11-09_17.03.08.mp4 |
@jjcoffee I've noticed that it also doesn't show a tooltip for avatars, though this PR doesn't touch that functionality. |
style={[...props.textStyles, styles.pRelative, props.numberOfLines === 1 ? styles.noWrap : {}]} | ||
numberOfLines={props.numberOfLines || undefined} | ||
ref={(el) => (containerRef.current = el)} | ||
style={[textStyles, styles.pRelative, numberOfLines === 1 ? styles.noWrap : {}]} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just wondering why the spread syntax was removed here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jjcoffee This way textStyles
folllows StyleProp<TextStyle>
type and user can provide an array or object, and both will work cause React Native supports nested arrays in styles.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
We did not find an internal engineer to review this PR, trying to assign a random engineer to #25070 as well as to this PR... Please reach out for help on Slack if no one gets assigned! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good thank you.
const propTypes = { | ||
index: PropTypes.number, | ||
type DisplayNamesTooltipItemProps = { | ||
index?: number; | ||
|
||
/** The full title of the DisplayNames component (not split up) */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
NAB: This comment is inaccurate.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm going to merge now. If you would please do this in a follow up that would be great.
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
🚀 Deployed to staging by https://github.com/neil-marcellini in version: 1.3.99-0 🚀
|
🚀 Deployed to production by https://github.com/roryabraham in version: 1.3.99-0 🚀
|
🚀 Deployed to staging by https://github.com/neil-marcellini in version: 1.4.0-0 🚀
|
Details
[TS migration] Migrate 'DisplayNames' component to TypeScript
Fixed Issues
$ #25070
PROPOSAL: N/A
Tests
On Web/Desktop:
On Mobile:
Check next places:
Offline tests
N/A
QA Steps
On Web/Desktop:
On Mobile:
Check next places:
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)/** comment above it */
this
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
web.mp4
safari.mp4
MacOS: Desktop
desktop.mp4