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

Add options for the cards #93

Merged
sb10q merged 42 commits from esavkin/web2019:85-variants into master 2023-11-28 15:32:34 +08:00
Conversation 24 Commits 42 Files Changed 9 +37 -9
2 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dfbf9cbfe7 - Show all commits

28
static/js/shop.jsx
View File

@ -708,17 +708,22 @@ class ProductCartItem extends React.PureComponent {
big={data.size === "big"} big={data.size === "big"}
target={{ target={{
construct: ((outvar, value) => { construct: ((outvar, value) => {
//console.log("construct", outvar, value, options_data); console.log("construct", outvar, value, options_data);
options_data[outvar] = value; options_data[outvar] = value;
this.setState(options_data); this.setState(options_data);
}), }),
update: ((outvar, value) => { 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; if (outvar in options_data) options_data[outvar] = value;
this.setState(options_data); this.setState(options_data);
}), }),
unmount: ((outvar) => { 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]; delete options_data[outvar];
}) })
}} }}
@ -1720,8 +1725,12 @@ class Shop extends React.PureComponent {
} }
handleDeleteItem(index) { 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.splice(index, 1);
cloned_data.splice(index, 1);
this.setState({ this.setState({
...this.state, ...this.state,
columns: { columns: {
@ -1729,6 +1738,7 @@ class Shop extends React.PureComponent {
cart: { cart: {
...this.state.columns.cart, ...this.state.columns.cart,
items: cloned, items: cloned,
itemsData: cloned_data,
}, },
}, },
}); });
@ -1742,6 +1752,7 @@ class Shop extends React.PureComponent {
cart: { cart: {
...this.state.columns.cart, ...this.state.columns.cart,
items: [], items: [],
itemsData: []
}, },
}, },
}); });
@ -1976,6 +1987,10 @@ class Shop extends React.PureComponent {
this.state.columns[source.droppableId].items, this.state.columns[source.droppableId].items,
source.index, source.index,
), ),
itemsData: remove(
this.state.columns[source.droppableId].itemsData,
source.index,
)
}, },
}, },
}); });
@ -2021,6 +2036,11 @@ class Shop extends React.PureComponent {
source.index, source.index,
destination.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 [size, setSize] = useState({w: 0, h: 0});
const close = () => { const close = () => {
setShow(false); setShow(false);
document.removeEventListener("scroll", reposition, true); document.removeEventListener("scroll", handleScroll, true);
} }
const ref = useClickAway(close); const ref = useClickAway(close);
const reposition = () => { const reposition = () => {
console.trace("reposition")
let popup_button = document.getElementById(id + "img"); let popup_button = document.getElementById(id + "img");
if (!popup_button) {
document.removeEventListener("scroll", handleScroll, true);
return;
}
let rect = popup_button.getBoundingClientRect() let rect = popup_button.getBoundingClientRect()
let pos_x = (rect.left + rect.right) / 2; let pos_x = (rect.left + rect.right) / 2;
let pos_y = (rect.top + rect.bottom) / 2; let pos_y = (rect.top + rect.bottom) / 2;
console.trace("reposition", pos_x, pos_y)
if (pos_x + size.w > window.innerWidth) { if (pos_x + size.w > window.innerWidth) {
setPosition({x: pos_x - size.w - 20, y: pos_y - size.h / 2}); setPosition({x: pos_x - size.w - 20, y: pos_y - size.h / 2});
} else { } else {
@ -395,6 +397,12 @@ export function OptionsSummaryPopup({id, data}) {
} }
} }
const handleScroll = (e) => {
if (e.target !== document.getElementById(id)) {
close();
}
}
useEffect(() => { useEffect(() => {
if (show) { if (show) {
let popup = document.getElementById(id); let popup = document.getElementById(id);
@ -415,7 +423,7 @@ export function OptionsSummaryPopup({id, data}) {
const handleClick = (event) => { const handleClick = (event) => {
setShow(!show); setShow(!show);
if (!show) { if (!show) {
document.addEventListener("scroll", reposition, true); document.addEventListener("scroll", handleScroll, true);
} }
}; };