react95-native/dist/commonjs/styles/styleElements.js

Refreshed Windows 95 style UI components for your React Native app

"use strict";

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

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

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

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

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* eslint-disable import/prefer-default-export */
const Border = ({
  invert = false,
  variant = 'default',
  style = {},
  sharedStyle = {},
  radius = 0,
  theme,
  children
}) => {
  const wrapper = [];
  let outer;
  let inner;
  const themedBorders = (0, _styles.buildBorderStyles)(theme);

  if (variant === 'default') {
    outer = [themedBorders.defaultOuter];
    inner = [themedBorders.defaultInner];
  } else if (variant === 'raised') {
    outer = [themedBorders.outsideOuter];
    inner = [themedBorders.outsideInner];
  } else if (variant === 'well') {
    outer = [themedBorders.well, borderStyles.invert];
  } else if (variant === 'cutout') {
    outer = [themedBorders.cutoutOuter];
    inner = [themedBorders.cutoutInner];
  } else if (variant === 'flat') {
    outer = [themedBorders.flat];
  }

  const getSharedStyles = (() => {
    let r = radius + 4;
    return () => {
      r -= 2;
      return [borderStyles.position, sharedStyle, {
        borderRadius: radius ? r : 0
      }];
    };
  })();

  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [getSharedStyles(), invert ? borderStyles.invert : {}, ...wrapper, style]
  }, outer ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [getSharedStyles(), ...outer]
  }, inner ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [getSharedStyles(), ...inner]
  }, children) : children) : children);
};

const borderStyles = _reactNative.StyleSheet.create({
  position: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  },
  invert: {
    transform: [{
      rotate: '180deg'
    }]
  }
});

const BorderWithTheme = (0, _theming.withTheme)(Border);
exports.Border = BorderWithTheme;
//# sourceMappingURL=styleElements.js.map