@fluent-windows/core/es/Tabs/Tabs.js

React components that inspired by Microsoft's Fluent Design System.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import * as React from 'react';
import classNames from 'classnames';
import { createUseStyles } from '@fluent-windows/styles';
import { styles } from './Tabs.styled';
import { TabsPropTypes } from './Tabs.type';
import Panel from './components/Panel';
import Navigation from '../Navigation';
import Item from '../Item';
import Box from '../Box';
export const name = 'Tabs';
const useStyles = createUseStyles(styles, {
  name
});
const Tabs = React.forwardRef((props, ref) => {
  const {
    as = 'div',
    className: classNameProp,
    value,
    onChange,
    children,
    ...rest
  } = props;
  const values = React.useMemo(() => React.Children.map(children, child => ({
    value: child.props.value,
    title: child.props.title
  })), [children]);
  const theChildren = React.useMemo(() => React.Children.map(children, child => React.cloneElement(child, {
    hidden: child.props.value !== value
  })), [children, value]);
  const classes = useStyles(props);
  const className = classNames(classes.root, classNameProp);
  return React.createElement(Box, _extends({
    className: className,
    as: as,
    ref: ref
  }, rest), React.createElement(Navigation, _extends({
    horizontal: true,
    value: value,
    onChange: onChange,
    boxShadow: "2"
  }, rest), values.map(({
    value,
    title
  }) => React.createElement(Item, {
    value: value,
    key: value
  }, title))), React.createElement(Box, {
    className: classes.panel
  }, theChildren));
});
Object.defineProperty(Tabs, 'Panel', {
  get() {
    return Panel;
  }

});
Tabs.displayName = `F${name}`;
Tabs.propTypes = TabsPropTypes;
export default Tabs;