From 020c90503b0f923d412a2b8db3427caf742facdb Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 11 Nov 2021 17:40:56 -0500 Subject: [PATCH 01/49] translations --- src/languages/en.js | 9 +++++++++ src/languages/es.js | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/src/languages/en.js b/src/languages/en.js index deb4bba810b4..0f34ad343f61 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -774,4 +774,13 @@ export default { emojiPicker: { skinTonePickerLabel: 'Change default skin tone', }, + newRoomPage: { + newRoom: 'New Room', + roomName: 'Room Name', + visibility: 'Visibility', + restrictedDescription: 'People in your workspace are able to find this room using Search', + privateDescription: 'Only people invited to this room are able to find it', + createRoom: 'Create Room', + roomAlreadyExists: 'A room with this name already exists', + }, }; diff --git a/src/languages/es.js b/src/languages/es.js index b40c910075b1..588fc0158354 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -776,4 +776,13 @@ export default { emojiPicker: { skinTonePickerLabel: 'Elige el tono de piel por defecto', }, + newRoomPage: { + newRoom: 'Nueva sala de chat', + roomName: 'Nombre de la sala', + visibility: 'Visibilidad', + restrictedDescription: 'Sólo las personas en tu espacio de trabajo pueden encontrar esta sala a través de "Buscar"', + privateDescription: 'Sólo las personas que están invitadas a esta sala pueden encontrarla', + createRoom: 'Crea una sala de chat', + roomAlreadyExists: 'Ya existe una sala con este nombre', + }, }; From d3de84840e48ada49865ff4d6631992fd70c63b4 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Thu, 11 Nov 2021 17:52:20 -0500 Subject: [PATCH 02/49] setup navigation --- src/ROUTES.js | 2 + .../AppNavigator/ModalStackNavigators.js | 5 ++ src/libs/Navigation/linkingConfig.js | 3 ++ src/pages/workspace/WorkspaceNewRoomPage.js | 46 +++++++++++++++++++ 4 files changed, 56 insertions(+) create mode 100644 src/pages/workspace/WorkspaceNewRoomPage.js diff --git a/src/ROUTES.js b/src/ROUTES.js index 9facdbd64a1b..152b3681eecd 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -84,6 +84,7 @@ export default { WORKSPACE_TRAVEL: 'workspace/:policyID/travel', WORKSPACE_MEMBERS: 'workspace/:policyID/members', WORKSPACE_BANK_ACCOUNT: 'workspace/:policyID/bank-account', + WORKSPACE_NEW_ROOM: 'workspace/:policyID/new-room', getWorkspaceInitialRoute: policyID => `workspace/${policyID}`, getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`, getWorkspaceSettingsRoute: policyID => `workspace/${policyID}/settings`, @@ -96,6 +97,7 @@ export default { getWorkspaceBankAccountRoute: policyID => `workspace/${policyID}/bank-account`, getRequestCallRoute: taskID => `request-call/${taskID}`, REQUEST_CALL: 'request-call/:taskID', + getNewRoomRoute: policyID => `workspace/${policyID}/new-room`, /** * @param {String} route diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 4b998a632ee4..1f2ec68439d0 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -37,6 +37,7 @@ import WorkspaceBillsPage from '../../../pages/workspace/bills/WorkspaceBillsPag import WorkspaceTravelPage from '../../../pages/workspace/travel/WorkspaceTravelPage'; import WorkspaceMembersPage from '../../../pages/workspace/WorkspaceMembersPage'; import WorkspaceBankAccountPage from '../../../pages/workspace/WorkspaceBankAccountPage'; +import WorkspaceNewRoomPage from '../../../pages/workspace/WorkspaceNewRoomPage'; import CONST from '../../../CONST'; const defaultSubRouteOptions = { @@ -222,6 +223,10 @@ const SettingsModalStackNavigator = createModalStackNavigator([ Component: WorkspaceInvitePage, name: 'Workspace_Invite', }, + { + Component: WorkspaceNewRoomPage, + name: 'Workspace_NewRoom', + }, { Component: ReimbursementAccountPage, name: 'ReimbursementAccount', diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index a5a13343b0c2..11d78505c58b 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -102,6 +102,9 @@ export default { Workspace_Invite: { path: ROUTES.WORKSPACE_INVITE, }, + Workspace_NewRoom: { + path: ROUTES.WORKSPACE_NEW_ROOM, + }, ReimbursementAccount: { path: ROUTES.BANK_ACCOUNT, exact: true, diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js new file mode 100644 index 000000000000..fe39e7847051 --- /dev/null +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -0,0 +1,46 @@ +import React from 'react'; +import {View, Text} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import withFullPolicy, {fullPolicyDefaultProps, fullPolicyPropTypes} from './withFullPolicy'; +import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; +import ONYXKEYS from '../../CONST'; +import compose from '../../libs/compose'; + +const propTypes = { + ...fullPolicyPropTypes, + + ...withLocalizePropTypes, +}; +const defaultProps = { + betas: [], + ...fullPolicyDefaultProps, +}; + +class WorkspaceNewRoomPage extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( + + Hi + + ); + } +} + +WorkspaceNewRoomPage.propTypes = propTypes; +WorkspaceNewRoomPage.defaultProps = defaultProps; + +export default compose( + withFullPolicy, + withOnyx({ + betas: { + key: ONYXKEYS.BETAS, + }, + currencyList: {key: ONYXKEYS.CURRENCY_LIST}, + }), + withLocalize, +)(WorkspaceNewRoomPage); + From cb21b63bbc6656410e01c084f52eb3763f6693b7 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Mon, 15 Nov 2021 18:28:47 -0800 Subject: [PATCH 03/49] more translations --- src/languages/en.js | 1 + src/languages/es.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/languages/en.js b/src/languages/en.js index 0f34ad343f61..ebfabc7a5b9a 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -782,5 +782,6 @@ export default { privateDescription: 'Only people invited to this room are able to find it', createRoom: 'Create Room', roomAlreadyExists: 'A room with this name already exists', + social: 'social', }, }; diff --git a/src/languages/es.js b/src/languages/es.js index 588fc0158354..e407fce53dbd 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -784,5 +784,6 @@ export default { privateDescription: 'Sólo las personas que están invitadas a esta sala pueden encontrarla', createRoom: 'Crea una sala de chat', roomAlreadyExists: 'Ya existe una sala con este nombre', + social: 'TODO', }, }; From ad233af59e2b22d591a316a7b051d25cc2e6fd10 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Mon, 15 Nov 2021 18:28:58 -0800 Subject: [PATCH 04/49] add styles for textInputWithPrefix --- src/styles/styles.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/styles/styles.js b/src/styles/styles.js index 4bdc26019b56..084907079ba2 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -560,6 +560,24 @@ const styles = { textAlignVertical: 'center', }, + textInputWithPrefix: { + textInput: { + outlineStyle: 'none', + color: themeColors.text, + fontFamily: fontFamily.GTA, + fontSize: variables.fontSizeNormal, + textAlignVertical: 'center', + flex: 1, + }, + prefix: { + paddingRight: 12, + color: themeColors.text, + fontFamily: fontFamily.GTA, + fontSize: variables.fontSizeNormal, + textAlignVertical: 'center', + }, + }, + expensiPickerContainer: { borderWidth: 0, borderRadius: variables.componentBorderRadiusNormal, From 06480a3638b73d1119359b855b128b1000d7853c Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Mon, 15 Nov 2021 18:29:16 -0800 Subject: [PATCH 05/49] Add TextInputWithPrefix (modify TextInputWithLabel) --- src/components/TextInputWithLabel.js | 27 ++++++++----- src/components/TextInputWithPrefix.js | 58 +++++++++++++++++++++++++++ 2 files changed, 74 insertions(+), 11 deletions(-) create mode 100644 src/components/TextInputWithPrefix.js diff --git a/src/components/TextInputWithLabel.js b/src/components/TextInputWithLabel.js index 310a4a91ca31..f46a99b702f8 100644 --- a/src/components/TextInputWithLabel.js +++ b/src/components/TextInputWithLabel.js @@ -1,10 +1,11 @@ import _ from 'underscore'; import React from 'react'; -import {View, TextInput} from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import styles from '../styles/styles'; import Text from './Text'; import TextLink from './TextLink'; +import TextInputWithPrefix from './TextInputWithPrefix'; const propTypes = { /** Label text */ @@ -13,6 +14,12 @@ const propTypes = { /** Text to show if there is an error */ errorText: PropTypes.string, + /** Prefix character prepended to the text input */ + prefixCharacter: PropTypes.string, + + /** Placeholder to display when the text input is empty */ + placeholder: PropTypes.string, + /** Styles for the outermost container for this component. */ containerStyles: PropTypes.arrayOf(PropTypes.object), @@ -24,15 +31,21 @@ const propTypes = { /** Whether to disable the field and style */ disabled: PropTypes.bool, + + /** Callback to execute the text input is modified */ + onChangeText: PropTypes.func, }; const defaultProps = { label: '', errorText: '', + prefixCharacter: '', containerStyles: [], helpLinkText: '', helpLinkURL: '', disabled: false, + placeholder: '', + onChangeText: () => {}, }; const TextInputWithLabel = props => ( @@ -53,16 +66,8 @@ const TextInputWithLabel = props => ( )} - + {/* eslint-disable-next-line react/jsx-props-no-spreading */} + {props.errorText !== '' && ( {props.errorText} )} diff --git a/src/components/TextInputWithPrefix.js b/src/components/TextInputWithPrefix.js new file mode 100644 index 000000000000..30d3378cae98 --- /dev/null +++ b/src/components/TextInputWithPrefix.js @@ -0,0 +1,58 @@ +import PropTypes from 'prop-types'; +import {TextInput, View} from 'react-native'; +import _ from 'underscore'; +import React from 'react'; +import Text from './Text'; +import styles from '../styles/styles'; + +const propTypes = { + /** Prefix character */ + prefixCharacter: PropTypes.string, + + /** Text to show if there is an error */ + errorText: PropTypes.string, + + /** Whether to disable the field and style */ + disabled: PropTypes.bool, + + /** Callback to execute the text input is modified */ + onChangeText: PropTypes.func, +}; + +const defaultProps = { + errorText: '', + prefixCharacter: '', + disabled: false, + onChangeText: () => {}, +}; + +const TextInputWithPrefix = props => (_.isEmpty(props.prefixCharacter) + // eslint-disable-next-line react/jsx-props-no-spreading + ? + : ( + + {props.prefixCharacter} + props.onChangeText(`${props.prefixCharacter}${text}`)} + // eslint-disable-next-line react/jsx-props-no-spreading + {..._.omit(props, ['prefixCharacter', 'errorText', 'onChangeText'])} + /> + + )); + +TextInputWithPrefix.propTypes = propTypes; +TextInputWithPrefix.defaultProps = defaultProps; +export default TextInputWithPrefix; From 5ff5cd7f4c529e04659233e61d5567b8f23b982d Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Mon, 15 Nov 2021 18:29:33 -0800 Subject: [PATCH 06/49] WorkspaceNewRoomPage WIP --- src/pages/workspace/WorkspaceNewRoomPage.js | 39 ++++++++++++++++++--- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index fe39e7847051..3a24db8d37e2 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -1,10 +1,15 @@ import React from 'react'; -import {View, Text} from 'react-native'; +import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import withFullPolicy, {fullPolicyDefaultProps, fullPolicyPropTypes} from './withFullPolicy'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import ONYXKEYS from '../../CONST'; import compose from '../../libs/compose'; +import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; +import Navigation from '../../libs/Navigation/Navigation'; +import ScreenWrapper from '../../components/ScreenWrapper'; +import styles from '../../styles/styles'; +import TextInputWithLabel from '../../components/TextInputWithLabel'; const propTypes = { ...fullPolicyPropTypes, @@ -19,13 +24,39 @@ const defaultProps = { class WorkspaceNewRoomPage extends React.Component { constructor(props) { super(props); + + this.state = { + roomName: '', + }; + } + + onSubmit() { + } render() { return ( - - Hi - + + Navigation.dismissModal()} + /> + + { + this.setState({roomName}); + }} + /> + {/**/} + + + ); } } From 6beddebc3bf8260f7213f9391b13e4457a58793b Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Mon, 15 Nov 2021 19:40:44 -0800 Subject: [PATCH 07/49] Wip Workspace picker --- src/CONST.js | 4 +++ src/ROUTES.js | 3 +-- src/languages/en.js | 1 + src/pages/workspace/WorkspaceNewRoomPage.js | 30 ++++++++++++++------- 4 files changed, 27 insertions(+), 11 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 9a0fe6e80263..ee43858df0ed 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -184,6 +184,10 @@ const CONST = { DAILY: 'daily', ALWAYS: 'always', }, + VISIBILITY: { + RESTRICTED: 'restricted', + PRIVATE: 'private', + }, }, MODAL: { MODAL_TYPE: { diff --git a/src/ROUTES.js b/src/ROUTES.js index 152b3681eecd..5f6b607bdb8f 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -84,7 +84,7 @@ export default { WORKSPACE_TRAVEL: 'workspace/:policyID/travel', WORKSPACE_MEMBERS: 'workspace/:policyID/members', WORKSPACE_BANK_ACCOUNT: 'workspace/:policyID/bank-account', - WORKSPACE_NEW_ROOM: 'workspace/:policyID/new-room', + WORKSPACE_NEW_ROOM: 'workspace/new-room', getWorkspaceInitialRoute: policyID => `workspace/${policyID}`, getWorkspaceInviteRoute: policyID => `workspace/${policyID}/invite`, getWorkspaceSettingsRoute: policyID => `workspace/${policyID}/settings`, @@ -97,7 +97,6 @@ export default { getWorkspaceBankAccountRoute: policyID => `workspace/${policyID}/bank-account`, getRequestCallRoute: taskID => `request-call/${taskID}`, REQUEST_CALL: 'request-call/:taskID', - getNewRoomRoute: policyID => `workspace/${policyID}/new-room`, /** * @param {String} route diff --git a/src/languages/en.js b/src/languages/en.js index ebfabc7a5b9a..f106562be2c7 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -783,5 +783,6 @@ export default { createRoom: 'Create Room', roomAlreadyExists: 'A room with this name already exists', social: 'social', + selectAWorkspace: 'Select a workspace', }, }; diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index 3a24db8d37e2..e24ad8b641a5 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -1,15 +1,18 @@ import React from 'react'; import {View} from 'react-native'; +import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; import withFullPolicy, {fullPolicyDefaultProps, fullPolicyPropTypes} from './withFullPolicy'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; -import ONYXKEYS from '../../CONST'; import compose from '../../libs/compose'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import Navigation from '../../libs/Navigation/Navigation'; import ScreenWrapper from '../../components/ScreenWrapper'; import styles from '../../styles/styles'; import TextInputWithLabel from '../../components/TextInputWithLabel'; +import ExpensiPicker from '../../components/ExpensiPicker'; +import ONYXKEYS from '../../ONYXKEYS'; +import CONST from '../../CONST'; const propTypes = { ...fullPolicyPropTypes, @@ -27,6 +30,8 @@ class WorkspaceNewRoomPage extends React.Component { this.state = { roomName: '', + policyID: '', + visibility: CONST.REPORT.VISIBILITY.RESTRICTED, }; } @@ -35,6 +40,10 @@ class WorkspaceNewRoomPage extends React.Component { } render() { + const selectedWorkspaceName = this.state.policyID + ? this.props.policies[`${ONYXKEYS.COLLECTION.POLICY}${this.state.policyID}`].name + : ''; + console.log(">>>>", selectedWorkspaceName); return ( { - this.setState({roomName}); - }} + onChangeText={roomName => this.setState({roomName})} + /> + ({label: policy.name, key: policy.id, value: policy.id}))} + onChange={policyID => this.setState({policyID})} /> - {/**/} @@ -70,8 +81,9 @@ export default compose( betas: { key: ONYXKEYS.BETAS, }, - currencyList: {key: ONYXKEYS.CURRENCY_LIST}, + policies: { + key: ONYXKEYS.COLLECTION.POLICY, + }, }), withLocalize, )(WorkspaceNewRoomPage); - From e029ca29434b560264295e18c4392216f8ea2c42 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Mon, 15 Nov 2021 19:44:38 -0800 Subject: [PATCH 08/49] wip --- src/pages/workspace/WorkspaceNewRoomPage.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index e24ad8b641a5..1cfce49928f7 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -33,6 +33,12 @@ class WorkspaceNewRoomPage extends React.Component { policyID: '', visibility: CONST.REPORT.VISIBILITY.RESTRICTED, }; + this.workspaceOptions = []; + this.onSubmit = this.onSubmit.bind(this); + } + + componentDidMount() { + this.workspaceOptions = _.map(this.props.policies, policy => ({label: policy.name, key: policy.id, value: policy.id})); } onSubmit() { @@ -43,7 +49,6 @@ class WorkspaceNewRoomPage extends React.Component { const selectedWorkspaceName = this.state.policyID ? this.props.policies[`${ONYXKEYS.COLLECTION.POLICY}${this.state.policyID}`].name : ''; - console.log(">>>>", selectedWorkspaceName); return ( ({label: policy.name, key: policy.id, value: policy.id}))} + items={this.workspaceOptions} onChange={policyID => this.setState({policyID})} /> From ca2c8dccff8c7876bd8fed9b0052e6d5b96335eb Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Wed, 17 Nov 2021 11:30:50 -0800 Subject: [PATCH 09/49] Social Spanish translation --- src/languages/es.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/es.js b/src/languages/es.js index e407fce53dbd..6ff1c7b058e7 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -784,6 +784,6 @@ export default { privateDescription: 'Sólo las personas que están invitadas a esta sala pueden encontrarla', createRoom: 'Crea una sala de chat', roomAlreadyExists: 'Ya existe una sala con este nombre', - social: 'TODO', + social: 'Social', }, }; From f20186f060f32abcba775233318334c0c899c437 Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Wed, 17 Nov 2021 17:30:08 -0800 Subject: [PATCH 10/49] Pickers working, need to rethink TextInputWithPrefix since it doesn't take into account our new design language --- src/components/ExpensiPicker.js | 5 ++ .../ExpensiTextInput/BaseExpensiTextInput.js | 74 ++++++++++--------- src/pages/workspace/WorkspaceNewRoomPage.js | 21 ++++-- src/styles/styles.js | 10 +++ 4 files changed, 70 insertions(+), 40 deletions(-) diff --git a/src/components/ExpensiPicker.js b/src/components/ExpensiPicker.js index 3f67d0352415..9bc6c525959f 100644 --- a/src/components/ExpensiPicker.js +++ b/src/components/ExpensiPicker.js @@ -18,6 +18,9 @@ const propTypes = { /** Error text to display */ errorText: PropTypes.string, + + /** Customize the ExpensiPicker container */ + containerStyles: PropTypes.arrayOf(PropTypes.object), }; const defaultProps = { @@ -25,6 +28,7 @@ const defaultProps = { isDisabled: false, hasError: false, errorText: '', + containerStyles: [], }; class ExpensiPicker extends PureComponent { @@ -41,6 +45,7 @@ class ExpensiPicker extends PureComponent { <> translateX; @@ -164,41 +165,44 @@ class BaseExpensiTextInput extends Component { (this.props.hasError || this.props.errorText) && styles.borderColorDanger, ]} > - {hasLabel ? ( - <> - {/* Adding this background to the label only for multiline text input, - to prevent text overlaping with label when scrolling */} - {this.props.multiline && } - - - ) : null} - { - if (typeof this.props.innerRef === 'function') { this.props.innerRef(ref); } - this.input = ref; - }} - // eslint-disable-next-line - {...inputProps} - value={this.props.value} - placeholder={(this.state.isFocused || !this.props.label) ? this.props.placeholder : null} - placeholderTextColor={themeColors.placeholderText} - underlineColorAndroid="transparent" - style={[this.props.inputStyle, !hasLabel && styles.pv0]} - multiline={this.props.multiline} - onFocus={this.onFocus} - onBlur={this.onBlur} - onChangeText={this.setValue} - onPressOut={this.props.onPress} - /> + {/*{this.props.prefixCharacter && {this.props.prefixCharacter}}*/} + + {hasLabel ? ( + <> + {/* Adding this background to the label only for multiline text input, + to prevent text overlaping with label when scrolling */} + {this.props.multiline && } + + + ) : null} + { + if (typeof this.props.innerRef === 'function') { this.props.innerRef(ref); } + this.input = ref; + }} + // eslint-disable-next-line + {...inputProps} + value={this.props.value} + placeholder={(this.state.isFocused || !this.props.label) ? this.props.placeholder : null} + placeholderTextColor={themeColors.placeholderText} + underlineColorAndroid="transparent" + style={[this.props.inputStyle, !hasLabel && styles.pv0]} + multiline={this.props.multiline} + onFocus={this.onFocus} + onBlur={this.onBlur} + onChangeText={this.setValue} + onPressOut={this.props.onPress} + /> + diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index 1cfce49928f7..aee708f5a996 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -13,6 +13,7 @@ import TextInputWithLabel from '../../components/TextInputWithLabel'; import ExpensiPicker from '../../components/ExpensiPicker'; import ONYXKEYS from '../../ONYXKEYS'; import CONST from '../../CONST'; +import ExpensiTextInput from '../../components/ExpensiTextInput'; const propTypes = { ...fullPolicyPropTypes, @@ -46,9 +47,6 @@ class WorkspaceNewRoomPage extends React.Component { } render() { - const selectedWorkspaceName = this.state.policyID - ? this.props.policies[`${ONYXKEYS.COLLECTION.POLICY}${this.state.policyID}`].name - : ''; return ( Navigation.dismissModal()} /> - this.setState({roomName})} /> this.setState({policyID})} + containerStyles={[styles.mb5]} + /> + + this.setState({visibility})} /> diff --git a/src/styles/styles.js b/src/styles/styles.js index 084907079ba2..57febc70287f 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -499,6 +499,8 @@ const styles = { height: '100%', backgroundColor: themeColors.componentBG, overflow: 'hidden', + display: 'flex', + flexDirection: 'row', }, expensiTextInputLabel: { position: 'absolute', @@ -544,6 +546,14 @@ const styles = { padding: 0, left, }), + expensiTextInputPrefix: { + paddingLeft: 12, + color: themeColors.text, + fontFamily: fontFamily.GTA, + fontSize: variables.fontSizeNormal, + textAlignVertical: 'center', + display: 'flex', + }, textInput: { backgroundColor: themeColors.componentBG, borderRadius: variables.componentBorderRadiusNormal, From c8aedbf0e756db035c2af59c72ae66e962745aae Mon Sep 17 00:00:00 2001 From: Jasper Huang Date: Wed, 17 Nov 2021 17:34:13 -0800 Subject: [PATCH 11/49] revert ExpensiTextInput --- .../ExpensiTextInput/BaseExpensiTextInput.js | 74 +++++++++---------- src/pages/workspace/WorkspaceNewRoomPage.js | 3 +- 2 files changed, 36 insertions(+), 41 deletions(-) diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js index bfadc778aa4e..abfbfd1bcddd 100644 --- a/src/components/ExpensiTextInput/BaseExpensiTextInput.js +++ b/src/components/ExpensiTextInput/BaseExpensiTextInput.js @@ -9,7 +9,6 @@ import {propTypes, defaultProps} from './baseExpensiTextInputPropTypes'; import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; import InlineErrorText from '../InlineErrorText'; -import Text from '../Text'; const ACTIVE_LABEL_TRANSLATE_Y = -12; const ACTIVE_LABEL_TRANSLATE_X = (translateX = -22) => translateX; @@ -165,44 +164,41 @@ class BaseExpensiTextInput extends Component { (this.props.hasError || this.props.errorText) && styles.borderColorDanger, ]} > - {/*{this.props.prefixCharacter && {this.props.prefixCharacter}}*/} - - {hasLabel ? ( - <> - {/* Adding this background to the label only for multiline text input, - to prevent text overlaping with label when scrolling */} - {this.props.multiline && } - - - ) : null} - { - if (typeof this.props.innerRef === 'function') { this.props.innerRef(ref); } - this.input = ref; - }} - // eslint-disable-next-line - {...inputProps} - value={this.props.value} - placeholder={(this.state.isFocused || !this.props.label) ? this.props.placeholder : null} - placeholderTextColor={themeColors.placeholderText} - underlineColorAndroid="transparent" - style={[this.props.inputStyle, !hasLabel && styles.pv0]} - multiline={this.props.multiline} - onFocus={this.onFocus} - onBlur={this.onBlur} - onChangeText={this.setValue} - onPressOut={this.props.onPress} - /> - + {hasLabel ? ( + <> + {/* Adding this background to the label only for multiline text input, + to prevent text overlaping with label when scrolling */} + {this.props.multiline && } + + + ) : null} + { + if (typeof this.props.innerRef === 'function') { this.props.innerRef(ref); } + this.input = ref; + }} + // eslint-disable-next-line + {...inputProps} + value={this.props.value} + placeholder={(this.state.isFocused || !this.props.label) ? this.props.placeholder : null} + placeholderTextColor={themeColors.placeholderText} + underlineColorAndroid="transparent" + style={[this.props.inputStyle, !hasLabel && styles.pv0]} + multiline={this.props.multiline} + onFocus={this.onFocus} + onBlur={this.onBlur} + onChangeText={this.setValue} + onPressOut={this.props.onPress} + /> diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index aee708f5a996..55db7c78f425 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -13,7 +13,6 @@ import TextInputWithLabel from '../../components/TextInputWithLabel'; import ExpensiPicker from '../../components/ExpensiPicker'; import ONYXKEYS from '../../ONYXKEYS'; import CONST from '../../CONST'; -import ExpensiTextInput from '../../components/ExpensiTextInput'; const propTypes = { ...fullPolicyPropTypes, @@ -56,7 +55,7 @@ class WorkspaceNewRoomPage extends React.Component { {/* TODO: This TextInput component is deprecated since it doesn't use our new ExpensiTextInput styles */} - Date: Wed, 17 Nov 2021 17:47:23 -0800 Subject: [PATCH 12/49] add Create Room button --- src/pages/workspace/WorkspaceNewRoomPage.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js index ce50e93020d8..08d56a668fc3 100644 --- a/src/pages/workspace/WorkspaceNewRoomPage.js +++ b/src/pages/workspace/WorkspaceNewRoomPage.js @@ -15,6 +15,7 @@ import ONYXKEYS from '../../ONYXKEYS'; import CONST from '../../CONST'; import Button from '../../components/Button'; import FixedFooter from '../../components/FixedFooter'; +import {createPolicyRoom} from '../../libs/actions/Report'; const propTypes = { ...fullPolicyPropTypes, @@ -34,6 +35,7 @@ class WorkspaceNewRoomPage extends React.Component { roomName: '', policyID: '', visibility: CONST.REPORT.VISIBILITY.RESTRICTED, + isLoading: false, }; this.workspaceOptions = []; this.onSubmit = this.onSubmit.bind(this); @@ -44,7 +46,9 @@ class WorkspaceNewRoomPage extends React.Component { } onSubmit() { - + this.setState({isLoading: true}); + createPolicyRoom(this.state.policyID, this.state.roomName, this.state.visibility) + .then(() => this.setState({isLoading: false})); } render() { @@ -61,7 +65,8 @@ class WorkspaceNewRoomPage extends React.Component { prefixCharacter="#" placeholder={this.props.translate('newRoomPage.social')} containerStyles={[styles.mb5]} - onChangeText={roomName => this.setState({roomName})} + onChangeText={roomName => this.setState({roomName: roomName.replace(/ /g, '_')})} + value={this.state.roomName.substr(1)} />