Skip to content

Demo screen support injected ui #855

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

Merged
merged 5 commits into from
Jul 21, 2020
Merged

Demo screen support injected ui #855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d0751da
WIP, added injectable ui prop to render extra settings component in d…
mendyEdri Jul 13, 2020
8ebd8d5
Added support injecting extra ui component to the setting screen,
mendyEdri Jul 15, 2020
9440b8c
Support injecting extra ui comonent to the settings screen.
mendyEdri Jul 15, 2020
8fa0b60
Removed show-toast injected code (now handled by the caller)
mendyEdri Jul 20, 2020
b40ecaa
removed redundant state value
mendyEdri Jul 21, 2020
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
13 changes: 10 additions & 3 deletions demo/src/screens/MainScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,11 @@ class MainScreen extends Component {
static propTypes = {
containerStyle: ViewPropTypes.style,
renderItem: PropTypes.func,
pageStyle: ViewPropTypes.style
pageStyle: ViewPropTypes.style
};

settingsScreenName = 'unicorn.Settings';

static options() {
return {
topBar: {
Expand Down Expand Up @@ -63,8 +65,12 @@ class MainScreen extends Component {

if (buttonId === 'uilib.settingsButton') {
this.pushScreen({
name: 'unicorn.Settings',
passProps: {navigationData: data, playground: this.props.playground}
name: this.settingsScreenName,
passProps: {
navigationData: data,
playground: this.props.playground,
extraSettingsUI: this.props.extraSettingsUI
}
});
}
};
Expand All @@ -73,6 +79,7 @@ class MainScreen extends Component {
Navigation.push(this.props.componentId, {
component: {
name: options.name || options.screen,
id: this.settingsScreenName,
passProps: options.passProps,
options: {
topBar: {
Expand Down
10 changes: 6 additions & 4 deletions demo/src/screens/SettingsScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {StyleSheet, I18nManager} from 'react-native';
import {Colors, View, Text, Picker, Toast, Switch} from 'react-native-ui-lib'; //eslint-disable-line
import {navigationData} from './MenuStructure';


const none = {label: '[None]', value: ''};
const playgroundScreen = {label: 'Playground', value: 'unicorn.PlaygroundScreen'};

Expand All @@ -15,7 +14,7 @@ class SettingsScreen extends Component {

const data = props.navigationData || navigationData;
const playground = props.playground || playgroundScreen;

this.state = {
showRefreshMessage: false,
screens: [
Expand Down Expand Up @@ -62,8 +61,9 @@ class SettingsScreen extends Component {

render() {
const {defaultScreen, showRefreshMessage, isRTL, screens} = this.state;
const {extraSettingsUI} = this.props;
const filteredScreens = _.filter(screens, screen => !_.isUndefined(screen.value));

return (
<View flex padding-25 bg-grey80>
<View flex>
Expand All @@ -82,7 +82,7 @@ class SettingsScreen extends Component {
<Picker.Item key={screen.value} value={screen}/>
))}
</Picker>

<View style={{borderWidth: 1, borderColor: Colors.dark70, marginTop: 40}}>
<View style={[{padding: 5, borderBottomWidth: 1}, styles.block]}>
<Text text80 dark20>Current layout direction</Text>
Expand All @@ -99,6 +99,8 @@ class SettingsScreen extends Component {
<Text text80 dark20>Force RTL</Text>
</View>
</View>

{extraSettingsUI?.()}
</View>

<Text text30 dark10>Settings</Text>
Expand Down