From 5a9037378af9547f546e3ae64159e750647a3f7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=A4=A7=E6=A0=B9?= <814465104@qq.com> Date: Tue, 12 Dec 2017 22:23:04 +0800 Subject: [PATCH] 0.19.0 (#20) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 | 15 +- Badge/index.js | 84 +++++++++-- CHANGELOG.md | 76 +++++++--- Dialog/index.js | 3 +- Example/src/page/Badge/index.js | 26 +++- Example/src/page/NumericKeyboard/index.js | 4 + Example/src/page/Progress/index.js | 151 +++++++++++++++++++ Example/src/page/TabBar/TabBarItem/index.js | 3 +- Example/src/page/TabBar/index.js | 4 + Example/src/page/index.js | 2 + NavBar/README.md | 8 + NavBar/index.js | 10 ++ NumericKeyboard/README.md | 17 +++ NumericKeyboard/index.js | 24 ++- Progress/README.md | 65 ++++++++ Progress/index.js | 158 ++++++++++++++++++++ README.md | 4 +- SmsCaptchaInput/README.md | 3 + SmsCaptchaInput/index.js | 5 +- TabBar/index.js | 4 + package.json | 2 +- 21 files changed, 607 insertions(+), 61 deletions(-) create mode 100644 Example/src/page/Progress/index.js create mode 100644 Progress/README.md create mode 100644 Progress/index.js diff --git a/Badge/README.md b/Badge/README.md index fcf5d92..11a637e 100644 --- a/Badge/README.md +++ b/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, }; ``` diff --git a/Badge/index.js b/Badge/index.js index e320593..11eea9e 100644 --- a/Badge/index.js +++ b/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 ( + + ); + } + return null; + } + render() { let text = this.props.text; if (typeof text !== 'string') { text = `${text}`; } - const textWidth = this.props.characterWidth * (text.length + 1); return ( @@ -59,14 +101,21 @@ class Badge extends Component { text.length > 0 ? ( - + {text} - ) : null + ) : this.createDot() } ); @@ -74,26 +123,29 @@ class Badge extends Component { } 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; diff --git a/CHANGELOG.md b/CHANGELOG.md index 8131e08..1f3a7c2 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/Dialog/index.js b/Dialog/index.js index 6084d48..59e8828 100644 --- a/Dialog/index.js +++ b/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); } } diff --git a/Example/src/page/Badge/index.js b/Example/src/page/Badge/index.js index 30c63e2..f8efd5a 100644 --- a/Example/src/page/Badge/index.js +++ b/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() { - 一颗赛艇 - + 一颗赛艇 + - @@ -55,7 +51,22 @@ function Page() { - + + + +
+ + + dot + + +
+ +
+ + + 位置右居中 +
@@ -64,7 +75,6 @@ function Page() { - diff --git a/Example/src/page/NumericKeyboard/index.js b/Example/src/page/NumericKeyboard/index.js index 172b8af..fd2992d 100644 --- a/Example/src/page/NumericKeyboard/index.js +++ b/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', + }} /> diff --git a/Example/src/page/Progress/index.js b/Example/src/page/Progress/index.js new file mode 100644 index 0000000..c1257f6 --- /dev/null +++ b/Example/src/page/Progress/index.js @@ -0,0 +1,151 @@ +import React, { + Component, +} from 'react'; +import { + StyleSheet, + ScrollView, +} from 'react-native'; +import { + Article, + NavBar, +} from 'BizComponent'; +import Router from 'BizRouter'; +import All from 'rnx-ui/All'; +import Progress from 'rnx-ui/Progress'; +import Btn from 'rnx-ui/Btn'; + +const styles = StyleSheet.create({ + scrollView: { + paddingHorizontal: 10, + }, + btn: { + marginTop: 5, + }, + outer: { + backgroundColor: 'yellow', + }, + inner: { + backgroundColor: 'red', + }, +}); + +const INTERVAL = 200; + +class Page extends Component { + constructor(props) { + super(props); + this.state = { + progress1: 0, + progress2: 0, + disabled: false, + }; + + this.add = this.add.bind(this); + this.sub = this.sub.bind(this); + this.startAutoAdd = this.startAutoAdd.bind(this); + this.startAutoSub = this.startAutoSub.bind(this); + } + + add() { + this.setState({ + progress1: this.state.progress1 + 0.1, + }); + } + sub() { + this.setState({ + progress1: this.state.progress1 - 0.1, + }); + } + + startAutoAdd() { + this.setState({ + disabled: true, + }); + this.autoAddId = setInterval(() => { + if (this.state.progress2 > 1) { + clearInterval(this.autoAddId); + this.setState({ + disabled: false, + }); + return; + } + this.setState({ + progress2: this.state.progress2 + (Math.random() / 5), + }); + }, INTERVAL); + } + startAutoSub() { + this.setState({ + disabled: true, + }); + this.autoSubId = setInterval(() => { + if (this.state.progress2 < 0) { + clearInterval(this.autoSubId); + this.setState({ + disabled: false, + }); + return; + } + this.setState({ + progress2: this.state.progress2 - (Math.random() / 5), + }); + }, INTERVAL); + } + + render() { + return ( + + + +
+ + + 增加 10% + + + 减少 10% + +
+
+ + + 开始增加 + + + 开始减少 + +
+
+ +
+ + + ); + } +} + +Page.section = 'Feedback'; + +Router.register('Progress', Page); + +export default Page; diff --git a/Example/src/page/TabBar/TabBarItem/index.js b/Example/src/page/TabBar/TabBarItem/index.js index 829c759..7ffe29e 100644 --- a/Example/src/page/TabBar/TabBarItem/index.js +++ b/Example/src/page/TabBar/TabBarItem/index.js @@ -12,8 +12,7 @@ import PropTypes from 'prop-types'; const styles = StyleSheet.create({ all: { - width: 50, - height: 40, + flex: 1, justifyContent: 'center', alignItems: 'center', }, diff --git a/Example/src/page/TabBar/index.js b/Example/src/page/TabBar/index.js index e6ef717..4e083ba 100644 --- a/Example/src/page/TabBar/index.js +++ b/Example/src/page/TabBar/index.js @@ -21,6 +21,9 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', }, + tabBar: { + height: 40, + }, }); const TabBarItems = [{ @@ -71,6 +74,7 @@ class Page extends Component { activeId={this.state.paneId} items={TabBarItems} onPress={this.onTabBarPress} + style={styles.tabBar} /> ); diff --git a/Example/src/page/index.js b/Example/src/page/index.js index 961b4d9..2635893 100644 --- a/Example/src/page/index.js +++ b/Example/src/page/index.js @@ -18,6 +18,7 @@ import './NavBar'; import './NumericKeyboard'; import './Overlay'; import './PhoneNumInput'; +import './Progress'; import './RefreshView'; import './Sheet'; import './SmsCaptchaInput'; @@ -27,5 +28,6 @@ import './TransPxToDp'; import './Validator'; import './VirtualPasswordInput'; + // 首页放最后，确保已经获取了所有页面 import './Home'; diff --git a/NavBar/README.md b/NavBar/README.md index 9b773ad..29c9a67 100755 --- a/NavBar/README.md +++ b/NavBar/README.md @@ -40,6 +40,8 @@ NavBar.propTypes = { rightBtnDisabled: PropTypes.bool, // 按钮点击透明度变化 activeOpacity: PropTypes.number, + // 按钮热区 + hitSlop: TouchableOpacity.propTypes.hitSlop, }; NavBar.defaultProps = { style: null, @@ -57,6 +59,12 @@ NavBar.defaultProps = { rightBtnStyle: null, rightBtnDisabled: false, activeOpacity: ACTIVE_OPACITY, + hitSlop: { + top: 10, + bottom: 10, + left: 10, + right: 10, + }, }; ``` diff --git a/NavBar/index.js b/NavBar/index.js index 2ec81bd..66e40f2 100755 --- a/NavBar/index.js +++ b/NavBar/index.js @@ -87,6 +87,7 @@ class NavBar extends Component { {leftBtn} @@ -95,6 +96,7 @@ class NavBar extends Component { {rightBtn} @@ -137,6 +139,8 @@ NavBar.propTypes = { rightBtnDisabled: PropTypes.bool, // 按钮点击透明度变化 activeOpacity: PropTypes.number, + // 按钮热区 + hitSlop: TouchableOpacity.propTypes.hitSlop, }; NavBar.defaultProps = { style: null, @@ -154,6 +158,12 @@ NavBar.defaultProps = { rightBtnStyle: null, rightBtnDisabled: false, activeOpacity: ACTIVE_OPACITY, + hitSlop: { + top: 10, + bottom: 10, + left: 10, + right: 10, + }, }; export default NavBar; diff --git a/NumericKeyboard/README.md b/NumericKeyboard/README.md index 6b2f669..2f445b5 100644 --- a/NumericKeyboard/README.md +++ b/NumericKeyboard/README.md @@ -32,10 +32,27 @@ NumericKeyboard.propTypes = { onPress: PropTypes.func, // 删除键内容 deleteKeyContent: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.array]), + // 左下角空白键 + bottomLeftButton: PropTypes.shape({ + // 样式类型 + type: Key.propTypes.type, + // 是否禁用 + disabled: Key.propTypes.disabled, + // 值 + value: Key.propTypes.value, + // 子元素 + children: Key.propTypes.children, + }), }; NumericKeyboard.defaultProps = { style: null, onPress: NOOP, deleteKeyContent: , + bottomLeftButton: { + type: 'dark', + disabled: true, + value: '', + children: null, + }, }; ``` diff --git a/NumericKeyboard/index.js b/NumericKeyboard/index.js index a1c0e1d..506af3a 100644 --- a/NumericKeyboard/index.js +++ b/NumericKeyboard/index.js @@ -73,8 +73,11 @@ class NumericKeyboard extends Component { > , + bottomLeftButton: { + type: 'dark', + disabled: true, + value: '', + children: null, + }, }; export default NumericKeyboard; diff --git a/Progress/README.md b/Progress/README.md new file mode 100644 index 0000000..ccb529e --- /dev/null +++ b/Progress/README.md @@ -0,0 +1,65 @@ +# Progress + +**进度条** + +## Demo + +![400*650](demo.png) + +## Example + +```js +import Progress from 'rnx-ui/Progress'; + +function Example(props) { + return ( + + ); +} +``` + +## Props + +```js +Progress.propTypes = { + // 容器样式 + style: View.propTypes.style, + // 进度条宽度 + width: PropTypes.number, + // 进度条背景样式 + outerStyle: View.propTypes.style, + // 进度条样式 + innerStyle: View.propTypes.style, + // 动画时长 + duration: PropTypes.number, + // 进度值 + value: PropTypes.number, + // 是否显示进度值 + valueVisible: PropTypes.bool, + // 进度值样式 + valueStyle: Text.propTypes.style, + // 进度值格式函数 + valueFormater: PropTypes.func, +}; +Progress.defaultProps = { + style: null, + width: 10, + outerStyle: null, + innerStyle: null, + duration: 300, + value: 0, + valueVisible: true, + valueStyle: null, + valueFormater(value) { + let percent; + if (value < 0) { + percent = 0; + } else if (value > 1) { + percent = 100; + } else { + percent = Math.round(value * 100); + } + return `${percent}%`; + }, +}; +``` diff --git a/Progress/index.js b/Progress/index.js new file mode 100644 index 0000000..79025c6 --- /dev/null +++ b/Progress/index.js @@ -0,0 +1,158 @@ +import React, { + Component, +} from 'react'; +import { + StyleSheet, + View, + Animated, + Text, + Easing, +} from 'react-native'; +import PropTypes from 'prop-types'; + +const styles = StyleSheet.create({ + all: { + flexDirection: 'row', + alignItems: 'center', + }, + outer: { + flex: 1, + overflow: 'hidden', + backgroundColor: '#ddd', + }, + inner: { + flex: 1, + backgroundColor: '#108ee9', + }, + text: { + width: 50, + textAlign: 'right', + }, +}); + +class Progress extends Component { + constructor(props) { + super(props); + this.state = { + progressWidth: new Animated.Value(0), + }; + + this.outerWidth = 0; + + this.onLayout = this.onLayout.bind(this); + } + + componentWillReceiveProps(nextProps) { + if (nextProps.value !== this.props.value) { + const progressWidth = this.getProgressWidth(nextProps.value); + /* eslint-disable */ + if (this.state.progressWidth._value !== progressWidth) { + /* eslint-enable */ + Animated.timing(this.state.progressWidth, { + toValue: progressWidth, + duration: this.props.duration, + // linear animation looks smoother + easing: Easing.linear, + }).start(); + } + } + } + + getProgressWidth(ratio) { + if (ratio < 0) { + return 0; + } else if (ratio > 1) { + return this.outerWidth; + } + return this.outerWidth * ratio; + } + + onLayout(e) { + const { width } = e.nativeEvent.layout; + if (width !== this.outerWidth) { + this.outerWidth = width; + this.setState({ + progressWidth: new Animated.Value(this.getProgressWidth(this.props.value)), + }); + } + } + + + render() { + return ( + + + + + { + this.props.valueVisible ? ( + + {this.props.valueFormater(this.props.value)} + + ) : null + } + + ); + } +} + +Progress.propTypes = { + // 容器样式 + style: View.propTypes.style, + // 进度条宽度 + width: PropTypes.number, + // 进度条背景样式 + outerStyle: View.propTypes.style, + // 进度条样式 + innerStyle: View.propTypes.style, + // 动画时长 + duration: PropTypes.number, + // 进度值 + value: PropTypes.number, + // 是否显示进度值 + valueVisible: PropTypes.bool, + // 进度值样式 + valueStyle: Text.propTypes.style, + // 进度值格式函数 + valueFormater: PropTypes.func, +}; +Progress.defaultProps = { + style: null, + width: 10, + outerStyle: null, + innerStyle: null, + duration: 300, + value: 0, + valueVisible: true, + valueStyle: null, + valueFormater(value) { + let percent; + if (value < 0) { + percent = 0; + } else if (value > 1) { + percent = 100; + } else { + percent = Math.round(value * 100); + } + return `${percent}%`; + }, +}; + +export default Progress; diff --git a/README.md b/README.md index 17daee9..924d9c5 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ react-native run-ios ## Overview -`🖌` designing(7) `🛠` developing(1) `✅` done(31) +`🖌` designing(6) `🛠` developing(1) `✅` done(32) ### Component @@ -79,7 +79,7 @@ Name | Description | State [PhoneNumInput](https://github.com/rnxteam/rnx-ui/tree/master/PhoneNumInput) | 手机号码输入框 | ✅ [PlaceholderInput](https://github.com/rnxteam/rnx-ui/tree/master/PlaceholderInput) | 可以自定义占位元素的输入框 | ✅ [PlaceholderText](https://github.com/rnxteam/rnx-ui/tree/master/PlaceholderText) | 有占位元素的文本显示组件 | ✅ -[PswdInput](https://github.com/rnxteam/rnx-ui/tree/master/Checkbox) | 密码输入框（带有用于切换密码显隐的“眼睛”按钮） | 🖌 +[Progress](https://github.com/rnxteam/rnx-ui/tree/master/Progress) | 进度条 | ✅ [RefreshView](https://github.com/rnxteam/rnx-ui/tree/master/RefreshView) | 滚动列表（带下拉刷新、上拉加载） | ✅ [Select](https://github.com/rnxteam/rnx-ui/tree/master/Select) | 选择器（带有向上弹出和向下隐藏的动画、遮罩、取消确定标题栏） | 🖌 [Sheet](https://github.com/rnxteam/rnx-ui/tree/master/Sheet) | 底部弹层 | ✅ diff --git a/SmsCaptchaInput/README.md b/SmsCaptchaInput/README.md index 49dce2a..01cde12 100644 --- a/SmsCaptchaInput/README.md +++ b/SmsCaptchaInput/README.md @@ -43,6 +43,8 @@ SmsCaptchaInput.propTypes = { btnTextTimed: PropTypes.string, // 自定义按钮文本样式 btnTextStyle: Text.propTypes.style, + // 自定义按钮文本行数，超出 btnTextStyle 中设定的宽度时，超出部分用...代替 + btnTextNumberOfLines: PropTypes.number, // 提示文字 placeholder: PropTypes.string, // 提示文字颜色 @@ -82,6 +84,7 @@ SmsCaptchaInput.defaultProps = { btnTextTiming: '{time}秒后可重发', btnTextTimed: '重新获取', btnTextStyle: null, + btnTextNumberOfLines: 1, placeholder: '短信验证码', placeholderTextColor: COLOR_PLACEHOLDER, activeOpacity: ACTIVE_OPACITY, diff --git a/SmsCaptchaInput/index.js b/SmsCaptchaInput/index.js index d9e7c97..75f5fda 100644 --- a/SmsCaptchaInput/index.js +++ b/SmsCaptchaInput/index.js @@ -188,7 +188,7 @@ class SmsCaptchaInput extends Component { style={[styles.button, this.props.btnStyle]} hitSlop={this.props.hitSlop} > - + {this.state.buttonText} @@ -214,6 +214,8 @@ SmsCaptchaInput.propTypes = { btnTextTimed: PropTypes.string, // 自定义按钮文本样式 btnTextStyle: Text.propTypes.style, + // 自定义按钮文本行数，超出 btnTextStyle 中设定的宽度时，超出部分用...代替 + btnTextNumberOfLines: PropTypes.number, // 提示文字 placeholder: PropTypes.string, // 提示文字颜色 @@ -253,6 +255,7 @@ SmsCaptchaInput.defaultProps = { btnTextTiming: '{time}秒后可重发', btnTextTimed: '重新获取', btnTextStyle: null, + btnTextNumberOfLines: 1, placeholder: '短信验证码', placeholderTextColor: COLOR_PLACEHOLDER, activeOpacity: ACTIVE_OPACITY, diff --git a/TabBar/index.js b/TabBar/index.js index e66e95d..a712bde 100644 --- a/TabBar/index.js +++ b/TabBar/index.js @@ -22,6 +22,9 @@ const styles = StyleSheet.create({ borderTopColor: '#C9C9C9', borderTopWidth: HAIRLINE_WIDTH, }, + item: { + flex: 1, + }, }); class TabBar extends Component { @@ -35,6 +38,7 @@ class TabBar extends Component { { this.props.items.map((item, index) => (