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

Jump to bottom

[No QA] Convert ReportActionItemFragment into function component #7072

Merged
merged 1 commit into from
Jan 12, 2022
Merged

[No QA] Convert ReportActionItemFragment into function component #7072

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
139 changes: 69 additions & 70 deletions src/pages/home/report/ReportActionItemFragment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, {memo} from 'react';
import {ActivityIndicator, View} from 'react-native';
import PropTypes from 'prop-types';
import Str from 'expensify-common/lib/str';
Expand Down Expand Up @@ -44,83 +44,82 @@ const defaultProps = {
tooltipText: '',
};

class ReportActionItemFragment extends React.PureComponent {
render() {
switch (this.props.fragment.type) {
case 'COMMENT':
// If this is an attachment placeholder, return the placeholder component
if (this.props.isAttachment && this.props.loading) {
return (
<View style={[styles.chatItemAttachmentPlaceholder]}>
<ActivityIndicator
size="large"
color={themeColors.textSupporting}
style={[styles.flex1]}
/>
</View>
);
}

// Only render HTML if we have html in the fragment
return this.props.fragment.html !== this.props.fragment.text
? (
<RenderHTML
html={`<comment>${this.props.fragment.html + (this.props.fragment.isEdited ? '<edited></edited>' : '')}</comment>`}
/>
) : (
<Text
selectable={!canUseTouchScreen() || !this.props.isSmallScreenWidth}
style={EmojiUtils.isSingleEmoji(this.props.fragment.text) ? styles.singleEmojiText : undefined}
>
{Str.htmlDecode(this.props.fragment.text)}
{this.props.fragment.isEdited && (
<Text
fontSize={variables.fontSizeSmall}
color={themeColors.textSupporting}
>
{/* Native devices do not support margin between nested Text */}
<Text style={styles.w1}>{' '}</Text>
{this.props.translate('reportActionCompose.edited')}
</Text>
)}
</Text>
);
case 'TEXT':
const ReportActionItemFragment = (props) => {
switch (props.fragment.type) {
case 'COMMENT':
// If this is an attachment placeholder, return the placeholder component
if (props.isAttachment && props.loading) {
return (
<Tooltip text={this.props.tooltipText}>
<Text
selectable
numberOfLines={this.props.isSingleLine ? 1 : undefined}
style={[styles.chatItemMessageHeaderSender]}
>
{Str.htmlDecode(this.props.fragment.text)}
</Text>
</Tooltip>
<View style={[styles.chatItemAttachmentPlaceholder]}>
<ActivityIndicator
size="large"
color={themeColors.textSupporting}
style={[styles.flex1]}
/>
</View>
);
case 'LINK':
return <Text>LINK</Text>;
case 'INTEGRATION_COMMENT':
return <Text>REPORT_LINK</Text>;
case 'REPORT_LINK':
return <Text>REPORT_LINK</Text>;
case 'POLICY_LINK':
return <Text>POLICY_LINK</Text>;
}

// If we have a message fragment type of OLD_MESSAGE this means we have not yet converted this over to the
// new data structure. So we simply set this message as inner html and render it like we did before.
// This wil allow us to convert messages over to the new structure without needing to do it all at once.
case 'OLD_MESSAGE':
return <Text>OLD_MESSAGE</Text>;
default:
return <Text>fragment.text</Text>;
}
// Only render HTML if we have html in the fragment
return props.fragment.html !== props.fragment.text
? (
<RenderHTML
html={`<comment>${props.fragment.html + (props.fragment.isEdited ? '<edited></edited>' : '')}</comment>`}
/>
) : (
<Text
selectable={!canUseTouchScreen() || !props.isSmallScreenWidth}
style={EmojiUtils.isSingleEmoji(props.fragment.text) ? styles.singleEmojiText : undefined}
>
{Str.htmlDecode(props.fragment.text)}
{props.fragment.isEdited && (
<Text
fontSize={variables.fontSizeSmall}
color={themeColors.textSupporting}
>
{/* Native devices do not support margin between nested Text */}
<Text style={styles.w1}>{' '}</Text>
{props.translate('reportActionCompose.edited')}
</Text>
)}
</Text>
);
case 'TEXT':
return (
<Tooltip text={props.tooltipText}>
<Text
selectable
numberOfLines={props.isSingleLine ? 1 : undefined}
style={[styles.chatItemMessageHeaderSender]}
>
{Str.htmlDecode(props.fragment.text)}
</Text>
</Tooltip>
);
case 'LINK':
return <Text>LINK</Text>;
case 'INTEGRATION_COMMENT':
return <Text>REPORT_LINK</Text>;
case 'REPORT_LINK':
return <Text>REPORT_LINK</Text>;
case 'POLICY_LINK':
return <Text>POLICY_LINK</Text>;

// If we have a message fragment type of OLD_MESSAGE this means we have not yet converted this over to the
// new data structure. So we simply set this message as inner html and render it like we did before.
// This wil allow us to convert messages over to the new structure without needing to do it all at once.
case 'OLD_MESSAGE':
return <Text>OLD_MESSAGE</Text>;
default:
return <Text>fragment.text</Text>;
}
}
};

ReportActionItemFragment.propTypes = propTypes;
ReportActionItemFragment.defaultProps = defaultProps;
ReportActionItemFragment.displayName = 'ReportActionItemFragment';

export default compose(
withWindowDimensions,
withLocalize,
)(ReportActionItemFragment);
)(memo(ReportActionItemFragment));