diff --git a/app/containers/Check.tsx b/app/containers/Check.tsx index 42ecfa9b6..a44066796 100644 --- a/app/containers/Check.tsx +++ b/app/containers/Check.tsx @@ -5,7 +5,7 @@ import { CustomIcon } from '../lib/Icons'; import { themes } from '../constants/colors'; type TCheck = { - style: object, + style?: object, theme: string } const styles = StyleSheet.create({ diff --git a/app/containers/UIKit/MultiSelect/Chips.js b/app/containers/UIKit/MultiSelect/Chips.tsx similarity index 73% rename from app/containers/UIKit/MultiSelect/Chips.js rename to app/containers/UIKit/MultiSelect/Chips.tsx index 47827141d..2ee98dfb3 100644 --- a/app/containers/UIKit/MultiSelect/Chips.js +++ b/app/containers/UIKit/MultiSelect/Chips.tsx @@ -10,11 +10,28 @@ import { CustomIcon } from '../../../lib/Icons'; import styles from './styles'; -const keyExtractor = item => item.value.toString(); +type TChip = { + item: { + value: string; + imageUrl: string; + text: string + }; + onSelect: Function; + style: object; + theme: string; +} -const Chip = ({ - item, onSelect, style, theme -}) => ( +interface IChips { + items: []; + onSelect: Function; + style: object; + theme: string; +} + + +const keyExtractor = (item: any) => item.value.toString(); + +const Chip = ({ item, onSelect, style, theme }: TChip) => ( onSelect(item)} @@ -29,24 +46,13 @@ const Chip = ({ ); Chip.propTypes = { - item: PropTypes.object, - onSelect: PropTypes.func, - style: PropTypes.object, - theme: PropTypes.string + }; -const Chips = ({ - items, onSelect, style, theme -}) => ( +const Chips = ({ items, onSelect, style, theme }: IChips) => ( {items.map(item => )} ); -Chips.propTypes = { - items: PropTypes.array, - onSelect: PropTypes.func, - style: PropTypes.object, - theme: PropTypes.string -}; export default Chips; diff --git a/app/containers/UIKit/MultiSelect/Input.js b/app/containers/UIKit/MultiSelect/Input.tsx similarity index 80% rename from app/containers/UIKit/MultiSelect/Input.js rename to app/containers/UIKit/MultiSelect/Input.tsx index ff8647a61..b0c9ea8e8 100644 --- a/app/containers/UIKit/MultiSelect/Input.js +++ b/app/containers/UIKit/MultiSelect/Input.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { View, Text } from 'react-native'; -import PropTypes from 'prop-types'; import Touchable from 'react-native-platform-touchable'; import { CustomIcon } from '../../../lib/Icons'; @@ -8,9 +7,19 @@ import { themes } from '../../../constants/colors'; import ActivityIndicator from '../../ActivityIndicator'; import styles from './styles'; +interface IInput { + children: JSX.Element; + onPress: Function; + theme: string; + inputStyle: object; + disabled: boolean; + placeholder: string; + loading: boolean; +} + const Input = ({ children, onPress, theme, loading, inputStyle, placeholder, disabled -}) => ( +}: IInput) => ( ); -Input.propTypes = { - children: PropTypes.node, - onPress: PropTypes.func, - theme: PropTypes.string, - inputStyle: PropTypes.object, - disabled: PropTypes.bool, - placeholder: PropTypes.string, - loading: PropTypes.bool -}; export default Input; diff --git a/app/containers/UIKit/MultiSelect/Items.js b/app/containers/UIKit/MultiSelect/Items.tsx similarity index 76% rename from app/containers/UIKit/MultiSelect/Items.js rename to app/containers/UIKit/MultiSelect/Items.tsx index c2f784d03..98ab9d9b4 100644 --- a/app/containers/UIKit/MultiSelect/Items.js +++ b/app/containers/UIKit/MultiSelect/Items.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { Text, FlatList } from 'react-native'; -import PropTypes from 'prop-types'; import Touchable from 'react-native-platform-touchable'; import FastImage from '@rocket.chat/react-native-fast-image'; @@ -11,12 +10,28 @@ import { themes } from '../../../constants/colors'; import styles from './styles'; -const keyExtractor = item => item.value.toString(); +type TItem = { + item: { + value: { name: string; }; + text: { text: string; }; + imageUrl: string; + }; + selected: any; + onSelect: Function; + theme: string; +}; + +interface IItems { + items: []; + selected: []; + onSelect: Function; + theme: string; +} + +const keyExtractor = (item: any) => item.value.toString(); // RectButton doesn't work on modal (Android) -const Item = ({ - item, selected, onSelect, theme -}) => { +const Item = ({ item, selected, onSelect, theme }: TItem) => { const itemName = item.value.name || item.text.text.toLowerCase(); return ( ); }; -Item.propTypes = { - item: PropTypes.object, - selected: PropTypes.number, - onSelect: PropTypes.func, - theme: PropTypes.string -}; -const Items = ({ - items, selected, onSelect, theme -}) => ( +const Items = ({ items, selected, onSelect, theme }: IItems) => ( s === item.value)} />} /> ); -Items.propTypes = { - items: PropTypes.array, - selected: PropTypes.array, - onSelect: PropTypes.func, - theme: PropTypes.string -}; export default Items; diff --git a/app/containers/UIKit/MultiSelect/index.js b/app/containers/UIKit/MultiSelect/index.tsx similarity index 91% rename from app/containers/UIKit/MultiSelect/index.js rename to app/containers/UIKit/MultiSelect/index.tsx index 0d366b6d7..93df7498a 100644 --- a/app/containers/UIKit/MultiSelect/index.js +++ b/app/containers/UIKit/MultiSelect/index.tsx @@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'; import { View, Text, TouchableWithoutFeedback, Modal, KeyboardAvoidingView, Animated, Easing, StyleSheet } from 'react-native'; -import PropTypes from 'prop-types'; import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import Button from '../../Button'; @@ -19,6 +18,21 @@ import Input from './Input'; import styles from './styles'; +interface IMultiSelect { + options: []; + onChange: Function; + placeholder: object; + context: number; + loading: boolean; + multiselect: boolean; + onSearch: Function; + onClose: Function; + inputStyle: object; + value: []; + disabled: boolean; + theme: string; +} + const ANIMATION_DURATION = 200; const ANIMATION_PROPS = { duration: ANIMATION_DURATION, @@ -42,7 +56,7 @@ export const MultiSelect = React.memo(({ disabled, inputStyle, theme -}) => { +}: IMultiSelect) => { const [selected, select] = useState(Array.isArray(values) ? values : []); const [open, setOpen] = useState(false); const [search, onSearchChange] = useState(''); @@ -186,20 +200,3 @@ export const MultiSelect = React.memo(({ ); }); -MultiSelect.propTypes = { - options: PropTypes.array, - onChange: PropTypes.func, - placeholder: PropTypes.object, - context: PropTypes.number, - loading: PropTypes.bool, - multiselect: PropTypes.bool, - onSearch: PropTypes.func, - onClose: PropTypes.func, - inputStyle: PropTypes.object, - value: PropTypes.array, - disabled: PropTypes.bool, - theme: PropTypes.string -}; -MultiSelect.defaultProps = { - onClose: () => {} -}; diff --git a/app/containers/UIKit/MultiSelect/styles.js b/app/containers/UIKit/MultiSelect/styles.ts similarity index 100% rename from app/containers/UIKit/MultiSelect/styles.js rename to app/containers/UIKit/MultiSelect/styles.ts