-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #26954 from BeeMargarida/feat/26126-tag_menu_item_…
…and_picker #26126: Tag menu item and Tag picker (1st PR)
- Loading branch information
Showing
20 changed files
with
348 additions
and
5 deletions.
There are no files selected for viewing
This file contains 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 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 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 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 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,90 @@ | ||
| import React, {useMemo} from 'react'; | ||
| import _ from 'underscore'; | ||
| import lodashGet from 'lodash/get'; | ||
| import {withOnyx} from 'react-native-onyx'; | ||
| import ONYXKEYS from '../../ONYXKEYS'; | ||
| import styles from '../../styles/styles'; | ||
| import Navigation from '../../libs/Navigation/Navigation'; | ||
| import ROUTES from '../../ROUTES'; | ||
| import useLocalize from '../../hooks/useLocalize'; | ||
| import * as OptionsListUtils from '../../libs/OptionsListUtils'; | ||
| import OptionsSelector from '../OptionsSelector'; | ||
| import {propTypes, defaultProps} from './tagPickerPropTypes'; | ||
|
|
||
| function TagPicker({policyTags, reportID, tag, iouType, iou}) { | ||
| const {translate} = useLocalize(); | ||
|
|
||
| const selectedOptions = useMemo(() => { | ||
| if (!iou.tag) { | ||
| return []; | ||
| } | ||
|
|
||
| return [ | ||
| { | ||
| name: iou.tag, | ||
| enabled: true, | ||
| }, | ||
| ]; | ||
| }, [iou.tag]); | ||
|
|
||
| // Only shows one section, which will be the default behavior if there are | ||
| // less than 8 policy tags | ||
| // TODO: support sections with search | ||
| const sections = useMemo(() => { | ||
| const tagList = _.chain(lodashGet(policyTags, [tag, 'tags'], {})) | ||
| .values() | ||
| .map((t) => ({ | ||
| text: t.name, | ||
| keyForList: t.name, | ||
| tooltipText: t.name, | ||
| })) | ||
| .value(); | ||
|
|
||
| return [ | ||
| { | ||
| data: tagList, | ||
| }, | ||
| ]; | ||
| }, [policyTags, tag]); | ||
|
|
||
| const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, ''); | ||
|
|
||
| const navigateBack = () => { | ||
| Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID)); | ||
| }; | ||
|
|
||
| const updateTag = () => { | ||
| // TODO: add logic to save the selected tag | ||
| navigateBack(); | ||
| }; | ||
|
|
||
| return ( | ||
| <OptionsSelector | ||
| optionHoveredStyle={styles.hoveredComponentBG} | ||
| sections={sections} | ||
| selectedOptions={selectedOptions} | ||
| headerMessage={headerMessage} | ||
| textInputLabel={translate('common.search')} | ||
| boldStyle | ||
| value="" | ||
| onSelectRow={updateTag} | ||
| shouldShowTextInput={false} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| TagPicker.displayName = 'TagPicker'; | ||
| TagPicker.propTypes = propTypes; | ||
| TagPicker.defaultProps = defaultProps; | ||
|
|
||
| export default withOnyx({ | ||
| policyTags: { | ||
| key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, | ||
| }, | ||
| policyRecentlyUsedTags: { | ||
| key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`, | ||
| }, | ||
| iou: { | ||
| key: ONYXKEYS.IOU, | ||
| }, | ||
| })(TagPicker); |
This file contains 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,43 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import tagPropTypes from '../tagPropTypes'; | ||
| import {iouPropTypes, iouDefaultProps} from '../../pages/iou/propTypes'; | ||
|
|
||
| const propTypes = { | ||
| /** The report ID of the IOU */ | ||
| reportID: PropTypes.string.isRequired, | ||
|
|
||
| /** The policyID we are getting tags for */ | ||
| policyID: PropTypes.string.isRequired, | ||
|
|
||
| /** The name of tag list we are getting tags for */ | ||
| tag: PropTypes.string.isRequired, | ||
|
|
||
| /** The type of IOU report, i.e. bill, request, send */ | ||
| iouType: PropTypes.string.isRequired, | ||
|
|
||
| /** Callback to submit the selected tag */ | ||
| onSubmit: PropTypes.func, | ||
|
|
||
| /* Onyx Props */ | ||
| /** Collection of tags attached to a policy */ | ||
| policyTags: PropTypes.objectOf( | ||
| PropTypes.shape({ | ||
| name: PropTypes.string, | ||
| tags: PropTypes.objectOf(tagPropTypes), | ||
| }), | ||
| ), | ||
|
|
||
| /** List of recently used tags */ | ||
| policyRecentlyUsedTags: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)), | ||
|
|
||
| /** Holds data related to Money Request view state, rather than the underlying Money Request data. */ | ||
| iou: iouPropTypes, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| policyTags: {}, | ||
| policyRecentlyUsedTags: {}, | ||
| iou: iouDefaultProps, | ||
| }; | ||
|
|
||
| export {propTypes, defaultProps}; |
This file contains 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,12 @@ | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| export default PropTypes.shape({ | ||
| /** Name of a tag */ | ||
| name: PropTypes.string.isRequired, | ||
|
|
||
| /** Flag that determines if a tag is active and able to be selected */ | ||
| enabled: PropTypes.bool.isRequired, | ||
|
|
||
| /** "General Ledger code" that corresponds to this tag in an accounting system. Similar to an ID. */ | ||
| 'GL Code': PropTypes.string, | ||
| }); |
This file contains 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 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 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 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 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
Oops, something went wrong.