@geezee/react-ui/esm/tabs/tabs.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo, useState, forwardRef, useImperativeHandle, useEffect, useCallback } from 'react';
import { TabsContext } from './tabs-context';
import useTheme from '../styles/use-theme';
import TabsNav from './tabs-nav';
var defaultProps = {
  variant: 'line',
  className: ''
};
var Tabs = forwardRef(function (_ref, ref) {
  var userCustomInitialValue = _ref.initialValue,
      value = _ref.value,
      children = _ref.children,
      variant = _ref.variant,
      onChange = _ref.onChange,
      className = _ref.className,
      showDivider = _ref.showDivider,
      props = _objectWithoutProperties(_ref, ["initialValue", "value", "children", "variant", "onChange", "className", "showDivider"]);

  var theme = useTheme();

  var _useState = useState(userCustomInitialValue),
      _useState2 = _slicedToArray(_useState, 2),
      currentTab = _useState2[0],
      _setCurrentTab = _useState2[1];

  var _useState3 = useState([]),
      _useState4 = _slicedToArray(_useState3, 2),
      tabs = _useState4[0],
      setTabs = _useState4[1];

  useImperativeHandle(ref, function () {
    return {
      setCurrentTab: function setCurrentTab(v) {
        _setCurrentTab(v);
      },
      getCurrentTab: function getCurrentTab() {
        return currentTab;
      }
    };
  }, [currentTab]);
  var register = useCallback(function (next) {
    setTabs(function (last) {
      if ('remove' in next) {
        return last.filter(function (_ref2) {
          var value = _ref2.value;
          return value !== next.remove;
        });
      } else {
        var hasItem = last.find(function (item) {
          return item.value === next.value;
        });
        if (!hasItem) return [].concat(_toConsumableArray(last), [next]);
        return last.map(function (item) {
          if (item.value !== next.value) return item;
          return _extends(_extends({}, item), next);
        });
      }
    });
  }, []);
  var ctx = useMemo(function () {
    return {
      register: register,
      currentValue: currentTab
    };
  }, [currentTab]);

  var clickHandler = function clickHandler(tabValue) {
    if (!value) {
      //uncontrolled
      _setCurrentTab(tabValue);
    }

    onChange && onChange(tabValue);
  };

  useEffect(function () {
    //controlled component
    if (value) {
      _setCurrentTab(value);
    }
  }, [value]);
  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
    value: ctx
  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: _JSXStyle.dynamic([["2404665416", [showDivider ? "1px solid ".concat(theme.palette.border) : '']]]) + " " + (props && props.className != null && props.className || "tabs ".concat(className, " ").concat(variant || 'line'))
  }), /*#__PURE__*/React.createElement("header", {
    className: _JSXStyle.dynamic([["2404665416", [showDivider ? "1px solid ".concat(theme.palette.border) : '']]])
  }, tabs.map(function (_ref3) {
    var value = _ref3.value,
        disabled = _ref3.disabled,
        extra = _objectWithoutProperties(_ref3, ["value", "disabled"]);

    return /*#__PURE__*/React.createElement("div", {
      role: "button",
      key: value,
      onClick: function onClick() {
        return !disabled && clickHandler(value);
      },
      className: _JSXStyle.dynamic([["2404665416", [showDivider ? "1px solid ".concat(theme.palette.border) : '']]]) + " " + "tab ".concat(currentTab === value ? 'active' : '', " ").concat(disabled ? 'disabled' : '')
    }, /*#__PURE__*/React.createElement(TabsNav, _extends({
      variant: variant,
      disabled: disabled,
      active: currentTab === value
    }, extra)));
  })), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["2404665416", [showDivider ? "1px solid ".concat(theme.palette.border) : '']]]) + " " + "content"
  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "2404665416",
    dynamic: [showDivider ? "1px solid ".concat(theme.palette.border) : '']
  }, "header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:".concat(showDivider ? "1px solid ".concat(theme.palette.border) : '', ";}.__jsx-style-dynamic-selector::-webkit-scrollbar{display:none;}.content.__jsx-style-dynamic-selector{padding-top:0.625rem;}.tab.__jsx-style-dynamic-selector{cursor:pointer;outline:0;text-transform:capitalize;font-size:1rem;margin:0 1px;-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;line-height:1.25rem;position:relative;font-variant-numeric:tabular-nums;}.tab.__jsx-style-dynamic-selector:first-of-type{margin-left:0;}"))));
});
Tabs.defaultProps = defaultProps;
export default Tabs;