-
-
Notifications
You must be signed in to change notification settings - Fork 140
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1621 from kaloudis/info-modal
Info Modal and Text components
- Loading branch information
Showing
13 changed files
with
629 additions
and
77 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { NavigationActions } from 'react-navigation'; | ||
|
|
||
| let _navigator; | ||
|
|
||
| function setTopLevelNavigator(navigatorRef) { | ||
| _navigator = navigatorRef; | ||
| } | ||
|
|
||
| function navigate(routeName: string, params?: any) { | ||
| _navigator.dispatch( | ||
| NavigationActions.navigate({ | ||
| routeName, | ||
| params | ||
| }) | ||
| ); | ||
| } | ||
|
|
||
| // add other navigation functions that you need and export them | ||
|
|
||
| export default { | ||
| navigate, | ||
| setTopLevelNavigator | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| import React from 'react'; | ||
| import { View, StyleSheet, Text } from 'react-native'; | ||
| import { inject, observer } from 'mobx-react'; | ||
|
|
||
| import NavigationService from '../../NavigationService'; | ||
|
|
||
| import Button from '../Button'; | ||
| import ModalBox from '../ModalBox'; | ||
|
|
||
| import ModalStore from '../../stores/ModalStore'; | ||
|
|
||
| import { localeString } from '../../utils/LocaleUtils'; | ||
| import UrlUtils from '../../utils/UrlUtils'; | ||
|
|
||
| interface InfoModalProps { | ||
| ModalStore: ModalStore; | ||
| } | ||
|
|
||
| @inject('ModalStore') | ||
| @observer | ||
| export default class InfoModal extends React.Component<InfoModalProps, {}> { | ||
| render() { | ||
| const { ModalStore } = this.props; | ||
| const { | ||
| showInfoModal, | ||
| infoModalText, | ||
| infoModalLink, | ||
| infoModalNav, | ||
| toggleInfoModal | ||
| } = ModalStore; | ||
|
|
||
| return ( | ||
| <ModalBox | ||
| isOpen={showInfoModal} | ||
| style={{ | ||
| backgroundColor: 'transparent', | ||
| minHeight: 200 | ||
| }} | ||
| onClosed={() => toggleInfoModal()} | ||
| ref="modal" | ||
| > | ||
| <View | ||
| style={{ | ||
| flex: 1, | ||
| justifyContent: 'center', | ||
| alignItems: 'center' | ||
| }} | ||
| > | ||
| <View | ||
| style={{ | ||
| backgroundColor: 'white', | ||
| borderRadius: 30, | ||
| padding: 30, | ||
| alignItems: 'center', | ||
| shadowColor: '#000', | ||
| shadowOffset: { | ||
| width: 0, | ||
| height: 2 | ||
| } | ||
| }} | ||
| > | ||
| {typeof infoModalText === 'string' && ( | ||
| <Text | ||
| style={{ | ||
| fontFamily: 'Lato-Regular', | ||
| fontSize: 20, | ||
| marginBottom: 40 | ||
| }} | ||
| > | ||
| {infoModalText} | ||
| </Text> | ||
| )} | ||
|
|
||
| {Array.isArray(infoModalText) && | ||
| infoModalText.map((text: string, index: number) => ( | ||
| <Text | ||
| key={index} | ||
| style={{ | ||
| fontFamily: 'Lato-Regular', | ||
| fontSize: 20, | ||
| marginBottom: 40 | ||
| }} | ||
| > | ||
| {text} | ||
| </Text> | ||
| ))} | ||
|
|
||
| <View style={styles.buttons}> | ||
| {(infoModalLink || infoModalNav) && ( | ||
| <View | ||
| style={{ | ||
| ...styles.button, | ||
| marginBottom: 25 | ||
| }} | ||
| > | ||
| <Button | ||
| title={localeString( | ||
| 'general.learnMore' | ||
| )} | ||
| onPress={() => { | ||
| toggleInfoModal(); | ||
| if (infoModalLink) | ||
| UrlUtils.goToUrl(infoModalLink); | ||
| if (infoModalNav) | ||
| NavigationService.navigate( | ||
| infoModalNav | ||
| ); | ||
| }} | ||
| tertiary | ||
| ></Button> | ||
| </View> | ||
| )} | ||
| <View style={styles.button}> | ||
| <Button | ||
| title={localeString('general.close')} | ||
| onPress={() => toggleInfoModal()} | ||
| secondary | ||
| ></Button> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| </View> | ||
| </ModalBox> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| buttons: { | ||
| width: '100%' | ||
| }, | ||
| button: { | ||
| width: 350 | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import * as React from 'react'; | ||
| import { Text, TouchableOpacity } from 'react-native'; | ||
| import { inject, observer } from 'mobx-react'; | ||
| import { Row } from './layout/Row'; | ||
|
|
||
| import { themeColor } from './../utils/ThemeUtils'; | ||
|
|
||
| import ModalStore from '../stores/ModalStore'; | ||
|
|
||
| interface TextProps { | ||
| ModalStore: ModalStore; | ||
| style?: any; | ||
| children: string; | ||
| infoText?: string | Array<string>; | ||
| infoLink?: string; | ||
| infoNav?: string; | ||
| } | ||
|
|
||
| @inject('ModalStore') | ||
| @observer | ||
| export default class ZeusText extends React.Component<TextProps, {}> { | ||
| render() { | ||
| const { children, style, infoText, infoLink, infoNav, ModalStore } = | ||
| this.props; | ||
| const { toggleInfoModal } = ModalStore; | ||
|
|
||
| const CoreText = () => ( | ||
| <Row> | ||
| <Text | ||
| style={{ | ||
| fontFamily: 'Lato-Regular', | ||
| color: themeColor('text'), | ||
| ...style | ||
| }} | ||
| > | ||
| {children} | ||
| </Text> | ||
| {infoText && ( | ||
| <Text | ||
| style={{ | ||
| color: themeColor('text'), | ||
| ...style, | ||
| fontWeight: 'bold' | ||
| }} | ||
| > | ||
| {' ⓘ'} | ||
| </Text> | ||
| )} | ||
| </Row> | ||
| ); | ||
|
|
||
| if (infoText) { | ||
| return ( | ||
| <TouchableOpacity | ||
| onPress={() => toggleInfoModal(infoText, infoLink, infoNav)} | ||
| > | ||
| <CoreText /> | ||
| </TouchableOpacity> | ||
| ); | ||
| } | ||
|
|
||
| return <CoreText />; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.