diff --git a/.eslintrc b/.eslintrc index 443334d..177068a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -7,6 +7,9 @@ "es6": true, "jest": true }, + "globals": { + "__DEV__": true + }, "rules": { "global-require": [1], "max-len": [1, { "code": 150 }], diff --git a/components/common/UIComponent.js b/components/common/UIComponent.js index 79cfe4a..4014f97 100644 --- a/components/common/UIComponent.js +++ b/components/common/UIComponent.js @@ -152,7 +152,6 @@ export default class UIComponent extends Component { * 更新this.style，若有必要子类可调用该方法刷新style */ updateStyle(nextProps) { - // console.log(this.constructor.name + ': updateStyle') this.style = this._getStyle(nextProps); return this.style; } diff --git a/components/ui/AnimateModal/index.js b/components/ui/AnimateModal/index.js index bb40384..9aace02 100644 --- a/components/ui/AnimateModal/index.js +++ b/components/ui/AnimateModal/index.js @@ -27,7 +27,11 @@ export default class AnimateModal extends UIComponent { animateWhenMount: false, springEffect: false, onClose: () => { }, - onAnimationEnd: (visible) => { console.log(visible); }, + onAnimationEnd: (visible) => { + if (__DEV__) { + console.log(visible); + } + }, } static propTypes = { // 是否可见 diff --git a/components/ui/Calendar/Header.js b/components/ui/Calendar/Header.js index 71a9896..07ed76f 100644 --- a/components/ui/Calendar/Header.js +++ b/components/ui/Calendar/Header.js @@ -139,7 +139,6 @@ export default class Header extends Component { const yearLabel = `${year}年`; const monthValue = month < 10 ? `0${month}` : month; const monthLabel = `${month + 1}月`; - // console.log('月： ' + monthLabel); data.push({ value: `${year}${monthValue}`, label: `${yearLabel}${monthLabel}` }); start = new Date(year, month + 1); } @@ -160,10 +159,10 @@ export default class Header extends Component { Popup.hide(); }} />, { - title: false, - location: 'bottom', - aniFrom: 'bottom', - }); + title: false, + location: 'bottom', + aniFrom: 'bottom', + }); } // 年选择的形式 @@ -193,10 +192,10 @@ export default class Header extends Component { Popup.hide(); }} />, { - title: false, - location: 'bottom', - aniFrom: 'bottom', - }); + title: false, + location: 'bottom', + aniFrom: 'bottom', + }); } @@ -244,11 +243,11 @@ export default class Header extends Component { {year}年{months[month]} ) : ( - - - {year}年{months[month]} - - + + + {year}年{months[month]} + + ) } diff --git a/components/ui/Carousel/index.js b/components/ui/Carousel/index.js index b65b09b..4004467 100644 --- a/components/ui/Carousel/index.js +++ b/components/ui/Carousel/index.js @@ -38,8 +38,17 @@ export default class Carousel extends UIComponent { showArrows: false, leftArrow: '<', rightArrow: '>', - onShouldChange: (prePage, nextPage) => { console.log(prePage, nextPage); return true; }, - onChange: (curPage) => { console.log(curPage); }, + onShouldChange: (prePage, nextPage) => { + if (__DEV__) { + console.log(prePage, nextPage); + } + return true; + }, + onChange: (curPage) => { + if (__DEV__) { + console.log(curPage); + } + }, onScrollBeginDrag: () => { }, } @@ -130,7 +139,7 @@ export default class Carousel extends UIComponent { componentWillReceiveProps(nextProps) { super.componentWillReceiveProps(nextProps); this._updateChildrenCount(nextProps); - this._updateActualLoadPageCount(this.props); + this._updateActualLoadPageCount(nextProps); this._updateLoadPageRegion(nextProps, this.state.curPage); this._setTimerIfNeed(nextProps, this.state.curPage); } @@ -203,7 +212,13 @@ export default class Carousel extends UIComponent { if (childrenType === 'image') { childrenCount = source.length; } else { - childrenCount = children.length; + if (Array.isArray(children)) { + childrenCount = children.length; + } else if (React.isValidElement(children)) { + childrenCount = 1 + } else { + childrenCount = 0; + } } return childrenCount; } @@ -304,13 +319,15 @@ export default class Carousel extends UIComponent { endPage = startPage + actualLoadPageCount - 1; } } else { - console.log(`不支持的mode:${mode}`); + console.warn(`不支持的mode:${mode}`); } - this.setState({ - startPage, - endPage, - }); } + this.setState({ + startPage, + endPage, + }, () => { + this._placeCritical(curPage, startPage); + }); this._hasUpdatedDisplayRegion = true; } @@ -352,7 +369,7 @@ export default class Carousel extends UIComponent { const childrenCount = this._childrenCount; const actualLoadPageCount = this._actualLoadPageCount; if (targetPage >= childrenCount) { - console.log(`目标页超出显示范围！！${targetPage}`); + console.warn(`目标页超出显示范围！！${targetPage}`); return; } @@ -367,6 +384,11 @@ export default class Carousel extends UIComponent { this._clearTimer(); } + if (childrenCount < 2) { + return; + } + + if (mode === 'all') { let actualTargetPage = targetPage; if (infinite) { @@ -460,15 +482,14 @@ export default class Carousel extends UIComponent { * 通过偏移量计算当前页 */ _calculateCurrentPage = (offset) => { - const { direction, size } = this.props; - const { curPage, startPage } = this.state; - const { width, height } = size; - const denominator = direction === 'horizontal' ? width : height; - const result = offset / denominator; - const nextPage = (result % 1) >= 0.5 ? Math.ceil(result) : Math.floor(result); - const diff = nextPage + startPage - this._prePage; - const newCurPage = curPage + diff; - return this._getFixedPageIdx(newCurPage); + const { curPage } = this.state; + let newCurPage = curPage; + if (this._beginOffset > offset && this._beginOffset - offset > windowWidth / 3) { + newCurPage -= 1; + } else if (this._beginOffset < offset && offset - this._beginOffset > windowWidth / 3) { + newCurPage += 1; + } + return newCurPage; } /** @@ -516,19 +537,42 @@ export default class Carousel extends UIComponent { /** * scrollview事件回调 */ - _onScrollBeginDrag = () => { + _onScrollBeginDrag = (event) => { + const { direction } = this.props; + const { contentOffset } = event.nativeEvent; + this._beginOffset = direction === 'horizontal' ? contentOffset.x : contentOffset.y; this._clearTimer(); this.props.onScrollBeginDrag(); this._prePage = this.state.curPage; } _onScrollEndDrag = (event) => { - const { direction } = this.props; + const { direction, infinite } = this.props; + const { curPage } = this.state; const { contentOffset } = event.nativeEvent; - const offset = direction === 'horizontal' ? contentOffset.x : contentOffset.y; - const page = this._calculateCurrentPage(offset); - this._setTimerIfNeed(this.props, this.state.curPage); - this._changeToPage(page, false); + let newCurPage = curPage; + if (event.nativeEvent) { + const { velocity } = event.nativeEvent; + const { x: vX } = velocity; + if (Math.abs(vX) > 0.1) { + if (vX > 0) { + newCurPage = curPage + 1; + } else { + newCurPage = curPage - 1; + } + } else { + const offset = direction === 'horizontal' ? contentOffset.x : contentOffset.y; + newCurPage = this._calculateCurrentPage(offset); + } + } + if (!infinite && + ((curPage === this._childrenCount - 1 && newCurPage > curPage) || + (curPage === 0 && newCurPage < 0))) { + return; + } + const fixedPage = this._getFixedPageIdx(newCurPage); + this._setTimerIfNeed(this.props, fixedPage); + this._changeToPage(fixedPage, false); } /** @@ -606,21 +650,23 @@ export default class Carousel extends UIComponent { const sourceEl = source[fixedIdx]; if (typeof sourceEl === 'number') { page = ( - + ); } else { page = ( - + ); } } else { - page = children[fixedIdx]; + if (Array.isArray(children)) { + page = children[fixedIdx]; + } else { + page = children; + } } } else { page = ( - - 您未添加任何轮播内容 - + ); } let key = `page${fixedIdx + 100}`; @@ -716,7 +762,7 @@ export default class Carousel extends UIComponent { const { style } = this; const { curPage } = this.state; - const { leftArrow } = this.props; + const { leftArrow, infinite } = this.props; const isText = typeof leftArrow === 'string'; const leftArrowView = isText ? ( @@ -726,11 +772,16 @@ export default class Carousel extends UIComponent { this._changeToPage(this._getFixedPageIdx(curPage - 1), true, false)} + onPress={() => { + if (!infinite && curPage === 0) { + return; + } + this._changeToPage(this._getFixedPageIdx(curPage - 1), true, false); + }} > {leftArrowView} - + ); } @@ -739,9 +790,9 @@ export default class Carousel extends UIComponent { const { style } = this; const { curPage } = this.state; - const { rightArrow } = this.props; + const { rightArrow, infinite } = this.props; - const isText = typeof leftArrow === 'string'; + const isText = typeof rightArrow === 'string'; const rightArrowView = isText ? ( {rightArrow} ) : rightArrow; @@ -750,11 +801,16 @@ export default class Carousel extends UIComponent { this._changeToPage(this._getFixedPageIdx(curPage + 1), true, true)} + onPress={() => { + if (!infinite && curPage === childrenCount - 1) { + return; + } + this._changeToPage(this._getFixedPageIdx(curPage + 1), true, true); + }} > {rightArrowView} - + ); } @@ -780,13 +836,6 @@ export default class Carousel extends UIComponent { } Carousel.baseStyle = { - noChild: { - width: windowWidth, - height: 100, - backgroundColor: '#fff', - justifyContent: 'center', - alignItems: 'center', - }, // 容器 container: {}, // 指示点 diff --git a/components/ui/Dialog/TipAgent.js b/components/ui/Dialog/TipAgent.js index c080dd9..39bf088 100644 --- a/components/ui/Dialog/TipAgent.js +++ b/components/ui/Dialog/TipAgent.js @@ -31,7 +31,9 @@ export default class TipAgent extends UIComponent { } render() { const { style } = this; - const { title, actions, onAnimationEnd } = this.props; + const { + title, actions, onAnimationEnd, type, + } = this.props; const setAniEndFn = (endFn) => { this.endFn = endFn; }; @@ -66,6 +68,7 @@ export default class TipAgent extends UIComponent { return ( this.close} footer={footer} diff --git a/components/ui/Dialog/index.js b/components/ui/Dialog/index.js index 4893904..717cb1e 100644 --- a/components/ui/Dialog/index.js +++ b/components/ui/Dialog/index.js @@ -30,16 +30,15 @@ export default class Dialog extends UIComponent { closable: false, maskClosable: false, animationType: 'fade', - onClose() { }, footer: [], fullScreen: false, - animateAppear: true, - operation: false, - underlayColor: '#EEE', - styleBtnMap: { - no: { color: '#666' }, - yes: { color: '#337ab7' }, + animateWhenMount: true, + btnUnderlayColor: '#EEE', + footerBtnStyleMap: { + cancel: { color: '#666' }, + confirm: { color: '#337ab7' }, }, + onClose: () => { }, } static propTypes = { @@ -58,13 +57,11 @@ export default class Dialog extends UIComponent { // 是否全屏 fullScreen: PropTypes.bool, // 是否使用动画 - animateAppear: PropTypes.bool, - // 一个特殊的按钮状态 - operation: PropTypes.bool, + animateWhenMount: PropTypes.bool, // 按钮点击颜色 - underlayColor: PropTypes.string, + btnUnderlayColor: PropTypes.string, // 按钮类型 - styleBtnMap: PropTypes.objectOf(PropTypes.any), + footerBtnStyleMap: PropTypes.objectOf(PropTypes.any), } /** @@ -74,63 +71,55 @@ export default class Dialog extends UIComponent { static alert = alert static confirm = confirm static autoStyleSheet = false - root = null _maskClose = () => { if (this.props.maskClosable && this.props.onClose) { this.props.onClose(); } } - _footerLayout = (e) => { - if (this.root) { - this.root.setNativeProps({ - style: [{ paddingBottom: e.nativeEvent.layout.height }, maxHeight], - }); - } - } - - _saveRoot = (root) => { - this.root = root; - } - crtFullScreen(styles) { + render() { + const styles = this.style; const { - children, visible, animationType, + children, animateWhenMount, fullScreen, visible, onAnimationEnd, animationType, animationDuration, } = this.props; - let aniType = animationType; - if (animationType === 'slide-up' || animationType === 'slide-down' || animationType === 'slide') { - aniType = 'slide'; + if (fullScreen) { + return this._createFullScreenDialog(styles); } + const headerEl = this._createHeader(styles); + const footerEl = this._createFooter(styles); + const closeEl = this._createClose(styles); return ( - - {children} + { this.root = ref; }}> + {headerEl} + {children} + {footerEl} + {closeEl} - + ); } - crtClose(styles) { - const { closable, onClose } = this.props; - return closable ? ( - - - - × - - - - ) : null; + _createHeader = (styles) => { + const { title } = this.props; + return title ? {title} : null; } - crtFooter(styles) { + + _createFooter = (styles) => { const { - footer, onClose, operation, underlayColor, styleBtnMap, + footer, onClose, btnUnderlayColor, footerBtnStyleMap, } = this.props; if (!footer || !footer.length) { return null; @@ -139,7 +128,7 @@ export default class Dialog extends UIComponent { const borderRadius = styles.innerContent.borderRadius || 10; let horizontalFlex = {}; let isHorizontal = false; - if (footer && footer.length === 2 && !operation) { + if (footer && footer.length === 2) { isHorizontal = true; btnGroupStyle = styles.buttonGroupH; horizontalFlex = { flex: 1 }; @@ -147,13 +136,10 @@ export default class Dialog extends UIComponent { const buttonWrapStyle = footer && footer.length === 2 ? styles.buttonWrapH : styles.buttonWrapV; const footerButtons = footer.map((button, i) => { let buttonStyle = {}; - if (operation) { - buttonStyle = styles.buttonTextOperation; - } if (button.style) { buttonStyle = button.style; if (typeof buttonStyle === 'string') { - buttonStyle = styleBtnMap[buttonStyle] || {}; + buttonStyle = footerBtnStyleMap[buttonStyle] || {}; } } const noneBorder = footer && footer.length === 2 && i === 1 ? { borderRightWidth: 0 } : {}; @@ -180,7 +166,7 @@ export default class Dialog extends UIComponent { borderBottomLeftRadius, borderBottomRightRadius: i === footer.length - 1 ? borderRadius : 0, }]} - underlayColor={underlayColor} + underlayColor={btnUnderlayColor} onPress={onPressFn} > @@ -190,43 +176,42 @@ export default class Dialog extends UIComponent { ); }); return ( - + {footerButtons} ); } - crtHeader(styles) { - const { title } = this.props; - return title ? {title} : null; + + _createClose = (styles) => { + const { closable, onClose } = this.props; + return closable ? ( + + + + × + + + + ) : null; } - render() { - const styles = this.style; + + _createFullScreenDialog = (styles) => { const { - children, animateAppear, fullScreen, visible, onAnimationEnd, animationType, animationDuration, + children, visible, animationType, } = this.props; - if (fullScreen) { - return this.crtFullScreen(styles); + let aniType = animationType; + if (animationType === 'slide-up' || animationType === 'slide-down' || animationType === 'slide') { + aniType = 'slide'; } - const headerEl = this.crtHeader(styles); - const footerEl = this.crtFooter(styles); - const closeEl = this.crtClose(styles); return ( - - {headerEl} - {children} - {footerEl} - {closeEl} + + {children} @@ -250,7 +235,6 @@ Dialog.baseStyle = { overflow: 'hidden', }, footer: { - position: 'absolute', bottom: 0, left: 0, right: 0, @@ -315,9 +299,4 @@ Dialog.baseStyle = { fontSize: 17, backgroundColor: 'transparent', }, - buttonTextOperation: { - color: '#333', - textAlign: 'left', - paddingHorizontal: 15, - }, }; diff --git a/components/ui/Dialog/tip.js b/components/ui/Dialog/tip.js index c1c2394..1c4071e 100644 --- a/components/ui/Dialog/tip.js +++ b/components/ui/Dialog/tip.js @@ -25,12 +25,13 @@ const onAnimationEnd = (visible) => { } }; -function creatTip(title, content, actions) { +function creatTip(title, content, actions, type) { actions = actions || defaultOption.alert.actions; AppContainer.add( { curTip = el; }} title={title} + type={type} content={content} actions={actions} onAnimationEnd={onAnimationEnd} @@ -43,7 +44,7 @@ function creatTip(title, content, actions) { * @param {String/Element} content * @param {Array} actions */ -function tip(title, content, actions) { +function tip(title, content, actions, type) { if (curTip) { curTip.close(() => { setTimeout(() => { @@ -54,7 +55,7 @@ function tip(title, content, actions) { }, 200); }); } else { - creatTip(title, content, actions); + creatTip(title, content, actions, type); } } @@ -67,7 +68,7 @@ function tip(title, content, actions) { * @param {String} title * @param {String/Element} content */ -function alert(title, content, callback) { +function alert(title, content, callback, type) { const opt = defaultOption.alert; const argLen = arguments.length; if (argLen === 1) { @@ -85,7 +86,7 @@ function alert(title, content, callback) { if (opt.actions[0]) { opt.actions[0].onPress = callback; } - tip(title, content, opt.actions); + tip(title, content, opt.actions, type); } /** * 确认 @@ -96,7 +97,7 @@ function alert(title, content, callback) { * @param {String} title * @param {String/Element} content */ -function confirm(title, content, callback) { +function confirm(title, content, callback, type) { const opt = defaultOption.confirm; const argLen = arguments.length; if (argLen === 1) { @@ -117,7 +118,7 @@ function confirm(title, content, callback) { if (opt.actions[1]) { opt.actions[1].onPress = callback; } - tip(title, content, opt.actions); + tip(title, content, opt.actions, type); } /** * TipAgent容器，可设置基础样式 diff --git a/components/ui/GesturePassword/Utils.js b/components/ui/GesturePassword/Utils.js index a0d3208..5929fb3 100644 --- a/components/ui/GesturePassword/Utils.js +++ b/components/ui/GesturePassword/Utils.js @@ -126,7 +126,7 @@ export function computerDistance(point1, point2, orgin) { // const C = x2 * y1 - x1 * y2; const distance = (Math.abs((y2 - y1) * x0 + (x1 - x2) * y0 + ((x2 * y1) - (x1 * y2)))) / - (Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x1 - x2, 2))); + (Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x1 - x2, 2))); return distance; } @@ -255,7 +255,6 @@ export function reSortArray(originArr, start, end) { } export function pointInMiddleLine(crossPoint, start, end) { - // console.log('======pointInMiddleLine======'); let result = false; if (start.x === end.x) { if ((crossPoint.y > start.y && crossPoint.y > end.y) || @@ -271,6 +270,5 @@ export function pointInMiddleLine(crossPoint, start, end) { } else { result = true; } - // console.log('======pointInMiddleLine======'); return result; } diff --git a/components/ui/GesturePassword/index.js b/components/ui/GesturePassword/index.js index 67358ca..d2e6bf4 100644 --- a/components/ui/GesturePassword/index.js +++ b/components/ui/GesturePassword/index.js @@ -365,7 +365,6 @@ export default class GesturePassword extends UIComponent { const distanse = Utils.computerDistance(line.start, end, tmpPoint.origin); if (distanse < this._pointRadius) { // 相交 - // console.log(tmpPoint.index); // 如果跟这个圆圈相交，则需要计算出线的交点 const crossPoints = Utils.getCircleLineIntersectionPoint(line.start, end, tmpPoint.origin, this._pointRadius); // 确保交叉点在起始点范围内 @@ -405,7 +404,6 @@ export default class GesturePassword extends UIComponent { segMentLines.push(segMentLine); } } - // console.log(segMentLines); return segMentLines; } @@ -591,8 +589,6 @@ export default class GesturePassword extends UIComponent { // 落点在已经激活的手势圆圈里 if (this._sequence.includes(point.index)) { if (this.props.isHideLine) { - // console.log('==000000000=='); - // console.log(point.origin); this._updateLine(this._currentPoint, point.origin, true, true, true); } else { this._updateLine(this._currentPoint, location); diff --git a/components/ui/Group/index.js b/components/ui/Group/index.js index f1de717..1b4923d 100644 --- a/components/ui/Group/index.js +++ b/components/ui/Group/index.js @@ -71,7 +71,9 @@ export default class Group extends UIComponent { render() { const { isSingle } = this.props; const { value } = this.state; - console.log(isSingle, value); + if (__DEV__) { + console.log(isSingle, value); + } return ( { React.Children.map( diff --git a/components/ui/Popup/README.md b/components/ui/Popup/README.md index 19fb00d..c4666ac 100644 --- a/components/ui/Popup/README.md +++ b/components/ui/Popup/README.md @@ -7,7 +7,8 @@ subTitle: 弹出层 ### 组件描述 - 从顶部或底部浮出的模态，提供标题和关闭按钮，展示和当前内容相关的信息或提供相关操作。 -提供基础的标题头，内容区则使用children指定。 +- 提供基础的标题头，内容区则使用children指定。 +- 如果使用api方式，其style设置与title设置同级即可 ### 示例代码 diff --git a/components/ui/Popup/index.js b/components/ui/Popup/index.js index 14d7e1b..2ed3eec 100644 --- a/components/ui/Popup/index.js +++ b/components/ui/Popup/index.js @@ -52,9 +52,9 @@ export default class Popup extends UIComponent { ]), iconFamily: PropTypes.string, // header左上角图标 - headerLeftIconName: React.PropTypes.string, + headerLeftIconName: PropTypes.string, // header右上角图标 - headerRightIconName: React.PropTypes.string, + headerRightIconName: PropTypes.string, // 头部左侧区，false为关闭，也可传入自定义元素，字符串 headerLeft: PropTypes.oneOfType([ PropTypes.node, diff --git a/components/ui/Slider/index.js b/components/ui/Slider/index.js index 6e08980..51652e9 100644 --- a/components/ui/Slider/index.js +++ b/components/ui/Slider/index.js @@ -361,7 +361,6 @@ export default class Slider extends UIComponent { _thumbHitTest = (e) => { const { nativeEvent } = e; const thumbTouchRect = this._getThumbTouchRect(); - // console.log('touch react: ', thumbTouchRect); return thumbTouchRect.containsPoint(nativeEvent.locationX, nativeEvent.locationY); } diff --git a/components/ui/Switch/index.js b/components/ui/Switch/index.js index c3b21ea..e8f21d3 100644 --- a/components/ui/Switch/index.js +++ b/components/ui/Switch/index.js @@ -113,7 +113,6 @@ export default class NPSwitch extends UIComponent { onPanResponderTerminationRequest: () => true, // 监视器被释放 onPanResponderRelease: () => { - // console.log("onPanResponderRelease"); this.setState({ pressed: false, }); @@ -126,7 +125,6 @@ export default class NPSwitch extends UIComponent { }, // 响应被终止 onPanResponderTerminate: () => { - // console.log("onPanResponderTerminate"); const currentPos = this.state.position._value; this.setState({ pressed: false, diff --git a/components/ui/Tabs/TabBar.js b/components/ui/Tabs/TabBar.js index 88bd372..eeae11b 100644 --- a/components/ui/Tabs/TabBar.js +++ b/components/ui/Tabs/TabBar.js @@ -9,16 +9,16 @@ import { StyleSheet, TouchableWithoutFeedback, } from 'react-native'; - +import merge from 'lodash/merge'; import { UIComponent } from 'common'; -const tabStyle = StyleSheet.create({ +const tabStyle = { underline: { position: 'absolute', height: 4, bottom: 0, }, -}); +}; export default class TabBar extends UIComponent { @@ -248,14 +248,26 @@ export default class TabBar extends UIComponent { itemWidth, } = this.state; + const finalLineStyle = merge({}, { + width: itemWidth, + left: this.state.left, + }, tabStyle.underline, ...activeUnderlineStyle); + + let { width } = finalLineStyle; + if (finalLineStyle.marginHorizontal) { + width -= 2 * finalLineStyle.marginHorizontal; + } else if (finalLineStyle.marginLeft) { + width -= finalLineStyle.marginLeft; + } else if (finalLineStyle.marginRight) { + width -= finalLineStyle.marginRight; + } + + finalLineStyle.width = width; + const contentView = ( {items.map(item => this._renderTabItem(item, activeIdx))} - {showUnderline ? : null} ); diff --git a/components/ui/ToastBase/ToastContainer.js b/components/ui/ToastBase/ToastContainer.js index 7e11a61..a7a4666 100644 --- a/components/ui/ToastBase/ToastContainer.js +++ b/components/ui/ToastBase/ToastContainer.js @@ -110,7 +110,6 @@ export default class ToastConatiner extends UIComponent { const { type = '', content, mask, modal, iconFamily, iconTypes, offsetY, loadingColor, } = this.props; - // console.log('mask: ', mask); let iconDom = null; let contentDom = content; if (type === 'loading') { diff --git a/components/util/Fetch/index.js b/components/util/Fetch/index.js index de5ba5e..de1f172 100644 --- a/components/util/Fetch/index.js +++ b/components/util/Fetch/index.js @@ -1,7 +1,6 @@ import Axios from 'axios'; export default class Fetch extends Axios { - static testCustom(params) { - console.log(params); + static testCustom() { } } diff --git a/demo/app/src/ui/Carousel/index.js b/demo/app/src/ui/Carousel/index.js index 7f3fd1e..5769fc2 100644 --- a/demo/app/src/ui/Carousel/index.js +++ b/demo/app/src/ui/Carousel/index.js @@ -1,9 +1,10 @@ -import React from 'react'; -import { ScrollView, Image, Text } from 'react-native'; -import { Carousel } from 'fego-rn'; +import React, { Component } from 'react'; +import { ScrollView, TouchableWithoutFeedback, Text, View, Image, Dimensions } from 'react-native'; +import { Carousel, Radio, Group } from 'fego-rn'; + +const { width } = Dimensions.get('window'); const imageArray = [ - 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=964384135,2680536306&fm=15&gp=0.jpg', require('./img/car1.png'), require('./img/car2.jpg'), require('./img/car3.jpg'), @@ -14,81 +15,200 @@ const imageArray = [ require('./img/girl.jpg'), ]; -const source0 = []; -const source1 = imageArray.slice(0, 1); -const source2 = imageArray.slice(0, 2); -const source3 = imageArray.slice(0, 3); -const source4 = imageArray.slice(0, 4); -const source5 = imageArray.slice(0, 5); -const source6 = imageArray.slice(0, 6); -const source7 = imageArray.slice(0, 7); -const source8 = imageArray.slice(0, 8); +export default class Page extends Component { + constructor(props) { + super(props); + this.state = { + pageCount: 4, + showDot: true, + showPagination: false, + showArrows: false, + autoPlay: true, + infinite: true, + childrenType: 'image', + }; + } + + _addPage = () => { + let pageCount = this.state.pageCount + 1; + if (pageCount > imageArray.length) { + pageCount = imageArray.length; + } + this.setState({ + pageCount, + }); + } + + _deletePage = () => { + let pageCount = this.state.pageCount - 1; + if (pageCount < 0) { + pageCount = 0; + } + this.setState({ + pageCount, + }); + } + + render() { + const { + autoPlay, infinite, showDot, showPagination, showArrows, childrenType, + } = this.state; + const source = imageArray.slice(0, this.state.pageCount); + + return ( + + 页面管理 + + + + + 加一张 + + + + + + 减一张 + + + + + + 属性管理 + + + + 子view类型 + + + { + this.setState({ + childrenType: value, + }); + }} + > + image + custom + + + + { + this.setState({ + autoPlay: checked, + }); + }} + >autoPlay + + { + this.setState({ + infinite: checked, + }); + }} + >infinite + + + + + { + this.setState({ + showDot: checked, + }); + }} + >showDot + + { + this.setState({ + showPagination: checked, + }); + }} + >showPagination + + + + + { + this.setState({ + showArrows: checked, + }); + }} + >showArrows + + -export default () => - ( - { - console.log('onMomentumScrollEnd'); - } - } - > - 空的轮播图 - - 只有一页的轮播图 - - 内容为两页的轮播图 - - 内容为三页的轮播图 - - 内容为四页的轮播图 - - 内容为五页的轮播图 - - 内容为六页的轮播图 - - 内容为七页的轮播图 - + + + - 内容为八页的轮播图 - + + ); + } +} - 水平播放的走马灯,自定义分页样式,rect指示器,显示自定义左右箭头↓ - } - source={source4} - styles={{ paginationContainer: { bottom: 20 } }} - /> - 垂直播放的走马灯,rect指示器,显示分页↓ - - - ); diff --git a/demo/app/src/ui/Dialog/index.js b/demo/app/src/ui/Dialog/index.js index 134d583..e93592f 100644 --- a/demo/app/src/ui/Dialog/index.js +++ b/demo/app/src/ui/Dialog/index.js @@ -23,8 +23,8 @@ export default class Page extends Component { visible={this.state.dialogVisible} onClose={() => this.setState({ dialogVisible: false })} footer={[ - { text: '取消', onPress: () => console.log('cancel'), style: 'no' }, - { text: '确定', onPress: () => console.log('ok'), style: 'yes' }, + { text: '取消', onPress: () => console.log('cancel'), style: 'cancel' }, + { text: '确定', onPress: () => console.log('ok'), style: 'confirm' }, ]} > @@ -38,10 +38,10 @@ export default class Page extends Component { visible={this.state.dialog2Visible} onClose={() => this.setState({ dialog2Visible: false })} footer={[ - { text: '按钮1', style: 'no' }, + { text: '按钮1', style: 'cancel' }, { text: '按钮2' }, { text: '按钮3' }, - { text: '按钮4', style: 'yes' }, + { text: '按钮4', style: 'confirm' }, ]} > @@ -68,7 +68,7 @@ export default class Page extends Component {