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

Fix scroll issue and found another bug 

Signed-off-by: Egor Savkin <es@m-labs.hk>
Egor Savkin 2023-09-12 17:38:58 +08:00
parent c2cf323cf4
commit 3a6dfef9b7
2 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
static/js/shop.jsx
View File

@ -721,18 +721,23 @@ class ProductCartItem extends React.PureComponent {
big={data.size === "big"}
target={{
construct: ((outvar, value) => {
//console.log("construct", outvar, value, options_data);
console.log("construct", outvar, value, options_data);
options_data[outvar] = value;
this.setState(options_data);
}),
update: ((outvar, value) => {
//console.log("update", outvar, value, options_data);
console.log("update", outvar, value, options_data);
if (outvar in options_data) options_data[outvar] = value;
this.setState(options_data);
}),
unmount: ((outvar) => {
//console.log("delete", outvar);
delete options_data[outvar];
console.log("delete", outvar, this.state.alive);
//let opt_data = this.state;
//delete opt_data[outvar];
//this.setState(opt_data);
// TODO this needs to be stopped when the whole card getting unmounted
if (this.state.alive)
delete options_data[outvar];
})
}}
/>) : null) }
@ -880,6 +885,8 @@ class Cart extends React.PureComponent {
const shouldTooltipWarningClassInverted = nbrSlots - nbrOccupied < 5;
console.log(data.items);
const products = data.items.map((item, index) => {
let itemData;
let ext_data = fill_ext_data(data.itemsData, index);
@ -1731,8 +1738,12 @@ class Shop extends React.PureComponent {
}
handleDeleteItem(index) {
const cloned = Array.from(this.state.columns.cart.items);
console.log(this.state.columns.cart.items)
let cloned = Array.from(this.state.columns.cart.items);
let cloned_data = Array.from(this.state.columns.cart.itemsData);
cloned.splice(index, 1);
cloned_data.splice(index, 1);
this.setState({
...this.state,
columns: {
@ -1740,6 +1751,7 @@ class Shop extends React.PureComponent {
cart: {
...this.state.columns.cart,
items: cloned,
itemsData: cloned_data,
},
},
});
@ -1753,6 +1765,7 @@ class Shop extends React.PureComponent {
cart: {
...this.state.columns.cart,
items: [],
itemsData: []
},
},
});
@ -2015,6 +2028,10 @@ class Shop extends React.PureComponent {
this.state.columns[source.droppableId].items,
source.index,
),
itemsData: remove(
this.state.columns[source.droppableId].itemsData,
source.index,
)
},
},
});
@ -2060,6 +2077,11 @@ class Shop extends React.PureComponent {
source.index,
destination.index,
),
itemsData: reorder(
this.state.columns[destination.droppableId].itemsData,
source.index,
destination.index,
),
},
},
});

16
static/js/shop_components.jsx
View File

@ -376,18 +376,20 @@ export function OptionsSummaryPopup({id, data}) {
const [size, setSize] = useState({w: 0, h: 0});
const close = () => {
setShow(false);
document.removeEventListener("scroll", reposition, true);
document.removeEventListener("scroll", handleScroll, true);
}
const ref = useClickAway(close);
const reposition = () => {
console.trace("reposition")
let popup_button = document.getElementById(id + "img");
if (!popup_button) {
document.removeEventListener("scroll", handleScroll, true);
return;
}
let rect = popup_button.getBoundingClientRect()
let pos_x = (rect.left + rect.right) / 2;
let pos_y = (rect.top + rect.bottom) / 2;
console.trace("reposition", pos_x, pos_y)
if (pos_x + size.w > window.innerWidth) {
setPosition({x: pos_x - size.w - 20, y: pos_y - size.h / 2});
} else {
@ -395,6 +397,12 @@ export function OptionsSummaryPopup({id, data}) {
}
}
const handleScroll = (e) => {
if (e.target !== document.getElementById(id)) {
close();
}
}
useEffect(() => {
if (show) {
let popup = document.getElementById(id);
@ -415,7 +423,7 @@ export function OptionsSummaryPopup({id, data}) {
const handleClick = (event) => {
setShow(!show);
if (!show) {
document.addEventListener("scroll", reposition, true);
document.addEventListener("scroll", handleScroll, true);
}
};