Skip to content

add border radius to badge #865

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 30, 2020
Merged

add border radius to badge #865

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
84e03b0
add border radius to badge
Jul 26, 2020
0de2821
change examples
lidord-wix Jul 29, 2020
547c0de
remove commented examples
lidord-wix Jul 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ build/
.gradle
local.properties
*.iml
android/gradlew.bat
expoDemo/android/gradlew.bat

# node.js
#
Expand Down Expand Up @@ -65,3 +67,4 @@ package-lock.json
/ios/Pods/
/ios/Podfile.lock
expoDemo/ios/Pods

34 changes: 34 additions & 0 deletions demo/src/screens/componentScreens/BadgesScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ const BadgesSpace = 30;
const plusIcon = require('../../assets/icons/chevronUp.png');
const minusIcon = require('../../assets/icons/chevronDown.png');
const star = require('../../assets/icons/star.png');
const search = require('../../assets/icons/search.png');


export default class BadgesScreen extends Component {
constructor(props) {
Expand Down Expand Up @@ -127,7 +129,39 @@ export default class BadgesScreen extends Component {
large(24)
</Text>
</View>

<View style={styles.iconBadgeColumnContainer}>
<Badge icon={star} borderRadius={6} iconStyle={{backgroundColor: Colors.red30}}/>
<Text text80 style={{marginTop: 10}}>
border radius (6)
</Text>
</View>
</View>
{/* <Text text50 marginB-10 row center marginT-25>
Badges Radius
</Text>
<View row spread>
<View flex centerH>
<Badge icon={search} backgroundColor={Colors.green20}/>
<Text center text80 style={{marginTop: 10}}>
default
</Text>
</View>

<View flex centerH>
<Badge icon={search} borderRadius={6} backgroundColor={Colors.green20}/>
<Text center text80 style={{marginTop: 10}}>
border radius 6
</Text>
</View>

<View flex centerH>
<Badge icon={search} borderRadius={2} backgroundColor={Colors.green20}/>
<Text center text80 style={{marginTop: 10}}>
border radius 2
</Text>
</View>
</View> */}
</ScrollView>
);
}
Expand Down
24 changes: 16 additions & 8 deletions src/components/badge/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@ export default class Badge extends PureBaseComponent {
* width of border around the badge
*/
borderWidth: PropTypes.number,
/**
* radius of border around the badge
*/
borderRadius: PropTypes.number,
/**
* color of border around the badge
*/
Expand Down Expand Up @@ -174,11 +178,16 @@ export default class Badge extends PureBaseComponent {
}

getBorderStyling() {
const {borderWidth, borderColor} = this.props;
return {
borderWidth,
borderColor
};
const {borderWidth, borderColor, borderRadius} = this.props;
const style = {};
if (borderWidth) {
style.borderWidth = borderWidth;
style.borderColor = borderColor;
}
if (borderRadius) {
style.borderRadius = borderRadius;
}
return style;
}

renderLabel() {
Expand Down Expand Up @@ -218,7 +227,6 @@ export default class Badge extends PureBaseComponent {
// TODO: remove testId after deprecation
const {
activeOpacity,
borderWidth,
backgroundColor,
containerStyle,
hitSlop,
Expand All @@ -230,7 +238,7 @@ export default class Badge extends PureBaseComponent {
} = this.props;
const backgroundStyle = backgroundColor && {backgroundColor};
const sizeStyle = this.getBadgeSizeStyle();
const borderStyle = borderWidth ? this.getBorderStyling() : undefined;
const borderStyle = this.getBorderStyling();

const animationProps = this.extractAnimationProps();
const Container = !_.isEmpty(animationProps) ? AnimatableView : onPress ? TouchableOpacity : View;
Expand All @@ -240,7 +248,7 @@ export default class Badge extends PureBaseComponent {
}
return (
// The extra View wrapper is to break badge's flex-ness
<View style={containerStyle} {...others} backgroundColor={undefined} {...this.getAccessibilityProps()}>
<View style={containerStyle} {...others} backgroundColor={undefined} borderWidth={undefined} {...this.getAccessibilityProps()}>
<Container
testID={testID || testId}
pointerEvents={'none'}
Expand Down