improve code style

This commit is contained in:
afc163 2015-11-23 17:19:35 +08:00
parent 8026a92974
commit 3768e49597
2 changed files with 26 additions and 44 deletions

View File

@ -1,12 +1,13 @@
import React, { createElement } from 'react'; import React, { createElement } from 'react';
import { findDOMNode } from 'react-dom'; import { findDOMNode } from 'react-dom';
import { toArrayChildren, getPartNumber, getTranslateY } from './utils'; import { getPartNumber, getTranslateY } from './utils';
import assign from 'object-assign'; import assign from 'object-assign';
import { Children } from 'rc-util';
class AntNumber extends React.Component { class AntNumber extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const children = toArrayChildren(this.props.children); const children = Children.toArray(this.props.children);
this.endSetState = false; this.endSetState = false;
this.count = this.props.count; this.count = this.props.count;
this.data = getPartNumber(this.count); this.data = getPartNumber(this.count);
@ -46,12 +47,9 @@ class AntNumber extends React.Component {
let childrenWap = []; let childrenWap = [];
let i = 0; let i = 0;
while (i < length) { while (i < length) {
const oneData = data[i];
const style = {}; const style = {};
let translateY = -(oneData + 10) * height; const Y = getTranslateY(differ, data, this.data, i) || -(data[i] + 10);
// const translateY = Y * height;
const Y = getTranslateY(differ, data, this.data, height, i);
translateY = typeof Y === 'number' ? Y : translateY;
if (count !== this.count) { if (count !== this.count) {
this.setEndState(style); this.setEndState(style);
} }
@ -77,7 +75,7 @@ class AntNumber extends React.Component {
if (newChildren && newChildren.length) { if (newChildren && newChildren.length) {
this.setState({ this.setState({
children: newChildren, children: newChildren,
}, ()=> { }, () => {
if (this.endSetState) { if (this.endSetState) {
this.updateChildren(props); this.updateChildren(props);
this.endSetState = false; this.endSetState = false;
@ -88,11 +86,7 @@ class AntNumber extends React.Component {
animEnd() { animEnd() {
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(()=> { this.timeout = setTimeout(this.props.callback, 300);
if (typeof this.props.callback === 'function') {
this.props.callback();
}
}, 300);
} }
componentDidMount() { componentDidMount() {
@ -105,9 +99,14 @@ class AntNumber extends React.Component {
} }
render() { render() {
const childrenToRender = this.state.children; const props = assign({}, this.props, {
const props = assign({}, this.props, {className: `${this.props.prefixCls} ${this.props.className}`}); className: `${this.props.prefixCls} ${this.props.className}`
return createElement(this.props.component, props, childrenToRender); });
return createElement(
this.props.component,
props,
this.state.children
);
} }
} }
@ -116,7 +115,7 @@ AntNumber.defaultProps = {
count: null, count: null,
max: null, max: null,
component: 'sup', component: 'sup',
callback: null, callback: function() {},
}; };
AntNumber.propTypes = { AntNumber.propTypes = {

View File

@ -1,34 +1,17 @@
import React from 'react';
export function toArrayChildren(children) {
const ret = [];
React.Children.forEach(children, (c) => {
ret.push(c);
});
return ret;
}
export function getPartNumber(num) { export function getPartNumber(num) {
if (!num) { return num ?
return null; num.toString().split('').map(i => Number(i)).reverse() : [];
}
const countStr = num.toString();
const obj = {};
for (let i = 0; i < countStr.length; i++) {
obj[countStr.length - 1 - i] = Number(countStr[i]);
}
return obj;
} }
export function getTranslateY(differ, data, _data, height, i) { export function getTranslateY(differ, data, _data, i) {
let translateY = 0; let translateY = 0;
if (!differ) { if (!differ) {
//不想插入40个改变要滚到的距离 //不想插入40个改变要滚到的距离
if (_data[i + '_add']) { if (_data[i + '_add']) {
return -(data[i] + 20) * height; return -(data[i] + 20);
} }
if (_data[i + '_rem']) { if (_data[i + '_rem']) {
return -data[i] * height; return -data[i];
} }
return false; return false;
} }
@ -46,7 +29,7 @@ export function getTranslateY(differ, data, _data, height, i) {
if (differ > 0) { if (differ > 0) {
if (countLength - 1 > i) { if (countLength - 1 > i) {
//差值位数大于1时参数的位置到达减去两个参数的差在0区域段 //差值位数大于1时参数的位置到达减去两个参数的差在0区域段
translateY = -(to - (to - on)) * height; translateY = -(to - (to - on));
//on大于to且differ大于10如9->0,需要设计滚动到的位置10; //on大于to且differ大于10如9->0,需要设计滚动到的位置10;
if (on > to) { if (on > to) {
data[i + '_add'] = true; data[i + '_add'] = true;
@ -56,17 +39,17 @@ export function getTranslateY(differ, data, _data, height, i) {
translateY = null; translateY = null;
} else if (typeof on === 'undefined') { } else if (typeof on === 'undefined') {
//新增加入时设为0 //新增加入时设为0
translateY = -10 * height; translateY = -10;
} else { } else {
//如果开始大于到达到达to加10 //如果开始大于到达到达to加10
const _to = on > to ? to + 10 : to; const _to = on > to ? to + 10 : to;
//差值为一位数时到达减去两个参数的差在1区域段加10 //差值为一位数时到达减去两个参数的差在1区域段加10
translateY = -(to - (_to - on) + 10) * height; translateY = -(to - (_to - on) + 10);
} }
} else { } else {
if (countLength - 1 > i) { if (countLength - 1 > i) {
//差值位数大于1时参数的位置到达加上两个参数的差在2区域段加20需要滚动一周 //差值位数大于1时参数的位置到达加上两个参数的差在2区域段加20需要滚动一周
translateY = -(to + (on - to) + 20) * height; translateY = -(to + (on - to) + 20);
//同上differ大于10时且to在于on //同上differ大于10时且to在于on
if (to > on) { if (to > on) {
data[i + '_rem'] = true; data[i + '_rem'] = true;
@ -77,7 +60,7 @@ export function getTranslateY(differ, data, _data, height, i) {
//如果到达大于开始,开始(on)加10; //如果到达大于开始,开始(on)加10;
const _on = on < to ? on + 10 : on; const _on = on < to ? on + 10 : on;
//差值位数小于1时参数的位置到达减去两个参数的差在1区域段加10往上滚回差值 //差值位数小于1时参数的位置到达减去两个参数的差在1区域段加10往上滚回差值
translateY = -(to + (_on - to) + 10) * height; translateY = -(to + (_on - to) + 10);
} }
} }
return translateY; return translateY;