Add commit buttons in form instead of on navigation (#5419)

* Add commit buttons in form instead of on navigation

* Fix style
This commit is contained in:
Daniel Espino García 2021-07-08 10:50:23 +02:00 committed by GitHub
parent 9fafc3be5b
commit f0c9aa75fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 23 deletions

View file

@ -88,24 +88,17 @@ export function doAppCall<Res=unknown>(call: AppCallRequest, type: AppCallType,
const showAppForm = async (form: AppForm, call: AppCallRequest, theme: Theme) => {
const closeButton = await CompassIcon.getImageSource('close', 24, theme.sidebarHeaderTextColor);
let submitButtons = [{
id: 'submit-form',
showAsAction: 'always',
text: 'Submit',
}];
if (form.submit_buttons) {
const options = form.fields.find((f) => f.name === form.submit_buttons)?.options;
const newButtons = options?.map((o) => {
return {
id: 'submit-form_' + o.value,
showAsAction: 'always',
text: o.label,
};
});
if (newButtons && newButtons.length > 0) {
submitButtons = newButtons;
}
let submitButtons;
const customSubmitButtons = form.submit_buttons && form.fields.find((f) => f.name === form.submit_buttons)?.options;
if (!customSubmitButtons?.length) {
submitButtons = [{
id: 'submit-form',
showAsAction: 'always',
text: 'Submit',
}];
}
const options = {
topBar: {
leftButtons: [{

View file

@ -3,9 +3,10 @@
import {intlShape} from 'react-intl';
import React, {PureComponent} from 'react';
import {ScrollView, View} from 'react-native';
import {ScrollView, Text, View} from 'react-native';
import {EventSubscription, Navigation} from 'react-native-navigation';
import {SafeAreaView} from 'react-native-safe-area-context';
import Button from 'react-native-button';
import {AppCallResponseTypes} from '@mm-redux/constants/apps';
import {AppCallRequest, AppField, AppForm, AppFormValue, AppFormValues, AppLookupResponse, AppSelectOption, FormResponseData} from '@mm-redux/types/apps';
@ -22,6 +23,7 @@ import {getMarkdownBlockStyles, getMarkdownTextStyles} from '@utils/markdown';
import {preventDoubleTap} from '@utils/tap';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {DoAppCallResult} from 'types/actions/apps';
import {GlobalStyles} from 'app/styles';
import AppsFormField from './apps_form_field';
import DialogIntroductionText from './dialog_introduction_text';
@ -107,11 +109,6 @@ export default class AppsFormComponent extends PureComponent<Props, State> {
return;
case 'close-dialog':
this.handleHide();
return;
}
if (buttonId.startsWith('submit-form_')) {
this.handleSubmit(buttonId.substr('submit-form_'.length));
}
}
@ -333,6 +330,8 @@ export default class AppsFormComponent extends PureComponent<Props, State> {
const {formError, fieldErrors, values} = this.state;
const style = getStyleFromTheme(theme);
const submitButtons = fields && fields.find((f) => f.name === form.submit_buttons);
return (
<SafeAreaView
testID='interactive_dialog.screen'
@ -373,6 +372,19 @@ export default class AppsFormComponent extends PureComponent<Props, State> {
/>
);
})}
<View
style={{marginHorizontal: 5}}
>
{submitButtons?.options?.map((o) => (
<Button
key={o.value}
onPress={() => this.handleSubmit(o.value)}
containerStyle={GlobalStyles.signupButton}
>
<Text style={GlobalStyles.signupButtonText}>{o.label}</Text>
</Button>
))}
</View>
</ScrollView>
</SafeAreaView>
);
@ -403,6 +415,12 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => {
marginBottom: 20,
marginTop: 10,
},
button: {
alignSelf: 'stretch',
backgroundColor: theme.sidebarHeaderBg,
borderRadius: 3,
padding: 15,
},
errorLabel: {
fontSize: 12,
textAlign: 'left',