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 ( + + + + ); + } }