Skip to content

Commit c1d6334

Browse files
ProskyneteProskynete
authored
Merge pull request #15 from Proskynete/dev
Dev
2 parents c49bfbe + 6a438b9 commit c1d6334

File tree

8 files changed

+215
-70
lines changed

8 files changed

+215
-70
lines changed

‎README.md‎

Lines changed: 69 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
# vertical-timeline-component-react
22

33
A simple component to generate a responsive vertical timeline
4-
5-
![Vertical Timeline Component React](https://i.imgur.com/QmqtTJc.png "How to see vertical-timeline-component-react")
4+
![Vertical Timeline Component React](https://i.imgur.com/JXdOHYV.png 'How to see vertical-timeline-component-react')
65

76
## Status
87

@@ -36,33 +35,37 @@ Each event in the timeline will be represented by the `Content` component. There
3635

3736
For each `Content` you need `ContentYear` since with this component you mark the events in the given year.
3837

39-
| Name | Type | Required | Description |
40-
| ------ | ------ | ------ | ------ |
41-
| Year | String | True | The year for each content |
38+
| Name | Type | Required | Values Allowed | Description |
39+
| ----------- | ---------------- | -------- | ------------------------ | ------------------------------------------------- |
40+
| startMonth | string or number | false | from 0 to 12 | The month of the start of the content or contents |
41+
| monthType | string | false | text or number (default) | Type of how to show the month |
42+
| startDay | string | false | from 1 to 31 | The day of the start of the content or contents |
43+
| startYear | string | true | any year | The year of the start of the content or contents |
44+
| currentYear | boolean | false | false (default) | When the content is still being made |
4245

4346
### ContentBody
4447

4548
For each `Content` you need `ContentBody`, because with this component you describe the events that occurred in that year using `Description` component.
4649

47-
| Name | Type | Required | Description |
48-
| ------ | ------ | ------ | ------ |
49-
| Title | String | True | Show the title for the events |
50-
| Children | Node | True | It is necessary to use the description component. |
50+
| Name | Type | Required | Description |
51+
| -------- | ------ | -------- | ------------------------------------------------- |
52+
| Title | String | True | Show the title for the events |
53+
| Children | Node | True | It is necessary to use the description component. |
5154

5255
### Description
5356

5457
With this component you describe the events one for one.
5558

56-
| Name | Type | Required | Description |
57-
| ------ | ------ | ------ | ------ |
58-
| Text | String | True | Describe the event |
59-
| Optional | String | False | You can this props for use a optional text |
59+
| Name | Type | Required | Description |
60+
| -------- | ------ | -------- | ------------------------------------------ |
61+
| Text | String | True | Describe the event |
62+
| Optional | String | False | You can this props for use a optional text |
6063

6164
## How to use it
6265

6366
The following snippet will show you how to use the library:
6467

65-
***Using class components:***
68+
**_Using class components:_**
6669

6770
```js
6871
import {
@@ -74,25 +77,37 @@ import {
7477
} from 'vertical-timeline-component-react';
7578

7679
class Main extends Component {
77-
render() {
78-
return(
79-
<Timeline>
80-
<Content>
81-
<ContentYear year="2018" />
82-
<ContentBody title="Amazing Title">
83-
<Description text="I'm an amazing event" optional="I'm an amazing optional text"/>
84-
</ContentBody>
85-
</Content>
86-
<Content>
87-
...
88-
</Content>
89-
</Timeline>
90-
)
91-
}
80+
render() {
81+
return (
82+
<Timeline>
83+
<Content>
84+
<ContentYear
85+
startMonth="12"
86+
monthType="text"
87+
startDay="24"
88+
startYear="2016"
89+
currentYear
90+
/>
91+
<ContentBody title="Amazing Title">
92+
<Description
93+
text="I'm an amazing event"
94+
optional="I'm an amazing optional text"
95+
/>
96+
<Description
97+
text="I'm an amazing event"
98+
optional="I'm another amazing optional text"
99+
/>
100+
<Description text="I'm an amazing event" />
101+
</ContentBody>
102+
</Content>
103+
<Content>...</Content>
104+
</Timeline>
105+
);
106+
}
92107
}
93108
```
94109

95-
***Using function components:***
110+
**_Using function components:_**
96111

97112
```js
98113
import {
@@ -104,20 +119,32 @@ import {
104119
} from 'vertical-timeline-component-react';
105120

106121
const Main = () => (
107-
<Timeline>
108-
<Content>
109-
<ContentYear year="2018" />
110-
<ContentBody title="Amazing Title">
111-
<Description text="I'm an amazing event" optional="I'm an amazing optional text"/>
112-
</ContentBody>
113-
</Content>
114-
<Content>
115-
...
116-
</Content>
117-
</Timeline>
122+
<Timeline>
123+
<Content>
124+
<ContentYear
125+
startMonth="12"
126+
monthType="text"
127+
startDay="24"
128+
startYear="2016"
129+
currentYear
130+
/>
131+
<ContentBody title="Amazing Title">
132+
<Description
133+
text="I'm an amazing event"
134+
optional="I'm an amazing optional text"
135+
/>
136+
<Description
137+
text="I'm an amazing event"
138+
optional="I'm another amazing optional text"
139+
/>
140+
<Description text="I'm an amazing event" />
141+
</ContentBody>
142+
</Content>
143+
<Content>...</Content>
144+
</Timeline>
118145
);
119146
```
120147

121148
## License
122149

123-
MIT
150+
MIT

‎__tests__/content-year.spec.js‎

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,62 @@ Enzyme.configure({ adapter: new Adapter() });
99

1010
describe('Description Component', () => {
1111
it('should render with text prop and wihtout optional prop', () => {
12-
const wrapper = shallow(<ContentYear year="hello" />);
13-
expect(wrapper.find('.item-year-component').text()).to.be.equal('hello');
12+
const wrapper = shallow(<ContentYear startYear="2018" />);
13+
expect(wrapper.find('.item-year-component').text()).to.be.equal('2018');
14+
});
15+
16+
it('should render with startYear and currentYear', () => {
17+
const wrapper = shallow(<ContentYear startYear="2018" currentYear />);
18+
expect(
19+
wrapper
20+
.find('.item-year-component')
21+
.at(0)
22+
.text(),
23+
).to.be.equal('2020');
24+
expect(
25+
wrapper
26+
.find('.item-year-component')
27+
.at(1)
28+
.text(),
29+
).to.be.equal('2018');
30+
});
31+
32+
it('should render with startMonth and default type', () => {
33+
const wrapper = shallow(<ContentYear startYear="2018" startMonth="1" />);
34+
expect(wrapper.find('.item-year-component').text()).to.be.equal('01-2018');
35+
});
36+
37+
it('should render with startMonth and text type', () => {
38+
const wrapper = shallow(
39+
<ContentYear startYear="2018" startMonth="1" monthType="text" />,
40+
);
41+
expect(wrapper.find('.item-year-component').text()).to.be.equal(
42+
'Jan, 2018',
43+
);
44+
});
45+
46+
it('should render full date with nonth, day, year and default type', () => {
47+
const wrapper = shallow(
48+
<ContentYear startYear="2018" startMonth="1" startDay="12" />,
49+
);
50+
51+
expect(wrapper.find('.item-year-component').text()).to.be.equal(
52+
'01-12-2018',
53+
);
54+
});
55+
56+
it('should render full date with nonth, day and year and text type', () => {
57+
const wrapper = shallow(
58+
<ContentYear
59+
startYear="2018"
60+
startMonth="1"
61+
startDay="12"
62+
monthType="text"
63+
/>,
64+
);
65+
66+
expect(wrapper.find('.item-year-component').text()).to.be.equal(
67+
'Jan 12, 2018',
68+
);
1469
});
1570
});

‎build/index.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,4 @@
5959
"eslint-plugin-react": "^7.12.4",
6060
"react-test-renderer": "^16.8.6"
6161
}
62-
}
62+
}

‎src/components/content_body/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable no-tabs */
12
import React from 'react';
23
import PropTypes from 'prop-types';
34
import styled from 'styled-components';

‎src/components/content_year/index.js‎

Lines changed: 81 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable no-tabs */
12
import React from 'react';
23
import PropTypes from 'prop-types';
34
import styled from 'styled-components';
@@ -9,7 +10,8 @@ const YearComponent = styled.div`
910
padding-right: 15px;
1011
padding-bottom: 10px;
1112
position: relative;
12-
width: 40px;
13+
text-align: right;
14+
width: 100px;
1315
1416
&::after {
1517
background: #ccc;
@@ -27,36 +29,96 @@ const YearComponentItem = styled.div`
2729
margin-bottom: 8px;
2830
`;
2931

32+
const mapMonth = [
33+
'Jan',
34+
'Feb',
35+
'Mar',
36+
'Apr',
37+
'May',
38+
'Jun',
39+
'Jul',
40+
'Aug',
41+
'Sept',
42+
'Oct',
43+
'Nov',
44+
'Dec',
45+
];
46+
47+
const handleTransformMonth = (month, type) => {
48+
if (type === 'number') {
49+
return month.length === 1 ? `0${month}` : month;
50+
}
51+
const index = month - 1;
52+
return mapMonth[index];
53+
};
54+
55+
const handleGetDate = (month, type, day, year) => {
56+
const newMonth = handleTransformMonth(month, type);
57+
58+
if (day !== '' && month !== '') {
59+
if (type === 'text') {
60+
return `${newMonth} ${day}, ${year}`;
61+
}
62+
return `${newMonth}-${day}-${year}`;
63+
}
64+
if (month !== '') {
65+
if (type === 'text') {
66+
return `${newMonth}, ${year}`;
67+
}
68+
return `${newMonth}-${year}`;
69+
}
70+
return year;
71+
};
72+
73+
const handlePrintDate = (mounth, day, year, monthType, current) => {
74+
const date = new Date();
75+
const startDate = handleGetDate(mounth, monthType, day, year);
76+
77+
if (current) {
78+
return (
79+
<>
80+
<YearComponentItem className="item-year-component">
81+
{date.getFullYear()}
82+
</YearComponentItem>
83+
<YearComponentItem className="item-year-component">
84+
{startDate}
85+
</YearComponentItem>
86+
</>
87+
);
88+
}
89+
return (
90+
<YearComponentItem className="item-year-component">
91+
{startDate}
92+
</YearComponentItem>
93+
);
94+
};
95+
3096
const ContentYear = (props) => {
31-
const { startYear, current } = props;
97+
const {
98+
startMonth, startDay, startYear, monthType, currentYear,
99+
} = props;
32100

33101
return (
34102
<YearComponent className="year-component">
35-
{current ? (
36-
<>
37-
<YearComponentItem className="item-year-component">
38-
{new Date().getFullYear()}
39-
</YearComponentItem>
40-
<YearComponentItem className="item-year-component">
41-
{startYear}
42-
</YearComponentItem>
43-
</>
44-
) : (
45-
<YearComponentItem className="item-year-component">
46-
{startYear}
47-
</YearComponentItem>
48-
)}
103+
{handlePrintDate(startMonth, startDay, startYear, monthType, currentYear)}
49104
</YearComponent>
50105
);
51106
};
52107

53108
ContentYear.defaultProps = {
54-
current: false,
109+
startMonth: '',
110+
monthType: 'number',
111+
startDay: '',
112+
currentYear: false,
55113
};
56114

57115
ContentYear.propTypes = {
58-
startYear: PropTypes.number.isRequired,
59-
current: PropTypes.bool,
116+
startMonth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
117+
monthType: PropTypes.oneOf(['text', 'number']),
118+
startDay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
119+
startYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
120+
.isRequired,
121+
currentYear: PropTypes.bool,
60122
};
61123

62124
export default ContentYear;

‎src/components/description/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable no-tabs */
12
import React from 'react';
23
import PropTypes from 'prop-types';
34
import styled from 'styled-components';
@@ -37,9 +38,7 @@ const Description = (props) => {
3738
<DescriptionComponentTextOptional className="optional-description-component">
3839
{optional}
3940
</DescriptionComponentTextOptional>
40-
) : (
41-
''
42-
)}
41+
) : null}
4342
</DescriptionComponent>
4443
);
4544
};

‎src/components/timeline/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable no-tabs */
12
import React from 'react';
23
import PropTypes from 'prop-types';
34
import styled from 'styled-components';

0 commit comments

Comments
 (0)