-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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
#45951 & #45958: Implement <ApprovalWorkflowSection /> component and Enhance toLocaleOrdinal to support string ordinals #46562
Changes from 17 commits
517bf4d
650eda9
9e72afd
c91b34a
dd28d1b
581997b
27cebe1
822b5c5
c83040a
ab4c82f
3df09af
7d6b856
42c370f
d8291fd
9659c61
741cd37
ca527d1
f4ea901
acf2425
aa3d60c
6564afe
22df581
a639123
fc835a1
27e14eb
04f7776
88d6894
5478c6e
6fb0b6e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
import React, {useCallback} from 'react'; | ||
import {View} from 'react-native'; | ||
import useLocalize from '@hooks/useLocalize'; | ||
import useTheme from '@hooks/useTheme'; | ||
import useThemeStyles from '@hooks/useThemeStyles'; | ||
import Navigation from '@libs/Navigation/Navigation'; | ||
import ROUTES from '@src/ROUTES'; | ||
import type ApprovalWorkflow from '@src/types/onyx/ApprovalWorkflow'; | ||
import Icon from './Icon'; | ||
import * as Expensicons from './Icon/Expensicons'; | ||
import MenuItem from './MenuItem'; | ||
import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; | ||
import Text from './Text'; | ||
|
||
type ApprovalWorkflowSectionProps = { | ||
approvalWorkflow: ApprovalWorkflow; | ||
policyId?: string; | ||
}; | ||
|
||
function ApprovalWorkflowSection({approvalWorkflow, policyId}: ApprovalWorkflowSectionProps) { | ||
const styles = useThemeStyles(); | ||
const theme = useTheme(); | ||
const {translate, toLocaleOrdinal} = useLocalize(); | ||
const openApprovalsEdit = useCallback( | ||
() => Navigation.navigate(ROUTES.WORKSPACE_WORKFLOWS_APPROVALS_EDIT.getRoute(policyId ?? '', approvalWorkflow.approvers[0].email)), | ||
[approvalWorkflow.approvers, policyId], | ||
); | ||
const approverTitle = useCallback( | ||
(index: number) => | ||
approvalWorkflow.approvers.length > 1 ? `${toLocaleOrdinal(index + 1, true)} ${translate('workflowsPage.approver').toLowerCase()}` : `${translate('workflowsPage.approver')}`, | ||
[approvalWorkflow.approvers.length, toLocaleOrdinal, translate], | ||
); | ||
|
||
return ( | ||
<PressableWithoutFeedback | ||
accessibilityRole="button" | ||
style={[styles.border, styles.p4, styles.flexRow, styles.justifyContentBetween, styles.mt6, styles.mbn3]} | ||
onPress={openApprovalsEdit} | ||
accessibilityLabel={translate('workflowsPage.addApprovalsTitle')} | ||
> | ||
<View style={[styles.flex1]}> | ||
{approvalWorkflow.isDefault && ( | ||
<View style={[styles.flexRow, styles.mb4, styles.alignItemsCenter, styles.pb1, styles.pt1]}> | ||
<Icon | ||
src={Expensicons.Lightbulb} | ||
fill={theme.icon} | ||
additionalStyles={styles.mr2} | ||
small | ||
/> | ||
<Text | ||
style={[styles.textLabelSupportingNormal]} | ||
suppressHighlighting | ||
> | ||
{translate('workflowsPage.addApprovalTip')} | ||
</Text> | ||
</View> | ||
)} | ||
<MenuItem | ||
title={translate('workflowsExpensesFromPage.title')} | ||
style={styles.p0} | ||
titleStyle={styles.textLabelSupportingNormal} | ||
descriptionTextStyle={styles.textNormalThemeText} | ||
description={approvalWorkflow.isDefault ? translate('workspace.common.everyone') : approvalWorkflow.members.map((m) => m.displayName).join(', ')} | ||
icon={Expensicons.Users} | ||
iconHeight={20} | ||
iconWidth={20} | ||
iconFill={theme.icon} | ||
onPress={openApprovalsEdit} | ||
shouldRemoveBackground | ||
/> | ||
|
||
{approvalWorkflow.approvers.map((approver, index) => ( | ||
<View key={approver.email}> | ||
<View style={{height: 16, width: 1, backgroundColor: theme.border, marginLeft: 19}} /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @blazejkustra Can you please explain me the choice of style here (especially There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
<MenuItem | ||
title={approverTitle(index)} | ||
style={styles.p0} | ||
titleStyle={styles.textLabelSupportingNormal} | ||
descriptionTextStyle={styles.textNormalThemeText} | ||
description={approver.displayName} | ||
icon={Expensicons.UserCheck} | ||
iconHeight={20} | ||
iconWidth={20} | ||
iconFill={theme.icon} | ||
onPress={openApprovalsEdit} | ||
shouldRemoveBackground | ||
/> | ||
</View> | ||
))} | ||
</View> | ||
<Icon | ||
src={Expensicons.ArrowRight} | ||
fill={theme.icon} | ||
additionalStyles={[styles.alignSelfCenter]} | ||
/> | ||
</PressableWithoutFeedback> | ||
); | ||
} | ||
|
||
export default ApprovalWorkflowSection; |
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.
Please add
/** */
style comments to each propThere 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 added, please take a quick look if they're okay :)