0.19.0 (#20)

* SmsCaptchaInput 修复应用状态切换时倒计时可能不准的 bug (#7)

* ImgHolder 增加图片加载完成移除占位元素的功能 (#8)

* 更新 ImgHolder组件，更新内容为：图片加载完成后移除底图

* 更新ImgHolder组件，新增removeBaseImg配置项，设置图片加载完成是否移除底图

* ImgHolder 添加图片加载完移除占位元素的功能

* 补充 ImgHolder 的 changelog

* rm useless file

* up doc

* AddAndSubtract 新增按钮触摸时变化颜色属性

* up readme

* ActionSheet：修复安卓下只显示一行菜单时下边框无圆角的 bug

* eslint 使用缓存

* 更新文档图片 (#11)

* up

* 搞到 Overlay 了

* 忘了升级 package.json 里的版本：0.17.3

* up

* demo

* bugfix: cannot set duration in the hide animation

* readme and version

* CardView add onPanResponderGrant and onPanResponderRelease callback

* Overlay and relative components add overlayAnimationDuration, onShow and onHide props

* ImgHolder add new props 'resizeMode'

* fix version

* 修改动画高度为每次显示 Sheet 时当前内容高度，防止两次显示内容高度不一致导致渲染异常 (#17)

* 补充 changelog

* chore: Version to 0.19.0-beta.0

* fix version

* NavBar new props: 'hitSlop'

* v0.17.5-patch

* SmsCaptchaInput 添加 btnNumberOfLines (总的行数)属性

* Fixed TabBar items not centered

* Fix code eslint

* Fixed TabBar items default width value

* up

* up changelog

* up NavBar/README.md

* Progress

* Progress new props: 'width'

* 【Dialog】Bugfix: fix display bug when there is only one button that is in touching state

* NumericKeyboard 添加对左下角空白键的配置功能

* up doc

* 20171107 badge (#19)

* Badge add dot api and change IndexRouter to Badge

* Badge example add item of dot

* Badge add position auto

* Add example of Badge

* up badge

* up changelog

* 0.19.0

* Update CHANGELOG.md

Badge/README.md

@@ -33,25 +33,28 @@ function Example(props) {
 
 ```js
 Badge.propTypes = {
-  // 自定义样式
+  // 样式
   style: View.propTypes.style,
-  // 自定义文本容器样式
+  // 文本容器样式
   textContainerStyle: View.propTypes.style,
-  // 自定义文本样式
+  // 文本样式
   textStyle: Text.propTypes.style,
-  // 单个字符宽度
-  characterWidth: PropTypes.number,
   // 角标文本内容
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   // 主体元素
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
+  // 是否使用小红点
+  dot: PropTypes.bool,
+  // 小红点样式
+  dotStyle: View.propTypes.style,
 };
 Badge.defaultProps = {
   style: null,
   textContainerStyle: null,
   textStyle: null,
-  characterWidth: 7,
   text: '',
   children: null,
+  dot: null,
+  dotStyle: null,
 };
 ```

Badge/index.js

@@ -13,7 +13,8 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 
-const NUMBER_HEIGHT = 14;
+const TEXT_HEIGHT = 14;
+const DOT_HEIGHT = 8;
 
 const styles = StyleSheet.create({
   container: {
@@ -25,30 +26,71 @@ const styles = StyleSheet.create({
     right: -5,
     backgroundColor: 'red',
     borderRadius: 7,
-    height: NUMBER_HEIGHT,
+    height: TEXT_HEIGHT,
+    minWidth: TEXT_HEIGHT,
     overflow: 'hidden',
-    justifyContent: 'center',
+    justifyContent: 'space-around',
     alignItems: 'center',
+    padding: 4,
   },
   text: {
     fontSize: 10,
     color: '#fff',
     marginTop: -1,
   },
-  icon: {
-    fontSize: 20,
-    color: '#fff',
+  dot: {
+    height: DOT_HEIGHT,
+    width: DOT_HEIGHT,
+    top: -4,
+    right: -4,
+    position: 'absolute',
+    backgroundColor: 'red',
+    borderRadius: DOT_HEIGHT / 2,
   },
 });
 
 class Badge extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      opacity: 0,
+      top: -5,
+      right: -5,
+      borderRadius: 7,
+    };
+  }
+
+  // 获取徽标的布局信息
+  setPosition = (params) => {
+    const { nativeEvent } = params;
+    const { layout } = nativeEvent;
+    const { width, height } = layout;
+    this.setState({
+      top: -(height * 0.5),
+      right: -(width * 0.5),
+      borderRadius: height * 0.5,
+      opacity: 1,
+    });
+  }
+
+  // 小红点生成器
+  createDot() {
+    if (this.props.dot) {
+      return (
+        <View
+          style={[styles.dot, this.props.dotStyle]}
+        />
+      );
+    }
+    return null;
+  }
+
   render() {
     let text = this.props.text;
 
     if (typeof text !== 'string') {
       text = `${text}`;
     }
-    const textWidth = this.props.characterWidth * (text.length + 1);
 
     return (
       <View style={[styles.container, this.props.style]}>
@@ -59,41 +101,51 @@ class Badge extends Component {
         text.length > 0 ? (
           <View
             style={[styles.textContainer, {
-              width: textWidth,
+              right: this.state.right,
+              top: this.state.top,
+              borderRadius: this.state.borderRadius,
+              opacity: this.state.opacity,
             }, this.props.textContainerStyle]}
+            onLayout={this.setPosition}
           >
-            <Text style={[styles.text, this.props.textStyle]}>
+            <Text
+              style={[styles.text, this.props.textStyle]}
+              numberOfLines={1}
+            >
               {text}
             </Text>
           </View>
-        ) : null
+        ) : this.createDot()
       }
       </View>
     );
   }
 }
 
 Badge.propTypes = {
-  // 自定义样式
+  // 样式
   style: View.propTypes.style,
-  // 自定义文本容器样式
+  // 文本容器样式
   textContainerStyle: View.propTypes.style,
-  // 自定义文本样式
+  // 文本样式
   textStyle: Text.propTypes.style,
-  // 单个字符宽度
-  characterWidth: PropTypes.number,
   // 角标文本内容
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   // 主体元素
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
+  // 是否使用小红点
+  dot: PropTypes.bool,
+  // 小红点样式
+  dotStyle: View.propTypes.style,
 };
 Badge.defaultProps = {
   style: null,
   textContainerStyle: null,
   textStyle: null,
-  characterWidth: 7,
   text: '',
   children: null,
+  dot: null,
+  dotStyle: null,
 };
 
 export default Badge;

CHANGELOG.md

@@ -8,65 +8,97 @@ n2：💛 影响之前版本使用方式的更新（需要用户适配）
 n3：💚 不影响之前版本使用方式的更新（不需要用户适配）
 ```
 
+## 0.19.0
+
+- 💚 new component for displaying progress: `Progress`
+
+### NumericKeyboard
+
+- 💚 new props `bottomLeftButton`: config the button in bottom-left corner of the keyboard
+
+### Dialog
+
+- 💚 Bugfix: fix display bug when there is only one button that is in touching state
+
+### NavBar
+
+- 💚 new props `hitSlop`: defines how far a touch event can start away from buttons in left and right
+
+### SmsCaptchaInput
+
+- 💚 new props `btnTextNumberOfLines`: used to truncate the button's text with an ellipsis after computing the text layout
+
+### TabBar
+
+- 💛 TabBar items will divide space equally and the touchable area will be extended as far as possible. You may need to add `flex: 1` in style of TabBar item components to adapte to this change.
+
+### Badge
+
+Now badge will self-adjust to the length of `text`, and the maxWidth of badge is the width of `children`.
+
+- 💛 remove props `characterWidth`: because of the new self-adjusting strategy
+- 💚 new props `dot`: whether to use dot
+- 💚 new props `dotStyle`: the style of dot
+
 ## 0.18.0
 
-- 💚 import `PropTypes` from `prop-types` instead of `react`
+- 💛 import `PropTypes` from `prop-types` instead of `react`
 
 ### ActionSheet
 
-- 💚 new props `overlayAnimationDuration`：duration of Overlay animation
-- 💚 new props `onShow`：a callback called when ActionSheet has shown
-- 💚 new props `onHide`：a callback called when ActionSheet has hidden
+- 💚 new props `overlayAnimationDuration`: duration of Overlay animation
+- 💚 new props `onShow`: a callback called when ActionSheet has shown
+- 💚 new props `onHide`: a callback called when ActionSheet has hidden
 
 ### CardView
 
-- 💚 new props `onPanResponderGrant`：a callback called when the gesture starts
-- 💚 new props `onPanResponderRelease`：a callback called when the gesture stops
+- 💚 new props `onPanResponderGrant`: a callback called when the gesture starts
+- 💚 new props `onPanResponderRelease`: a callback called when the gesture stops
 
 ### Dialog
 
-- 💚 new props `overlayAnimationDuration`：duration of Overlay animation
-- 💚 new props `onShow`：a callback called when Dialog has shown
-- 💚 new props `onHide`：a callback called when Dialog has hidden
+- 💚 new props `overlayAnimationDuration`: duration of Overlay animation
+- 💚 new props `onShow`: a callback called when Dialog has shown
+- 💚 new props `onHide`: a callback called when Dialog has hidden
 
 > `onPanResponderGrant` and `onPanResponderRelease` can be used to fix the bug that CardView will not work in ScrollView. For more infomation: [CardView · rnxteam/rnx-ui Wiki](https://github.com/rnxteam/rnx-ui/wiki/CardView)
 
 ### HeaderedSheet
 
-- 💚 new props `overlayAnimationDuration`：duration of Overlay animation
-- 💚 new props `onShow`：a callback called when HeaderedSheet has shown
+- 💚 new props `overlayAnimationDuration`: duration of Overlay animation
+- 💚 new props `onShow`: a callback called when HeaderedSheet has shown
 - 💛 props `onClose` is renamed `onHide`
 
 ### ImgHolder
 
-- 💚 new props `resizeMode`：Determines how to resize the image when the frame doesn't match the raw image dimensions.
+- 💚 new props `resizeMode`: Determines how to resize the image when the frame doesn't match the raw image dimensions.
 
 > For more infomation: [Image](https://facebook.github.io/react-native/docs/image.html#resizemode)
 
 ### Loading
 
-- 💚 new props `overlayAnimationDuration`：duration of Overlay animation
-- 💚 new props `onShow`：a callback called when Loading has shown
-- 💚 new props `onHide`：a callback called when Loading has hidden
+- 💚 new props `overlayAnimationDuration`: duration of Overlay animation
+- 💚 new props `onShow`: a callback called when Loading has shown
+- 💚 new props `onHide`: a callback called when Loading has hidden
 
 ### Overlay
 
-- 💚 new props `onShow`：a callback called when Overlay has shown
-- 💚 new props `onHide`：a callback called when Overlay has hidden
+- 💚 new props `onShow`: a callback called when Overlay has shown
+- 💚 new props `onHide`: a callback called when Overlay has hidden
 
 ### Sheet
 
-- 💚 new props `overlayAnimationDuration`：duration of Overlay animation
-- 💚 new props `onShow`：a callback called when Sheet has shown
+- 💚 new props `overlayAnimationDuration`: duration of Overlay animation
+- 💚 new props `onShow`: a callback called when Sheet has shown
 - 💛 props `onClose` is renamed `onHide`
 - 💚 fix the bug that after a Sheet has been shown, when the height of the content changes, the height of the Sheet will not change ([`12ee9cc`](https://github.com/rnxteam/rnx-ui/pull/17/commits/12ee9cc1a25887cd6ee37049f99d747d1906a330)) - [`@reoszo`](https://github.com/reoszo)
 
 
 ### ToolTip
 
-- 💚 new props `overlayAnimationDuration`：duration of Overlay animation
-- 💚 new props `onShow`：a callback called when ToolTip has shown
-- 💚 new props `onHide`：a callback called when ToolTip has hidden
+- 💚 new props `overlayAnimationDuration`: duration of Overlay animation
+- 💚 new props `onShow`: a callback called when ToolTip has shown
+- 💚 new props `onHide`: a callback called when ToolTip has hidden
 
 ## 0.17.4
 

Dialog/index.js

@@ -30,7 +30,8 @@ class Dialog extends Component {
       if (isAndroid) {
         if (index === 0) {
           btnTouchableStyle.push(styles.btnTouchableFirst);
-        } else if (index === len - 1) {
+        }
+        if (index === len - 1) {
           btnTouchableStyle.push(styles.btnTouchableLast);
         }
       }

Example/src/page/Badge/index.js

@@ -24,9 +24,6 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
   },
-  placeholder: {
-    flex: 1,
-  },
   textContainerStyle: {
     top: null,
     bottom: 0,
@@ -43,10 +40,9 @@ function Page() {
           <View style={styles.container}>
             <Badge text="+1s">
               <Text>
-                  一颗赛艇
-                </Text>
+                一颗赛艇
+              </Text>
             </Badge>
-            <View style={styles.placeholder} />
           </View>
         </Article>
 
@@ -55,7 +51,22 @@ function Page() {
             <Badge text={8}>
               <Icon name="commenting-o" style={styles.icon} />
             </Badge>
-            <View style={styles.placeholder} />
+          </View>
+        </Article>
+
+        <Article title="dot 单独使用">
+          <View style={styles.container}>
+            <Badge dot>
+              <Text>dot</Text>
+            </Badge>
+          </View>
+        </Article>
+
+        <Article title="位置右居中">
+          <View style={styles.container}>
+            <Badge text="位置根据计算居中">
+              <Text>位置右居中</Text>
+            </Badge>
           </View>
         </Article>
 
@@ -64,7 +75,6 @@ function Page() {
             <Badge text="8" textContainerStyle={styles.textContainerStyle}>
               <Icon name="commenting-o" style={styles.icon} />
             </Badge>
-            <View style={styles.placeholder} />
           </View>
         </Article>
       </ScrollView>

Example/src/page/NumericKeyboard/index.js

@@ -95,6 +95,10 @@ class Page extends Component {
             onPress={this.onInput}
             deleteKeyContent="DEL"
             style={styles.numericKeyboard}
+            bottomLeftButton={{
+              value: 'x',
+              children: 'X',
+            }}
           />
         </Sheet>
       </All>