diff --git a/.eslintignore b/.eslintignore index 3c3629e..f8842e8 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,3 @@ node_modules +doc +docs \ No newline at end of file diff --git a/ActionSheet/ActionSheet.md b/ActionSheet/ActionSheet.md new file mode 100644 index 0000000..f9c1117 --- /dev/null +++ b/ActionSheet/ActionSheet.md @@ -0,0 +1,27 @@ +#### Demo + +![ActionSheet](http://wx4.sinaimg.cn/mw690/4c8b519dly1feq4asyl44g20hs0wsguv.gif) + +#### Example + +```JavaScript +import ActionSheet from 'rnx-ui/ActionSheet'; + +function Example(props) { + return ( + + ); +} +``` + + diff --git a/ActionSheet/README.md b/ActionSheet/README.md deleted file mode 100644 index d1a38fb..0000000 --- a/ActionSheet/README.md +++ /dev/null @@ -1,89 +0,0 @@ -# ActionSheet - -**上拉按钮组** - -## Demo - -![ActionSheet](http://wx4.sinaimg.cn/mw690/4c8b519dly1feq4asyl44g20hs0wsguv.gif) - - -## Example - -```js -import ActionSheet from 'rnx-ui/ActionSheet'; - -function Example(props) { - return ( - - ); -} -``` - -## Props - -```js -ActionSheet.propTypes = { - // 显示开关 - visible: Sheet.propTypes.visible, - // 按钮组 - btnList: PropTypes.arrayOf(PropTypes.shape({ - // 按钮样式 - style: View.propTypes.style, - // 按钮文字 - text: PropTypes.string, - // 按钮文字样式 - textStyle: Text.propTypes.style, - // 按钮点击回调 - onPress: PropTypes.func, - })), - // 统一按钮样式 - btnStyle: View.propTypes.style, - // 统一按钮文字样式 - btnTextStyle: Text.propTypes.style, - // 取消按钮样式 - cancelBtnStyle: View.propTypes.style, - // 取消按钮文字 - cancelBtnText: PropTypes.string, - // 取消按钮文字样式 - cancelBtnTextStyle: Text.propTypes.style, - // 遮罩层样式 - overlayStyle: Sheet.propTypes.overlayStyle, - // 关闭回调（动画结束时） - onClose: Sheet.propTypes.onClose, - // 动画时长 - duration: Sheet.propTypes.duration, - // 自定义样式 - style: View.propTypes.style, - // 按钮点击透明度变化 - underlayColor: PropTypes.string, -}; -ActionSheet.defaultProps = { - visible: false, - btnList: [{ - style: null, - text: '确定', - textStyle: null, - onPress: NOOP, - }], - btnStyle: null, - btnTextStyle: null, - cancelBtnStyle: null, - cancelBtnText: '取消', - cancelBtnTextStyle: null, - overlayStyle: null, - onClose: NOOP, - duration: 200, - style: null, - underlayColor: '#eee', -}; -``` diff --git a/ActionSheet/index.js b/ActionSheet/index.js index 1e7c5a3..3255ae4 100644 --- a/ActionSheet/index.js +++ b/ActionSheet/index.js @@ -1,3 +1,10 @@ +/** + * @component ActionSheet + * @version 0.11.7 + * @description 上拉按钮组 + * + * @instructions {instruInfo: ./ActionSheet/ActionSheet.md} + */ import React, { Component, PropTypes } from 'react'; import { Platform, @@ -75,40 +82,110 @@ class ActionSheet extends Component { } ActionSheet.propTypes = { - // 显示开关 + /** + * @property visible + * @type Boolean + * @default false + * @description 显示开关 + */ visible: Sheet.propTypes.visible, // 按钮组 + /** + * @property btnList + * @type Object + * @default [{ + * style: null, + * text: '确定', + * textStyle: null, + * onPress: NOOP, + * }] + * @param {Object} style 按钮样式 + * @param {String} text 按钮文字 + * @param {Object} textStyle 按钮文字样式 + * @param {Function} onPress 按钮点击回调 + * @description 按钮组 + */ btnList: PropTypes.arrayOf(PropTypes.shape({ /* eslint-disable */ - // 按钮样式 + style: View.propTypes.style, - // 按钮文字 + text: PropTypes.string, - // 按钮文字样式 + textStyle: Text.propTypes.style, - // 按钮点击回调 + onPress: PropTypes.func, /* eslint-enable */ })), - // 统一按钮样式 + /** + * @property btnStyle + * @type Object + * @default null + * @description 统一按钮样式 + */ btnStyle: View.propTypes.style, - // 统一按钮文字样式 + /** + * @property btnTextStyle + * @type Object + * @default null + * @description 统一按钮文字样式 + */ btnTextStyle: Text.propTypes.style, - // 取消按钮样式 + /** + * @property cancelBtnStyle + * @type Object + * @default null + * @description 取消按钮样式 + */ cancelBtnStyle: View.propTypes.style, - // 取消按钮文字 + /** + * @property cancelBtnText + * @type String + * @default '取消' + * @description 取消按钮文字 + */ cancelBtnText: PropTypes.string, - // 取消按钮文字样式 + /** + * @property cancelBtnTextStyle + * @type Object + * @default null + * @description 取消按钮文字样式 + */ cancelBtnTextStyle: Text.propTypes.style, - // 遮罩层样式 + /** + * @property overlayStyle + * @type Object + * @default null + * @description 遮罩层样式 + */ overlayStyle: Sheet.propTypes.overlayStyle, - // 关闭回调（动画结束时） + /** + * @property onClose + * @type Function + * @default NOOP + * @description 关闭回调（动画结束时） + */ onClose: Sheet.propTypes.onClose, - // 动画时长 + /** + * @property duration + * @type Number + * @default 200 + * @description 动画时长 + */ duration: Sheet.propTypes.duration, - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 按钮点击透明度变化 + /** + * @property underlayColor + * @type String + * @default '#eee' + * @description 按钮点击透明度变化 + */ underlayColor: PropTypes.string, }; ActionSheet.defaultProps = { diff --git a/AddAndSubtract/AddAndSubtract.md b/AddAndSubtract/AddAndSubtract.md new file mode 100644 index 0000000..173fb2e --- /dev/null +++ b/AddAndSubtract/AddAndSubtract.md @@ -0,0 +1,20 @@ +#### Demo + +![AddAndSubtract](http://wx3.sinaimg.cn/mw690/4c8b519dly1fcaq7v2pnvg20ho0wgh0z.gif) + +#### Example + +```JavaScript +import Template from 'rnx-ui/Template'; + +function Example(props) { + return ( + + ); +} +``` + diff --git a/AddAndSubtract/README.md b/AddAndSubtract/README.md deleted file mode 100644 index bd787bb..0000000 --- a/AddAndSubtract/README.md +++ /dev/null @@ -1,93 +0,0 @@ -# AddAndSubtract - -**加减法动画组件** - -带有动画的加减法组件 - -## Demo - -![AddAndSubtract](http://wx3.sinaimg.cn/mw690/4c8b519dly1fcaq7v2pnvg20ho0wgh0z.gif) - -## Example - -```js -import Template from 'rnx-ui/Template'; - -function Example(props) { - return ( - - ); -} -``` - -## Props - -```js -AddAndSubtract.propTypes = { - // 数字 - num(props, propName) { - const num = props[propName]; - if (typeof num !== 'number') { - return new Error('AddAndSubtract.props.num must be a number.'); - } - if (num < 0) { - return new Error('AddAndSubtract.props.num must be greater than 0.'); - } - return null; - }, - // 加法按钮点击事件 - onPressAdder: PropTypes.func, - // 减法按钮点击事件 - onPressSubtracter: PropTypes.func, - // 动画时间 - duration: PropTypes.number, - // 减法按钮移动距离 - distance: PropTypes.number, - // 减法旋转角度 - deg: PropTypes.number, - // 动画函数 - easing: PropTypes.func, - // 按钮宽度 - btnWidth: PropTypes.number, - // 自定义样式 - style: View.propTypes.style, - // 加法按钮样式 - adderStyle: View.propTypes.style, - // 减法按钮样式 - subtracterStyle: View.propTypes.style, - // 自定义字体样式 - textStyle: Text.propTypes.style, - // 加法按钮 - adder: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 减法按钮 - subtracter: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 按钮热区 - hitSlop: TouchableHighlight.propTypes.hitSlop, -}; -AddAndSubtract.defaultProps = { - num: 0, - onPressAdder: NOOP, - onPressSubtracter: NOOP, - duration: 200, - distance: 30, - deg: 180, - easing: t => t, - btnWidth: 30, - style: null, - adderStyle: null, - subtracterStyle: null, - textStyle: null, - adder: +, - subtracter: -, - hitSlop: { - top: 5, - left: 5, - right: 5, - bottom: 5, - }, -}; -``` diff --git a/AddAndSubtract/index.js b/AddAndSubtract/index.js index 2df764e..957b0aa 100644 --- a/AddAndSubtract/index.js +++ b/AddAndSubtract/index.js @@ -1,3 +1,10 @@ +/** + * @component AddAndSubtract + * @version 0.17.0 + * @description 加减法动画组件 + * + * @instructions {instruInfo: ./AddAndSubtract/AddAndSubtract.md} + */ import React, { PropTypes, Component, @@ -136,7 +143,12 @@ class AddAndSubtract extends Component { } AddAndSubtract.propTypes = { - // 数字 + /** + * @property num + * @type Number + * @default 0 + * @description 数字 + */ num(props, propName) { const num = props[propName]; if (typeof num !== 'number') { @@ -147,39 +159,129 @@ AddAndSubtract.propTypes = { } return null; }, - // 加法按钮点击事件 + /** + * @property onPressAdder + * @type Function + * @default NOOP + * @description 加法按钮点击事件 + */ onPressAdder: PropTypes.func, - // 减法按钮点击事件 + /** + * @property onPressSubtracter + * @type Function + * @default NOOP + * @description 减法按钮点击事件 + */ onPressSubtracter: PropTypes.func, - // 动画时间 + /** + * @property duration + * @type Number + * @default 200 + * @description 动画时间 + */ duration: PropTypes.number, - // 减法按钮移动距离 + /** + * @property distance + * @type Number + * @default 30 + * @description 减法按钮移动距离 + */ distance: PropTypes.number, - // 减法旋转角度 + /** + * @property deg + * @type Number + * @default 180 + * @description 减法旋转角度 + */ deg: PropTypes.number, - // 动画函数 + /** + * @property easing + * @type Function + * @default t => t + * @description 动画函数 + */ easing: PropTypes.func, - // 按钮宽度 + /** + * @property btnWidth + * @type Number + * @default 30 + * @description 按钮宽度 + */ btnWidth: PropTypes.number, - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 加法按钮样式 + /** + * @property adderBtnStyle + * @type Object + * @default null + * @description 加法按钮样式 + */ adderBtnStyle: View.propTypes.style, - // 加法元素样式 + /** + * @property adderStyle + * @type Object + * @default null + * @description 加法元素样式 + */ adderStyle: View.propTypes.style, - // 减法按钮容器样式 + /** + * @property subtracterWrapperStyle + * @type Object + * @default null + * @description 减法按钮容器样式 + */ subtracterWrapperStyle: View.propTypes.style, - // 减法按钮样式 + /** + * @property subtracterBtnStyle + * @type Object + * @default null + * @description 减法按钮样式 + */ subtracterBtnStyle: View.propTypes.style, - // 减法元素样式 + /** + * @property subtracterStyle + * @type Object + * @default null + * @description 减法元素样式 + */ subtracterStyle: View.propTypes.style, - // 自定义字体样式 + /** + * @property textStyle + * @type Object + * @default null + * @description 自定义字体样式 + */ textStyle: Text.propTypes.style, - // 加法按钮 + /** + * @property adder + * @type Element Array + * @default null + * @description 加法按钮 + */ adder: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 减法按钮 + /** + * @property subtracter + * @type Element Array + * @default + + * @description 减法按钮 + */ subtracter: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 按钮热区 + /** + * @property hitSlop + * @type Object + * @default { + * top: 5, + * left: 5, + * right: 5, + * bottom: 5, + * }, + * @description 按钮热区 + */ hitSlop: TouchableHighlight.propTypes.hitSlop, }; AddAndSubtract.defaultProps = { diff --git a/Alert/Alert.md b/Alert/Alert.md new file mode 100644 index 0000000..9f9cd68 --- /dev/null +++ b/Alert/Alert.md @@ -0,0 +1,8 @@ + +#### Demo + +![Alert](http://wx4.sinaimg.cn/mw690/4c8b519dly1fduijhj36dg20hs0ws48p.gif) + +#### Other Points + +- 内部封装了 Dialog 组件，覆盖了 Dialog 的 `buttons` 属性，其他不变，请参考 [Dialog](https://github.com/dragonwong/rnx-ui/tree/master/Dialog) diff --git a/Alert/README.md b/Alert/README.md deleted file mode 100644 index 6694116..0000000 --- a/Alert/README.md +++ /dev/null @@ -1,31 +0,0 @@ -# Alert - -**警告弹框组件** - -## Demo - -![Alert](http://wx4.sinaimg.cn/mw690/4c8b519dly1fduijhj36dg20hs0ws48p.gif) - -## Props - -```js -Alert.propTypes = { - ...Dialog.propTypes, - // 按钮文本 - buttonText: PropTypes.string, - // 按钮文本样式 - buttonTextStyle: Text.propTypes.style, - // 按钮点击回调 - onPress: PropTypes.func, -}; -Alert.defaultProps = { - ...Dialog.defaultProps, - buttonText: '好', - buttonTextStyle: null, - onPress: NOOP, -}; -``` - -## Other Points - -- 内部封装了 Dialog 组件，覆盖了 Dialog 的 `buttons` 属性，其他不变，请参考 [Dialog](https://github.com/dragonwong/rnx-ui/tree/master/Dialog) diff --git a/Alert/index.js b/Alert/index.js index 9e9f643..cd7e38a 100644 --- a/Alert/index.js +++ b/Alert/index.js @@ -1,3 +1,11 @@ +/** + * @component Alert + * @version 0.17.0 + * @description 警告弹框组件 + * + * + * @instructions {instruInfo: ./Alert/Alert.md} + */ import React, { PropTypes, } from 'react'; @@ -26,11 +34,26 @@ class Alert extends Dialog { Alert.propTypes = { ...Dialog.propTypes, - // 按钮文本 + /** + * @property buttonText + * @type String + * @default '好' + * @description 按钮文本 + */ buttonText: PropTypes.string, - // 按钮文本样式 + /** + * @property buttonTextStyle + * @type Object + * @default null + * @description 按钮文本样式 + */ buttonTextStyle: Text.propTypes.style, - // 按钮点击回调 + /** + * @property onPress + * @type Function + * @default NOOP + * @description 按钮点击回调 + */ onPress: PropTypes.func, }; Alert.defaultProps = { diff --git a/All/All.md b/All/All.md new file mode 100644 index 0000000..2ed65f7 --- /dev/null +++ b/All/All.md @@ -0,0 +1,13 @@ +#### Example + +```JavaScript +import All from 'rnx-ui/All'; + +function Example(props) { + return ( + + ); +} +``` + + diff --git a/All/README.md b/All/README.md deleted file mode 100644 index 39ec0f8..0000000 --- a/All/README.md +++ /dev/null @@ -1,38 +0,0 @@ -# All - -**页面容器** - -页面级容器，内置了 `StatusBar`。 - -## Example - -```js -import All from 'rnx-ui/All'; - -function Example(props) { - return ( - - ); -} -``` - -## Props - -```js -All.propTypes = { - // 子元素 - children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 自定义样式 - style: View.propTypes.style, - // StatusBar 背景色 - statusBarBgColor: PropTypes.string, - // StatusBar 样式类型 - statusBarStyle: PropTypes.string, -}; -All.defaultProps = { - children: null, - style: null, - statusBarBgColor: 'transparent', - statusBarStyle: 'light-content', -}; -``` diff --git a/All/index.js b/All/index.js index fe4bd1b..4447574 100644 --- a/All/index.js +++ b/All/index.js @@ -1,5 +1,8 @@ /** - * 页面容器组件 + * @component All + * @description 页面级容器，内置了 `StatusBar`。 + * + * @instructions {instruInfo: ./All/All.md} */ import React, { PropTypes, @@ -34,13 +37,33 @@ class All extends Component { } All.propTypes = { - // 子元素 + /** + * @property children + * @type Element Array + * @default null + * @description 子元素 + */ children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // StatusBar 背景色 + /** + * @property statusBarBgColor + * @type String + * @default 'transparent' + * @description StatusBar 背景色 + */ statusBarBgColor: PropTypes.string, - // StatusBar 样式类型 + /** + * @property statusBarBgStyle + * @type Stirng + * @default 'light-content' + * @description StatusBar 样式类型 + */ statusBarStyle: PropTypes.string, }; All.defaultProps = { diff --git a/Badge/Badge.md b/Badge/Badge.md new file mode 100644 index 0000000..b1332aa --- /dev/null +++ b/Badge/Badge.md @@ -0,0 +1,24 @@ + +#### Demo + +![Badge](https://github.com/wangkexinW/rnx-ui/blob/master/Badge/demo.png?raw=true) + +#### Example + +```JavaScript +import Badge from 'rnx-ui/Badge'; + +function Example(props) { + return ( + + + + ) +} +``` +### ⚠️ 注意 + +1. 角标宽度是动态计算的，随角标内容的增长而变长。当你通过 `textStyle` 改变角标内容的字体大小时，注意配置相符的 `characterWidth`。 + +2. Badge 没有宽度，宽度随外部容器变化。 + diff --git a/Badge/README.md b/Badge/README.md deleted file mode 100644 index 683fd3d..0000000 --- a/Badge/README.md +++ /dev/null @@ -1,56 +0,0 @@ -# Badge - -**角标** - -通常用来显示未读消息数目。 - -### ⚠️ 注意 - -1. 角标宽度是动态计算的，随角标内容的增长而变长。当你通过 `textStyle` 改变角标内容的字体大小时，注意配置相符的 `characterWidth`。 - -2. Badge 没有宽度，宽度随外部容器变化。 - -## Demo - -![](demo.png) - -## Example - -```js -import Badge from 'rnx-ui/Badge'; - -function Example(props) { - return ( - - - - ) -} -``` - -## 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]), -}; -Badge.defaultProps = { - style: null, - textContainerStyle: null, - textStyle: null, - characterWidth: 7, - text: '', - children: null, -}; -``` diff --git a/Badge/index.js b/Badge/index.js index 45eeba0..dbeac5d 100644 --- a/Badge/index.js +++ b/Badge/index.js @@ -1,7 +1,9 @@ /** - * 角标组件 - * 注意： - * 1. Badge 没有宽度，跨度随外部容器变化 + * @component Badge + * @version 0.11.4 + * @description 角标组件 通常用来显示未读消息数目。 + * + * @instructions {instruInfo: ./Badge/Badge.md} */ import React, { PropTypes, @@ -74,17 +76,47 @@ class Badge extends Component { } Badge.propTypes = { - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 自定义文本容器样式 + /** + * @property textContainerStyle + * @type Object + * @default null + * @description 自定义文本容器样式 + */ textContainerStyle: View.propTypes.style, - // 自定义文本样式 + /** + * @property textStyle + * @type Object + * @default null + * @description 自定义文本样式 + */ textStyle: Text.propTypes.style, - // 单个字符宽度 + /** + * @property characterWidth + * @type Number + * @default 7 + * @description 单个字符宽度 + */ characterWidth: PropTypes.number, - // 角标文本内容 + /** + * @property text + * @type String Number + * @default '' + * @description 角标文本内容 + */ text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - // 主体元素 + /** + * @property children + * @type Element Array + * @default null + * @description 主体元素 + */ children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), }; Badge.defaultProps = { diff --git a/Btn/Btn.md b/Btn/Btn.md new file mode 100644 index 0000000..158d7d2 --- /dev/null +++ b/Btn/Btn.md @@ -0,0 +1,16 @@ +#### Demo + +![Btn](https://github.com/wangkexinW/rnx-ui/blob/doc/Btn/btn.png?raw=true) + +#### Example + +```JavaScript +import Btn from 'rnx-ui/Btn'; + +function Example(props) { + return ( + 自定义样式 + ); +} +``` + diff --git a/Btn/README.md b/Btn/README.md deleted file mode 100644 index 8004762..0000000 --- a/Btn/README.md +++ /dev/null @@ -1,52 +0,0 @@ -# Btn - -**按钮** - -## Demo - -![](demo.png) - -## Example - -```js -import Btn from 'rnx-ui/Btn'; - -function Example(props) { - return ( - 自定义样式 - ); -} -``` - -## Props - -```js -Btn.propTypes = { - // 自定义样式 - style: View.propTypes.style, - // 内部容器样式 - contentContainerStyle: View.propTypes.style, - // 按钮文本样式（children 为字符串时才生效） - textStyle: Text.propTypes.style, - // 点击回调 - onPress: PropTypes.func, - // 按钮内容 - children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.array]), - // 点击时透明度反馈 - activeOpacity: PropTypes.number, - // 是否禁用，为 true 时，activeOpacity 为 1，onPress 为 null - disabled: PropTypes.bool, - // 按钮热区 - hitSlop: TouchableOpacity.propTypes.hitSlop, -}; -Btn.defaultProps = { - style: null, - contentContainerStyle: null, - textStyle: null, - onPress: null, - children: '下一步', - activeOpacity: ACTIVE_OPACITY, - disabled: false, - hitSlop: {}, -}; -``` diff --git a/Btn/demo.png b/Btn/btn.png similarity index 100% rename from Btn/demo.png rename to Btn/btn.png diff --git a/Btn/index.js b/Btn/index.js index e560fb6..0dc1ee0 100644 --- a/Btn/index.js +++ b/Btn/index.js @@ -1,5 +1,9 @@ /** - * 按钮 + * @component Btn + * @version 0.17.0 + * @description 按钮 + * + * @instructions {instruInfo: ./Btn/Btn.md} */ import React, { Component, @@ -70,21 +74,66 @@ class Btn extends Component { } Btn.propTypes = { - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 内部容器样式 + /** + * @property contentContainerStyle + * @type Object + * @default null + * @description 内部容器样式 + */ contentContainerStyle: View.propTypes.style, - // 按钮文本样式（children 为字符串时才生效） + /** + * @property textStyle + * @type Obejct + * @default null + * @description 按钮文本样式（children 为字符串时才生效） + */ textStyle: Text.propTypes.style, - // 点击回调 + /** + * @property onPress + * @type Function + * @default null + * @description 点击回调 + */ onPress: PropTypes.func, - // 按钮内容 + /** + * @property children + * @type String Array + * @default '下一步' + * @description 按钮内容 + */ children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.array]), - // 点击时透明度反馈 + /** + * @property activeOpacity + * @type Number + * @default ACTIVE_OPACITY + * @description 点击时透明度反馈 + */ activeOpacity: PropTypes.number, - // 是否禁用，为 true 时，activeOpacity 为 1，onPress 为 null + /** + * @property disabled + * @type Boolean + * @default ACTIVE_OPACITY + * @description 是否禁用，为 true 时，activeOpacity 为 1，onPress 为 null + */ disabled: PropTypes.bool, - // 按钮热区 + /** + * @property hitSlop + * @type Object + * @default { + * top: 0, + * bottom: 0, + * left: 0, + * right: 0, + * } + * @description 按钮热区 + */ hitSlop: TouchableOpacity.propTypes.hitSlop, }; Btn.defaultProps = { diff --git a/CardView/CardView.md b/CardView/CardView.md new file mode 100644 index 0000000..831efdd --- /dev/null +++ b/CardView/CardView.md @@ -0,0 +1,30 @@ + +#### 基本用法 +以卡片样式浏览，并可以设置激活卡片样式。 + +#### Demo + +![CardView](http://wx3.sinaimg.cn/mw690/4c8b519dly1fdgvohgt53g20hs0wsaip.gif) + +#### Example + +```JavaScript +import CardView from 'rnx-ui/CardView'; + +function Example(props) { + return ( + + ); +} +``` + +### ⚠️ 注意 + +CardView 会为卡片添加 `isActiveRnxUiCardView` 属性，激活卡片值为 `true`，其他卡片是 `false`。 + + diff --git a/CardView/README.md b/CardView/README.md deleted file mode 100644 index 0855fcd..0000000 --- a/CardView/README.md +++ /dev/null @@ -1,101 +0,0 @@ -# CardView - -**卡片视图** - -以卡片样式浏览，并可以设置激活卡片样式。 - -通过 `getEl` 属性获取 CardView 实例，调用 `scrollToCard` 方法可以 - -### ⚠️ 注意 - -CardView 会为卡片添加 `isActiveRnxUiCardView` 属性，激活卡片值为 `true`，其他卡片是 `false`。 - -## Demo - -![CardView](http://wx3.sinaimg.cn/mw690/4c8b519dly1fdgvohgt53g20hs0wsaip.gif) - -## Example - -```js -import CardView from 'rnx-ui/CardView'; - -function Example(props) { - return ( - - ); -} -``` - -## Props - -```js -CardView.propTypes = { - // 样式 - style: View.propTypes.style, - // 缩放系数 - scaleCoefficient: PropTypes.number, - // 当前卡片样式 - activeCardStyle: View.propTypes.style, - // 卡片数组 - cards: PropTypes.arrayOf(PropTypes.shape({ - /* eslint-disable */ - // 数组循环优化标示 key - key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - // 卡片元素 - card: PropTypes.element, - /* eslint-enable */ - })), - // 卡片宽度 - cardWidth: PropTypes.number, - // 卡片间隔 - cardGap: PropTypes.number, - // 自定义内容容器样式 - contentContainerStyle: View.propTypes.style, - // 卡片切换时的回调，参数为当前激活的卡片序号 - onChange: PropTypes.func, - // 卡片经过时的回调，参数为当前经过的卡片序号 - onPass: PropTypes.func, - // 速度指数 - v: PropTypes.number, - // 手势滑动触发最小距离（默认需要滑动卡片一半的距离） - minGestureDistance: PropTypes.number, - // 最大可访问的卡片序号 - maxIndex: PropTypes.number, - // 获取元素回调 - getEl: PropTypes.func, - // 到达顶部回调 - onStartReached: PropTypes.func, - // 到达底部回调 - onEndReached: PropTypes.func, -}; -CardView.defaultProps = { - style: null, - scaleCoefficient: 0.1, - activeCardStyle: null, - cards: [], - cardWidth: 200, - cardGap: 0, - contentContainerStyle: null, - onChange: NOOP, - onPass: NOOP, - v: 20, - minGestureDistance: null, - maxIndex: null, - getEl: NOOP, - onStartReached: NOOP, - onEndReached: NOOP, -}; -``` - -## Methods - -### scrollToCard(index) - -- **index**: {Number} 卡片序号 - -跳转至指定卡片 diff --git a/CardView/index.js b/CardView/index.js index cfa1837..2ecbebb 100644 --- a/CardView/index.js +++ b/CardView/index.js @@ -1,3 +1,12 @@ +/** + * @component CardView + * @version 0.17.0 + * @description 卡片视图 + * 以卡片样式浏览，并可以设置激活卡片样式。 + * + * @instructions {instruInfo: ./CardView/CardView.md} + * + */ import React, { Component, PropTypes, @@ -24,7 +33,6 @@ class CardView extends Component { super(props); props.getEl(this); - // 滚动坐标 this.x = 0; // 每张卡片所占空间宽度 @@ -288,13 +296,33 @@ class CardView extends Component { } CardView.propTypes = { - // 样式 + /** + * @property style + * @type Object + * @default null + * @description 样式 + */ style: View.propTypes.style, - // 缩放系数 + /** + * @property scaleCoefficient + * @type Number + * @default 0.1 + * @description 缩放系数 + */ scaleCoefficient: PropTypes.number, - // 当前卡片样式 + /** + * @property activeCardStyle + * @type Object + * @default null + * @description 当前卡片样式 + */ activeCardStyle: View.propTypes.style, - // 卡片数组 + /** + * @property cards + * @type Array + * @default [] + * @description 卡片数组 + */ cards: PropTypes.arrayOf(PropTypes.shape({ /* eslint-disable */ // 数组循环优化标示 key @@ -303,27 +331,87 @@ CardView.propTypes = { card: PropTypes.element, /* eslint-enable */ })), - // 卡片宽度 + /** + * @property cardWidth + * @type Number + * @default 200 + * @description 卡片宽度 + */ cardWidth: PropTypes.number, - // 卡片间隔 + /** + * @property cardGap + * @type Number + * @default 0 + * @description 卡片间隔 + */ cardGap: PropTypes.number, - // 自定义内容容器样式 + /** + * @property contentContainerStyle + * @type Object + * @default null + * @description 自定义内容容器样式 + */ contentContainerStyle: View.propTypes.style, - // 卡片切换时的回调，参数为当前激活的卡片序号 + /** + * @property onChange + * @type Function + * @default NOOP + * @description 卡片切换时的回调，参数为当前激活的卡片序号 + */ onChange: PropTypes.func, - // 卡片经过时的回调，参数为当前经过的卡片序号 + /** + * @property onPass + * @type Function + * @default NOOP + * @description 卡片经过时的回调，参数为当前经过的卡片序号 + */ onPass: PropTypes.func, - // 速度指数 + /** + * @property v + * @type Number + * @default 20 + * @description 速度指数 + */ v: PropTypes.number, - // 手势滑动触发最小距离（默认需要滑动卡片一半的距离） + /** + * @property minGestureDistance + * @type Number + * @default null + * @description 手势滑动触发最小距离（默认需要滑动卡片一半的距离） + */ minGestureDistance: PropTypes.number, - // 最大可访问的卡片序号 + /** + * @property maxIndex + * @type Number + * @default null + * @description 最大可访问的卡片序号 + */ maxIndex: PropTypes.number, - // 获取元素回调 + /** + * @property getEl + * @type Function + * @default NOOP + * @description 获取元素回调 + */ getEl: PropTypes.func, - // 到达顶部回调 + /** + * @property onStartReached + * @type Function + * @default NOOP + * @description 到达顶部回调 + */ onStartReached: PropTypes.func, - // 到达底部回调 + /** + * @property onEndReached + * @type Function + * @default NOOP + * @description 到达底部回调 + */ + /** + * @method scrollToCard(index) + * @param {Number} index 卡片序号 跳转至指定卡片 + * + */ onEndReached: PropTypes.func, }; CardView.defaultProps = { diff --git a/Confirm/Confirm.md b/Confirm/Confirm.md new file mode 100644 index 0000000..158f6cb --- /dev/null +++ b/Confirm/Confirm.md @@ -0,0 +1,9 @@ + +#### Demo + +![Confirm](http://wx3.sinaimg.cn/mw690/4c8b519dly1fdulcvgrcvg20hs0ws7h6.gif) + + +#### Other Points + +- 内部封装了 Dialog 组件，覆盖了 Dialog 的 `buttons` 属性，其他不变，请参考 [Dialog](https://github.com/dragonwong/rnx-ui/tree/master/Dialog) diff --git a/Confirm/README.md b/Confirm/README.md deleted file mode 100644 index e526541..0000000 --- a/Confirm/README.md +++ /dev/null @@ -1,40 +0,0 @@ -# Confirm - -**确认弹框组件** - -## Demo - -![Confirm](http://wx3.sinaimg.cn/mw690/4c8b519dly1fdulcvgrcvg20hs0ws7h6.gif) - -## Props - -```js -Confirm.propTypes = { - ...Dialog.propTypes, - // 取消按钮文本 - cancelText: PropTypes.string, - // 取消按钮文本样式 - cancelTextStyle: Text.propTypes.style, - // 取消按钮点击回调 - onCancel: PropTypes.func, - // 确认按钮文本 - confirmText: PropTypes.string, - // 确认按钮文本样式 - confirmTextStyle: Text.propTypes.style, - // 确认按钮点击回调 - onConfirm: PropTypes.func, -}; -Confirm.defaultProps = { - ...Dialog.defaultProps, - cancelText: '取消', - cancelTextStyle: null, - onCancel: NOOP, - confirmText: '确认', - confirmTextStyle: null, - onConfirm: NOOP, -}; -``` - -## Other Points - -- 内部封装了 Dialog 组件，覆盖了 Dialog 的 `buttons` 属性，其他不变，请参考 [Dialog](https://github.com/dragonwong/rnx-ui/tree/master/Dialog) diff --git a/Confirm/index.js b/Confirm/index.js index ab93add..577b7ed 100644 --- a/Confirm/index.js +++ b/Confirm/index.js @@ -1,3 +1,10 @@ +/** + * @component Confirm + * @version 0.17.0 + * @description 确认弹框组件 + * + * @instructions {instruInfo: ./Confirm/Confirm.md} + */ import React, { PropTypes, } from 'react'; @@ -37,17 +44,47 @@ class Confirm extends Dialog { Confirm.propTypes = { ...Dialog.propTypes, - // 取消按钮文本 + /** + * @property cancelText + * @type String + * @default '取消' + * @description 取消按钮文本 + */ cancelText: PropTypes.string, - // 取消按钮文本样式 + /** + * @property cancelTextStyle + * @type Object + * @default null + * @description 取消按钮文本样式 + */ cancelTextStyle: Text.propTypes.style, - // 取消按钮点击回调 + /** + * @property onCancel + * @type Function + * @default NOOP + * @description 取消按钮点击回调 + */ onCancel: PropTypes.func, - // 确认按钮文本 + /** + * @property confirmText + * @type String + * @default '确认' + * @description 确认按钮文本 + */ confirmText: PropTypes.string, - // 确认按钮文本样式 + /** + * @property confirmTextStyle + * @type Object + * @default null + * @description 确认按钮文本样式 + */ confirmTextStyle: Text.propTypes.style, - // 确认按钮点击回调 + /** + * @property onConfirm + * @type Function + * @default NOOP + * @description 确认按钮点击回调 + */ onConfirm: PropTypes.func, }; Confirm.defaultProps = { diff --git a/Dialog/Dialog.md b/Dialog/Dialog.md new file mode 100644 index 0000000..a97477c --- /dev/null +++ b/Dialog/Dialog.md @@ -0,0 +1,25 @@ + +#### Demo + +![Dialog](http://wx3.sinaimg.cn/mw690/4c8b519dly1fdulkkgmsog20hs0wsn81.gif) + +#### Example + +```JavaScript +import Dialog from 'rnx-ui/Dialog'; + +function Example(props) { + return ( + + ); +} +``` + diff --git a/Dialog/README.md b/Dialog/README.md deleted file mode 100644 index bf02176..0000000 --- a/Dialog/README.md +++ /dev/null @@ -1,73 +0,0 @@ -# Dialog - -**警告弹框** - -## Demo - -![Dialog](http://wx3.sinaimg.cn/mw690/4c8b519dly1fdulkkgmsog20hs0wsn81.gif) - -## Example - -```js -import Dialog from 'rnx-ui/Dialog'; - -function Example(props) { - return ( - - ); -} -``` - -## Props - -```js -Dialog.propTypes = { - // 是否显示 - visible: PropTypes.bool, - // 标题 - title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 标题文本样式（title 为字符串时才生效） - titleStyle: Text.propTypes.style, - // 内容 - message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 标题文本样式（title 为字符串时才生效） - messageStyle: Text.propTypes.style, - // 按钮容器样式 - buttonsContainerStyle: View.propTypes.style, - // 按钮 - buttons: PropTypes.arrayOf(PropTypes.shape({ - // 按钮文本 - text: PropTypes.string, - // 按钮样式 - style: Text.propTypes.style, - // 按钮点击回调 - onPress: PropTypes.func, - })), - // 弹框样式 - style: View.propTypes.style, - // 遮罩层样式 - overlayStyle: View.propTypes.style, - // 是否使用 Overlay 动画 - useOverlayAnimation: PropTypes.bool, -}; -Dialog.defaultProps = { - visible: false, - title: '', - titleStyle: null, - message: '', - messageStyle: null, - buttonsContainerStyle: null, - buttons: [], - style: null, - overlayStyle: null, - useOverlayAnimation: true, -}; -``` diff --git a/Dialog/index.js b/Dialog/index.js index 77d0935..2c218d5 100644 --- a/Dialog/index.js +++ b/Dialog/index.js @@ -1,3 +1,10 @@ +/** + * @component Dialog + * @version 0.17.1 + * @description 警告弹框 + * + * @instructions {instruInfo: ./Dialog/Dialog.md} + */ import React, { Component, PropTypes, @@ -108,19 +115,57 @@ class Dialog extends Component { } Dialog.propTypes = { - // 是否显示 + /** + * @property visible + * @type Boolean + * @default false + * @description 是否显示 + */ visible: PropTypes.bool, - // 标题 + /** + * @property title + * @type String Element + * @default '' + * @description 标题 + */ title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 标题文本样式（title 为字符串时才生效） + /** + * @property titleStyle + * @type Object + * @default null + * @description 标题文本样式（title 为字符串时才生效） + */ titleStyle: Text.propTypes.style, - // 内容 + /** + * @property message + * @type String Element + * @default '' + * @description 内容 + */ message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 标题文本样式（title 为字符串时才生效） + /** + * @property messageStyle + * @type Object + * @default null + * @description 标题文本样式（title 为字符串时才生效） + */ messageStyle: Text.propTypes.style, - // 按钮容器样式 + /** + * @property buttonsContainerStyle + * @type Object + * @default null + * @description 按钮容器样式 + */ buttonsContainerStyle: View.propTypes.style, - // 按钮 + /** + * @property buttons + * @type Array + * @default [] + * @param {String} text 按钮文本 + * @param {Object} style 按钮样式 + * @param {Function} onPress 按钮点击回调 + * @description 按钮 + */ buttons: PropTypes.arrayOf(PropTypes.shape({ /* eslint-disable */ // 按钮文本 @@ -131,11 +176,26 @@ Dialog.propTypes = { onPress: PropTypes.func, /* eslint-enable */ })), - // 弹框样式 + /** + * @property style + * @type Object + * @default null + * @description 弹框样式 + */ style: View.propTypes.style, - // 遮罩层样式 + /** + * @property overlayStyle + * @type Object + * @default null + * @description 遮盖层样式 + */ overlayStyle: View.propTypes.style, - // 是否使用 Overlay 动画 + /** + * @property useOverlayAnimation + * @type Boolean + * @default true + * @description 是否使用 Overlay 动画 + */ useOverlayAnimation: PropTypes.bool, }; Dialog.defaultProps = { diff --git a/Drop/README.md b/Drop/Drop.md similarity index 100% rename from Drop/README.md rename to Drop/Drop.md diff --git a/Drop/Dropper/Dropper.md b/Drop/Dropper/Dropper.md new file mode 100644 index 0000000..f43c1a7 --- /dev/null +++ b/Drop/Dropper/Dropper.md @@ -0,0 +1,39 @@ +#### Example + +```JavaScript +import { + Dropper, +} from 'rnx-ui/Drop'; + +function DropperImg(props) { + return ( + + + + ); +} +``` + +### ⚠️ 注意 + +1. 必须提供起点和终点坐标，起点和终点坐标可以通过 `Emitter` 和 `Receiver` 非常方便地获取到。 + +2. 强烈建议提供掉落元素的宽高，这样，`Dropper` 会将自身的中心置于起点，否则置于起点的将是 `Dropper` 的左上角。 \ No newline at end of file diff --git a/Drop/Dropper/index.js b/Drop/Dropper/index.js index 2a37481..158e420 100644 --- a/Drop/Dropper/index.js +++ b/Drop/Dropper/index.js @@ -1,3 +1,11 @@ +/** + * @component Dropper + * @version 0.17.0 + * @description 掉落组件 + * 用来包裹掉落元素，提供抛物线运动的动画。 + * + * @instructions {instruInfo: ./Drop/Dropper/Dropper.md} + */ import React, { Component, PropTypes, @@ -144,45 +152,124 @@ class Dropper extends Component { } Dropper.propTypes = { - // 起点位置 + /** + * @property startPosition + * @param {Number} x 水平坐标 + * @param {Number} y 垂直坐标 + * @type Object + * @default {0,0} + * @description 起点位置 + */ startPosition: PropTypes.shape({ // 水平坐标 x: PropTypes.number, // 垂直坐标 y: PropTypes.number, }).isRequired, - // 终点位置 + /** + * @property endPosition + * @param {Number} x 水平坐标 + * @param {Number} y 垂直坐标 + * @type Object + * @default {0,0} + * @description 终点位置 + */ endPosition: PropTypes.shape({ // 水平坐标 x: PropTypes.number, // 垂直坐标 y: PropTypes.number, }).isRequired, - // 掉落元素宽度 + /** + * @property width + * @type Number + * @default 0 + * @description 掉落元素宽度 + */ width: PropTypes.number, - // 掉落元素高度 + /** + * @property height + * @type Number + * @default 0 + * @description 掉落元素高度 + */ height: PropTypes.number, - // 动画时间 + /** + * @property duration + * @type Number + * @default 1000 + * @description 动画时间 + */ duration: PropTypes.number, - // 弹跳的高度 + /** + * @property jumpHeight + * @type Number + * @default 60 + * @description 弹跳的高度 + */ jumpHeight: PropTypes.number, - // 缩放值 + /** + * @property scale + * @type Number + * @default 1 + * @description 缩放值 + */ scale: PropTypes.number, - // 旋转角度，如 360 + /** + * @property rotate + * @type Number + * @default 360 + * @description 旋转角度 + */ rotate: PropTypes.number, - // 动画刚开始由透明变化至不透明的时间 + /** + * @property showDuration + * @type Number + * @default 100 + * @description 动画刚开始由透明变化至不透明的时间 + */ showDuration: PropTypes.number, - // 动画结束回调 + /** + * @property onEnd + * @type Function + * @default NOOP + * @description 动画结束回调 + */ onEnd: PropTypes.func, - // 是否需要收尾动画 + /** + * @property endAnimation + * @type Boolean + * @default true + * @description 是否需要收尾动画 + */ endAnimation: PropTypes.bool, - // 收尾弹跳的高度 + /** + * @property endJumpHeight + * @type Number + * @default 40 + * @description 收尾弹跳的高度 + */ endJumpHeight: PropTypes.number, - // 收尾动画时间 + /** + * @property endAnimationDuration + * @type Number + * @default 400 + * @description 收尾动画时间 + */ endAnimationDuration: PropTypes.number, - // 子元素 + /** + * @property children + * @type Element + * @default null + * @description 子元素 + */ children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, }; Dropper.defaultProps = { diff --git a/Drop/Emitter/Emitter.md b/Drop/Emitter/Emitter.md new file mode 100644 index 0000000..3ca7c73 --- /dev/null +++ b/Drop/Emitter/Emitter.md @@ -0,0 +1,19 @@ +#### Example + +```JavaScript +import { + Emitter, +} from 'rnx-ui/Drop'; + +function CartEmitter(props) { + return ( + + + + ); +} +``` \ No newline at end of file diff --git a/Drop/Emitter/index.js b/Drop/Emitter/index.js index f9c6cb0..8605b3b 100644 --- a/Drop/Emitter/index.js +++ b/Drop/Emitter/index.js @@ -1,3 +1,10 @@ +/** + * @component Emitter + * @version 0.17.0 + * @description 掉落事件点击发射组件 + * 用来包裹掉落事件点击发射元素，提供元素中心坐标，以作为掉落动画的起点。 + * @instructions {instruInfo: ./Drop/Emitter/Emitter.md} + */ import React, { Component, PropTypes, @@ -51,11 +58,26 @@ class Emitter extends Component { } Emitter.propTypes = { - // 点击回调，参数为点击元素中心坐标，如：{x: 0, y: 0} + /** + * @property onPress + * @type Function + * @default NOOP + * @description 点击回调，参数为点击元素中心坐标，如：{x: 0, y: 0} + */ onPress: PropTypes.func, - // 子元素 + /** + * @property children + * @type Element Array + * @default null + * @description 子元素 + */ children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, }; Emitter.defaultProps = { diff --git a/Drop/Receiver/Receiver.md b/Drop/Receiver/Receiver.md new file mode 100644 index 0000000..0f2e3f3 --- /dev/null +++ b/Drop/Receiver/Receiver.md @@ -0,0 +1,28 @@ +#### Example + +```JavaScript +import { + Receiver, +} from 'rnx-ui/Drop'; +import Badge from 'rnx-ui/Drop'; + +function CartReceiver(props) { + return ( + + + + + + ); +} +``` diff --git a/Drop/Receiver/index.js b/Drop/Receiver/index.js index dc347c4..733ef29 100644 --- a/Drop/Receiver/index.js +++ b/Drop/Receiver/index.js @@ -1,3 +1,14 @@ +/** + * @component Receiver + * @version 0.17.0 + * @description 掉落元素接受组件 + * + * 用来包裹掉落元素接受元素，如果该元素是绝对定位，定位的样式应该写在 `Receiver` 或父元素上，而不应该写在子元素上。`Receiver` 主要提供以下功能： + * 1. 提供元素中心坐标，以作为掉落动画的终点； + * 2. 提供掉落组件到达时的响应动画，需要在 `Dropper` 元素的 `onEnd` 回调中手动调用 `Receiver` 元素的 `animate` 方法。 + * + * @instructions {instruInfo: ./Drop/Receiver/Receiver.md} + */ import React, { PropTypes, Component, @@ -83,19 +94,54 @@ class Receiver extends Component { } Receiver.propTypes = { - // 获取中心位置回调 + /** + * @property getCenterPosition + * @type Function + * @default NOOP + * @description 获取中心位置回调 + */ getCenterPosition: PropTypes.func, - // 获取元素回调 + /** + * @property getEl + * @type Function + * @default NOOP + * @description 获取元素回调 + */ getEl: PropTypes.func, - // 缩放值 + /** + * @property scale + * @type Number + * @default 1.1 + * @description 缩放值 + */ scale: PropTypes.number, - // 动画时间 + /** + * @property duration + * @type Number + * @default 1.1 + * @description 动画时间 + */ duration: PropTypes.number, - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 子元素 + /** + * @property children + * @type Element Array + * @default null + * @description 子元素 + */ children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 布局回调 + /** + * @property onLayout + * @type Function + * @default NOOP + * @description 布局回调 + */ onLayout: PropTypes.func, }; Receiver.defaultProps = { diff --git a/Drop/index.js b/Drop/index.js index 820cf66..2e34aff 100644 --- a/Drop/index.js +++ b/Drop/index.js @@ -1,3 +1,13 @@ +/** + * @component Drop + * @version 0.17.0 + * @description 掉落动画组件 + * 抛物线掉落动画组件，通常用于购物类交互。除了掉落组件 `Dropper` 外，Drop 还提供了另外两个非常有用的辅助组件 `Emitter` 和 `Receiver`。 + * + * ![Drop](http://wx1.sinaimg.cn/mw690/4c8b519dly1fbp9qg0mlog20ho0wghdw.gif) + * + */ + export { default as Dropper } from './Dropper'; export { default as Emitter } from './Emitter'; export { default as Receiver } from './Receiver'; diff --git a/DynamicText/DynamicText.md b/DynamicText/DynamicText.md new file mode 100644 index 0000000..a97be6e --- /dev/null +++ b/DynamicText/DynamicText.md @@ -0,0 +1,18 @@ +#### Demo + +![DynamicText](http://wx4.sinaimg.cn/mw690/4c8b519dly1fdrlqh8ujsg20hs0ws4qq.gif) + +#### Example + +```JavaScript +import DynamicText from 'rnx-ui/DynamicText'; + +function Example(props) { + return ( + 自定义文字 + ); +} +``` +### ⚠️ 注意 + +DynamicText 有 `maxWidth` 属性可以配置支持的最大的文本长度，当文本长度超过配置时，文本会显示为多行，此时需要配置更大的长度。 diff --git a/DynamicText/README.md b/DynamicText/README.md deleted file mode 100644 index 9e10e17..0000000 --- a/DynamicText/README.md +++ /dev/null @@ -1,57 +0,0 @@ -# DynamicText - -**自动滚动的文本框** - -文字超长时可以自动滚动 - -### ⚠️ 注意 - -DynamicText 有 `maxWidth` 属性可以配置支持的最大的文本长度，当文本长度超过配置时，文本会显示为多行，此时需要配置更大的长度。 - -## Demo - -![DynamicText](http://wx4.sinaimg.cn/mw690/4c8b519dly1fdrlqh8ujsg20hs0ws4qq.gif) - -## Example - -```js -import DynamicText from 'rnx-ui/DynamicText'; - -function Example(props) { - return ( - 自定义文字 - ); -} -``` - -## Props - -```js -DynamicText.propTypes = { - // 自定义wrapper样式 - style: View.propTypes.style, - // 自定义文本样式 - textStyle: Text.propTypes.style, - // 显示文本 - children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - // 文字循环模式，默认reverse - // reverse：轮转到末尾后再轮转回开头 - // restart: 轮转到末尾后返回至开头重新循环 - mode: PropTypes.oneOf([MODE_RESTART, MODE_REVERSE]), - // 动画间隔时间，默认500 - bufferTime: PropTypes.number, - // 文字滚动速度，默认5，数字越大，速度越快 - speed: PropTypes.number, - // 文本最大宽度 - maxWidth: PropTypes.number, -}; -DynamicText.defaultProps = { - style: null, - textStyle: null, - children: null, - mode: MODE_REVERSE, - bufferTime: 1000, - speed: 5, - maxWidth: 1000, -}; -``` diff --git a/DynamicText/index.js b/DynamicText/index.js index 99fe130..9a5e0b3 100644 --- a/DynamicText/index.js +++ b/DynamicText/index.js @@ -1,5 +1,9 @@ /** - * 文本框，文字超长时滚动显示 + * @component DynamicText + * @version 0.17.0 + * @description 自动滚动的文本框：文字超长时滚动显示 + * + * @instructions {instruInfo: ./DynamicText/DynamicText.md} */ import React, { Component, @@ -146,21 +150,58 @@ class DynamicText extends Component { } DynamicText.propTypes = { - // 自定义wrapper样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义wrapper样式 + */ style: View.propTypes.style, - // 自定义文本样式 + /** + * @property textStyle + * @type Object + * @default null + * @description 自定义文本样式 + */ textStyle: Text.propTypes.style, - // 显示文本 + /** + * @property children + * @type String Number + * @default null + * @description 显示文本 + */ children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - // 文字循环模式，默认reverse - // reverse：轮转到末尾后再轮转回开头 - // restart: 轮转到末尾后返回至开头重新循环 + /** + * @property mode + * @type String + * @default MODE_REVERSE + * @param {String} MODE_RESTART 轮转到末尾后返回至开头重新循环 + * @param {String} MODE_REVERSE 轮转到末尾后再轮转回开头 + * @description 文字循环模式，默认reverse + * reverse:轮转到末尾后再轮转回开头 + * restart: 轮转到末尾后返回至开头重新循环 + */ mode: PropTypes.oneOf([MODE_RESTART, MODE_REVERSE]), - // 动画间隔时间，默认500 + /** + * @property bufferTime + * @type Number + * @default 1000 + * @description 动画间隔时间 + */ bufferTime: PropTypes.number, - // 文字滚动速度，默认5，数字越大，速度越快 + /** + * @property speed + * @type Number + * @default 5 + * @description 文字滚动速度,数字越大,速度越快 + */ speed: PropTypes.number, - // 文本最大宽度 + /** + * @property maxWidth + * @type Number + * @default 2000 + * @description 文本最大宽度 + */ maxWidth: PropTypes.number, }; DynamicText.defaultProps = { diff --git a/HeaderedSheet/demo.gif b/HeaderedSheet/HeaderedSheet.gif similarity index 100% rename from HeaderedSheet/demo.gif rename to HeaderedSheet/HeaderedSheet.gif diff --git a/HeaderedSheet/HeaderedSheet.md b/HeaderedSheet/HeaderedSheet.md new file mode 100644 index 0000000..a899605 --- /dev/null +++ b/HeaderedSheet/HeaderedSheet.md @@ -0,0 +1,7 @@ +#### Demo + +![NavBar demo](https://github.com/wangkexinW/rnx-ui/blob/doc/HeaderedSheet/HeaderedSheet.gif?raw=true) + +#### Other Points + +- 内部封装了 Overlay 组件，请参考 [Overlay](https://github.com/dragonwong/rnx-ui/tree/master/Overlay) diff --git a/HeaderedSheet/README.md b/HeaderedSheet/README.md deleted file mode 100644 index d036713..0000000 --- a/HeaderedSheet/README.md +++ /dev/null @@ -1,76 +0,0 @@ -# HeaderedSheet - -**有标题栏的底部弹层** - -## Demo - -![navBar demo](demo.gif) - -## Props - -```js -HeaderedSheet.propTypes = { - // 显示开关 - visible: Sheet.propTypes.visible, - // 遮罩层样式 - overlayStyle: Sheet.propTypes.overlayStyle, - // 关闭回调（动画结束时） - onClose: Sheet.propTypes.onClose, - // 遮罩点击事件 - onPressOverlay: Sheet.propTypes.onPressOverlay, - // 动画时长 - duration: Sheet.propTypes.duration, - // 自定容器义样式（包含 header 区域） - containerStyle: Sheet.propTypes.style, - // 自定义样式 - style: View.propTypes.style, - // 自定义 header 样式 - headerStyle: View.propTypes.style, - // 标题 - title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 标题文本样式（title 为字符串时才生效） - titleStyle: Text.propTypes.style, - // 标题到左右两边的距离 - titleGap: PropTypes.number, - // 左侧按钮 - leftBtn: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 左侧点击事件 - onPressLeftBtn: PropTypes.func, - // 左侧按钮文本样式（leftBtn 为字符串时才生效） - leftBtnStyle: Text.propTypes.style, - // 右侧按钮 - rightBtn: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 右侧点击事件 - onPressRightBtn: PropTypes.func, - // 右侧按钮文本样式（rightBtn 为字符串时才生效） - rightBtnStyle: Text.propTypes.style, - // 按钮点击透明度变化 - activeOpacity: PropTypes.number, - // 子元素 - children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), -}; -HeaderedSheet.defaultProps = { - visible: false, - overlayStyle: null, - onClose: NOOP, - onPressOverlay: NOOP, - duration: 200, - style: null, - headerHeight: null, - title: '', - titleStyle: null, - titleGap: 50, - leftBtn: null, - onPressLeftBtn: NOOP, - leftBtnStyle: null, - rightBtn: null, - onPressRightBtn: NOOP, - rightBtnStyle: null, - activeOpacity: ACTIVE_OPACITY, - children: null, -}; -``` - -## Other Points - -- 内部封装了 Overlay 组件，请参考 [Overlay](https://github.com/dragonwong/rnx-ui/tree/master/Overlay) diff --git a/HeaderedSheet/index.js b/HeaderedSheet/index.js index 66d697f..fd32b02 100644 --- a/HeaderedSheet/index.js +++ b/HeaderedSheet/index.js @@ -1,3 +1,10 @@ +/** + * @component HeaderedSheet + * @version 0.12.0 + * @description 有标题栏的底部弹层 + * + * @instructions {instruInfo: ./HeaderedSheet/HeaderedSheet.md} + */ import React, { Component, PropTypes } from 'react'; import { View, @@ -111,43 +118,138 @@ class HeaderedSheet extends Component { } HeaderedSheet.propTypes = { - // 显示开关 + /** + * @property visible + * @type Boolean + * @default false + * @description 显示开关 + */ visible: Sheet.propTypes.visible, - // 遮罩层样式 + /** + * @property overlayStyle + * @type Object + * @default null + * @description 遮罩层样式 + */ overlayStyle: Sheet.propTypes.overlayStyle, - // 关闭回调（动画结束时） + /** + * @property onClose + * @type Function + * @default NOOP + * @description 关闭回调（动画结束时） + */ onClose: Sheet.propTypes.onClose, - // 遮罩点击事件 + /** + * @property onPressOverlay + * @type Function + * @default NOOP + * @description 遮罩点击事件 + */ onPressOverlay: Sheet.propTypes.onPressOverlay, - // 动画时长 + /** + * @property duration + * @type Number + * @default 200 + * @description 动画时长 + */ duration: Sheet.propTypes.duration, - // 自定容器义样式（包含 header 区域） + /** + * @property containerStyle + * @type Object + * @default null + * @description 自定容器义样式（包含 header 区域） + */ containerStyle: Sheet.propTypes.style, - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 自定义 header 样式 + /** + * @property headerStyle + * @type Object + * @default null + * @description 自定义 header 样式 + */ headerStyle: View.propTypes.style, - // 标题 + /** + * @property title + * @type String Element + * @default '' + * @description 标题 + */ title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 标题文本样式（title 为字符串时才生效） + /** + * @property titleStyle + * @type Object + * @default null + * @description 标题文本样式（title 为字符串时才生效） + */ titleStyle: Text.propTypes.style, - // 标题到左右两边的距离 + /** + * @property titleGap + * @type Number + * @default 50 + * @description 标题到左右两边的距离 + */ titleGap: PropTypes.number, - // 左侧按钮 + /** + * @property leftBtn + * @type String Element + * @default null + * @description 左侧按钮 + */ leftBtn: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 左侧点击事件 + /** + * @property onPressLeftBtn + * @type Function + * @default NOOP + * @description 左侧点击事件 + */ onPressLeftBtn: PropTypes.func, - // 左侧按钮文本样式（leftBtn 为字符串时才生效） + /** + * @property leftBtnStyle + * @type Object + * @default null + * @description 左侧按钮文本样式（leftBtn 为字符串时才生效） + */ leftBtnStyle: Text.propTypes.style, - // 右侧按钮 + /** + * @property rightBtn + * @type String Element + * @default null + * @description 右侧按钮 + */ rightBtn: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 右侧点击事件 + /** + * @property onPressRightBtn + * @type Function + * @default NOOP + * @description 右侧点击事件 + */ onPressRightBtn: PropTypes.func, - // 右侧按钮文本样式（rightBtn 为字符串时才生效） + /** + * @property rightBtnStyle + * @type Object + * @default null + * @description 右侧按钮文本样式（leftBtn 为字符串时才生效） + */ rightBtnStyle: Text.propTypes.style, - // 按钮点击透明度变化 + /** + * @property activeOpacity + * @type Number + * @default ACTIVE_OPACITY + * @description 按钮点击透明度变化 + */ activeOpacity: PropTypes.number, - // 子元素 + /** + * @property children + * @type Element Array + * @default null + * @description 子元素 + */ children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), }; HeaderedSheet.defaultProps = { diff --git a/ImgHolder/demo.gif b/ImgHolder/ImgHolder.gif similarity index 100% rename from ImgHolder/demo.gif rename to ImgHolder/ImgHolder.gif diff --git a/ImgHolder/ImgHolder.md b/ImgHolder/ImgHolder.md new file mode 100644 index 0000000..0579eb2 --- /dev/null +++ b/ImgHolder/ImgHolder.md @@ -0,0 +1,3 @@ +#### Demo + +![ImgHolder](https://github.com/wangkexinW/rnx-ui/blob/doc/ImgHolder/ImgHolder.gif?raw=true) diff --git a/ImgHolder/README.md b/ImgHolder/README.md deleted file mode 100644 index d6ca208..0000000 --- a/ImgHolder/README.md +++ /dev/null @@ -1,30 +0,0 @@ -# ImgHolder - -**带占位的图片组件** - -## Demo - -![](demo.gif) - -## Props - -```js -ImgHolder.propTypes = { - // 自定义样式 - style: View.propTypes.style, - // 图片样式 - imgStyle: Image.propTypes.style, - // 占位元素 - holder: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 图片资源 - source: PropTypes.oneOfType([PropTypes.object, PropTypes.number]).isRequired, -}; -ImgHolder.defaultProps = { - style: null, - imgStyle: null, - holder: null, - source: { - uri: '', - }, -}; -``` diff --git a/ImgHolder/index.js b/ImgHolder/index.js index dfcbf28..3a853c7 100644 --- a/ImgHolder/index.js +++ b/ImgHolder/index.js @@ -1,5 +1,9 @@ /** - * 带占位的图片组件 + * @component ImgHolder + * @version 0.17.0 + * @description 带占位的图片组件 + * + * @instructions {instruInfo: ./ImgHolder/ImgHolder.md} */ import React, { PropTypes, @@ -45,13 +49,35 @@ class ImgHolder extends Component { } ImgHolder.propTypes = { - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 图片样式 + /** + * @property imgStyle + * @type Object + * @default null + * @description 图片样式 + */ imgStyle: Image.propTypes.style, - // 占位元素 + /** + * @property holder + * @type Element Array + * @default null + * @description 占位元素 + */ holder: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 图片资源 + /** + * @property source + * @type Object Number + * @default { + * uri: '' + * }, + * @description 图片资源 + */ source: PropTypes.oneOfType([PropTypes.object, PropTypes.number]).isRequired, }; ImgHolder.defaultProps = { diff --git a/ImgPicker/ImgPicker.md b/ImgPicker/ImgPicker.md new file mode 100644 index 0000000..cdb7c90 --- /dev/null +++ b/ImgPicker/ImgPicker.md @@ -0,0 +1,30 @@ +#### Demo + +![ImgPicker](https://github.com/wangkexinW/rnx-ui/blob/doc/ImgPicker/ImgPicker.png?raw=true) + +#### Example + +```JavaScript +import ImgPicker from 'rnx-ui/ImgPicker'; + +function Example(props) { + return ( + + } + adderVisible={this.state.images.length < MAX_PHOTOS_NUMBER} + imgDisplayerProps={{ + onImgPress: this.showPhoto, + deleter: ( + + ), + onDeleterPress: this.removePhoto, + }} + onAdderPress={this.openCameraActionSheet} + /> + ); +} +``` + diff --git a/ImgPicker/ImgPicker.png b/ImgPicker/ImgPicker.png new file mode 100644 index 0000000..91ec560 Binary files /dev/null and b/ImgPicker/ImgPicker.png differ diff --git a/ImgPicker/README.md b/ImgPicker/README.md deleted file mode 100644 index dae3cf9..0000000 --- a/ImgPicker/README.md +++ /dev/null @@ -1,65 +0,0 @@ -# ImgPicker - -**图片选择组件** - -## Example - -```js -import ImgPicker from 'rnx-ui/ImgPicker'; - -function Example(props) { - return ( - - } - adderVisible={this.state.images.length < MAX_PHOTOS_NUMBER} - imgDisplayerProps={{ - onImgPress: this.showPhoto, - deleter: ( - - ), - onDeleterPress: this.removePhoto, - }} - onAdderPress={this.openCameraActionSheet} - /> - ); -} -``` - -## Props - -```js -ImgPicker.propTypes = { - // 图片 uri 数组 - images: PropTypes.arrayOf(PropTypes.string), - // ImgDisplayer 属性 - imgDisplayerProps: PropTypes.shape(ImgDisplayer.propTypes), - // 自定义样式 - style: View.propTypes.style, - // 每项自定义样式 - itemStyle: View.propTypes.style, - // 添加按钮自定义样式 - adderBtnStyle: View.propTypes.style, - // 添加按钮点击回调 - onAdderPress: PropTypes.func, - // 添加按钮内容元素 - adder: PropTypes.element, - // 是否显示添加按钮 - adderVisible: PropTypes.bool, - // 添加按钮点击颜色反馈 - deleterUnderlayColor: PropTypes.string, -}; -ImgPicker.defaultProps = { - images: [], - imgDisplayerProps: ImgDisplayer.defaultProps, - style: null, - itemStyle: null, - adderBtnStyle: null, - onAdderPress: NOOP, - adder: +, - adderVisible: true, - deleterUnderlayColor: '#dfdfdf', -}; -``` diff --git a/ImgPicker/index.js b/ImgPicker/index.js index 3c64230..2c92676 100644 --- a/ImgPicker/index.js +++ b/ImgPicker/index.js @@ -1,3 +1,10 @@ +/** + * @component ImgPicker + * @version 0.11.7 + * @description 图片选择组件 + * + * @instructions {instruInfo: ./ImgPicker/ImgPicker.md} + */ import React, { Component, PropTypes, @@ -47,23 +54,68 @@ class ImgPicker extends Component { } ImgPicker.propTypes = { - // 图片 uri 数组 + /** + * @property images + * @type Array + * @default [] + * @description 图片 uri + */ images: PropTypes.arrayOf(PropTypes.string), - // ImgDisplayer 属性 + /** + * @property ImgDisplayerProps + * @type Object + * @default ImgDisplayer.defaultProps + * @description ImgDisplayer 属性 + */ imgDisplayerProps: PropTypes.shape(ImgDisplayer.propTypes), - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 每项自定义样式 + /** + * @property itemStyle + * @type Object + * @default null + * @description 每项自定义样式 + */ itemStyle: View.propTypes.style, - // 添加按钮自定义样式 + /** + * @property adderBtnStyle + * @type Object + * @default null + * @description 添加按钮自定义样式 + */ adderBtnStyle: View.propTypes.style, - // 添加按钮点击回调 + /** + * @property onAdderPress + * @type Function + * @default NOOP + * @description 添加按钮点击回调 + */ onAdderPress: PropTypes.func, - // 添加按钮内容元素 + /** + * @property adder + * @type Element + * @default + + * @description 添加按钮内容元素 + */ adder: PropTypes.element, - // 是否显示添加按钮 + /** + * @property adderVisible + * @type Boolean + * @default true + * @description 是否显示添加按钮 + */ adderVisible: PropTypes.bool, - // 添加按钮点击颜色反馈 + /** + * @property deleterUnderlayColor + * @type Function + * @default NOOP + * @description 添加按钮点击颜色反馈 + */ deleterUnderlayColor: PropTypes.string, }; ImgPicker.defaultProps = { diff --git a/ImgRollView/ImgRollView.md b/ImgRollView/ImgRollView.md new file mode 100644 index 0000000..b138965 --- /dev/null +++ b/ImgRollView/ImgRollView.md @@ -0,0 +1,22 @@ +#### Example + +```JavaScript +import ImgRollView from 'rnx-ui/ImgPicker'; + +function Example(props) { + return ( + } + iconUnSelected={} + /> + ); +} +``` + +### ⚠️ 注意 + +CameraRoll 提供了访问本地相册的功能。在iOS上使用这个模块之前，你需要先链接 RCTCameraRoll 库，具体做法请参考[链接原生库文档](https://reactnative.cn/docs/0.42/linking-libraries-ios.html)。另外，从 iOS10 开始，访问相册需要用户授权。你需要在 `Info.plist` 中添加一条名为 `NSCameraUsageDescription` 的键，然后在其值中填写向用户请求权限的具体描述。编辑完成后这个键在 Xcode 中实际会显示为 `Privacy - Camera Usage Description`。 + diff --git a/ImgRollView/README.md b/ImgRollView/README.md deleted file mode 100644 index a3174b6..0000000 --- a/ImgRollView/README.md +++ /dev/null @@ -1,69 +0,0 @@ -# ImgRollView - -**图片多选组件** - -### ⚠️ 注意 - -CameraRoll 提供了访问本地相册的功能。在iOS上使用这个模块之前，你需要先链接 RCTCameraRoll 库，具体做法请参考[链接原生库文档](https://reactnative.cn/docs/0.42/linking-libraries-ios.html)。另外，从 iOS10 开始，访问相册需要用户授权。你需要在 `Info.plist` 中添加一条名为 `NSCameraUsageDescription` 的键，然后在其值中填写向用户请求权限的具体描述。编辑完成后这个键在 Xcode 中实际会显示为 `Privacy - Camera Usage Description`。 - -## Example - -```js -import ImgRollView from 'rnx-ui/ImgPicker'; - -function Example(props) { - return ( - } - iconUnSelected={} - /> - ); -} -``` - -## Props - -```js -ImgRollView.propTypes = { - // 最大照片选择条数 - maxSelected: PropTypes.number, - // 图片间像素间隔 - gap: PropTypes.number, - // 每行显示的图片数量 - imagesPerRow: PropTypes.number, - // 静态资源类型，默认为 Photos - assetType: PropTypes.oneOf([ - 'Photos', - 'Videos', - 'All', - ]), - // 用户选择图片时触发的回调，返回参数为 node/uri/selected/uriSelected - onSelect: PropTypes.func, - // 选中图标 - iconSelected: PropTypes.element, - // 未选中图标 - iconUnSelected: PropTypes.element, - // 初始选中 uri - uriList: PropTypes.arrayOf(PropTypes.string), - // 外层容器样式 - style: styleShape, - // 选中图标外框样式 - iconSelectedStyle: styleShape, - // 未选中图标外框样式 - iconUnSelectedStyle: styleShape, -}; - -ImgRollView.defaultProps = { - maxSelected: 10, - gap: 8, - imagesPerRow: 4, - assetType: 'Photos', - iconSelected: v, - iconUnSelected: x, - onSelect: () => {}, - uriList: [], -}; -``` diff --git a/ImgRollView/index.js b/ImgRollView/index.js index 86fddef..c09570b 100644 --- a/ImgRollView/index.js +++ b/ImgRollView/index.js @@ -1,3 +1,10 @@ +/** + * @component ImgRollView + * @version 0.13.0 + * @description 图片多选组件 + * + * @instructions {instruInfo: ./ImgRollView/ImgRollView.md} + */ import React, { Component, PropTypes } from 'react'; import { Text, @@ -26,12 +33,17 @@ class ImgRollView extends Component { }, }); const { imagesPerRow, gap } = props; - - // 根据屏幕宽度与每行图片树计算图片宽度 + /** + * @description 根据屏幕宽度与每行图片树计算图片宽 + */ this.sideLength = ((width + gap) / imagesPerRow) - gap; - // 根据屏幕高度获取首屏要加载的图片数量 + /** + * @description 根据屏幕高度获取首屏要加载的图片数量 + */ this.pageSize = Math.ceil((height + gap) / (this.sideLength + gap)) * imagesPerRow; - // 记录已经选择的 uri + /** + * @description 记录已经选择的 uri + */ this.uriSelected = props.uriList; this.state = { @@ -39,7 +51,9 @@ class ImgRollView extends Component { dataSource: ds.cloneWithRows([]), }; - // autobind + /** + * @description autobind + */ this.onEndReached = this.onEndReached.bind(this); this.onSelectImage = this.onSelectImage.bind(this); this.renderRow = this.renderRow.bind(this); @@ -254,31 +268,89 @@ const styleShape = PropTypes.oneOfType([ ]); ImgRollView.propTypes = { - // 最大照片选择条数 + /** + * @property maxSelected + * @type Number + * @default 10 + * @description 最大照片选择条数 + */ maxSelected: PropTypes.number, - // 图片间像素间隔 + /** + * @property gap + * @type Number + * @default 8 + * @description 图片间像素间隔 + */ gap: PropTypes.number, - // 每行显示的图片数量 + /** + * @property imagesPerRow + * @type Number + * @default 4 + * @description 每行显示的图片数量 + */ imagesPerRow: PropTypes.number, - // 静态资源类型，默认为 Photos + /** + * @property assetType + * @type String + * @default 'Photos' + * @param {String} 'Photos' 图片资源 + * @param {String} 'Videos' 视频资源 + * @param {String} 'All' + * @description 静态资源类型 + */ assetType: PropTypes.oneOf([ 'Photos', 'Videos', 'All', ]), - // 用户选择图片时触发的回调，返回参数为 node/uri/selected/uriSelected + /** + * @property onSelect + * @type Function + * @default () => {} + * @description 用户选择图片时触发的回调，返回参数为 node/uri/selected/uriSelected + */ onSelect: PropTypes.func, - // 选中图标 + /** + * @property iconSelected + * @type Element + * @default v + * @description 选中图标 + */ iconSelected: PropTypes.element, - // 未选中图标 + /** + * @property iconUnSelected + * @type Element + * @default x + * @description 未选中图标 + */ iconUnSelected: PropTypes.element, - // 初始选中 uri + /** + * @property uriList + * @type Array + * @default [] + * @description 初始选中 uri + */ uriList: PropTypes.arrayOf(PropTypes.string), - // 外层容器样式 + /** + * @property style + * @type Object + * @default null + * @description 外层容器样式 + */ style: styleShape, - // 选中图标外框样式 + /** + * @property iconSelectedStyle + * @type Object + * @default null + * @description 选中图标外框样式 + */ iconSelectedStyle: styleShape, - // 未选中图标外框样式 + /** + * @property iconUnSelectedStyle + * @type Object + * @default null + * @description 未选中图标外框样式 + */ iconUnSelectedStyle: styleShape, }; diff --git a/KeyboardAdaptiveView/README.md b/KeyboardAdaptiveView/KeyboardAdaptiveView.md similarity index 78% rename from KeyboardAdaptiveView/README.md rename to KeyboardAdaptiveView/KeyboardAdaptiveView.md index fd91513..63e41d6 100644 --- a/KeyboardAdaptiveView/README.md +++ b/KeyboardAdaptiveView/KeyboardAdaptiveView.md @@ -1,7 +1,4 @@ -# KeyboardAdaptiveView - -**适应键盘的容器** - +#### 基本用法 > 当你找到这个组件时，你应该是遇到输入框被键盘遮挡的问题了。**请你再三跟产品/设计/开发确认，是否真的有必要将输入框放在页面的偏下位置**，这是 APP 开发历史悠久的坑，**任何经验丰富的从业者/主流的 APP 都会极力避免这种场景**，考虑下从根本解决这个问题，比如上移输入框的位置或者干脆新开一个页面？ > 当然不是说 `KeyboardAdaptiveView` 这个组件不好，相反，`KeyboardAdaptiveView` 非常有效，完全碾压 react-native 官方组件 `KeyboardAvoidingView`（既然来找 `KeyboardAdaptiveView` 相信你一定是被官方的那个组件坑了😄）。 @@ -18,13 +15,13 @@ 具体操作请参考 Example。 -## Demo +#### Demo ![KeyboardAdaptiveView](http://wx2.sinaimg.cn/mw690/4c8b519dly1fbztgmfj0lg20ho0wgqv8.gif) -## Example +#### Example -```js +```JavaScript import KeyboardAdaptiveView, { keyboardDismissMode, } from 'rnx-ui/Drop'; @@ -66,29 +63,3 @@ class Example extends Component { } ``` -## Props - -```js -KeyboardAdaptiveView.propTypes = { - // 获取元素回调 - getEl: PropTypes.func, - // 自定义样式 - style: View.propTypes.style, - // 子元素 - children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 更多距离。iOS 系统键盘可能会出现 suggest 行，导致键盘高度获取不准确。 - moreDistance: PropTypes.number, - // 最小键盘高度 - minKbdHeight: PropTypes.number, - // 安卓系统是否处理 - handlerAndroid: PropTypes.bool, -}; -KeyboardAdaptiveView.defaultProps = { - getEl: NOOP, - style: null, - children: null, - moreDistance: 40, - minKbdHeight: 250, - handlerAndroid: false, -}; -``` diff --git a/KeyboardAdaptiveView/index.js b/KeyboardAdaptiveView/index.js index 8eb9b24..18c8966 100644 --- a/KeyboardAdaptiveView/index.js +++ b/KeyboardAdaptiveView/index.js @@ -1,3 +1,10 @@ +/** + * @component KeyboardAdaptiveView + * @version 0.13.0 + * @description + * 适应键盘的容器 + * @instructions {instruInfo: ./KeyboardAdaptiveView/KeyboardAdaptiveView.md} + */ import React, { PropTypes, Component, @@ -135,17 +142,47 @@ class KeyboardAdaptiveView extends Component { } KeyboardAdaptiveView.propTypes = { - // 获取元素回调 + /** + * @property getEl + * @type Function + * @default NOOP + * @description 获取元素回调 + */ getEl: PropTypes.func, - // 自定义样式 + /** + * @property style + * @type Objectt + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 子元素 + /** + * @property children + * @type Element Array + * @default null + * @description 子元素 + */ children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 更多距离。iOS 系统键盘可能会出现 suggest 行，导致键盘高度获取不准确。 + /** + * @property moreDistance + * @type Number + * @default 40 + * @description 更多距离。iOS 系统键盘可能会出现 suggest 行，导致键盘高度获取不准确。 + */ moreDistance: PropTypes.number, - // 最小键盘高度 + /** + * @property minkbdHeight + * @type Number + * @default 250 + * @description 最小键盘高度 + */ minKbdHeight: PropTypes.number, - // 安卓系统是否处理 + /** + * @property handlerAndroid + * @type Boolean + * @default false + * @description 安卓系统是否处理 + */ handlerAndroid: PropTypes.bool, }; KeyboardAdaptiveView.defaultProps = { diff --git a/Loading/Loading.md b/Loading/Loading.md new file mode 100644 index 0000000..065775c --- /dev/null +++ b/Loading/Loading.md @@ -0,0 +1,7 @@ +#### Demo + + ![Loading](https://github.com/wangkexinW/rnx-ui/blob/doc/Loading/Loading.png?raw=true) + +#### Other Points + +- 内部封装了 Overlay 组件，请参考 [Overlay](https://github.com/dragonwong/rnx-ui/tree/master/Overlay) diff --git a/Loading/demo.png b/Loading/Loading.png similarity index 100% rename from Loading/demo.png rename to Loading/Loading.png diff --git a/Loading/README.md b/Loading/README.md deleted file mode 100644 index d792b19..0000000 --- a/Loading/README.md +++ /dev/null @@ -1,38 +0,0 @@ -# Loading - -**菊花加载器** - -## Demo - -![Loading Demo](demo.png) - -## Props - -```js -Loading.propTypes = { - // 显示开关 - visible: PropTypes.bool.isRequired, - // 遮罩层样式 - overlayStyle: View.propTypes.style, - // 菊花容器样式 - loaderStyle: View.propTypes.style, - // 菊花图标的颜色 - color: ActivityIndicator.propTypes.color, - // 菊花图标的大小 - size: ActivityIndicator.propTypes.size, - // 是否使用 Overlay 动画 - useOverlayAnimation: PropTypes.bool, -}; -Loading.defaultProps = { - visible: false, - overlayStyle: null, - loaderStyle: null, - color: '#fff', - size: 'small', - useOverlayAnimation: true, -}; -``` - -## Other Points - -- 内部封装了 Overlay 组件，请参考 [Overlay](https://github.com/dragonwong/rnx-ui/tree/master/Overlay) diff --git a/Loading/index.js b/Loading/index.js index 226d4c7..a7b6e18 100644 --- a/Loading/index.js +++ b/Loading/index.js @@ -1,5 +1,9 @@ /** - * 菊花加载中组件 + * @component Loading + * @version 0.17.1 + * @description 菊花加载中组件 + * + * @instructions {instruInfo: ./Loading/Loading.md} */ import React, { PropTypes, @@ -50,17 +54,47 @@ class Loading extends Component { } Loading.propTypes = { - // 显示开关 + /** + * @property visible + * @type Boolean + * @default false + * @description 显示开关 + */ visible: PropTypes.bool.isRequired, - // 遮罩层样式 + /** + * @property overlayStyle + * @type Object + * @default Null + * @description 遮罩层样式 + */ overlayStyle: View.propTypes.style, - // 菊花容器样式 + /** + * @property loaderStyle + * @type Object + * @default Null + * @description 菊花容器样式 + */ loaderStyle: View.propTypes.style, - // 菊花图标的颜色 + /** + * @property color + * @type String + * @default '#fff' + * @description 菊花图标的颜色 + */ color: ActivityIndicator.propTypes.color, - // 菊花图标的大小 + /** + * @property size + * @type String + * @default 'small' + * @description 菊花图标的大小 + */ size: ActivityIndicator.propTypes.size, - // 是否使用 Overlay 动画 + /** + * @property useOverlayAnimation + * @type String + * @default 'small' + * @description 是否使用 Overlay 动画 + */ useOverlayAnimation: PropTypes.bool, }; Loading.defaultProps = { diff --git a/NavBar/NavBar.md b/NavBar/NavBar.md new file mode 100755 index 0000000..72e19b9 --- /dev/null +++ b/NavBar/NavBar.md @@ -0,0 +1,9 @@ +#### Demo + +![NavBar](https://github.com/wangkexinW/rnx-ui/blob/doc/NavBar/NavBar.png?raw=true) + +#### Other Points + +- NavBar 的高度由 `statusBarHeight` 和 `headerHeight` 两部分组成。`statusBarHeight` 默认 iOS 为 20，Android 为 0；`headerHeight` 默认 iOS 为 44，Android 为 56。 + +- `titleGap` 用来控制 `title` 到左右两边的距离。在 `title` 为字符串且宽度超过这个距离时，标题会显示为自动剪切，并以 ‘...’ 结束。 diff --git a/NavBar/demo.png b/NavBar/NavBar.png similarity index 100% rename from NavBar/demo.png rename to NavBar/NavBar.png diff --git a/NavBar/README.md b/NavBar/README.md deleted file mode 100755 index a5b4701..0000000 --- a/NavBar/README.md +++ /dev/null @@ -1,67 +0,0 @@ -# NavBar - -**导航栏** - -## Demo - -![navBar demo](demo.png) - -## Props - -```js -NavBar.propTypes = { - // 自定义样式 - style: View.propTypes.style, - // statusBar 高度 - statusBarHeight: PropTypes.number, - // header 高度 - headerHeight: PropTypes.number, - // 标题 - title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 标题文本样式（title 为字符串时才生效） - titleStyle: Text.propTypes.style, - // 标题到左右两边的距离 - titleGap: PropTypes.number, - // 左侧按钮 - leftBtn: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 左侧按钮点击事件 - leftEvent: PropTypes.func, - // 左侧按钮文本样式（leftBtn 为字符串时才生效） - leftBtnStyle: Text.propTypes.style, - // 左侧按钮禁用 - leftBtnDisabled: PropTypes.bool, - // 右侧按钮 - rightBtn: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 右侧按钮点击事件 - rightEvent: PropTypes.func, - // 右侧按钮文本样式（rightBtn 为字符串时才生效） - rightBtnStyle: Text.propTypes.style, - // 右侧按钮禁用 - rightBtnDisabled: PropTypes.bool, - // 按钮点击透明度变化 - activeOpacity: PropTypes.number, -}; -NavBar.defaultProps = { - style: null, - statusBarHeight: STATUS_BAR_HEIGHT, - headerHeight: HEADER_HEIGHT, - title: '', - titleStyle: null, - titleGap: 50, - leftBtn: null, - leftEvent: NOOP, - leftBtnStyle: null, - leftBtnDisabled: false, - rightBtn: null, - rightEvent: NOOP, - rightBtnStyle: null, - rightBtnDisabled: false, - activeOpacity: ACTIVE_OPACITY, -}; -``` - -## Other Points - -- NavBar 的高度由 `statusBarHeight` 和 `headerHeight` 两部分组成。`statusBarHeight` 默认 iOS 为 20，Android 为 0；`headerHeight` 默认 iOS 为 44，Android 为 56。 - -- `titleGap` 用来控制 `title` 到左右两边的距离。在 `title` 为字符串且宽度超过这个距离时，标题会显示为自动剪切，并以 ‘...’ 结束。 diff --git a/NavBar/index.js b/NavBar/index.js index 0d14f10..dd34970 100755 --- a/NavBar/index.js +++ b/NavBar/index.js @@ -1,3 +1,10 @@ +/** + * @component NavBar + * @version 0.11.6 + * @description 导航栏 + * + * @instructions {instruInfo: ./NavBar/NavBar.md} + */ import React, { Component, PropTypes } from 'react'; import { Platform, @@ -106,35 +113,110 @@ class NavBar extends Component { } NavBar.propTypes = { - // 自定义样式 + /** + * @property style + * @type Object + * @default Null + * @description 自定义样式 + */ style: View.propTypes.style, - // statusBar 高度 + /** + * @property statusBarHeight + * @type Number + * @default STATUS_BAR_HEIGHT + * @description statusBar 高度 + */ statusBarHeight: PropTypes.number, - // header 高度 + /** + * @property headerHeight + * @type Number + * @default HEADER_HEIGHT + * @description header 高度 + */ headerHeight: PropTypes.number, - // 标题 + /** + * @property title + * @type String Element + * @default '' + * @description 标题 + */ title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 标题文本样式（title 为字符串时才生效） + /** + * @property titleStyle + * @type Object + * @default null + * @description 标题文本样式（title 为字符串时才生效） + */ titleStyle: Text.propTypes.style, - // 标题到左右两边的距离 + /** + * @property titleGap + * @type Number + * @default 50 + * @description 标题到左右两边的距离 + */ titleGap: PropTypes.number, - // 左侧按钮 + /** + * @property leftBtn + * @type String Element + * @default null + * @description 左侧按钮 + */ leftBtn: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 左侧按钮点击事件 + /** + * @property leftEvent + * @type Function + * @default NOOP + * @description 左侧按钮点击事件 + */ leftEvent: PropTypes.func, - // 左侧按钮文本样式（leftBtn 为字符串时才生效） + /** + * @property leftBtnStyle + * @type Object + * @default null + * @description 左侧按钮文本样式（leftBtn 为字符串时才生效） + */ leftBtnStyle: Text.propTypes.style, - // 左侧按钮禁用 + /** + * @property leftBtnDisabled + * @type Boolean + * @default false + * @description 左侧按钮禁用 + */ leftBtnDisabled: PropTypes.bool, - // 右侧按钮 + /** + * @property rightBtn + * @type String Element + * @default null + * @description 右侧按钮 + */ rightBtn: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 右侧按钮点击事件 + /** + * @property rightEvent + * @type Function + * @default NOOP + * @description 右侧按钮文本样式 + */ rightEvent: PropTypes.func, - // 右侧按钮文本样式（rightBtn 为字符串时才生效） + /** + * @property rightBtnStyle + * @type Object + * @default null + * @description 右侧按钮文本样式（rightBtn 为字符串时才生效） + */ rightBtnStyle: Text.propTypes.style, - // 右侧按钮禁用 + /** + * @property rightBtnDisabled + * @type Boolean + * @default false + * @description 右侧按钮禁用 + */ rightBtnDisabled: PropTypes.bool, - // 按钮点击透明度变化 + /** + * @property activeOpacity + * @type Number + * @default ACTIVE_OPACITY + * @description 按钮点击透明度变化 + */ activeOpacity: PropTypes.number, }; NavBar.defaultProps = { diff --git a/NumericKeyboard/README.md b/NumericKeyboard/NumericKeyboardar.md similarity index 51% rename from NumericKeyboard/README.md rename to NumericKeyboard/NumericKeyboardar.md index 7e39576..98fdb1d 100644 --- a/NumericKeyboard/README.md +++ b/NumericKeyboard/NumericKeyboardar.md @@ -1,16 +1,12 @@ -# NumericKeyboard - -**虚拟数字键盘** - 很多情况下系统的数字键盘不能满足我们的要求，比如不同平台数字键盘表现不一致，比如有的数字键盘存在小数点，比如需要配合虚拟输入框而系统的键盘又不易控制... -## Demo +#### Demo ![NumericKeyboard](http://wx2.sinaimg.cn/mw690/4c8b519dly1fbztgpbw6gg20ho0wgx6p.gif) -## Example +#### Example -```js +```JavaScript import NumericKeyboard from 'rnx-ui/NumericKeyboard'; function Example(props) { @@ -22,20 +18,3 @@ function Example(props) { } ``` -## Props - -```js -NumericKeyboard.propTypes = { - // 自定义样式 - style: View.propTypes.style, - // 按键回调 - onPress: PropTypes.func, - // 删除键内容 - deleteKeyContent: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.array]), -}; -NumericKeyboard.defaultProps = { - style: null, - onPress: NOOP, - deleteKeyContent: , -}; -``` diff --git a/NumericKeyboard/index.js b/NumericKeyboard/index.js index 654c16e..0f0ea42 100644 --- a/NumericKeyboard/index.js +++ b/NumericKeyboard/index.js @@ -1,3 +1,9 @@ +/** + * @component NumericKeyboardar + * @version 0.17.0 + * @description 虚拟数字键盘 + * @instructions {instruInfo: ./NumericKeyboard/NumericKeyboardar.md} + */ import React, { Component, PropTypes, @@ -96,11 +102,26 @@ class NumericKeyboard extends Component { } NumericKeyboard.propTypes = { - // 自定义样式 + /** + * @property style + * @type Object + * @default Null + * @description 自定义样式 + */ style: View.propTypes.style, - // 按键回调 + /** + * @property onPress + * @type Function + * @default NOOP + * @description 按键回调 + */ onPress: PropTypes.func, - // 删除键内容 + /** + * @property deleteKeyContent + * @type String Element Array + * @default + * @description 删除键内容 + */ deleteKeyContent: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.array]), }; NumericKeyboard.defaultProps = { diff --git a/Overlay/Overlay.md b/Overlay/Overlay.md new file mode 100644 index 0000000..3f94451 --- /dev/null +++ b/Overlay/Overlay.md @@ -0,0 +1,12 @@ +#### Demo + +![Overlay](http://wx2.sinaimg.cn/mw690/4c8b519dly1fdlfglw0mfg20hs0wsn3p.gif) + +### ⚠️ 注意 + +1. 点击 Overlay 内部元素时也会触发 Overlay 的 `onPress` 回调。如果需要避免该情况，请在内部元素外包裹 `Touchable*` 元素，用来捕获点击事件并阻止其冒泡。 + +1. Overlay 默认撑满父容器，且父容器需要设置样式属性 `position` 为 `'absolute'` 或 `'relative'`。 + +1. Overlay 不会阻止安卓物理返回键。 + diff --git a/Overlay/README.md b/Overlay/README.md deleted file mode 100644 index b9e8319..0000000 --- a/Overlay/README.md +++ /dev/null @@ -1,47 +0,0 @@ -# Overlay - -**遮罩层** - -具有渐隐渐显动画效果的遮罩层组件。 - -### ⚠️ 注意 - -1. 点击 Overlay 内部元素时也会触发 Overlay 的 `onPress` 回调。如果需要避免该情况，请在内部元素外包裹 `Touchable*` 元素，用来捕获点击事件并阻止其冒泡。 - -1. Overlay 默认撑满父容器，且父容器需要设置样式属性 `position` 为 `'absolute'` 或 `'relative'`。 - -1. Overlay 不会阻止安卓物理返回键。 - -## Demo - -![Overlay](http://wx2.sinaimg.cn/mw690/4c8b519dly1fdlfglw0mfg20hs0wsn3p.gif) - -## Props - -```js -Overlay.propTypes = { - // 显示开关 - visible: PropTypes.bool.isRequired, - // 点击回调 - onPress: PropTypes.func, - // 自定义样式 - style: View.propTypes.style, - // 子元素 - children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 控制 Overlay 是否可以作为触控事件的目标（参考 https://facebook.github.io/react-native/docs/view.html#pointerevents） - pointerEvents: View.propTypes.pointerEvents, - // 动画时长 - duration: PropTypes.number, - // 是否使用动画 - useAnimation: PropTypes.bool, -}; -Overlay.defaultProps = { - visible: false, - onPress: NOOP, - style: null, - children: null, - pointerEvents: 'auto', - duration: 200, - useAnimation: true, -}; -``` diff --git a/Overlay/index.js b/Overlay/index.js index e35055c..18e48de 100644 --- a/Overlay/index.js +++ b/Overlay/index.js @@ -1,5 +1,11 @@ /** * 遮罩层 + * @component Overlay + * @version 0.16.0 + * @description 遮罩层 + * 具有渐隐渐显动画效果的遮罩层组件。 + * + * @instructions {instruInfo: ./Overlay/Overlay.md} */ import React, { PropTypes, @@ -121,19 +127,54 @@ class Overlay extends Component { } Overlay.propTypes = { - // 显示开关 + /** + * @property visible + * @type Boolean + * @default false + * @description 显示开关 + */ visible: PropTypes.bool.isRequired, - // 点击回调 + /** + * @property onPress + * @type Function + * @default NOOP + * @description 点击回调 + */ onPress: PropTypes.func, - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 子元素 + /** + * @property children + * @type Element Array + * @default null + * @description 子元素 + */ children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 控制 Overlay 是否可以作为触控事件的目标（参考 https://facebook.github.io/react-native/docs/view.html#pointerevents） + /** + * @property pointerEvents + * @type String + * @default 'auto' + * @description 控制 Overlay 是否可以作为触控事件的目标（参考 https://facebook.github.io/react-native/docs/view.html#pointerevents） + */ pointerEvents: View.propTypes.pointerEvents, - // 动画时长 + /** + * @property duration + * @type Number + * @default 200 + * @description 动画时长 + */ duration: PropTypes.number, - // 是否使用动画 + /** + * @property useAnimation + * @type Boolean + * @default true + * @description 是否使用动画 + */ useAnimation: PropTypes.bool, }; Overlay.defaultProps = { diff --git a/PhoneNumInput/PhoneNumInput.md b/PhoneNumInput/PhoneNumInput.md new file mode 100644 index 0000000..0991429 --- /dev/null +++ b/PhoneNumInput/PhoneNumInput.md @@ -0,0 +1,8 @@ +#### 基本说明 + +> rnx-ui 表单校验工具 [Validator](https://github.com/dragonwong/rnx-ui/tree/master/util/Validator) 现已支持该组件。 + +#### Demo + +![PhoneNumInput](https://github.com/wangkexinW/rnx-ui/blob/doc/PhoneNumInput/phoneNumInput.png?raw=true) + diff --git a/PhoneNumInput/README.md b/PhoneNumInput/README.md deleted file mode 100644 index 2f4fb82..0000000 --- a/PhoneNumInput/README.md +++ /dev/null @@ -1,48 +0,0 @@ -# PhoneNumInput - -**手机号码输入框** - -> rnx-ui 表单校验工具 [Validator](https://github.com/dragonwong/rnx-ui/tree/master/util/Validator) 现已支持该组件。 - -## Demo - -![](demo.png) - -## Props - -```js -PhoneNumInput.propTypes = { - // 自定义样式 - style: View.propTypes.style, - // 自定义输入框样式 - inputStyle: TextInput.propTypes.style, - // 提示文字 - placeholder: PropTypes.string, - // 提示文字颜色 - placeholderTextColor: PropTypes.string, - // 校验器接口 - collectValidate: PropTypes.func, - // 默认值 - defaultValue: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string, - ]), - // 用来在校验器中做标识 - name: PropTypes.string, - // 用来在校验器中组成错误信息 - readableName: PropTypes.string, - // 改变回调 - onChangeText: PropTypes.func, -}; -PhoneNumInput.defaultProps = { - style: null, - inputStyle: null, - placeholder: '手机号', - placeholderTextColor: COLOR_PLACEHOLDER, - collectValidate: NOOP, - defaultValue: '', - name: 'PHONE_NUM_INPUT', - readableName: '手机号', - onChangeText: NOOP, -}; -``` diff --git a/PhoneNumInput/index.js b/PhoneNumInput/index.js index 0a3d693..2613ed8 100644 --- a/PhoneNumInput/index.js +++ b/PhoneNumInput/index.js @@ -1,5 +1,9 @@ /** - * 手机号码输入框组件 + * @component PhoneNumInput + * @version 0.13.1 + * @description 手机号码输入框组件 + * + * @instructions {instruInfo: ./PhoneNumInput/PhoneNumInput.md} */ import React, { Component, PropTypes } from 'react'; import { @@ -91,26 +95,71 @@ class PhoneNumInput extends Component { } PhoneNumInput.propTypes = { - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 自定义输入框样式 + /** + * @property inputStyle + * @type Object + * @default null + * @description 自定义输入框样式 + */ inputStyle: TextInput.propTypes.style, - // 提示文字 + /** + * @property placeholder + * @type String + * @default '手机号' + * @description 提示文字 + */ placeholder: PropTypes.string, - // 提示文字颜色 + /** + * @property placeholderTextColor + * @type String + * @default COLOR_PLACEHOLDER + * @description 提示文字颜色 + */ placeholderTextColor: PropTypes.string, - // 校验器接口 + /** + * @property collectValidate + * @type Function + * @default NOOP + * @description 校验器接口 + */ collectValidate: PropTypes.func, - // 默认值 + /** + * @property defaultValue + * @type String + * @default '' + * @description 默认值 + */ defaultValue: PropTypes.oneOfType([ PropTypes.number, PropTypes.string, ]), - // 用来在校验器中做标识 + /** + * @property name + * @type String + * @default 'PHONE_NUM_INPUT' + * @description 用来在校验器中做标识 + */ name: PropTypes.string, - // 用来在校验器中组成错误信息 + /** + * @property readableName + * @type String + * @default '手机号' + * @description 用来在校验器中组成错误信息 + */ readableName: PropTypes.string, - // 改变回调 + /** + * @property onChangeText + * @type Function + * @default NOOP + * @description 改变回调 + */ onChangeText: PropTypes.func, }; PhoneNumInput.defaultProps = { diff --git a/PhoneNumInput/demo.png b/PhoneNumInput/phoneNumInput.png similarity index 100% rename from PhoneNumInput/demo.png rename to PhoneNumInput/phoneNumInput.png diff --git a/PlaceholderInput/PlaceholderInput.md b/PlaceholderInput/PlaceholderInput.md new file mode 100644 index 0000000..aadc7b0 --- /dev/null +++ b/PlaceholderInput/PlaceholderInput.md @@ -0,0 +1,13 @@ +#### Example + +```JavaScript +import PlaceholderInput from 'rnx-ui/PlaceholderInput'; + +function Example(props) { + return ( + + ); +} +``` + + diff --git a/PlaceholderInput/README.md b/PlaceholderInput/README.md deleted file mode 100644 index eb3f3f3..0000000 --- a/PlaceholderInput/README.md +++ /dev/null @@ -1,65 +0,0 @@ -# PlaceholderInput - -**可以自定义占位元素的输入框** - -React Native 提供的 `TextInput` 组件的 `placeholder` 可定制程度太低了，`PlaceholderInput` 应运而生。 - -## Example - -```js -import PlaceholderInput from 'rnx-ui/PlaceholderInput'; - -function Example(props) { - return ( - - ); -} -``` - -## Props - -```js -PlaceholderInput.propTypes = { - // 自定义样式 - style: View.propTypes.style, - // 初始值 - defaultValue: PropTypes.string, - // 自定义输入框样式 - inputStyle: TextInput.propTypes.style, - // 占位元素 - placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 占位元素样式（placeholder 为字符串时才生效） - placeholderStyle: Text.propTypes.style, - // onChangeText 的第二个参数，同时在校验器中做标识 - name: PropTypes.string, - // 用来在校验器中组成错误信息 - readableName: PropTypes.string, - // 校验器接口 - collectValidate: PropTypes.func, - // 是否必要 - required: PropTypes.bool, - // 是否可禁用 - disabled: PropTypes.bool, - // 输入回调 - onChangeText: PropTypes.func, - // TextInput 属性 - textInputProps: PropTypes.object, - // 获取 TextInput 元素 - getInput: PropTypes.func, -}; -PlaceholderInput.defaultProps = { - style: null, - defaultValue: '', - inputStyle: null, - placeholder: '', - placeholderStyle: null, - name: '', - readableName: '', - collectValidate: NOOP, - required: false, - disabled: false, - onChangeText: NOOP, - textInputProps: {}, - getInput: NOOP, -}; -``` diff --git a/PlaceholderInput/index.js b/PlaceholderInput/index.js index a99843a..7313fc2 100644 --- a/PlaceholderInput/index.js +++ b/PlaceholderInput/index.js @@ -1,3 +1,10 @@ +/** + * @component PlaceholderInput + * @version 0.11.9 + * @description 可以自定义占位元素的输入框 + * React Native 提供的 `TextInput` 组件的 `placeholder` 可定制程度太低了，`PlaceholderInput` 应运而生。 + * @instructions {instruInfo: ./PlaceholderInput/PlaceholderInput.md} + */ import React, { PropTypes, Component, @@ -113,31 +120,92 @@ class PlaceholderInput extends Component { } PlaceholderInput.propTypes = { - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 初始值 + /** + * @property defaultValue + * @type String + * @default '' + * @description 初始值 + */ defaultValue: PropTypes.string, - // 自定义输入框样式 + /** + * @property inputStyle + * @type Object + * @default null + * @description 自定义输入框样式 + */ inputStyle: TextInput.propTypes.style, - // 占位元素 + /** + * @property placeholder + * @type String Element + * @default '' + * @description 占位元素 + */ placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 占位元素样式（placeholder 为字符串时才生效） + /** + * @property placeholderStyle + * @type Object + * @default null + * @description 占位元素样式 （placeholder 为字符串时才生效） + */ placeholderStyle: Text.propTypes.style, - // onChangeText 的第二个参数，同时在校验器中做标识 + /** + * @property name + * @type String + * @default '' + * @description onChangeText 的第二个参数，同时在校验器中做标识 + */ name: PropTypes.string, - // 用来在校验器中组成错误信息 + /** + * @property readableName + * @type String + * @default '' + * @description 用来在校验器中组成错误信息 + */ readableName: PropTypes.string, - // 校验器接口 + /** + * @property collectValidate + * @type Function + * @default NOOP + * @description 校验器接口 + */ collectValidate: PropTypes.func, - // 是否必要 + /** + * @property required + * @type Boolean + * @default false + * @description 是否必要 + */ required: PropTypes.bool, - // 输入回调 + /** + * @property onChangeText + * @type Function + * @default NOOP + * @description 输入回调 + */ onChangeText: PropTypes.func, /* eslint-disable */ - // TextInput 属性 + /** + * @property textInputProps + * @type Object + * @default {} + * @description TextInput 属性 + */ textInputProps: PropTypes.object, /* eslint-enable */ // 获取 TextInput 元素 + /** + * @property getInput + * @type Funciton + * @default NOOP + * @description 获取 TextInput 元素 + */ getInput: PropTypes.func, }; PlaceholderInput.defaultProps = { diff --git a/PlaceholderText/PlaceholderText.md b/PlaceholderText/PlaceholderText.md new file mode 100644 index 0000000..cd0180c --- /dev/null +++ b/PlaceholderText/PlaceholderText.md @@ -0,0 +1,14 @@ +#### Example + +```JavaScript +import PlaceholderText from 'rnx-ui/PlaceholderText'; + +function Example(props) { + return ( + + ); +} +``` + diff --git a/PlaceholderText/README.md b/PlaceholderText/README.md deleted file mode 100644 index 1025a38..0000000 --- a/PlaceholderText/README.md +++ /dev/null @@ -1,56 +0,0 @@ -# PlaceholderText - -**有占位元素的文本显示组件** - -## Example - -```js -import PlaceholderText from 'rnx-ui/PlaceholderText'; - -function Example(props) { - return ( - - ); -} -``` - -## Props - -```js -PlaceholderText.propTypes = { - // 值 - value: PropTypes.string, - // 值自定义样式 - valueStyle: Text.propTypes.style, - // 自定义样式 - style: View.propTypes.style, - // 占位元素 - placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 占位元素样式（placeholder 为字符串时才生效） - placeholderStyle: Text.propTypes.style, - // 点击回调 - onPress: PropTypes.func, - // 用来在校验器中做标识 - name: PropTypes.string, - // 用来在校验器中组成错误信息 - readableName: PropTypes.string, - // 校验器接口 - collectValidate: PropTypes.func, - // 是否必要 - required: PropTypes.bool, -}; -PlaceholderText.defaultProps = { - value: '', - valueStyle: null, - style: null, - placeholder: '', - placeholderStyle: null, - onPress: NOOP, - name: '', - readableName: '', - collectValidate: NOOP, - required: false, -}; -``` diff --git a/PlaceholderText/index.js b/PlaceholderText/index.js index b181aa4..8e68f0f 100644 --- a/PlaceholderText/index.js +++ b/PlaceholderText/index.js @@ -1,3 +1,9 @@ +/** + * @component PlaceholderText + * @version 0.11.9 + * @description 有占位元素的文本显示组件 + * @instructions {instruInfo: ./PlaceholderText/PlaceholderText.md} + */ import React, { PropTypes, Component, @@ -85,25 +91,75 @@ class PlaceholderText extends Component { } PlaceholderText.propTypes = { - // 值 + /** + * @property value + * @type String + * @default '' + * @description 值 + */ value: PropTypes.string, - // 值自定义样式 + /** + * @property valueStyle + * @type Object + * @default null + * @description 值自定义样式 + */ valueStyle: Text.propTypes.style, - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 占位元素 + /** + * @property placeholder + * @type String Element + * @default '' + * @description 占位元素 + */ placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - // 占位元素样式（placeholder 为字符串时才生效） + /** + * @property placeholderStyle + * @type Object + * @default null + * @description 占位元素样式（placeholder 为字符串时才生效） + */ placeholderStyle: Text.propTypes.style, - // 点击回调 + /** + * @property onPress + * @type Function + * @default NOOP + * @description 点击回调 + */ onPress: PropTypes.func, - // 用来在校验器中做标识 + /** + * @property name + * @type String + * @default '' + * @description 用来在校验器中做标识 + */ name: PropTypes.string, - // 用来在校验器中组成错误信息 + /** + * @property readablename + * @type String + * @default '' + * @description 用来在校验器中组成错误信息 + */ readableName: PropTypes.string, - // 校验器接口 + /** + * @property collectValidate + * @type String + * @default '' + * @description 校验器接口 + */ collectValidate: PropTypes.func, - // 是否必要 + /** + * @property required + * @type Boolean + * @default false + * @description 是否必要 + */ required: PropTypes.bool, }; PlaceholderText.defaultProps = { diff --git a/RefreshView/README.md b/RefreshView/README.md deleted file mode 100644 index c8647cd..0000000 --- a/RefreshView/README.md +++ /dev/null @@ -1,67 +0,0 @@ -# RefreshView - -**滚动框** - -带惯性、下拉刷新功能。官版的 ScrollView 下拉刷新的功能几乎没有可定制空间，而 RefreshView 可以对 RefreshControl 进行完全的自定义，包括控件的本身，下拉状态的实时响应等，具有极大的可定制空间。 - -配套组件：[RefreshControl](./RefreshControl/README.md) - -## Demo - -![](demo.gif) - -## Props - -```js -RefreshView.propTypes = { - // 滚动回调，参数为滚动距离 - onScroll: PropTypes.func, - // 调用 onEndReached 之前的临界值，描述距底部的距离 - onEndReachedThreshold: PropTypes.number, - // 当滚动至距离底部 onEndReachedThreshold 的范围内，会持续触发的回调 - onEndReached: PropTypes.func, - // 超出范围时的减速度 - overA: PropTypes.number, - // 超出范围时最大速度 - maxOverV: PropTypes.number, - // 拖拽超出范围时的减速度 - dragOverA: PropTypes.number, - // 渲染间隔时间 - renderInterval: PropTypes.number, - // 弹性恢复时间 - recoverTime: PropTypes.number, - // 刷新控件恢复时间 - refreshControlRecoverTime: PropTypes.number, - // 到达刷新状态所需的距离 - refreshDistance: PropTypes.number, - // 下拉刷新控件 - refreshControl: (props, propName, componentName) => { - const type = props[propName].type; - if (!type || type !== RefreshControl) { - throw new Error( - `${componentName}'s props \`refreshControl\` should be an instance of \`RefreshControl\`` - ); - } - }, - // 子元素 - children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), -}; -RefreshView.defaultProps = { - onScroll: NOOP, - onEndReachedThreshold: 0, - onEndReached: NOOP, - overA: 0.05, - maxOverV: 3, - dragOverA: 2.5, - renderInterval: 16, - recoverTime: 200, - refreshControlRecoverTime: 100, - refreshDistance: 60, - refreshControl: null, - children: null, -}; -``` - -## Todo - -1. 初始状态即为 loading 状态 diff --git a/RefreshView/demo.gif b/RefreshView/RefreshView.gif similarity index 100% rename from RefreshView/demo.gif rename to RefreshView/RefreshView.gif diff --git a/RefreshView/RefreshView.md b/RefreshView/RefreshView.md new file mode 100644 index 0000000..ebd5f10 --- /dev/null +++ b/RefreshView/RefreshView.md @@ -0,0 +1,18 @@ +#### Demo + + ![RefreshView](https://github.com/wangkexinW/rnx-ui/blob/doc/RefreshView/RefreshView.gif?raw=true) + +#### Example +```JavaScript + import PlaceholderText from 'rnx-ui/PlaceholderText'; + function Example(props) { + return ( + + ); + } +``` +#### Todo + +1. 初始状态即为 loading 状态 diff --git a/RefreshView/index.js b/RefreshView/index.js index 4ccd1dd..9802b1b 100644 --- a/RefreshView/index.js +++ b/RefreshView/index.js @@ -1,3 +1,14 @@ +/** + * @component RefreshView + * @version 0.17.0 + * @description 滚动框 + * 带惯性、下拉刷新功能。官版的 ScrollView 下拉刷新的功能几乎没有可定制空间，而 RefreshView 可以对 RefreshControl 进行完全的自定义， + * 包括控件的本身，下拉状态的实时响应等，具有极大的可定制空间。 + * + * 配套组件：[RefreshControl](./RefreshControl/README.md) + * + * @instructions {instruInfo: ./RefreshView/RefreshView.md} + */ import React, { Component, PropTypes, @@ -27,24 +38,18 @@ class RefreshView extends Component { refreshControlY: 0, }; - // 滚动坐标 + this.y = 0; - // 内部容器长度 + this.innerLen = 0; - // 外部容器长宽 + this.outerLen = 0; - // 滚动条容器长宽 + this.scrollBarContainerLen = 0; - // 刷新控件高度 + this.refreshControlHeight = 0; this.RCOnReadyToRefreshLock = false; - /** - * 刷新控件状态 - * 0: 「下拉刷新」初始状态，可下拉 - * 1: 「松开刷新」下拉距离到达刷新点 - * 2: 「刷新中...」正在刷新 - * @type {Number} - */ + this.refreshControlStatus = 0; this.lastRefreshControlStatus = 0; @@ -67,7 +72,6 @@ class RefreshView extends Component { componentWillMount() { this.panResponder = PanResponder.create({ onStartShouldSetPanResponderCapture: () => { - // 触摸时立刻停止当前动作 clearInterval(this.intervalId); clearInterval(this.refreshControlIntervalId); return false; @@ -75,16 +79,10 @@ class RefreshView extends Component { onStartShouldSetPanResponder: () => true, onMoveShouldSetPanResponderCapture: () => false, onMoveShouldSetPanResponder: (evt, gestureState) => { - // 冒泡劫持 - // 本来应该直接 return true 劫持 - // 但是 iPhone 6s 及其以上版本有 bug，会导致子组件无法响应事件 - // （很奇怪，在冒泡阶段，子组件响应事件的时机应该在父组件之前） - // https://github.com/facebook/react-native/issues/3082 const res = gestureState.dy !== 0; return res; }, onPanResponderMove: (evt, gestureState) => { - // 开始移动 const { dy } = gestureState; const dragOverA = this.props.dragOverA; const topThreshold = this.getTopThreshold(); @@ -92,15 +90,13 @@ class RefreshView extends Component { let p = y + dy; if (p > topThreshold) { - // 超出顶部范围，触发减速 const p0 = this.lastRefreshControlStatus === 0 ? 0 : topThreshold; p = p0 + ((p - p0) / dragOverA); - // 处理下拉刷新逻辑 + const refreshControl = this.props.refreshControl; if (refreshControl) { if (p >= this.props.refreshDistance) { - // 到达刷新点 if (this.refreshControlStatus === 0 && refreshControl.props.onReadyToRefresh) { this.refreshControlStatus = 1; this.props.refreshControl.props.onReadyToRefresh(); @@ -118,7 +114,6 @@ class RefreshView extends Component { } else { const d = this.outerLen - this.innerLen; if (p < d) { - // 超出底部范围，触发减速 p = d + ((p - d) / dragOverA); } } @@ -126,17 +121,14 @@ class RefreshView extends Component { this.position(p); }, onPanResponderRelease: (evt, gestureState) => { - // 停止移动 const { vy } = gestureState; const topThreshold = this.getTopThreshold(); const y = this.state.y; this.y = y; if (y > topThreshold) { - // 超出顶部范围，触发回弹 let s = y - topThreshold; if (this.refreshControlStatus !== 2 && y >= this.props.refreshDistance) { - // 到达刷新点 s = y - this.refreshControlHeight; if (this.props.refreshControl && this.props.refreshControl.props.onRefresh) { this.refreshControlStatus = 2; @@ -145,7 +137,6 @@ class RefreshView extends Component { } this.recover(s); } else { - // 超出底部范围，触发回弹 const d = this.outerLen - this.innerLen; if (y < d) { if (d < 0) { @@ -154,7 +145,6 @@ class RefreshView extends Component { this.recover(y); } } else { - // 判定没有超出范围，触发惯性 this.inertialScroll(vy); } } @@ -172,10 +162,6 @@ class RefreshView extends Component { const nextRefreshing = nextRefreshControl.props.refreshing; if (prevRefreshing === true && nextRefreshing === false) { - // * 0: 「下拉刷新」初始状态，可下拉 - // * 1: 「松开刷新」下拉距离到达刷新点 - // * 2: 「刷新中...」正在刷新 - // 2「刷新中...」结束，进入 0 this.refreshControlStatus = 0; this.lastRefreshControlStatus = 0; this.refreshControlRecover(); @@ -219,13 +205,13 @@ class RefreshView extends Component { return 0; } - // 定位 + setPosition(p) { this.y = p; this.position(p); } - // 检查 onEndReached 触发时机 + checkEndReached(p) { const distanceToBottom = (this.innerLen - this.outerLen) + p; if (distanceToBottom <= this.props.onEndReachedThreshold) { @@ -241,7 +227,7 @@ class RefreshView extends Component { this.renderScrollBar(p); } - // 惯性滚动 + inertialScroll(initalV) { const t = this.props.renderInterval; const towards = initalV > 0 ? 1 : -1; @@ -255,7 +241,7 @@ class RefreshView extends Component { n += 1; v = vMaker.getV(n * t); - // 趋近于 0，取 0 + if (v < 0.07) { clearInterval(this.intervalId); return; @@ -265,14 +251,12 @@ class RefreshView extends Component { const topThreshold = this.getTopThreshold(); if (p > topThreshold) { - // 到达顶部，停止惯性，进入超出范围滚动 p = topThreshold; clearInterval(this.intervalId); this.overScroll(v, towards); } else { const d = this.outerLen - this.innerLen; if (p < d) { - // 到达底部，停止惯性，进入超出范围滚动 p = d; clearInterval(this.intervalId); this.overScroll(towards * v, towards); @@ -283,8 +267,7 @@ class RefreshView extends Component { }, t); } - // 超出范围滚动 - // v = initalV - a*t + overScroll(initalV, towards = 1) { const maxOverV = this.props.maxOverV; let v0; @@ -306,12 +289,10 @@ class RefreshView extends Component { n += 1; v = v0 - (towards * (a * n * t)); if (towards === 1 && v <= 0) { - // 向下，速度降为 0 clearInterval(this.intervalId); this.recover(this.y - this.getTopThreshold()); return; } else if (towards === -1 && v >= 0) { - // 向上，速度降为 0 clearInterval(this.intervalId); const d = this.outerLen - this.innerLen; this.recover(this.y - d); @@ -323,13 +304,12 @@ class RefreshView extends Component { }, t); } - // 超出范围后恢复 + recover(S) { if (S === 0) { return; } - // const towards = S > 0 ? 1 : -1; const t = this.props.renderInterval; const T = this.props.recoverTime; const N = Math.floor(T / t); @@ -337,16 +317,6 @@ class RefreshView extends Component { this.intervalId = setInterval(() => { if (n >= N) { - // 按理来说，此时滚动位置已经到达目标位置 - // 保险其间，再强制到达目标位置 - // if (towards === 1) { - // // 向下滚动超出顶部，需要回到顶部 - // this.setPosition(0); - // } else { - // // 向上滚动超出底部，需要回到底部 - // const d = this.outerLen - this.innerLen; - // this.setPosition(d); - // } clearInterval(this.intervalId); return; } @@ -361,19 +331,18 @@ class RefreshView extends Component { }, t); } - // 显示滚动条 showScrollBar() { this.aniHideScrollBar.stop(); this.aniShowScrollBar.start(); } - // 隐藏滚动条 + hideScrollBar() { this.aniShowScrollBar.stop(); this.aniHideScrollBar.start(); } - // 刷新控件恢复 + refreshControlRecover() { const y = this.y; let S = y; @@ -390,16 +359,6 @@ class RefreshView extends Component { this.refreshControlIntervalId = setInterval(() => { if (n >= N) { - // 按理来说，此时滚动位置已经到达目标位置 - // 保险其间，再强制到达目标位置 - // if (towards === 1) { - // // 向下滚动超出顶部，需要回到顶部 - // this.setPosition(0); - // } else { - // // 向上滚动超出底部，需要回到底部 - // const d = this.outerLen - this.innerLen; - // this.setPosition(d); - // } clearInterval(this.refreshControlIntervalId); return; } @@ -414,18 +373,17 @@ class RefreshView extends Component { }, t); } - // 计算滚动条长度 renderScrollBar(thisY) { if (this.innerLen <= this.outerLen) { return; } - // 显示滚动条 + this.showScrollBar(); const maxLen = this.scrollBarContainerLen; - // 内容长度 + let contentLen = this.innerLen; - // 容器长度 + const containerLen = this.outerLen; const d = containerLen - contentLen; let len; @@ -439,14 +397,14 @@ class RefreshView extends Component { } /** - * 计算滚动条高度 + * @description 计算滚动条高度 */ if (y > 0) { contentLen += y; } else if (y < d) { contentLen = containerLen - y; } - // 长度比例 + const p = containerLen / contentLen; if (p >= 1) { @@ -456,13 +414,13 @@ class RefreshView extends Component { } /** - * 计算滚动条位置 + * @description 计算滚动条位置 */ if (p >= 1) { top = 0; } else { const maxTop = maxLen - len; - // 位置比例 + let pTop = y / d; if (pTop < 0) { pTop = 0; @@ -477,7 +435,6 @@ class RefreshView extends Component { scrollBarY: top, }); - // 隐藏滚动条 this.hideScrollBar(); } @@ -524,27 +481,82 @@ class RefreshView extends Component { } RefreshView.propTypes = { - // 滚动回调，参数为滚动距离 + /** + * @property onScroll + * @type Function + * @default NOOP + * @description 滚动回调，参数为滚动距离 + */ onScroll: PropTypes.func, - // 调用 onEndReached 之前的临界值，描述距底部的距离 + /** + * @property onEndReachedThreShold + * @type Number + * @default 0 + * @description 调用 onEndReached 之前的临界值，描述距底部的距离 + */ onEndReachedThreshold: PropTypes.number, - // 当滚动至距离底部 onEndReachedThreshold 的范围内，会持续触发的回调 + /** + * @property onEndReached + * @type Function + * @default NOOP + * @description 当滚动至距离底部 onEndReachedThreshold 的范围内，会持续触发的回调 + */ onEndReached: PropTypes.func, - // 超出范围时的减速度 + /** + * @property overA + * @type Number + * @default 0.05 + * @description 超出范围时的减速度 + */ overA: PropTypes.number, - // 超出范围时最大速度 + /** + * @property maxOverV + * @type Number + * @default 3 + * @description 超出范围时最大速度 + */ maxOverV: PropTypes.number, - // 拖拽超出范围时的减速度 + /** + * @property dragOverA + * @type Number + * @default 2.5 + * @description 拖拽超出范围时的减速度 + */ dragOverA: PropTypes.number, - // 渲染间隔时间 + /** + * @property renderInterval + * @type Number + * @default 16 + * @description 渲染间隔时间 + */ renderInterval: PropTypes.number, - // 弹性恢复时间 + /** + * @property recoverTime + * @type Number + * @default 200 + * @description 弹性恢复时间 + */ recoverTime: PropTypes.number, - // 刷新控件恢复时间 + /** + * @property refreshControlRecoverTime + * @type Number + * @default 100 + * @description 刷新控件恢复时间 + */ refreshControlRecoverTime: PropTypes.number, - // 到达刷新状态所需的距离 + /** + * @property refreshDistance + * @type Number + * @default 60 + * @description 刷新控件恢复时间 + */ refreshDistance: PropTypes.number, - // 下拉刷新控件 + /** + * @property refreshControl + * @type Function + * @default null + * @description 下拉刷新控件 + */ refreshControl: (props, propName, componentName) => { const type = props[propName].type; if (!type || type !== RefreshControl) { @@ -553,7 +565,12 @@ RefreshView.propTypes = { ); } }, - // 子元素 + /** + * @property children + * @type Element Array + * @default null + * @description 子元素 + */ children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), }; RefreshView.defaultProps = { diff --git a/Sheet/README.md b/Sheet/README.md deleted file mode 100644 index 700fafc..0000000 --- a/Sheet/README.md +++ /dev/null @@ -1,48 +0,0 @@ -# Sheet - -**底部弹层** - -底部弹层弹出会有动画。 - -## Demo - -![navBar demo](demo.gif) - -## Props - -```js -Sheet.propTypes = { - // 自定义样式 - style: View.propTypes.style, - // 显示开关 - visible: PropTypes.bool.isRequired, - // 遮罩层样式 - overlayStyle: View.propTypes.style, - // 关闭回调（动画结束时） - onClose: PropTypes.func, - // 遮罩点击事件 - onPressOverlay: PropTypes.func, - // 子元素 - children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 动画时长 - duration: PropTypes.number, -}; -Sheet.defaultProps = { - style: null, - visible: false, - overlayStyle: null, - onClose: NOOP, - onPressOverlay: NOOP, - children: null, - duration: 200, -}; -``` - -## Other Points - -- 子组件点击事件会穿透从而被遮罩层捕获，如需处理，请在子组件上加上点击事件进行拦截 -- 内部封装了 Overlay 组件，请参考 [Overlay](https://github.com/dragonwong/rnx-ui/tree/master/Overlay) - -## Todo - -- bugfix：`visible` 初始状态为 true 时只有遮罩 diff --git a/Sheet/demo.gif b/Sheet/Sheet.gif similarity index 100% rename from Sheet/demo.gif rename to Sheet/Sheet.gif diff --git a/Sheet/Sheet.md b/Sheet/Sheet.md new file mode 100644 index 0000000..838cca4 --- /dev/null +++ b/Sheet/Sheet.md @@ -0,0 +1,12 @@ +#### Demo + +![Sheet](https://github.com/wangkexinW/rnx-ui/blob/doc/Sheet/Sheet.gif?raw=true) + +#### Other Points + +- 子组件点击事件会穿透从而被遮罩层捕获，如需处理，请在子组件上加上点击事件进行拦截 +- 内部封装了 Overlay 组件，请参考 [Overlay](https://github.com/dragonwong/rnx-ui/tree/master/Overlay) + +#### Todo + +- bugfix：`visible` 初始状态为 true 时只有遮罩 diff --git a/Sheet/index.js b/Sheet/index.js index edee397..372de06 100644 --- a/Sheet/index.js +++ b/Sheet/index.js @@ -1,3 +1,11 @@ +/** + * @component Sheet + * @version 0.17.0 + * @description 底部弹层 + * 底部弹层弹出会有动画。 + * + * @instructions {instruInfo: ./Sheet/Sheet.md} + */ import React, { Component, PropTypes, @@ -125,19 +133,54 @@ class Sheet extends Component { } Sheet.propTypes = { - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 显示开关 + /** + * @property visible + * @type Boolean + * @default false + * @description 显示开关 + */ visible: PropTypes.bool.isRequired, - // 遮罩层样式 + /** + * @property overlayStyle + * @type Object + * @default null + * @description 遮盖层样式 + */ overlayStyle: View.propTypes.style, - // 关闭回调（动画结束时） + /** + * @property onClose + * @type Function + * @default NOOP + * @description 关闭回调（动画结束时） + */ onClose: PropTypes.func, - // 遮罩点击事件 + /** + * @property onPressOverlay + * @type Function + * @default NOOP + * @description 遮罩点击事件 + */ onPressOverlay: PropTypes.func, - // 子元素 + /** + * @property children + * @type Element Array + * @default null + * @description 子元素 + */ children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]), - // 动画时长 + /** + * @property duration + * @type Number + * @default 200 + * @description 动画时长 + */ duration: PropTypes.number, }; Sheet.defaultProps = { diff --git a/SmsCaptchaInput/README.md b/SmsCaptchaInput/README.md deleted file mode 100644 index 65779da..0000000 --- a/SmsCaptchaInput/README.md +++ /dev/null @@ -1,100 +0,0 @@ -# SmsCaptchaInput - -**短信验证码输入框** - -提供发送短信按钮和倒计时功能。 - -短信验证码输入框组件有4种状态： - -1. 初始状态 -2. 发送短信中状态 -3. 倒计时状态 -4. 倒计时结束状态 - -点击按钮会使组件由 `1. 初始状态` 进入 `2. 发送短信中状态`，此时需要根据接口状况进行判断： - -1. 如果发送短信成功：手动调起组件的 `start()` 方法，进入 `3. 倒计时状态`，在倒计时结束时组件会自动进入 `4. 倒计时结束状态`； - -2. 如果发送短信失败：手动调起组件的 `stop()` 方法，进入 `4. 倒计时结束状态`。 - -> rnx-ui 表单校验工具 [Validator](https://github.com/dragonwong/rnx-ui/tree/master/util/Validator) 现已支持该组件。 - -## Demo - -![](demo.png) - -## Props - -```js -SmsCaptchaInput.propTypes = { - // 自定义样式 - style: View.propTypes.style, - // 自定义输入框样式 - inputStyle: TextInput.propTypes.style, - // 自定义按钮样式 - btnStyle: View.propTypes.style, - // 按钮文字：初始状态 - btnTextInital: PropTypes.string, - // 按钮文字：发送短信中 - btnTextSending: PropTypes.string, - // 按钮文字：倒计时中，`{time}` 将会被替换为倒计时数字 - btnTextTiming: PropTypes.string, - // 按钮文字：倒计时结束 - btnTextTimed: PropTypes.string, - // 自定义按钮文本样式 - btnTextStyle: Text.propTypes.style, - // 提示文字 - placeholder: PropTypes.string, - // 提示文字颜色 - placeholderTextColor: PropTypes.string, - // 按钮点击透明度 - activeOpacity: PropTypes.number, - // 倒计时时间 - intervalTime: PropTypes.number, - // 点击发送短信按钮回调，当返回 false 时，可以阻止倒计时开始； - // 该回调接受两个参数：开始倒计时方法：`start` 和结束倒计时方法 `stop` - onPressBtn: PropTypes.func, - // 倒计时结束回调 - onStop: PropTypes.func, - // 验证码校验长度 - captchaLength: PropTypes.number, - // 校验器接口，值通常为叫校验器的校验手机方法 - collectValidate: PropTypes.func, - // 用来在校验器中做标识 - name: PropTypes.string, - // 用来在校验器中组成错误信息 - readableName: PropTypes.string, - // 改变回调 - onChangeText: PropTypes.func, - // 是否开启自动获取焦点（在 start 被调用时） - autoFocus: PropTypes.bool, - // 获取输入框 - getInput: PropTypes.func, - // 发送短信按钮热区 - hitSlop: TouchableOpacity.propTypes.hitSlop, -}; -SmsCaptchaInput.defaultProps = { - style: null, - inputStyle: null, - btnStyle: null, - btnTextInital: '获取验证码', - btnTextSending: '正在发送短信', - btnTextTiming: '{time}秒后可重发', - btnTextTimed: '重新获取', - btnTextStyle: null, - placeholder: '短信验证码', - placeholderTextColor: COLOR_PLACEHOLDER, - activeOpacity: ACTIVE_OPACITY, - intervalTime: 60, - onPressBtn: NOOP, - onStop: NOOP, - captchaLength: 6, - collectValidate: NOOP, - name: 'SMS_CODE_INPUT', - readableName: '短信验证码', - onChangeText: NOOP, - autoFocus: true, - getInput: NOOP, - hitSlop: null, -}; -``` diff --git a/SmsCaptchaInput/SmsCaptchaInput.md b/SmsCaptchaInput/SmsCaptchaInput.md new file mode 100644 index 0000000..5364cc3 --- /dev/null +++ b/SmsCaptchaInput/SmsCaptchaInput.md @@ -0,0 +1,4 @@ +#### Demo + +![SmsCaptchaInput](https://github.com/wangkexinW/rnx-ui/blob/doc/SmsCaptchaInput/SmsCaptchaInput.png?raw=true) + diff --git a/SmsCaptchaInput/demo.png b/SmsCaptchaInput/SmsCaptchaInput.png similarity index 100% rename from SmsCaptchaInput/demo.png rename to SmsCaptchaInput/SmsCaptchaInput.png diff --git a/SmsCaptchaInput/index.js b/SmsCaptchaInput/index.js index 5b6077d..7723108 100644 --- a/SmsCaptchaInput/index.js +++ b/SmsCaptchaInput/index.js @@ -1,18 +1,28 @@ /** - * 短信验证码输入框组件 + * @component SmsCaptchaInput + * @version 0.13.1 + * @description 短信验证码输入框 + * 短信验证码输入框组件有三种状态： * - * 短信验证码输入框组件有三种状态： - * 0：初始状态 - * 1：发送短信中状态 - * 2：倒计时状态 - * 3：倒计时结束状态 + * 0：初始状态 * - * 点击按钮会使组件由 `0：初始状态` 进入 `1：发送短信中状态`， - * 此时需要根据接口状况进行判断： - * 1、如果发送短信成功：手动调起组件的 `start` 方法，进入 `2：倒计时状态`， - * 在倒计时结束时组件会自动进入 `3：倒计时结束状态`； - * 2、如果发送短信失败：手动调起组件的 `stop` 方法，进入 `3：倒计时结束状态`； + * 1：发送短信中状态 + * + * 2：倒计时状态 + * + * 3：倒计时结束状态 + * + * 点击按钮会使组件由 `0：初始状态` 进入 `1：发送短信中状态`， + * 此时需要根据接口状况进行判断： + * 1、如果发送短信成功：手动调起组件的 `start` 方法，进入 `2：倒计时状态`， + * 在倒计时结束时组件会自动进入 `3：倒计时结束状态`； + * 2、如果发送短信失败：手动调起组件的 `stop` 方法，进入 `3：倒计时结束状态`； + * + * >rnx-ui 表单校验工具[Validator](https://github.com/dragonwong/rnx-ui/tree/master/util/Validator) 现已支持该组件。 + * + * @instructions {instruInfo: ./SmsCaptchaInput/SmsCaptchaInput.md} */ + import React, { Component, PropTypes } from 'react'; import { Platform, @@ -83,11 +93,15 @@ class SmsCaptchaInput extends Component { } onPress() { - // 检测是否处于点击发送短信状态 + /** + * @description 检测是否处于点击发送短信状态 + */ if (this.state.isRunning) { return; } - // 运行点击按钮回调 + /** + * @description 运行点击按钮回调 + */ if (this.props.onPressBtn(this.start, this.stop) === false) { return; } @@ -103,7 +117,9 @@ class SmsCaptchaInput extends Component { this.input = el; } - // 开始倒计时 + /** + * @description 开始倒计时 + */ start() { this.time = this.props.intervalTime; this.interval = setInterval(this.timer, 1000); @@ -112,7 +128,9 @@ class SmsCaptchaInput extends Component { this.input.focus(); } } - // 结束倒计时 + /** + * @description 结束倒计时 + */ stop() { clearInterval(this.interval); this.setState({ @@ -122,7 +140,9 @@ class SmsCaptchaInput extends Component { this.props.onStop(); } - // 倒计时函数 + /** + * @description 倒计时函数 + */ timer() { if (this.time > 0) { this.setState({ @@ -202,50 +222,161 @@ class SmsCaptchaInput extends Component { } SmsCaptchaInput.propTypes = { - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, - // 自定义输入框样式 + /** + * @property inputStyle + * @type Object + * @default null + * @description 自定义输入框样式 + */ inputStyle: TextInput.propTypes.style, - // 自定义按钮样式 + /** + * @property btnStyle + * @type Object + * @default null + * @description 自定义按钮样式 + */ btnStyle: View.propTypes.style, - // 按钮文字：初始状态 + /** + * @property btnTextInital + * @type String + * @default '获取验证码' + * @description 按钮文字：初始状态 + */ btnTextInital: PropTypes.string, - // 按钮文字：发送短信中 + /** + * @property btnTextSending + * @type String + * @default '正在发送短信' + * @description 按钮文字：发送短信中 + */ btnTextSending: PropTypes.string, - // 按钮文字：倒计时中，`{time}` 将会被替换为倒计时数字 + /** + * @property btnTextTiming + * @type String + * @default'{time}秒后可重发' + * @description 按钮文字：倒计时中，`{time}` 将会被替换为倒计时数字 + */ btnTextTiming: PropTypes.string, - // 按钮文字：倒计时结束 + /** + * @property btnTextTimed + * @type String + * @default '重新获取' + * @description 按钮文字：倒计时结束 + */ btnTextTimed: PropTypes.string, - // 自定义按钮文本样式 + /** + * @property btnTextStyle + * @type Object + * @default null + * @description 自定义按钮文本样式 + */ btnTextStyle: Text.propTypes.style, - // 提示文字 + /** + * @property placeholder + * @type String + * @default '短信验证码' + * @description 提示文字 + */ placeholder: PropTypes.string, - // 提示文字颜色 + /** + * @property placeholderTextColor + * @type String + * @default COLOR_PLACEHOLDER + * @description 提示文字颜色 + */ placeholderTextColor: PropTypes.string, - // 按钮点击透明度 + /** + * @property activeOpacity + * @type Number + * @default ACTIVE_OPACITY + * @description 按钮点击透明度 + */ activeOpacity: PropTypes.number, - // 倒计时时间 + /** + * @property intervalTime + * @type Number + * @default 60 + * @description 倒计时时间 + */ intervalTime: PropTypes.number, - // 点击发送短信按钮回调，当返回 false 时，可以阻止倒计时开始； - // 该回调接受两个参数：开始倒计时方法：`start` 和结束倒计时方法 `stop` + /** + * @property onPressBtn + * @type Function + * @default NOOP + * @description + * 点击发送短信按钮回调，当返回 false 时，可以阻止倒计时开始； + * 该回调接受两个参数：开始倒计时方法：`start` 和结束倒计时方法 `stop` + */ onPressBtn: PropTypes.func, - // 倒计时结束回调 + /** + * @property onStop + * @type Function + * @default NOOP + * @description 倒计时结束回调 + */ onStop: PropTypes.func, - // 验证码校验长度 + /** + * @property captchaLength + * @type Number + * @default 6 + * @description 验证码校验长度 + */ captchaLength: PropTypes.number, - // 校验器接口，值通常为叫校验器的校验手机方法 + /** + * @property collectValidate + * @type Function + * @default NOOP + * @description 校验器接口，值通常为叫校验器的校验手机方法 + */ collectValidate: PropTypes.func, - // 用来在校验器中做标识 + /** + * @property name + * @type String + * @default 'SMS_CODE_INPUT' + * @description 用来在校验器中做标识 + */ name: PropTypes.string, - // 用来在校验器中组成错误信息 + /** + * @property readablename + * @type String + * @default '短信验证码' + * @description 用来在校验器中组成错误信息 + */ readableName: PropTypes.string, - // 改变回调 + /** + * @property onChangeText + * @type Function + * @default NOOP + * @description 改变回调 + */ onChangeText: PropTypes.func, - // 是否开启自动获取焦点（在 start 被调用时） + /** + * @property autoFocus + * @type Boolean + * @default true + * @description 是否开启自动获取焦点（在 start 被调用时） + */ autoFocus: PropTypes.bool, - // 获取输入框 + /** + * @property getInput + * @type Function + * @default NOOP + * @description 获取输入框 + */ getInput: PropTypes.func, - // 发送短信按钮热区 + /** + * @property hitSlop + * @type Object + * @default null + * @description 发送短信按钮热区 + */ hitSlop: TouchableOpacity.propTypes.hitSlop, }; SmsCaptchaInput.defaultProps = { diff --git a/TabBar/README.md b/TabBar/README.md deleted file mode 100644 index 1bd3a78..0000000 --- a/TabBar/README.md +++ /dev/null @@ -1,43 +0,0 @@ -# TabBar - -**横向点击栏** - -## Demo - -![navBar demo](demo.png) - -## Props - -```js -TabBar.propTypes = { - // 激活项的 Id，必须是 items 项的 id 属性 - activeId: PropTypes.string, - // 自定义样式 - style: View.propTypes.style, - // tab 项 - items: PropTypes.arrayOf(PropTypes.shape({ - // tab 项 id - id: PropTypes.string, - // tab 项默认元素 - defaultComponent: PropTypes.element, - // tab 项激活元素 - activedComponent: PropTypes.element, - })), - // tab 项点击时透明度 - activeOpacity: PropTypes.number, - // 改变激活项时的回调，点击项的 id 会作为参数传入。 - onPress: PropTypes.func, -}; -TabBar.defaultProps = { - activeId: '', - style: null, - items: [{}], - activeOpacity: 1, - onPress: NOOP, -}; -``` - -## Other Points - -- TabBar 默认不设高度 -- 为防止 `defaultComponent` 和 `activedComponent` 不被刷新，强烈建议加上 `key` diff --git a/TabBar/TabBar.md b/TabBar/TabBar.md new file mode 100644 index 0000000..514c251 --- /dev/null +++ b/TabBar/TabBar.md @@ -0,0 +1,8 @@ +#### Demo + +![TabBar](https://github.com/wangkexinW/rnx-ui/blob/doc/TabBar/TabBar.png?raw=true) + +#### Other Points + +- TabBar 默认不设高度 +- 为防止 `defaultComponent` 和 `activedComponent` 不被刷新，强烈建议加上 `key` diff --git a/TabBar/demo.png b/TabBar/TabBar.png similarity index 100% rename from TabBar/demo.png rename to TabBar/TabBar.png diff --git a/TabBar/index.js b/TabBar/index.js index da00bba..4e64205 100644 --- a/TabBar/index.js +++ b/TabBar/index.js @@ -1,3 +1,10 @@ +/** + * @component TabBar + * @version 0.17.0 + * @description 横向点击栏 + * + * @instructions {instruInfo: ./TabBar/TabBar.md} + */ import React, { PropTypes, Component, @@ -53,12 +60,30 @@ class TabBar extends Component { } TabBar.propTypes = { - // 激活项的 Id，必须是 items 项的 id 属性 + /** + * @property activeId + * @type String + * @default '' + * @description 激活项的 Id，必须是 items 项的 id 属性 + */ activeId: PropTypes.string, - // 自定义样式 + /** + * @property style + * @type Object + * @default null + * @description 自定义样式 + */ style: View.propTypes.style, /* eslint-disable */ - // tab 项 + /** + * @property items + * @type Object + * @default [{}] + * @param {String} id tab 项 id + * @param {Element} defaultComponent tab 项默认元素 + * @param {Element} activedComponent tab 项激活元素 + * @description tab 项 + */ items: PropTypes.arrayOf(PropTypes.shape({ // tab 项 id id: PropTypes.string, @@ -68,10 +93,20 @@ TabBar.propTypes = { activedComponent: PropTypes.element, })), /* eslint-enable */ - // tab 项点击时透明度 + /** + * @property activeOpacity + * @type Number + * @default 1 + * @description tab 项点击时透明度 + */ activeOpacity: PropTypes.number, /* eslint-disable */ - // 改变激活项时的回调，点击项的 id 会作为参数传入。 + /** + * @property onPress + * @type Function + * @default NOOP + * @description 改变激活项时的回调，点击项的 id 会作为参数传入。 + */ onPress: PropTypes.func, /* eslint-enable */ }; diff --git a/ToolTip/README.md b/ToolTip/README.md deleted file mode 100644 index 9091c84..0000000 --- a/ToolTip/README.md +++ /dev/null @@ -1,56 +0,0 @@ -# ToolTip - -**提示框** - -## Demo - -![ToolTip](http://wx2.sinaimg.cn/mw690/4c8b519dly1fdlfmi544kg20hs0wswjd.gif) - -## Example - -```js -import ToolTip from 'rnx-ui/ToolTip'; - -function Example(props) { - return ( - - ); -} -``` - -## Props - -```js -ToolTip.propTypes = { - // 显示开关 - visible: PropTypes.bool.isRequired, - // 显示文本 - text: PropTypes.string.isRequired, - // 遮罩层样式 - overlayStyle: View.propTypes.style, - // 文本容器样式 - textWrapperStyle: View.propTypes.style, - // 文本样式 - textStyle: Text.propTypes.style, - // 控制 Overlay 是否可以作为触控事件的目标（参考 https://facebook.github.io/react-native/docs/view.html#pointerevents） - pointerEvents: Overlay.propTypes.pointerEvents, - // 是否使用 Overlay 动画 - useOverlayAnimation: PropTypes.bool, -}; -ToolTip.defaultProps = { - visible: false, - text: '', - overlayStyle: null, - textWrapperStyle: null, - textStyle: null, - pointerEvents: 'none', - useOverlayAnimation: true, -}; -``` - -## Other Points - -- 内部封装了 Overlay 组件，请参考 [Overlay](https://github.com/dragonwong/rnx-ui/tree/master/Overlay) diff --git a/ToolTip/ToolTip.md b/ToolTip/ToolTip.md new file mode 100644 index 0000000..f37dbdf --- /dev/null +++ b/ToolTip/ToolTip.md @@ -0,0 +1,7 @@ +#### Demo + +![ToolTip](http://wx2.sinaimg.cn/mw690/4c8b519dly1fdlfmi544kg20hs0wswjd.gif) + +#### Other Points + +- 内部封装了 Overlay 组件，请参考 [Overlay](https://github.com/dragonwong/rnx-ui/tree/master/Overlay) diff --git a/ToolTip/index.js b/ToolTip/index.js index e6ee481..aa3be11 100644 --- a/ToolTip/index.js +++ b/ToolTip/index.js @@ -1,3 +1,10 @@ +/** + * @component ToolTip + * @version 0.16.0 + * @description 提示框 + * + * @instructions {instruInfo: ./ToolTip/ToolTip.md} + */ import React, { Component, PropTypes, @@ -52,19 +59,54 @@ class ToolTip extends Component { } ToolTip.propTypes = { - // 显示开关 + /** + * @property visible + * @type Boolean + * @default false + * @description 显示开关 + */ visible: PropTypes.bool.isRequired, - // 显示文本 + /** + * @property text + * @type String + * @default '' + * @description 显示文本 + */ text: PropTypes.string.isRequired, - // 遮罩层样式 + /** + * @property overlayStyle + * @type Object + * @default null + * @description 遮罩层样式 + */ overlayStyle: View.propTypes.style, - // 文本容器样式 + /** + * @property textWrapperStyle + * @type Object + * @default null + * @description 文本容器样式 + */ textWrapperStyle: View.propTypes.style, - // 文本样式 + /** + * @property textStyle + * @type Object + * @default null + * @description 文本样式 + */ textStyle: Text.propTypes.style, - // 控制 Overlay 是否可以作为触控事件的目标（参考 https://facebook.github.io/react-native/docs/view.html#pointerevents） + /** + * @property pointerEvents + * @type String + * @default 'none' + * @description 控制 Overlay 是否可以作为触控事件的目标（参考 https://facebook.github.io/react-native/docs/view.html#pointerevents） + */ pointerEvents: Overlay.propTypes.pointerEvents, - // 是否使用 Overlay 动画 + /** + * @property useOverlayAnimation + * @type Boolean + * @default true + * @description 是否使用 Overlay 动画 + */ useOverlayAnimation: PropTypes.bool, }; ToolTip.defaultProps = { diff --git a/VirtualPasswordInput/README.md b/VirtualPasswordInput/README.md deleted file mode 100644 index c35b5f9..0000000 --- a/VirtualPasswordInput/README.md +++ /dev/null @@ -1,58 +0,0 @@ -# VirtualPasswordInput - -**虚拟密码输入框** - -## Demo - -![VirtualPasswordInput](http://wx1.sinaimg.cn/mw690/4c8b519dly1fbztgvfczlg20ho0wghdv.gif) - -## Example - -```js -import VirtualPasswordInput from 'rnx-ui/VirtualPasswordInput'; - -function Example(props) { - return ( - - ); -} -``` - -## Props - -```js -VirtualPasswordInput.propTypes = { - // 值 - value: PropTypes.string, - // 是否启用安全输入 - secureTextEntry: PropTypes.bool, - // 最外层样式 - style: View.propTypes.style, - // 容器样式 - containerStyle: View.propTypes.style, - // 单个输入框样式 - cellStyle: View.propTypes.style, - // 安全码样式 - secureStyle: View.propTypes.style, - // 文本样式 - textStyle: Text.propTypes.style, - // 最大长度 - maxLength: PropTypes.number, - // 点击回调 - onPress: PropTypes.func, -}; -VirtualPasswordInput.defaultProps = { - value: '', - secureTextEntry: true, - style: null, - containerStyle: null, - cellStyel: null, - secureStyle: null, - textStyle: null, - maxLength: 6, - onPress: NOOP, -}; -``` diff --git a/VirtualPasswordInput/VirtualPasswordInput.md b/VirtualPasswordInput/VirtualPasswordInput.md new file mode 100644 index 0000000..ab22ea3 --- /dev/null +++ b/VirtualPasswordInput/VirtualPasswordInput.md @@ -0,0 +1,19 @@ +#### Demo + +![VirtualPasswordInput](http://wx1.sinaimg.cn/mw690/4c8b519dly1fbztgvfczlg20ho0wghdv.gif) + +#### Example + +```JavaScript +import VirtualPasswordInput from 'rnx-ui/VirtualPasswordInput'; + +function Example(props) { + return ( + + ); +} +``` + diff --git a/VirtualPasswordInput/index.js b/VirtualPasswordInput/index.js index 4edba41..ac6e006 100644 --- a/VirtualPasswordInput/index.js +++ b/VirtualPasswordInput/index.js @@ -1,3 +1,11 @@ +/** + * @component VirtualPasswordInput + * @version 0.17.0 + * @description 虚拟密码输入框 + * + * @instructions {instruInfo: ./VirtualPasswordInput/VirtualPasswordInput.md} + */ + import React, { Component, PropTypes } from 'react'; import { TouchableWithoutFeedback, @@ -56,23 +64,68 @@ class VirtualPasswordInput extends Component { } VirtualPasswordInput.propTypes = { - // 值 + /** + * @property value + * @type String + * @default '' + * @description 值 + */ value: PropTypes.string, - // 是否启用安全输入 + /** + * @property secureTextEntry + * @type Boolean + * @default true + * @description 是否启用安全输入 + */ secureTextEntry: PropTypes.bool, - // 最外层样式 + /** + * @property style + * @type Object + * @default null + * @description 最外层样式 + */ style: View.propTypes.style, - // 容器样式 + /** + * @property containerStyle + * @type Object + * @default null + * @description 容器样式 + */ containerStyle: View.propTypes.style, - // 单个输入框样式 + /** + * @property cellStyle + * @type Object + * @default null + * @description 单个输入框样式 + */ cellStyle: View.propTypes.style, - // 安全码样式 + /** + * @property secureStyle + * @type Object + * @default null + * @description 安全码样式 + */ secureStyle: View.propTypes.style, - // 文本样式 + /** + * @property textStyle + * @type Object + * @default null + * @description 文本样式 + */ textStyle: Text.propTypes.style, - // 最大长度 + /** + * @property maxLength + * @type Number + * @default 6 + * @description 最大长度 + */ maxLength: PropTypes.number, - // 点击回调 + /** + * @property onPress + * @type Function + * @default NOOP + * @description 点击回调 + */ onPress: PropTypes.func, }; VirtualPasswordInput.defaultProps = { diff --git a/docs/CHANGELOG.html b/docs/CHANGELOG.html new file mode 100644 index 0000000..99e43fb --- /dev/null +++ b/docs/CHANGELOG.html @@ -0,0 +1,178 @@ + + + + + + + + + + RNX-UI Documentation 版本 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

版本

+

RNX-UI 的历史版本发布时间及变更记录，帮助你追溯到每个版本的演进过程。

+
+
+ + +
+ + +
+
+ +

CHANGELOG #

{n1}.{n2}.{n3}
+
+n1：❤️ 重大更新
+n2：💛 影响之前版本使用方式的更新（需要用户适配）
+n3：💚 不影响之前版本使用方式的更新（不需要用户适配）
+

0.17.1 #

Overlay #

    +
  • 💚 新增属性 useAnimation：是否使用动画
+

Dialog #

    +
  • 💚 新增属性 useOverlayAnimation：是否使用 Overlay 动画
+

Loading #

    +
  • 💚 新增属性 useOverlayAnimation：是否使用 Overlay 动画
+

ToolTip #

    +
  • 💚 新增属性 useOverlayAnimation：是否使用 Overlay 动画
+

0.17.0 #

CardView #

    +
  • 💚 现在自带鱼眼效果
  • 💛 修改方法 scrollToCard：更名为 scrollTo，并接受第二个参数，标示是否使用动画
  • 💚 新增属性 scaleCoefficient：当前项放大比率
+

Btn #

    +
  • 💚 新增属性 hitSlop：按钮热区
+

NumericKeyboard #

    +
  • 💚 新增属性 style：自定义样式
+

0.16.0 #

    +
  • 💛 原 Alert 组件更名为 Dialog
  • 💚 新增警告弹框组件：Alert
  • 💚 新增确认弹框组件：Confirm
  • 💚 新增自动滚动的文本框组件：DynamicText
+

CardView #

    +
  • 💚 新增属性 onPass：卡片经过时的回调，参数为当前经过的卡片序号
  • 💚 新增属性 onStartReached：到达顶部回调
  • 💚 新增属性 onEndReached：到达底部回调
+

Overlay #

    +
  • 💚 添加属性 pointerEvents：允许遮罩层不作为触控事件目标
+

ToolTip #

    +
  • 💚 添加属性 pointerEvents：允许遮罩层不作为触控事件目标
+

0.15.2 #

CardView #

    +
  • 💚 优化 CardView 滚动效果：不再是一次只能移动一个了
+

0.15.1 #

CardView #

    +
  • 💚 修复在 iPhone 6s 以上苹果手机内部元素点击失效的 bug
+

0.15.0 #

    +
  • 💚 新增卡片视图组件：CardView
+

Overlay #

    +
  • 💛 删除属性 pointerEvents
+

ToolTip #

    +
  • 💛 删除属性 pointerEvents
  • 💚 修改样式：文字黑色背景默认有 5dp 的圆角
+

0.14.0 #

All #

    +
  • 💚 修改属性 statusBarBgColor：默认值改为 transparent
+

0.13.1 #

PhoneNumInput #

    +
  • 💚 修改属性 onChangeText：新增第二个参数，传入 name 属性值
+

SmsCaptchaInput #

    +
  • 💚 修改属性 onChangeText：新增第二个参数，传入 name 属性值
+

0.13.0 #

    +
  • 💚 新增页面容器组件：All
  • 💚 新增页面容器组件：ImgRollView
+

KeyboardAdaptiveView #

    +
  • 💛 兼容至 react-native 0.41.2
+

0.12.0 #

HeaderedSheet #

    +
  • 💛 左右按钮可点击区域贴边
+

0.11.9 #

    +
  • 💚 新增有占位元素的文本显示组件：PlaceholderText
+

PlaceholderInput #

    +
  • 💚 样式兼容安卓
+

0.11.7 #

    +
  • 💚 新增上拉按钮组组件：ActionSheet
  • 💚 新增图片选择组件：ImgPicker
+

PlaceholderInput #

    +
  • 💚 修正更改 defaultValue 不会触发 placeholder 显隐的 bug
+

0.11.6 #

    +
  • 💚 新增可以自定义占位元素的输入框组件：PlaceholderInput
+
    +
  • 💚 新增属性 leftBtnDisabled：左侧按钮禁用
  • 💚 新增属性 rightBtnDisabled：右侧按钮禁用
+

0.11.4 #

Badge #

    +
  • 💚 新增属性 characterWidth：单个字符宽度
+

0.0.1 #

❤️ Hello RNX UI.

+ +
+
+ + +
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + diff --git a/docs/component-ActionSheet.html b/docs/component-ActionSheet.html new file mode 100644 index 0000000..99c0743 --- /dev/null +++ b/docs/component-ActionSheet.html @@ -0,0 +1,775 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ ActionSheet + + 0.11.7 +

+

上拉按钮组

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

ActionSheet

+

Example

+
import ActionSheet from 'rnx-ui/ActionSheet';
+
+function Example(props) {
+  return (
+    <ActionSheet
+      visible={this.state.visible}
+      onClose={this.hide}
+      btnList={[{
+        text: '默认',
+        onPress: this.hide,
+      }, {
+        text: '相册',
+        onPress: this.hide,
+      }]}
+    />
+  );
+}
+
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ visible + { Boolean } + + # +

+
+
+

显示开关

+
+ +
+ +

+ 默认值: false +

+ + + + +
+

+ btnList + { Object } + + # +

+
+
+

按钮组

+
+ +
+ +

+ 默认值: [{ +style: null, +text: '确定', +textStyle: null, +onPress: NOOP, +}] +

+ + + + +
+

+ btnStyle + { Object } + + # +

+
+
+

统一按钮样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ btnTextStyle + { Object } + + # +

+
+
+

统一按钮文字样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ cancelBtnStyle + { Object } + + # +

+
+
+

取消按钮样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ cancelBtnText + { String } + + # +

+
+
+

取消按钮文字

+
+ +
+ +

+ 默认值: '取消' +

+ + + + +
+

+ cancelBtnTextStyle + { Object } + + # +

+
+
+

取消按钮文字样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ overlayStyle + { Object } + + # +

+
+
+

遮罩层样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ onClose + { Function } + + # +

+
+
+

关闭回调（动画结束时）

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ duration + { Number } + + # +

+
+
+

动画时长

+
+ +
+ +

+ 默认值: 200 +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ underlayColor + { String } + + # +

+
+
+

按钮点击透明度变化

+
+ +
+ +

+ 默认值: '#eee' +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-AddAndSubtract.html b/docs/component-AddAndSubtract.html new file mode 100644 index 0000000..34c0eca --- /dev/null +++ b/docs/component-AddAndSubtract.html @@ -0,0 +1,895 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ AddAndSubtract + + 0.17.0 +

+

加减法动画组件

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

AddAndSubtract

+

Example

+
import Template from 'rnx-ui/Template';
+
+function Example(props) {
+  return (
+    <AddAndSubtract
+      num={this.state.num}
+      onPressAdder={this.add}
+      onPressSubtracter={this.subtract}
+    />
+  );
+}
+
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ num + { Number } + + # +

+
+
+

数字

+
+ +
+ +

+ 默认值: 0 +

+ + + + +
+

+ onPressAdder + { Function } + + # +

+
+
+

加法按钮点击事件

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ onPressSubtracter + { Function } + + # +

+
+
+

减法按钮点击事件

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ duration + { Number } + + # +

+
+
+

动画时间

+
+ +
+ +

+ 默认值: 200 +

+ + + + +
+

+ distance + { Number } + + # +

+
+
+

减法按钮移动距离

+
+ +
+ +

+ 默认值: 30 +

+ + + + +
+

+ deg + { Number } + + # +

+
+
+

减法旋转角度

+
+ +
+ +

+ 默认值: 180 +

+ + + + +
+

+ easing + { Function } + + # +

+
+
+

动画函数

+
+ +
+ +

+ 默认值: t => t +

+ + + + +
+

+ btnWidth + { Number } + + # +

+
+
+

按钮宽度

+
+ +
+ +

+ 默认值: 30 +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ adderBtnStyle + { Object } + + # +

+
+
+

加法按钮样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ adderStyle + { Object } + + # +

+
+
+

加法元素样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ subtracterWrapperStyle + { Object } + + # +

+
+
+

减法按钮容器样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ subtracterBtnStyle + { Object } + + # +

+
+
+

减法按钮样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ subtracterStyle + { Object } + + # +

+
+
+

减法元素样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ textStyle + { Object } + + # +

+
+
+

自定义字体样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ adder + { Element Array } + + # +

+
+
+

加法按钮

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ subtracter + { Element Array } + + # +

+
+
+

减法按钮

+
+ +
+ +

+ 默认值: + +

+ + + + +
+

+ hitSlop + { Object } + + # +

+
+
+

按钮热区

+
+ +
+ +

+ 默认值: { +top: 5, +left: 5, +right: 5, +bottom: 5, +}, +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Alert.html b/docs/component-Alert.html new file mode 100644 index 0000000..71852d3 --- /dev/null +++ b/docs/component-Alert.html @@ -0,0 +1,566 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ Alert + + 0.17.0 +

+

警告弹框组件

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

Alert

+

Other Points

+
    +
  • 内部封装了 Dialog 组件，覆盖了 Dialog 的 buttons 属性，其他不变，请参考 Dialog
    • +
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ buttonText + { String } + + # +

+
+
+

按钮文本

+
+ +
+ +

+ 默认值: '好' +

+ + + + +
+

+ buttonTextStyle + { Object } + + # +

+
+
+

按钮文本样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ onPress + { Function } + + # +

+
+
+

按钮点击回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-All.html b/docs/component-All.html new file mode 100644 index 0000000..75b6355 --- /dev/null +++ b/docs/component-All.html @@ -0,0 +1,590 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ All + + +

+

页面级容器，内置了 StatusBar。

+
+ + +
+
使用说明
+ +
+
+ +
+

Example

+
import All from 'rnx-ui/All';
+
+function Example(props) {
+  return (
+    <All />
+  );
+}
+
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ children + { Element Array } + + # +

+
+
+

子元素

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ statusBarBgColor + { String } + + # +

+
+
+

StatusBar 背景色

+
+ +
+ +

+ 默认值: 'transparent' +

+ + + + +
+

+ statusBarBgStyle + { Stirng } + + # +

+
+
+

StatusBar 样式类型

+
+ +
+ +

+ 默认值: 'light-content' +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Badge.html b/docs/component-Badge.html new file mode 100644 index 0000000..e2c2e89 --- /dev/null +++ b/docs/component-Badge.html @@ -0,0 +1,643 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ Badge + + 0.11.4 +

+

角标组件 通常用来显示未读消息数目。

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

Badge

+

Example

+
import Badge from 'rnx-ui/Badge';
+
+function Example(props) {
+  return (
+    <Badge text={8}>
+      <Icon name="commenting-o" style={styles.icon} />
+    </Badge>
+  )
+}
+
+

⚠️ 注意

+
    +

  1. 角标宽度是动态计算的，随角标内容的增长而变长。当你通过 textStyle 改变角标内容的字体大小时，注意配置相符的 characterWidth。

    +
    2. +

  2. Badge 没有宽度，宽度随外部容器变化。

    +
    3. +
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ textContainerStyle + { Object } + + # +

+
+
+

自定义文本容器样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ textStyle + { Object } + + # +

+
+
+

自定义文本样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ characterWidth + { Number } + + # +

+
+
+

单个字符宽度

+
+ +
+ +

+ 默认值: 7 +

+ + + + +
+

+ text + { String Number } + + # +

+
+
+

角标文本内容

+
+ +
+ +

+ 默认值: '' +

+ + + + +
+

+ children + { Element Array } + + # +

+
+
+

主体元素

+
+ +
+ +

+ 默认值: null +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Btn.html b/docs/component-Btn.html new file mode 100644 index 0000000..04b35b4 --- /dev/null +++ b/docs/component-Btn.html @@ -0,0 +1,681 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ Btn + + 0.17.0 +

+

按钮

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

Btn

+

Example

+
import Btn from 'rnx-ui/Btn';
+
+function Example(props) {
+  return (
+    <Btn>自定义样式</Btn>
+  );
+}
+
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ contentContainerStyle + { Object } + + # +

+
+
+

内部容器样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ textStyle + { Obejct } + + # +

+
+
+

按钮文本样式（children 为字符串时才生效）

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ onPress + { Function } + + # +

+
+
+

点击回调

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ children + { String Array } + + # +

+
+
+

按钮内容

+
+ +
+ +

+ 默认值: '下一步' +

+ + + + +
+

+ activeOpacity + { Number } + + # +

+
+
+

点击时透明度反馈

+
+ +
+ +

+ 默认值: ACTIVE_OPACITY +

+ + + + +
+

+ disabled + { Boolean } + + # +

+
+
+

是否禁用，为 true 时，activeOpacity 为 1，onPress 为 null

+
+ +
+ +

+ 默认值: ACTIVE_OPACITY +

+ + + + +
+

+ hitSlop + { Object } + + # +

+
+
+

按钮热区

+
+ +
+ +

+ 默认值: { +top: 0, +bottom: 0, +left: 0, +right: 0, +} +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-CardView.html b/docs/component-CardView.html new file mode 100644 index 0000000..7d6f5f1 --- /dev/null +++ b/docs/component-CardView.html @@ -0,0 +1,883 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ CardView + + 0.17.0 +

+

卡片视图 +以卡片样式浏览，并可以设置激活卡片样式。

+
+ + +
+
使用说明
+ +
+
+ +
+

基本用法

+

以卡片样式浏览，并可以设置激活卡片样式。

+

Demo

+

CardView

+

Example

+
import CardView from 'rnx-ui/CardView';
+
+function Example(props) {
+  return (
+    <CardView
+      style={styles.cardView}
+      cards={this.state.cards}
+      cardGap={20}
+      onChange={this.onChange}
+    />
+  );
+}
+
+

⚠️ 注意

+

CardView 会为卡片添加 isActiveRnxUiCardView 属性，激活卡片值为 true，其他卡片是 false。

+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ style + { Object } + + # +

+
+
+

样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ scaleCoefficient + { Number } + + # +

+
+
+

缩放系数

+
+ +
+ +

+ 默认值: 0.1 +

+ + + + +
+

+ activeCardStyle + { Object } + + # +

+
+
+

当前卡片样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ cards + { Array } + + # +

+
+
+

卡片数组

+
+ +
+ +

+ 默认值: [] +

+ + + + +
+

+ cardWidth + { Number } + + # +

+
+
+

卡片宽度

+
+ +
+ +

+ 默认值: 200 +

+ + + + +
+

+ cardGap + { Number } + + # +

+
+
+

卡片间隔

+
+ +
+ +

+ 默认值: 0 +

+ + + + +
+

+ contentContainerStyle + { Object } + + # +

+
+
+

自定义内容容器样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ onChange + { Function } + + # +

+
+
+

卡片切换时的回调，参数为当前激活的卡片序号

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ onPass + { Function } + + # +

+
+
+

卡片经过时的回调，参数为当前经过的卡片序号

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ v + { Number } + + # +

+
+
+

速度指数

+
+ +
+ +

+ 默认值: 20 +

+ + + + +
+

+ minGestureDistance + { Number } + + # +

+
+
+

手势滑动触发最小距离（默认需要滑动卡片一半的距离）

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ maxIndex + { Number } + + # +

+
+
+

最大可访问的卡片序号

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ getEl + { Function } + + # +

+
+
+

获取元素回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ onStartReached + { Function } + + # +

+
+
+

到达顶部回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ onEndReached + { Function } + + # +

+
+
+

到达底部回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + + + +
方法
+ +
+

+ scrollToCard(index) + + # +

+
+
+ +

+ 方法参数: +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
参数名类型描述必选版本
indexNumber卡片序号 跳转至指定卡片 + + +
+
+ + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Confirm.html b/docs/component-Confirm.html new file mode 100644 index 0000000..2d8494d --- /dev/null +++ b/docs/component-Confirm.html @@ -0,0 +1,629 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ Confirm + + 0.17.0 +

+

确认弹框组件

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

Confirm

+

Other Points

+
    +
  • 内部封装了 Dialog 组件，覆盖了 Dialog 的 buttons 属性，其他不变，请参考 Dialog
    • +
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ cancelText + { String } + + # +

+
+
+

取消按钮文本

+
+ +
+ +

+ 默认值: '取消' +

+ + + + +
+

+ cancelTextStyle + { Object } + + # +

+
+
+

取消按钮文本样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ onCancel + { Function } + + # +

+
+
+

取消按钮点击回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ confirmText + { String } + + # +

+
+
+

确认按钮文本

+
+ +
+ +

+ 默认值: '确认' +

+ + + + +
+

+ confirmTextStyle + { Object } + + # +

+
+
+

确认按钮文本样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ onConfirm + { Function } + + # +

+
+
+

确认按钮点击回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Dialog.html b/docs/component-Dialog.html new file mode 100644 index 0000000..3dbc175 --- /dev/null +++ b/docs/component-Dialog.html @@ -0,0 +1,726 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ Dialog + + 0.17.1 +

+

警告弹框

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

Dialog

+

Example

+
import Dialog from 'rnx-ui/Dialog';
+
+function Example(props) {
+  return (
+    <Dialog
+      visible={this.state.visible}
+      title="无法连接服务器"
+      message="未能完成所请求的操作，因为与服务器的通信出错。"
+      buttons={[{
+        text: '吼啊',
+        onPress: this.hide,
+      }]}
+    />
+  );
+}
+
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ visible + { Boolean } + + # +

+
+
+

是否显示

+
+ +
+ +

+ 默认值: false +

+ + + + +
+

+ title + { String Element } + + # +

+
+
+

标题

+
+ +
+ +

+ 默认值: '' +

+ + + + +
+

+ titleStyle + { Object } + + # +

+
+
+

标题文本样式（title 为字符串时才生效）

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ message + { String Element } + + # +

+
+
+

内容

+
+ +
+ +

+ 默认值: '' +

+ + + + +
+

+ messageStyle + { Object } + + # +

+
+
+

标题文本样式（title 为字符串时才生效）

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ buttonsContainerStyle + { Object } + + # +

+
+
+

按钮容器样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ buttons + { Array } + + # +

+
+
+

按钮

+
+ +
+ +

+ 默认值: [] +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

弹框样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ overlayStyle + { Object } + + # +

+
+
+

遮盖层样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ useOverlayAnimation + { Boolean } + + # +

+
+
+

是否使用 Overlay 动画

+
+ +
+ +

+ 默认值: true +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Drop.html b/docs/component-Drop.html new file mode 100644 index 0000000..828a487 --- /dev/null +++ b/docs/component-Drop.html @@ -0,0 +1,480 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ Drop + + 0.17.0 +

+

掉落动画组件 +抛物线掉落动画组件，通常用于购物类交互。除了掉落组件 Dropper 外，Drop 还提供了另外两个非常有用的辅助组件 Emitter 和 Receiver。

+

Drop

+
+ + + +
+ + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Dropper.html b/docs/component-Dropper.html new file mode 100644 index 0000000..595ec24 --- /dev/null +++ b/docs/component-Dropper.html @@ -0,0 +1,851 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ Dropper + + 0.17.0 +

+

掉落组件 +用来包裹掉落元素，提供抛物线运动的动画。

+
+ + +
+
使用说明
+ +
+
+ +
+

Example

+
import {
+  Dropper,
+} from 'rnx-ui/Drop';
+
+function DropperImg(props) {
+  return (
+    <Dropper
+      style={[styles.dropper, {
+        overflow: 'hidden',
+        backgroundColor: 'pink',
+      }]}
+      startPosition={props.startPosition}
+      endPosition={props.endPosition}
+      width={50}
+      height={50}
+      onEnd={props.onEnd}
+    >
+      <Image
+        source={{
+          uri: 'http://tva1.sinaimg.cn/crop.0.0.217.217.180/4c8b519djw8fa45br0vpxj2062062q33.jpg',
+        }}
+        style={{
+          width: 50,
+          height: 50,
+        }}
+      />
+    </Dropper>
+  );
+}
+
+

⚠️ 注意

+
    +

  1. 必须提供起点和终点坐标，起点和终点坐标可以通过 Emitter 和 Receiver 非常方便地获取到。

    +
    2. +

  2. 强烈建议提供掉落元素的宽高，这样，Dropper 会将自身的中心置于起点，否则置于起点的将是 Dropper 的左上角。

    +
    3. +
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ startPosition + { Object } + + # +

+
+
+

起点位置

+
+ +
+ +

+ 默认值: {0,0} +

+ + + + +
+

+ endPosition + { Object } + + # +

+
+
+

终点位置

+
+ +
+ +

+ 默认值: {0,0} +

+ + + + +
+

+ width + { Number } + + # +

+
+
+

掉落元素宽度

+
+ +
+ +

+ 默认值: 0 +

+ + + + +
+

+ height + { Number } + + # +

+
+
+

掉落元素高度

+
+ +
+ +

+ 默认值: 0 +

+ + + + +
+

+ duration + { Number } + + # +

+
+
+

动画时间

+
+ +
+ +

+ 默认值: 1000 +

+ + + + +
+

+ jumpHeight + { Number } + + # +

+
+
+

弹跳的高度

+
+ +
+ +

+ 默认值: 60 +

+ + + + +
+

+ scale + { Number } + + # +

+
+
+

缩放值

+
+ +
+ +

+ 默认值: 1 +

+ + + + +
+

+ rotate + { Number } + + # +

+
+
+

旋转角度

+
+ +
+ +

+ 默认值: 360 +

+ + + + +
+

+ showDuration + { Number } + + # +

+
+
+

动画刚开始由透明变化至不透明的时间

+
+ +
+ +

+ 默认值: 100 +

+ + + + +
+

+ onEnd + { Function } + + # +

+
+
+

动画结束回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ endAnimation + { Boolean } + + # +

+
+
+

是否需要收尾动画

+
+ +
+ +

+ 默认值: true +

+ + + + +
+

+ endJumpHeight + { Number } + + # +

+
+
+

收尾弹跳的高度

+
+ +
+ +

+ 默认值: 40 +

+ + + + +
+

+ endAnimationDuration + { Number } + + # +

+
+
+

收尾动画时间

+
+ +
+ +

+ 默认值: 400 +

+ + + + +
+

+ children + { Element } + + # +

+
+
+

子元素

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-DynamicText.html b/docs/component-DynamicText.html new file mode 100644 index 0000000..b34e565 --- /dev/null +++ b/docs/component-DynamicText.html @@ -0,0 +1,705 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ DynamicText + + 0.17.0 +

+

自动滚动的文本框：文字超长时滚动显示

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

DynamicText

+

Example

+
import DynamicText from 'rnx-ui/DynamicText';
+
+function Example(props) {
+  return (
+    <DynamicText>自定义文字</DynamicText>
+  );
+}
+
+

⚠️ 注意

+

DynamicText 有 maxWidth 属性可以配置支持的最大的文本长度，当文本长度超过配置时，文本会显示为多行，此时需要配置更大的长度。

+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ style + { Object } + + # +

+
+
+

自定义wrapper样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ textStyle + { Object } + + # +

+
+
+

自定义文本样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ children + { String Number } + + # +

+
+
+

显示文本

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ mode + { String } + + # +

+
+
+

文字循环模式，默认reverse +reverse:轮转到末尾后再轮转回开头 +restart: 轮转到末尾后返回至开头重新循环

+
+ +
+ +

+ 默认值: MODE_REVERSE +

+ + +

+ 方法参数: +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
参数名类型描述版本
MODE_RESTARTString轮转到末尾后返回至开头重新循环
MODE_REVERSEString轮转到末尾后再轮转回开头
+
+ + + +
+

+ bufferTime + { Number } + + # +

+
+
+

动画间隔时间

+
+ +
+ +

+ 默认值: 1000 +

+ + + + +
+

+ speed + { Number } + + # +

+
+
+

文字滚动速度,数字越大,速度越快

+
+ +
+ +

+ 默认值: 5 +

+ + + + +
+

+ maxWidth + { Number } + + # +

+
+
+

文本最大宽度

+
+ +
+ +

+ 默认值: 2000 +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Emitter.html b/docs/component-Emitter.html new file mode 100644 index 0000000..02fcf1e --- /dev/null +++ b/docs/component-Emitter.html @@ -0,0 +1,578 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ Emitter + + 0.17.0 +

+

掉落事件点击发射组件 +用来包裹掉落事件点击发射元素，提供元素中心坐标，以作为掉落动画的起点。

+
+ + +
+
使用说明
+ +
+
+ +
+

Example

+
import {
+  Emitter,
+} from 'rnx-ui/Drop';
+
+function CartEmitter(props) {
+  return (
+    <Emitter
+      ref={this.getEl}
+      style={styles.all}
+      onPress={props.onPress}
+    >
+      <Cart />
+    </Emitter>
+  );
+}
+
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ onPress + { Function } + + # +

+
+
+

点击回调，参数为点击元素中心坐标，如：{x: 0, y: 0}

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ children + { Element Array } + + # +

+
+
+

子元素

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-HeaderedSheet.html b/docs/component-HeaderedSheet.html new file mode 100644 index 0000000..de6bec8 --- /dev/null +++ b/docs/component-HeaderedSheet.html @@ -0,0 +1,902 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ HeaderedSheet + + 0.12.0 +

+

有标题栏的底部弹层

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

NavBar demo

+

Other Points

+
    +
  • 内部封装了 Overlay 组件，请参考 Overlay
    • +
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ visible + { Boolean } + + # +

+
+
+

显示开关

+
+ +
+ +

+ 默认值: false +

+ + + + +
+

+ overlayStyle + { Object } + + # +

+
+
+

遮罩层样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ onClose + { Function } + + # +

+
+
+

关闭回调（动画结束时）

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ onPressOverlay + { Function } + + # +

+
+
+

遮罩点击事件

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ duration + { Number } + + # +

+
+
+

动画时长

+
+ +
+ +

+ 默认值: 200 +

+ + + + +
+

+ containerStyle + { Object } + + # +

+
+
+

自定容器义样式（包含 header 区域）

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ headerStyle + { Object } + + # +

+
+
+

自定义 header 样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ title + { String Element } + + # +

+
+
+

标题

+
+ +
+ +

+ 默认值: '' +

+ + + + +
+

+ titleStyle + { Object } + + # +

+
+
+

标题文本样式（title 为字符串时才生效）

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ titleGap + { Number } + + # +

+
+
+

标题到左右两边的距离

+
+ +
+ +

+ 默认值: 50 +

+ + + + +
+

+ leftBtn + { String Element } + + # +

+
+
+

左侧按钮

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ onPressLeftBtn + { Function } + + # +

+
+
+

左侧点击事件

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ leftBtnStyle + { Object } + + # +

+
+
+

左侧按钮文本样式（leftBtn 为字符串时才生效）

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ rightBtn + { String Element } + + # +

+
+
+

右侧按钮

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ onPressRightBtn + { Function } + + # +

+
+
+

右侧点击事件

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ rightBtnStyle + { Object } + + # +

+
+
+

右侧按钮文本样式（leftBtn 为字符串时才生效）

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ activeOpacity + { Number } + + # +

+
+
+

按钮点击透明度变化

+
+ +
+ +

+ 默认值: ACTIVE_OPACITY +

+ + + + +
+

+ children + { Element Array } + + # +

+
+
+

子元素

+
+ +
+ +

+ 默认值: null +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-ImgHolder.html b/docs/component-ImgHolder.html new file mode 100644 index 0000000..12a35f3 --- /dev/null +++ b/docs/component-ImgHolder.html @@ -0,0 +1,585 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ ImgHolder + + 0.17.0 +

+

带占位的图片组件

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

ImgHolder

+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ imgStyle + { Object } + + # +

+
+
+

图片样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ holder + { Element Array } + + # +

+
+
+

占位元素

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ source + { Object Number } + + # +

+
+
+

图片资源

+
+ +
+ +

+ 默认值: { +uri: '' +}, +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-ImgPicker.html b/docs/component-ImgPicker.html new file mode 100644 index 0000000..64c221e --- /dev/null +++ b/docs/component-ImgPicker.html @@ -0,0 +1,711 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ ImgPicker + + 0.11.7 +

+

图片选择组件

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

ImgPicker

+

Example

+
import ImgPicker from 'rnx-ui/ImgPicker';
+
+function Example(props) {
+  return (
+    <ImgPicker
+      images={this.state.images}
+      adder={
+        <Icon name="add" style={styles.imgPickerAdder} />
+      }
+      adderVisible={this.state.images.length < MAX_PHOTOS_NUMBER}
+      imgDisplayerProps={{
+        onImgPress: this.showPhoto,
+        deleter: (
+          <Icon name="close" style={styles.imgPickerDeleterIcon} />
+        ),
+        onDeleterPress: this.removePhoto,
+      }}
+      onAdderPress={this.openCameraActionSheet}
+    />
+  );
+}
+
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ images + { Array } + + # +

+
+
+

图片 uri

+
+ +
+ +

+ 默认值: [] +

+ + + + +
+

+ ImgDisplayerProps + { Object } + + # +

+
+
+

ImgDisplayer 属性

+
+ +
+ +

+ 默认值: ImgDisplayer.defaultProps +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ itemStyle + { Object } + + # +

+
+
+

每项自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ adderBtnStyle + { Object } + + # +

+
+
+

添加按钮自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ onAdderPress + { Function } + + # +

+
+
+

添加按钮点击回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ adder + { Element } + + # +

+
+
+

添加按钮内容元素

+
+ +
+ +

+ 默认值: + +

+ + + + +
+

+ adderVisible + { Boolean } + + # +

+
+
+

是否显示添加按钮

+
+ +
+ +

+ 默认值: true +

+ + + + +
+

+ deleterUnderlayColor + { Function } + + # +

+
+
+

添加按钮点击颜色反馈

+
+ +
+ +

+ 默认值: NOOP +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-ImgRollView.html b/docs/component-ImgRollView.html new file mode 100644 index 0000000..08d2538 --- /dev/null +++ b/docs/component-ImgRollView.html @@ -0,0 +1,802 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ ImgRollView + + 0.13.0 +

+

图片多选组件

+
+ + +
+
使用说明
+ +
+
+ +
+

Example

+
import ImgRollView from 'rnx-ui/ImgPicker';
+
+function Example(props) {
+  return (
+    <ImgRollView
+      onSelect={this.onSelect}
+      style={style.imgRollViewStyle}
+      maxSelected={5}
+      iconSelected={<Icon name="fa-check" style={style.iconStyle} />}
+      iconUnSelected={<Icon name="fa-check" style={style.iconStyle} />}
+    />
+  );
+}
+
+

⚠️ 注意

+

CameraRoll 提供了访问本地相册的功能。在iOS上使用这个模块之前，你需要先链接 RCTCameraRoll 库，具体做法请参考链接原生库文档。另外，从 iOS10 开始，访问相册需要用户授权。你需要在 Info.plist 中添加一条名为 NSCameraUsageDescription 的键，然后在其值中填写向用户请求权限的具体描述。编辑完成后这个键在 Xcode 中实际会显示为 Privacy - Camera Usage Description。

+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ maxSelected + { Number } + + # +

+
+
+

最大照片选择条数

+
+ +
+ +

+ 默认值: 10 +

+ + + + +
+

+ gap + { Number } + + # +

+
+
+

图片间像素间隔

+
+ +
+ +

+ 默认值: 8 +

+ + + + +
+

+ imagesPerRow + { Number } + + # +

+
+
+

每行显示的图片数量

+
+ +
+ +

+ 默认值: 4 +

+ + + + +
+

+ assetType + { String } + + # +

+
+
+

静态资源类型

+
+ +
+ +

+ 默认值: 'Photos' +

+ + +

+ 方法参数: +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
参数名类型描述版本
'Photos'String图片资源
'Videos'String视频资源
'All'String
+
+ + + +
+

+ onSelect + { Function } + + # +

+
+
+

用户选择图片时触发的回调，返回参数为 node/uri/selected/uriSelected

+
+ +
+ +

+ 默认值: () => {} +

+ + + + +
+

+ iconSelected + { Element } + + # +

+
+
+

选中图标

+
+ +
+ +

+ 默认值: v +

+ + + + +
+

+ iconUnSelected + { Element } + + # +

+
+
+

未选中图标

+
+ +
+ +

+ 默认值: x +

+ + + + +
+

+ uriList + { Array } + + # +

+
+
+

初始选中 uri

+
+ +
+ +

+ 默认值: [] +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

外层容器样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ iconSelectedStyle + { Object } + + # +

+
+
+

选中图标外框样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ iconUnSelectedStyle + { Object } + + # +

+
+
+

未选中图标外框样式

+
+ +
+ +

+ 默认值: null +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-KeyboardAdaptiveView.html b/docs/component-KeyboardAdaptiveView.html new file mode 100644 index 0000000..9d2fe19 --- /dev/null +++ b/docs/component-KeyboardAdaptiveView.html @@ -0,0 +1,682 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ KeyboardAdaptiveView + + 0.13.0 +

+

适应键盘的容器

+
+ + +
+
使用说明
+ +
+
+ +
+

基本用法

+
+

当你找到这个组件时，你应该是遇到输入框被键盘遮挡的问题了。请你再三跟产品/设计/开发确认，是否真的有必要将输入框放在页面的偏下位置，这是 APP 开发历史悠久的坑，任何经验丰富的从业者/主流的 APP 都会极力避免这种场景，考虑下从根本解决这个问题，比如上移输入框的位置或者干脆新开一个页面？

+

当然不是说 KeyboardAdaptiveView 这个组件不好，相反，KeyboardAdaptiveView 非常有效，完全碾压 react-native 官方组件 KeyboardAvoidingView（既然来找 KeyboardAdaptiveView 相信你一定是被官方的那个组件坑了😄）。

+
+

在 iOS 设备中，处于滚动视图（ScrollView 或 ListView）中的输入控件（TextInput）如果处于页面偏下位置，常常容易被弹起的键盘遮住。于是，可以使用 KeyboardAdaptiveView 解决这个问题。

+

⚠️ 注意

+
    +

  1. KeyboardAdaptiveView 会针对不同位置的 TextInput 进行不同位移，所以必须在每一个 TextInput 的 onFocus 时触发 KeyboardAdaptiveView 的 inputFocusHandle 方法，并将事件对象作为参数传入。

    +
    2. +

  2. 为了提升用户体验，强烈建议 iOS 在外层滚动视图（ScrollView 或 ListView）上添加 keyboardDismissMode="on-drag" 属性，在视图滚动时自动关闭键盘。对此 KeyboardAdaptiveView 也为你准备好适合的 keyboardDismissMode 值了，直接引用即可。

    +
    3. +

  3. KeyboardAdaptiveView 也提供了对安卓设备的支持，但是默认不会处理，当你确认要开启时，请确保禁用系统的处理。

    +
    4. +
+

具体操作请参考 Example。

+

Demo

+

KeyboardAdaptiveView

+

Example

+
import KeyboardAdaptiveView, {
+  keyboardDismissMode,
+} from 'rnx-ui/Drop';
+
+class Example extends Component {
+  constructor(props) {
+    super(props);
+    this.getKeyboardAdaptiveView = this.getKeyboardAdaptiveView.bind(this);
+    this.onFocus = this.onFocus.bind(this);
+  }
+
+  onFocus(e) {
+    if (this.keyboardAdaptiveView) {
+      this.keyboardAdaptiveView.inputFocusHandle(e);
+    }
+  }
+  getKeyboardAdaptiveView(el) {
+    this.keyboardAdaptiveView = el;
+  }
+
+  render() {
+    return (
+      <ScrollView
+        keyboardDismissMode={keyboardDismissMode}
+      >
+        <KeyboardAdaptiveView
+          getEl={this.getKeyboardAdaptiveView}
+        >
+          <View style={styles.inputWrapper}>
+            <TextInput
+              style={styles.input}
+              onFocus={this.onFocus}
+            />
+          </View>
+        </KeyboardAdaptiveView>
+      </ScrollView>
+    );
+  }
+}
+
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ getEl + { Function } + + # +

+
+
+

获取元素回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ style + { Objectt } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ children + { Element Array } + + # +

+
+
+

子元素

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ moreDistance + { Number } + + # +

+
+
+

更多距离。iOS 系统键盘可能会出现 suggest 行，导致键盘高度获取不准确。

+
+ +
+ +

+ 默认值: 40 +

+ + + + +
+

+ minkbdHeight + { Number } + + # +

+
+
+

最小键盘高度

+
+ +
+ +

+ 默认值: 250 +

+ + + + +
+

+ handlerAndroid + { Boolean } + + # +

+
+
+

安卓系统是否处理

+
+ +
+ +

+ 默认值: false +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Loading.html b/docs/component-Loading.html new file mode 100644 index 0000000..4ee9e78 --- /dev/null +++ b/docs/component-Loading.html @@ -0,0 +1,629 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ Loading + + 0.17.1 +

+

菊花加载中组件

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

Loading

+

Other Points

+
    +
  • 内部封装了 Overlay 组件，请参考 Overlay
    • +
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ visible + { Boolean } + + # +

+
+
+

显示开关

+
+ +
+ +

+ 默认值: false +

+ + + + +
+

+ overlayStyle + { Object } + + # +

+
+
+

遮罩层样式

+
+ +
+ +

+ 默认值: Null +

+ + + + +
+

+ loaderStyle + { Object } + + # +

+
+
+

菊花容器样式

+
+ +
+ +

+ 默认值: Null +

+ + + + +
+

+ color + { String } + + # +

+
+
+

菊花图标的颜色

+
+ +
+ +

+ 默认值: '#fff' +

+ + + + +
+

+ size + { String } + + # +

+
+
+

菊花图标的大小

+
+ +
+ +

+ 默认值: 'small' +

+ + + + +
+

+ useOverlayAnimation + { String } + + # +

+
+
+

是否使用 Overlay 动画

+
+ +
+ +

+ 默认值: 'small' +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Navbar.html b/docs/component-Navbar.html new file mode 100644 index 0000000..c9c0ab7 --- /dev/null +++ b/docs/component-Navbar.html @@ -0,0 +1,821 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+ +

导航栏

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

NavBar

+

Other Points

+
    +

  • NavBar 的高度由 statusBarHeight 和 headerHeight 两部分组成。statusBarHeight 默认 iOS 为 20，Android 为 0；headerHeight 默认 iOS 为 44，Android 为 56。

    +
    • +

  • titleGap 用来控制 title 到左右两边的距离。在 title 为字符串且宽度超过这个距离时，标题会显示为自动剪切，并以 ‘...’ 结束。

    +
    • +
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: Null +

+ + + + +
+

+ statusBarHeight + { Number } + + # +

+
+
+

statusBar 高度

+
+ +
+ +

+ 默认值: STATUS_BAR_HEIGHT +

+ + + + +
+

+ headerHeight + { Number } + + # +

+
+
+

header 高度

+
+ +
+ +

+ 默认值: HEADER_HEIGHT +

+ + + + +
+

+ title + { String Element } + + # +

+
+
+

标题

+
+ +
+ +

+ 默认值: '' +

+ + + + +
+

+ titleStyle + { Object } + + # +

+
+
+

标题文本样式（title 为字符串时才生效）

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ titleGap + { Number } + + # +

+
+
+

标题到左右两边的距离

+
+ +
+ +

+ 默认值: 50 +

+ + + + +
+

+ leftBtn + { String Element } + + # +

+
+
+

左侧按钮

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ leftEvent + { Function } + + # +

+
+
+

左侧按钮点击事件

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ leftBtnStyle + { Object } + + # +

+
+
+

左侧按钮文本样式（leftBtn 为字符串时才生效）

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ leftBtnDisabled + { Boolean } + + # +

+
+
+

左侧按钮禁用

+
+ +
+ +

+ 默认值: false +

+ + + + +
+

+ rightBtn + { String Element } + + # +

+
+
+

右侧按钮

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ rightEvent + { Function } + + # +

+
+
+

右侧按钮文本样式

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ rightBtnStyle + { Object } + + # +

+
+
+

右侧按钮文本样式（rightBtn 为字符串时才生效）

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ rightBtnDisabled + { Boolean } + + # +

+
+
+

右侧按钮禁用

+
+ +
+ +

+ 默认值: false +

+ + + + +
+

+ activeOpacity + { Number } + + # +

+
+
+

按钮点击透明度变化

+
+ +
+ +

+ 默认值: ACTIVE_OPACITY +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-NumericKeyBoard.html b/docs/component-NumericKeyBoard.html new file mode 100644 index 0000000..d7ebbb9 --- /dev/null +++ b/docs/component-NumericKeyBoard.html @@ -0,0 +1,574 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ NumericKeyboardar + + 0.17.0 +

+

虚拟数字键盘

+
+ + +
+
使用说明
+ +
+
+ +
+

很多情况下系统的数字键盘不能满足我们的要求，比如不同平台数字键盘表现不一致，比如有的数字键盘存在小数点，比如需要配合虚拟输入框而系统的键盘又不易控制...

+

Demo

+

NumericKeyboard

+

Example

+
import NumericKeyboard from 'rnx-ui/NumericKeyboard';
+
+function Example(props) {
+  return (
+    <NumericKeyboard
+      onPress={this.onInput}
+    />
+  );
+}
+
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: Null +

+ + + + +
+

+ onPress + { Function } + + # +

+
+
+

按键回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ deleteKeyContent + { String Element Array } + + # +

+
+
+

删除键内容

+
+ +
+ +

+ 默认值: +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Overlay.html b/docs/component-Overlay.html new file mode 100644 index 0000000..69f8667 --- /dev/null +++ b/docs/component-Overlay.html @@ -0,0 +1,656 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ Overlay + 遮罩层 + 0.16.0 +

+

遮罩层 +具有渐隐渐显动画效果的遮罩层组件。

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

Overlay

+

⚠️ 注意

+
    +

  1. 点击 Overlay 内部元素时也会触发 Overlay 的 onPress 回调。如果需要避免该情况，请在内部元素外包裹 Touchable* 元素，用来捕获点击事件并阻止其冒泡。

    +
    2. +

  2. Overlay 默认撑满父容器，且父容器需要设置样式属性 position 为 'absolute' 或 'relative'。

    +
    3. +

  3. Overlay 不会阻止安卓物理返回键。

    +
    4. +
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ visible + { Boolean } + + # +

+
+
+

显示开关

+
+ +
+ +

+ 默认值: false +

+ + + + +
+

+ onPress + { Function } + + # +

+
+
+

点击回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ children + { Element Array } + + # +

+
+
+

子元素

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ pointerEvents + { String } + + # +

+
+
+

控制 Overlay 是否可以作为触控事件的目标（参考 https://facebook.github.io/react-native/docs/view.html#pointerevents）

+
+ +
+ +

+ 默认值: 'auto' +

+ + + + +
+

+ duration + { Number } + + # +

+
+
+

动画时长

+
+ +
+ +

+ 默认值: 200 +

+ + + + +
+

+ useAnimation + { Boolean } + + # +

+
+
+

是否使用动画

+
+ +
+ +

+ 默认值: true +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-PhoneNumInput.html b/docs/component-PhoneNumInput.html new file mode 100644 index 0000000..3a6c812 --- /dev/null +++ b/docs/component-PhoneNumInput.html @@ -0,0 +1,692 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ PhoneNumInput + + 0.13.1 +

+

手机号码输入框组件

+
+ + +
+
使用说明
+ +
+
+ +
+

基本说明

+
+

rnx-ui 表单校验工具 Validator 现已支持该组件。

+
+

Demo

+

PhoneNumInput

+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ inputStyle + { Object } + + # +

+
+
+

自定义输入框样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ placeholder + { String } + + # +

+
+
+

提示文字

+
+ +
+ +

+ 默认值: '手机号' +

+ + + + +
+

+ placeholderTextColor + { String } + + # +

+
+
+

提示文字颜色

+
+ +
+ +

+ 默认值: COLOR_PLACEHOLDER +

+ + + + +
+

+ collectValidate + { Function } + + # +

+
+
+

校验器接口

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ defaultValue + { String } + + # +

+
+
+

默认值

+
+ +
+ +

+ 默认值: '' +

+ + + + +
+

+ name + { String } + + # +

+
+
+

用来在校验器中做标识

+
+ +
+ +

+ 默认值: 'PHONE_NUM_INPUT' +

+ + + + +
+

+ readableName + { String } + + # +

+
+
+

用来在校验器中组成错误信息

+
+ +
+ +

+ 默认值: '手机号' +

+ + + + +
+

+ onChangeText + { Function } + + # +

+
+
+

改变回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Receiver.html b/docs/component-Receiver.html new file mode 100644 index 0000000..8a6e3a9 --- /dev/null +++ b/docs/component-Receiver.html @@ -0,0 +1,675 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ Receiver + + 0.17.0 +

+

掉落元素接受组件

+

用来包裹掉落元素接受元素，如果该元素是绝对定位，定位的样式应该写在 Receiver 或父元素上，而不应该写在子元素上。Receiver 主要提供以下功能：

+
    +
  1. 提供元素中心坐标，以作为掉落动画的终点；
    2. +
  2. 提供掉落组件到达时的响应动画，需要在 Dropper 元素的 onEnd 回调中手动调用 Receiver 元素的 animate 方法。
    3. +
+
+ + +
+
使用说明
+ +
+
+ +
+

Example

+
import {
+  Receiver,
+} from 'rnx-ui/Drop';
+import Badge from 'rnx-ui/Drop';
+
+function CartReceiver(props) {
+  return (
+    <Receiver
+      ref={props.getEl}
+      getCenterPosition={props.getCenterPosition}
+      style={styles.all}
+    >
+      <Badge
+        text={props.count}
+        textContainerStyle={styles.textContainer}
+      >
+        <Cart
+          style={styles.cart}
+          iconStyle={styles.icon}
+        />
+      </Badge>
+    </Receiver>
+  );
+}
+
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ getCenterPosition + { Function } + + # +

+
+
+

获取中心位置回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ getEl + { Function } + + # +

+
+
+

获取元素回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ scale + { Number } + + # +

+
+
+

缩放值

+
+ +
+ +

+ 默认值: 1.1 +

+ + + + +
+

+ duration + { Number } + + # +

+
+
+

动画时间

+
+ +
+ +

+ 默认值: 1.1 +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ children + { Element Array } + + # +

+
+
+

子元素

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ onLayout + { Function } + + # +

+
+
+

布局回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-RefreshView.html b/docs/component-RefreshView.html new file mode 100644 index 0000000..831a87e --- /dev/null +++ b/docs/component-RefreshView.html @@ -0,0 +1,768 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ RefreshView + + 0.17.0 +

+

滚动框 +带惯性、下拉刷新功能。官版的 ScrollView 下拉刷新的功能几乎没有可定制空间，而 RefreshView 可以对 RefreshControl 进行完全的自定义， +包括控件的本身，下拉状态的实时响应等，具有极大的可定制空间。

+

配套组件：RefreshControl

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

RefreshView

+

Example

+
 import PlaceholderText from 'rnx-ui/PlaceholderText';
+   function Example(props) {
+    return (
+       <PlaceholderText
+         placeholder={this.placeholder}
+       />
+     );
+   }
+
+

Todo

+
    +
  1. 初始状态即为 loading 状态
    2. +
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ onScroll + { Function } + + # +

+
+
+

滚动回调，参数为滚动距离

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ onEndReachedThreShold + { Number } + + # +

+
+
+

调用 onEndReached 之前的临界值，描述距底部的距离

+
+ +
+ +

+ 默认值: 0 +

+ + + + +
+

+ onEndReached + { Function } + + # +

+
+
+

当滚动至距离底部 onEndReachedThreshold 的范围内，会持续触发的回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ overA + { Number } + + # +

+
+
+

超出范围时的减速度

+
+ +
+ +

+ 默认值: 0.05 +

+ + + + +
+

+ maxOverV + { Number } + + # +

+
+
+

超出范围时最大速度

+
+ +
+ +

+ 默认值: 3 +

+ + + + +
+

+ dragOverA + { Number } + + # +

+
+
+

拖拽超出范围时的减速度

+
+ +
+ +

+ 默认值: 2.5 +

+ + + + +
+

+ renderInterval + { Number } + + # +

+
+
+

渲染间隔时间

+
+ +
+ +

+ 默认值: 16 +

+ + + + +
+

+ recoverTime + { Number } + + # +

+
+
+

弹性恢复时间

+
+ +
+ +

+ 默认值: 200 +

+ + + + +
+

+ refreshControlRecoverTime + { Number } + + # +

+
+
+

刷新控件恢复时间

+
+ +
+ +

+ 默认值: 100 +

+ + + + +
+

+ refreshDistance + { Number } + + # +

+
+
+

刷新控件恢复时间

+
+ +
+ +

+ 默认值: 60 +

+ + + + +
+

+ refreshControl + { Function } + + # +

+
+
+

下拉刷新控件

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ children + { Element Array } + + # +

+
+
+

子元素

+
+ +
+ +

+ 默认值: null +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-Sheet.html b/docs/component-Sheet.html new file mode 100644 index 0000000..f31360d --- /dev/null +++ b/docs/component-Sheet.html @@ -0,0 +1,656 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ Sheet + + 0.17.0 +

+

底部弹层 +底部弹层弹出会有动画。

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

Sheet

+

Other Points

+
    +
  • 子组件点击事件会穿透从而被遮罩层捕获，如需处理，请在子组件上加上点击事件进行拦截
    • +
  • 内部封装了 Overlay 组件，请参考 Overlay
    • +
+

Todo

+
    +
  • bugfix：visible 初始状态为 true 时只有遮罩
    • +
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ visible + { Boolean } + + # +

+
+
+

显示开关

+
+ +
+ +

+ 默认值: false +

+ + + + +
+

+ overlayStyle + { Object } + + # +

+
+
+

遮盖层样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ onClose + { Function } + + # +

+
+
+

关闭回调（动画结束时）

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ onPressOverlay + { Function } + + # +

+
+
+

遮罩点击事件

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ children + { Element Array } + + # +

+
+
+

子元素

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ duration + { Number } + + # +

+
+
+

动画时长

+
+ +
+ +

+ 默认值: 200 +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-SmsCaptchaInput.html b/docs/component-SmsCaptchaInput.html new file mode 100644 index 0000000..f3ac137 --- /dev/null +++ b/docs/component-SmsCaptchaInput.html @@ -0,0 +1,971 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ SmsCaptchaInput + + 0.13.1 +

+

短信验证码输入框 +短信验证码输入框组件有三种状态：

+

0：初始状态

+

1：发送短信中状态

+

2：倒计时状态

+

3：倒计时结束状态

+

点击按钮会使组件由 0：初始状态 进入 1：发送短信中状态， +此时需要根据接口状况进行判断： +1、如果发送短信成功：手动调起组件的 start 方法，进入 2：倒计时状态， +在倒计时结束时组件会自动进入 3：倒计时结束状态； +2、如果发送短信失败：手动调起组件的 stop 方法，进入 3：倒计时结束状态；

+
+

rnx-ui 表单校验工具Validator 现已支持该组件。

+
+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

SmsCaptchaInput

+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ inputStyle + { Object } + + # +

+
+
+

自定义输入框样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ btnStyle + { Object } + + # +

+
+
+

自定义按钮样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ btnTextInital + { String } + + # +

+
+
+

按钮文字：初始状态

+
+ +
+ +

+ 默认值: '获取验证码' +

+ + + + +
+

+ btnTextSending + { String } + + # +

+
+
+

按钮文字：发送短信中

+
+ +
+ +

+ 默认值: '正在发送短信' +

+ + + + +
+

+ btnTextTiming + { String } + + # +

+
+
+

按钮文字：倒计时中，{time} 将会被替换为倒计时数字

+
+ +
+ + + + +
+

+ btnTextTimed + { String } + + # +

+
+
+

按钮文字：倒计时结束

+
+ +
+ +

+ 默认值: '重新获取' +

+ + + + +
+

+ btnTextStyle + { Object } + + # +

+
+
+

自定义按钮文本样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ placeholder + { String } + + # +

+
+
+

提示文字

+
+ +
+ +

+ 默认值: '短信验证码' +

+ + + + +
+

+ placeholderTextColor + { String } + + # +

+
+
+

提示文字颜色

+
+ +
+ +

+ 默认值: COLOR_PLACEHOLDER +

+ + + + +
+

+ activeOpacity + { Number } + + # +

+
+
+

按钮点击透明度

+
+ +
+ +

+ 默认值: ACTIVE_OPACITY +

+ + + + +
+

+ intervalTime + { Number } + + # +

+
+
+

倒计时时间

+
+ +
+ +

+ 默认值: 60 +

+ + + + +
+

+ onPressBtn + { Function } + + # +

+
+
+

点击发送短信按钮回调，当返回 false 时，可以阻止倒计时开始； +该回调接受两个参数：开始倒计时方法：start 和结束倒计时方法 stop

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ onStop + { Function } + + # +

+
+
+

倒计时结束回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ captchaLength + { Number } + + # +

+
+
+

验证码校验长度

+
+ +
+ +

+ 默认值: 6 +

+ + + + +
+

+ collectValidate + { Function } + + # +

+
+
+

校验器接口，值通常为叫校验器的校验手机方法

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ name + { String } + + # +

+
+
+

用来在校验器中做标识

+
+ +
+ +

+ 默认值: 'SMS_CODE_INPUT' +

+ + + + +
+

+ readablename + { String } + + # +

+
+
+

用来在校验器中组成错误信息

+
+ +
+ +

+ 默认值: '短信验证码' +

+ + + + +
+

+ onChangeText + { Function } + + # +

+
+
+

改变回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ autoFocus + { Boolean } + + # +

+
+
+

是否开启自动获取焦点（在 start 被调用时）

+
+ +
+ +

+ 默认值: true +

+ + + + +
+

+ getInput + { Function } + + # +

+
+
+

获取输入框

+
+ +
+ +

+ 默认值: NOOP +

+ + + + +
+

+ hitSlop + { Object } + + # +

+
+
+

发送短信按钮热区

+
+ +
+ +

+ 默认值: null +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-TabBar.html b/docs/component-TabBar.html new file mode 100644 index 0000000..83c541b --- /dev/null +++ b/docs/component-TabBar.html @@ -0,0 +1,609 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ TabBar + + 0.17.0 +

+

横向点击栏

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

TabBar

+

Other Points

+
    +
  • TabBar 默认不设高度
    • +
  • 为防止 defaultComponent 和 activedComponent 不被刷新，强烈建议加上 key
    • +
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ activeId + { String } + + # +

+
+
+

激活项的 Id，必须是 items 项的 id 属性

+
+ +
+ +

+ 默认值: '' +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ items + { Object } + + # +

+
+
+

tab 项

+
+ +
+ +

+ 默认值: [{}] +

+ + + + +
+

+ activeOpacity + { Number } + + # +

+
+
+

tab 项点击时透明度

+
+ +
+ +

+ 默认值: 1 +

+ + + + +
+

+ onPress + { Function } + + # +

+
+
+

改变激活项时的回调，点击项的 id 会作为参数传入。

+
+ +
+ +

+ 默认值: NOOP +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-ToolTip.html b/docs/component-ToolTip.html new file mode 100644 index 0000000..929ec4a --- /dev/null +++ b/docs/component-ToolTip.html @@ -0,0 +1,650 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ ToolTip + + 0.16.0 +

+

提示框

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

ToolTip

+

Other Points

+
    +
  • 内部封装了 Overlay 组件，请参考 Overlay
    • +
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ visible + { Boolean } + + # +

+
+
+

显示开关

+
+ +
+ +

+ 默认值: false +

+ + + + +
+

+ text + { String } + + # +

+
+
+

显示文本

+
+ +
+ +

+ 默认值: '' +

+ + + + +
+

+ overlayStyle + { Object } + + # +

+
+
+

遮罩层样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ textWrapperStyle + { Object } + + # +

+
+
+

文本容器样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ textStyle + { Object } + + # +

+
+
+

文本样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ pointerEvents + { String } + + # +

+
+
+

控制 Overlay 是否可以作为触控事件的目标（参考 https://facebook.github.io/react-native/docs/view.html#pointerevents）

+
+ +
+ +

+ 默认值: 'none' +

+ + + + +
+

+ useOverlayAnimation + { Boolean } + + # +

+
+
+

是否使用 Overlay 动画

+
+ +
+ +

+ 默认值: true +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component-VirtualPasswordInput.html b/docs/component-VirtualPasswordInput.html new file mode 100644 index 0000000..2f6c336 --- /dev/null +++ b/docs/component-VirtualPasswordInput.html @@ -0,0 +1,700 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ VirtualPasswordInput + + 0.17.0 +

+

虚拟密码输入框

+
+ + +
+
使用说明
+ +
+
+ +
+

Demo

+

VirtualPasswordInput

+

Example

+
import VirtualPasswordInput from 'rnx-ui/VirtualPasswordInput';
+
+function Example(props) {
+  return (
+    <VirtualPasswordInput
+      onPress={this.onPressPswdInput}
+      value={this.state.pswd}
+    />
+  );
+}
+
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ value + { String } + + # +

+
+
+

值

+
+ +
+ +

+ 默认值: '' +

+ + + + +
+

+ secureTextEntry + { Boolean } + + # +

+
+
+

是否启用安全输入

+
+ +
+ +

+ 默认值: true +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

最外层样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ containerStyle + { Object } + + # +

+
+
+

容器样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ cellStyle + { Object } + + # +

+
+
+

单个输入框样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ secureStyle + { Object } + + # +

+
+
+

安全码样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ textStyle + { Object } + + # +

+
+
+

文本样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ maxLength + { Number } + + # +

+
+
+

最大长度

+
+ +
+ +

+ 默认值: 6 +

+ + + + +
+

+ onPress + { Function } + + # +

+
+
+

点击回调

+
+ +
+ +

+ 默认值: NOOP +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/component.html b/docs/component.html new file mode 100644 index 0000000..3b32fa7 --- /dev/null +++ b/docs/component.html @@ -0,0 +1,590 @@ + + + + + + + + + + RNX-UI Documentation 组件 + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

组件

+

组件的说明文档

+
+
+ + +
+ + +
+ +
+ + +
+

+ All + + +

+

页面级容器，内置了 StatusBar。

+
+ + +
+
使用说明
+ +
+
+ +
+

Example

+
import All from 'rnx-ui/All';
+
+function Example(props) {
+  return (
+    <All />
+  );
+}
+
+ +
+ + +
+
+ +
+ + +
+ +
属性
+ +
+

+ children + { Element Array } + + # +

+
+
+

子元素

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ style + { Object } + + # +

+
+
+

自定义样式

+
+ +
+ +

+ 默认值: null +

+ + + + +
+

+ statusBarBgColor + { String } + + # +

+
+
+

StatusBar 背景色

+
+ +
+ +

+ 默认值: 'transparent' +

+ + + + +
+

+ statusBarBgStyle + { Stirng } + + # +

+
+
+

StatusBar 样式类型

+
+ +
+ +

+ 默认值: 'light-content' +

+ + + + + + + + +
+
+ +
+
+ + +
+ +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..a8d3a33 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,350 @@ + + + + + + + + + + RNX-UI Documentation RNX-UI + + + + + + + + + +
+
+
+ + RNX-UI + + + +
+
+ + + + + +
+
+
+

RNX-UI

+

RNX-UI

当前版本：v0.17.0

+
+
+ + +
+ + +
+
+ +

rnx-ui #

Build Status +npm +npm +GitHub license

+

A UI Lib for React Native

+

Start #

1. Install #

npm install rnx-ui --save
+

2. Use #

import React, {
+  Component,
+} from 'react';
+import Btn from 'rnx-ui/Btn';
+
+function Demo(props) {
+  return <Btn />;
+}
+
+

Overview #

🖌 designing(7) 🛠 developing(1) ✅ done(30)

+

Component #

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionState
ActionSheet上拉按钮组✅
AddAndSubtract加减法动画组件✅
Alert警告弹框✅
All页面容器✅
Badge角标✅
Btn按钮✅
CardView卡片视图✅
Checkbox选择框🖌
Confirm确认弹框✅
Dialog对话框✅
Drop掉落动画组件✅
DynamicText文本框（滚动显示过长文字）✅
HeaderedSheet有标题栏的底部弹层✅
Icon字体图标🖌
ImgHolder带占位的图片✅
ImgPicker图片选择组件✅
ImgRollView图片选择组件✅
KeyboardAdaptiveView适应键盘的容器✅
Loading菊花加载中动画✅
LoadingBtn带菊花图的按钮🖌
NavBar导航栏✅
Number数字🛠
NumericKeyboard虚拟数字键盘✅
Overlay遮罩层✅
PlaceholderText有占位元素的文本显示组件✅
PlaceholderInput可以自定义占位元素的输入框✅
PswdInput密码输入框（带有用于切换密码显隐的“眼睛”按钮）🖌
PhoneNumInput手机号码输入框✅
RefreshView滚动列表（带下拉刷新、上拉加载）✅
Select选择器（带有向上弹出和向下隐藏的动画、遮罩、取消确定标题栏）🖌
Sheet底部弹层✅
SlideMenu侧滑菜单🖌
SmsCaptchaInput短信验证码输入框✅
TabBar横向点击栏✅
ToolTip提示框✅
VirtualPasswordInput虚拟密码输入框✅
Web类微信浏览器🖌
+

Util #

+ + + + + + + + + + + + + + + + + + + +
NameDescriptionState
transPxToDp像素（px）转虚拟像素（dp）方法✅
Validator表单校验工具✅
+

Example #

将项目克隆至本地后：

+

1. Install #

npm install
+

2. Run #

react-native run-ios
+
+
+
+ + +
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + diff --git a/docs/source/ZeroClipboard.swf b/docs/source/ZeroClipboard.swf new file mode 100644 index 0000000..9c2171a Binary files /dev/null and b/docs/source/ZeroClipboard.swf differ diff --git a/docs/source/app.js b/docs/source/app.js new file mode 100644 index 0000000..a44babd --- /dev/null +++ b/docs/source/app.js @@ -0,0 +1,254 @@ +var EXAMPLE_MAX_HEIGHT = 98, + DEFAULT_SHOW_PARAMS = 5; + +$(document).ready(function() { + // 移动端导航 + var $openPanel = $('.open-panel'); + var $contentLeft = $('.content-left'); + var $contentLeftWidth = $contentLeft.width() - 1; + var $ydoc = $('.ydoc'); + var $mask = $('.mask'); + var isPanelHide = true; + var winWidth = $(window).width(); + var h2 = $('.content-right').find('h2'); + var h3 = $('.content-right').find('h3'); + var a = $('.content-left').find('a'); + var lis = $contentLeft.find('li'); + var titles = []; + var menus = []; + $ydoc.addClass('hidden'); + if(isWechat()&&$contentLeft[0]){ + $ydoc.addClass('off-webkit-scroll'); + } + for(var i=0; i scrollTop){ + // 遍历侧栏，找到对应的标题 + for(var j in menus){ + if(menus[j].name == titles[i].name){ + lis.removeClass('active'); + menus[j].parent.addClass('active'); + $('.docs-sidenav').scrollTop(menus[j].offsetTop); + return; + } + } + return; + } + } + }); + + $ydoc.removeClass('hidden'); + $ydoc.on('scroll', function(){ + sessionStorage.setItem('offsetTop',$ydoc.scrollTop()); + }) + // 待元素获获取offsetTop值之后再设置ydoc的offsetTop + if(sessionStorage.offsetTop){ + $ydoc.scrollTop(sessionStorage.offsetTop); + } + // $openPanel.trigger('click'); + $mask.on('click',function(){ + if(!isPanelHide){ + $openPanel.click(); + } + }); + + // PC端导航 + $('.navbar-toggle').click(function(){ + $(this).next(".ydoc-nav").toggle(); + }); + + $('.docs-sidenav li').click(function(e){ + $('.docs-sidenav li').removeClass('active'); + $(this).addClass('active'); + if(!isPanelHide){ + $openPanel.trigger('click'); + } + }); + + $('.markdown-body pre').map(function(i,item){ + $(item).addClass('ydoc-example'); + }); + + // $('code').each(function(i, block) { + // if (block.innerHTML.indexOf('\n') != -1) { + // var pn = block.parentNode; + // if (pn.tagName.toUpperCase() == 'PRE') { + // try { + // hljs.highlightBlock(block); + // } catch(e) {} + // } else { + // pn.innerHTML = '
' + block.innerHTML + '
'; + // try { + // hljs.highlightBlock(pn.childNodes[0].childNodes[0]); + // } catch(e) {} + // } + // } + // }); + + + var winHeight = $(window).height() - 44, + sidebar = $('.docs-sidebar'); + var docSideNav = $('.docs-sidenav'); + var ydocContainerCon= $('.ydoc-container-content'); + if(winWidth>767){ + docSideNav.width($contentLeftWidth); + } + if (sidebar.height() > winHeight) { + sidebar.css('max-height', winHeight + 'px'); + $('.docs-sidenav').css('max-height', winHeight + 'px'); + if(winWidth<768){ + $('.docs-sidenav').css({'overflow-x':'hidden'}); + } + var activeMenu, + barScroll = false; + + sidebar.on('mouseover', function() { + barScroll = true; + }); + sidebar.on('mouseout', function() { + barScroll = false; + }); + }; + + $(window).on('scroll', function(e) { + if( $(this).scrollTop() > ($('.footer').offset().top - $(window).height()) ){ + winHeight = $(window).height() - $('.footer').outerHeight()-44; + sidebar.css('max-height', winHeight + 'px'); + $('.docs-sidenav').css('max-height', winHeight + 'px'); + }else{ + winHeight = $(window).height() - 44; + sidebar.css('max-height', winHeight + 'px'); + $('.docs-sidenav').css('max-height', winHeight + 'px'); + } + + if (!barScroll) { + var activeItem = $('.docs-sidebar li.active a'); + if (activeItem.length) { + if (!activeMenu || (activeMenu.attr('href') != activeItem.attr('href'))) { + activeMenu = activeItem; + var top = activeMenu.offset().top - sidebar.offset().top; + if (top < 0) { + //sidebar.scrollTop(sidebar.scrollTop() + top); + $('.docs-sidenav').scrollTop($('.docs-sidenav').scrollTop() + top); + } else if (top > winHeight - 88) { + //sidebar.scrollTop(sidebar.scrollTop() + top - winHeight + 44); + $('.docs-sidenav').scrollTop($('.docs-sidenav').scrollTop() + top - winHeight + 88); + } + } + } + } + }); + + // 退出全屏浏览器窗口大小改变，不触发resize + $(window).on('resize', function(e){ + resizeSidebar(); + $contentLeftWidth = $contentLeft.width() - 1; + }); + function resizeSidebar(){ + var winHeight = $(window).height() - 44, + sidebar = $('.docs-sidebar'); + var docSideNav = $('.docs-sidenav'); + var ydocContainerCon= $('.ydoc-container-content'); + if(winWidth>767){ + docSideNav.width($contentLeftWidth); + } + if (sidebar.height() > winHeight) { + sidebar.css('max-height', winHeight + 'px'); + $('.docs-sidenav').css('max-height', winHeight + 'px'); + $('.docs-sidenav').css({'overflow-y':'scroll','overflow-x':'hidden'}); + var barScroll = false; + + sidebar.on('mouseover', function() { + barScroll = true; + }); + + sidebar.on('mouseout', function() { + barScroll = false; + }); + // scroll + if( $(window).scrollTop() > ($('.footer').offset().top - $(window).height()) ){ + winHeight = $(window).height() - $('.footer').outerHeight()-44; + sidebar.css('max-height', winHeight + 'px'); + $('.docs-sidenav').css('max-height', winHeight + 'px'); + }else{ + winHeight = $(window).height() - 44; + sidebar.css('max-height', winHeight + 'px'); + $('.docs-sidenav').css('max-height', winHeight + 'px'); + } + } + } + + function sortAsOffset(propertyName){ + return function(obj1, obj2){ + var val1 = obj1[propertyName]; + var val2 = obj2[propertyName]; + if(val1 < val2){ + return -1; + }else if (val1 > val2) { + return 1; + }else { + return 0; + } + } + } + function isWechat(){ + var ua = navigator.userAgent.toLowerCase(); + if(ua.match(/MicroMessenger/i)=="micromessenger") { + return true; + } else { + return false; + } + } +}); diff --git a/docs/source/code.css b/docs/source/code.css new file mode 100644 index 0000000..7009f49 --- /dev/null +++ b/docs/source/code.css @@ -0,0 +1 @@ +@charset "UTF-8";.syntaxhighlighter .toolbar a,.syntaxhighlighter.printing a{text-decoration:none!important}.ydoc .task-list,menu,ol,ul{list-style:none}.syntaxhighlighter a,.syntaxhighlighter code,.syntaxhighlighter div,.syntaxhighlighter table,.syntaxhighlighter table caption,.syntaxhighlighter table tbody,.syntaxhighlighter table td,.syntaxhighlighter table thead,.syntaxhighlighter table tr,.syntaxhighlighter textarea{-moz-border-radius:0!important;-webkit-border-radius:0!important;background:0 0!important;border:0!important;bottom:auto!important;float:none!important;height:auto!important;left:auto!important;line-height:1.1em!important;margin:0!important;outline:0!important;overflow:visible!important;padding:0!important;position:static!important;right:auto!important;text-align:left!important;top:auto!important;vertical-align:baseline!important;width:auto!important;box-sizing:content-box!important;font-family:Consolas,"Bitstream Vera Sans Mono","Courier New",Courier,monospace!important;font-weight:400!important;font-style:normal!important;font-size:1em!important;min-height:inherit!important;min-height:auto!important}.ydoc .navbar-brand>li,.ydoc-nav li{float:left}.markdown-body .anchor:focus,a,button,input,select,textarea{outline:0}.syntaxhighlighter,.syntaxhighlighter table td.code .container{position:relative!important}.syntaxhighlighter,.syntaxhighlighter table,.syntaxhighlighter table td.code{width:100%!important}.syntaxhighlighter .bold,.syntaxhighlighter .keyword,.syntaxhighlighter .script,.syntaxhighlighter.printing .script{font-weight:700!important}.syntaxhighlighter{margin:1em 0!important;overflow:auto!important;font-size:1em!important}.syntaxhighlighter.source{overflow:hidden!important}.syntaxhighlighter .italic{font-style:italic!important}.syntaxhighlighter .line{white-space:pre!important}.syntaxhighlighter table caption{text-align:left!important;padding:.5em 0 .5em 1em!important}.syntaxhighlighter table td.code .container textarea{box-sizing:border-box!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;border:none!important;background:#fff!important;padding-left:1em!important;overflow:hidden!important;white-space:pre!important}.syntaxhighlighter table td.gutter .line{text-align:right!important;padding:0 .5em 0 1em!important}.syntaxhighlighter table td.code .line{padding:0 1em!important}.syntaxhighlighter.nogutter td.code .container textarea,.syntaxhighlighter.nogutter td.code .line{padding-left:0!important}.syntaxhighlighter.show{display:block!important}.syntaxhighlighter.collapsed table{display:none!important}.syntaxhighlighter.collapsed .toolbar{padding:.1em .8em 0!important;font-size:1em!important;position:static!important;width:auto!important;height:auto!important}.syntaxhighlighter.collapsed .toolbar span{display:inline!important;margin-right:1em!important}.syntaxhighlighter.collapsed .toolbar span a{padding:0!important;display:none!important}.syntaxhighlighter .toolbar span.title,.syntaxhighlighter.collapsed .toolbar span a.expandSource{display:inline!important}.syntaxhighlighter .toolbar{position:absolute!important;right:1px!important;top:1px!important;width:11px!important;height:11px!important;font-size:10px!important;z-index:10!important}.syntaxhighlighter .toolbar a{display:block!important;text-align:center!important;padding-top:1px!important}.syntaxhighlighter .toolbar a.expandSource,.syntaxhighlighter.printing .toolbar{display:none!important}.syntaxhighlighter.ie{font-size:.9em!important;padding:1px 0!important}.syntaxhighlighter.ie .toolbar{line-height:8px!important}.syntaxhighlighter.ie .toolbar a{padding-top:0!important}.syntaxhighlighter.printing .line.alt1 .content,.syntaxhighlighter.printing .line.alt2 .content,.syntaxhighlighter.printing .line.highlighted .number,.syntaxhighlighter.printing .line.highlighted.alt1 .content,.syntaxhighlighter.printing .line.highlighted.alt2 .content{background:0 0!important}.syntaxhighlighter.printing .line .number{color:#bbb!important}.syntaxhighlighter.printing .line .content,.syntaxhighlighter.printing .plain,.syntaxhighlighter.printing .plain a{color:#000!important}.syntaxhighlighter.printing .comments,.syntaxhighlighter.printing .comments a{color:#008200!important}.syntaxhighlighter.printing .string,.syntaxhighlighter.printing .string a{color:#00f!important}.syntaxhighlighter.printing .keyword{color:#069!important;font-weight:700!important}.syntaxhighlighter.printing .preprocessor{color:gray!important}.syntaxhighlighter.printing .variable{color:#a70!important}.syntaxhighlighter.printing .value{color:#090!important}.syntaxhighlighter.printing .functions{color:#ff1493!important}.syntaxhighlighter.printing .constants{color:#06c!important}.syntaxhighlighter.printing .color1,.syntaxhighlighter.printing .color1 a{color:gray!important}.syntaxhighlighter.printing .color2,.syntaxhighlighter.printing .color2 a{color:#ff1493!important}.syntaxhighlighter.printing .color3,.syntaxhighlighter.printing .color3 a{color:red!important}.syntaxhighlighter .line.highlighted.number,.syntaxhighlighter table caption,.syntaxhighlighter.printing .break,.syntaxhighlighter.printing .break a{color:#000!important}.syntaxhighlighter,.syntaxhighlighter .line.alt1,.syntaxhighlighter .line.alt2{background-color:#fff!important}.syntaxhighlighter .line.highlighted.alt1,.syntaxhighlighter .line.highlighted.alt2{background-color:#e0e0e0!important}.syntaxhighlighter .gutter{color:#afafaf!important}.syntaxhighlighter .gutter .line{border-right:3px solid #6ce26c!important}.syntaxhighlighter .gutter .line.highlighted{background-color:#6ce26c!important;color:#fff!important}.syntaxhighlighter.printing .line .content{border:none!important}.syntaxhighlighter.collapsed{overflow:visible!important}.syntaxhighlighter.collapsed .toolbar{color:#00f!important;background:#fff!important;border:1px solid #6ce26c!important}.syntaxhighlighter.collapsed .toolbar a{color:#00f!important}.syntaxhighlighter.collapsed .toolbar a:hover{color:red!important}.syntaxhighlighter .toolbar{color:#fff!important;background:#6ce26c!important;border:none!important}.syntaxhighlighter .toolbar a{color:#fff!important}.syntaxhighlighter .plain,.syntaxhighlighter .plain a,.syntaxhighlighter .toolbar a:hover{color:#000!important}.syntaxhighlighter .comments,.syntaxhighlighter .comments a{color:#008200!important}.syntaxhighlighter .string,.syntaxhighlighter .string a{color:#00f!important}.syntaxhighlighter .keyword{color:#069!important}.syntaxhighlighter .preprocessor{color:gray!important}.syntaxhighlighter .variable{color:#a70!important}.syntaxhighlighter .value{color:#090!important}.syntaxhighlighter .functions{color:#ff1493!important}.syntaxhighlighter .constants{color:#06c!important}.syntaxhighlighter .script{color:#069!important;background-color:none!important}.syntaxhighlighter .color1,.syntaxhighlighter .color1 a{color:gray!important}.syntaxhighlighter .color2,.syntaxhighlighter .color2 a{color:#ff1493!important}.syntaxhighlighter .color3,.syntaxhighlighter .color3 a{color:red!important}html{font-size:100px;height:100%}blockquote,body,button,dd,dl,fieldset,figure,form,h1,h2,h3,h4,h5,h6,input,legend,ol,p,pre,td,textarea,th,ul,xmp{margin:0;padding:0}body,button,code,input,kbd,pre,samp,select,textarea,tt,xmp{height:100%;line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}.clr,.clrfix:after{height:0;clear:both}big,button,h1,h2,h3,h4,h5,h6,input,select,small,textarea{font-size:100%}h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif;font-weight:400}.ydoc .task-list,.ydoc .ydocIcon{font-family:ydocfont}address,cite,dfn,em,i,optgroup,var{font-style:normal}table{border-collapse:collapse;border-spacing:0;text-align:left}caption,th{text-align:inherit}fieldset,img{border:0}button,img,input,object,select,textarea{vertical-align:middle}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}audio,canvas,video{display:inline-block}blockquote:after,blockquote:before,q:after,q:before{content:"\0020"}textarea{overflow:auto;resize:vertical}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}.mark,mark{background-color:#fcf8e3;padding:.2em}a,del,ins,s,u{text-decoration:none}sub,sup{vertical-align:baseline}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.ydoc,.ydoc-header,.ydoc-nav{font-size:.14rem}*,::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.clr{overflow:hidden}.clrfix{zoom:1}.clrfix:after{display:block;visibility:hidden;content:"."}@font-face{font-family:ydocfont;font-style:normal;font-weight:400;src:url(fonts/ydoc.eot?v=1.0.0);src:url(fonts/ydoc.eot?#iefix&#iefix&v=1.0.0) format("embedded-opentype"),url(fonts/ydoc.woff?v=1.0.0) format("woff"),url(fonts/ydoc.ttf?v=1.0.0) format("truetype"),url(source/fonts/ydoc.svg?v=1.0.0#icomoonregular) format("svg")}.ydoc{background:#fafafa;overflow:hidden;height:auto;min-height:100%;position:relative}.ydoc-header{line-height:.48rem;color:#3b3b3b;text-align:right;padding:0 .2rem;overflow:hidden;background-color:#252a31;background-image:-moz-linear-gradient(top,#333,#222);background-image:-ms-linear-gradient(top,#333,#222);background-image:-webkit-gradient(linear,0 0,0 100%,from(#333),to(#222));background-image:-webkit-linear-gradient(top,#333,#222);background-image:-o-linear-gradient(top,#333,#222);background-image:linear-gradient(top,#333,#222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(0,0,0,.1)}.ydoc-header a,.ydoc-nav{color:#fff}.ydoc-header-area{margin:0 auto}.ydoc .navbar-brand{width:auto;float:left;margin-right:20px;font-weight:700}.ydoc-nav .active,.ydoc-nav .active a,.ydoc-nav li a:hover{color:#ff503f}.ydoc-nav li a{padding:0 15px}.ydoc-nav .navbar-right{float:right}.ydoc-nav .navbar-left{float:left}.ydoc-second-header{background:#252a31}.ydoc-second-header a{color:#fff}.ydoc-second-header .ydoc-nav{float:right}.ydoc .task-list .checkbox{vertical-align:baseline;user-select:none}.ydoc .navbar-toggle{float:right;font-size:.22rem;display:none;background:0 0;border:none;cursor:pointer;color:#fff;line-height:.48rem}.ydoc .ydoc-banner-bg{background:url(images/grid-18px-masked.png) 0 top repeat-x;padding-bottom:121px}.ydoc .ydoc-banner-bg .desc{font-family:"微软雅黑"}.ydoc-banner{color:#fff;font-size:.18rem;padding:20px 30px}.ydoc-banner-area{margin:0 auto}.ydoc-banner-area h1{font-size:.28rem;margin-bottom:.1rem;color:#333}.ydoc-banner-area p{line-height:1.7;margin:0 0 10px;color:#333}.ydoc .footer{text-align:center;position:absolute;left:0;bottom:0;overflow:hidden;margin:0 auto;padding:40px 0 60px;width:100%;color:#fff;background:#252a31;font-size:14px}.ydoc .footer .copyright{font-size:14px;text-align:center;color:#a1a1a1}.ydoc .footer .copyright a{color:#a1a1a1;text-decoration:underline}.ydoc-container{clear:both;overflow:hidden}.ydoc-container-content{overflow:hidden;background-color:#fff;margin:20px auto;padding:24px 0 0;box-shadow:0 0 3px #e5e5e5;position:relative}.ydoc-container-content .static-code-content{width:100%;background:#fff;padding:.15rem}.ydoc-container-content .content-left,.ydoc-container-content .content-right{float:left;position:relative;min-height:1px}.ydoc-container-content .content-right{box-sizing:border-box;width:75%;background:#fff;padding:15px;float:right;min-height:500px}.ydoc-container-content .hashlink{display:none}.ydoc-container-content .subject:hover .hashlink{display:inline}.ydoc-container-content .right{float:right}.ydoc-container-content .content-left{width:25%}.ydoc-container-content .docs-table del{text-decoration:line-through;color:#999}.ydoc-container-content .ydoc-example{position:relative;overflow:hidden;height:auto}.ydoc-container-content .ydoc-example code{overflow-y:hidden;display:block;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace}.ydoc-container-content .ydoc-example .extend,.ydoc-container-content .ydoc-example .fold{color:#337ab7;position:absolute;left:15px;bottom:10px;cursor:pointer}.ydoc-container-content .ydoc-example .extend:hover,.ydoc-container-content .ydoc-example .fold:hover{text-decoration:underline}.ydoc-container-content .docs-sidebar{background:#fff;z-index:9999;overflow:hidden}.ydoc-container-content .docs-sidebar .docs-sidenav{padding-left:0;overflow-x:hidden}.ydoc-container-content .docs-sidebar .docs-sidenav li{line-height:.42rem;height:.42rem;font-size:14px;overflow:hidden}.ydoc-container-content .docs-sidebar .docs-sidenav li a{padding:0 .16rem 0 .28rem;border-left:2px solid #fff;text-overflow:ellipsis;color:#666;line-height:.42rem;height:.42rem;display:inline-block;width:100%;position:relative;overflow:hidden;white-space:nowrap}.ydoc-container-content .docs-sidebar .docs-sidenav li a:hover{background-color:#fff8ef;border-left-color:#fff8ef}.ydoc-container-content .docs-sidebar .docs-sidenav li.active a,.ydoc-container-content .docs-sidebar .docs-sidenav li.active a:hover{border-left:2px solid #ff503f;color:#ff503f}.ydoc-container-content .docs-sidebar .docs-sidenav ul{width:100%}.ydoc-container-content .docs-sidebar .docs-sidenav ul li,.ydoc-container-content .docs-sidebar .docs-sidenav ul li.active{font-size:.12rem}.ydoc-container-content .docs-sidebar .docs-sidenav ul li a,.ydoc-container-content .docs-sidebar .docs-sidenav ul li a:hover,.ydoc-container-content .docs-sidebar .docs-sidenav ul li.active a,.ydoc-container-content .docs-sidebar .docs-sidenav ul li.active a:hover{padding-left:48px}.ydoc-container-content .docs-sidebar.affix{position:fixed;top:20px}.ydoc-container-content .docs-sidebar.affix-bottom{position:absolute}.ydoc-container-content .docs-section{margin:10px}.ydoc-container .docs-sidebar:before{height:100%;background-color:#eee;width:1px;position:absolute;right:0;display:block;min-height:500px;z-index:99;content:" ";box-sizing:border-box}.open-panel{display:none;overflow:hidden;position:fixed;right:5%;bottom:50px;opacity:.5;width:40px;height:40px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2lpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpEMzJFMTVDOUNCMTQxMUU2OERGOEZGOEM1MkU1MUJENCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQThGQTIzRENEQTUxMUU2QTczMUM3QjRDM0UxNjQxMiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQThGQTIzQ0NEQTUxMUU2QTczMUM3QjRDM0UxNjQxMiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODZjMjliOTEtNjI0Zi1iZDQ3LWEzZWQtMDIwYzQwNDQxMjlkIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQzMkUxNUM5Q0IxNDExRTY4REY4RkY4QzUyRTUxQkQ0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+g3TxwAAAANRJREFUeNrsmT0KwkAQhWfXNGLhQewUW08i2FlZ7LZeQMRiC0EQwcvYixcRrbRc35DYaJNGdpD34EsRUnzs/AQSF0IQpAN2YAq6wEmZZPAABxD1RtVwAQMpHz2YHtBTm4Cxx2VrRO4zQ7BSwZnYzdw3PWc1fS+246wLCgX/XrBq81BK6SdvlhhjZolNlLhNKTjFFOQe5B7kHuQUU5B7kHuQe5BTTEEKUvArWQWfhgVvKng0LLhXwQU4G5Q7geW7B0dgA+5S/woo1nPgCtZSf+WXlwADAGEgKNreXHUxAAAAAElFTkSuQmCC) no-repeat}@media screen and (min-width:1200px){.ydoc-banner-area,.ydoc-container-content,.ydoc-header-area{width:1200px}}@media screen and (min-width:992px) and (max-width:1199px){.ydoc-banner-area,.ydoc-container-content,.ydoc-header-area{width:992px}}@media screen and (min-width:768px) and (max-width:991px){.ydoc-banner-area,.ydoc-container-content,.ydoc-header-area{width:768px}}@media screen and (max-width:767px){.mask,.ydoc-container-content .content-left{position:fixed;top:0;transition:all .4s;height:100%}.mask,.ydoc{height:100%}.mask{display:none;left:0;z-index:0;width:100%;background-color:transparent}.show{background-color:rgba(0,0,0,.35)}.ydoc-container-content .content-right{width:100%!important}.ydoc-container-content .content-left{display:block;right:-75%;width:75%!important;background-color:#222;z-index:1;-webkit-transition:all .4s}.ydoc .footer,.ydoc-container-content .docs-sidebar.affix{position:static}.ydoc-container-content .content-left:before{content:'目录：';display:block;padding:.28rem;color:#999;background-color:#2c2c2c;font-weight:700}.ydoc-container-content .docs-sidebar,.ydoc-container-content .docs-sidebar .docs-sidenav li a:hover{background-color:#222}.ydoc-container-content .docs-sidebar .docs-sidenav li a{color:#999;border-color:#222}.ydoc-container-content .instructions-con-runner{display:none}.open-panel{display:block;cursor:default;transition:all .4s;-webkit-transition:all .4s}.ydoc-banner-area,.ydoc-container-content,.ydoc-header-area{width:100%}.ydoc{overflow:scroll;-webkit-overflow-scrolling:touch}.ydoc .navbar-toggle{display:inline-block}.ydoc .ydoc-nav{display:none;clear:both;width:100%}.ydoc .ydoc-nav .navbar-left,.ydoc .ydoc-nav .navbar-right{width:100%}.ydoc .ydoc-nav .navbar-left li,.ydoc .ydoc-nav .navbar-right li{width:100%;text-align:left;display:inline-block}.ydoc .ydoc-nav .navbar-left li a,.ydoc .ydoc-nav .navbar-right li a{padding:0;width:100%;display:inline-block}.ydoc .ydoc-nav .navbar-left li a:hover,.ydoc .ydoc-nav .navbar-right li a:hover{color:#ff503f}.ydoc .ydoc-banner-bg{padding-bottom:0}.off-webkit-scroll{-webkit-overflow-scrolling:auto}.hidden{overflow:hidden}.ydoc-second-header,.ydoc-second-header .ydoc-nav{display:block}.ydoc-second-header .ydoc-nav li{float:left}}.anchorjs-link{display:none}@media screen and (min-width:768px){.ydoc-container-content .staticsidenav .docs-sidebar.affix{position:static}.ydoc-container-content .staticsidenav .docs-sidebar .docs-sidenav{overflow:inherit}.staticsidenav .docs-sidebar{overflow:initial}}.markdown-body code{color:#c7254e;background-color:#f9f2f4;font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{display:block;margin:0 0 10px;word-break:break-all;color:#333;background-color:#fafafa;border:1px solid #ccc}.markdown-body::after,.markdown-body::before{display:table;content:""}.markdown-body pre code{font-size:inherit;color:inherit;white-space:pre-wrap;border-radius:0}.markdown-body em{font-style:italic}.markdown-body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:14px;line-height:1.5;word-wrap:break-word}.markdown-body a{color:#337ab7}.markdown-body::after{clear:both}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:#c00}.markdown-body .anchor{float:left;padding-right:4px;margin-left:-20px;line-height:1}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body hr{height:.25em;padding:0;margin:24px 0;background-color:#e7e7e7;border:0}.markdown-body blockquote{padding:0 1em;color:#777;border-left:.25em solid #ddd}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body .loweralpha{list-style-type:lower-alpha}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:#000;vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body h1 code,.markdown-body h1 tt,.markdown-body h2 code,.markdown-body h2 tt,.markdown-body h3 code,.markdown-body h3 tt,.markdown-body h4 code,.markdown-body h4 tt,.markdown-body h5 code,.markdown-body h5 tt,.markdown-body h6 code,.markdown-body h6 tt{font-size:inherit}.markdown-body h1{font-size:2em}.markdown-body h2{font-size:1.5em}.markdown-body h3{font-size:1.25em}.markdown-body h4{font-size:1.15em}.markdown-body h5{font-size:.875em}.markdown-body h6{font-size:.85em;color:#777}.markdown-body ol,.markdown-body ul{padding-left:2em;list-style-type:disc}.markdown-body ol.no-list,.markdown-body ul.no-list{padding:0;list-style-type:none}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body li>p{margin-top:16px}.markdown-body li+li{margin-top:.25em}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}.markdown-body table{display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table th{font-weight:700}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body img{max-width:100%;box-sizing:content-box;background-color:#fff}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body .emoji{max-width:none;vertical-align:text-top;background-color:transparent}.markdown-body span.frame{display:block;overflow:hidden}.markdown-body span.frame>span{display:block;float:left;width:auto;padding:7px;margin:13px 0 0;overflow:hidden;border:1px solid #ddd}.markdown-body span.frame span img{display:block;float:left}.markdown-body span.frame span span{display:block;padding:5px 0 0;clear:both;color:#333}.markdown-body span.align-center{display:block;overflow:hidden;clear:both}.markdown-body span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}.markdown-body span.align-center span img{margin:0 auto;text-align:center}.markdown-body span.align-right{display:block;overflow:hidden;clear:both}.markdown-body span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}.markdown-body span.align-right span img{margin:0;text-align:right}.markdown-body span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}.markdown-body span.float-left span{margin:13px 0 0}.markdown-body span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}.markdown-body span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}.markdown-body code,.markdown-body tt{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before,.markdown-body tt:after,.markdown-body tt:before{letter-spacing:-.2em;content:"\00a0"}.markdown-body code br,.markdown-body tt br{display:none}.markdown-body del code{text-decoration:inherit}.markdown-body pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:0 0;border:0}.markdown-body .highlight{margin-bottom:16px}.markdown-body .highlight pre,.markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;border-radius:3px}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body pre{word-wrap:normal}.markdown-body pre code,.markdown-body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.glyphicon,.markdown-body kbd,.yo-badge{display:inline-block}.markdown-body pre code:after,.markdown-body pre code:before,.markdown-body pre tt:after,.markdown-body pre tt:before{content:normal}.markdown-body kbd{padding:3px 5px;font-size:11px;line-height:10px;color:#555;vertical-align:middle;background-color:#fcfcfc;border:1px solid #ccc;border-bottom-color:#bbb;border-radius:3px;box-shadow:inset 0 -1px 0 #bbb}#readme.contributing>div{max-height:250px;overflow:auto}#readme .markdown-body,#readme .plain{background-color:#fff;border:1px solid #ddd;border-bottom-left-radius:3px;border-bottom-right-radius:3px;padding:30px;word-wrap:break-word}#readme .plain pre{font-size:15px;white-space:pre-wrap}#readme .markdown-body{border:0;padding:30px;border-radius:0}#readme table[data-table-type=yaml-metadata]{line-height:1;font-size:12px}#readme table[data-table-type=yaml-metadata] table{margin:0}.yo-badge{padding:1px .1rem;color:#fff;font-size:.12rem;margin-left:10px;border-radius:12px;font-weight:400}.yo-badge-primary{color:#337ab7;border:1px solid #337ab7}.yo-badge-success{color:#5cb85c;border:1px solid #5cb85c}.yo-badge-info{color:#5bc0de;border:1px solid #5bc0de}.yo-badge-warning{color:#f0ad4e;border:1px solid #f0ad4e}.yo-badge-danger{color:#d9534f;border:1px solid #d9534f}.glyphicon{position:relative;top:1px;font-family:ydocfont;font-style:normal;font-weight:700;font-size:.2rem;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-ok:before{content:"\f078"}.text-success{color:#3c763d}.release-date{font-size:1em;color:grey}.change-type{font-size:1em;color:#ff503f}.markdown-body blockquote.api{border-left:none;padding:0;color:#ff503f}.markdown-body .docs-section h1,.markdown-body .docs-section h2{border-bottom:none}.markdown-body .docs-section li .ydoc-example{left:-2em}.markdown-body .docs-section .blockquote.api{padding:0 0 .15rem}.markdown-body .docs-section h3{color:#ff503f;border-left-color:#ff503f;font-weight:400}.markdown-body .docs-section h3 a{color:#ff503f}.markdown-body .docs-section .con-list-item .con-head{font-size:22px;font-weight:700;border-bottom:1px solid #ddd;margin:0 0 .2rem;padding:.1rem 0;width:100%}.markdown-body .docs-section .con-list-item .prop-type{font-size:14px}.markdown-body .docs-section .con-list-item:last-child{border:none}.markdown-body .docs-section .hide-params{display:none}.markdown-body .docs-section .show-params{display:table-row}.markdown-body .docs-section .extend-params,.markdown-body .docs-section .fold-params{color:#337ab7;margin:-.1rem 0 .15rem;display:block;cursor:pointer}.instructions{margin-bottom:.2rem;overflow:hidden}.instructions-con{display:flex;flex-direction:row}.instructions-con-info{flex:1;overflow:hidden;padding-right:10px}.instructions-con-runner{width:3.2rem;height:6.5rem;padding:0 .16rem;background:url(images/feed.png) no-repeat;background-size:100%;position:relative}.instructions-con-runner .instructions-iframe{background:#fff;width:2.9rem;height:5.1rem;position:absolute;top:.66rem;left:.18rem;border:0} \ No newline at end of file diff --git a/docs/source/fonts/ydoc.eot b/docs/source/fonts/ydoc.eot new file mode 100644 index 0000000..01a8d18 Binary files /dev/null and b/docs/source/fonts/ydoc.eot differ diff --git a/docs/source/fonts/ydoc.svg b/docs/source/fonts/ydoc.svg new file mode 100644 index 0000000..b30f92d --- /dev/null +++ b/docs/source/fonts/ydoc.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/source/fonts/ydoc.ttf b/docs/source/fonts/ydoc.ttf new file mode 100644 index 0000000..1fb1969 Binary files /dev/null and b/docs/source/fonts/ydoc.ttf differ diff --git a/docs/source/fonts/ydoc.woff b/docs/source/fonts/ydoc.woff new file mode 100644 index 0000000..fc7ccd9 Binary files /dev/null and b/docs/source/fonts/ydoc.woff differ diff --git a/docs/source/images/feed.png b/docs/source/images/feed.png new file mode 100644 index 0000000..e110090 Binary files /dev/null and b/docs/source/images/feed.png differ diff --git a/docs/source/images/grid-18px-masked.png b/docs/source/images/grid-18px-masked.png new file mode 100644 index 0000000..1bc82b0 Binary files /dev/null and b/docs/source/images/grid-18px-masked.png differ diff --git a/docs/source/main.css b/docs/source/main.css new file mode 100644 index 0000000..79f1fcb --- /dev/null +++ b/docs/source/main.css @@ -0,0 +1 @@ +@charset "UTF-8";.ydoc .navbar-brand>li,.ydoc-nav li{float:left}.ydoc .task-list,menu,ol,ul{list-style:none}.markdown-body .anchor:focus,a,button,input,select,textarea{outline:0}code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}html{font-size:100px;height:100%}blockquote,body,button,dd,dl,fieldset,figure,form,h1,h2,h3,h4,h5,h6,input,legend,ol,p,pre,td,textarea,th,ul,xmp{margin:0;padding:0}body,button,code,input,kbd,pre,samp,select,textarea,tt,xmp{height:100%;line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}.clr,.clrfix:after{height:0;clear:both}big,button,h1,h2,h3,h4,h5,h6,input,select,small,textarea{font-size:100%}h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif;font-weight:400}.ydoc .task-list,.ydoc .ydocIcon{font-family:ydocfont}address,cite,dfn,em,i,optgroup,var{font-style:normal}table{border-collapse:collapse;border-spacing:0;text-align:left}caption,th{text-align:inherit}fieldset,img{border:0}button,img,input,object,select,textarea{vertical-align:middle}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}audio,canvas,video{display:inline-block}blockquote:after,blockquote:before,q:after,q:before{content:"\0020"}textarea{overflow:auto;resize:vertical}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}.mark,mark{background-color:#fcf8e3;padding:.2em}a,del,ins,s,u{text-decoration:none}sub,sup{vertical-align:baseline}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.ydoc,.ydoc-header,.ydoc-nav{font-size:.14rem}*,::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.clr{overflow:hidden}.clrfix{zoom:1}.clrfix:after{display:block;visibility:hidden;content:"."}@font-face{font-family:ydocfont;font-style:normal;font-weight:400;src:url(fonts/ydoc.eot?v=1.0.0);src:url(fonts/ydoc.eot?#iefix&#iefix&v=1.0.0) format("embedded-opentype"),url(fonts/ydoc.woff?v=1.0.0) format("woff"),url(fonts/ydoc.ttf?v=1.0.0) format("truetype"),url(source/fonts/ydoc.svg?v=1.0.0#icomoonregular) format("svg")}.ydoc{background:#fafafa;overflow:hidden;height:auto;min-height:100%;position:relative}.ydoc-header{line-height:.48rem;color:#3b3b3b;text-align:right;padding:0 .2rem;overflow:hidden;background-color:#252a31;background-image:-moz-linear-gradient(top,#333,#222);background-image:-ms-linear-gradient(top,#333,#222);background-image:-webkit-gradient(linear,0 0,0 100%,from(#333),to(#222));background-image:-webkit-linear-gradient(top,#333,#222);background-image:-o-linear-gradient(top,#333,#222);background-image:linear-gradient(top,#333,#222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);-webkit-box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(0,0,0,.1)}.ydoc-header a,.ydoc-nav{color:#fff}.ydoc-header-area{margin:0 auto}.ydoc .navbar-brand{width:auto;float:left;margin-right:20px;font-weight:700}.ydoc-nav .active,.ydoc-nav .active a,.ydoc-nav li a:hover{color:#ff503f}.ydoc-nav li a{padding:0 15px}.ydoc-nav .navbar-right{float:right}.ydoc-nav .navbar-left{float:left}.ydoc-second-header{background:#252a31}.ydoc-second-header a{color:#fff}.ydoc-second-header .ydoc-nav{float:right}.ydoc .task-list .checkbox{vertical-align:baseline;user-select:none}.ydoc .navbar-toggle{float:right;font-size:.22rem;display:none;background:0 0;border:none;cursor:pointer;color:#fff;line-height:.48rem}.ydoc .ydoc-banner-bg{background:url(images/grid-18px-masked.png) 0 top repeat-x;padding-bottom:121px}.ydoc .ydoc-banner-bg .desc{font-family:"微软雅黑"}.ydoc-banner{color:#fff;font-size:.18rem;padding:20px 30px}.ydoc-banner-area{margin:0 auto}.ydoc-banner-area h1{font-size:.28rem;margin-bottom:.1rem;color:#333}.ydoc-banner-area p{line-height:1.7;margin:0 0 10px;color:#333}.ydoc .footer{text-align:center;position:absolute;left:0;bottom:0;overflow:hidden;margin:0 auto;padding:40px 0 60px;width:100%;color:#fff;background:#252a31;font-size:14px}.ydoc .footer .copyright{font-size:14px;text-align:center;color:#a1a1a1}.ydoc .footer .copyright a{color:#a1a1a1;text-decoration:underline}.ydoc-container{clear:both;overflow:hidden}.ydoc-container-content{overflow:hidden;background-color:#fff;margin:20px auto;padding:24px 0 0;box-shadow:0 0 3px #e5e5e5;position:relative}.ydoc-container-content .static-code-content{width:100%;background:#fff;padding:.15rem}.ydoc-container-content .content-left,.ydoc-container-content .content-right{float:left;position:relative;min-height:1px}.ydoc-container-content .content-right{box-sizing:border-box;width:75%;background:#fff;padding:15px;float:right;min-height:500px}.ydoc-container-content .hashlink{display:none}.ydoc-container-content .subject:hover .hashlink{display:inline}.ydoc-container-content .right{float:right}.ydoc-container-content .content-left{width:25%}.ydoc-container-content .docs-table del{text-decoration:line-through;color:#999}.ydoc-container-content .ydoc-example{position:relative;overflow:hidden;height:auto}.ydoc-container-content .ydoc-example code{overflow-y:hidden;display:block;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace}.ydoc-container-content .ydoc-example .extend,.ydoc-container-content .ydoc-example .fold{color:#337ab7;position:absolute;left:15px;bottom:10px;cursor:pointer}.ydoc-container-content .ydoc-example .extend:hover,.ydoc-container-content .ydoc-example .fold:hover{text-decoration:underline}.ydoc-container-content .docs-sidebar{background:#fff;z-index:9999;overflow:hidden}.ydoc-container-content .docs-sidebar .docs-sidenav{padding-left:0;overflow-x:hidden}.ydoc-container-content .docs-sidebar .docs-sidenav li{line-height:.42rem;height:.42rem;font-size:14px;overflow:hidden}.ydoc-container-content .docs-sidebar .docs-sidenav li a{padding:0 .16rem 0 .28rem;border-left:2px solid #fff;text-overflow:ellipsis;color:#666;line-height:.42rem;height:.42rem;display:inline-block;width:100%;position:relative;overflow:hidden;white-space:nowrap}.ydoc-container-content .docs-sidebar .docs-sidenav li a:hover{background-color:#fff8ef;border-left-color:#fff8ef}.ydoc-container-content .docs-sidebar .docs-sidenav li.active a,.ydoc-container-content .docs-sidebar .docs-sidenav li.active a:hover{border-left:2px solid #ff503f;color:#ff503f}.ydoc-container-content .docs-sidebar .docs-sidenav ul{width:100%}.ydoc-container-content .docs-sidebar .docs-sidenav ul li,.ydoc-container-content .docs-sidebar .docs-sidenav ul li.active{font-size:.12rem}.ydoc-container-content .docs-sidebar .docs-sidenav ul li a,.ydoc-container-content .docs-sidebar .docs-sidenav ul li a:hover,.ydoc-container-content .docs-sidebar .docs-sidenav ul li.active a,.ydoc-container-content .docs-sidebar .docs-sidenav ul li.active a:hover{padding-left:48px}.ydoc-container-content .docs-sidebar.affix{position:fixed;top:20px}.ydoc-container-content .docs-sidebar.affix-bottom{position:absolute}.ydoc-container-content .docs-section{margin:10px}.ydoc-container .docs-sidebar:before{height:100%;background-color:#eee;width:1px;position:absolute;right:0;display:block;min-height:500px;z-index:99;content:" ";box-sizing:border-box}.open-panel{display:none;overflow:hidden;position:fixed;right:5%;bottom:50px;opacity:.5;width:40px;height:40px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2lpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpEMzJFMTVDOUNCMTQxMUU2OERGOEZGOEM1MkU1MUJENCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQThGQTIzRENEQTUxMUU2QTczMUM3QjRDM0UxNjQxMiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQThGQTIzQ0NEQTUxMUU2QTczMUM3QjRDM0UxNjQxMiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODZjMjliOTEtNjI0Zi1iZDQ3LWEzZWQtMDIwYzQwNDQxMjlkIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQzMkUxNUM5Q0IxNDExRTY4REY4RkY4QzUyRTUxQkQ0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+g3TxwAAAANRJREFUeNrsmT0KwkAQhWfXNGLhQewUW08i2FlZ7LZeQMRiC0EQwcvYixcRrbRc35DYaJNGdpD34EsRUnzs/AQSF0IQpAN2YAq6wEmZZPAABxD1RtVwAQMpHz2YHtBTm4Cxx2VrRO4zQ7BSwZnYzdw3PWc1fS+246wLCgX/XrBq81BK6SdvlhhjZolNlLhNKTjFFOQe5B7kHuQUU5B7kHuQe5BTTEEKUvArWQWfhgVvKng0LLhXwQU4G5Q7geW7B0dgA+5S/woo1nPgCtZSf+WXlwADAGEgKNreXHUxAAAAAElFTkSuQmCC) no-repeat}@media screen and (min-width:1200px){.ydoc-banner-area,.ydoc-container-content,.ydoc-header-area{width:1200px}}@media screen and (min-width:992px) and (max-width:1199px){.ydoc-banner-area,.ydoc-container-content,.ydoc-header-area{width:992px}}@media screen and (min-width:768px) and (max-width:991px){.ydoc-banner-area,.ydoc-container-content,.ydoc-header-area{width:768px}}@media screen and (max-width:767px){.mask,.ydoc-container-content .content-left{position:fixed;top:0;transition:all .4s;height:100%}.mask,.ydoc{height:100%}.mask{display:none;left:0;z-index:0;width:100%;background-color:transparent}.show{background-color:rgba(0,0,0,.35)}.ydoc-container-content .content-right{width:100%!important}.ydoc-container-content .content-left{display:block;right:-75%;width:75%!important;background-color:#222;z-index:1;-webkit-transition:all .4s}.ydoc .footer,.ydoc-container-content .docs-sidebar.affix{position:static}.ydoc-container-content .content-left:before{content:'目录：';display:block;padding:.28rem;color:#999;background-color:#2c2c2c;font-weight:700}.ydoc-container-content .docs-sidebar,.ydoc-container-content .docs-sidebar .docs-sidenav li a:hover{background-color:#222}.ydoc-container-content .docs-sidebar .docs-sidenav li a{color:#999;border-color:#222}.ydoc-container-content .instructions-con-runner{display:none}.open-panel{display:block;cursor:default;transition:all .4s;-webkit-transition:all .4s}.ydoc-banner-area,.ydoc-container-content,.ydoc-header-area{width:100%}.ydoc{overflow:scroll;-webkit-overflow-scrolling:touch}.ydoc .navbar-toggle{display:inline-block}.ydoc .ydoc-nav{display:none;clear:both;width:100%}.ydoc .ydoc-nav .navbar-left,.ydoc .ydoc-nav .navbar-right{width:100%}.ydoc .ydoc-nav .navbar-left li,.ydoc .ydoc-nav .navbar-right li{width:100%;text-align:left;display:inline-block}.ydoc .ydoc-nav .navbar-left li a,.ydoc .ydoc-nav .navbar-right li a{padding:0;width:100%;display:inline-block}.ydoc .ydoc-nav .navbar-left li a:hover,.ydoc .ydoc-nav .navbar-right li a:hover{color:#ff503f}.ydoc .ydoc-banner-bg{padding-bottom:0}.off-webkit-scroll{-webkit-overflow-scrolling:auto}.hidden{overflow:hidden}.ydoc-second-header,.ydoc-second-header .ydoc-nav{display:block}.ydoc-second-header .ydoc-nav li{float:left}}.anchorjs-link{display:none}@media screen and (min-width:768px){.ydoc-container-content .staticsidenav .docs-sidebar.affix{position:static}.ydoc-container-content .staticsidenav .docs-sidebar .docs-sidenav{overflow:inherit}.staticsidenav .docs-sidebar{overflow:initial}}.markdown-body code{color:#c7254e;background-color:#f9f2f4;font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{display:block;margin:0 0 10px;word-break:break-all;color:#333;background-color:#fafafa;border:1px solid #ccc}.markdown-body::after,.markdown-body::before{display:table;content:""}.markdown-body pre code{font-size:inherit;color:inherit;white-space:pre-wrap;border-radius:0}.markdown-body em{font-style:italic}.markdown-body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:14px;line-height:1.5;word-wrap:break-word}.markdown-body a{color:#337ab7}.markdown-body::after{clear:both}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:#c00}.markdown-body .anchor{float:left;padding-right:4px;margin-left:-20px;line-height:1}.markdown-body blockquote,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body hr{height:.25em;padding:0;margin:24px 0;background-color:#e7e7e7;border:0}.markdown-body blockquote{padding:0 1em;color:#777;border-left:.25em solid #ddd}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eee}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body .loweralpha{list-style-type:lower-alpha}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:#000;vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body h1 code,.markdown-body h1 tt,.markdown-body h2 code,.markdown-body h2 tt,.markdown-body h3 code,.markdown-body h3 tt,.markdown-body h4 code,.markdown-body h4 tt,.markdown-body h5 code,.markdown-body h5 tt,.markdown-body h6 code,.markdown-body h6 tt{font-size:inherit}.markdown-body h1{font-size:2em}.markdown-body h2{font-size:1.5em}.markdown-body h3{font-size:1.25em}.markdown-body h4{font-size:1.15em}.markdown-body h5{font-size:.875em}.markdown-body h6{font-size:.85em;color:#777}.markdown-body ol,.markdown-body ul{padding-left:2em;list-style-type:disc}.markdown-body ol.no-list,.markdown-body ul.no-list{padding:0;list-style-type:none}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body li>p{margin-top:16px}.markdown-body li+li{margin-top:.25em}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}.markdown-body table{display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}.markdown-body table th{font-weight:700}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #ddd}.markdown-body table tr{background-color:#fff;border-top:1px solid #ccc}.markdown-body table tr:nth-child(2n){background-color:#f8f8f8}.markdown-body img{max-width:100%;box-sizing:content-box;background-color:#fff}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body .emoji{max-width:none;vertical-align:text-top;background-color:transparent}.markdown-body span.frame{display:block;overflow:hidden}.markdown-body span.frame>span{display:block;float:left;width:auto;padding:7px;margin:13px 0 0;overflow:hidden;border:1px solid #ddd}.markdown-body span.frame span img{display:block;float:left}.markdown-body span.frame span span{display:block;padding:5px 0 0;clear:both;color:#333}.markdown-body span.align-center{display:block;overflow:hidden;clear:both}.markdown-body span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}.markdown-body span.align-center span img{margin:0 auto;text-align:center}.markdown-body span.align-right{display:block;overflow:hidden;clear:both}.markdown-body span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}.markdown-body span.align-right span img{margin:0;text-align:right}.markdown-body span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}.markdown-body span.float-left span{margin:13px 0 0}.markdown-body span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}.markdown-body span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}.markdown-body code,.markdown-body tt{padding:.2em 0;margin:0;font-size:85%;background-color:rgba(0,0,0,.04);border-radius:3px}.markdown-body code:after,.markdown-body code:before,.markdown-body tt:after,.markdown-body tt:before{letter-spacing:-.2em;content:"\00a0"}.markdown-body code br,.markdown-body tt br{display:none}.markdown-body del code{text-decoration:inherit}.markdown-body pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:0 0;border:0}.markdown-body .highlight{margin-bottom:16px}.markdown-body .highlight pre,.markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;border-radius:3px}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body pre{word-wrap:normal}.markdown-body pre code,.markdown-body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.glyphicon,.markdown-body kbd,.yo-badge{display:inline-block}.markdown-body pre code:after,.markdown-body pre code:before,.markdown-body pre tt:after,.markdown-body pre tt:before{content:normal}.markdown-body kbd{padding:3px 5px;font-size:11px;line-height:10px;color:#555;vertical-align:middle;background-color:#fcfcfc;border:1px solid #ccc;border-bottom-color:#bbb;border-radius:3px;box-shadow:inset 0 -1px 0 #bbb}#readme.contributing>div{max-height:250px;overflow:auto}#readme .markdown-body,#readme .plain{background-color:#fff;border:1px solid #ddd;border-bottom-left-radius:3px;border-bottom-right-radius:3px;padding:30px;word-wrap:break-word}#readme .plain pre{font-size:15px;white-space:pre-wrap}#readme .markdown-body{border:0;padding:30px;border-radius:0}#readme table[data-table-type=yaml-metadata]{line-height:1;font-size:12px}#readme table[data-table-type=yaml-metadata] table{margin:0}.yo-badge{padding:1px .1rem;color:#fff;font-size:.12rem;margin-left:10px;border-radius:12px;font-weight:400}.yo-badge-primary{color:#337ab7;border:1px solid #337ab7}.yo-badge-success{color:#5cb85c;border:1px solid #5cb85c}.yo-badge-info{color:#5bc0de;border:1px solid #5bc0de}.yo-badge-warning{color:#f0ad4e;border:1px solid #f0ad4e}.yo-badge-danger{color:#d9534f;border:1px solid #d9534f}.glyphicon{position:relative;top:1px;font-family:ydocfont;font-style:normal;font-weight:700;font-size:.2rem;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glyphicon-ok:before{content:"\f078"}.text-success{color:#3c763d}.release-date{font-size:1em;color:grey}.change-type{font-size:1em;color:#ff503f}.markdown-body blockquote.api{border-left:none;padding:0;color:#ff503f}.markdown-body .docs-section h1,.markdown-body .docs-section h2{border-bottom:none}.markdown-body .docs-section li .ydoc-example{left:-2em}.markdown-body .docs-section .blockquote.api{padding:0 0 .15rem}.markdown-body .docs-section h3{color:#ff503f;border-left-color:#ff503f;font-weight:400}.markdown-body .docs-section h3 a{color:#ff503f}.markdown-body .docs-section .con-list-item .con-head{font-size:22px;font-weight:700;border-bottom:1px solid #ddd;margin:0 0 .2rem;padding:.1rem 0;width:100%}.markdown-body .docs-section .con-list-item .prop-type{font-size:14px}.markdown-body .docs-section .con-list-item:last-child{border:none}.markdown-body .docs-section .hide-params{display:none}.markdown-body .docs-section .show-params{display:table-row}.markdown-body .docs-section .extend-params,.markdown-body .docs-section .fold-params{color:#337ab7;margin:-.1rem 0 .15rem;display:block;cursor:pointer}.instructions{margin-bottom:.2rem;overflow:hidden}.instructions-con{display:flex;flex-direction:row}.instructions-con-info{flex:1;overflow:hidden;padding-right:10px}.instructions-con-runner{width:3.2rem;height:6.5rem;padding:0 .16rem;background:url(images/feed.png) no-repeat;background-size:100%;position:relative}.instructions-con-runner .instructions-iframe{background:#fff;width:2.9rem;height:5.1rem;position:absolute;top:.66rem;left:.18rem;border:0} \ No newline at end of file diff --git a/docs/source/main.js b/docs/source/main.js new file mode 100644 index 0000000..6c4dbac --- /dev/null +++ b/docs/source/main.js @@ -0,0 +1,6 @@ +function AnchorJS(e){"use strict";this.options=e||{},this._applyRemainingDefaultOptions=function(e){this.options.icon=this.options.hasOwnProperty("icon")?e.icon:"",this.options.visible=this.options.hasOwnProperty("visible")?e.visible:"hover",this.options.placement=this.options.hasOwnProperty("placement")?e.placement:"right",this.options.class=this.options.hasOwnProperty("class")?e.class:""},this._applyRemainingDefaultOptions(e),this.add=function(e){var t,n,i,o,r,s,a,l,c,u,d,f,p,h;if(this._applyRemainingDefaultOptions(this.options),e){if("string"!=typeof e)throw new Error("The selector provided to AnchorJS was invalid.")}else e="h1, h2, h3, h4, h5, h6";if(t=document.querySelectorAll(e),0===t.length)return!1;for(this._addBaselineStyles(),n=document.querySelectorAll("[id]"),i=[].map.call(n,function(e){return e.id}),r=0;r',p=document.createElement("div"),p.innerHTML=f,h=p.childNodes,"always"===this.options.visible&&(h[0].style.opacity="1"),""===this.options.icon&&(h[0].style.fontFamily="anchorjs-icons",h[0].style.fontStyle="normal",h[0].style.fontVariant="normal",h[0].style.fontWeight="normal"),"left"===this.options.placement?(h[0].style.position="absolute",h[0].style.marginLeft="-1em",h[0].style.paddingRight="0.5em",t[r].insertBefore(h[0],t[r].firstChild)):(h[0].style.paddingLeft="0.375em",t[r].appendChild(h[0]))}return this},this.remove=function(e){for(var t,n=document.querySelectorAll(e),i=0;i0&&t-1 in e))}function i(e,t,n){if(oe.isFunction(t))return oe.grep(e,function(e,i){return!!t.call(e,i,e)!==n});if(t.nodeType)return oe.grep(e,function(e){return e===t!==n});if("string"==typeof t){if(fe.test(t))return oe.filter(t,e,n);t=oe.filter(t,e)}return oe.grep(e,function(e){return oe.inArray(e,t)>=0!==n})}function o(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}function r(e){var t=Ae[e]={};return oe.each(e.match(be)||[],function(e,n){t[n]=!0}),t}function s(){he.addEventListener?(he.removeEventListener("DOMContentLoaded",a,!1),e.removeEventListener("load",a,!1)):(he.detachEvent("onreadystatechange",a),e.detachEvent("onload",a))}function a(){(he.addEventListener||"load"===event.type||"complete"===he.readyState)&&(s(),oe.ready())}function l(e,t,n){if(void 0===n&&1===e.nodeType){var i="data-"+t.replace(Ee,"-$1").toLowerCase();if(n=e.getAttribute(i),"string"==typeof n){try{n="true"===n||"false"!==n&&("null"===n?null:+n+""===n?+n:Te.test(n)?oe.parseJSON(n):n)}catch(e){}oe.data(e,t,n)}else n=void 0}return n}function c(e){var t;for(t in e)if(("data"!==t||!oe.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}function u(e,t,n,i){if(oe.acceptData(e)){var o,r,s=oe.expando,a=e.nodeType,l=a?oe.cache:e,c=a?e[s]:e[s]&&s;if(c&&l[c]&&(i||l[c].data)||void 0!==n||"string"!=typeof t)return c||(c=a?e[s]=X.pop()||oe.guid++:s),l[c]||(l[c]=a?{}:{toJSON:oe.noop}),("object"==typeof t||"function"==typeof t)&&(i?l[c]=oe.extend(l[c],t):l[c].data=oe.extend(l[c].data,t)),r=l[c],i||(r.data||(r.data={}),r=r.data),void 0!==n&&(r[oe.camelCase(t)]=n),"string"==typeof t?(o=r[t],null==o&&(o=r[oe.camelCase(t)])):o=r,o}}function d(e,t,n){if(oe.acceptData(e)){var i,o,r=e.nodeType,s=r?oe.cache:e,a=r?e[oe.expando]:oe.expando;if(s[a]){if(t&&(i=n?s[a]:s[a].data)){oe.isArray(t)?t=t.concat(oe.map(t,oe.camelCase)):t in i?t=[t]:(t=oe.camelCase(t),t=t in i?[t]:t.split(" ")),o=t.length;for(;o--;)delete i[t[o]];if(n?!c(i):!oe.isEmptyObject(i))return}(n||(delete s[a].data,c(s[a])))&&(r?oe.cleanData([e],!0):ne.deleteExpando||s!=s.window?delete s[a]:s[a]=null)}}}function f(){return!0}function p(){return!1}function h(){try{return he.activeElement}catch(e){}}function g(e){var t=Re.split("|"),n=e.createDocumentFragment();if(n.createElement)for(;t.length;)n.createElement(t.pop());return n}function m(e,t){var n,i,o=0,r=typeof e.getElementsByTagName!==Ce?e.getElementsByTagName(t||"*"):typeof e.querySelectorAll!==Ce?e.querySelectorAll(t||"*"):void 0;if(!r)for(r=[],n=e.childNodes||e;null!=(i=n[o]);o++)!t||oe.nodeName(i,t)?r.push(i):oe.merge(r,m(i,t));return void 0===t||t&&oe.nodeName(e,t)?oe.merge([e],r):r}function v(e){$e.test(e.type)&&(e.defaultChecked=e.checked)}function y(e,t){return oe.nodeName(e,"table")&&oe.nodeName(11!==t.nodeType?t:t.firstChild,"tr")?e.getElementsByTagName("tbody")[0]||e.appendChild(e.ownerDocument.createElement("tbody")):e}function b(e){return e.type=(null!==oe.find.attr(e,"type"))+"/"+e.type,e}function A(e){var t=Ge.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function x(e,t){for(var n,i=0;null!=(n=e[i]);i++)oe._data(n,"globalEval",!t||oe._data(t[i],"globalEval"))}function w(e,t){if(1===t.nodeType&&oe.hasData(e)){var n,i,o,r=oe._data(e),s=oe._data(t,r),a=r.events;if(a){delete s.handle,s.events={};for(n in a)for(i=0,o=a[n].length;o>i;i++)oe.event.add(t,n,a[n][i])}s.data&&(s.data=oe.extend({},s.data))}}function C(e,t){var n,i,o;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!ne.noCloneEvent&&t[oe.expando]){o=oe._data(t);for(i in o.events)oe.removeEvent(t,i,o.handle);t.removeAttribute(oe.expando)}"script"===n&&t.text!==e.text?(b(t).text=e.text,A(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),ne.html5Clone&&e.innerHTML&&!oe.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&$e.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}function T(t,n){var i,o=oe(n.createElement(t)).appendTo(n.body),r=e.getDefaultComputedStyle&&(i=e.getDefaultComputedStyle(o[0]))?i.display:oe.css(o[0],"display");return o.detach(),r}function E(e){var t=he,n=Ke[e];return n||(n=T(e,t),"none"!==n&&n||(Je=(Je||oe("