Fix react-beautiful-dnd warning in development

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-07-18 10:35:11 +08:00
parent 5eaeecbf5b
commit c7527fbcf0
1 changed files with 23 additions and 17 deletions

View File

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