diff --git a/app/containers/List/ListContainer.js b/app/containers/List/ListContainer.tsx similarity index 78% rename from app/containers/List/ListContainer.js rename to app/containers/List/ListContainer.tsx index f1be3705a..dac760472 100644 --- a/app/containers/List/ListContainer.js +++ b/app/containers/List/ListContainer.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { ScrollView, StyleSheet } from 'react-native'; -import PropTypes from 'prop-types'; import { withTheme } from '../../theme'; import scrollPersistTaps from '../../utils/scrollPersistTaps'; @@ -10,7 +9,11 @@ const styles = StyleSheet.create({ } }); -const ListContainer = React.memo(({ children, ...props }) => ( +type TListContainer = { + children: JSX.Element; +} +const ListContainer = React.memo(({ children, ...props }: TListContainer) => ( + // @ts-ignore ( )); -ListContainer.propTypes = { - children: PropTypes.array.isRequired -}; - ListContainer.displayName = 'List.Container'; export default withTheme(ListContainer); diff --git a/app/containers/List/ListHeader.js b/app/containers/List/ListHeader.tsx similarity index 73% rename from app/containers/List/ListHeader.js rename to app/containers/List/ListHeader.tsx index 1166e25bd..54d8b009b 100644 --- a/app/containers/List/ListHeader.js +++ b/app/containers/List/ListHeader.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; -import PropTypes from 'prop-types'; import sharedStyles from '../../views/Styles'; import { themes } from '../../constants/colors'; @@ -19,22 +18,18 @@ const styles = StyleSheet.create({ } }); -const ListHeader = React.memo(({ title, theme, translateTitle }) => ( +interface IListHeader { + title: string; + theme: string; + translateTitle: boolean; +} + +const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => ( {translateTitle ? I18n.t(title) : title} )); -ListHeader.propTypes = { - title: PropTypes.string, - theme: PropTypes.string, - translateTitle: PropTypes.bool -}; - -ListHeader.defaultProps = { - translateTitle: true -}; - ListHeader.displayName = 'List.Header'; export default withTheme(ListHeader); diff --git a/app/containers/List/ListIcon.js b/app/containers/List/ListIcon.tsx similarity index 69% rename from app/containers/List/ListIcon.js rename to app/containers/List/ListIcon.tsx index 44941f2ca..2fc41e850 100644 --- a/app/containers/List/ListIcon.js +++ b/app/containers/List/ListIcon.tsx @@ -1,12 +1,19 @@ import React from 'react'; import { View, StyleSheet } from 'react-native'; -import PropTypes from 'prop-types'; import { themes } from '../../constants/colors'; import { CustomIcon } from '../../lib/Icons'; import { withTheme } from '../../theme'; import { ICON_SIZE } from './constants'; +interface IListIcon { + theme: string; + name: string; + color: string; + style: object; + testID: string; +} + const styles = StyleSheet.create({ icon: { alignItems: 'center', @@ -14,13 +21,7 @@ const styles = StyleSheet.create({ } }); -const ListIcon = React.memo(({ - theme, - name, - color, - style, - testID -}) => ( +const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => ( )); -ListIcon.propTypes = { - theme: PropTypes.string, - name: PropTypes.string, - color: PropTypes.string, - style: PropTypes.object, - testID: PropTypes.string -}; - ListIcon.displayName = 'List.Icon'; export default withTheme(ListIcon); diff --git a/app/containers/List/ListInfo.js b/app/containers/List/ListInfo.tsx similarity index 73% rename from app/containers/List/ListInfo.js rename to app/containers/List/ListInfo.tsx index e0cb9eae7..5f75258e0 100644 --- a/app/containers/List/ListInfo.js +++ b/app/containers/List/ListInfo.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; -import PropTypes from 'prop-types'; import sharedStyles from '../../views/Styles'; import { themes } from '../../constants/colors'; @@ -19,22 +18,18 @@ const styles = StyleSheet.create({ } }); -const ListInfo = React.memo(({ info, translateInfo, theme }) => ( +interface IListHeader { + info: string; + theme: string; + translateInfo: boolean; +} + +const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => ( {translateInfo ? I18n.t(info) : info} )); -ListInfo.propTypes = { - info: PropTypes.string, - theme: PropTypes.string, - translateInfo: PropTypes.bool -}; - -ListInfo.defaultProps = { - translateInfo: true -}; - ListInfo.displayName = 'List.Info'; export default withTheme(ListInfo); diff --git a/app/containers/List/ListItem.js b/app/containers/List/ListItem.tsx similarity index 67% rename from app/containers/List/ListItem.js rename to app/containers/List/ListItem.tsx index aa3ecbdf0..fa943da0d 100644 --- a/app/containers/List/ListItem.js +++ b/app/containers/List/ListItem.tsx @@ -1,8 +1,5 @@ import React from 'react'; -import { - View, Text, StyleSheet, I18nManager -} from 'react-native'; -import PropTypes from 'prop-types'; +import { View, Text, StyleSheet, I18nManager } from 'react-native'; import Touch from '../../utils/touch'; import { themes } from '../../constants/colors'; @@ -58,10 +55,26 @@ const styles = StyleSheet.create({ } }); +interface IListItemContent { + title?: string; + subtitle?: string; + left?: Function; + right?: Function; + disabled?: boolean; + testID?: string; + theme: string; + color?: string; + translateTitle?: boolean; + translateSubtitle?: boolean; + showActionIndicator?: boolean; + fontScale?: number; + alert?: boolean; +} + const Content = React.memo(({ - title, subtitle, disabled, testID, left, right, color, theme, translateTitle, translateSubtitle, showActionIndicator, fontScale, alert -}) => ( - + title, subtitle, disabled, testID, left, right, color, theme, fontScale, alert, translateTitle = true, translateSubtitle = true, showActionIndicator = false +}: IListItemContent) => ( + {left ? ( @@ -92,9 +105,16 @@ const Content = React.memo(({ )); -const Button = React.memo(({ - onPress, backgroundColor, underlayColor, ...props -}) => ( +interface IListItemButton { + title?: string; + onPress: Function; + disabled?: boolean; + theme: string; + backgroundColor: string; + underlayColor?: string; +} + +const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => ( onPress(props.title)} style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }} @@ -106,7 +126,13 @@ const Button = React.memo(({ )); -const ListItem = React.memo(({ ...props }) => { +interface IListItem { + onPress: Function; + theme: string; + backgroundColor: string; +} + +const ListItem = React.memo(({ ...props }: IListItem) => { if (props.onPress) { return