Skip to content
Permalink
Browse files

test fix

  • Loading branch information
n7best committed Apr 16, 2017
1 parent f3b28d6 commit 84f0d3c9a936445c32b1a64164d837e3f0fee6b1
@@ -77,7 +77,7 @@ See the [contributing guidelines](https://github.com/n7best/react-weui-1/blob/ma

![react-weui](./docs/qrcode.png)

[1.0.0 alpha](https://weui.github.io/react-weui)
[1.0.0](https://weui.github.io/react-weui)

[0.4.3 Demo](http://weui.github.io/react-weui/0.4.x/)

@@ -79,11 +79,7 @@ class PickerGroup extends Component {
}
}

this.setState({
selected: defaultIndex,
ogTranslate: translate,
totalHeight,
translate,
this.setState({ selected: defaultIndex, ogTranslate: translate, totalHeight, translate,
}, () => defaultIndex > -1 ? this.updateSelected(false) : this.updateSelected() );
}

@@ -65,7 +65,7 @@ class SearchBar extends React.Component {
constructor(props){
super(props);

this.state={
this.state = {
focus: this.props.defaultValue ? true : false,
clearing: false,
text: this.props.defaultValue ? this.props.defaultValue : ''
@@ -64,7 +64,7 @@ class Swiper extends Component {
};

constructor(props){
super(props)
super(props);

this.state = {
containerWidth: 0,
@@ -78,61 +78,61 @@ class Swiper extends Component {
touchId: undefined,
translate: 0,
animating: false
}
};

this.handleTouchStart = this.handleTouchStart.bind(this)
this.handleTouchMove = this.handleTouchMove.bind(this)
this.handleTouchEnd = this.handleTouchEnd.bind(this)
this.handleTouchStart = this.handleTouchStart.bind(this);
this.handleTouchMove = this.handleTouchMove.bind(this);
this.handleTouchEnd = this.handleTouchEnd.bind(this);
}

componentDidMount(){
let $container = ReactDOM.findDOMNode(this.refs.container)
let $container = ReactDOM.findDOMNode(this.refs.container);

this.setState({
wrapperWidth: this.props.direction == 'horizontal' ? $container.offsetWidth * this.props.children.length : $container.offsetWidth,
wrapperHeight: this.props.direction == 'vertical' ? $container.offsetHeight * this.props.children.length : $container.offsetHeight,
wrapperWidth: this.props.direction === 'horizontal' ? $container.offsetWidth * this.props.children.length : $container.offsetWidth,
wrapperHeight: this.props.direction === 'vertical' ? $container.offsetHeight * this.props.children.length : $container.offsetHeight,
containerWidth: $container.offsetWidth,
containerHeight: $container.offsetHeight,
translate: this.props.defaultIndex <= this.props.children.length ? this.props.direction == 'horizontal' ? $container.offsetWidth * -this.props.defaultIndex : $container.offsetHeight * -this.props.defaultIndex : 0
})
translate: this.props.defaultIndex <= this.props.children.length ? this.props.direction === 'horizontal' ? $container.offsetWidth * -this.props.defaultIndex : $container.offsetHeight * -this.props.defaultIndex : 0
});
//console.log($container.offsetWidth, $container.offsetHeight)
}

handleTouchStart(e){
if(this.state.touching || this.props.children.length <= 1) return;
if (this.state.touching || this.props.children.length <= 1) return;

let og = 0
let og = 0;

if(this.props.direction == 'horizontal'){
og = e.targetTouches[0].pageX - this.state.translate
}else{
og = e.targetTouches[0].pageY - this.state.translate
if (this.props.direction === 'horizontal'){
og = e.targetTouches[0].pageX - this.state.translate;
} else {
og = e.targetTouches[0].pageY - this.state.translate;
}

this.setState({
touching: true,
ogTranslate: this.state.translate,
touchId : e.targetTouches[0].identifier,
touchId: e.targetTouches[0].identifier,
og: og,
animating: false
})
});

}

handleTouchMove(e){
if(!this.state.touching || this.props.children.length <= 1) return;
if(e.targetTouches[0].identifier !== this.state.touchId) return;
if (!this.state.touching || this.props.children.length <= 1) return;
if (e.targetTouches[0].identifier !== this.state.touchId) return;

//prevent move background
e.preventDefault();

let diff = this.state.translate;

if(this.props.direction == 'horizontal'){
if (this.props.direction === 'horizontal'){
const pageX = e.targetTouches[0].pageX;
diff = pageX - this.state.og;

}else{
} else {
//vertical
const pageY = e.targetTouches[0].pageY;
diff = pageY - this.state.og;
@@ -141,46 +141,46 @@ class Swiper extends Component {

this.setState({
translate: diff
})
});
}

handleTouchEnd(e){
if(!this.state.touching || this.props.children.length <= 1) return;
if (!this.state.touching || this.props.children.length <= 1) return;

let translate = this.state.translate;
let max = this.props.direction == 'horizontal' ? this.state.wrapperWidth - this.state.containerWidth : this.state.wrapperHeight - this.state.containerHeight
let currentIndex = this.state.currentIndex
let ogIndex = currentIndex
let max = this.props.direction === 'horizontal' ? this.state.wrapperWidth - this.state.containerWidth : this.state.wrapperHeight - this.state.containerHeight;
let currentIndex = this.state.currentIndex;
let ogIndex = currentIndex;

if(translate > 0){
if (translate > 0){
//start
translate = 0
}else if(translate < -max){
translate = 0;
} else if (translate < -max){
//end
translate = -max
}else{
translate = -max;
} else {
//default case
let diff = Math.abs(translate - this.state.ogTranslate)
let isNext = (translate - this.state.ogTranslate) < 0 ? true : false
let diff = Math.abs(translate - this.state.ogTranslate);
let isNext = (translate - this.state.ogTranslate) < 0 ? true : false;
//console.log(translate - this.state.ogTranslate, diff, isNext)

if( diff >= this.props.threshold ){
if ( diff >= this.props.threshold ){

if(isNext){
if (isNext){
//next slide
translate = this.state.ogTranslate - ( this.props.direction == 'horizontal' ? this.state.containerWidth : this.state.containerHeight )
currentIndex += 1
translate = this.state.ogTranslate - ( this.props.direction === 'horizontal' ? this.state.containerWidth : this.state.containerHeight );
currentIndex += 1;

}else{
} else {
//prev slide
translate = this.state.ogTranslate + ( this.props.direction == 'horizontal' ? this.state.containerWidth : this.state.containerHeight )
currentIndex -= 1
translate = this.state.ogTranslate + ( this.props.direction === 'horizontal' ? this.state.containerWidth : this.state.containerHeight );
currentIndex -= 1;

}

}else{
} else {
//revert back
translate = this.state.ogTranslate
translate = this.state.ogTranslate;
}
}

@@ -192,41 +192,41 @@ class Swiper extends Component {
animating: true,
translate,
currentIndex
}, ()=> setTimeout(()=>this.setState({animating: false}), this.props.speed ))
}, ()=> setTimeout(()=>this.setState({animating: false}), this.props.speed ));

if(this.props.onChange) this.props.onChange(ogIndex, currentIndex)
if (this.props.onChange) this.props.onChange(ogIndex, currentIndex);
}

renderPagination(){
return this.props.children.map( (child, i) => {
let clx = classNames('react-weui-swiper__pagination-bullet', {
active: i == this.state.currentIndex
})
active: i === this.state.currentIndex
});
return (
<span className={clx} key={i}></span>
)
})
);
});
}

render() {

const { className, children, height, width, defaultIndex, direction, speed, indicators, ...domProps } = this.props;
let clx = classNames('react-weui-swiper__container', className, {
'react-weui-swiper__container-horizontal': direction == 'horizontal',
'react-weui-swiper__container-vertical': direction == 'vertical',
})
'react-weui-swiper__container-horizontal': direction === 'horizontal',
'react-weui-swiper__container-vertical': direction === 'vertical',
});

let containerStyle = {
height: height ? `${height}px` : '100%',
width: width ? `${width}px` : '100%'
}
};

let wrapperStyle = {
width: this.state.wrapperWidth,
height: this.state.wrapperHeight,
transition : this.state.animating ? `transform .${speed / 100}s` : 'none',
transform : `translate(${ direction == 'horizontal' ? this.state.translate : 0}px, ${ direction == 'vertical' ? this.state.translate : 0}px)`,
}
transition: this.state.animating ? `transform .${speed / 100}s` : 'none',
transform: `translate(${ direction === 'horizontal' ? this.state.translate : 0}px, ${ direction === 'vertical' ? this.state.translate : 0}px)`,
};

return (
<div
@@ -247,12 +247,12 @@ class Swiper extends Component {
className: classNames('react-weui-swiper__item', child.className),
key: i,
style: Object.assign({}, child.props.style, {
display: direction == 'horizontal' ? 'inline-block' : 'block',
verticalAlign: direction == 'horizontal' ? 'top' : 'bottom',
display: direction === 'horizontal' ? 'inline-block' : 'block',
verticalAlign: direction === 'horizontal' ? 'top' : 'bottom',
width: this.state.containerWidth,
height: this.state.containerHeight
})
})
});
})
}
</div>
@@ -264,7 +264,7 @@ class Swiper extends Component {
</div>
: false }
</div>
)
);
}
}

@@ -103,13 +103,6 @@ describe('<ActionSheet></ActionSheet>', ()=> {
});
}

if(!type && userAgent == androidUA) {
wrapper.setState({ isAndroid: true })
it(`when no type define, should detect android and have "weui-skin_android" class on main wrapper`, ()=> {
assert(wrapper.find('div').first().hasClass('weui-skin_android'));
});
}

});
})
});
@@ -103,14 +103,6 @@ describe('<Dialog></Dialog>', ()=> {
})
}

//test auto detect
if(!type && autoDectect ) {
wrapper.setState({ isAndroid: true })
it(`when no type define, should detect android and have "weui-skin_android" class on main wrapper`, ()=> {
assert(wrapper.find('div.weui-dialog').hasClass('weui-skin_android'));
});
}

})
})
})
@@ -18,36 +18,37 @@ describe(`<Gallery></Gallery>`, ()=> {
</Gallery>
);

it(`should have 'weui-gallery' class name`, ()=>{
assert(wrapper.hasClass(`weui-gallery`));
});

it(`should have span with 'weui-gallery__img' class name`, ()=>{
assert(wrapper.find('span').hasClass(`weui-gallery__img`));
});

it(`should have span with image`, ()=>{
assert(wrapper.find('span').prop(`style`).backgroundImage == `url(${imgSrc})`);
});

it(`should have div with 'weui-gallery__opr' class name`, ()=>{
assert(wrapper.find('.weui-gallery__opr').length > 0);
});

it(`should have GalleryDelete`, ()=>{
assert(wrapper.find('div').find(GalleryDelete).length > 0);
});

it(`GalleryDelete should have Icon`, ()=>{
const $gd = wrapper.find('div').find(GalleryDelete).shallow()
assert($gd.find(Icon).prop('value') == 'delete');
assert($gd.find(Icon).prop('className') == 'weui-icon_gallery-delete');
});

it(`should have custom class name ${customClassName}`, ()=> {
assert(wrapper.hasClass(customClassName));
});

if(show) {
it(`should have 'weui-gallery' class name`, ()=>{
assert(wrapper.hasClass(`weui-gallery`));
});

it(`should have span with 'weui-gallery__img' class name`, ()=>{
assert(wrapper.find('span').hasClass(`weui-gallery__img`));
});

it(`should have span with image`, ()=>{
assert(wrapper.find('span').prop(`style`).backgroundImage == `url(${imgSrc})`);
});

it(`should have div with 'weui-gallery__opr' class name`, ()=>{
assert(wrapper.find('.weui-gallery__opr').length > 0);
});

it(`should have GalleryDelete`, ()=>{
assert(wrapper.find('div').find(GalleryDelete).length > 0);
});

it(`GalleryDelete should have Icon`, ()=>{
const $gd = wrapper.find('div').find(GalleryDelete).shallow()
assert($gd.find(Icon).prop('value') == 'delete');
assert($gd.find(Icon).prop('className') == 'weui-icon_gallery-delete');
});

it(`should have custom class name ${customClassName}`, ()=> {
assert(wrapper.hasClass(customClassName));
});
}
});
})
});

0 comments on commit 84f0d3c

Please sign in to comment.
You can’t perform that action at this time.