Skip to content

Commit

Permalink
Refactor layout of WorkspaceListRow
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkdengineer
nkdengineer committed Apr 11, 2024
1 parent 260a7de commit e59be19
Showing 1 changed file with 93 additions and 104 deletions.
197 changes: 93 additions & 104 deletions src/pages/workspace/WorkspacesListRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import type {AnchorPosition} from '@styles/index';
import variables from '@styles/variables';
import CONST from '@src/CONST';
import type IconAsset from '@src/types/utils/IconAsset';
import useWindowDimensions from '@hooks/useWindowDimensions';

type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
/** Name of the workspace */
Expand Down Expand Up @@ -108,6 +109,7 @@ function WorkspacesListRow({
const {translate} = useLocalize();
const [threeDotsMenuPosition, setThreeDotsMenuPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0});
const threeDotsMenuContainerRef = useRef<View>(null);
const {isSmallScreenWidth} = useWindowDimensions();

const ownerDetails = ownerAccountID && PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID)[0];

Expand Down Expand Up @@ -136,124 +138,111 @@ function WorkspacesListRow({
const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false;

return (
<View style={[isWide ? styles.flexRow : styles.flexColumn, isWide && styles.gap5, styles.highlightBG, styles.br3, styles.pv5, styles.pl5, rowStyles, style]}>
<View style={[styles.flexRow, isWide && styles.flex1, styles.gap3, isNarrow && [styles.mb3, styles.mr5], styles.alignItemsCenter]}>
<Avatar
imageStyles={[styles.alignSelfCenter]}
size={CONST.AVATAR_SIZE.DEFAULT}
source={workspaceIcon}
fallbackIcon={fallbackWorkspaceIcon}
name={title}
type={CONST.ICON_TYPE_WORKSPACE}
/>
<Text
numberOfLines={1}
style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
>
{title}
</Text>
{isNarrow &&
(!isJoinRequestPending ? (
<View style={[styles.flexRow, styles.highlightBG, rowStyles, style, isWide && styles.gap5, styles.br3, styles.pv5, styles.pl5]}>
<View style={[isWide ? styles.flexRow : styles.flexColumn, styles.flex1, isWide && styles.gap5]}>
<View style={[styles.flexRow, isWide && styles.flex1, styles.gap3, isNarrow && styles.mb3, styles.alignItemsCenter]}>
<Avatar
imageStyles={[styles.alignSelfCenter]}
size={CONST.AVATAR_SIZE.DEFAULT}
source={workspaceIcon}
fallbackIcon={fallbackWorkspaceIcon}
name={title}
type={CONST.ICON_TYPE_WORKSPACE}
/>
<Text
numberOfLines={1}
style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
>
{title}
</Text>
</View>
<View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
{!!ownerDetails && (
<>
<BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
<ThreeDotsMenu
menuItems={menuItems}
anchorPosition={{horizontal: 0, vertical: 0}}
disabled={shouldDisableThreeDotsMenu}
<Avatar
source={ownerDetails.avatar}
size={CONST.AVATAR_SIZE.SMALL}
containerStyles={styles.workspaceOwnerAvatarWrapper}
/>
<View style={styles.flex1}>
<Text
numberOfLines={1}
style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
>
{PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails)}
</Text>
<Text
numberOfLines={1}
style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedback.deleted : {}]}
>
{ownerDetails.login}
</Text>
</View>
</>
) : (
)}
</View>
<View style={[styles.flexRow, isWide && !isJoinRequestPending && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
<Icon
src={workspaceTypeIcon(workspaceType)}
width={variables.workspaceTypeIconWidth}
height={variables.workspaceTypeIconWidth}
additionalStyles={styles.workspaceTypeWrapper}
/>
<View>
<Text
numberOfLines={1}
style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
>
{userFriendlyWorkspaceType}
</Text>
<Text
numberOfLines={1}
style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedback.deleted : {}]}
>
{translate('workspace.common.plan')}
</Text>
</View>
</View>
</View>
<View style={[isNarrow && styles.mr5]}>
{isJoinRequestPending && (
<View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.flex1, styles.justifyContentEnd, styles.mln6, styles.pr4]}>
<Badge
text={translate('workspace.common.requested')}
textStyles={styles.textStrong}
badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
icon={Expensicons.Hourglass}
/>
))}
</View>
<View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
{!!ownerDetails && (
</View>
)}
{!isJoinRequestPending && (
<>
<Avatar
source={ownerDetails.avatar}
size={CONST.AVATAR_SIZE.SMALL}
containerStyles={styles.workspaceOwnerAvatarWrapper}
/>
<View style={styles.flex1}>
<Text
numberOfLines={1}
style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
>
{PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails)}
</Text>
<Text
numberOfLines={1}
style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedback.deleted : {}]}
>
{ownerDetails.login}
</Text>
<View style={[styles.flexRow, styles.flex0, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
<BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
</View>
<View ref={threeDotsMenuContainerRef}>
<ThreeDotsMenu
onIconPress={() => {
if (isSmallScreenWidth) {
return;
}
threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
setThreeDotsMenuPosition({
horizontal: x + width,
vertical: y + height,
});
});
}}
menuItems={menuItems}
anchorPosition={threeDotsMenuPosition}
anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
shouldOverlay
disabled={shouldDisableThreeDotsMenu}
/>
</View>
</>
)}
</View>
<View style={[styles.flexRow, isWide && !isJoinRequestPending && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
<Icon
src={workspaceTypeIcon(workspaceType)}
width={variables.workspaceTypeIconWidth}
height={variables.workspaceTypeIconWidth}
additionalStyles={styles.workspaceTypeWrapper}
/>
<View>
<Text
numberOfLines={1}
style={[styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
>
{userFriendlyWorkspaceType}
</Text>
<Text
numberOfLines={1}
style={[styles.textMicro, styles.textSupporting, isDeleted ? styles.offlineFeedback.deleted : {}]}
>
{translate('workspace.common.plan')}
</Text>
</View>
</View>
{isJoinRequestPending && !isNarrow && (
<View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.flex1, styles.justifyContentEnd, styles.mln6, styles.pr4]}>
<Badge
text={translate('workspace.common.requested')}
textStyles={styles.textStrong}
badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
icon={Expensicons.Hourglass}
/>
</View>
)}

{isWide && !isJoinRequestPending && (
<>
<View style={[styles.flexRow, styles.flex0, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
<BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
</View>
<View ref={threeDotsMenuContainerRef}>
<ThreeDotsMenu
onIconPress={() => {
threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
setThreeDotsMenuPosition({
horizontal: x + width,
vertical: y + height,
});
});
}}
menuItems={menuItems}
anchorPosition={threeDotsMenuPosition}
anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
iconStyles={[styles.mr2]}
shouldOverlay
disabled={shouldDisableThreeDotsMenu}
/>
</View>
</>
)}
</View>
);
}
Expand Down

0 comments on commit e59be19

Please sign in to comment.