From 6418803517385078f0d523ad244255cb491aea5c Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Fri, 25 Mar 2022 14:20:09 -0300 Subject: [PATCH 1/5] Chore: Evaluate Markdown - TypeScript (#3948) --- app/containers/markdown/AtMention.tsx | 15 ++++++++------- app/containers/markdown/BlockQuote.tsx | 2 +- app/containers/markdown/Hashtag.tsx | 6 +++--- app/containers/markdown/Link.tsx | 2 +- app/containers/markdown/List.tsx | 7 +++---- app/containers/markdown/ListItem.tsx | 2 +- app/containers/markdown/Preview.tsx | 6 +++--- app/containers/markdown/Table.tsx | 2 +- app/containers/markdown/TableCell.tsx | 2 +- app/containers/markdown/TableRow.tsx | 4 ++-- app/containers/markdown/interfaces.ts | 1 + app/containers/markdown/new/BigEmoji.tsx | 2 +- app/containers/markdown/new/Bold.tsx | 2 +- app/containers/markdown/new/Code.tsx | 8 ++++---- app/containers/markdown/new/CodeLine.tsx | 2 +- app/containers/markdown/new/Emoji.tsx | 4 ++-- app/containers/markdown/new/Heading.tsx | 4 ++-- app/containers/markdown/new/Image.tsx | 4 ++-- app/containers/markdown/new/Inline.tsx | 2 +- app/containers/markdown/new/InlineCode.tsx | 8 ++++---- app/containers/markdown/new/Italic.tsx | 2 +- app/containers/markdown/new/Link.tsx | 4 ++-- app/containers/markdown/new/OrderedList.tsx | 4 ++-- app/containers/markdown/new/Paragraph.tsx | 4 ++-- app/containers/markdown/new/Plain.tsx | 4 ++-- app/containers/markdown/new/Quote.tsx | 4 ++-- app/containers/markdown/new/Strike.tsx | 2 +- app/containers/markdown/new/TaskList.tsx | 4 ++-- app/containers/markdown/new/UnorderedList.tsx | 4 ++-- app/containers/markdown/new/index.tsx | 2 +- 30 files changed, 60 insertions(+), 59 deletions(-) diff --git a/app/containers/markdown/AtMention.tsx b/app/containers/markdown/AtMention.tsx index 7c0f258a0..707b7994d 100644 --- a/app/containers/markdown/AtMention.tsx +++ b/app/containers/markdown/AtMention.tsx @@ -1,18 +1,19 @@ import React from 'react'; -import { Text } from 'react-native'; +import { StyleProp, Text, TextStyle } from 'react-native'; import { useTheme } from '../../theme'; import { themes } from '../../constants/colors'; import styles from './styles'; import { events, logEvent } from '../../utils/log'; +import { IUserMention } from './interfaces'; interface IAtMention { mention: string; username?: string; navToRoomInfo?: Function; - style?: any; + style?: StyleProp[]; useRealName?: boolean; - mentions: any; + mentions?: IUserMention[]; } const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, style = [], useRealName }: IAtMention) => { @@ -23,7 +24,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl style={[ styles.mention, { - color: themes[theme!].mentionGroupColor + color: themes[theme].mentionGroupColor }, ...style ]}> @@ -35,11 +36,11 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl let mentionStyle = {}; if (mention === username) { mentionStyle = { - color: themes[theme!].mentionMeColor + color: themes[theme].mentionMeColor }; } else { mentionStyle = { - color: themes[theme!].mentionOtherColor + color: themes[theme].mentionOtherColor }; } @@ -64,7 +65,7 @@ const AtMention = React.memo(({ mention, mentions, username, navToRoomInfo, styl ); } - return {`@${mention}`}; + return {`@${mention}`}; }); export default AtMention; diff --git a/app/containers/markdown/BlockQuote.tsx b/app/containers/markdown/BlockQuote.tsx index e2da2c1fa..aa67c0e3d 100644 --- a/app/containers/markdown/BlockQuote.tsx +++ b/app/containers/markdown/BlockQuote.tsx @@ -5,7 +5,7 @@ import { themes } from '../../constants/colors'; import styles from './styles'; interface IBlockQuote { - children: JSX.Element; + children: React.ReactElement | null; theme: string; } diff --git a/app/containers/markdown/Hashtag.tsx b/app/containers/markdown/Hashtag.tsx index 29ba8ddcc..bdfd10319 100644 --- a/app/containers/markdown/Hashtag.tsx +++ b/app/containers/markdown/Hashtag.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Text, TextStyle, StyleProp } from 'react-native'; +import { StyleProp, Text, TextStyle } from 'react-native'; import { themes } from '../../constants/colors'; import { useTheme } from '../../theme'; @@ -33,7 +33,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH style={[ styles.mention, { - color: themes[theme!].mentionOtherColor + color: themes[theme].mentionOtherColor }, ...style ]} @@ -42,7 +42,7 @@ const Hashtag = React.memo(({ hashtag, channels, navToRoomInfo, style = [] }: IH ); } - return {`#${hashtag}`}; + return {`#${hashtag}`}; }); export default Hashtag; diff --git a/app/containers/markdown/Link.tsx b/app/containers/markdown/Link.tsx index 414b73a52..7703a6be3 100644 --- a/app/containers/markdown/Link.tsx +++ b/app/containers/markdown/Link.tsx @@ -10,7 +10,7 @@ import openLink from '../../utils/openLink'; import { TOnLinkPress } from './interfaces'; interface ILink { - children: JSX.Element; + children: React.ReactElement | null; link: string; theme: string; onLinkPress?: TOnLinkPress; diff --git a/app/containers/markdown/List.tsx b/app/containers/markdown/List.tsx index b032a6a0f..b67eb155b 100644 --- a/app/containers/markdown/List.tsx +++ b/app/containers/markdown/List.tsx @@ -1,7 +1,7 @@ import React from 'react'; interface IList { - children: JSX.Element; + children: React.ReactElement[] | null; ordered: boolean; start: number; tight: boolean; @@ -11,9 +11,8 @@ interface IList { const List = React.memo(({ children, ordered, tight, start = 1, numberOfLines = 0 }: IList) => { let bulletWidth = 15; - if (ordered) { - // @ts-ignore - const lastNumber = start + children.length - 1; + if (ordered && children) { + const lastNumber = start + children?.length - 1; bulletWidth = 9 * lastNumber.toString().length + 7; } diff --git a/app/containers/markdown/ListItem.tsx b/app/containers/markdown/ListItem.tsx index 0e323df77..f822bd87a 100644 --- a/app/containers/markdown/ListItem.tsx +++ b/app/containers/markdown/ListItem.tsx @@ -18,7 +18,7 @@ const style = StyleSheet.create({ }); interface IListItem { - children: JSX.Element; + children: React.ReactElement | null; bulletWidth: number; level: number; ordered: boolean; diff --git a/app/containers/markdown/Preview.tsx b/app/containers/markdown/Preview.tsx index d75eb3df8..fd7519643 100644 --- a/app/containers/markdown/Preview.tsx +++ b/app/containers/markdown/Preview.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { StyleProp, Text, TextStyle } from 'react-native'; +import { Text, TextStyle } from 'react-native'; import removeMarkdown from 'remove-markdown'; import shortnameToUnicode from '../../utils/shortnameToUnicode'; @@ -13,10 +13,10 @@ interface IMarkdownPreview { msg?: string; numberOfLines?: number; testID?: string; - style?: StyleProp[]; + style?: TextStyle[]; } -const MarkdownPreview = ({ msg, numberOfLines = 1, testID, style = [] }: IMarkdownPreview): React.ReactElement | null => { +const MarkdownPreview = ({ msg, numberOfLines = 1, testID, style = [] }: IMarkdownPreview) => { if (!msg) { return null; } diff --git a/app/containers/markdown/Table.tsx b/app/containers/markdown/Table.tsx index 4a0a972bf..5f38aa017 100644 --- a/app/containers/markdown/Table.tsx +++ b/app/containers/markdown/Table.tsx @@ -8,7 +8,7 @@ import I18n from '../../i18n'; import { themes } from '../../constants/colors'; interface ITable { - children: JSX.Element; + children: React.ReactElement | null; numColumns: number; theme: string; } diff --git a/app/containers/markdown/TableCell.tsx b/app/containers/markdown/TableCell.tsx index a00b0e092..bc8c89b84 100644 --- a/app/containers/markdown/TableCell.tsx +++ b/app/containers/markdown/TableCell.tsx @@ -6,7 +6,7 @@ import styles from './styles'; interface ITableCell { align: '' | 'left' | 'center' | 'right'; - children: JSX.Element; + children: React.ReactElement | null; isLastCell: boolean; theme: string; } diff --git a/app/containers/markdown/TableRow.tsx b/app/containers/markdown/TableRow.tsx index c1fc9e906..7874c48d7 100644 --- a/app/containers/markdown/TableRow.tsx +++ b/app/containers/markdown/TableRow.tsx @@ -5,7 +5,7 @@ import { themes } from '../../constants/colors'; import styles from './styles'; interface ITableRow { - children: JSX.Element; + children: React.ReactElement | null; isLastRow: boolean; theme: string; } @@ -16,7 +16,7 @@ const TableRow = React.memo(({ isLastRow, children: _children, theme }: ITableRo rowStyle.push(styles.rowBottomBorder); } - const children: any = React.Children.toArray(_children); + const children = React.Children.toArray(_children) as React.ReactElement[]; children[children.length - 1] = React.cloneElement(children[children.length - 1], { isLastCell: true }); diff --git a/app/containers/markdown/interfaces.ts b/app/containers/markdown/interfaces.ts index 8764b84fa..ed4984f48 100644 --- a/app/containers/markdown/interfaces.ts +++ b/app/containers/markdown/interfaces.ts @@ -2,6 +2,7 @@ export interface IUserMention { _id: string; username: string; name?: string; + type?: string; } export interface IUserChannel { diff --git a/app/containers/markdown/new/BigEmoji.tsx b/app/containers/markdown/new/BigEmoji.tsx index c8f6a3beb..f8032ff8f 100644 --- a/app/containers/markdown/new/BigEmoji.tsx +++ b/app/containers/markdown/new/BigEmoji.tsx @@ -14,7 +14,7 @@ const styles = StyleSheet.create({ } }); -const BigEmoji = ({ value }: IBigEmojiProps): JSX.Element => ( +const BigEmoji = ({ value }: IBigEmojiProps) => ( {value.map(block => ( diff --git a/app/containers/markdown/new/Bold.tsx b/app/containers/markdown/new/Bold.tsx index 9cb1f4fdb..f1982aacf 100644 --- a/app/containers/markdown/new/Bold.tsx +++ b/app/containers/markdown/new/Bold.tsx @@ -18,7 +18,7 @@ const styles = StyleSheet.create({ } }); -const Bold = ({ value }: IBoldProps): JSX.Element => ( +const Bold = ({ value }: IBoldProps) => ( {value.map(block => { switch (block.type) { diff --git a/app/containers/markdown/new/Code.tsx b/app/containers/markdown/new/Code.tsx index d2a164367..f3e060125 100644 --- a/app/containers/markdown/new/Code.tsx +++ b/app/containers/markdown/new/Code.tsx @@ -11,7 +11,7 @@ interface ICodeProps { value: CodeProps['value']; } -const Code = ({ value }: ICodeProps): JSX.Element => { +const Code = ({ value }: ICodeProps) => { const { theme } = useTheme(); return ( @@ -19,9 +19,9 @@ const Code = ({ value }: ICodeProps): JSX.Element => { style={[ styles.codeBlock, { - color: themes[theme!].bodyText, - backgroundColor: themes[theme!].bannerBackground, - borderColor: themes[theme!].borderColor + color: themes[theme].bodyText, + backgroundColor: themes[theme].bannerBackground, + borderColor: themes[theme].borderColor } ]}> {value.map(block => { diff --git a/app/containers/markdown/new/CodeLine.tsx b/app/containers/markdown/new/CodeLine.tsx index c05066f9c..77641447d 100644 --- a/app/containers/markdown/new/CodeLine.tsx +++ b/app/containers/markdown/new/CodeLine.tsx @@ -6,7 +6,7 @@ interface ICodeLineProps { value: CodeLineProps['value']; } -const CodeLine = ({ value }: ICodeLineProps): JSX.Element | null => { +const CodeLine = ({ value }: ICodeLineProps) => { if (value.type !== 'PLAIN_TEXT') { return null; } diff --git a/app/containers/markdown/new/Emoji.tsx b/app/containers/markdown/new/Emoji.tsx index 0800b8874..2d03ab08a 100644 --- a/app/containers/markdown/new/Emoji.tsx +++ b/app/containers/markdown/new/Emoji.tsx @@ -14,7 +14,7 @@ interface IEmojiProps { isBigEmoji?: boolean; } -const Emoji = ({ value, isBigEmoji }: IEmojiProps): JSX.Element => { +const Emoji = ({ value, isBigEmoji }: IEmojiProps) => { const { theme } = useTheme(); const { baseUrl, getCustomEmoji } = useContext(MarkdownContext); const emojiUnicode = shortnameToUnicode(`:${value.value}:`); @@ -23,7 +23,7 @@ const Emoji = ({ value, isBigEmoji }: IEmojiProps): JSX.Element => { if (emoji) { return ; } - return {emojiUnicode}; + return {emojiUnicode}; }; export default Emoji; diff --git a/app/containers/markdown/new/Heading.tsx b/app/containers/markdown/new/Heading.tsx index 2e810d376..a949f52c8 100644 --- a/app/containers/markdown/new/Heading.tsx +++ b/app/containers/markdown/new/Heading.tsx @@ -11,12 +11,12 @@ interface IHeadingProps { level: HeadingProps['level']; } -const Heading = ({ value, level }: IHeadingProps): JSX.Element => { +const Heading = ({ value, level }: IHeadingProps) => { const { theme } = useTheme(); const textStyle = styles[`heading${level}`]; return ( - + {value.map(block => { switch (block.type) { case 'PLAIN_TEXT': diff --git a/app/containers/markdown/new/Image.tsx b/app/containers/markdown/new/Image.tsx index fb9f95d28..94bcfac91 100644 --- a/app/containers/markdown/new/Image.tsx +++ b/app/containers/markdown/new/Image.tsx @@ -31,11 +31,11 @@ const MessageImage = ({ img, theme }: TMessageImage) => ( /> ); -const Image = ({ value }: IImageProps): JSX.Element => { +const Image = ({ value }: IImageProps) => { const { theme } = useTheme(); const { src } = value; - return ; + return ; }; export default Image; diff --git a/app/containers/markdown/new/Inline.tsx b/app/containers/markdown/new/Inline.tsx index 364e380d7..70dca0846 100644 --- a/app/containers/markdown/new/Inline.tsx +++ b/app/containers/markdown/new/Inline.tsx @@ -19,7 +19,7 @@ interface IParagraphProps { value: ParagraphProps['value']; } -const Inline = ({ value }: IParagraphProps): JSX.Element => { +const Inline = ({ value }: IParagraphProps) => { const { useRealName, username, navToRoomInfo, mentions, channels } = useContext(MarkdownContext); return ( diff --git a/app/containers/markdown/new/InlineCode.tsx b/app/containers/markdown/new/InlineCode.tsx index cf90f2cb3..123eca379 100644 --- a/app/containers/markdown/new/InlineCode.tsx +++ b/app/containers/markdown/new/InlineCode.tsx @@ -10,7 +10,7 @@ interface IInlineCodeProps { value: InlineCodeProps['value']; } -const InlineCode = ({ value }: IInlineCodeProps): JSX.Element => { +const InlineCode = ({ value }: IInlineCodeProps) => { const { theme } = useTheme(); return ( @@ -18,9 +18,9 @@ const InlineCode = ({ value }: IInlineCodeProps): JSX.Element => { style={[ styles.codeInline, { - color: themes[theme!].bodyText, - backgroundColor: themes[theme!].bannerBackground, - borderColor: themes[theme!].borderColor + color: themes[theme].bodyText, + backgroundColor: themes[theme].bannerBackground, + borderColor: themes[theme].borderColor } ]}> {(block => { diff --git a/app/containers/markdown/new/Italic.tsx b/app/containers/markdown/new/Italic.tsx index fc1432e5a..ee805c217 100644 --- a/app/containers/markdown/new/Italic.tsx +++ b/app/containers/markdown/new/Italic.tsx @@ -17,7 +17,7 @@ const styles = StyleSheet.create({ } }); -const Italic = ({ value }: IItalicProps): JSX.Element => ( +const Italic = ({ value }: IItalicProps) => ( {value.map(block => { switch (block.type) { diff --git a/app/containers/markdown/new/Link.tsx b/app/containers/markdown/new/Link.tsx index e29c4f2c0..3f926abd9 100644 --- a/app/containers/markdown/new/Link.tsx +++ b/app/containers/markdown/new/Link.tsx @@ -18,7 +18,7 @@ interface ILinkProps { value: LinkProps['value']; } -const Link = ({ value }: ILinkProps): JSX.Element => { +const Link = ({ value }: ILinkProps) => { const { theme } = useTheme(); const { onLinkPress } = useContext(MarkdownContext); const { src, label } = value; @@ -38,7 +38,7 @@ const Link = ({ value }: ILinkProps): JSX.Element => { }; return ( - + {(block => { switch (block.type) { case 'PLAIN_TEXT': diff --git a/app/containers/markdown/new/OrderedList.tsx b/app/containers/markdown/new/OrderedList.tsx index c5ae25125..d4226c54e 100644 --- a/app/containers/markdown/new/OrderedList.tsx +++ b/app/containers/markdown/new/OrderedList.tsx @@ -11,13 +11,13 @@ interface IOrderedListProps { value: OrderedListProps['value']; } -const OrderedList = ({ value }: IOrderedListProps): JSX.Element => { +const OrderedList = ({ value }: IOrderedListProps) => { const { theme } = useTheme(); return ( {value.map((item, index) => ( - {index + 1}. + {index + 1}. ))} diff --git a/app/containers/markdown/new/Paragraph.tsx b/app/containers/markdown/new/Paragraph.tsx index 2f7649bb9..93cb81e44 100644 --- a/app/containers/markdown/new/Paragraph.tsx +++ b/app/containers/markdown/new/Paragraph.tsx @@ -11,10 +11,10 @@ interface IParagraphProps { value: ParagraphProps['value']; } -const Paragraph = ({ value }: IParagraphProps): JSX.Element => { +const Paragraph = ({ value }: IParagraphProps) => { const { theme } = useTheme(); return ( - + ); diff --git a/app/containers/markdown/new/Plain.tsx b/app/containers/markdown/new/Plain.tsx index 9eca2e0c7..784bef63a 100644 --- a/app/containers/markdown/new/Plain.tsx +++ b/app/containers/markdown/new/Plain.tsx @@ -10,10 +10,10 @@ interface IPlainProps { value: PlainProps['value']; } -const Plain = ({ value }: IPlainProps): JSX.Element => { +const Plain = ({ value }: IPlainProps) => { const { theme } = useTheme(); return ( - + {value} ); diff --git a/app/containers/markdown/new/Quote.tsx b/app/containers/markdown/new/Quote.tsx index 27d6a01d1..d3005845a 100644 --- a/app/containers/markdown/new/Quote.tsx +++ b/app/containers/markdown/new/Quote.tsx @@ -11,11 +11,11 @@ interface IQuoteProps { value: QuoteProps['value']; } -const Quote = ({ value }: IQuoteProps): JSX.Element => { +const Quote = ({ value }: IQuoteProps) => { const { theme } = useTheme(); return ( - + {value.map(item => ( diff --git a/app/containers/markdown/new/Strike.tsx b/app/containers/markdown/new/Strike.tsx index 4d1cf5ea8..dedea1241 100644 --- a/app/containers/markdown/new/Strike.tsx +++ b/app/containers/markdown/new/Strike.tsx @@ -17,7 +17,7 @@ const styles = StyleSheet.create({ } }); -const Strike = ({ value }: IStrikeProps): JSX.Element => ( +const Strike = ({ value }: IStrikeProps) => ( {value.map(block => { switch (block.type) { diff --git a/app/containers/markdown/new/TaskList.tsx b/app/containers/markdown/new/TaskList.tsx index 8f46af965..4359ba42c 100644 --- a/app/containers/markdown/new/TaskList.tsx +++ b/app/containers/markdown/new/TaskList.tsx @@ -11,13 +11,13 @@ interface ITasksProps { value: TasksProps['value']; } -const TaskList = ({ value = [] }: ITasksProps): JSX.Element => { +const TaskList = ({ value = [] }: ITasksProps) => { const { theme } = useTheme(); return ( {value.map(item => ( - {item.status ? '- [x] ' : '- [ ] '} + {item.status ? '- [x] ' : '- [ ] '} ))} diff --git a/app/containers/markdown/new/UnorderedList.tsx b/app/containers/markdown/new/UnorderedList.tsx index 51c9b2188..09e16cdc7 100644 --- a/app/containers/markdown/new/UnorderedList.tsx +++ b/app/containers/markdown/new/UnorderedList.tsx @@ -11,13 +11,13 @@ interface IUnorderedListProps { value: UnorderedListProps['value']; } -const UnorderedList = ({ value }: IUnorderedListProps): JSX.Element => { +const UnorderedList = ({ value }: IUnorderedListProps) => { const { theme } = useTheme(); return ( {value.map(item => ( - - + - ))} diff --git a/app/containers/markdown/new/index.tsx b/app/containers/markdown/new/index.tsx index a02faffca..f5e7e587c 100644 --- a/app/containers/markdown/new/index.tsx +++ b/app/containers/markdown/new/index.tsx @@ -35,7 +35,7 @@ const Body = ({ getCustomEmoji, baseUrl, onLinkPress -}: IBodyProps): React.ReactElement | null => { +}: IBodyProps) => { if (isEmpty(tokens)) { return null; } From 744712b8d58bcab85c8e518902bfdbdc0fbdd498 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Fri, 25 Mar 2022 14:55:20 -0300 Subject: [PATCH 2/5] Chore: Migrate containers: FormContainer to Typescript (#3922) * Chore: Migrate containers: FormContainer to Typescript * minor tweak * theme fix * fix react.reactelement[] * minor tweak Co-authored-by: Gleidson Daniel Silva --- app/containers/FormContainer.tsx | 46 ++++++------ app/views/ForgotPasswordView.tsx | 2 +- app/views/LoginView.tsx | 2 +- app/views/NewServerView/index.tsx | 2 +- app/views/RegisterView.tsx | 96 +++++++++++++------------ app/views/SendEmailConfirmationView.tsx | 2 +- app/views/WorkspaceView/index.tsx | 2 +- 7 files changed, 80 insertions(+), 72 deletions(-) diff --git a/app/containers/FormContainer.tsx b/app/containers/FormContainer.tsx index ff233952a..8c862b54d 100644 --- a/app/containers/FormContainer.tsx +++ b/app/containers/FormContainer.tsx @@ -5,15 +5,15 @@ import { themes } from '../constants/colors'; import sharedStyles from '../views/Styles'; import scrollPersistTaps from '../utils/scrollPersistTaps'; import KeyboardView from '../presentation/KeyboardView'; +import { useTheme } from '../theme'; import StatusBar from './StatusBar'; import AppVersion from './AppVersion'; import { isTablet } from '../utils/deviceInfo'; import SafeAreaView from './SafeAreaView'; interface IFormContainer extends ScrollViewProps { - theme: string; testID: string; - children: React.ReactNode; + children: React.ReactElement | React.ReactElement[] | null; } const styles = StyleSheet.create({ @@ -22,27 +22,31 @@ const styles = StyleSheet.create({ } }); -export const FormContainerInner = ({ children }: { children: React.ReactNode }): JSX.Element => ( +export const FormContainerInner = ({ children }: { children: (React.ReactElement | null)[] }) => ( {children} ); -const FormContainer = ({ children, theme, testID, ...props }: IFormContainer): JSX.Element => ( - - - - - {children} - - - - -); +const FormContainer = ({ children, testID, ...props }: IFormContainer) => { + const { theme } = useTheme(); + + return ( + + + + + {children} + + + + + ); +}; export default FormContainer; diff --git a/app/views/ForgotPasswordView.tsx b/app/views/ForgotPasswordView.tsx index 375d089d4..0153f81fd 100644 --- a/app/views/ForgotPasswordView.tsx +++ b/app/views/ForgotPasswordView.tsx @@ -92,7 +92,7 @@ class ForgotPasswordView extends React.Component + {I18n.t('Forgot_password')} diff --git a/app/views/LoginView.tsx b/app/views/LoginView.tsx index d5b136dd5..0f66cba65 100644 --- a/app/views/LoginView.tsx +++ b/app/views/LoginView.tsx @@ -229,7 +229,7 @@ class LoginView extends React.Component { render() { const { Accounts_ShowFormLogin, theme, navigation } = this.props; return ( - + {this.renderUserForm()} diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx index 51f20a980..50917ceb5 100644 --- a/app/views/NewServerView/index.tsx +++ b/app/views/NewServerView/index.tsx @@ -321,7 +321,7 @@ class NewServerView extends React.Component + { return null; } try { - return Object.keys(this.parsedCustomFields).map((key, index, array) => { - if (this.parsedCustomFields[key].type === 'select') { - const options = this.parsedCustomFields[key].options.map((option: string) => ({ label: option, value: option })); - return ( - { - const newValue: { [key: string]: string | number } = {}; - newValue[key] = value; - this.setState({ customFields: { ...customFields, ...newValue } }); - }} - value={customFields[key]}> + return ( + <> + {Object.keys(this.parsedCustomFields).map((key, index, array) => { + if (this.parsedCustomFields[key].type === 'select') { + const options = this.parsedCustomFields[key].options.map((option: string) => ({ label: option, value: option })); + return ( + { + const newValue: { [key: string]: string | number } = {}; + newValue[key] = value; + this.setState({ customFields: { ...customFields, ...newValue } }); + }} + value={customFields[key]}> + { + // @ts-ignore + this[key] = e; + }} + placeholder={key} + value={customFields[key]} + testID='register-view-custom-picker' + theme={theme} + /> + + ); + } + + return ( { // @ts-ignore this[key] = e; }} + key={key} + label={key} placeholder={key} value={customFields[key]} - testID='register-view-custom-picker' + onChangeText={(value: string) => { + const newValue: { [key: string]: string | number } = {}; + newValue[key] = value; + this.setState({ customFields: { ...customFields, ...newValue } }); + }} + onSubmitEditing={() => { + if (array.length - 1 > index) { + // @ts-ignore + return this[array[index + 1]].focus(); + } + this.avatarUrl.focus(); + }} + containerStyle={styles.inputContainer} theme={theme} /> - - ); - } - - return ( - { - // @ts-ignore - this[key] = e; - }} - key={key} - label={key} - placeholder={key} - value={customFields[key]} - onChangeText={(value: string) => { - const newValue: { [key: string]: string | number } = {}; - newValue[key] = value; - this.setState({ customFields: { ...customFields, ...newValue } }); - }} - onSubmitEditing={() => { - if (array.length - 1 > index) { - // @ts-ignore - return this[array[index + 1]].focus(); - } - this.avatarUrl.focus(); - }} - containerStyle={styles.inputContainer} - theme={theme} - /> - ); - }); + ); + })} + + ); } catch (error) { return null; } @@ -235,7 +239,7 @@ class RegisterView extends React.Component { const { saving } = this.state; const { theme, showLoginButton, navigation } = this.props; return ( - + {I18n.t('Sign_Up')} diff --git a/app/views/SendEmailConfirmationView.tsx b/app/views/SendEmailConfirmationView.tsx index a3aad4979..6fb1f008c 100644 --- a/app/views/SendEmailConfirmationView.tsx +++ b/app/views/SendEmailConfirmationView.tsx @@ -62,7 +62,7 @@ const SendEmailConfirmationView = ({ navigation, route }: ISendEmailConfirmation }, []); return ( - + { const { theme, Site_Name, Site_Url, Assets_favicon_512, server, showLoginButton } = this.props; return ( - + From 70cb252d1b085d06ac003720fb4a29867c51d8f5 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Fri, 25 Mar 2022 15:09:02 -0300 Subject: [PATCH 3/5] Chore: Migrate containers: List to Typescript (#3921) * Chore: Migrate containers: List to Typescript * minor tweak * fix storyshot List - item flatlist * fix IListContainer * fix type of childrens * minor tweak --- app/containers/List/ListContainer.tsx | 2 +- app/containers/List/ListHeader.tsx | 1 + app/containers/List/ListIcon.tsx | 19 ++-- app/containers/List/ListItem.tsx | 92 ++++++++++--------- app/containers/List/ListSection.tsx | 5 +- app/containers/List/ListSeparator.tsx | 13 +-- app/dimensions.tsx | 6 +- app/lib/rocketchat/services/restApi.ts | 2 +- app/views/AddChannelTeamView.tsx | 4 - app/views/ScreenLockConfigView.tsx | 2 +- app/views/ThemeView.tsx | 4 +- .../stories/__snapshots__/List.storyshot | 2 +- 12 files changed, 80 insertions(+), 72 deletions(-) diff --git a/app/containers/List/ListContainer.tsx b/app/containers/List/ListContainer.tsx index deb9c8a71..349c71bee 100644 --- a/app/containers/List/ListContainer.tsx +++ b/app/containers/List/ListContainer.tsx @@ -11,7 +11,7 @@ const styles = StyleSheet.create({ }); interface IListContainer { - children: React.ReactNode; + children: (React.ReactElement | null)[] | React.ReactElement | null; testID?: string; } const ListContainer = React.memo(({ children, ...props }: IListContainer) => ( diff --git a/app/containers/List/ListHeader.tsx b/app/containers/List/ListHeader.tsx index d9cb58eb9..469d4cec6 100644 --- a/app/containers/List/ListHeader.tsx +++ b/app/containers/List/ListHeader.tsx @@ -25,6 +25,7 @@ interface IListHeader { const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) => { const { theme } = useTheme(); + return ( diff --git a/app/containers/List/ListIcon.tsx b/app/containers/List/ListIcon.tsx index 71e4fbdf2..c134b1690 100644 --- a/app/containers/List/ListIcon.tsx +++ b/app/containers/List/ListIcon.tsx @@ -3,11 +3,10 @@ import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'; import { themes } from '../../constants/colors'; import { CustomIcon } from '../../lib/Icons'; -import { withTheme } from '../../theme'; +import { useTheme } from '../../theme'; import { ICON_SIZE } from './constants'; interface IListIcon { - theme?: string; name: string; color?: string; style?: StyleProp; @@ -21,12 +20,16 @@ const styles = StyleSheet.create({ } }); -const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => ( - - - -)); +const ListIcon = React.memo(({ name, color, style, testID }: IListIcon) => { + const { theme } = useTheme(); + + return ( + + + + ); +}); ListIcon.displayName = 'List.Icon'; -export default withTheme(ListIcon); +export default ListIcon; diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx index 79b3dcbf7..c09266a41 100644 --- a/app/containers/List/ListItem.tsx +++ b/app/containers/List/ListItem.tsx @@ -4,11 +4,11 @@ import { I18nManager, StyleSheet, Text, View } from 'react-native'; import Touch from '../../utils/touch'; import { themes } from '../../constants/colors'; import sharedStyles from '../../views/Styles'; -import { withTheme } from '../../theme'; +import { useTheme } from '../../theme'; import I18n from '../../i18n'; import { Icon } from '.'; import { BASE_HEIGHT, ICON_SIZE, PADDING_HORIZONTAL } from './constants'; -import { withDimensions } from '../../dimensions'; +import { useDimensions } from '../../dimensions'; import { CustomIcon } from '../../lib/Icons'; const styles = StyleSheet.create({ @@ -59,13 +59,12 @@ interface IListItemContent { left?: () => JSX.Element | null; right?: () => JSX.Element | null; disabled?: boolean; + theme: string; testID?: string; - theme?: string; color?: string; translateTitle?: boolean; translateSubtitle?: boolean; showActionIndicator?: boolean; - fontScale?: number; alert?: boolean; } @@ -78,78 +77,85 @@ const Content = React.memo( left, right, color, - theme, - fontScale, alert, translateTitle = true, translateSubtitle = true, - showActionIndicator = false - }: IListItemContent) => ( - - {left ? {left()} : null} - - - - {translateTitle ? I18n.t(title) : title} - - {alert ? ( - + showActionIndicator = false, + theme + }: IListItemContent) => { + const { fontScale } = useDimensions(); + + return ( + + {left ? {left()} : null} + + + + {translateTitle ? I18n.t(title) : title} + + {alert ? ( + + ) : null} + + {subtitle ? ( + + {translateSubtitle ? I18n.t(subtitle) : subtitle} + ) : null} - {subtitle ? ( - - {translateSubtitle ? I18n.t(subtitle) : subtitle} - + {right || showActionIndicator ? ( + + {right ? right() : null} + {showActionIndicator ? : null} + ) : null} - {right || showActionIndicator ? ( - - {right ? right() : null} - {showActionIndicator ? : null} - - ) : null} - - ) + ); + } ); -interface IListButtonPress { - onPress?: Function; +interface IListButtonPress extends IListItemButton { + onPress: Function; } -interface IListItemButton extends IListButtonPress { +interface IListItemButton { title?: string; disabled?: boolean; - theme?: string; + theme: string; backgroundColor?: string; underlayColor?: string; } -const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => ( +const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListButtonPress) => ( onPress!(props.title)} - style={{ backgroundColor: backgroundColor || themes[props.theme!].backgroundColor }} + onPress={() => onPress(props.title)} + style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }} underlayColor={underlayColor} enabled={!props.disabled} - theme={props.theme!}> + theme={props.theme}> )); -interface IListItem extends IListItemContent, IListItemButton { +interface IListItem extends Omit, Omit { backgroundColor?: string; + onPress?: Function; } -const ListItem = React.memo(({ ...props }: IListItem) => { +const ListItem = React.memo(({ ...props }: IListItem) => { + const { theme } = useTheme(); + if (props.onPress) { - return