@react-native-component/react-native-smart-badge - npm Package Compare versions

Comparing version 1.0.7 to 1.1.0

Badge.js

@@ -9,28 +9,28 @@ /*
 import React, {
-  Component,
-  PropTypes,
+    Component,
+    PropTypes,
 } from 'react'
 import {
-  View,
-  Text,
-  StyleSheet,
+    View,
+    Text,
+    StyleSheet,
 } from 'react-native'
 
 const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'red',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  text: {
-    paddingVertical: 2,
-    paddingHorizontal: 4,
-    color: '#fff',
-    fontFamily: '.HelveticaNeueInterface-MediumP4',
-    backgroundColor: 'transparent',
-    fontSize: 14,
-    textAlign: 'center',         //for android
-    textAlignVertical: 'center', //for android
-  },
+    container: {
+        backgroundColor: 'red',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+    },
+    text: {
+        paddingVertical: 2,
+        paddingHorizontal: 4,
+        color: '#fff',
+        fontFamily: '.HelveticaNeueInterface-MediumP4',
+        backgroundColor: 'transparent',
+        fontSize: 14,
+        textAlign: 'center',         //for android
+        textAlignVertical: 'center', //for android
+    },
 })
@@ -40,63 +40,70 @@
 
-  static defaultProps = {
-    extraPaddingHorizontal: 10,
-  }
+    static defaultProps = {
+        extraPaddingHorizontal: 10,
+        minHeight: 0,
+        minWidth: 0,
+    }
 
-  static PropTypes = {
-      //borderRadius: PropTypes.number,   //number 18, null 5
-      extraPaddingHorizontal: PropTypes.number,
-      style: View.propTypes.style,
-      textStyle: Text.propTypes.style,
-  }
+    static PropTypes = {
+        //borderRadius: PropTypes.number,   //number 18, null 5
+        extraPaddingHorizontal: PropTypes.number,
+        style: View.propTypes.style,
+        textStyle: Text.propTypes.style,
+        minHeight: PropTypes.number,
+        minWidth: PropTypes.number,
+    }
 
-  // 构造
-    constructor(props) {
-      super(props)
-      // 初始状态
-      this.state = {}
+    // 构造
+    constructor (props) {
+        super(props)
+        // 初始状态
+        this.state = {}
 
-      this._width = 0
+        this._width = 0
     }
 
-  render() {
-    return (
-      <View ref={ component => this._container = component } style={[styles.container, this.props.style]}>
-          {this._renderChildren()}
-      </View>
-    )
-  }
+    render () {
+        return (
+            <View ref={ component => this._container = component } style={[styles.container, this.props.style]}>
+                {this._renderChildren()}
+            </View>
+        )
+    }
 
-  _renderChildren() {
-      return React.Children.map(this.props.children, (child) => {
-          if(!React.isValidElement(child)) {
-              return (
-                 <Text onLayout={this._onLayout} style={[styles.text, this.props.textStyle]}>{child}</Text>
-              )
-          }
-          return child
-      })
-  }
+    _renderChildren () {
+        return React.Children.map(this.props.children, (child) => {
+            if (!React.isValidElement(child)) {
+                return (
+                    <Text onLayout={this._onLayout} style={[styles.text, this.props.textStyle]}>{child}</Text>
+                )
+            }
+            return child
+        })
+    }
 
-  _onLayout = (e) => {
-    let width
+    _onLayout = (e) => {
+        let width
 
-    if(e.nativeEvent.layout.width <= e.nativeEvent.layout.height) {
-      width = e.nativeEvent.layout.height
+        if (e.nativeEvent.layout.width <= e.nativeEvent.layout.height) {
+            width = e.nativeEvent.layout.height
+        }
+        else {
+            width = e.nativeEvent.layout.width + this.props.extraPaddingHorizontal
+        }
+        width = Math.max(width, this.props.minWidth)
+        if (this._width == width) {
+            return
+        }
+        this._width = width
+        let height = Math.max(e.nativeEvent.layout.height, this.props.minHeight)
+        let borderRadius = height / 2
+        this._container.setNativeProps({
+            style: {
+                width,
+                height,
+                borderRadius,
+            },
+        });
     }
-    else {
-      width = e.nativeEvent.layout.width + this.props.extraPaddingHorizontal
-    }
-    if(this._width == width) {
-      return
-    }
-    this._width = width
-    this._container.setNativeProps({
-      style: {
-        width: width,
-        height: e.nativeEvent.layout.height,
-        borderRadius: e.nativeEvent.layout.height / 2,
-      },
-    });
-  }
 
 }

package.json

 {
   "name": "@react-native-component/react-native-smart-badge",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "A smart auto-fit badge for React Native apps",
@@ -5,0 +5,0 @@ "main": "Badge.js",

README.md

@@ -38,44 +38,44 @@ # react-native-smart-badge
 
-  // 构造
-    constructor(props) {
-      super(props);
-      // 初始状态
-      this.state = {
-         num1: 2,
-         num2: 15,
-         num3: 328,
-      };
+    // 构造
+    constructor (props) {
+        super(props);
+        // 初始状态
+        this.state = {
+            num1: 2,
+            num2: 15,
+            num3: 328,
+        };
     }
 
-  render() {
-    return (
-      <View style={{marginTop: 20 + 44, flex: 1, justifyContent: 'center', alignItems: 'center', }}>
-          <Badge textStyle={{color: '#fff',}}>
-            {this.state.num1}
-          </Badge>
-          <Badge textStyle={{color: '#fff',}} style={{marginTop: 10,}}>
-            {this.state.num2}
-          </Badge>
-          <Badge textStyle={{color: '#fff',}} style={{marginTop: 10,}}>
-            {this.state.num3}
-          </Badge>
+    render () {
+        return (
+            <View style={{marginTop: 20 + 44, flex: 1, justifyContent: 'center', alignItems: 'center', }}>
+                <Badge minWidth={18} minHeight={18} textStyle={{color: '#fff',}}>
+                    {this.state.num1}
+                </Badge>
+                <Badge textStyle={{color: '#fff',}} style={{marginTop: 10,}}>
+                    {this.state.num2}
+                </Badge>
+                <Badge textStyle={{color: '#fff',}} style={{marginTop: 10,}}>
+                    {this.state.num3}
+                </Badge>
 
-          <Button
-            touchableType={'blur'}
-            style={{marginTop: 10, width: 300, justifyContent: 'center', height: 40, backgroundColor: '#00AAEF', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: '#00AAEF', justifyContent: 'center',}}
-            textStyle={{fontSize: 17,  color: 'white'}}
-            onPress={this._addNum}>
-            click to plus num(点击增加数字)
-          </Button>
-    </View>
-    )
-  }
+                <Button
+                    touchableType={'blur'}
+                    style={{marginTop: 10, width: 300, justifyContent: 'center', height: 40, backgroundColor: '#00AAEF', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: '#00AAEF', justifyContent: 'center',}}
+                    textStyle={{fontSize: 17,  color: 'white'}}
+                    onPress={this._addNum}>
+                    click to plus num(点击增加数字)
+                </Button>
+            </View>
+        )
+    }
 
-  _addNum = () => {
-    this.setState({
-      num1: this.state.num1 + 3,
-      num2: this.state.num2 + 30,
-      num3: this.state.num3 + 300,
-    })
-  }
+    _addNum = () => {
+        this.setState({
+            num1: this.state.num1 + 3,
+            num2: this.state.num2 + 30,
+            num3: this.state.num3 + 300,
+        })
+    }
 
@@ -92,2 +92,4 @@ }
 textStyle              | style  | Yes      |           | see [react-native documents][3]
+minHeight              | number | Yes      |           | determines the min-height of badge
+minWidth               | number | Yes      |           | determines the min-width of badge
 
@@ -94,0 +96,0 @@ [1]: http://cyqresig.github.io/img/react-native-smart-badge-preview-ios-v1.0.7.gif

No alert changes

Improved metrics

Total package byte prevSize

9082

increased by10.61%

Lines of code

94

increased by8.05%

Number of lines in readme file

98

increased by2.08%

No dependency changes