M-Labs/web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

Show at max only one options notification

Browse Source 
Closes #124

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-03-18 14:48:16 +08:00
parent dfe1f0ea2d
commit 6bfed3e779
4 changed files with 53 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
static/js/shop/OptionsWrapper.jsx
View File

@ -11,6 +11,13 @@ export function OptionsDialogWrapper({crate_index, card_index, first, last}) {
const card_id = useShopStore((state) => state.crates[crate_index].items[card_index].id);
const options_class = useShopStore((state) => state.crates[crate_index].items[card_index].options_class);
const sideMenuIsOpen = useShopStore((state) => state.sideMenuIsOpen);
const _notificationTimer = useShopStore((state) => state.notificationTimer);
const hideNotification = useShopStore((state) => state.hideNotification);
//const notificationCardIndex = useShopStore((state) => state.notificationCardIndex);
//const displayNotification = notificationCrateId === crate_id && notificationCardIndex === card_index;
const displayNotification = useShopStore((state) =>
state.notificationCrateId === crate_id &&
(state.notificationCardIndex === card_index || (state.crates[crate_index].items.length + (state.notificationCardIndex || -1)) === card_index));
const onOptionsUpdate = useShopStore((state) => state.updateOptions);
@ -25,6 +32,8 @@ export function OptionsDialogWrapper({crate_index, card_index, first, last}) {
first={first}
last={last}
sideMenuIsOpen={sideMenuIsOpen}
onHideNotification={hideNotification}
displayNotification={displayNotification}
target={{
construct: ((outvar, value) => {
// #!options_log

8
static/js/shop/options/DialogPopup.jsx
View File

@ -3,7 +3,8 @@ import {useClickAway} from "./useClickAway";
import {ProcessOptions} from "./Options";
import {Notification} from "./Notification";
export function DialogPopup({options, data, target, id, big, first, last, options_class, sideMenuIsOpen}) {
export function DialogPopup({options, data, target, id, big, first, last, options_class,
sideMenuIsOpen, displayNotification, onHideNotification}) {
const [show, setShow] = useState(false);
const ref = useClickAway((e) => {
if (e.type === "mousedown") // ignore touchstart
@ -22,8 +23,11 @@ export function DialogPopup({options, data, target, id, big, first, last, option
id={"processed_options_notification" + id}
tip="Customization options available"
sideMenuIsOpen={sideMenuIsOpen}
show={displayNotification}
onHide={onHideNotification}
content={
<img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
<img className="alert-info"
src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
onClick={handleClick}/>
}
/>

38
static/js/shop/options/Notification.jsx
View File

@ -1,30 +1,18 @@
import {OverlayTrigger, Tooltip} from "react-bootstrap";
import React, {useEffect, useState} from "react";
export function Notification({id, tip, content, sideMenuIsOpen}) {
const [show, setShow] = useState(false);
useEffect(() => {
setTimeout(() => {
setShow(true)
}, 100);
setTimeout(() => {
setShow(false)
}, 5000);
}, []);
import React from "react";
export function Notification({id, tip, content, sideMenuIsOpen, show, onHide}) {
return (
<OverlayTrigger
placement="top"
trigger={["click", "hover"]}
style={{display: 'inline'}}
show={show}
onToggle={() => setShow(false)}
overlay={props => <Tooltip id={id} {...props}>{tip}</Tooltip>}
rootClose={!sideMenuIsOpen}
>
{content}
</OverlayTrigger>
<OverlayTrigger
placement="top"
trigger={["click", "hover"]}
style={{display: 'inline'}}
show={show}
overlay={props => <Tooltip id={id} {...props}>{tip}</Tooltip>}
rootClose={!sideMenuIsOpen}
onToggle={onHide}
>
{content}
</OverlayTrigger>
)
}

25
static/js/shop/shop_store.js
View File

@ -29,6 +29,28 @@ const useCatalog = ((set, get) => ({
cardIndexById: card_id => get().cards_list.findIndex((element) => (card_id === element))
}));
const useOptionsNotification = ((set, get) => ({
notificationCrateId: null,
notificationCardIndex: null,
notificationTimer: null,
_showNotification: (crate_id, card_index) => set(state => ({
notificationCrateId: crate_id,
notificationCardIndex: card_index,
notificationTimer: setTimeout(() => {
state.hideNotification()
}, 5000)
})),
showNotification: (crate_id, card_index) => {
get().hideNotification()
setTimeout(() => get()._showNotification(crate_id, card_index), 100);
},
hideNotification: () => set(state => ({
notificationCrateId: null,
notificationCardIndex: null,
notificationTimer: (state.notificationTimer && clearTimeout(state.notificationTimer)) || null,
}))
}));
const useSearch = ((set, get) => ({
search_index: Array.from(Object.values(shared_data.items)
.map((card, _) => (
@ -182,6 +204,7 @@ const useImportJSON = ((set, get) => ({
get().fillExtCrateData(crate.id);
});
get()._updateTotalOrderPrice();
get().showNotification(get().active_crate, null);
},
updateImportDescription: (new_description) => set(state => ({
importValue: {
@ -532,6 +555,7 @@ const useCart = ((set, get) => ({
get().noDestinationWarning();
return {};
}
get().showNotification(dest, index_to);
get()._addCardFromCatalog(dest, index_from, index_to)
get().fillExtData(dest);
get().fillWarnings(dest);
@ -583,6 +607,7 @@ const useCart = ((set, get) => ({
export const useShopStore = createWithEqualityFn((...params) => ({
...useOptionsNotification(...params),
...useCatalog(...params),
...useSearch(...params),
...useCrateModes(...params),