Skip to content

Commit

Permalink
Merge pull request #3193 from parasharrajat/fixed-button
Browse files Browse the repository at this point in the history 
button styling fixed
  • Loading branch information
@roryabraham
roryabraham authored Jun 11, 2021
2 parents 34612d7 + d0c316f commit c5e6da2
Show file tree
Hide file tree
Showing 12 changed files with 409 additions and 378 deletions.
27 changes: 27 additions & 0 deletions src/components/FixedFooter.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
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),
};

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
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
1 change: 1 addition & 0 deletions src/libs/KeyboardAvoidingView/index.ios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,5 @@ function KeyboardAvoidingView({children}) {

KeyboardAvoidingView.propTypes = propTypes;
KeyboardAvoidingView.defaultProps = defaultProps;
KeyboardAvoidingView.displayName = 'KeyboardAvoidingView';
export default KeyboardAvoidingView;
16 changes: 2 additions & 14 deletions src/libs/KeyboardAvoidingView/index.js
View file
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';
export default KeyboardAvoidingView;
88 changes: 45 additions & 43 deletions src/pages/NewGroupPage.js
View file
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 @@ -194,7 +195,7 @@ class NewGroupPage extends Component {
return (
<ScreenWrapper>
{({didScreenTransitionEnd}) => (
<>
<KeyboardAvoidingView>
<HeaderWithCloseButton
title={this.props.translate('sidebarScreen.newGroup')}
onCloseButtonPress={() => Navigation.dismissModal(true)}
Expand All @@ -203,53 +204,54 @@ 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,
[],
false,
this.props.betas,
);
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,
[],
false,
this.props.betas,
);
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
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 @@ -157,69 +160,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

0 comments on commit c5e6da2

Please sign in to comment.