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

Refreshed Windows 95 style UI components for your React Native app

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _reactNative = require("react-native");

var _theming = require("../../core/theming");

var _styles = require("../../styles/styles");

var _styleElements = require("../../styles/styleElements");

var _ = require("../..");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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); }

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

    const tabProps = {
      selected: child.props.value === value,
      onPress: onChange,
      stretch
    };
    return /*#__PURE__*/_react.default.cloneElement(child, tabProps);
  });

  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
    accessibilityRole: "tablist",
    style: [styles.tabs, style]
  }, rest), childrenWithProps, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.tabBodyBorder, {
      backgroundColor: theme.borderLight,
      borderTopColor: theme.borderLightest
    }]
  }));
};

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

const Tab = ({
  children,
  onPress = () => {},
  selected,
  stretch,
  style,
  theme,
  value,
  ...rest
}) => {
  const [isPressed, setIsPressed] = (0, _react.useState)(false);
  const borderStyles = (0, _styles.buildBorderStyles)(theme);
  return /*#__PURE__*/_react.default.createElement(_reactNative.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 ? (0, _styles.margin)(0, -8) : (0, _styles.margin)(0, 0), style],
    accessibilityTraits: selected ? ['button', 'selected'] : 'button',
    accessibilityComponentType: "button",
    accessibilityRole: "tab",
    accessibilityState: {
      selected
    }
  }, rest), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.tabContent, {
      height: selected ? _styles.blockSizes.md + 4 : _styles.blockSizes.md
    }, selected ? (0, _styles.padding)(0, 16) : (0, _styles.padding)(0, 10)]
  }, /*#__PURE__*/_react.default.createElement(_styleElements.Border, {
    radius: 6,
    style: [{
      backgroundColor: theme.material
    }],
    sharedStyle: {
      borderBottomWidth: 0,
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0
    }
  }), /*#__PURE__*/_react.default.createElement(_.Text, null, children), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.mask, {
      backgroundColor: theme.material
    }]
  }), isPressed && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.focusOutline, borderStyles.focusOutline]
  })));
};

const styles = _reactNative.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 = (0, _theming.withTheme)(Tab);
const BodyWithTheme = (0, _theming.withTheme)(Body);
Tabs.Tab = TabWithTheme;
Tabs.Body = BodyWithTheme;

var _default = (0, _theming.withTheme)(Tabs);

exports.default = _default;
//# sourceMappingURL=Tabs.js.map