react95-native
Version:
Refreshed Windows 95 style UI components for your React Native app
73 lines (61 loc) • 2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _theming = require("../../core/theming");
var _CardContent = _interopRequireDefault(require("./CardContent"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 Card = ({
children,
elevation: elevationProp = 1,
style = {},
theme,
...rest
}) => {
const elevation = elevationProp * 2;
return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
style: [styles.wrapper, style]
}, rest), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.inner, {
marginRight: elevation,
marginBottom: elevation
}]
}, elevation !== 0 && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.shadow, {
top: elevation,
left: elevation,
width: '100%',
height: '100%',
backgroundColor: theme.borderDarkest
}]
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.card, {
backgroundColor: theme.canvas,
borderColor: theme.borderDarkest
}]
}, children)));
};
const styles = _reactNative.StyleSheet.create({
wrapper: {
flex: 1,
position: 'relative'
},
inner: {
flexGrow: 1
},
card: {
borderWidth: 2,
flexGrow: 1
},
shadow: {
position: 'absolute'
}
});
Card.Content = _CardContent.default;
var _default = (0, _theming.withTheme)(Card);
exports.default = _default;
//# sourceMappingURL=Card.js.map