Skip to content

Commit cad3068

Browse files
scriptexscriptex
authored
Merge pull request #350 from scriptex/feature/hooks
Hooks implementation
2 parents 6036e57 + a7b2263 commit cad3068

23 files changed

+6935
-812
lines changed

‎.gitignore

+6-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ yarn-debug.log*
66
yarn-error.log*
77

88
# Dependency directory
9-
node_modules/
9+
node_modules
1010

1111
# Misc
1212
.DS_Store
@@ -18,4 +18,8 @@ ehthumbs.db
1818
Thumbs.db
1919

2020
# Build directory
21-
/dist
21+
dist
22+
23+
# Demo
24+
demo/.cache
25+
demo/dist

‎.npmignore

+10-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ yarn-debug.log*
66
yarn-error.log*
77

88
# Dependency directory
9-
node_modules/
9+
node_modules
1010

1111
# Misc
1212
.DS_Store
@@ -31,12 +31,21 @@ Thumbs.db
3131
yarn.lock
3232

3333
# Config files
34+
.github
35+
.whitesource
3436
_config.yml
3537
_.config.yml
38+
tslint.json
39+
tsconfig.json
3640
renovate.json
3741
rollup.config.js
3842
webpack.config.js
3943

4044
# Prettier
4145
.prettierrc
4246
.prettierignore
47+
48+
# Project specific
49+
!dist
50+
demo
51+
__tests__

‎.travis.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@ node_js:
55
install:
66
- yarn
77
script:
8-
- yarn prepare
8+
- yarn prod

‎README.md

+25-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,14 @@
88

99
# React Accordion
1010

11-
An accordion widget for React applications written in Typescript.
11+
> An accordion widget for React web applications written in Typescript.
12+
13+
## About
14+
15+
The latest version of the widget has been built using the Hooks API introduced with React 16.
16+
If you need to support older versions of React, please install [an older version](https://www.npmjs.com/package/react-accordion-ts/v/0.2.0).
17+
18+
**Please note that this widget does NOT work with React Native.**
1219

1320
## Install
1421

@@ -52,9 +59,25 @@ const items = news.map(({ date, title, content }) => ({
5259
export const MyComponent = () => <Accordion items={items} duration={300} multiple={true} />;
5360
```
5461

62+
You can also use the basic stylesheet included:
63+
64+
```javascript
65+
import 'react-accordion-ts/src/panel.css';
66+
```
67+
68+
or
69+
70+
```css
71+
@import 'react-accordion-ts/src/panel.css';
72+
73+
// If the above doesn't work, add a ~ in the beginning:
74+
75+
@import '~react-accordion-ts/src/panel.css';
76+
```
77+
5578
## Props
5679

57-
1. items: Array of objects with the following properties:
80+
1. items [Required] - Array of objects with the following shape:
5881

5982
- title [Required] - React Node
6083
- content [Required] - React Node

‎__tests__/__snapshots__/accordion.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,4 +116,4 @@ Array [
116116
]
117117
`;
118118

119-
exports[`Accordion should render properly 2`] = `""`;
119+
exports[`Accordion should render properly 2`] = `null`;

‎__tests__/accordion.test.tsx

+3-25
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,18 @@
11
import * as React from 'react';
22
import * as renderer from 'react-test-renderer';
33

4+
import { items } from '../demo/mocks';
45
import Accordion from '../src/accordion';
56

6-
const mock = [
7-
{
8-
date: '12-10-2018',
9-
title: 'Awesome title',
10-
content: 'Fantastic content'
11-
},
12-
{
13-
date: '13-10-2018',
14-
title: 'Awesome title',
15-
content: 'Fantastic content'
16-
},
17-
{
18-
date: '13-10-2018',
19-
title: 'Awesome title',
20-
content: 'Fantastic content'
21-
}
22-
];
23-
247
describe('Accordion', () => {
25-
const items = mock.map(({ date, title, content }) => ({
26-
title: <h2>{date + ' - ' + title}</h2>,
27-
content: <p>{content}</p>
28-
}));
29-
308
it('should render properly', () => {
31-
const tree = renderer.create(<Accordion items={items} duration={300} multiple={true} /> as any).toJSON();
9+
const tree = renderer.create((<Accordion items={items} duration={300} multiple />) as any).toJSON();
3210

3311
expect(tree).toMatchSnapshot();
3412
});
3513

3614
it('should render properly', () => {
37-
const tree = renderer.create(<Accordion items={[]} duration={0} multiple={false} /> as any).toJSON();
15+
const tree = renderer.create((<Accordion items={[]} duration={0} multiple={false} />) as any).toJSON();
3816

3917
expect(tree).toMatchSnapshot();
4018
});

‎demo/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
8+
<title>React Accordion Demo</title>
9+
10+
<link rel="stylesheet" href="../src/panel.css" />
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
15+
<script src="./index.tsx"></script>
16+
</body>
17+
</html>

‎demo/index.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
4+
import { items } from './mocks';
5+
import { Accordion } from '../dist/index';
6+
7+
const App = () => {
8+
return <Accordion items={items} duration={300} multiple />;
9+
};
10+
11+
ReactDOM.render(<App />, document.getElementById('root'));

‎demo/mocks.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react';
2+
3+
export const news = [
4+
{
5+
date: '12-10-2018',
6+
title: 'Awesome title',
7+
content: 'Fantastic content'
8+
},
9+
{
10+
date: '13-10-2018',
11+
title: 'Awesome title',
12+
content: 'Fantastic content'
13+
},
14+
{
15+
date: '13-10-2018',
16+
title: 'Awesome title',
17+
content: 'Fantastic content'
18+
}
19+
];
20+
21+
export const items = news.map(({ date, title, content }) => ({
22+
title: <h2>{date + ' - ' + title}</h2>,
23+
content: <p>{content}</p>
24+
}));

‎demo/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "react-accordion-ts-example",
3+
"version": "1.0.0",
4+
"main": "index.tsx",
5+
"license": "MIT",
6+
"scripts": {
7+
"start": "parcel index.html",
8+
"build": "parcel build index.html"
9+
},
10+
"dependencies": {},
11+
"alias": {
12+
"react": "../node_modules/react",
13+
"react-dom": "../node_modules/react-dom/profiling"
14+
},
15+
"devDependencies": {
16+
"@types/react": "16.9.51",
17+
"@types/react-dom": "16.9.8",
18+
"parcel": "1.12.4",
19+
"typescript": "4.0.3"
20+
}
21+
}

0 commit comments

Comments
 (0)