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

button styling fixed #3193

Merged
merged 10 commits into from
Jun 11, 2021
Merged

button styling fixed #3193

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
58901ec
button styling fixed
parasharrajat May 27, 2021
291cce0
fixed styling for many pages
parasharrajat May 27, 2021
b767480
Pull latest changes
parasharrajat Jun 2, 2021
a8927aa
fix: overlapping keyboard spacer on group page
parasharrajat Jun 2, 2021
1f1da23
Merge branch 'main' of github.com:Expensify/Expensify.cash into fixed…
parasharrajat Jun 4, 2021
cf63e81
localized text
parasharrajat Jun 4, 2021
778f974
tweaks
parasharrajat Jun 5, 2021
ad3fcd0
fix indentation
parasharrajat Jun 8, 2021
1f13dd8
pull latest changes
parasharrajat Jun 8, 2021
d0c316f
Pulled latest changes
parasharrajat Jun 11, 2021
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
28 changes: 28 additions & 0 deletions src/components/FixedFooter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
import styles from '../styles/styles';

const propTypes = {
/** Children to wrap in FixedFooter. */
children: PropTypes.node.isRequired,

/** Styles to be assigned to Container */
style: PropTypes.arrayOf(PropTypes.object),

parasharrajat marked this conversation as resolved.
Show resolved Hide resolved
};

const defaultProps = {
style: [],
};

const FixedFooter = props => (
<View style={[styles.ph5, styles.pb5, ...props.style]}>
{props.children}
</View>
);

FixedFooter.propTypes = propTypes;
FixedFooter.defaultProps = defaultProps;
FixedFooter.displayName = 'FixedFooter';
export default FixedFooter;
27 changes: 13 additions & 14 deletions src/components/IOUConfirmationList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, {Component} from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
import {TextInput} from 'react-native-gesture-handler';
import {ScrollView, TextInput} from 'react-native-gesture-handler';
import {withOnyx} from 'react-native-onyx';
import {withSafeAreaInsets} from 'react-native-safe-area-context';
import styles from '../styles/styles';
Expand All @@ -18,6 +18,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
import SafeAreaInsetPropTypes from '../pages/SafeAreaInsetPropTypes';
import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
import compose from '../libs/compose';
import FixedFooter from './FixedFooter';

const propTypes = {
/** Callback to inform parent modal of success */
Expand Down Expand Up @@ -241,8 +242,8 @@ class IOUConfirmationList extends Component {
},
);
return (
<View style={[styles.flex1, styles.w100, styles.justifyContentBetween]}>
<View style={[styles.flex1]}>
<>
<ScrollView style={[styles.flex1, styles.w100]}>
<OptionsList
listContainerStyles={[{
// Give max height to the list container so that it does not extend
Expand All @@ -259,12 +260,10 @@ class IOUConfirmationList extends Component {
disableFocusOptions
selectedOptions={this.getAllOptionsAsSelected()}
/>
<View>
<Text style={[styles.p5, styles.textMicroBold, styles.colorHeading]}>
{this.props.translate('iOUConfirmationList.whatsItFor')}
</Text>
</View>
<View style={[styles.ph5]}>
<Text style={[styles.p5, styles.textMicroBold, styles.colorHeading]}>
{this.props.translate('iOUConfirmationList.whatsItFor')}
</Text>
<View style={[styles.ph5, styles.pb5]}>
<TextInput
style={[styles.textInput]}
value={this.props.comment}
Expand All @@ -273,17 +272,17 @@ class IOUConfirmationList extends Component {
placeholderTextColor={themeColors.placeholderText}
/>
</View>
</View>
<View style={[styles.ph5, styles.pb3]}>
</ScrollView>
<FixedFooter>
<Button
success
style={[styles.mb2]}
style={[styles.w100]}
isLoading={this.props.iou.loading}
text={buttonText}
onPress={() => this.props.onConfirm(this.getSplits())}
/>
</View>
</View>
</FixedFooter>
</>
);
}
}
Expand Down
16 changes: 2 additions & 14 deletions src/libs/KeyboardAvoidingView/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@
* This is a KeyboardAvoidingView only enabled for ios && disabled for all other platforms
* @param {Node}
*/
import React from 'react';
import {KeyboardAvoidingView as KeyboardAvoidingViewComponent} from 'react-native';
import PropTypes from 'prop-types';
import styles from '../../styles/styles';

const propTypes = {
children: PropTypes.node,
Expand All @@ -14,18 +11,9 @@ const defaultProps = {
children: null,
};

function KeyboardAvoidingView({children}) {
return (
<KeyboardAvoidingViewComponent
enabled={false}
behavior="height"
style={[styles.w100, styles.h100]}
>
{children}
</KeyboardAvoidingViewComponent>
);
}
const KeyboardAvoidingView = props => props.children;

KeyboardAvoidingView.propTypes = propTypes;
KeyboardAvoidingView.defaultProps = defaultProps;
KeyboardAvoidingView.displayName = 'KeyboardAvoidingView';
parasharrajat marked this conversation as resolved.
Show resolved Hide resolved
export default KeyboardAvoidingView;
84 changes: 43 additions & 41 deletions src/pages/NewGroupPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import ONYXKEYS from '../ONYXKEYS';
import styles from '../styles/styles';
import {fetchOrCreateChatReport} from '../libs/actions/Report';
import CONST from '../CONST';
import KeyboardSpacer from '../components/KeyboardSpacer';
import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions';
import HeaderWithCloseButton from '../components/HeaderWithCloseButton';
import ScreenWrapper from '../components/ScreenWrapper';
Expand All @@ -18,6 +17,8 @@ import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator
import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
import compose from '../libs/compose';
import Button from '../components/Button';
import KeyboardAvoidingView from '../libs/KeyboardAvoidingView';
import FixedFooter from '../components/FixedFooter';

const personalDetailsPropTypes = PropTypes.shape({
/** The login of the person (either email or phone number) */
Expand Down Expand Up @@ -187,7 +188,7 @@ class NewGroupPage extends Component {
return (
<ScreenWrapper>
{({didScreenTransitionEnd}) => (
<>
<KeyboardAvoidingView>
<HeaderWithCloseButton
title={this.props.translate('sidebarScreen.newGroup')}
onCloseButtonPress={() => Navigation.dismissModal(true)}
Expand All @@ -196,51 +197,52 @@ class NewGroupPage extends Component {
<FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
{didScreenTransitionEnd && (
<>
<OptionsSelector
canSelectMultipleOptions
sections={sections}
selectedOptions={this.state.selectedOptions}
value={this.state.searchValue}
onSelectRow={this.toggleOption}
onChangeText={(searchValue = '') => {
const {
recentReports,
personalDetails,
userToInvite,
} = getNewGroupOptions(
this.props.reports,
this.props.personalDetails,
searchValue,
[],
);
this.setState({
searchValue,
userToInvite,
recentReports,
personalDetails,
});
}}
headerMessage={headerMessage}
disableArrowKeysActions
hideAdditionalOptionStates
forceTextUnreadStyle
shouldFocusOnSelectRow
/>
{this.state.selectedOptions?.length > 0 && (
<View style={[styles.ph5, styles.pb5]}>
<Button
success
onPress={this.createGroup}
style={[styles.w100]}
text={this.props.translate('newGroupPage.createGroup')}
<View style={[styles.flex1, styles.w100]}>
<OptionsSelector
canSelectMultipleOptions
sections={sections}
selectedOptions={this.state.selectedOptions}
value={this.state.searchValue}
onSelectRow={this.toggleOption}
onChangeText={(searchValue = '') => {
const {
recentReports,
personalDetails,
userToInvite,
} = getNewGroupOptions(
this.props.reports,
this.props.personalDetails,
searchValue,
[],
);
this.setState({
searchValue,
userToInvite,
recentReports,
personalDetails,
});
}}
headerMessage={headerMessage}
disableArrowKeysActions
hideAdditionalOptionStates
forceTextUnreadStyle
shouldFocusOnSelectRow
/>
</View>
{this.state.selectedOptions?.length > 0 && (
<FixedFooter>
<Button
success
onPress={this.createGroup}
style={[styles.w100]}
text={this.props.translate('newGroupPage.createGroup')}
/>
</FixedFooter>
)}
</>
)}
</View>
<KeyboardSpacer />
</>
</KeyboardAvoidingView>
)}
</ScreenWrapper>
);
Expand Down
119 changes: 59 additions & 60 deletions src/pages/iou/IOUCurrencySelection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Pressable, SectionList, View} from 'react-native';
import {SectionList, View} from 'react-native';
import PropTypes from 'prop-types';
import Onyx, {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
Expand All @@ -17,6 +17,9 @@ import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
import compose from '../../libs/compose';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
import CONST from '../../CONST';
import KeyboardAvoidingView from '../../libs/KeyboardAvoidingView';
import Button from '../../components/Button';
import FixedFooter from '../../components/FixedFooter';

/**
* IOU Currency selection for selecting currency
Expand Down Expand Up @@ -163,69 +166,65 @@ class IOUCurrencySelection extends Component {
render() {
return (
<ScreenWrapper>
<HeaderWithCloseButton
title={this.props.translate('iOUCurrencySelection.selectCurrency')}
onCloseButtonPress={() => Navigation.goBack()}
/>
<View style={[styles.flex1, styles.w100]}>
<View style={[styles.flex1]}>
<View style={[styles.ph5, styles.pv3]}>
<TextInputWithFocusStyles
styleFocusIn={[styles.textInputReversedFocus]}
ref={el => this.textInput = el}
style={[styles.textInput]}
value={this.state.searchValue}
onChangeText={this.changeSearchValue}
placeholder="Search"
placeholderTextColor={themeColors.placeholderText}
/>
</View>
<KeyboardAvoidingView>
<HeaderWithCloseButton
title={this.props.translate('iOUCurrencySelection.selectCurrency')}
onCloseButtonPress={() => Navigation.goBack()}
/>
<View style={[styles.flex1, styles.w100]}>
<View style={[styles.flex1]}>
<SectionList
bounces={false}
indicatorStyle="white"
keyboardShouldPersistTaps="always"
showsVerticalScrollIndicator={false}
sections={this.getSections()}
keyExtractor={option => option.currencyCode}
stickySectionHeadersEnabled={false}
renderItem={({item, key}) => (
<OptionRow
key={key}
mode="compact"
option={item}
onSelectRow={() => this.toggleOption(item.currencyCode)}
isSelected={item.currencyCode === this.state.selectedCurrency.currencyCode}
showSelectedState
hideAdditionalOptionStates
/>
)}
renderSectionHeader={({section: {title}}) => (
<View>
<Text style={[styles.p5, styles.textMicroBold, styles.colorHeading]}>
{title}
</Text>
</View>
)}
/>
<View style={[styles.ph5, styles.pv3]}>
<TextInputWithFocusStyles
styleFocusIn={[styles.textInputReversedFocus]}
ref={el => this.textInput = el}
style={[styles.textInput]}
value={this.state.searchValue}
onChangeText={this.changeSearchValue}
placeholder={this.props.translate('common.search')}
placeholderTextColor={themeColors.placeholderText}
/>
</View>
<View style={[styles.flex1]}>
<SectionList
bounces={false}
indicatorStyle="white"
keyboardShouldPersistTaps="always"
showsVerticalScrollIndicator={false}
sections={this.getSections()}
keyExtractor={option => option.currencyCode}
stickySectionHeadersEnabled={false}
renderItem={({item, key}) => (
<OptionRow
key={key}
mode="compact"
option={item}
onSelectRow={() => this.toggleOption(item.currencyCode)}
isSelected={item.currencyCode === this.state.selectedCurrency.currencyCode}
showSelectedState
hideAdditionalOptionStates
/>
)}
renderSectionHeader={({section: {title}}) => (
<View>
<Text style={[styles.p5, styles.textMicroBold, styles.colorHeading]}>
{title}
</Text>
</View>
)}
/>
</View>
</View>
</View>
<View style={[styles.ph5, styles.pb5]}>
<Pressable
<FixedFooter>
<Button
success
isDisabled={!this.state.selectedCurrency?.currencyCode}
style={[styles.w100]}
text={this.props.translate('iou.confirm')}
onPress={this.confirmCurrencySelection}
style={({hovered}) => [
styles.button,
styles.buttonSuccess,
styles.w100,
hovered && styles.buttonSuccessHovered,
]}
>
<Text style={[styles.buttonText, styles.buttonSuccessText]}>
Confirm
</Text>
</Pressable>
</View>
</View>
/>
</FixedFooter>
</KeyboardAvoidingView>
</ScreenWrapper>
);
}
Expand Down
Loading