-
Notifications
You must be signed in to change notification settings - Fork 298
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Ameerul /Task #65487 Dropdown Block User Feature (#5682)
* added dropdown, menu dots icon, added function for users to block advertisers with block user modal * refactored code, and renamed dropdown component to advertiser-page-dropdown-menu * renamed variables and functions according to comments * refactored block user function in advertiser-page-store and block-user-modal * minor changes to the imports * merged with master and added changes * removed old blockUser and showModal functions from advertiser store * removed is_blocked from dropdown * refactored code with comments * moved showBlockUserModal function to the store * removed curly brackets in name * fixed gap in modal * fixed tooltip message and user cannot block themselves * fixed dropdown darkmode design and hid menu dots icon when user is blocked * changed dropdown hover colour * added useOnClickOutisde Hook to hide dropdown when clicked outside
- Loading branch information
1 parent
4211075
commit f17d1d2
Showing
12 changed files
with
221 additions
and
36 deletions.
There are no files selected for viewing
1 change: 1 addition & 0 deletions
1
packages/components/src/components/icon/common/ic-menu-dots.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
66 changes: 66 additions & 0 deletions
66
packages/p2p/src/components/advertiser-page/advertiser-page-dropdown-menu.jsx
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,66 @@ | ||
| import React from 'react'; | ||
| import { observer } from 'mobx-react-lite'; | ||
| import PropTypes from 'prop-types'; | ||
| import { Dropdown, Icon, Text } from '@deriv/components'; | ||
| import { Localize } from 'Components/i18next'; | ||
| import { useStores } from 'Stores'; | ||
| import { useOnClickOutside } from '../../../../components/src/hooks'; | ||
| import './advertiser-page.scss'; | ||
|
|
||
| const AdvertiserPageDropdownMenu = ({ is_my_advert }) => { | ||
| const dropdown_menu_ref = React.useRef(); | ||
| const { advertiser_page_store } = useStores(); | ||
|
|
||
| const onClickOutside = () => { | ||
| advertiser_page_store.setIsDropdownMenuVisible(false); | ||
| }; | ||
|
|
||
| useOnClickOutside(dropdown_menu_ref, onClickOutside, () => advertiser_page_store.is_dropdown_menu_visible); | ||
|
|
||
| return ( | ||
| !advertiser_page_store.is_counterparty_advertiser_blocked && ( | ||
| <div className='advertiser-page__menu-dots-toggle'> | ||
| <Icon | ||
| className='advertiser-page__menu-dots-icon' | ||
| icon='IcMenuDots' | ||
| onClick={() => | ||
| advertiser_page_store.setIsDropdownMenuVisible(!advertiser_page_store.is_dropdown_menu_visible) | ||
| } | ||
| size={16} | ||
| /> | ||
| {advertiser_page_store.is_dropdown_menu_visible && ( | ||
| <div | ||
| ref={dropdown_menu_ref} | ||
| className='advertiser-page__dropdown' | ||
| onClick={advertiser_page_store.showBlockUserModal} | ||
| > | ||
| <Dropdown | ||
| className={`advertiser-page__dropdown-container${is_my_advert ? '--disabled' : ''}`} | ||
| is_align_text_right | ||
| list={['Block']} | ||
| name='block_user_dropdown' | ||
| placeholder={ | ||
| <Text | ||
| color={ | ||
| advertiser_page_store.is_counterparty_advertiser_blocked | ||
| ? 'less-prominent' | ||
| : 'prominent' | ||
| } | ||
| size='xs' | ||
| > | ||
| <Localize i18n_default_text='Block' /> | ||
| </Text> | ||
| } | ||
| /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| ); | ||
| }; | ||
|
|
||
| export default observer(AdvertiserPageDropdownMenu); | ||
|
|
||
| AdvertiserPageDropdownMenu.propTypes = { | ||
| is_my_advert: PropTypes.bool, | ||
| }; |
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.