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

Fix react-beautiful-dnd warning in development 

Signed-off-by: Egor Savkin <es@m-labs.hk>
pull/83/head
Egor Savkin 2023-07-18 10:35:11 +08:00
parent 5eaeecbf5b
commit c7527fbcf0
1 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
static/js/shop.jsx
View File

@ -406,6 +406,7 @@ class ProductItem extends React.PureComponent {
static get propTypes() { static get propTypes() {
return { return {
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
index: PropTypes.number.isRequired,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
name_codename: PropTypes.string, name_codename: PropTypes.string,
price: PropTypes.number.isRequired, price: PropTypes.number.isRequired,
@ -433,6 +434,7 @@ class ProductItem extends React.PureComponent {
render() { render() {
const { const {
id, id,
index,
name, name,
name_codename, name_codename,
price, price,
@ -482,7 +484,7 @@ class ProductItem extends React.PureComponent {
<img src="/images/shop/icon-add.svg" alt="add" /> <img src="/images/shop/icon-add.svg" alt="add" />
</button> </button>
<Draggable draggableId={id}> <Draggable draggableId={id} index={index}>
{(provided, snapshot) => ( {(provided, snapshot) => (
<React.Fragment> <React.Fragment>
<img <img
@ -1510,7 +1512,8 @@ class Backlog extends React.PureComponent {
const ordered_groups = data.categories.map(groupItem => ({ name: groupItem.name, const ordered_groups = data.categories.map(groupItem => ({ name: groupItem.name,
items: groupItem.itemIds.map(itemId => items[itemId]) items: groupItem.itemIds.map(itemId => items[itemId])
})); }));
const groups = ordered_groups.map((group, g_index) => { let item_index = -1;
const groups = ordered_groups.map((group, g_index) => {
return ( return (
<div className="accordion-item" key={`${group.name}`}> <div className="accordion-item" key={`${group.name}`}>
<h2 className="accordion-header"> <h2 className="accordion-header">
@ -1522,21 +1525,24 @@ class Backlog extends React.PureComponent {
<div id={`collapse${g_index}`} className="accordion-collapse collapse" aria-labelledby="headingOne" <div id={`collapse${g_index}`} className="accordion-collapse collapse" aria-labelledby="headingOne"
data-bs-parent="#accordion_categories"> data-bs-parent="#accordion_categories">
<div className="accordion-body"> <div className="accordion-body">
{group.items.map(item => ( {group.items.map(item => {
<ProductItem item_index++;
key={item.id} return (
id={item.id} <ProductItem
name={`${item.name_number} ${item.name}`} key={item.id}
name_codename={item.name_codename} id={item.id}
price={item.price} index={item_index}
currency={currency} name={`${item.name_number} ${item.name}`}
image={`/images/${item.image}`} name_codename={item.name_codename}
specs={item.specs} price={item.price}
datasheet_file={item.datasheet_file} currency={currency}
datasheet_name={item.datasheet_name} image={`/images/${item.image}`}
onClickAddItem={onClickAddItem} specs={item.specs}
></ProductItem> datasheet_file={item.datasheet_file}
))} datasheet_name={item.datasheet_name}
onClickAddItem={onClickAddItem}
></ProductItem>
)})}
</div> </div>
</div> </div>
</div> </div>