@redocly/theme/lib/components/Product/ProductPicker.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProductPicker = ProductPicker;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
const Dropdown_1 = require("../../components/Dropdown/Dropdown");
const Button_1 = require("../../components/Button/Button");
const utils_1 = require("../../core/utils");
const hooks_1 = require("../../core/hooks");
const Product_1 = require("../../components/Product/Product");
const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
function ProductPicker() {
    const { currentProduct, products, setProduct } = (0, hooks_1.useProductPicker)();
    const { useTranslate } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    const productComponents = products.map((product) => {
        return {
            content: react_1.default.createElement(Product_1.Product, { product: product }),
            suffix: product.slug === (currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.slug) && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null),
            onAction: () => {
                setProduct(product);
            },
            active: product.slug === (currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.slug),
        };
    });
    return products.length ? (react_1.default.createElement(ProductDropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, { variant: "ghost" }, currentProduct ? (react_1.default.createElement(Product_1.Product, { product: currentProduct })) : (react_1.default.createElement("span", { "data-translation-key": "navbar.products" }, translate('navbar.products', 'Products')))), triggerEvent: "hover" },
        react_1.default.createElement(DropdownMenu_1.DropdownMenu, { items: productComponents }))) : null;
}
const ProductDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).attrs(() => ({
    dataAttributes: {
        'data-component-name': 'Product/ProductPicker',
    },
})) `
  display: none;
  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
    display: block;
  }

  --dropdown-menu-item-justify-content: space-between;

  --dropdown-menu-font-size: var(--product-picker-dropdown-font-size);
  --dropdown-menu-font-weight: var(--product-picker-dropdown-font-weight);
  --dropdown-menu-line-height: var(--product-picker-dropdown-line-height);
  --dropdown-menu-text-color: var(--product-picker-dropdown-text-color);
  --dropdown-menu-min-width: var(--product-picker-dropdown-min-width);
  --dropdown-menu-max-width: var(--product-picker-dropdown-max-width);
  --dropdown-menu-max-height: var(--product-picker-dropdown-max-height);
  --dropdown-menu-padding: var(--product-picker-dropdown-padding);
  --dropdown-menu-border-radius: var(--product-picker-dropdown-border-radius);
  --dropdown-menu-box-shadow: var(--product-picker-dropdown-box-shadow);
  --dropdown-menu-border-color: var(--product-picker-dropdow--border-color);
  --dropdown-menu-bg-color: var(--product-picker-dropdown-bg-color);
  --dropdown-menu-item-padding-horizontal: var(--product-picker-dropdown-item-padding-horizontal);
  --dropdown-menu-item-padding-vertical: var(--product-picker-dropdown-item-padding-vertical);
  --dropdown-menu-item-separator-padding-top: var(
    --product-picker-dropdown-item-separator-padding-top
  );
  --dropdown-menu-item-separator-padding-bottom: var(
    --product-picker-dropdown-item-separator-padding-bottom
  );
  --dropdown-menu-item-border-radius: var(--product-picker-dropdown-item-border-radius);
  --dropdown-menu-item-bg-color-active: var(--product-picker-dropdown-item-bg-color-active);
  --dropdown-menu-item-bg-color-hover: var(--product-picker-dropdown-item-bg-color-hover);
  --dropdown-menu-item-bg-color-disabled: var(--product-picker-dropdown-item-bg-color-disabled);
  --dropdown-menu-item-separator-border-color: var(
    --product-picker-dropdown-item-separator-border-color
  );
  --dropdown-menu-item-color-dangerous: var(--product-picker-dropdown-item-color-dangerous);
  --dropdown-menu-item-color-disabled: var(--product-picker-dropdown-item-color-disabled);
  --dropdown-menu-item-color-active: var(--product-picker-dropdown-item-color-active);
  --dropdown-menu-item-color-hover: var(--product-picker-dropdown-item-color-hover);
`;
//# sourceMappingURL=ProductPicker.js.map