Skip to content
This repository has been archived by the owner on Sep 24, 2020. It is now read-only.

Merge button for PR screen #60

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Merge button for PR screen #60

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
01ae836
PR screen - merge button with modal, ui only
brascene Oct 7, 2017
ab88b2f
Merge branch 'master' of https://github.com/ovr/ghubber
brascene Oct 7, 2017
0ca6e14
comment fixes
brascene Oct 7, 2017
aa344cf
replace custom modal with openModal
brascene Oct 8, 2017
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
3 changes: 2 additions & 1 deletion .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"Dispatch": true,
"Promise": true,
"ThunkAction": true,
"ActionType": true
"ActionType": true,
"require": true
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Drop, because not needed ;)

}
}
Binary file added assets/threeDots.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 5 additions & 4 deletions components/Button/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,17 @@ import { UIText } from 'components';
type Props = {
children: Object,
onPress: () => any,
style?: ComponentStyles
style?: ComponentStyles,
textStyle: Object
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ComponentStyles

};

export default class Button extends PureComponent<Props> {
render() {
const { style, children, onPress } = this.props;
const { style, children, textStyle, onPress } = this.props;

return (
<TouchableOpacity onPress={onPress} style={[styles.button, style]}>
<UIText style={styles.text}>
<UIText style={textStyle !== {} ? textStyle : styles.text}>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[styles.text, textStyle] m?

{children}
</UIText>
</TouchableOpacity>
Expand All @@ -32,7 +33,7 @@ const styles = StyleSheet.create({
padding: 10,
},
text: {
color: '#fff',
color: 'black',
fontSize: 18,
fontWeight: '600',
textAlign: 'center',
Expand Down
37 changes: 37 additions & 0 deletions components/ImageButton/ImageButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@

import React, { PureComponent } from 'react';
import { TouchableOpacity, StyleSheet, ImageBackground } from 'react-native';

type Props = {
children: Object,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React$Element

onPress: () => any,
style?: ComponentStyles
};

export default class ImageButton extends PureComponent<Props> {
render() {
const { onPress } = this.props;
const image = require('../../assets/threeDots.png');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use import, but will be better to use vector icons, we already use https://github.com/oblador/react-native-vector-icons

return (
<TouchableOpacity
onPress={onPress}
style={styles.imageBackground}>
<ImageBackground
source={image}
style={styles.imageContent}>
</ImageBackground>
</TouchableOpacity>
);
}
}

const styles = StyleSheet.create({
imageBackground: {
width:50, height: 20, marginTop: 10,
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

every style must be on new line ;)

borderColor: '#edf1f5', borderWidth: 1, backgroundColor: '#edf1f5',
justifyContent: 'center', alignItems: 'center'
},
imageContent: {
width: 16, height: 16
}
});
2 changes: 2 additions & 0 deletions components/ImageButton/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, remove this unnecessary empty line

export { default as ImageButton } from './ImageButton';
1 change: 1 addition & 0 deletions components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,4 @@ export * from './Badge';
export * from './UIText';
export * from './ModalPicker';
export * from './TextIcon';
export * from './ImageButton';
74 changes: 71 additions & 3 deletions containers/RepositoryPullRequestScreen/RepositoryPullRequestScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@

import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { View, StyleSheet, ScrollView, FlatList } from 'react-native';
import { ErrorView, Spinner, Badge, UIText, ReactionGroup, Blank, Comment, CommitRow, RowSeparator } from 'components';
import { View, StyleSheet, ScrollView, FlatList, Text } from 'react-native';
import Modal from 'react-native-modal';
import { ErrorView, Spinner, Badge, UIText, ReactionGroup, Blank, Comment, CommitRow, RowSeparator, Button, ImageButton } from 'components';
import { IndicatorViewPager, PagerTitleIndicator } from 'rn-viewpager';
import { fetchPullRequest, showRepositoryCommit } from 'actions';
import { normalizeFont } from 'utils/helpers';
Expand All @@ -25,6 +26,10 @@ type Props = {
showRepositoryCommit: typeof showRepositoryCommit,
}

type ModalState = {
modalVisible: boolean,
}

const TITLE_COMMITS_INDEX = 1;

function getStateColor(state: string): string {
Expand All @@ -40,7 +45,11 @@ function getStateColor(state: string): string {
}
}

class RepositoryPullRequestScreen extends PureComponent<Props> {
class RepositoryPullRequestScreen extends PureComponent<Props, ModalState> {
state: ModalState = {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove

modalVisible: false
};

componentWillMount() {
this.fetchPullRequest();
}
Expand Down Expand Up @@ -88,6 +97,10 @@ class RepositoryPullRequestScreen extends PureComponent<Props> {
];
}

setModalVisible(visible) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove

this.setState({ modalVisible: visible });
}

renderOverView(pullRequest: Object): React.Element<any> {
return (
<ScrollView style={styles.overview}>
Expand All @@ -101,6 +114,25 @@ class RepositoryPullRequestScreen extends PureComponent<Props> {
</View>
</View>
<UIText style={styles.body}>{pullRequest.body}</UIText>
<ImageButton
style={styles.button}
onPress={() => this.setModalVisible(true)}
styleText={styles.buttonText}>
Close PR
</ImageButton>
<Modal
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use openModal instead of manually do modals

style={styles.modalContainer}
isVisible={this.state.modalVisible}>
<View style={styles.modalContent}>
<Text style={styles.modalTitle}>Merge this pull request?</Text>
<Button
style={styles.deletePr}
textStyle={styles.deletePrText}
onPress={() => this.setModalVisible(false)}>
Merge
</Button>
</View>
</Modal>
<ReactionGroup reactions={pullRequest.reactionGroups} />
<FlatList
style={styles.commentsList}
Expand Down Expand Up @@ -216,6 +248,42 @@ const styles = StyleSheet.create({
flex: 1,
paddingHorizontal: 10
},
button: {
width: 80, height: 30,
backgroundColor: '#edf1f5',
},
deletePr: {
width: 70, marginTop: 10,
backgroundColor: '#52c245',
},
deletePrText: {
color: '#fff',
fontSize: 14,
fontWeight: 'bold',
textAlign: 'center',
},
buttonText: {
color: 'black',
fontSize: 14,
fontWeight: '600',
textAlign: 'center',
backgroundColor: 'transparent'
},
modalTitle: {
color: 'black',
fontSize: 14, marginTop: 8,
fontWeight: '600',
textAlign: 'center',
},
modalContainer: {
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
},
modalContent: {
width: 200, height: 80, borderRadius: 10,
backgroundColor: '#fff', flexDirection: 'column', alignItems: 'center'
},
wrapper: {
flex: 1
},
Expand Down
155 changes: 78 additions & 77 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,81 @@
{
"name": "ghubber",
"version": "0.9.0",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start --reset-cache",
"start:ios": "concurrently -r 'npm run start' 'npm run ios && google-chrome http://localhost:8081/debugger-ui'",
"start:android": "concurrently -r 'npm run start' 'npm run android && google-chrome http://localhost:8081/debugger-ui'",
"ios": "node node_modules/react-native/local-cli/cli.js run-ios",
"android": "node node_modules/react-native/local-cli/cli.js run-android",
"flow": "flow check",
"test": "jest",
"lint": "eslint --cache .",
"lint:staged": "staged-files '**/*.js' -- $(npm bin)/eslint",
"postversion": "react-native-version"
},
"pre-commit": {
"run": "lint:staged"
},
"dependencies": {
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-transform-define": "^1.3.0",
"babel-plugin-transform-remove-console": "^6.8.5",
"base-64": "^0.1.0",
"commonmark": "^0.28.1",
"commonmark-react-renderer": "^4.3.3",
"github-flow-js": "^0.18.2",
"i18n-js": "^3.0.1",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"query-string": "^5.0.0",
"react": "16.0.0-alpha.12",
"react-native": "^0.48.4",
"react-native-device-info": "^0.11.0",
"react-native-htmlview": "^0.12.0",
"react-native-sentry": "^0.25.0",
"react-native-side-menu": "^1.1.3",
"react-native-swiper": "^1.5.12",
"react-native-vector-icons": "^4.4.0",
"react-navigation": "^1.0.0-beta.12",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"rn-viewpager": "^1.2.4"
},
"devDependencies": {
"babel-eslint": "^8.0.1",
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"concurrently": "^3.5.0",
"eslint": "^4.8.0",
"eslint-plugin-flowtype": "^2.37.0",
"eslint-plugin-react": "^7.4.0",
"eslint-plugin-react-native": "^3.1.0",
"flow-bin": "^0.56.0",
"jest": "21.2.1",
"pre-commit": "^1.2.2",
"react-native-version": "^2.3.1",
"react-test-renderer": "16.0.0-alpha.12",
"sentry-cli-binary": "^1.20.0",
"staged-files": "^0.1.2"
},
"jest": {
"preset": "react-native"
},
"contributes": {
"languages": [
{
"id": "flow",
"aliases": [
"Flow"
],
"extensions": [
".js"
]
}
"name": "ghubber",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please revert ident for this file
Thanks!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure what to revert here?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean, not needed to change this file (code indentation - spaces)

"version": "0.9.0",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start --reset-cache",
"start:ios": "concurrently -r 'npm run start' 'npm run ios && google-chrome http://localhost:8081/debugger-ui'",
"start:android": "concurrently -r 'npm run start' 'npm run android && google-chrome http://localhost:8081/debugger-ui'",
"ios": "node node_modules/react-native/local-cli/cli.js run-ios",
"android": "node node_modules/react-native/local-cli/cli.js run-android",
"flow": "flow check",
"test": "jest",
"lint": "eslint --cache .",
"lint:staged": "staged-files '**/*.js' -- $(npm bin)/eslint",
"postversion": "react-native-version"
},
"pre-commit": {
"run": "lint:staged"
},
"dependencies": {
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-transform-define": "^1.3.0",
"babel-plugin-transform-remove-console": "^6.8.5",
"base-64": "^0.1.0",
"commonmark": "^0.28.1",
"commonmark-react-renderer": "^4.3.3",
"github-flow-js": "^0.18.2",
"i18n-js": "^3.0.1",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"query-string": "^5.0.0",
"react": "16.0.0-alpha.12",
"react-native": "^0.48.4",
"react-native-device-info": "^0.11.0",
"react-native-htmlview": "^0.12.0",
"react-native-modal": "^4.0.0",
"react-native-sentry": "^0.25.0",
"react-native-side-menu": "^1.1.3",
"react-native-swiper": "^1.5.12",
"react-native-vector-icons": "^4.4.0",
"react-navigation": "^1.0.0-beta.12",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"rn-viewpager": "^1.2.4"
},
"devDependencies": {
"babel-eslint": "^8.0.1",
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"concurrently": "^3.5.0",
"eslint": "^4.8.0",
"eslint-plugin-flowtype": "^2.37.0",
"eslint-plugin-react": "^7.4.0",
"eslint-plugin-react-native": "^3.1.0",
"flow-bin": "^0.56.0",
"jest": "21.2.1",
"pre-commit": "^1.2.2",
"react-native-version": "^2.3.1",
"react-test-renderer": "16.0.0-alpha.12",
"sentry-cli-binary": "^1.20.0",
"staged-files": "^0.1.2"
},
"jest": {
"preset": "react-native"
},
"contributes": {
"languages": [
{
"id": "flow",
"aliases": [
"Flow"
],
"extensions": [
".js"
]
}
}
]
}
}