Skip to content

Commit 068bc99

Browse files
author
Marek Rozmus
committed
Add module example app
1 parent ca3aa15 commit 068bc99

16 files changed

+9328
-0
lines changed

‎examples/.eslintrc

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"node": true
5+
},
6+
"extends": ["plugin:prettier/recommended", "plugin:react/recommended"],
7+
"parser": "babel-eslint",
8+
"settings": {
9+
"react": {
10+
"version": "detect"
11+
}
12+
},
13+
"rules": {
14+
"no-undef": "error"
15+
}
16+
}

‎examples/.prettierrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"tabWidth": 2,
3+
"singleQuote": true
4+
}

‎examples/images/delete.svg

Lines changed: 1 addition & 0 deletions
Loading

‎examples/images/mail.svg

Lines changed: 1 addition & 0 deletions
Loading

‎examples/images/reply.svg

Lines changed: 1 addition & 0 deletions
Loading

‎examples/package-lock.json

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

‎examples/package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "simple",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"build": "webpack --mode production",
8+
"start": "webpack-dev-server"
9+
},
10+
"author": "",
11+
"license": "ISC",
12+
"devDependencies": {
13+
"@babel/core": "^7.6.0",
14+
"@babel/plugin-proposal-class-properties": "^7.5.5",
15+
"@babel/preset-env": "^7.6.0",
16+
"@babel/preset-react": "^7.0.0",
17+
"@svgr/webpack": "^4.3.2",
18+
"babel-eslint": "^10.0.3",
19+
"babel-loader": "^8.0.6",
20+
"css-loader": "^3.2.0",
21+
"eslint": "^6.3.0",
22+
"eslint-config-prettier": "^6.2.0",
23+
"eslint-plugin-import": "^2.18.2",
24+
"eslint-plugin-prettier": "^3.1.0",
25+
"eslint-plugin-react": "^7.14.3",
26+
"html-webpack-plugin": "^3.2.0",
27+
"prettier": "^1.18.2",
28+
"style-loader": "^1.0.0",
29+
"url-loader": "^2.1.0",
30+
"webpack": "^4.39.3",
31+
"webpack-cli": "^3.3.8",
32+
"webpack-dev-server": "^3.8.0"
33+
},
34+
"dependencies": {
35+
"react": "^16.9.0",
36+
"react-dom": "^16.9.0"
37+
}
38+
}

‎examples/src/App.js

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import React, { useState } from 'react';
2+
import { SwipeableList, SwipeableListItem } from 'react-swipeable-list';
3+
4+
import ListItem from './ListItem';
5+
import ComplexItemBackground from './ComplexItemBackground';
6+
import { ReactComponent as MailIcon } from '../images/mail.svg';
7+
import { ReactComponent as ReplyIcon } from '../images/reply.svg';
8+
import { ReactComponent as DeleteIcon } from '../images/delete.svg';
9+
import './app.css';
10+
11+
function App() {
12+
const [triggeredSimpleItemAction, triggerSimpleItemAction] = useState('');
13+
const [triggeredComplexItemAction, triggerComplexItemAction] = useState('');
14+
15+
return (
16+
<div className="example">
17+
<h3>react-swipeable-list example</h3>
18+
<h5>(switch on dev tools to mobile view)</h5>
19+
<h3>Simple example</h3>
20+
<div className="list-container">
21+
<SwipeableList>
22+
<SwipeableListItem
23+
swipeRight={{
24+
background: (
25+
<div className="background-left">
26+
<span>Left background</span>
27+
</div>
28+
),
29+
action: () =>
30+
triggerSimpleItemAction(
31+
'Swipe right action on "Item with swipe right"'
32+
)
33+
}}
34+
>
35+
<div className="list-item">
36+
<span>Item with &apos;swipe right&apos;</span>
37+
</div>
38+
</SwipeableListItem>
39+
<SwipeableListItem
40+
swipeLeft={{
41+
background: (
42+
<div className="background-right">
43+
<span>Right background</span>
44+
</div>
45+
),
46+
action: () =>
47+
triggerSimpleItemAction(
48+
'Swipe left action on "Item with swipe left"'
49+
)
50+
}}
51+
>
52+
<div className="list-item">
53+
<span>Item with &apos;swipe left&apos;</span>
54+
</div>
55+
</SwipeableListItem>
56+
<SwipeableListItem
57+
swipeRight={{
58+
background: (
59+
<div className="background-left">
60+
<span>Left background</span>
61+
</div>
62+
),
63+
action: () =>
64+
triggerSimpleItemAction(
65+
'Swipe right on "Item with both swipes"'
66+
)
67+
}}
68+
swipeLeft={{
69+
background: (
70+
<div className="background-right">
71+
<span>Right background</span>
72+
</div>
73+
),
74+
action: () =>
75+
triggerSimpleItemAction('Swipe left on "Item with both swipes"')
76+
}}
77+
>
78+
<div className="list-item">
79+
<span>Item with both swipes</span>
80+
</div>
81+
</SwipeableListItem>
82+
<SwipeableListItem>
83+
<div className="list-item">
84+
<span>Item without swipe actions</span>
85+
</div>
86+
</SwipeableListItem>
87+
</SwipeableList>
88+
</div>
89+
<span className="action-info">{triggeredSimpleItemAction}</span>
90+
<h3>More complex items</h3>
91+
<div className="complex-list-container">
92+
<SwipeableList>
93+
<SwipeableListItem
94+
swipeLeft={{
95+
background: (
96+
<ComplexItemBackground
97+
icon={<ReplyIcon />}
98+
label="Reply"
99+
color="green"
100+
side="left"
101+
/>
102+
),
103+
action: () =>
104+
triggerComplexItemAction('Reply action triggered on first item')
105+
}}
106+
swipeRight={{
107+
background: (
108+
<ComplexItemBackground
109+
icon={<DeleteIcon />}
110+
label="Delete"
111+
side="right"
112+
color="red"
113+
/>
114+
),
115+
action: () =>
116+
triggerComplexItemAction(
117+
'Delete action triggered on first item'
118+
)
119+
}}
120+
>
121+
<ListItem
122+
icon={<MailIcon />}
123+
name="first"
124+
description="first description"
125+
/>
126+
</SwipeableListItem>
127+
<SwipeableListItem
128+
swipeLeft={{
129+
background: (
130+
<ComplexItemBackground
131+
label="Reply"
132+
side="left"
133+
color="green"
134+
/>
135+
),
136+
action: () =>
137+
triggerComplexItemAction(
138+
'Reply action triggered on second item'
139+
)
140+
}}
141+
swipeRight={{
142+
background: (
143+
<ComplexItemBackground
144+
icon={<DeleteIcon />}
145+
side="right"
146+
color="red"
147+
/>
148+
),
149+
action: () =>
150+
triggerComplexItemAction(
151+
'Delete action triggered on second item'
152+
)
153+
}}
154+
>
155+
<ListItem
156+
icon={<MailIcon />}
157+
name="second"
158+
description="second description"
159+
/>
160+
</SwipeableListItem>
161+
</SwipeableList>
162+
</div>
163+
<span className="action-info">{triggeredComplexItemAction}</span>
164+
</div>
165+
);
166+
}
167+
168+
export default App;

‎examples/src/ComplexItemBackground.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.complex-list-item-background {
2+
color: white;
3+
flex: 1;
4+
height: 100%;
5+
display: flex;
6+
flex-flow: column;
7+
justify-content: center;
8+
}
9+
10+
.complex-list-item-background.red {
11+
background: #ca1c1c;
12+
}
13+
14+
.complex-list-item-background.green {
15+
background: #409000;
16+
}
17+
18+
.complex-list-item-background.left {
19+
align-items: flex-end;
20+
}
21+
22+
.complex-list-item-background .content {
23+
display: flex;
24+
flex-flow: column;
25+
align-items: center;
26+
font-weight: 300;
27+
font-size: 14px;
28+
width: 64px;
29+
max-width: 64px;
30+
text-align: center;
31+
padding: 4px;
32+
}
33+
34+
.complex-list-item-background svg {
35+
fill: white;
36+
width: 32px;
37+
height: 32px;
38+
margin-top: -4px;
39+
}

‎examples/src/ComplexItemBackground.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import './ComplexItemBackground.css';
5+
6+
const ComplexItemBackground = ({ icon, color, side, label }) => (
7+
<div className={`complex-list-item-background ${color} ${side}`}>
8+
<div className="content">
9+
{icon && icon}
10+
{label && <span>{label}</span>}
11+
</div>
12+
</div>
13+
);
14+
15+
ComplexItemBackground.propTypes = {
16+
color: PropTypes.string.isRequired,
17+
icon: PropTypes.node,
18+
label: PropTypes.string,
19+
side: PropTypes.string.isRequired
20+
};
21+
22+
export default ComplexItemBackground;

‎examples/src/ListItem.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.list-item-component {
2+
background-color: white;
3+
padding: 10px;
4+
border-bottom: 1px solid #c4c4c4;
5+
flex: 1;
6+
min-width: 0;
7+
}
8+
9+
.list-item-component > .label {
10+
display: flex;
11+
align-items: center;
12+
}
13+
14+
.list-item-component > .label > svg {
15+
width: 24px;
16+
min-width: 24px;
17+
max-width: 24px;
18+
height: 24px;
19+
min-height: 24px;
20+
max-height: 24px;
21+
fill: #083749;
22+
}
23+
24+
.list-item-component > .label > .name {
25+
font-weight: bold;
26+
font-size: 22px;
27+
line-height: 27px;
28+
color: #083749;
29+
margin-left: 4px;
30+
white-space: nowrap;
31+
overflow: hidden;
32+
text-overflow: ellipsis;
33+
}
34+
35+
.list-item-component > .description {
36+
margin-left: 2px;
37+
margin-top: 4px;
38+
color: #959595;
39+
font-size: 14px;
40+
line-height: 17px;
41+
white-space: nowrap;
42+
overflow: hidden;
43+
text-overflow: ellipsis;
44+
}

‎examples/src/ListItem.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { PureComponent } from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import './ListItem.css';
5+
6+
class ListItem extends PureComponent {
7+
render() {
8+
const { description, icon, name } = this.props;
9+
10+
return (
11+
<div className="list-item-component">
12+
<div className="label">
13+
{icon && icon}
14+
<span className="name">{name}</span>
15+
</div>
16+
{description && <div className="description">{description}</div>}
17+
</div>
18+
);
19+
}
20+
}
21+
22+
ListItem.propTypes = {
23+
description: PropTypes.string,
24+
icon: PropTypes.node,
25+
name: PropTypes.string
26+
};
27+
28+
export default ListItem;

0 commit comments

Comments
 (0)