mattermost-mobile/app/components/post_draft/draft_input/header.tsx
Kyriakos Z ab4f65020a
[MM-49540] Message Priority Phase 3 (#7142)
* Init

* i18 and types

* Acknowledge button, api

* Ack button + display ackd users

* Saves priority on draft and addresses some comments

* Addresses review comments round 2

* Moves fetching userprofiles upon opening ACKs

* Adds metadata column in drafts table

+ Addresses some more review comments.

* Small refactor according to review comments

* Addresses some review comments

* Addresses some review comments

* Uses local action when ACKing

* Fixes first time selecting priority and other

* Updates snapshots

* Fixes i18n

* Fixes ts errors

---------

Co-authored-by: Anurag Shivarathri <anurag6713@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
2023-04-27 11:22:03 +00:00

84 lines
2.7 KiB
TypeScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {Platform, View} from 'react-native';
import CompassIcon from '@components/compass_icon';
import FormattedText from '@components/formatted_text';
import PostPriorityLabel from '@components/post_priority/post_priority_label';
import {PostPriorityColors} from '@constants/post';
import {useTheme} from '@context/theme';
import {makeStyleSheetFromTheme} from '@utils/theme';
type Props = {
postPriority: PostPriority;
noMentionsError: boolean;
}
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
container: {
flexDirection: 'row',
alignItems: 'center',
marginLeft: 12,
gap: 7,
},
error: {
color: PostPriorityColors.URGENT,
},
acknowledgements: {
color: theme.onlineIndicator,
},
paddingTopStyle: {
paddingTop: Platform.select({ios: 6, android: 8}),
},
}));
export default function DraftInputHeader({
postPriority,
noMentionsError,
}: Props) {
const theme = useTheme();
const hasLabels = postPriority.priority !== '' || postPriority.requested_ack;
const style = getStyleSheet(theme);
return (
<View style={[style.container, hasLabels ? style.paddingTopStyle : undefined]}>
{postPriority.priority && (
<PostPriorityLabel label={postPriority.priority}/>
)}
{postPriority.requested_ack && (
<>
<CompassIcon
color={theme.onlineIndicator}
name='check-circle-outline'
size={14}
/>
{!postPriority.priority && (
<FormattedText
id='requested_ack.title'
defaultMessage='Request Acknowledgements'
style={{color: theme.onlineIndicator}}
/>
)}
</>
)}
{postPriority.persistent_notifications && (
<>
<CompassIcon
color={PostPriorityColors.URGENT}
name='bell-ring-outline'
size={14}
/>
{noMentionsError && (
<FormattedText
id='persistent_notifications.error.no_mentions.title'
defaultMessage='Recipients must be @mentioned'
style={style.error}
/>
)}
</>
)}
</View>
);
}