@geist-ui/react/esm/tabs/tabs-item.js

Modern and minimalist React UI library.

import _JSXStyle from "../styled-jsx.es.js";
import React, { useEffect, useMemo } from 'react';
import { useTabsContext } from './tabs-context';
import useTheme from '../use-theme';
import useScaleable, { withScaleable } from '../use-scaleable';
var defaultProps = {
  disabled: false
};

var TabsItemComponent = function TabsItemComponent(_ref) {
  var children = _ref.children,
      value = _ref.value,
      label = _ref.label,
      disabled = _ref.disabled;
  var theme = useTheme();

  var _useScaleable = useScaleable(),
      SCALES = _useScaleable.SCALES;

  var _useTabsContext = useTabsContext(),
      register = _useTabsContext.register,
      currentValue = _useTabsContext.currentValue;

  var isActive = useMemo(function () {
    return currentValue === value;
  }, [currentValue, value]);

  var TabsInternalCell = function TabsInternalCell(_ref2) {
    var currentValue = _ref2.value,
        onClick = _ref2.onClick;

    var clickHandler = function clickHandler() {
      if (disabled) return;
      onClick && onClick(value);
    };

    return /*#__PURE__*/React.createElement("div", {
      role: "button",
      key: value,
      onClick: clickHandler,
      className: _JSXStyle.dynamic([["1613686401", [theme.palette.accents_6, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.334), SCALES.pr(0.218), SCALES.pb(0.334), SCALES.pl(0.218), SCALES.mt(0), SCALES.mr(0.5334), SCALES.mb(0), SCALES.ml(0.5334), theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3]]]) + " " + "tab ".concat(value === currentValue ? 'active' : '', " ").concat(disabled ? 'disabled' : '')
    }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
      id: "1613686401",
      dynamic: [theme.palette.accents_6, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.334), SCALES.pr(0.218), SCALES.pb(0.334), SCALES.pl(0.218), SCALES.mt(0), SCALES.mr(0.5334), SCALES.mb(0), SCALES.ml(0.5334), theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3]
    }, ".tab.__jsx-style-dynamic-selector{box-sizing:border-box;cursor:pointer;outline:0;-webkit-transition:all 200ms ease;transition:all 200ms ease;text-transform:capitalize;white-space:nowrap;color:".concat(theme.palette.accents_6, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:").concat(SCALES.font(1), ";line-height:1.25em;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.334), " ").concat(SCALES.pr(0.218), " ").concat(SCALES.pb(0.334), " ").concat(SCALES.pl(0.218), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0.5334), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.5334), ";}.tab.__jsx-style-dynamic-selector:after{position:absolute;content:'';bottom:-1px;left:0;right:0;width:100%;height:2px;border-radius:4px;-webkit-transform:scaleX(0.75);-ms-transform:scaleX(0.75);transform:scaleX(0.75);background-color:transparent;-webkit-transition:all 200ms ease;transition:all 200ms ease;}.tab.active.__jsx-style-dynamic-selector:after{background-color:").concat(theme.palette.foreground, ";-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}.tab.__jsx-style-dynamic-selector svg{max-height:1em;margin-right:5px;}.tab.__jsx-style-dynamic-selector:first-of-type{margin-left:0;}.tab.active.__jsx-style-dynamic-selector{color:").concat(theme.palette.foreground, ";}.tab.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}")));
  };

  TabsInternalCell.displayName = 'GeistTabsInternalCell';
  useEffect(function () {
    register && register({
      value: value,
      cell: TabsInternalCell
    });
  }, [value, label, disabled, TabsInternalCell]);
  /* eslint-disable react/jsx-no-useless-fragment */

  return isActive ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : null;
};

TabsItemComponent.defaultProps = defaultProps;
TabsItemComponent.displayName = 'GeistTabsItem';
var TabsItem = withScaleable(TabsItemComponent);
export default TabsItem;
/* eslint-enable */