@findify/react-components/lib/layouts/Tabs/index.js

Findify react UI components

var styles = {
  "root": "findify-layouts--tabs",
  "item": "findify-layouts--tabs__item",
  "active": "findify-layouts--tabs__active",
  "count": "findify-layouts--tabs__count"
};
import MapArray from "../../components/common/MapArray";
import Button from "../../components/Button";
import cx from 'classnames';
import { useCallback } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

var Tab = function Tab(_ref) {
  var theme = _ref.theme,
      item = _ref.item,
      onClickItem = _ref.onClickItem;
  var onClick = useCallback(function (e) {
    e.preventDefault();
    return onClickItem(item.key);
  }, []);
  return /*#__PURE__*/_jsxs(Button, {
    onClick: onClick,
    disabled: !item.count,
    className: cx(theme.item, item.active && theme.active),
    children: [item.title, !!item.count ? /*#__PURE__*/_jsx("span", {
      className: theme.count,
      children: item.count
    }) : null]
  });
};

var Tabs = function Tabs(_ref2) {
  var onClick = _ref2.onClick,
      widgets = _ref2.widgets,
      _ref2$theme = _ref2.theme,
      theme = _ref2$theme === void 0 ? styles : _ref2$theme;
  return /*#__PURE__*/_jsx("div", {
    className: theme.root,
    children: /*#__PURE__*/_jsx(MapArray, {
      keyAccessor: function keyAccessor(i) {
        return i.key;
      },
      array: widgets,
      factory: Tab,
      theme: theme,
      onClickItem: onClick
    })
  });
};

export default process.env.HOT ? require('react-hot-loader').hot(module)(Tabs) : Tabs;