@geneui/components/MobileNavigation/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 Badge from '../Badge/index.js';
import Icon from '../Icon/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../tslib.es6-f211516f.js';

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .mob-navigation-bar{background:var(--background);border-top:1px solid rgba(var(--background-sc-rgb),.06);bottom:0;font:600 1rem/1.4rem var(--font-family);left:0;position:fixed;text-align:center;width:100%;z-index:200}[data-gene-ui-version=\"2.16.5\"] .mob-navigation-bar>ul{display:table;table-layout:fixed;width:100%}[data-gene-ui-version=\"2.16.5\"] .mob-navigation-bar>ul>li{display:table-cell;overflow:hidden;padding:.8rem 0 .4rem;position:relative;transition:color .3s,opacity .3s}[data-gene-ui-version=\"2.16.5\"] .mob-navigation-bar>ul>li .badge{margin:0 auto;position:absolute;top:.8rem;width:5.2rem}[data-gene-ui-version=\"2.16.5\"] .mob-navigation-bar>ul>li .badge-right .badge{right:calc(50% - 2.5rem)}[data-gene-ui-version=\"2.16.5\"] .mob-navigation-bar>ul>li .badge-left .badge{left:calc(50% - 2.5rem)}[data-gene-ui-version=\"2.16.5\"] .mob-navigation-bar>ul>li:before{background:var(--hero);border-radius:0 0 .5rem .5rem;content:\"\";display:block;height:.3rem;left:calc(50% - 2.6rem);position:absolute;top:0;transform:translateY(-100%);transition:transform .3s;width:5.2rem}[data-gene-ui-version=\"2.16.5\"] .mob-navigation-bar>ul>li.active{color:var(--hero)}[data-gene-ui-version=\"2.16.5\"] .mob-navigation-bar>ul>li.active:before{transform:translateY(0)}[data-gene-ui-version=\"2.16.5\"] .mob-navigation-bar>ul>li.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.16.5\"] .mob-navigation-bar .icon{margin:0 0 .2rem}";
styleInject(css_248z);

function MobileNavigation(_ref) {
  let {
    list,
    activeSlug,
    onChange,
    className,
    ...restProps
  } = _ref;
  const handleClick = event => {
    const {
      index
    } = event.currentTarget.dataset;
    const item = list[index];
    onChange && onChange(item);
  };
  return /*#__PURE__*/React__default.createElement("div", _extends({
    className: classnames('mob-navigation-bar', className)
  }, restProps), /*#__PURE__*/React__default.createElement("ul", null, list.map((item, index) => /*#__PURE__*/React__default.createElement("li", {
    key: item.slug,
    "data-index": index,
    className: classnames({
      active: item.slug === activeSlug,
      disabled: item.disabled
    }),
    onClick: !item.disabled ? handleClick : null
  }, item.badge && /*#__PURE__*/React__default.createElement("div", {
    className: "badge-".concat(item.badge.position || 'right')
  }, /*#__PURE__*/React__default.createElement(Badge, {
    size: "default",
    maxCount: item.badge.maxCount,
    count: item.badge.count
  })), /*#__PURE__*/React__default.createElement(Icon, {
    type: item.icon
  }), /*#__PURE__*/React__default.createElement("p", {
    className: "ellipsis-text"
  }, item.title)))));
}
MobileNavigation.propTypes = {
  /**
   * Array of menu items data
   */
  list: PropTypes.arrayOf(PropTypes.shape({
    /**
     * Title for navigation item
     */
    title: PropTypes.string,
    /**
     *
     */
    slug: PropTypes.string,
    /**
     * Icon for navigation item
     */
    icon: PropTypes.string,
    /**
     * Notification Badge
     * count - the value of badge
     * maxCount - if the count is greater than the max count, the Badge shows maxCount+
     * position - position of Badge
     */
    badge: PropTypes.shape({
      count: PropTypes.number,
      maxCount: PropTypes.number,
      position: PropTypes.oneOf(['left', 'right'])
    })
  }).isRequired),
  /**
   * Initially selected item
   */
  activeSlug: PropTypes.string,
  /**
   * CSS class name for element
   */
  className: PropTypes.string,
  /**
   * Fires event when user click on one of the items
   * (item: Object) => void
   */
  onChange: PropTypes.func
};

export { MobileNavigation as default };