Skip to content

Commit

Permalink
Merge pull request #20202 from robertKozik/17046-migrate-PressableWit…
Browse files Browse the repository at this point in the history
…houtFocus

17046 — migrate PressableWithotFocus to GenericPressable
  • Loading branch information
cristipaval authored Jun 16, 2023
2 parents ec3c9a2 + 30e0a94 commit 818ca92
Show file tree
Hide file tree
Showing 7 changed files with 32 additions and 15 deletions.
13 changes: 9 additions & 4 deletions src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@ import htmlRendererPropTypes from './htmlRendererPropTypes';
import AttachmentModal from '../../AttachmentModal';
import styles from '../../../styles/styles';
import ThumbnailImage from '../../ThumbnailImage';
import PressableWithoutFocus from '../../PressableWithoutFocus';
import PressableWithoutFocus from '../../Pressable/PressableWithoutFocus';
import CONST from '../../../CONST';
import {ShowContextMenuContext, showContextMenuForReport} from '../../ShowContextMenuContext';
import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot';
import * as ReportUtils from '../../../libs/ReportUtils';
import withLocalize, {withLocalizePropTypes} from '../../withLocalize';

const propTypes = {...htmlRendererPropTypes, ...withLocalizePropTypes};

function ImageRenderer(props) {
const htmlAttribs = props.tnode.attributes;
Expand Down Expand Up @@ -60,9 +63,11 @@ function ImageRenderer(props) {
>
{({show}) => (
<PressableWithoutFocus
style={styles.noOutline}
style={[styles.noOutline]}
onPress={show}
onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
accessibilityRole="imagebutton"
accessibilityLabel={props.translate('accessibilityHints.viewAttachment')}
>
<ThumbnailImage
previewSourceURL={previewSource}
Expand All @@ -79,7 +84,7 @@ function ImageRenderer(props) {
);
}

ImageRenderer.propTypes = htmlRendererPropTypes;
ImageRenderer.propTypes = propTypes;
ImageRenderer.displayName = 'ImageRenderer';

export default ImageRenderer;
export default withLocalize(ImageRenderer);
4 changes: 2 additions & 2 deletions src/components/Pressable/PressableWithFeedback.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import * as StyleUtils from '../../styles/StyleUtils';
const omittedProps = ['style', 'pressStyle', 'hoverStyle', 'focusStyle', 'wrapperStyle'];

const PressableWithFeedbackPropTypes = {
..._.omit(GenericPressablePropTypes.pressablePropTypes, omittedProps),
...GenericPressablePropTypes.pressablePropTypes,
/**
* Determines what opacity value should be applied to the underlaying view when Pressable is pressed.
* To disable dimming, pass 1 as pressDimmingValue
Expand All @@ -31,7 +31,7 @@ const PressableWithFeedbackPropTypes = {
};

const PressableWithFeedbackDefaultProps = {
..._.omit(GenericPressablePropTypes.defaultProps, omittedProps),
...GenericPressablePropTypes.defaultProps,
pressDimmingValue: variables.pressDimValue,
hoverDimmingValue: variables.hoverDimValue,
nativeID: '',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react';
import {Pressable} from 'react-native';
import _ from 'underscore';
import PropTypes from 'prop-types';
import GenericPressable from './GenericPressable';
import genericPressablePropTypes from './GenericPressable/PropTypes';

const propTypes = {
/** Element that should be clickable */
Expand All @@ -14,11 +16,14 @@ const propTypes = {

/** Styles that should be passed to touchable container */
// eslint-disable-next-line react/forbid-prop-types
styles: PropTypes.arrayOf(PropTypes.object),
style: PropTypes.arrayOf(PropTypes.object),

/** Proptypes of pressable component used for implementation */
...genericPressablePropTypes.pressablePropTypes,
};

const defaultProps = {
styles: [],
style: [],
onLongPress: undefined,
};

Expand All @@ -41,15 +46,18 @@ class PressableWithoutFocus extends React.Component {
}

render() {
const restProps = _.omit(this.props, ['children', 'onPress', 'onLongPress', 'style']);
return (
<Pressable
<GenericPressable
onPress={this.pressAndBlur}
onLongPress={this.props.onLongPress}
ref={(el) => (this.pressableRef = el)}
style={this.props.styles}
style={this.props.style}
// eslint-disable-next-line react/jsx-props-no-spreading
{...restProps}
>
{this.props.children}
</Pressable>
</GenericPressable>
);
}
}
Expand Down
1 change: 1 addition & 0 deletions src/languages/en.js
Original file line number Diff line number Diff line change
Expand Up @@ -1399,6 +1399,7 @@ export default {
chatUserDisplayNames: 'Chat user display names',
scrollToNewestMessages: 'Scroll to newest messages',
prestyledText: 'Prestyled text',
viewAttachment: 'View attachment',
},
parentReportAction: {
deletedMessage: '[Deleted message]',
Expand Down
1 change: 1 addition & 0 deletions src/languages/es.js
Original file line number Diff line number Diff line change
Expand Up @@ -1865,6 +1865,7 @@ export default {
chatUserDisplayNames: 'Nombres de los usuarios del chat',
scrollToNewestMessages: 'Desplázate a los mensajes más recientes',
prestyledText: 'texto preestilizado',
viewAttachment: 'Ver archivo adjunto',
},
parentReportAction: {
deletedMessage: '[Mensaje eliminado]',
Expand Down
2 changes: 1 addition & 1 deletion src/pages/DetailsPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import * as ReportUtils from '../libs/ReportUtils';
import * as Expensicons from '../components/Icon/Expensicons';
import MenuItem from '../components/MenuItem';
import AttachmentModal from '../components/AttachmentModal';
import PressableWithoutFocus from '../components/PressableWithoutFocus';
import PressableWithoutFocus from '../components/Pressable/PressableWithoutFocus';
import * as Report from '../libs/actions/Report';
import OfflineWithFeedback from '../components/OfflineWithFeedback';
import AutoUpdateTime from '../components/AutoUpdateTime';
Expand Down
6 changes: 4 additions & 2 deletions src/pages/ProfilePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import * as ReportUtils from '../libs/ReportUtils';
import * as Expensicons from '../components/Icon/Expensicons';
import MenuItem from '../components/MenuItem';
import AttachmentModal from '../components/AttachmentModal';
import PressableWithoutFocus from '../components/PressableWithoutFocus';
import PressableWithoutFocus from '../components/Pressable/PressableWithoutFocus';
import * as Report from '../libs/actions/Report';
import OfflineWithFeedback from '../components/OfflineWithFeedback';
import AutoUpdateTime from '../components/AutoUpdateTime';
Expand Down Expand Up @@ -148,8 +148,10 @@ function ProfilePage(props) {
>
{({show}) => (
<PressableWithoutFocus
style={styles.noOutline}
style={[styles.noOutline]}
onPress={show}
accessibilityLabel={props.translate('common.profile')}
accessibilityRole="imagebutton"
>
<OfflineWithFeedback pendingAction={lodashGet(details, 'pendingFields.avatar', null)}>
<Avatar
Expand Down

0 comments on commit 818ca92

Please sign in to comment.