react95-native/dist/module/components/Tabs/Tabs.js

Refreshed Windows 95 style UI components for your React Native app

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 React, { useState } from 'react';
import { StyleSheet, TouchableHighlight, View } from 'react-native';
import { withTheme } from '../../core/theming';
import { padding, margin, blockSizes, buildBorderStyles } from '../../styles/styles';
import { Border } from '../../styles/styleElements';
import { Text, Panel } from '../..';

const Tabs = ({
  children,
  onChange,
  stretch = false,
  style,
  theme,
  value,
  ...rest
}) => {
  const childrenWithProps = React.Children.map(children, child => {
    if (! /*#__PURE__*/React.isValidElement(child)) {
      return null;
    }

    const tabProps = {
      selected: child.props.value === value,
      onPress: onChange,
      stretch
    };
    return /*#__PURE__*/React.cloneElement(child, tabProps);
  });
  return /*#__PURE__*/React.createElement(View, _extends({
    accessibilityRole: "tablist",
    style: [styles.tabs, style]
  }, rest), childrenWithProps, /*#__PURE__*/React.createElement(View, {
    style: [styles.tabBodyBorder, {
      backgroundColor: theme.borderLight,
      borderTopColor: theme.borderLightest
    }]
  }));
};

const Body = ({
  children,
  style,
  ...rest
}) => {
  return /*#__PURE__*/React.createElement(Panel, _extends({
    style: [styles.body, style]
  }, rest), children);
};

const Tab = ({
  children,
  onPress = () => {},
  selected,
  stretch,
  style,
  theme,
  value,
  ...rest
}) => {
  const [isPressed, setIsPressed] = useState(false);
  const borderStyles = buildBorderStyles(theme);
  return /*#__PURE__*/React.createElement(TouchableHighlight, _extends({
    onPress: () => onPress(value),
    onHideUnderlay: () => setIsPressed(false),
    onShowUnderlay: () => setIsPressed(true),
    underlayColor: "none",
    style: [styles.tab, {
      zIndex: selected ? 1 : 0
    }, stretch ? {
      flexGrow: 1
    } : {
      width: 'auto'
    }, selected ? margin(0, -8) : margin(0, 0), style],
    accessibilityTraits: selected ? ['button', 'selected'] : 'button',
    accessibilityComponentType: "button",
    accessibilityRole: "tab",
    accessibilityState: {
      selected
    }
  }, rest), /*#__PURE__*/React.createElement(View, {
    style: [styles.tabContent, {
      height: selected ? blockSizes.md + 4 : blockSizes.md
    }, selected ? padding(0, 16) : padding(0, 10)]
  }, /*#__PURE__*/React.createElement(Border, {
    radius: 6,
    style: [{
      backgroundColor: theme.material
    }],
    sharedStyle: {
      borderBottomWidth: 0,
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0
    }
  }), /*#__PURE__*/React.createElement(Text, null, children), /*#__PURE__*/React.createElement(View, {
    style: [styles.mask, {
      backgroundColor: theme.material
    }]
  }), isPressed && /*#__PURE__*/React.createElement(View, {
    style: [styles.focusOutline, borderStyles.focusOutline]
  })));
};

const styles = StyleSheet.create({
  tabs: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'flex-end',
    paddingHorizontal: 8,
    zIndex: 1,
    bottom: -2
  },
  body: {
    display: 'flex',
    padding: 16
  },
  tab: {
    alignSelf: 'flex-end'
  },
  tabContent: {
    justifyContent: 'center',
    width: 'auto'
  },
  tabBodyBorder: {
    height: 4,
    position: 'absolute',
    left: 4,
    right: 4,
    bottom: -2,
    borderTopWidth: 2
  },
  mask: {
    height: 4,
    position: 'absolute',
    left: 4,
    right: 4,
    bottom: -2
  },
  focusOutline: {
    position: 'absolute',
    left: 6,
    top: 6,
    bottom: 4,
    right: 6
  }
});
const TabWithTheme = withTheme(Tab);
const BodyWithTheme = withTheme(Body);
Tabs.Tab = TabWithTheme;
Tabs.Body = BodyWithTheme;
export default withTheme(Tabs);
//# sourceMappingURL=Tabs.js.map