nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

#58 - Autocomplete friend gift (#111)

Browse Source
This commit is contained in:
object 2023-01-14 06:48:51 +01:00 committed by GitHub
parent 9381b37e8a
commit b01a1dec81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/catalog/CatalogView.scss
View File

@ -127,4 +127,32 @@
height: 60px;
}
.autocomplete-gift-container {
background: #fff;
padding: 8px;
list-style-type: none;
min-width: 307px;
border-radius: 0.2rem;
position: absolute;
font-size: 0.7875rem;
top: 81px;
left: 8px;
border: 1px solid #b6c1ce;
margin: 0;
border-radius: 2px;
margin: 0;
box-sizing: border-box;
max-height: 280px;
overflow-y: auto;
z-index: 1;
.autocomplete-gift-item {
width: 100%;
box-sizing: border-box;
&:hover {
background-color: #ebf4ff;
}
}
}
@import './views/targeted-offer/Offer.scss';

43
src/components/catalog/views/gift/CatalogGiftView.tsx
View File

@ -1,10 +1,10 @@
import { GiftReceiverNotFoundEvent, PurchaseFromCatalogAsGiftComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
import { ColorUtils, GetSessionDataManager, LocalizeText, ProductTypeEnum, SendMessageComposer } from '../../../../api';
import { ColorUtils, GetSessionDataManager, LocalizeText, MessengerFriend, ProductTypeEnum, SendMessageComposer } from '../../../../api';
import { Base, Button, ButtonGroup, classNames, Column, Flex, FormGroup, LayoutCurrencyIcon, LayoutFurniImageView, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchasedEvent } from '../../../../events';
import { useCatalog, useMessageEvent, useUiEvent } from '../../../../hooks';
import { useCatalog, useFriends, useMessageEvent, useUiEvent } from '../../../../hooks';
export const CatalogGiftView: FC<{}> = props =>
{
@ -23,8 +23,11 @@ export const CatalogGiftView: FC<{}> = props =>
const [ maxRibbonIndex, setMaxRibbonIndex ] = useState<number>(0);
const [ receiverNotFound, setReceiverNotFound ] = useState<boolean>(false);
const { catalogOptions = null } = useCatalog();
const { friends } = useFriends();
const { giftConfiguration = null } = catalogOptions;
const [ boxTypes, setBoxTypes ] = useState<number[]>([]);
const [ suggestions, setSuggestions ] = useState([]);
const [ isAutocompleteVisible, setIsAutocompleteVisible ] = useState(true);
const onClose = useCallback(() =>
{
@ -37,6 +40,8 @@ export const CatalogGiftView: FC<{}> = props =>
setMessage('');
setSelectedBoxIndex(0);
setSelectedRibbonIndex(0);
setIsAutocompleteVisible(false);
setSuggestions([]);
if(colors.length) setSelectedColorId(colors[0].id);
}, [ colors ]);
@ -69,6 +74,29 @@ export const CatalogGiftView: FC<{}> = props =>
return isBoxDefault ? boxTypes[selectedBoxIndex] : selectedColorId;
},[ isBoxDefault, boxTypes, selectedBoxIndex, selectedColorId ])
const allFriends = friends.filter( (friend: MessengerFriend) => friend.id !== -1 );
const onTextChanged = (e: ChangeEvent<HTMLInputElement>) =>
{
const value = e.target.value;
let suggestions = [];
if (value.length > 0)
{
suggestions = allFriends.sort().filter((friend: MessengerFriend) => friend.name.includes(value));
}
setReceiverName(value);
setIsAutocompleteVisible(true);
setSuggestions(suggestions);
};
const selectedReceiverName = (friendName: string) =>
{
setReceiverName(friendName);
setIsAutocompleteVisible(false);
}
const handleAction = useCallback((action: string) =>
{
@ -187,7 +215,14 @@ export const CatalogGiftView: FC<{}> = props =>
<NitroCardContentView className="text-black">
<FormGroup column>
<Text>{ LocalizeText('catalog.gift_wrapping.receiver') }</Text>
<input type="text" className={ classNames('form-control form-control-sm', receiverNotFound && 'is-invalid') } value={ receiverName } onChange={ (e) => setReceiverName(e.target.value) } />
<input type="text" className={ classNames('form-control form-control-sm', receiverNotFound && 'is-invalid') } value={ receiverName } onChange={ (e) => onTextChanged(e) } />
{ (suggestions.length > 0 && isAutocompleteVisible) &&
<Column className="autocomplete-gift-container">
{ suggestions.map((friend: MessengerFriend) => (
<Base key={ friend.id } className="autocomplete-gift-item" onClick={ (e) => selectedReceiverName(friend.name) }>{ friend.name }</Base>
)) }
</Column>
}
{ receiverNotFound &&
<Base className="invalid-feedback">{ LocalizeText('catalog.gift_wrapping.receiver_not_found.title') }</Base> }
</FormGroup>