Skip to content

Commit cc8affc

Browse files
ProskyneteProskynete
authored
Release 4.3.3 (#64)
* fix: when the container component has only one content component * fix: modify unit tests * chore: change version * chore: some changes to PR request file * fix: publish github action * Create new release (#61) * breacking change(rename): components * chore: update tests * change: today text to active * add(events): optional subtitle prop * fix(test): optional subtitle prop * add(event): description symbol * improve(a11y): change div and p elements to ul and li * chore(tests): improve test and coverage * add(events-event): allow render closed some event componentes inside events componente * chore: order alphabetically asc all imports and attributes * chore(package): change version * fix(tests): improve coverage * add(template): config template * add(template): features requests * add(pull-request-template): add issue section * chore(documentation): change content * fix(test): update snapshots * chore(template): some changes in pull_request_template file * chore: change version * fix(github-actions): update snapshot * add: new feature - title events prop is optional
1 parent 7f6f4fe commit cc8affc

File tree

12 files changed

+107
-93
lines changed

12 files changed

+107
-93
lines changed

‎README.md‎

Lines changed: 63 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<p>A simple component to generate a responsive vertical timeline</p>
77
</div>
88

9-
![Vertical Timeline Component React](https://dsc.cloud/83db8c/image.png 'How to see vertical-timeline-component-react')
9+
![Vertical Timeline Component React](https://dsc.cloud/83db8c/vertical-timeline-component-react.png 'How to see vertical-timeline-component-react')
1010

1111
## Status
1212

@@ -109,9 +109,11 @@ For each `Events` you need one or more `Event` component.
109109

110110
| Name | Type | Required | Description |
111111
| ----------- | ---------------- | -------- | ---------------------------------------------------------------------------------- |
112-
| title | string | true | It's the title of one or many descriptions |
112+
| title | string | false | It's the title of one or many descriptions |
113113
| description | Array of strings | true | You can write anything you want, but remember that it is consistent with the title |
114114

115+
> If the title is not defined (or empty), the description will always be displayed even when the defaultClosed prop is in the Events component
116+
115117
<p align="right"><a href="#top">🔝</a></p>
116118

117119
<h2 id="how-to-use">How to use it</h2>
@@ -124,38 +126,38 @@ The following snippet will show you how to use the library:
124126
import { Timeline, Events, Content } from 'vertical-timeline-component-react';
125127

126128
const customTheme = {
127-
borderDotColor: '#ffffff',
128-
descriptionColor: '#262626',
129-
dotColor: '#d0cdc4',
130-
eventColor: '#965500',
131-
lineColor: '#d0cdc4',
132-
subtitleColor: '#7c7c7c',
133-
titleColor: '#405b73',
134-
yearColor: '#405b73',
129+
borderDotColor: '#ffffff',
130+
descriptionColor: '#262626',
131+
dotColor: '#d0cdc4',
132+
eventColor: '#965500',
133+
lineColor: '#d0cdc4',
134+
subtitleColor: '#7c7c7c',
135+
titleColor: '#405b73',
136+
yearColor: '#405b73',
135137
};
136138

137139
class Main extends Component {
138-
render() {
139-
return (
140-
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
141-
<Events
142-
title="What is lorem Ipsum?"
143-
subtitle="It's a fake text"
144-
startDate="2020/12/02"
145-
defaultClosed
146-
active
147-
>
148-
<Event
149-
title="Lorem Ipsum"
150-
description={[
151-
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
152-
'Is simply dummy text of the printing and typesetting industry.',
153-
]}
154-
/>
155-
</Events>
156-
</Timeline>
157-
);
158-
}
140+
render() {
141+
return (
142+
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
143+
<Events
144+
title="What is lorem Ipsum?"
145+
subtitle="It's a fake text"
146+
startDate="2020/12/02"
147+
defaultClosed
148+
active
149+
>
150+
<Event
151+
title="Lorem Ipsum"
152+
description={[
153+
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
154+
'Is simply dummy text of the printing and typesetting industry.',
155+
]}
156+
/>
157+
</Events>
158+
</Timeline>
159+
);
160+
}
159161
}
160162
```
161163

@@ -165,36 +167,36 @@ class Main extends Component {
165167
import { Timeline, Events } from 'vertical-timeline-component-react';
166168

167169
const Main = () => {
168-
const customTheme = {
169-
borderDotColor: '#ffffff',
170-
descriptionColor: '#262626',
171-
dotColor: '#d0cdc4',
172-
eventColor: '#965500',
173-
lineColor: '#d0cdc4',
174-
subtitleColor: '#7c7c7c',
175-
titleColor: '#405b73',
176-
yearColor: '#405b73',
177-
};
178-
179-
return (
180-
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
181-
<Events
182-
title="What is lorem Ipsum?"
183-
subtitle="It's a fake text"
184-
startDate="2020/12/02"
185-
active
186-
defaultClosed
187-
>
188-
<Event
189-
title="Lorem Ipsum"
190-
description={[
191-
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
192-
'Is simply dummy text of the printing and typesetting industry.',
193-
]}
194-
/>
195-
</Events>
196-
</Timeline>
197-
);
170+
const customTheme = {
171+
borderDotColor: '#ffffff',
172+
descriptionColor: '#262626',
173+
dotColor: '#d0cdc4',
174+
eventColor: '#965500',
175+
lineColor: '#d0cdc4',
176+
subtitleColor: '#7c7c7c',
177+
titleColor: '#405b73',
178+
yearColor: '#405b73',
179+
};
180+
181+
return (
182+
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
183+
<Events
184+
title="What is lorem Ipsum?"
185+
subtitle="It's a fake text"
186+
startDate="2020/12/02"
187+
active
188+
defaultClosed
189+
>
190+
<Event
191+
title="Lorem Ipsum"
192+
description={[
193+
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
194+
'Is simply dummy text of the printing and typesetting industry.',
195+
]}
196+
/>
197+
</Events>
198+
</Timeline>
199+
);
198200
};
199201
```
200202

‎lib/cjs/components/event/index.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import { ContentProps } from '../../interfaces';
2-
declare const Event: ({ defaultClosed, description, title }: ContentProps) => JSX.Element;
1+
import { EventProps } from '../../interfaces';
2+
declare const Event: ({ defaultClosed, description, title }: EventProps) => JSX.Element;
33
export { Event };

‎lib/cjs/components/event/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,18 +31,18 @@ var Event = function (_a) {
3131
var _b;
3232
var defaultClosed = _a.defaultClosed, description = _a.description, title = _a.title;
3333
var config = (0, useConfig_1.useConfig)().config;
34-
var _c = (0, react_1.useState)(!defaultClosed), show = _c[0], setShow = _c[1];
34+
var _c = (0, react_1.useState)(!title ? true : !defaultClosed), show = _c[0], setShow = _c[1];
3535
var isCollapsed = config.collapse;
3636
var handleSetShow = function () {
3737
setShow(!show);
3838
};
3939
return (react_1.default.createElement(react_1.default.Fragment, null,
40-
react_1.default.createElement(main_1.EventTitle, { collapse: isCollapsed, onClick: function () {
40+
!!title && (react_1.default.createElement(main_1.EventTitle, { collapse: isCollapsed, onClick: function () {
4141
if (isCollapsed)
4242
handleSetShow();
4343
}, style: (_b = config.customStyles) === null || _b === void 0 ? void 0 : _b.event },
4444
isCollapsed && react_1.default.createElement(main_1.Icon, { isShowing: show }, "\u203A"),
45-
title),
45+
title)),
4646
show && (react_1.default.createElement(main_1.DescriptionWrapper, null, description.map(function (text, i) {
4747
var _a;
4848
return (react_1.default.createElement(main_1.Description, { key: i, symbol: config.descriptionSymbol, style: (_a = config.customStyles) === null || _a === void 0 ? void 0 : _a.description }, text));

‎lib/cjs/interfaces/index.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@ export interface EventsProps {
4545
title: string;
4646
withoutDay?: boolean;
4747
}
48-
export interface ContentProps {
48+
export interface EventProps {
4949
defaultClosed?: boolean;
5050
description: string[];
51-
title: string;
51+
title?: string;
5252
}
5353
export interface YearContentProps {
5454
active?: boolean;

‎lib/esm/components/event/index.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import { ContentProps } from '../../interfaces';
2-
declare const Event: ({ defaultClosed, description, title }: ContentProps) => JSX.Element;
1+
import { EventProps } from '../../interfaces';
2+
declare const Event: ({ defaultClosed, description, title }: EventProps) => JSX.Element;
33
export { Event };

‎lib/esm/components/event/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@ var Event = function (_a) {
55
var _b;
66
var defaultClosed = _a.defaultClosed, description = _a.description, title = _a.title;
77
var config = useConfig().config;
8-
var _c = useState(!defaultClosed), show = _c[0], setShow = _c[1];
8+
var _c = useState(!title ? true : !defaultClosed), show = _c[0], setShow = _c[1];
99
var isCollapsed = config.collapse;
1010
var handleSetShow = function () {
1111
setShow(!show);
1212
};
1313
return (React.createElement(React.Fragment, null,
14-
React.createElement(EventTitle, { collapse: isCollapsed, onClick: function () {
14+
!!title && (React.createElement(EventTitle, { collapse: isCollapsed, onClick: function () {
1515
if (isCollapsed)
1616
handleSetShow();
1717
}, style: (_b = config.customStyles) === null || _b === void 0 ? void 0 : _b.event },
1818
isCollapsed && React.createElement(Icon, { isShowing: show }, "\u203A"),
19-
title),
19+
title)),
2020
show && (React.createElement(DescriptionWrapper, null, description.map(function (text, i) {
2121
var _a;
2222
return (React.createElement(Description, { key: i, symbol: config.descriptionSymbol, style: (_a = config.customStyles) === null || _a === void 0 ? void 0 : _a.description }, text));

‎lib/esm/interfaces/index.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@ export interface EventsProps {
4545
title: string;
4646
withoutDay?: boolean;
4747
}
48-
export interface ContentProps {
48+
export interface EventProps {
4949
defaultClosed?: boolean;
5050
description: string[];
51-
title: string;
51+
title?: string;
5252
}
5353
export interface YearContentProps {
5454
active?: boolean;

‎package-lock.json‎

Lines changed: 2 additions & 2 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
@@ -1,6 +1,6 @@
11
{
22
"name": "vertical-timeline-component-react",
3-
"version": "4.3.2",
3+
"version": "4.3.3",
44
"description": "A simple component for create a vertical timeline with React",
55
"main": "./lib/cjs/index.js",
66
"module": "./lib/esm/index.js",

‎src/components/event/index.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useState } from 'react';
22
import { useConfig } from '../../hooks/useConfig';
3-
import { ContentProps } from '../../interfaces';
3+
import { EventProps } from '../../interfaces';
44
import { Description, DescriptionWrapper, EventTitle, Icon } from '../../styles/main';
55

6-
const Event = ({ defaultClosed, description, title }: ContentProps) => {
6+
const Event = ({ defaultClosed, description, title }: EventProps) => {
77
const { config } = useConfig();
8-
const [show, setShow] = useState(!defaultClosed);
8+
const [show, setShow] = useState(!title ? true : !defaultClosed);
99
const isCollapsed = config.collapse;
1010

1111
const handleSetShow = () => {
@@ -14,16 +14,18 @@ const Event = ({ defaultClosed, description, title }: ContentProps) => {
1414

1515
return (
1616
<>
17-
<EventTitle
18-
collapse={isCollapsed}
19-
onClick={() => {
20-
if (isCollapsed) handleSetShow();
21-
}}
22-
style={config.customStyles?.event}
23-
>
24-
{isCollapsed && <Icon isShowing={show}>&#8250;</Icon>}
25-
{title}
26-
</EventTitle>
17+
{!!title && (
18+
<EventTitle
19+
collapse={isCollapsed}
20+
onClick={() => {
21+
if (isCollapsed) handleSetShow();
22+
}}
23+
style={config.customStyles?.event}
24+
>
25+
{isCollapsed && <Icon isShowing={show}>&#8250;</Icon>}
26+
{title}
27+
</EventTitle>
28+
)}
2729

2830
{show && (
2931
<DescriptionWrapper>

0 commit comments

Comments
 (0)