Benchmark app component optimizations

This commit is contained in:
Nicolas Gallagher
2018-01-22 15:52:37 -08:00
parent ec8843fe90
commit 9d8d4057f6
2 changed files with 49 additions and 40 deletions
+8 -3
View File
@@ -19,11 +19,13 @@ export default class Layout extends Component {
const { widescreen } = this.state;
return (
<View onLayout={this._handleLayout} style={[styles.root, widescreen && styles.row]}>
<View style={widescreen ? styles.grow : styles.stackPanel}>{viewPanel}</View>
<View style={[widescreen ? styles.grow : styles.stackPanel, styles.layer]}>
{viewPanel}
</View>
<View style={styles.grow}>
<View style={styles.grow}>{listPanel}</View>
<View style={[styles.grow, styles.layer]}>{listPanel}</View>
<View style={styles.divider} />
<View>{actionPanel}</View>
<View style={styles.layer}>{actionPanel}</View>
</View>
</View>
);
@@ -59,5 +61,8 @@ const styles = StyleSheet.create({
},
stackPanel: {
height: '33.33%'
},
layer: {
transform: [{ translateZ: '0' }]
}
});
+41 -37
View File
@@ -8,45 +8,49 @@ const fmt = (time: number) => {
return 10 / i > 1 ? `0${i}` : i;
};
const ReportCard = ({
benchmarkName,
libraryName,
sampleCount,
mean,
stdDev,
runTime,
libraryVersion
}) => {
const sampleCountText = sampleCount != null ? `(${sampleCount})` : '';
class ReportCard extends React.PureComponent {
render() {
const {
benchmarkName,
libraryName,
sampleCount,
mean,
stdDev,
runTime,
libraryVersion
} = this.props;
return (
<View style={styles.root}>
<View style={styles.left}>
<Text numberOfLines={1} style={styles.bold}>
{`${libraryName}${libraryVersion ? '@' + libraryVersion : ''}`}
</Text>
<Text numberOfLines={1}>
{benchmarkName} {sampleCountText}
</Text>
const sampleCountText = sampleCount != null ? `(${sampleCount})` : '';
return (
<View style={styles.root}>
<View style={styles.left}>
<Text numberOfLines={1} style={styles.bold}>
{`${libraryName}${libraryVersion ? '@' + libraryVersion : ''}`}
</Text>
<Text numberOfLines={1}>
{benchmarkName} {sampleCountText}
</Text>
</View>
<View style={styles.right}>
{mean ? (
<Fragment>
<Text style={[styles.bold, styles.monoFont]}>
{fmt(mean)} ±{fmt(stdDev)} ms
</Text>
<Text style={[styles.monoFont, styles.centerText]}>
<Text style={styles.smallText}>Σ = </Text>
<Text>{Math.round(runTime)} ms</Text>
</Text>
</Fragment>
) : (
<Text style={styles.bold}>In progress</Text>
)}
</View>
</View>
<View style={styles.right}>
{mean ? (
<Fragment>
<Text style={[styles.bold, styles.monoFont]}>
{fmt(mean)} ±{fmt(stdDev)} ms
</Text>
<Text style={[styles.monoFont, styles.centerText]}>
<Text style={styles.smallText}>Σ = </Text>
<Text>{Math.round(runTime)} ms</Text>
</Text>
</Fragment>
) : (
<Text style={styles.bold}>In progress</Text>
)}
</View>
</View>
);
};
);
}
}
const styles = StyleSheet.create({
root: {