-
Notifications
You must be signed in to change notification settings - Fork 4k
Allow Welcome Message on Room Creation #27836
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
02b3918
add and send welcome message
34531ee
add initial ValuePicker component
4e2f808
handle selected items
79fe7b7
clean up
36fb0e0
padding and margins
bb5f174
update bottom margins
4df151e
let NewChatSelectorPage actually access the betas
ec64d40
merge conflicts
bcbd156
address feedback - add optional to welcome message
4b7eeff
address feedback
25e3bfa
Merge branch 'main' into dangrous-roomwelcomemessages
c3b3508
mirror change on main
552586e
Merge branch 'main' into dangrous-roomwelcomemessages
29370d7
Merge branch 'main' into dangrous-roomwelcomemessages
03f63bf
update value based on policy
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import React, {useState, useEffect} from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import _ from 'lodash'; | ||
| import CONST from '../../CONST'; | ||
| import HeaderWithBackButton from '../HeaderWithBackButton'; | ||
| import SelectionList from '../SelectionList'; | ||
| import Modal from '../Modal'; | ||
| import ScreenWrapper from '../ScreenWrapper'; | ||
| import styles from '../../styles/styles'; | ||
|
|
||
| const propTypes = { | ||
| /** Whether the modal is visible */ | ||
| isVisible: PropTypes.bool.isRequired, | ||
|
|
||
| /** Current value selected */ | ||
| currentValue: PropTypes.string, | ||
|
|
||
| /** Items to pick from */ | ||
| items: PropTypes.arrayOf(PropTypes.shape({value: PropTypes.string, label: PropTypes.string})), | ||
|
|
||
| /** The selected item */ | ||
| selectedItem: PropTypes.shape({value: PropTypes.string, label: PropTypes.string}), | ||
|
|
||
| /** Label for values */ | ||
| label: PropTypes.string, | ||
|
|
||
| /** Function to call when the user selects a item */ | ||
| onItemSelected: PropTypes.func, | ||
|
|
||
| /** Function to call when the user closes the modal */ | ||
| onClose: PropTypes.func, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| currentValue: '', | ||
| items: [], | ||
| selectedItem: {}, | ||
| label: '', | ||
| onClose: () => {}, | ||
| onItemSelected: () => {}, | ||
| }; | ||
|
|
||
| function ValueSelectorModal({currentValue, items, selectedItem, label, isVisible, onClose, onItemSelected}) { | ||
| const [sectionsData, setSectionsData] = useState([]); | ||
|
|
||
| useEffect(() => { | ||
| const itemsData = _.map(items, (item) => ({value: item.value, keyForList: item.value, text: item.label, isSelected: item === selectedItem})); | ||
| setSectionsData(itemsData); | ||
| }, [items, selectedItem]); | ||
|
|
||
| return ( | ||
| <Modal | ||
| type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED} | ||
| isVisible={isVisible} | ||
| onClose={onClose} | ||
| onModalHide={onClose} | ||
| hideModalContentWhileAnimating | ||
| useNativeDriver | ||
| > | ||
| <ScreenWrapper | ||
| style={[styles.pb0]} | ||
| includePaddingTop={false} | ||
| includeSafeAreaPaddingBottom={false} | ||
| testID="ValueSelectorModal" | ||
| > | ||
| <HeaderWithBackButton | ||
| title={label} | ||
| onBackButtonPress={onClose} | ||
| /> | ||
| <SelectionList | ||
| sections={[{data: sectionsData}]} | ||
| onSelectRow={onItemSelected} | ||
| initiallyFocusedOptionKey={currentValue} | ||
| /> | ||
| </ScreenWrapper> | ||
| </Modal> | ||
| ); | ||
| } | ||
|
|
||
| ValueSelectorModal.propTypes = propTypes; | ||
| ValueSelectorModal.defaultProps = defaultProps; | ||
| ValueSelectorModal.displayName = 'ValueSelectorModal'; | ||
|
|
||
| export default ValueSelectorModal; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import React, {useState} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import PropTypes from 'prop-types'; | ||
| import _ from 'lodash'; | ||
| import styles from '../../styles/styles'; | ||
| import MenuItemWithTopDescription from '../MenuItemWithTopDescription'; | ||
| import ValueSelectorModal from './ValueSelectorModal'; | ||
| import FormHelpMessage from '../FormHelpMessage'; | ||
| import refPropTypes from '../refPropTypes'; | ||
|
|
||
| const propTypes = { | ||
| /** Form Error description */ | ||
| errorText: PropTypes.string, | ||
|
|
||
| /** Item to display */ | ||
| value: PropTypes.string, | ||
|
|
||
| /** A placeholder value to display */ | ||
| placeholder: PropTypes.string, | ||
|
|
||
| /** Items to pick from */ | ||
| items: PropTypes.arrayOf(PropTypes.shape({value: PropTypes.string, label: PropTypes.string})), | ||
|
|
||
| /** Label of picker */ | ||
| label: PropTypes.string, | ||
|
|
||
| /** Callback to call when the input changes */ | ||
| onInputChange: PropTypes.func, | ||
|
|
||
| /** A ref to forward to MenuItemWithTopDescription */ | ||
| forwardedRef: refPropTypes, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| value: undefined, | ||
| label: undefined, | ||
| placeholder: '', | ||
| items: {}, | ||
| forwardedRef: undefined, | ||
| errorText: '', | ||
| onInputChange: () => {}, | ||
| }; | ||
|
|
||
| function ValuePicker({value, label, items, placeholder, errorText, onInputChange, forwardedRef}) { | ||
| const [isPickerVisible, setIsPickerVisible] = useState(false); | ||
|
|
||
| const showPickerModal = () => { | ||
| setIsPickerVisible(true); | ||
| }; | ||
|
|
||
| const hidePickerModal = () => { | ||
| setIsPickerVisible(false); | ||
| }; | ||
|
|
||
| const updateInput = (item) => { | ||
| if (item.value !== value) { | ||
| onInputChange(item.value); | ||
| } | ||
| hidePickerModal(); | ||
| }; | ||
|
|
||
| const descStyle = value.length === 0 ? styles.textNormal : null; | ||
| const selectedItem = _.find(items, {value}); | ||
| const selectedLabel = selectedItem ? selectedItem.label : ''; | ||
|
|
||
| return ( | ||
| <View> | ||
| <MenuItemWithTopDescription | ||
| ref={forwardedRef} | ||
| shouldShowRightIcon | ||
| title={selectedLabel || placeholder || ''} | ||
| descriptionTextStyle={descStyle} | ||
| description={label} | ||
| onPress={showPickerModal} | ||
| /> | ||
| <View style={styles.ml5}> | ||
| <FormHelpMessage message={errorText} /> | ||
| </View> | ||
| <ValueSelectorModal | ||
| isVisible={isPickerVisible} | ||
| currentValue={selectedLabel || placeholder || ''} | ||
| label={label} | ||
| selectedItem={selectedItem} | ||
| items={items} | ||
| onClose={hidePickerModal} | ||
| onItemSelected={updateInput} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| ValuePicker.propTypes = propTypes; | ||
| ValuePicker.defaultProps = defaultProps; | ||
| ValuePicker.displayName = 'ValuePicker'; | ||
|
|
||
| export default React.forwardRef((props, ref) => ( | ||
| <ValuePicker | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...props} | ||
| forwardedRef={ref} | ||
| /> | ||
| )); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.