@confi/conflux-react-ui-test-package/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, { useEffect, useMemo, useState } from 'react';
import useTheme from '../styles/use-theme';
import { TabsContext } from './tabs-context';
import useCurrentState from '../utils/use-current-state';
import useWarning from '../utils/use-warning';
var defaultProps = {
  className: '',
  hideDivider: false
};

var Tabs = function Tabs(_ref) {
  var userCustomInitialValue = _ref.initialValue,
      value = _ref.value,
      hideDivider = _ref.hideDivider,
      children = _ref.children,
      onChange = _ref.onChange,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, ["initialValue", "value", "hideDivider", "children", "onChange", "className"]);

  var theme = useTheme();

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

  var _useCurrentState = useCurrentState([]),
      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
      tabs = _useCurrentState2[0],
      setTabs = _useCurrentState2[1],
      tabsRef = _useCurrentState2[2];

  var register = function register(next) {
    var hasItem = tabsRef.current.find(function (item) {
      return item.value === next.value;
    });

    if (hasItem) {
      useWarning('The "value" of each "Tabs.Item" must be unique.', 'Tabs');
    }

    setTabs([].concat(_toConsumableArray(tabsRef.current), [next]));
  };

  var unregister = function unregister(next) {
    var nextTabs = tabsRef.current.filter(function (item) {
      return item.value !== next.value;
    });
    setTabs(_toConsumableArray(nextTabs));
  };

  var initialValue = useMemo(function () {
    return {
      register: register,
      unregister: unregister,
      currentValue: selfValue,
      inGroup: true
    };
  }, [selfValue]);
  useEffect(function () {
    if (value === undefined) return;
    setSelfValue(value);
  }, [value]);

  var clickHandler = function clickHandler(item) {
    if (item.disabled) return;
    setSelfValue(item.value);
    onChange && onChange(item.value);
  };

  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
    value: initialValue
  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
    className: _JSXStyle.dynamic([["1385375080", [theme.palette.border, theme.layout.gapQuarter, theme.layout.gapQuarter, theme.layout.gapHalf, theme.palette.accents_6, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3]]]) + " " + (props && props.className != null && props.className || "tabs ".concat(className))
  }), /*#__PURE__*/React.createElement("header", {
    className: _JSXStyle.dynamic([["1385375080", [theme.palette.border, theme.layout.gapQuarter, theme.layout.gapQuarter, theme.layout.gapHalf, theme.palette.accents_6, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3]]]) + " " + ((hideDivider ? 'hide-divider' : '') || "")
  }, tabs.map(function (item, index) {
    return /*#__PURE__*/React.createElement("div", {
      key: item.value + index,
      onClick: function onClick() {
        return clickHandler(item);
      },
      className: _JSXStyle.dynamic([["1385375080", [theme.palette.border, theme.layout.gapQuarter, theme.layout.gapQuarter, theme.layout.gapHalf, theme.palette.accents_6, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3]]]) + " " + "tab ".concat(selfValue === item.value ? 'active' : '', " ").concat(item.disabled ? 'disabled' : '')
    }, item.label);
  })), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["1385375080", [theme.palette.border, theme.layout.gapQuarter, theme.layout.gapQuarter, theme.layout.gapHalf, theme.palette.accents_6, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3]]]) + " " + "content"
  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1385375080",
    dynamic: [theme.palette.border, theme.layout.gapQuarter, theme.layout.gapQuarter, theme.layout.gapHalf, theme.palette.accents_6, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3]
  }, ".tabs.__jsx-style-dynamic-selector{width:initial;}header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid ".concat(theme.palette.border, ";}.hide-divider.__jsx-style-dynamic-selector{border-bottom:none;}.content.__jsx-style-dynamic-selector{padding-top:0.625rem;}.tab.__jsx-style-dynamic-selector{padding:").concat(theme.layout.gapQuarter, " calc(0.65 * ").concat(theme.layout.gapQuarter, ");cursor:pointer;outline:0;-webkit-transition:all 200ms ease;transition:all 200ms ease;text-transform:capitalize;font-size:1rem;margin:0 calc(0.8 * ").concat(theme.layout.gapHalf, ");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;line-height:1.25rem;position:relative;}.tab.__jsx-style-dynamic-selector:after{position:absolute;content:'';bottom:-1px;left:0;right:0;width:100%;height:2px;-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;}"))));
};

Tabs.defaultProps = defaultProps;
export default Tabs;