diff --git a/src/components/ResultItem.tsx b/src/components/ResultItem.tsx
new file mode 100644
index 0000000..3212b7d
--- /dev/null
+++ b/src/components/ResultItem.tsx
@@ -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 (
+ {props.data.key}: {JSON.stringify(props.data.value)}
+ );
+}
diff --git a/src/components/Results.tsx b/src/components/Results.tsx
index 81fefcf..78ae946 100644
--- a/src/components/Results.tsx
+++ b/src/components/Results.tsx
@@ -1,32 +1,87 @@
-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: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center'
- } as React.ViewStyle,
+ container: {
+ flex: 1,
+ 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 {
+ dataSource: any;
-export default function Result(props : Props) {
- const resultData = zxcvbn(props.value);
- return (
-
- {resultData.score}
-
- );
+ 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'
+ };
+ }
+
+ return (
+
+
+
+ );
+ }
+
+ render() {
+ const results = this.parseData(zxcvbn(this.props.value));
+ return (
+
+
+
+ );
+ }
}