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