Skip to content

Commit

Permalink
remove deprecated props from Card
Browse files Browse the repository at this point in the history
  • Loading branch information
Jeremy Hamilton committed Dec 13, 2020
1 parent 143be20 commit 7dd7790
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 608 deletions.
156 changes: 1 addition & 155 deletions src/card/Card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import { View, Platform, StyleSheet } from 'react-native';

import { withTheme } from '../config';
import { ImageSourceType } from '../helpers';

import CardTitle from './CardTitle';
import CardDivider from './CardDivider';
Expand All @@ -16,89 +15,15 @@ const Card = (props) => {
children,
containerStyle,
wrapperStyle,
imageWrapperStyle,
title,
titleStyle,
titleNumberOfLines,
featuredTitle,
featuredTitleStyle,
featuredSubtitle,
featuredSubtitleStyle,
dividerStyle,
image,
imageStyle,
imageProps,
theme,
...attributes
} = props;

if (title) {
console.warn(
"'Card.title' prop has been deprecated and will be removed in the next version."
);
}
if (titleStyle) {
console.warn(
"'Card.titleStyle' prop has been deprecated and will be removed in the next version."
);
}
if (titleNumberOfLines) {
console.warn(
"'Card.titleNumberOfLines' prop has been deprecated and will be removed in the next version."
);
}
if (dividerStyle) {
console.warn(
"'Card.dividerStyle' prop has been deprecated and will be removed in the next version."
);
}
if (image) {
console.warn(
"'Card.image' prop has been deprecated and will be removed in the next version."
);
}
if (imageStyle) {
console.warn(
"'Card.imageStyle' prop has been deprecated and will be removed in the next version."
);
}
if (imageProps) {
console.warn(
"'Card.imageProps' prop has been deprecated and will be removed in the next version."
);
}
if (imageWrapperStyle) {
console.warn(
"'Card.imageWrapperStyle' prop has been deprecated and will be removed in the next version."
);
}
if (featuredTitle) {
console.warn(
"'Card.featuredTitle' prop has been deprecated and will be removed in the next version."
);
}
if (featuredTitleStyle) {
console.warn(
"'Card.featuredTitleStyle' prop has been deprecated and will be removed in the next version."
);
}
if (featuredSubtitle) {
console.warn(
"'Card.featuredSubtitle' prop has been deprecated and will be removed in the next version."
);
}
if (featuredSubtitleStyle) {
console.warn(
"'Card.featuredSubtitleStyle' prop has been deprecated and will be removed in the next version."
);
}

return (
<View
{...attributes}
style={StyleSheet.flatten([
styles.container(theme),
image && { padding: 0 },
containerStyle && containerStyle,
])}
>
Expand All @@ -108,56 +33,7 @@ const Card = (props) => {
wrapperStyle && wrapperStyle,
])}
>
{title === '' || React.isValidElement(title)
? title
: title &&
title.length && (
<View>
<CardTitle
style={StyleSheet.flatten([
image && styles.imageCardTitle,
titleStyle && titleStyle,
])}
numberOfLines={titleNumberOfLines}
>
{title}
</CardTitle>

{!image && <CardDivider style={dividerStyle} />}
</View>
)}

{image && (
<View style={imageWrapperStyle && imageWrapperStyle}>
<CardImage style={imageStyle} source={image} {...imageProps}>
{(featuredTitle || featuredSubtitle) && (
<View style={styles.overlayContainer}>
{featuredTitle && (
<CardFeaturedTitle style={featuredTitleStyle}>
{featuredTitle}
</CardFeaturedTitle>
)}
{featuredSubtitle && (
<CardFeaturedSubtitle style={featuredSubtitleStyle}>
{featuredSubtitle}
</CardFeaturedSubtitle>
)}
</View>
)}
</CardImage>

<View
style={StyleSheet.flatten([
{ padding: 10 },
wrapperStyle && wrapperStyle,
])}
>
{children}
</View>
</View>
)}

{!image && children}
{children}
</View>
</View>
);
Expand All @@ -167,21 +43,6 @@ Card.propTypes = {
containerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
wrapperStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
overlayStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
titleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
featuredTitle: PropTypes.string,
featuredTitleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
featuredSubtitle: PropTypes.string,
featuredSubtitleStyle: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
]),
dividerStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
image: ImageSourceType,
imageStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
imageWrapperStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
imageProps: PropTypes.object,
titleNumberOfLines: PropTypes.number,
theme: PropTypes.object,
};

Expand All @@ -208,21 +69,6 @@ const styles = {
wrapper: {
backgroundColor: 'transparent',
},
imageCardTitle: {
marginTop: 15,
},
overlayContainer: {
flex: 1,
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.2)',
alignSelf: 'stretch',
justifyContent: 'center',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
};

export { Card };
Expand Down
75 changes: 14 additions & 61 deletions src/card/__tests__/Card.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import React from 'react';
import { TextInput } from 'react-native';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import { create } from 'react-test-renderer';

import theme from '../../config/theme';
import { ThemeProvider } from '../../config';

import ThemedCard, { Card } from '../Card';
import Card from '../Card';

describe('Card Component', () => {
it('should render without issues', () => {
Expand All @@ -19,12 +16,9 @@ describe('Card Component', () => {

it('should have Card title without image', () => {
const component = shallow(
<Card
theme={theme}
title="Card Title"
containerStyle={{ backgroundColor: 'red' }}
dividerStyle={{ backgroundColor: 'red' }}
/>
<Card theme={theme}>
<Card.Title>Card Title</Card.Title>
</Card>
);

expect(component.length).toBe(1);
Expand All @@ -33,16 +27,11 @@ describe('Card Component', () => {

it('should have Card title with image', () => {
const component = shallow(
<Card
theme={theme}
title="HELLO WORLD"
image={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
}}
containerStyle={{ backgroundColor: 'red' }}
titleStyle={{ backgroundColor: 'red' }}
/>
<Card theme={theme}>
<Card.Title>HELLO WORLD</Card.Title>
<Card.Divider />
<Card.Image uri="https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg" />
</Card>
);

expect(component.length).toBe(1);
Expand All @@ -51,50 +40,14 @@ describe('Card Component', () => {

it('should have Card with featured title', () => {
const component = shallow(
<Card
theme={theme}
title="foo title"
image={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
}}
imageWrapperStyle={{ backgroundColor: 'red' }}
imageStyle={{ backgroundColor: 'red' }}
wrapperStyle={{ backgroundColor: 'red' }}
featuredTitle="featured title"
featuredSubtitle="featured sub title"
featuredTitleStyle={{ backgroundColor: 'red' }}
featuredSubtitleStyle={{ backgroundColor: 'red' }}
/>
<Card theme={theme}>
<Card.FeaturedTitle>featured title</Card.FeaturedTitle>
<Card.FeaturedSubtitle>featured sub title</Card.FeaturedSubtitle>
<Card.Image uri="https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg" />
</Card>
);

expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});

it('should have custom component as title', () => {
const component = shallow(<Card theme={theme} title={<TextInput />} />);

expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});

it('should apply values from theme', () => {
const testTheme = {
Card: {
title: 'Yea b',
},
};

const component = create(
<ThemeProvider theme={testTheme}>
<ThemedCard />
</ThemeProvider>
);

expect(
component.root.findByProps({ testID: 'cardTitle' }).props.children
).toBe('Yea b');
expect(component.toJSON()).toMatchSnapshot();
});
});
Loading

0 comments on commit 7dd7790

Please sign in to comment.