Skip to content

Commit

Permalink
refactor: steps #154
Browse files Browse the repository at this point in the history
  • Loading branch information
@BANG88
BANG88 committed Dec 8, 2018
1 parent 9765ba5 commit 0fcf587
Show file tree
Hide file tree
Showing 4 changed files with 306 additions and 302 deletions.
5 changes: 0 additions & 5 deletions components/steps/PropsType.tsx
View file

This file was deleted.

297 changes: 153 additions & 144 deletions components/steps/StepsItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import React from 'react';
import { StyleProp, Text, View, ViewStyle } from 'react-native';
import Icon from '../icon';
import variables from '../style/themes/default';
import { WithTheme } from '../style';

export interface StepsItemProps {
width?: number;
Expand Down Expand Up @@ -35,156 +35,165 @@ export default class StepsItem extends React.Component<StepsItemProps, any> {
const index = this.props.index as number;
const current = this.props.current as number;
const errorTail = this.props.errorTail as number;
return (
<WithTheme>
{(_, theme) => {
let headCls: string = '';
let tailTopCls: string = '';
let tailBottomCls: string = '';

let headCls: string = '';
let tailTopCls: string = '';
let tailBottomCls: string = '';

const sizeCls: string = size === 'small' ? '_s' : '_l';

if (index < current || status === 'finish') {
headCls = `head_blue${sizeCls}`;
tailTopCls = 'tail_blue';
tailBottomCls = 'tail_blue';
} else if (index === current || status === 'process') {
headCls = `head_blue${sizeCls}`;
tailTopCls = 'tail_blue';
tailBottomCls = 'tail_gray';
} else if (index > current || status === 'wait') {
headCls = `head_gray${sizeCls}`;
tailTopCls = 'tail_gray';
tailBottomCls = 'tail_gray';
} else if (status === 'error') {
headCls = `head_red${sizeCls}`;
tailTopCls = 'tail_gray';
tailBottomCls = 'tail_gray';
}

if (last) {
tailTopCls = 'tail_last';
tailBottomCls = 'tail_last';
}
const sizeCls: string = size === 'small' ? '_s' : '_l';

if (errorTail > -1) {
tailBottomCls = 'tail_error';
}
if (index < current || status === 'finish') {
headCls = `head_blue${sizeCls}`;
tailTopCls = 'tail_blue';
tailBottomCls = 'tail_blue';
} else if (index === current || status === 'process') {
headCls = `head_blue${sizeCls}`;
tailTopCls = 'tail_blue';
tailBottomCls = 'tail_gray';
} else if (index > current || status === 'wait') {
headCls = `head_gray${sizeCls}`;
tailTopCls = 'tail_gray';
tailBottomCls = 'tail_gray';
} else if (status === 'error') {
headCls = `head_red${sizeCls}`;
tailTopCls = 'tail_gray';
tailBottomCls = 'tail_gray';
}

let iconSource;
if (size === 'small') {
if (
index < current ||
status === 'finish' ||
index === current ||
status === 'process'
) {
iconSource = (
<Icon
name="check"
color={variables.brand_primary}
style={styles[`icon${sizeCls}`]}
/>
);
} else if (index > current || status === 'wait') {
iconSource = (
<Icon
name="ellipsis"
color={variables.color_icon_base}
style={styles[`icon${sizeCls}`]}
/>
);
} else if (status === 'error') {
iconSource = (
<Icon
name="close"
color={variables.brand_error}
style={styles[`icon${sizeCls}`]}
/>
);
}
} else {
if (
index < current ||
status === 'finish' ||
index === current ||
status === 'process'
) {
iconSource = (
<Icon
name="check"
color={variables.color_icon_base}
style={styles[`icon${sizeCls}`]}
/>
);
} else if (index > current || status === 'wait') {
iconSource = (
<Icon
name="ellipsis"
color={variables.color_icon_base}
style={styles[`icon${sizeCls}`]}
/>
);
if (!!icon) {
iconSource = icon;
}
} else if (status === 'error') {
iconSource = (
<Icon
name="close"
color={variables.color_icon_base}
style={styles[`icon${sizeCls}`]}
/>
);
}
}
if (last) {
tailTopCls = 'tail_last';
tailBottomCls = 'tail_last';
}

const isHorizontal = direction === 'horizontal';
const parentStyle: StyleProp<ViewStyle> = isHorizontal
? { flexDirection: 'column' }
: { flexDirection: 'row' };
const childStyle: StyleProp<ViewStyle> = isHorizontal
? { flexDirection: 'row', flex: 1 }
: { flexDirection: 'column' };
let styleSuffix: string = '';
if (isHorizontal) {
styleSuffix = '_h';
}
if (errorTail > -1) {
tailBottomCls = 'tail_error';
}

return (
<View style={parentStyle}>
<View style={childStyle}>
<View style={[styles[`head_default${sizeCls}`], styles[headCls]]}>
{React.isValidElement(iconSource) ? iconSource : null}
</View>
{
<View
style={[
styles[`tail_default${sizeCls}${styleSuffix}`],
styles[tailTopCls],
]}
/>
let iconSource;
if (size === 'small') {
if (
index < current ||
status === 'finish' ||
index === current ||
status === 'process'
) {
iconSource = (
<Icon
name="check"
color={theme.brand_primary}
style={styles[`icon${sizeCls}`]}
/>
);
} else if (index > current || status === 'wait') {
iconSource = (
<Icon
name="ellipsis"
color={theme.color_icon_base}
style={styles[`icon${sizeCls}`]}
/>
);
} else if (status === 'error') {
iconSource = (
<Icon
name="close"
color={theme.brand_error}
style={styles[`icon${sizeCls}`]}
/>
);
}
} else {
if (
index < current ||
status === 'finish' ||
index === current ||
status === 'process'
) {
iconSource = (
<Icon
name="check"
color={theme.color_icon_base}
style={styles[`icon${sizeCls}`]}
/>
);
} else if (index > current || status === 'wait') {
iconSource = (
<Icon
name="ellipsis"
color={theme.color_icon_base}
style={styles[`icon${sizeCls}`]}
/>
);
if (!!icon) {
iconSource = icon;
}
} else if (status === 'error') {
iconSource = (
<Icon
name="close"
color={theme.color_icon_base}
style={styles[`icon${sizeCls}`]}
/>
);
}
}
{
<View
style={[
styles[`tail_default${sizeCls}${styleSuffix}`],
styles[tailBottomCls],
]}
/>

const isHorizontal = direction === 'horizontal';
const parentStyle: StyleProp<ViewStyle> = isHorizontal
? { flexDirection: 'column' }
: { flexDirection: 'row' };
const childStyle: StyleProp<ViewStyle> = isHorizontal
? { flexDirection: 'row', flex: 1 }
: { flexDirection: 'column' };
let styleSuffix: string = '';
if (isHorizontal) {
styleSuffix = '_h';
}
</View>
<View style={styles[`content${sizeCls}${styleSuffix}`]}>
{typeof title !== 'object' ? (
<Text style={[styles[`title${sizeCls}`]]}>{title}</Text>
) : (
<View>{title}</View>
)}
{typeof description !== 'object' ? (
<Text style={[styles[`description${sizeCls}`]]}>{description}</Text>
) : (
<View>{description}</View>
)}
</View>
</View>

return (
<View style={parentStyle}>
<View style={childStyle}>
<View
style={[styles[`head_default${sizeCls}`], styles[headCls]]}
>
{React.isValidElement(iconSource) ? iconSource : null}
</View>
{
<View
style={[
styles[`tail_default${sizeCls}${styleSuffix}`],
styles[tailTopCls],
]}
/>
}
{
<View
style={[
styles[`tail_default${sizeCls}${styleSuffix}`],
styles[tailBottomCls],
]}
/>
}
</View>
<View style={styles[`content${sizeCls}${styleSuffix}`]}>
{typeof title !== 'object' ? (
<Text style={[styles[`title${sizeCls}`]]}>{title}</Text>
) : (
<View>{title}</View>
)}
{typeof description !== 'object' ? (
<Text style={[styles[`description${sizeCls}`]]}>
{description}
</Text>
) : (
<View>{description}</View>
)}
</View>
</View>
);
}}
</WithTheme>
);
}
}
Loading

0 comments on commit 0fcf587

Please sign in to comment.