smetaniny-react-bridge

Пакет реализован в рамках изучения паттерна "Мост" в React

Сценарий

Представим, что ваш интернет-магазин продает различные категории одежды: женскую, мужскую одежду, платья, аксессуары и другие товары. Необходимо реализовать гибкую систему отображения продуктов, которая будет изменяться в зависимости от типа устройства (мобильное или десктопное) и типа клиента (оптовый или розничный).

Для решения этой задачи можно использовать паттерн "Мост" (Bridge), который позволяет разделить абстракцию (в данном случае — отображение продукта) и реализацию (конкретные компоненты для отображения разных категорий товаров).

Структура паттерна

Паттерн "Мост" позволяет отделить абстракцию от ее реализации, так что их можно изменять независимо друг от друга. В этом примере:

Абстракция — это компонент, отвечающий за отображение продукта.
Реализация — конкретные компоненты, которые зависят от типа устройства (мобильное или десктопное) и типа клиента ( оптовый или розничный).

import React from 'react';
import {
    Accessory,
    Dress,
    MenSuit,
    MobileProductDisplay,
    WebProductDisplay,
    WomenSuit
} from "react-bridge";

/**
 * Компонент ObjectAdapterController демонстрирует использование паттерна Object Adapter.
 */
const BridgeController: React.FC = () => {
    // Условие, определяющее устройство (в данном примере просто флаг)
    const isMobile: boolean = window.innerWidth < 768; // Пример условной проверки для мобильного


    return (
        <div>
            <h1>Интернет-магазин</h1>
            {isMobile ? (
                <div>
                    <h2>Мобильная презентация</h2>
                    <MobileProductDisplay product={<WomenSuit />} />
                    <MobileProductDisplay product={<MenSuit />} />
                    <MobileProductDisplay product={<Dress />} />
                    <MobileProductDisplay product={<Accessory />} />
                </div>
            ) : (
                <div>
                    <h2>Веб-презентация</h2>
                    <WebProductDisplay product={<WomenSuit />} />
                    <WebProductDisplay product={<MenSuit />} />
                    <WebProductDisplay product={<Dress />} />
                    <WebProductDisplay product={<Accessory />} />
                </div>
            )}
        </div>
    );
};

export default BridgeController;