react-native-ui-lib
Version:
[](https://travis-ci.org/wix/react-native-ui-lib) [](https://www.npmjs.com/package/react-native-ui-lib) [![NPM Down
41 lines (40 loc) • 1.58 kB
JavaScript
import React from "react";
import { StyleSheet } from "react-native";
import { BlurView } from "react-native-blur";
import { BaseComponent } from "../../commons";
import { Constants } from "../../helpers";
import View from "../view";
/**
* @description: Card.Section, a sub Card component for layout-ing inside a card
* @extends: BlurView
* @extendsnotes: (iOS only)
* @extendslink: https://github.com/react-native-community/react-native-blur/blob/master/src/BlurView.ios.js
* @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.js
*/
export default class CardSection extends BaseComponent {
generateStyles() {
this.styles = createStyles(this.props);
}
render() {
const { enableBlur, blurOptions, style, ...others } = this.props;
const Container = Constants.isIOS && enableBlur ? BlurView : View;
const { paddings } = this.state;
return (<Container {...blurOptions} style={[this.styles.container, paddings, style]} {...others}>
{this.props.children}
</Container>);
}
}
CardSection.displayName = "Card.Section";
function createStyles({ body, footer }) {
return StyleSheet.create({
container: {
flexDirection: body ? undefined : "row",
justifyContent: body ? undefined : "space-between",
alignItems: body ? undefined : "center",
marginBottom: footer || body ? undefined : 10,
padding: body ? 21 : undefined,
flexGrow: 1,
flexShrink: 1
}
});
}