Skip to content
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.

Sign up for GitHub

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 'SelectionList' component to TypeScript #34794

Merged
merged 8 commits into from
Jan 24, 2024
Merged

[TS migration] Migrate 'SelectionList' component to TypeScript #34794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a79485c
Selection List migration
filip-solecki Jan 19, 2024
15f349a
Fix label error
filip-solecki Jan 19, 2024
f97db25
Merge branch 'main' into ts/SelectionList
filip-solecki Jan 22, 2024
9ccd659
Merge branch 'main' into ts/SelectionList
filip-solecki Jan 23, 2024
b0397fb
Bold options in all SelectionLists
filip-solecki Jan 23, 2024
4ad725e
Merge branch 'main' into ts/SelectionList
filip-solecki Jan 23, 2024
fdee1b8
Fix typescript
filip-solecki Jan 23, 2024
27e35d7
Fix Icon type
filip-solecki Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/components/SelectionList/BaseListItem.js → ...components/SelectionList/BaseListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import lodashGet from 'lodash/get';
import React from 'react';
import {View} from 'react-native';
import Icon from '@components/Icon';
Expand All @@ -12,10 +11,10 @@ import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import CONST from '@src/CONST';
import RadioListItem from './RadioListItem';
import {baseListItemPropTypes} from './selectionListPropTypes';
import type {BaseListItemProps, RadioItem, User} from './types';
import UserListItem from './UserListItem';

function BaseListItem({
function BaseListItem<TItem extends User | RadioItem>({
item,
isFocused = false,
isDisabled = false,
Expand All @@ -26,12 +25,12 @@ function BaseListItem({
onDismissError = () => {},
rightHandSideComponent,
keyForList,
}) {
}: BaseListItemProps<TItem>) {
const theme = useTheme();
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const {translate} = useLocalize();
const isUserItem = lodashGet(item, 'icons.length', 0) > 0;
const isUserItem = 'icons' in item && item?.icons?.length && item.icons.length > 0;
const ListItem = isUserItem ? UserListItem : RadioListItem;

const rightHandSideComponentRender = () => {
Expand All @@ -49,8 +48,8 @@ function BaseListItem({
return (
<OfflineWithFeedback
onClose={() => onDismissError(item)}
pendingAction={item.pendingAction}
errors={item.errors}
pendingAction={isUserItem ? item.pendingAction : undefined}
errors={isUserItem ? item.errors : undefined}
errorRowStyles={styles.ph5}
filip-solecki marked this conversation as resolved.
Show resolved Hide resolved
filip-solecki marked this conversation as resolved.
Show resolved Hide resolved
>
<PressableWithFeedback
Expand Down Expand Up @@ -100,6 +99,7 @@ function BaseListItem({
</View>
</View>
)}

<ListItem
item={item}
textStyles={[
Expand All @@ -111,9 +111,10 @@ function BaseListItem({
]}
alternateTextStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
isDisabled={isDisabled}
onSelectRow={onSelectRow}
onSelectRow={() => onSelectRow(item)}
showTooltip={showTooltip}
/>

{!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
<View
style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
Expand All @@ -129,7 +130,7 @@ function BaseListItem({
)}
{rightHandSideComponentRender()}
</View>
{Boolean(item.invitedSecondaryLogin) && (
{isUserItem && item.invitedSecondaryLogin && (
<Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>
filip-solecki marked this conversation as resolved.
Show resolved Hide resolved
{translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
</Text>
Expand All @@ -140,6 +141,5 @@ function BaseListItem({
}

BaseListItem.displayName = 'BaseListItem';
BaseListItem.propTypes = baseListItemPropTypes;

export default BaseListItem;
Loading
Loading