This repository has been archived on 2023-03-26. You can view files and clone it, but cannot push or open issues or pull requests.
Sphere/app/components/projects/ProjectItem.js

130 lines
3.8 KiB
JavaScript

import React from 'react-native';
import GlobalStyles from '../../settings/styles';
import { getProjectRecentBuilds } from '../../api/CircleCI';
import moment from 'moment';
import Icon from 'react-native-vector-icons/Octicons';
import RouteMaster from '../routes/RouteMaster';
const {
View,
Text,
StyleSheet,
TouchableHighlight
} = React;
const styles = StyleSheet.create({
container: {
flex: 1,
height: 70,
alignItems: 'stretch',
backgroundColor: GlobalStyles.get('CIRCLE_ITEM_BG'),
borderBottomColor: GlobalStyles.get('CIRCLE_ITEM_BORDER'),
borderBottomWidth: 2,
flexDirection: 'row',
},
button: {
marginVertical: 2.5,
},
repoCell: {
paddingHorizontal: 4,
paddingVertical: 3,
flex: 0.84
},
buildCell: {
flex: 0.25,
padding: 4,
borderLeftColor: GlobalStyles.get('CIRCLE_ITEM_BORDER'),
borderLeftWidth: 1
},
colourPanel: {
flex: 0.02
},
repoName: {
fontSize: 15,
fontWeight: '500'
},
details: {
fontSize: 12.5,
fontWeight: '300',
},
detailsRow: {
flex: 1,
flexDirection: 'row'
},
mainDetails: {
marginRight: 10
}
});
export default class ProjectItem extends React.Component {
constructor() {
super();
this.state = {
recentBuild: false
};
this._displayMoreInfo = this._displayMoreInfo.bind(this);
this._viewBuildDetails = this._viewBuildDetails.bind(this);
}
componentDidMount() {
getProjectRecentBuilds(this.props.project.username, this.props.project.reponame).then(function (recentBuild) {
this.setState({ recentBuild: recentBuild[0] });
}.bind(this));
}
_viewBuildDetails() {
const destination = RouteMaster.get('PROJECT_DETAILS');
destination.title = this.props.project.reponame;
destination.props = {
project: this.props.project
};
this.props.nav.push(destination);
}
_displayMoreInfo(mostRecentBuild) {
const mask = mostRecentBuild.build_time_millis <= 60000 ? 'ss[s]' : 'm:ss';
const buildTime = moment.duration(mostRecentBuild.build_time_millis, 'ms').format(mask);
const commit = mostRecentBuild.all_commit_details[0];
return (
<View style={styles.buildCell}>
<Text style={styles.details}><Icon name="pulse" /> #{ mostRecentBuild.build_num }</Text>
<Text style={styles.details}><Icon name="clock" /> { buildTime }</Text>
<Text style={styles.details}><Icon name="git-commit" /> { commit.commit.substring(0, 6) }</Text>
</View>
);
}
render() {
const project = this.props.project;
const mostRecentBuild = this.state.recentBuild;
const master = project.branches[project.default_branch].recent_builds[0];
const statusColour = GlobalStyles.get('CIRCLE_TEST_COLOURS').get(master.outcome.toUpperCase());
const username = this.props.userDetails && this.props.userDetails.login !== project.username ?
(<Text style={[styles.details, styles.mainDetails]}><Icon name="person" /> {project.username}</Text>) : null;
const language = project.language ?
(<Text style={[styles.details, styles.mainDetails]}><Icon name="keyboard" /> {project.language}</Text>) : null;
const buildDetails = mostRecentBuild ? this._displayMoreInfo(mostRecentBuild) : null;
return (
<TouchableHighlight
style={styles.button}
underlayColor={GlobalStyles.get('CIRCLE_BG')}
onPress={this._viewBuildDetails}>
<View style={styles.container}>
<View style={styles.repoCell}>
<Text style={styles.repoName}>{project.reponame}</Text>
<View style={styles.detailsRow}>
{ username }
{ language }
</View>
</View>
{ buildDetails }
<View style={[styles.colourPanel, {backgroundColor: statusColour}]} />
</View>
</TouchableHighlight>
);
}
};