verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Evaluate TextInput component (#4181) 

* changing from `containers/TextInput` to `containers/TexInput/FormTextInput`

* changing from `presentation/TextInput` to `containers/TexInput/index`

* update storybook

* update status view after merge with develop

* removing `app/containers/__snapshots__/TextInput.stories.storyshot` in favor from `app/containers/TextInput/__snapshots`
This commit is contained in:
Alex Junior 2022-05-18 16:17:42 -03:00 committed by GitHub
parent 1a52c7dc57
commit 4a84e47cfa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 81 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/containers/MessageBox/index.tsx
View File

@ -9,7 +9,7 @@ import { Q } from '@nozbe/watermelondb';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler'; import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import { generateTriggerId } from '../../lib/methods/actions'; import { generateTriggerId } from '../../lib/methods/actions';
import TextInput, { IThemedTextInput } from '../../presentation/TextInput'; import TextInput, { IThemedTextInput } from '../TextInput';
import { userTyping as userTypingAction } from '../../actions/room'; import { userTyping as userTypingAction } from '../../actions/room';
import styles from './styles'; import styles from './styles';
import database from '../../lib/database'; import database from '../../lib/database';

2
app/containers/SearchBox.tsx
View File

@ -5,7 +5,7 @@ import Touchable from 'react-native-platform-touchable';
import { themes } from '../lib/constants'; import { themes } from '../lib/constants';
import I18n from '../i18n'; import I18n from '../i18n';
import { CustomIcon } from './CustomIcon'; import { CustomIcon } from './CustomIcon';
import TextInput from '../presentation/TextInput'; import TextInput from './TextInput';
import { useTheme } from '../theme'; import { useTheme } from '../theme';
import { isIOS } from '../utils/deviceInfo'; import { isIOS } from '../utils/deviceInfo';
import sharedStyles from '../views/Styles'; import sharedStyles from '../views/Styles';

2
app/containers/SearchHeader.tsx
View File

@ -5,7 +5,7 @@ import I18n from '../i18n';
import { useTheme } from '../theme'; import { useTheme } from '../theme';
import sharedStyles from '../views/Styles'; import sharedStyles from '../views/Styles';
import { themes } from '../lib/constants'; import { themes } from '../lib/constants';
import TextInput from '../presentation/TextInput'; import TextInput from './TextInput';
import { isIOS, isTablet } from '../utils/deviceInfo'; import { isIOS, isTablet } from '../utils/deviceInfo';
import { useOrientation } from '../dimensions'; import { useOrientation } from '../dimensions';

14
app/containers/TextInput.tsx → app/containers/TextInput/FormTextInput.tsx
View File

@ -2,12 +2,12 @@ import React from 'react';
import { StyleProp, StyleSheet, Text, TextInputProps, TextInput as RNTextInput, TextStyle, View, ViewStyle } from 'react-native'; import { StyleProp, StyleSheet, Text, TextInputProps, TextInput as RNTextInput, TextStyle, View, ViewStyle } from 'react-native';
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import sharedStyles from '../views/Styles'; import sharedStyles from '../../views/Styles';
import TextInput from '../presentation/TextInput'; import TextInput from './index';
import { themes } from '../lib/constants'; import { themes } from '../../lib/constants';
import { CustomIcon, TIconsName } from './CustomIcon'; import { CustomIcon, TIconsName } from '../CustomIcon';
import ActivityIndicator from './ActivityIndicator'; import ActivityIndicator from '../ActivityIndicator';
import { TSupportedThemes } from '../theme'; import { TSupportedThemes } from '../../theme';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
error: { error: {
@ -70,7 +70,7 @@ interface IRCTextInputState {
showPassword: boolean; showPassword: boolean;
} }
export default class RCTextInput extends React.PureComponent<IRCTextInputProps, IRCTextInputState> { export default class FormTextInput extends React.PureComponent<IRCTextInputProps, IRCTextInputState> {
static defaultProps = { static defaultProps = {
error: {}, error: {},
theme: 'light' theme: 'light'

6
app/containers/TextInput.stories.js → app/containers/TextInput/TextInput.stories.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import { storiesOf } from '@storybook/react-native'; import { storiesOf } from '@storybook/react-native';
import { View, StyleSheet } from 'react-native'; import { View, StyleSheet } from 'react-native';
import TextInput from './TextInput'; import FormTextInput from './FormTextInput';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
paddingHorizontal: { paddingHorizontal: {
@ -23,9 +23,9 @@ const theme = 'light';
stories.add('Short and Long Text', () => ( stories.add('Short and Long Text', () => (
<> <>
<View style={styles.paddingHorizontal}> <View style={styles.paddingHorizontal}>
<TextInput label='Short Text' placeholder='placeholder' value={item.name} theme={theme} /> <FormTextInput label='Short Text' placeholder='placeholder' value={item.name} theme={theme} />
<TextInput label='Long Text' placeholder='placeholder' value={item.longText} theme={theme} /> <FormTextInput label='Long Text' placeholder='placeholder' value={item.longText} theme={theme} />
</View> </View>
</> </>
)); ));

0
app/containers/__snapshots__/TextInput.stories.storyshot → app/containers/TextInput/__snapshots__/TextInput.stories.storyshot
View File

6
app/presentation/TextInput.tsx → app/containers/TextInput/index.tsx
View File

@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import { I18nManager, StyleProp, StyleSheet, TextInput, TextStyle } from 'react-native'; import { I18nManager, StyleProp, StyleSheet, TextInput, TextStyle } from 'react-native';
import { IRCTextInputProps } from '../containers/TextInput'; import { IRCTextInputProps } from './FormTextInput';
import { themes } from '../lib/constants'; import { themes } from '../../lib/constants';
import { TSupportedThemes } from '../theme'; import { TSupportedThemes } from '../../theme';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
input: { input: {

4
app/containers/TwoFactor/index.tsx
View File

@ -6,7 +6,7 @@ import Modal from 'react-native-modal';
import useDeepCompareEffect from 'use-deep-compare-effect'; import useDeepCompareEffect from 'use-deep-compare-effect';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import TextInput from '../TextInput'; import FormTextInput from '../TextInput/FormTextInput';
import I18n from '../../i18n'; import I18n from '../../i18n';
import EventEmitter from '../../utils/events'; import EventEmitter from '../../utils/events';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
@ -114,7 +114,7 @@ const TwoFactor = React.memo(({ isMasterDetail }: { isMasterDetail: boolean }) =
]}> ]}>
<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text> <Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>
{method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null} {method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null}
<TextInput <FormTextInput
value={code} value={code}
theme={theme} theme={theme}
inputRef={(e: any) => InteractionManager.runAfterInteractions(() => e?.getNativeRef()?.focus())} inputRef={(e: any) => InteractionManager.runAfterInteractions(() => e?.getNativeRef()?.focus())}

4
app/containers/UIKit/MultiSelect/index.tsx
View File

@ -13,7 +13,7 @@ import {
import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit'; import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
import Button from '../../Button'; import Button from '../../Button';
import TextInput from '../../TextInput'; import FormTextInput from '../../TextInput/FormTextInput';
import { textParser } from '../utils'; import { textParser } from '../utils';
import { themes } from '../../../lib/constants'; import { themes } from '../../../lib/constants';
import I18n from '../../../i18n'; import I18n from '../../../i18n';
@ -139,7 +139,7 @@ export const MultiSelect = React.memo(
return ( return (
<View style={[styles.modal, { backgroundColor: themes[theme].backgroundColor }]}> <View style={[styles.modal, { backgroundColor: themes[theme].backgroundColor }]}>
<View style={[styles.content, { backgroundColor: themes[theme].backgroundColor }]}> <View style={[styles.content, { backgroundColor: themes[theme].backgroundColor }]}>
<TextInput <FormTextInput
testID='multi-select-search' testID='multi-select-search'
onChangeText={onSearch || onSearchChange} onChangeText={onSearch || onSearchChange}
placeholder={I18n.t('Search')} placeholder={I18n.t('Search')}

4
app/containers/UIKit/index.tsx
View File

@ -5,7 +5,7 @@ import { BLOCK_CONTEXT, UiKitParserMessage, UiKitParserModal, uiKitMessage, uiKi
import Markdown, { MarkdownPreview } from '../markdown'; import Markdown, { MarkdownPreview } from '../markdown';
import Button from '../Button'; import Button from '../Button';
import TextInput from '../TextInput'; import FormTextInput from '../TextInput/FormTextInput';
import { textParser, useBlockContext } from './utils'; import { textParser, useBlockContext } from './utils';
import { themes } from '../../lib/constants'; import { themes } from '../../lib/constants';
import sharedStyles from '../../views/Styles'; import sharedStyles from '../../views/Styles';
@ -171,7 +171,7 @@ class ModalParser extends UiKitParserModal {
const { theme } = useContext(ThemeContext); const { theme } = useContext(ThemeContext);
const { multiline, actionId, placeholder } = element; const { multiline, actionId, placeholder } = element;
return ( return (
<TextInput <FormTextInput
key={actionId} key={actionId}
placeholder={plainText(placeholder)} placeholder={plainText(placeholder)}
multiline={multiline} multiline={multiline}

2
app/views/CreateChannelView.tsx
View File

@ -4,7 +4,7 @@ import { FlatList, ScrollView, StyleSheet, Switch, Text, View, SwitchProps } fro
import { dequal } from 'dequal'; import { dequal } from 'dequal';
import * as List from '../containers/List'; import * as List from '../containers/List';
import TextInput from '../presentation/TextInput'; import TextInput from '../containers/TextInput';
import Loading from '../containers/Loading'; import Loading from '../containers/Loading';
import { createChannelRequest } from '../actions/createChannel'; import { createChannelRequest } from '../actions/createChannel';
import { removeUser } from '../actions/selectedUsers'; import { removeUser } from '../actions/selectedUsers';

4
app/views/CreateDiscussionView/index.tsx
View File

@ -11,7 +11,7 @@ import * as HeaderButton from '../../containers/HeaderButton';
import StatusBar from '../../containers/StatusBar'; import StatusBar from '../../containers/StatusBar';
import { withTheme } from '../../theme'; import { withTheme } from '../../theme';
import { getUserSelector } from '../../selectors/login'; import { getUserSelector } from '../../selectors/login';
import TextInput from '../../containers/TextInput'; import FormTextInput from '../../containers/TextInput/FormTextInput';
import Navigation from '../../lib/navigation/appNavigation'; import Navigation from '../../lib/navigation/appNavigation';
import { createDiscussionRequest, ICreateDiscussionRequestData } from '../../actions/createDiscussion'; import { createDiscussionRequest, ICreateDiscussionRequestData } from '../../actions/createDiscussion';
import { showErrorAlert } from '../../utils/info'; import { showErrorAlert } from '../../utils/info';
@ -167,7 +167,7 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreate
serverVersion={serverVersion} serverVersion={serverVersion}
theme={theme} theme={theme}
/> />
<TextInput <FormTextInput
label={I18n.t('Discussion_name')} label={I18n.t('Discussion_name')}
testID='multi-select-discussion-name' testID='multi-select-discussion-name'
placeholder={I18n.t('A_meaningful_name_for_the_discussion_room')} placeholder={I18n.t('A_meaningful_name_for_the_discussion_room')}

4
app/views/E2EEncryptionSecurityView.tsx
View File

@ -10,7 +10,7 @@ import I18n from '../i18n';
import log, { events, logEvent } from '../utils/log'; import log, { events, logEvent } from '../utils/log';
import { TSupportedThemes, withTheme } from '../theme'; import { TSupportedThemes, withTheme } from '../theme';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
import TextInput from '../containers/TextInput'; import FormTextInput from '../containers/TextInput/FormTextInput';
import Button from '../containers/Button'; import Button from '../containers/Button';
import { getUserSelector } from '../selectors/login'; import { getUserSelector } from '../selectors/login';
import { PADDING_HORIZONTAL } from '../containers/List/constants'; import { PADDING_HORIZONTAL } from '../containers/List/constants';
@ -133,7 +133,7 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
<Text style={[styles.description, { color: themes[theme!].bodyText }]}> <Text style={[styles.description, { color: themes[theme!].bodyText }]}>
{I18n.t('E2E_encryption_change_password_description')} {I18n.t('E2E_encryption_change_password_description')}
</Text> </Text>
<TextInput <FormTextInput
inputRef={this.setNewPasswordRef} inputRef={this.setNewPasswordRef}
placeholder={I18n.t('New_Password')} placeholder={I18n.t('New_Password')}
returnKeyType='send' returnKeyType='send'

4
app/views/E2EEnterYourPasswordView.tsx
View File

@ -9,7 +9,7 @@ import Button from '../containers/Button';
import * as HeaderButton from '../containers/HeaderButton'; import * as HeaderButton from '../containers/HeaderButton';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
import StatusBar from '../containers/StatusBar'; import StatusBar from '../containers/StatusBar';
import TextInput from '../containers/TextInput'; import FormTextInput from '../containers/TextInput/FormTextInput';
import { IBaseScreen } from '../definitions'; import { IBaseScreen } from '../definitions';
import I18n from '../i18n'; import I18n from '../i18n';
import KeyboardView from '../containers/KeyboardView'; import KeyboardView from '../containers/KeyboardView';
@ -75,7 +75,7 @@ class E2EEnterYourPasswordView extends React.Component<TE2EEnterYourPasswordView
<SafeAreaView <SafeAreaView
style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]} style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}
testID='e2e-enter-your-password-view'> testID='e2e-enter-your-password-view'>
<TextInput <FormTextInput
inputRef={(e: RNTextInput) => { inputRef={(e: RNTextInput) => {
this.passwordInput = e; this.passwordInput = e;
}} }}

4
app/views/ForgotPasswordView.tsx
View File

@ -3,7 +3,7 @@ import { Text } from 'react-native';
import Button from '../containers/Button'; import Button from '../containers/Button';
import FormContainer, { FormContainerInner } from '../containers/FormContainer'; import FormContainer, { FormContainerInner } from '../containers/FormContainer';
import TextInput from '../containers/TextInput'; import FormTextInput from '../containers/TextInput/FormTextInput';
import I18n from '../i18n'; import I18n from '../i18n';
import { themes } from '../lib/constants'; import { themes } from '../lib/constants';
import { Services } from '../lib/services'; import { Services } from '../lib/services';
@ -92,7 +92,7 @@ class ForgotPasswordView extends React.Component<IForgotPasswordViewProps, IForg
<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: themes[theme].titleText }]}> <Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: themes[theme].titleText }]}>
{I18n.t('Forgot_password')} {I18n.t('Forgot_password')}
</Text> </Text>
<TextInput <FormTextInput
autoFocus autoFocus
placeholder={I18n.t('Email')} placeholder={I18n.t('Email')}
keyboardType='email-address' keyboardType='email-address'

4
app/views/InviteUsersView/index.tsx
View File

@ -8,7 +8,7 @@ import Button from '../../containers/Button';
import Markdown from '../../containers/markdown'; import Markdown from '../../containers/markdown';
import SafeAreaView from '../../containers/SafeAreaView'; import SafeAreaView from '../../containers/SafeAreaView';
import StatusBar from '../../containers/StatusBar'; import StatusBar from '../../containers/StatusBar';
import RCTextInput from '../../containers/TextInput'; import FormTextInput from '../../containers/TextInput/FormTextInput';
import { IApplicationState, IBaseScreen } from '../../definitions'; import { IApplicationState, IBaseScreen } from '../../definitions';
import I18n from '../../i18n'; import I18n from '../../i18n';
import { ChatsStackParamList } from '../../stacks/types'; import { ChatsStackParamList } from '../../stacks/types';
@ -92,7 +92,7 @@ const InviteUsersView = ({ route, navigation }: IInviteUsersViewProps): React.Re
showsVerticalScrollIndicator={false}> showsVerticalScrollIndicator={false}>
<StatusBar /> <StatusBar />
<View style={styles.innerContainer}> <View style={styles.innerContainer}>
<RCTextInput label={I18n.t('Invite_Link')} theme={theme} value={invite && invite.url} editable={false} /> <FormTextInput label={I18n.t('Invite_Link')} theme={theme} value={invite && invite.url} editable={false} />
{renderExpiration()} {renderExpiration()}
<View style={[styles.divider, { backgroundColor: colors.separatorColor }]} /> <View style={[styles.divider, { backgroundColor: colors.separatorColor }]} />
<Button title={I18n.t('Share_Link')} type='primary' onPress={share} theme={theme} /> <Button title={I18n.t('Share_Link')} type='primary' onPress={share} theme={theme} />

14
app/views/LivechatEditView.tsx
View File

@ -7,7 +7,7 @@ import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
import { TSupportedThemes, withTheme } from '../theme'; import { TSupportedThemes, withTheme } from '../theme';
import { themes } from '../lib/constants'; import { themes } from '../lib/constants';
import TextInput from '../containers/TextInput'; import FormTextInput from '../containers/TextInput/FormTextInput';
import KeyboardView from '../containers/KeyboardView'; import KeyboardView from '../containers/KeyboardView';
import I18n from '../i18n'; import I18n from '../i18n';
import { LISTENER } from '../containers/Toast'; import { LISTENER } from '../containers/Toast';
@ -193,7 +193,7 @@ const LivechatEditView = ({
<ScrollView {...scrollPersistTaps} style={styles.container}> <ScrollView {...scrollPersistTaps} style={styles.container}>
<SafeAreaView> <SafeAreaView>
<Title title={visitor?.username} theme={theme} /> <Title title={visitor?.username} theme={theme} />
<TextInput <FormTextInput
label={I18n.t('Name')} label={I18n.t('Name')}
defaultValue={visitor?.name} defaultValue={visitor?.name}
onChangeText={text => onChangeText('name', text)} onChangeText={text => onChangeText('name', text)}
@ -203,7 +203,7 @@ const LivechatEditView = ({
theme={theme} theme={theme}
editable={!!permissions[0]} editable={!!permissions[0]}
/> />
<TextInput <FormTextInput
label={I18n.t('Email')} label={I18n.t('Email')}
inputRef={e => { inputRef={e => {
inputs.name = e; inputs.name = e;
@ -216,7 +216,7 @@ const LivechatEditView = ({
theme={theme} theme={theme}
editable={!!permissions[0]} editable={!!permissions[0]}
/> />
<TextInput <FormTextInput
label={I18n.t('Phone')} label={I18n.t('Phone')}
inputRef={e => { inputRef={e => {
inputs.phone = e; inputs.phone = e;
@ -236,7 +236,7 @@ const LivechatEditView = ({
editable={!!permissions[0]} editable={!!permissions[0]}
/> />
{Object.entries(customFields?.visitor || {}).map(([key, value], index, array) => ( {Object.entries(customFields?.visitor || {}).map(([key, value], index, array) => (
<TextInput <FormTextInput
label={key} label={key}
defaultValue={value} defaultValue={value}
inputRef={e => { inputRef={e => {
@ -254,7 +254,7 @@ const LivechatEditView = ({
/> />
))} ))}
<Title title={I18n.t('Conversation')} theme={theme} /> <Title title={I18n.t('Conversation')} theme={theme} />
<TextInput <FormTextInput
label={I18n.t('Topic')} label={I18n.t('Topic')}
inputRef={e => { inputRef={e => {
inputs.topic = e; inputs.topic = e;
@ -280,7 +280,7 @@ const LivechatEditView = ({
/> />
{Object.entries(customFields?.livechat || {}).map(([key, value], index, array: any) => ( {Object.entries(customFields?.livechat || {}).map(([key, value], index, array: any) => (
<TextInput <FormTextInput
label={key} label={key}
defaultValue={value} defaultValue={value}
inputRef={e => { inputRef={e => {

6
app/views/LoginView.tsx
View File

@ -9,7 +9,7 @@ import Button from '../containers/Button';
import FormContainer, { FormContainerInner } from '../containers/FormContainer'; import FormContainer, { FormContainerInner } from '../containers/FormContainer';
import * as HeaderButton from '../containers/HeaderButton'; import * as HeaderButton from '../containers/HeaderButton';
import LoginServices from '../containers/LoginServices'; import LoginServices from '../containers/LoginServices';
import TextInput from '../containers/TextInput'; import FormTextInput from '../containers/TextInput/FormTextInput';
import { IApplicationState, IBaseScreen } from '../definitions'; import { IApplicationState, IBaseScreen } from '../definitions';
import I18n from '../i18n'; import I18n from '../i18n';
import { OutsideParamList } from '../stacks/types'; import { OutsideParamList } from '../stacks/types';
@ -157,7 +157,7 @@ class LoginView extends React.Component<ILoginViewProps, ILoginViewState> {
return ( return (
<> <>
<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Login')}</Text> <Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Login')}</Text>
<TextInput <FormTextInput
label={I18n.t('Username_or_email')} label={I18n.t('Username_or_email')}
containerStyle={styles.inputContainer} containerStyle={styles.inputContainer}
placeholder={Accounts_EmailOrUsernamePlaceholder || I18n.t('Username_or_email')} placeholder={Accounts_EmailOrUsernamePlaceholder || I18n.t('Username_or_email')}
@ -173,7 +173,7 @@ class LoginView extends React.Component<ILoginViewProps, ILoginViewState> {
theme={theme} theme={theme}
value={user} value={user}
/> />
<TextInput <FormTextInput
label={I18n.t('Password')} label={I18n.t('Password')}
containerStyle={styles.inputContainer} containerStyle={styles.inputContainer}
inputRef={e => { inputRef={e => {

4
app/views/NewServerView/ServerInput/index.tsx
View File

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { FlatList, StyleSheet, TextInputProps, View } from 'react-native'; import { FlatList, StyleSheet, TextInputProps, View } from 'react-native';
import TextInput from '../../../containers/TextInput'; import FormTextInput from '../../../containers/TextInput/FormTextInput';
import * as List from '../../../containers/List'; import * as List from '../../../containers/List';
import { themes } from '../../../lib/constants'; import { themes } from '../../../lib/constants';
import I18n from '../../../i18n'; import I18n from '../../../i18n';
@ -50,7 +50,7 @@ const ServerInput = ({
const [focused, setFocused] = useState(false); const [focused, setFocused] = useState(false);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<TextInput <FormTextInput
label={I18n.t('Enter_workspace_URL')} label={I18n.t('Enter_workspace_URL')}
placeholder={I18n.t('Workspace_URL_Example')} placeholder={I18n.t('Workspace_URL_Example')}
containerStyle={styles.inputContainer} containerStyle={styles.inputContainer}

16
app/views/ProfileView/index.tsx
View File

@ -16,7 +16,7 @@ import scrollPersistTaps from '../../utils/scrollPersistTaps';
import { showConfirmationAlert, showErrorAlert } from '../../utils/info'; import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
import { LISTENER } from '../../containers/Toast'; import { LISTENER } from '../../containers/Toast';
import EventEmitter from '../../utils/events'; import EventEmitter from '../../utils/events';
import RCTextInput from '../../containers/TextInput'; import FormTextInput from '../../containers/TextInput/FormTextInput';
import log, { events, logEvent } from '../../utils/log'; import log, { events, logEvent } from '../../utils/log';
import I18n from '../../i18n'; import I18n from '../../i18n';
import Button from '../../containers/Button'; import Button from '../../containers/Button';
@ -412,7 +412,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
this.setState({ customFields: { ...customFields, ...newValue } }); this.setState({ customFields: { ...customFields, ...newValue } });
}} }}
value={customFields[key]}> value={customFields[key]}>
<RCTextInput <FormTextInput
inputRef={e => { inputRef={e => {
// @ts-ignore // @ts-ignore
this[key] = e; this[key] = e;
@ -428,7 +428,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
} }
return ( return (
<RCTextInput <FormTextInput
inputRef={e => { inputRef={e => {
// @ts-ignore // @ts-ignore
this[key] = e; this[key] = e;
@ -499,7 +499,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
<View style={styles.avatarContainer} testID='profile-view-avatar'> <View style={styles.avatarContainer} testID='profile-view-avatar'>
<Avatar text={user.username} avatar={avatar?.url} isStatic={avatar?.url} size={100} /> <Avatar text={user.username} avatar={avatar?.url} isStatic={avatar?.url} size={100} />
</View> </View>
<RCTextInput <FormTextInput
editable={Accounts_AllowRealNameChange} editable={Accounts_AllowRealNameChange}
inputStyle={[!Accounts_AllowRealNameChange && styles.disabled]} inputStyle={[!Accounts_AllowRealNameChange && styles.disabled]}
inputRef={e => { inputRef={e => {
@ -515,7 +515,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
testID='profile-view-name' testID='profile-view-name'
theme={theme} theme={theme}
/> />
<RCTextInput <FormTextInput
editable={Accounts_AllowUsernameChange} editable={Accounts_AllowUsernameChange}
inputStyle={[!Accounts_AllowUsernameChange && styles.disabled]} inputStyle={[!Accounts_AllowUsernameChange && styles.disabled]}
inputRef={e => { inputRef={e => {
@ -531,7 +531,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
testID='profile-view-username' testID='profile-view-username'
theme={theme} theme={theme}
/> />
<RCTextInput <FormTextInput
editable={Accounts_AllowEmailChange} editable={Accounts_AllowEmailChange}
inputStyle={[!Accounts_AllowEmailChange && styles.disabled]} inputStyle={[!Accounts_AllowEmailChange && styles.disabled]}
inputRef={e => { inputRef={e => {
@ -549,7 +549,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
testID='profile-view-email' testID='profile-view-email'
theme={theme} theme={theme}
/> />
<RCTextInput <FormTextInput
editable={Accounts_AllowPasswordChange} editable={Accounts_AllowPasswordChange}
inputStyle={[!Accounts_AllowPasswordChange && styles.disabled]} inputStyle={[!Accounts_AllowPasswordChange && styles.disabled]}
inputRef={e => { inputRef={e => {
@ -573,7 +573,7 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
theme={theme} theme={theme}
/> />
{this.renderCustomFields()} {this.renderCustomFields()}
<RCTextInput <FormTextInput
editable={Accounts_AllowUserAvatarChange} editable={Accounts_AllowUserAvatarChange}
inputStyle={[!Accounts_AllowUserAvatarChange && styles.disabled]} inputStyle={[!Accounts_AllowUserAvatarChange && styles.disabled]}
inputRef={e => { inputRef={e => {

14
app/views/RegisterView.tsx
View File

@ -9,7 +9,7 @@ import Button from '../containers/Button';
import FormContainer, { FormContainerInner } from '../containers/FormContainer'; import FormContainer, { FormContainerInner } from '../containers/FormContainer';
import * as HeaderButton from '../containers/HeaderButton'; import * as HeaderButton from '../containers/HeaderButton';
import LoginServices from '../containers/LoginServices'; import LoginServices from '../containers/LoginServices';
import TextInput from '../containers/TextInput'; import FormTextInput from '../containers/TextInput/FormTextInput';
import { IApplicationState, IBaseScreen } from '../definitions'; import { IApplicationState, IBaseScreen } from '../definitions';
import I18n from '../i18n'; import I18n from '../i18n';
import { getShowLoginButton } from '../selectors/login'; import { getShowLoginButton } from '../selectors/login';
@ -187,7 +187,7 @@ class RegisterView extends React.Component<IProps, any> {
this.setState({ customFields: { ...customFields, ...newValue } }); this.setState({ customFields: { ...customFields, ...newValue } });
}} }}
value={customFields[key]}> value={customFields[key]}>
<TextInput <FormTextInput
inputRef={e => { inputRef={e => {
// @ts-ignore // @ts-ignore
this[key] = e; this[key] = e;
@ -202,7 +202,7 @@ class RegisterView extends React.Component<IProps, any> {
} }
return ( return (
<TextInput <FormTextInput
inputRef={e => { inputRef={e => {
// @ts-ignore // @ts-ignore
this[key] = e; this[key] = e;
@ -243,7 +243,7 @@ class RegisterView extends React.Component<IProps, any> {
<FormContainerInner> <FormContainerInner>
<LoginServices navigation={navigation} theme={theme} separator /> <LoginServices navigation={navigation} theme={theme} separator />
<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Sign_Up')}</Text> <Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Sign_Up')}</Text>
<TextInput <FormTextInput
label={I18n.t('Name')} label={I18n.t('Name')}
containerStyle={styles.inputContainer} containerStyle={styles.inputContainer}
placeholder={I18n.t('Name')} placeholder={I18n.t('Name')}
@ -255,7 +255,7 @@ class RegisterView extends React.Component<IProps, any> {
testID='register-view-name' testID='register-view-name'
theme={theme} theme={theme}
/> />
<TextInput <FormTextInput
label={I18n.t('Username')} label={I18n.t('Username')}
containerStyle={styles.inputContainer} containerStyle={styles.inputContainer}
inputRef={e => { inputRef={e => {
@ -270,7 +270,7 @@ class RegisterView extends React.Component<IProps, any> {
testID='register-view-username' testID='register-view-username'
theme={theme} theme={theme}
/> />
<TextInput <FormTextInput
label={I18n.t('Email')} label={I18n.t('Email')}
containerStyle={styles.inputContainer} containerStyle={styles.inputContainer}
inputRef={e => { inputRef={e => {
@ -286,7 +286,7 @@ class RegisterView extends React.Component<IProps, any> {
testID='register-view-email' testID='register-view-email'
theme={theme} theme={theme}
/> />
<TextInput <FormTextInput
label={I18n.t('Password')} label={I18n.t('Password')}
containerStyle={styles.inputContainer} containerStyle={styles.inputContainer}
inputRef={e => { inputRef={e => {

12
app/views/RoomInfoEditView/index.tsx
View File

@ -14,7 +14,7 @@ import Avatar from '../../containers/Avatar';
import Loading from '../../containers/Loading'; import Loading from '../../containers/Loading';
import SafeAreaView from '../../containers/SafeAreaView'; import SafeAreaView from '../../containers/SafeAreaView';
import StatusBar from '../../containers/StatusBar'; import StatusBar from '../../containers/StatusBar';
import RCTextInput from '../../containers/TextInput'; import FormTextInput from '../../containers/TextInput/FormTextInput';
import { LISTENER } from '../../containers/Toast'; import { LISTENER } from '../../containers/Toast';
import { MultiSelect } from '../../containers/UIKit/MultiSelect'; import { MultiSelect } from '../../containers/UIKit/MultiSelect';
import { import {
@ -585,7 +585,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
)} )}
</Avatar> </Avatar>
</TouchableOpacity> </TouchableOpacity>
<RCTextInput <FormTextInput
inputRef={e => { inputRef={e => {
this.name = e; this.name = e;
}} }}
@ -599,7 +599,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
theme={theme} theme={theme}
testID='room-info-edit-view-name' testID='room-info-edit-view-name'
/> />
<RCTextInput <FormTextInput
inputRef={e => { inputRef={e => {
this.description = e; this.description = e;
}} }}
@ -612,7 +612,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
theme={theme} theme={theme}
testID='room-info-edit-view-description' testID='room-info-edit-view-description'
/> />
<RCTextInput <FormTextInput
inputRef={e => { inputRef={e => {
this.topic = e; this.topic = e;
}} }}
@ -625,7 +625,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
theme={theme} theme={theme}
testID='room-info-edit-view-topic' testID='room-info-edit-view-topic'
/> />
<RCTextInput <FormTextInput
inputRef={e => { inputRef={e => {
this.announcement = e; this.announcement = e;
}} }}
@ -638,7 +638,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
theme={theme} theme={theme}
testID='room-info-edit-view-announcement' testID='room-info-edit-view-announcement'
/> />
<RCTextInput <FormTextInput
inputRef={e => { inputRef={e => {
this.joinCode = e; this.joinCode = e;
}} }}

4
app/views/RoomView/JoinCode.tsx
View File

@ -5,7 +5,7 @@ import { connect } from 'react-redux';
import I18n from '../../i18n'; import I18n from '../../i18n';
import Button from '../../containers/Button'; import Button from '../../containers/Button';
import TextInput from '../../containers/TextInput'; import FormTextInput from '../../containers/TextInput/FormTextInput';
import sharedStyles from '../Styles'; import sharedStyles from '../Styles';
import { themes } from '../../lib/constants'; import { themes } from '../../lib/constants';
import { IApplicationState } from '../../definitions'; import { IApplicationState } from '../../definitions';
@ -86,7 +86,7 @@ const JoinCode = React.memo(
{ backgroundColor: themes[theme].backgroundColor } { backgroundColor: themes[theme].backgroundColor }
]}> ]}>
<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Insert_Join_Code')}</Text> <Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Insert_Join_Code')}</Text>
<TextInput <FormTextInput
value={code} value={code}
theme={theme} theme={theme}
// TODO: find a way to type this ref // TODO: find a way to type this ref

2
app/views/RoomsListView/Header/Header.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { StyleSheet, Text, TextInputProps, TouchableOpacity, TouchableOpacityProps, View } from 'react-native'; import { StyleSheet, Text, TextInputProps, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
import TextInput from '../../../presentation/TextInput'; import TextInput from '../../../containers/TextInput';
import I18n from '../../../i18n'; import I18n from '../../../i18n';
import sharedStyles from '../../Styles'; import sharedStyles from '../../Styles';
import { themes } from '../../../lib/constants'; import { themes } from '../../../lib/constants';

4
app/views/SearchMessagesView/index.tsx
View File

@ -8,7 +8,7 @@ import { dequal } from 'dequal';
import { ISubscription, SubscriptionType } from '../../definitions/ISubscription'; import { ISubscription, SubscriptionType } from '../../definitions/ISubscription';
import { IAttachment } from '../../definitions/IAttachment'; import { IAttachment } from '../../definitions/IAttachment';
import RCTextInput from '../../containers/TextInput'; import FormTextInput from '../../containers/TextInput/FormTextInput';
import ActivityIndicator from '../../containers/ActivityIndicator'; import ActivityIndicator from '../../containers/ActivityIndicator';
import Markdown from '../../containers/markdown'; import Markdown from '../../containers/markdown';
import debounce from '../../utils/debounce'; import debounce from '../../utils/debounce';
@ -322,7 +322,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='search-messages-view'> <SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='search-messages-view'>
<StatusBar /> <StatusBar />
<View style={styles.searchContainer}> <View style={styles.searchContainer}>
<RCTextInput <FormTextInput
autoFocus autoFocus
label={I18n.t('Search')} label={I18n.t('Search')}
onChangeText={this.search} onChangeText={this.search}

4
app/views/SendEmailConfirmationView.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { OutsideParamList } from '../stacks/types'; import { OutsideParamList } from '../stacks/types';
import TextInput from '../containers/TextInput'; import FormTextInput from '../containers/TextInput/FormTextInput';
import Button from '../containers/Button'; import Button from '../containers/Button';
import { showErrorAlert } from '../utils/info'; import { showErrorAlert } from '../utils/info';
import isValidEmail from '../utils/isValidEmail'; import isValidEmail from '../utils/isValidEmail';
@ -59,7 +59,7 @@ const SendEmailConfirmationView = ({ navigation, route }: ISendEmailConfirmation
return ( return (
<FormContainer testID='send-email-confirmation-view'> <FormContainer testID='send-email-confirmation-view'>
<FormContainerInner> <FormContainerInner>
<TextInput <FormTextInput
autoFocus autoFocus
placeholder={I18n.t('Email')} placeholder={I18n.t('Email')}
keyboardType='email-address' keyboardType='email-address'

4
app/views/SetUsernameView.tsx
View File

@ -11,7 +11,7 @@ import { themes } from '../lib/constants';
import Button from '../containers/Button'; import Button from '../containers/Button';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
import StatusBar from '../containers/StatusBar'; import StatusBar from '../containers/StatusBar';
import TextInput from '../containers/TextInput'; import FormTextInput from '../containers/TextInput/FormTextInput';
import { IApplicationState } from '../definitions'; import { IApplicationState } from '../definitions';
import { SetUsernameStackParamList } from '../definitions/navigationTypes'; import { SetUsernameStackParamList } from '../definitions/navigationTypes';
import I18n from '../i18n'; import I18n from '../i18n';
@ -118,7 +118,7 @@ class SetUsernameView extends React.Component<ISetUsernameViewProps, ISetUsernam
<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular, { color: themes[theme].titleText }]}> <Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular, { color: themes[theme].titleText }]}>
{I18n.t('Set_username_subtitle')} {I18n.t('Set_username_subtitle')}
</Text> </Text>
<TextInput <FormTextInput
autoFocus autoFocus
placeholder={I18n.t('Username')} placeholder={I18n.t('Username')}
returnKeyType='send' returnKeyType='send'

2
app/views/ShareListView/Header/Header.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { StyleSheet, Text, View } from 'react-native'; import { StyleSheet, Text, View } from 'react-native';
import TextInput from '../../../presentation/TextInput'; import TextInput from '../../../containers/TextInput';
import I18n from '../../../i18n'; import I18n from '../../../i18n';
import { themes } from '../../../lib/constants'; import { themes } from '../../../lib/constants';
import sharedStyles from '../../Styles'; import sharedStyles from '../../Styles';

4
app/views/ShareView/index.tsx
View File

@ -14,7 +14,7 @@ import * as HeaderButton from '../../containers/HeaderButton';
import { isBlocked } from '../../utils/room'; import { isBlocked } from '../../utils/room';
import { isReadOnly } from '../../utils/isReadOnly'; import { isReadOnly } from '../../utils/isReadOnly';
import { TSupportedThemes, withTheme } from '../../theme'; import { TSupportedThemes, withTheme } from '../../theme';
import TextInput from '../../containers/TextInput'; import FormTextInput from '../../containers/TextInput/FormTextInput';
import MessageBox from '../../containers/MessageBox'; import MessageBox from '../../containers/MessageBox';
import SafeAreaView from '../../containers/SafeAreaView'; import SafeAreaView from '../../containers/SafeAreaView';
import { getUserSelector } from '../../selectors/login'; import { getUserSelector } from '../../selectors/login';
@ -332,7 +332,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
} }
return ( return (
<TextInput <FormTextInput
containerStyle={styles.inputContainer} containerStyle={styles.inputContainer}
inputStyle={[styles.input, styles.textInput, { backgroundColor: themes[theme].focusedBackground }]} inputStyle={[styles.input, styles.textInput, { backgroundColor: themes[theme].focusedBackground }]}
placeholder='' placeholder=''

4
app/views/StatusView/index.tsx
View File

@ -9,7 +9,7 @@ import * as List from '../../containers/List';
import Loading from '../../containers/Loading'; import Loading from '../../containers/Loading';
import SafeAreaView from '../../containers/SafeAreaView'; import SafeAreaView from '../../containers/SafeAreaView';
import StatusIcon from '../../containers/Status/Status'; import StatusIcon from '../../containers/Status/Status';
import TextInput from '../../containers/TextInput'; import FormTextInput from '../../containers/TextInput/FormTextInput';
import { IApplicationState, TUserStatus } from '../../definitions'; import { IApplicationState, TUserStatus } from '../../definitions';
import I18n from '../../i18n'; import I18n from '../../i18n';
import { showToast } from '../../lib/methods/helpers/showToast'; import { showToast } from '../../lib/methods/helpers/showToast';
@ -162,7 +162,7 @@ const StatusView = (): React.ReactElement => {
renderItem={({ item }) => <Status status={item} statusText={statusText} />} renderItem={({ item }) => <Status status={item} statusText={statusText} />}
ListHeaderComponent={ ListHeaderComponent={
<> <>
<TextInput <FormTextInput
theme={theme} theme={theme}
value={statusText} value={statusText}
containerStyle={styles.inputContainer} containerStyle={styles.inputContainer}

2
storybook/stories/index.js
View File

@ -18,7 +18,7 @@ import '../../app/containers/BackgroundContainer/index.stories.js';
import '../../app/containers/RoomHeader/RoomHeader.stories.js'; import '../../app/containers/RoomHeader/RoomHeader.stories.js';
import '../../app/views/RoomView/LoadMore/LoadMore.stories'; import '../../app/views/RoomView/LoadMore/LoadMore.stories';
import '../../app/views/CannedResponsesListView/CannedResponseItem.stories'; import '../../app/views/CannedResponsesListView/CannedResponseItem.stories';
import '../../app/containers/TextInput.stories'; import '../../app/containers/TextInput/TextInput.stories';
import '../../app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories'; import '../../app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories';
// Change here to see themed storybook // Change here to see themed storybook