src/components/Cart/ItemOrderCard.jsx - master - DevDenzo/DigitalStore

src/components/Cart/ItemOrderCard.jsx
92 строки3 KB
Denis Sklyarskij
Финальный коммит
29 ноя 2025, 18:05
29 ноя 2025, 18:05c8d7804
import React, { memo } from 'react';
import { useDispatch } from "react-redux"
import { removeFromCart } from "../../actions/cartActions";
import { useMediaQuery } from "react-responsive";
import PropTypes from 'prop-types';
import { Check2, Trash, CardText, Cash } from 'react-bootstrap-icons';
import './ItemOrderCard.css';

const ItemOrderCard = memo(({ item, onHandleChange, checked }) => {
    const isLarge = useMediaQuery({ query: '(max-width: 992px)' });

    const dispatch = useDispatch();

    const handleRemoveFromCart = (item) => {
        dispatch(removeFromCart(item.id))
    };

    return (
        <div className="item-order-card">
            <div className="item-order-card__checkbox-wrap">
                <input
                    id={`check-${item.id}`}
                    type="checkbox"
                    className="item-order-card__toggle"
                    onChange={(e) => {
                        /* Вызываем метод с текущим id и состоянием чекбокса */
                        onHandleChange(item.id, e.target.checked);

                        /* Удаляем из корзины только если снят маркер у чекбокса */
                        if (!e.target.checked) {
                            handleRemoveFromCart(item);
                        }
                    }}
                    checked={checked}
                />
                <label
                    htmlFor={`check-${item.id}`}
                    className="item-order-card__label"
                >
                    <Check2 size={18} />
                </label>
            </div>
            <img
                src={item.image}
                className="item-order-card__image"
                alt="Позиция в заказе"
            />
            <div className="item-order-card__content">
                <h5
                    className="item-order-card__title"
                >
                    {item.name}
                </h5>
                {isLarge && (
                    <div className="item-order-card__text item-order-card__text--important">
                        <span className="item-order-card__icon">
                           <Cash size={18} />
                        </span>
                        { item.price }&#8381;
                    </div>
                )}
                <div className="item-order-card__text item-order-card__text--highlighted">
                    <span className="item-order-card__icon">
                        <CardText size={18} />
                    </span>
                    Постоплата
                </div>
                {isLarge && (
                    <button
                        type="button"
                        className="item-order-card__button"
                        onClick={() => handleRemoveFromCart(item)}
                    >
                        <Trash size={18} />
                    </button>
                )}
            </div>
        </div>
    );
});

ItemOrderCard.propTypes = {
    item: PropTypes.exact({
        id: PropTypes.number.isRequired,
        image: PropTypes.string.isRequired,
        name: PropTypes.string.isRequired,
        price: PropTypes.number.isRequired,
    }).isRequired,
    onHandleChange: PropTypes.func.isRequired,
};

export default ItemOrderCard;