@geneui/components/Products/index.js

The Gene UI components library designed for BI tools

import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { s as screenTypes } from '../configs-00612ce0.js';
import '../dateValidation-67caec66.js';
import 'react-dom';
import useDeviceType from '../hooks/useDeviceType.js';
import Icon from '../Icon/index.js';
import Divider from '../Divider/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../_commonjsHelpers-24198af3.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../tslib.es6-f211516f.js';

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .products-switcher-holder{display:flex;flex-wrap:wrap;justify-content:flex-start;padding:.5rem 2rem;text-align:center;width:100%}[data-gene-ui-version=\"2.16.5\"] .products-switcher-holder .divider{margin-left:auto;margin-right:auto}[data-gene-ui-version=\"2.16.5\"] .product-item{border:1px solid #0000;border-radius:1rem;cursor:pointer;display:flex;flex-wrap:wrap;font:600 1.2rem/1.42 var(--font-family);justify-content:center;margin:.5rem 0;padding:1rem .5rem;text-align:center;width:33.3333333333%}[data-gene-ui-version=\"2.16.5\"] .product-item .icon{align-items:center;background:rgba(var(--background-sc-rgb),.05);border-radius:100%;display:flex;height:5rem;justify-content:center;margin:0 0 .5rem;transition:color .2s,background .2s;width:5rem}[data-gene-ui-version=\"2.16.5\"] .product-item p{width:100%}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .product-item:hover .icon{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.16.5\"] .product-item.active .icon{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.5\"] .product-item.active{pointer-events:none}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .product-item:hover{border-color:rgba(var(--background-sc-rgb),.11)}}";
styleInject(css_248z);

function Products(_ref) {
  let {
    list,
    activeSlug,
    onChange,
    favorites,
    className,
    screenType,
    ...restProps
  } = _ref;
  const {
    isMobile
  } = useDeviceType(screenType);
  const hasFavorites = favorites.length;
  const handleClick = event => {
    const {
      index
    } = event.currentTarget.dataset;
    const item = list[index];
    onChange && onChange(item);
  };
  return /*#__PURE__*/React__default.createElement("div", _extends({
    className: classnames('products-switcher-holder', className)
  }, restProps), list.map((item, index) => /*#__PURE__*/React__default.createElement("button", {
    key: item.slug,
    className: classnames('product-item', {
      active: item.slug === activeSlug
    }),
    "data-index": index,
    onClick: handleClick,
    title: item.title
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: item.icon
  }), /*#__PURE__*/React__default.createElement("p", {
    className: "ellipsis-text"
  }, item.title))), hasFavorites > 0 && /*#__PURE__*/React__default.createElement(Divider, {
    type: "horizontal",
    size: isMobile ? '76%' : '100%'
  }), hasFavorites > 0 && favorites.map((item, index) => /*#__PURE__*/React__default.createElement("button", {
    key: item.slug,
    className: classnames('product-item', {
      active: item.slug === activeSlug
    }),
    "data-index": index,
    onClick: handleClick,
    title: item.title
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: item.icon
  }), /*#__PURE__*/React__default.createElement("p", {
    className: "ellipsis-text"
  }, item.title))));
}
const propShape = PropTypes.arrayOf(PropTypes.shape({
  /**
   * Product title
   */
  title: PropTypes.string,
  /**
   * Product slug
   */
  slug: PropTypes.string,
  /**
   * Product icon
   */
  icon: PropTypes.string
}));
Products.propTypes = {
  /**
   * Array of products data
   */
  list: propShape.isRequired,
  /**
   * Array of favorite products data
   */
  favorites: propShape,
  /**
   * Selected item
   */
  activeSlug: PropTypes.string,
  /**
   * CSS class name for element
   */
  className: PropTypes.string,
  /**
   * Callback fires when click on product
   */
  onClick: PropTypes.func,
  /**
   * Pass screenType to control appearance, weather it should be mobile version etc.
   */
  screenType: PropTypes.oneOf(screenTypes)
};
Products.defaultProps = {
  favorites: []
};

export { Products as default };