Skip to content

fix(lineWidth) center timeline when having different line width #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lidio601 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix(lineWidth) center timeline when having different line width #7

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a955223
fix(lineWidth) center timeline when having different line width
lidio601 Feb 4, 2019
ce7a0a9
fix(circle) move circle up to center it between the two segments
lidio601 Feb 4, 2019
430975e
chore(center) added centerLineAndCircle to allow backward compatibility
lidio601 May 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 41 additions & 16 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@ export type Props = {
dotColor?: string,
circleStyle?: ViewStyleProp,
separator?: boolean,
separatorStyle?: ViewStyleProp
separatorStyle?: ViewStyleProp,
centerLineAndCircle?: boolean
};

export type Item = {
Expand Down Expand Up @@ -74,9 +75,23 @@ type State = {
class Timeline extends React.Component<Props, State> {
state = {
x: 0,
width: 0
width: 0,
maxLineWidth: DEFAULT_LINE_WIDTH,
};

static getDerivedStateFromProps (props, state) {
let maxLineWidth = props.lineWidth || DEFAULT_LINE_WIDTH

(props.data || []).forEach(function (item) {
maxLineWidth = Math.max(maxLineWidth, item.lineWidth || maxLineWidth)
})

return {
...state,
maxLineWidth,
}
}

render() {
const { style, data, flatListStyle, flatListProps, keyExtractor } = this.props;

Expand All @@ -87,7 +102,7 @@ class Timeline extends React.Component<Props, State> {
data={data}
keyExtractor={keyExtractor}
renderItem={this.renderItem}
style={[styles.listview, this.props.flatListStyle]}
style={[styles.listview, flatListStyle]}
{...flatListProps}
/>
</View>
Expand Down Expand Up @@ -208,7 +223,7 @@ class Timeline extends React.Component<Props, State> {
};

renderEvent = ({ item, index }: FlatListItemType) => {
const { renderEvent } = this.props;
const { renderEvent, centerLineAndCircle } = this.props;
if (renderEvent) {
return renderEvent({ item, index });
}
Expand All @@ -223,6 +238,9 @@ class Timeline extends React.Component<Props, State> {

const lineColorToUse = item.lineColor || lineColor || DEFAULT_LINE_COLOR;
const lineWidthToUse = item.lineWidth || lineWidth || DEFAULT_LINE_WIDTH;
const margin = centerLineAndCircle
? Math.floor((this.state.maxLineWidth - lineWidthToUse) / 2.0)
: 0;

const isLast = renderFullLine ? !renderFullLine : index + 1 === data.length;
const borderColor = isLast ? 'transparent' : lineColorToUse;
Expand All @@ -235,17 +253,17 @@ class Timeline extends React.Component<Props, State> {
borderColor: borderColor,
borderLeftWidth: lineWidthToUse,
borderRightWidth: 0,
marginLeft: 20,
paddingLeft: 20
marginLeft: 20 + margin,
paddingLeft: 20 + margin
};
break;
case 'single-column-right':
opStyle = {
borderColor: borderColor,
borderLeftWidth: 0,
borderRightWidth: lineWidthToUse,
marginRight: 20,
paddingRight: 20
marginRight: 20 + margin,
paddingRight: 20 + margin
};
break;
case 'two-column':
Expand All @@ -255,26 +273,26 @@ class Timeline extends React.Component<Props, State> {
borderColor: borderColor,
borderLeftWidth: lineWidthToUse,
borderRightWidth: 0,
marginLeft: 20,
paddingLeft: 20
marginLeft: 20 + margin,
paddingLeft: 20 + margin
}
: {
borderColor: borderColor,
borderLeftWidth: 0,
borderRightWidth: lineWidthToUse,
marginRight: 20,
paddingRight: 20
marginRight: 20 + margin,
paddingRight: 20 + margin
};
break;
}

const { onEventPress, detailContainerStyle } = this.props;
const { onEventPress, detailContainerStyle, centerLineAndCircle } = this.props;

return (
<View
onLayout={evt => {
const { x, width } = evt.nativeEvent.layout;
if (!this.state.x && !this.state.width) {
const { x, width } = evt.nativeEvent.layout;
this.setState({ x, width });
}
}}
Expand Down Expand Up @@ -310,7 +328,8 @@ class Timeline extends React.Component<Props, State> {
};

renderCircle({ item, index }: FlatListItemType) {
const { renderCircle } = this.props;
const { renderCircle, centerLineAndCircle } = this.props;

if (renderCircle) {
return renderCircle({ item, index });
}
Expand All @@ -319,7 +338,9 @@ class Timeline extends React.Component<Props, State> {

const circleSizeToUse = item.circleSize || circleSize || DEFAULT_CIRCLE_SIZE;
const circleColorToUse = item.circleColor || circleColor || DEFAULT_CIRCLE_COLOR;
const lineWidthToUse = item.lineWidth || lineWidth || DEFAULT_LINE_WIDTH;
const lineWidthToUse = centerLineAndCircle
? this.state.maxLineWidth
: item.lineWidth || lineWidth || DEFAULT_LINE_WIDTH;

const { x, width } = this.state;

Expand Down Expand Up @@ -354,6 +375,10 @@ class Timeline extends React.Component<Props, State> {
break;
}

if (centerLineAndCircle) {
localCircleStyle.top = - circleSizeToUse;
}

const {
innerCircleType = DEFAULT_INNER_CIRCLE_TYPE,
iconStyle,
Expand Down