Show list of results
This commit is contained in:
parent
1c9612b3a3
commit
dc7f19fa37
2 changed files with 98 additions and 16 deletions
27
src/components/ResultItem.tsx
Normal file
27
src/components/ResultItem.tsx
Normal file
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
import zxcvbn from 'zxcvbn';
|
||||
import {
|
||||
Text,
|
||||
View,
|
||||
StyleSheet
|
||||
} from 'react-native';
|
||||
import _ from 'underscore';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
} as React.ViewStyle,
|
||||
});
|
||||
|
||||
interface Props {
|
||||
data: any;
|
||||
}
|
||||
|
||||
|
||||
export default function Result(props: Props) {
|
||||
return (
|
||||
<Text>{props.data.key}: {JSON.stringify(props.data.value)}</Text>
|
||||
);
|
||||
}
|
|
@ -1,10 +1,13 @@
|
|||
import React, { Component }from 'react';
|
||||
import React from 'react';
|
||||
import zxcvbn from 'zxcvbn';
|
||||
import {
|
||||
Text,
|
||||
View,
|
||||
StyleSheet
|
||||
StyleSheet,
|
||||
ListView
|
||||
} from 'react-native';
|
||||
import _ from 'underscore';
|
||||
import ResultItem from './ResultItem';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
|
@ -12,21 +15,73 @@ const styles = StyleSheet.create({
|
|||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
} as React.ViewStyle,
|
||||
listView: {
|
||||
flex: 1
|
||||
} as React.ViewStyle,
|
||||
listItem: {
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#333',
|
||||
paddingTop: 5,
|
||||
paddingBottom: 8,
|
||||
paddingHorizontal: 16
|
||||
} as React.ViewStyle
|
||||
});
|
||||
|
||||
interface Props {
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface State {
|
||||
interface State {}
|
||||
|
||||
}
|
||||
export default class Result extends React.Component<Props, State> {
|
||||
dataSource: any;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
|
||||
}
|
||||
|
||||
parseData(results: any) {
|
||||
const newResults = _.clone(results);
|
||||
const hashTimes = Object.keys(newResults.crack_times_display).map(function (key) {
|
||||
const value = newResults.crack_times_display[key];
|
||||
return {key, value};
|
||||
});
|
||||
delete newResults.crack_times_display;
|
||||
delete newResults.crack_times_seconds;
|
||||
const out = Object.keys(newResults).map(function (key) {
|
||||
const value = newResults[key];
|
||||
return {key, value};
|
||||
});
|
||||
return _.union(out, hashTimes);
|
||||
}
|
||||
|
||||
renderRow(rowData: any, sectionId: string, rowId: string) {
|
||||
let extraRowStyles = {};
|
||||
if (rowId === '0') {
|
||||
extraRowStyles = {
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#333'
|
||||
};
|
||||
}
|
||||
|
||||
export default function Result(props : Props) {
|
||||
const resultData = zxcvbn(props.value);
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>{resultData.score}</Text>
|
||||
<View style={[styles.listItem, extraRowStyles]}>
|
||||
<ResultItem data={rowData} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const results = this.parseData(zxcvbn(this.props.value));
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ListView
|
||||
style={styles.listView}
|
||||
dataSource={this.dataSource.cloneWithRows(results)}
|
||||
renderRow={this.renderRow.bind(this)}
|
||||
removeClippedSubviews />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue