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

Fix for: Mweb - Workspace - the "Next" button overlaps the input field for specific phone modal (Huawei P10 lite) #20345

Merged
merged 13 commits into from
Jun 12, 2023
Merged

Fix for: Mweb - Workspace - the "Next" button overlaps the input field for specific phone modal (Huawei P10 lite) #20345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5da5f3d
Added contentContainerStyles prop
Ollyws Jun 7, 2023
6dca051
Changed styles and passed contentContainerStyles
Ollyws Jun 7, 2023
0792272
Added flexBasis0 style
Ollyws Jun 7, 2023
91ffd6d
Use ternary for safeAreaPaddingBottom
Ollyws Jun 7, 2023
6d5430a
Change flex styles for parent view
Ollyws Jun 9, 2023
842ee17
Pass listContainerStyles prop to OptionsList
Ollyws Jun 9, 2023
4f2d56b
Add listContainerStyles to OptionsSelector
Ollyws Jun 9, 2023
3175905
Change contentContainerStyles
Ollyws Jun 9, 2023
5a97b66
Rename safeAreaPaddingBottom to safeAreaPaddingBottomStyle
Ollyws Jun 9, 2023
b415896
Rename safeAreaPaddingBottomStyle usage
Ollyws Jun 9, 2023
5ae1cf2
Add listContainerStyles propTypes and defaultProps
Ollyws Jun 9, 2023
7975a86
Fix error
Ollyws Jun 9, 2023
7cc5d93
Add flex1 to listContentContainer defaultProps
Ollyws Jun 10, 2023
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
14 changes: 12 additions & 2 deletions src/components/OptionsSelector/BaseOptionsSelector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ const propTypes = {
/** padding bottom style of safe area */
safeAreaPaddingBottomStyle: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),

/** Content container styles for OptionsList */
contentContainerStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),

/** List container styles for OptionsList */
listContainerStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),

...optionsSelectorPropTypes,
...withLocalizePropTypes,
...withNavigationFocusPropTypes,
Expand All @@ -32,6 +38,8 @@ const propTypes = {
const defaultProps = {
shouldDelayFocus: false,
safeAreaPaddingBottomStyle: {},
contentContainerStyles: [],
listContainerStyles: [styles.flex1],
...optionsSelectorDefaultProps,
};

Expand Down Expand Up @@ -282,6 +290,7 @@ class BaseOptionsSelector extends Component {
!this.props.isReadOnly && (this.props.shouldShowConfirmButton || this.props.footerContent) && !(this.props.canSelectMultipleOptions && _.isEmpty(this.props.selectedOptions));
const defaultConfirmButtonText = _.isUndefined(this.props.confirmButtonText) ? this.props.translate('common.confirm') : this.props.confirmButtonText;
const shouldShowDefaultConfirmButton = !this.props.footerContent && defaultConfirmButtonText;
const safeAreaPaddingBottomStyle = shouldShowFooter ? undefined : this.props.safeAreaPaddingBottomStyle;
const textInput = (
<TextInput
ref={(el) => (this.textInput = el)}
Expand Down Expand Up @@ -325,7 +334,8 @@ class BaseOptionsSelector extends Component {
this.props.onLayout();
}
}}
contentContainerStyles={shouldShowFooter ? undefined : [this.props.safeAreaPaddingBottomStyle]}
contentContainerStyles={[safeAreaPaddingBottomStyle, ...this.props.contentContainerStyles]}
listContainerStyles={this.props.listContainerStyles}
Ollyws marked this conversation as resolved.
Show resolved Hide resolved
isLoading={!this.props.shouldShowOptions}
/>
);
Expand All @@ -336,7 +346,7 @@ class BaseOptionsSelector extends Component {
maxIndex={this.state.allOptions.length - 1}
onFocusedIndexChanged={this.props.disableArrowKeysActions ? () => {} : this.updateFocusedIndex}
>
<View style={[styles.flex1]}>
<View style={[styles.flexGrow1, styles.flexShrink1, styles.flexBasisAuto]}>
{this.props.shouldTextInputAppearBelowOptions ? (
<>
<View style={[styles.flexGrow0, styles.flexShrink1, styles.flexBasisAuto, styles.w100, styles.flexRow]}>{optionsList}</View>
Expand Down
4 changes: 3 additions & 1 deletion src/pages/workspace/WorkspaceInvitePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,8 +272,10 @@ class WorkspaceInvitePage extends React.Component {
Navigation.goBack(ROUTES.getWorkspaceMembersRoute(this.props.route.params.policyID));
}}
/>
<View style={[styles.flex1]}>
<View style={[styles.flexGrow1, styles.flexShrink0, styles.flexBasisAuto]}>
<OptionsSelector
contentContainerStyles={[styles.flexGrow1, styles.flexShrink0, styles.flexBasisAuto]}
listContainerStyles={[styles.flexGrow1, styles.flexShrink1, styles.flexBasis0]}
autoFocus={false}
canSelectMultipleOptions
sections={sections}
Expand Down
4 changes: 4 additions & 0 deletions src/styles/utilities/flex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,4 +126,8 @@ export default {
flexBasisAuto: {
flexBasis: 'auto',
},

flexBasis0: {
flexBasis: 0,
},
};