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

Fix scroll issue and found another bug 

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-09-12 17:38:58 +08:00
parent c55687e05a
commit dfbf9cbfe7
2 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
static/js/shop.jsx
View File

@ -708,17 +708,22 @@ 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);
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];
})
}}
@ -1720,8 +1725,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: {
@ -1729,6 +1738,7 @@ class Shop extends React.PureComponent {
cart: {
...this.state.columns.cart,
items: cloned,
itemsData: cloned_data,
},
},
});
@ -1742,6 +1752,7 @@ class Shop extends React.PureComponent {
cart: {
...this.state.columns.cart,
items: [],
itemsData: []
},
},
});
@ -1976,6 +1987,10 @@ class Shop extends React.PureComponent {
this.state.columns[source.droppableId].items,
source.index,
),
itemsData: remove(
this.state.columns[source.droppableId].itemsData,
source.index,
)
},
},
});
@ -2021,6 +2036,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);
}
};