Skip to content

Commit d63cb60

Browse files
author
Marek Rozmus
committed
Fix code review issues
1 parent 35e3dc5 commit d63cb60

File tree

13 files changed

+57
-43
lines changed

13 files changed

+57
-43
lines changed

‎examples/src/App.css‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@ body {
66
}
77

88
.page-content__title {
9-
font-size: 19px;
9+
font-size: 20px;
1010
font-weight: bold;
11-
margin-top: 17px;
11+
margin-top: 16px;
1212
margin-bottom: 0;
1313
}
1414

1515
.page-content__subtitle {
16-
font-size: 13px;
16+
font-size: 14px;
1717
font-weight: bold;
18+
margin: 0;
1819
}
1920

2021
.footer {
@@ -132,13 +133,13 @@ body {
132133
}
133134

134135
/* The screen (or content) of the device */
135-
.smartfone__content {
136+
.smartphone__content {
136137
width: 360px;
137138
height: 640px;
138139
background: white;
139140
}
140141

141-
.smartfone__footer {
142+
.smartphone__footer {
142143
padding: 56px 0;
143144
margin-top: unset;
144145
}

‎examples/src/App.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,10 @@ class App extends PureComponent {
6363

6464
return (
6565
<div className="page-content">
66-
<div className="page-content__title">react-swipeable-list example</div>
67-
<div className="page-content__subtitle">
66+
<h1 className="page-content__title">react-swipeable-list example</h1>
67+
<h2 className="page-content__subtitle">
6868
(try also mobile view in dev tools for touch events)
69-
</div>
69+
</h2>
7070
<select
7171
className="page__select"
7272
value={selectedExample}

‎examples/src/animations/AnimationsExample.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { findKey, mapEntries } from '@sandstreamdev/std/object';
1111

1212
import BasicListItem from '../list-items/BasicListItem';
1313
import BasicSwipeContent from '../list-items/BasicSwipeContent';
14+
1415
import './AnimationsExample.css';
1516

1617
const AnimationsExample = () => {
@@ -32,13 +33,13 @@ const AnimationsExample = () => {
3233
setItems([...items, { id: uuidv4(), text: `New item` }]);
3334

3435
const swipeRightOptions = id => ({
35-
content: <BasicSwipeContent direction="left" label="Delete" />,
36+
content: <BasicSwipeContent label="Delete" position="left" />,
3637
actionAnimation: contentAnimation,
3738
action: () => deleteItemById(id)
3839
});
3940

4041
const swipeLeftOptions = id => ({
41-
content: <BasicSwipeContent direction="right" label="Delete" />,
42+
content: <BasicSwipeContent label="Delete" position="right" />,
4243
actionAnimation: contentAnimation,
4344
action: () => deleteItemById(id)
4445
});

‎examples/src/basic/BasicExample.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import '@sandstreamdev/react-swipeable-list/dist/styles.css';
77

88
import BasicListItem from '../list-items/BasicListItem';
99
import BasicSwipeContent from '../list-items/BasicSwipeContent';
10+
1011
import './BasicExample.css';
1112

1213
const BasicExample = () => {
@@ -15,12 +16,12 @@ const BasicExample = () => {
1516
const [swipeAction, handleSwipeAction] = useState('None');
1617

1718
const swipeRightOptions = name => ({
18-
content: <BasicSwipeContent direction="left" label="Left content" />,
19+
content: <BasicSwipeContent label="Left content" position="left" />,
1920
action: () => triggerItemAction(`Swipe right action on "${name}"`)
2021
});
2122

2223
const swipeLeftOptions = name => ({
23-
content: <BasicSwipeContent direction="right" label="Right content" />,
24+
content: <BasicSwipeContent label="Right content" position="right" />,
2425
action: () => triggerItemAction(`Swipe left action on "${name}"`)
2526
});
2627

@@ -62,7 +63,7 @@ const BasicExample = () => {
6263
onSwipeProgress={handleSwipeProgress}
6364
onSwipeStart={handleSwipeStart}
6465
>
65-
<BasicListItem label="Item with both swipes" />{' '}
66+
<BasicListItem label="Item with both swipes" />
6667
</SwipeableListItem>
6768
<SwipeableListItem>
6869
<BasicListItem label="Item without swipe actions" />

‎examples/src/complex/ComplexExample.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import '@sandstreamdev/react-swipeable-list/dist/styles.css';
88
import ComplexListItem from '../list-items/ComplexListItem';
99
import ComplexSwipeContent from '../list-items/ComplexSwipeContent';
1010
import { MailIcon, ReplyIcon, DeleteIcon } from '../../images/icons';
11+
1112
import './ComplexExample.css';
1213

1314
const ComplexExample = () => {
@@ -24,9 +25,9 @@ const ComplexExample = () => {
2425
const swipeRightOptions = name => ({
2526
content: (
2627
<ComplexSwipeContent
27-
direction="left"
2828
icon={<DeleteIcon />}
2929
label="Delete"
30+
position="left"
3031
/>
3132
),
3233
action: () => triggerItemAction(`Delete action triggered on "${name}" item`)
@@ -35,9 +36,9 @@ const ComplexExample = () => {
3536
const swipeLeftOptions = name => ({
3637
content: (
3738
<ComplexSwipeContent
38-
direction="right"
3939
icon={<ReplyIcon />}
4040
label="Reply"
41+
position="right"
4142
/>
4243
),
4344
action: () => triggerItemAction(`Reply action triggered on "${name}" item`)

‎examples/src/index.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,19 @@ import App from './App';
77
ReactDOM.render(
88
<div className="application">
99
<div className="smartphone">
10-
<div className="smartfone__content">
10+
<div className="smartphone__content">
1111
<App />
1212
</div>
1313
</div>
14-
<footer className="footer smartfone__footer">
14+
<footer className="footer smartphone__footer">
1515
<span>
1616
{`Made with ❤️ by `}
17-
<a className="footer__link" href="https://sanddev.com/">
17+
<a
18+
className="footer__link"
19+
href="https://sanddev.com/"
20+
rel="noopener noreferrer"
21+
target="_blank"
22+
>
1823
Sandstream Development
1924
</a>
2025
</span>
@@ -23,6 +28,8 @@ ReactDOM.render(
2328
<a
2429
className="footer__link"
2530
href="https://github.com/sandstreamdev/react-swipeable-list"
31+
rel="noopener noreferrer"
32+
target="_blank"
2633
>
2734
GitHub
2835
</a>
@@ -33,6 +40,8 @@ ReactDOM.render(
3340
<a
3441
className="footer__link"
3542
href="https://github.com/sandstreamdev/react-swipeable-list/blob/master/LICENSE"
43+
rel="noopener noreferrer"
44+
target="_blank"
3645
>
3746
MIT
3847
</a>

‎examples/src/list-items/BasicSwipeContent.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
33

44
import './BasicSwipeContent.css';
55

6-
const BasicSwipeContent = ({ direction, label }) => (
7-
<div className={`basic-swipeable-list__item-content-${direction}`}>
6+
const BasicSwipeContent = ({ label, position }) => (
7+
<div className={`basic-swipeable-list__item-content-${position}`}>
88
<span>{label}</span>
99
</div>
1010
);
1111

1212
BasicSwipeContent.propTypes = {
13-
direction: PropTypes.oneOf(['left', 'right']).isRequired,
14-
label: PropTypes.string
13+
label: PropTypes.string,
14+
position: PropTypes.oneOf(['left', 'right']).isRequired
1515
};
1616

1717
export default BasicSwipeContent;

‎examples/src/list-items/ComplexListItem.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
cursor: pointer;
99
}
1010

11-
.complex-swipeable-list__item--label {
11+
.complex-swipeable-list__item-label {
1212
display: flex;
1313
align-items: center;
1414
}
1515

16-
.complex-swipeable-list__item--label > svg {
16+
.complex-swipeable-list__item-icon {
1717
width: 24px;
1818
min-width: 24px;
1919
max-width: 24px;
@@ -23,7 +23,7 @@
2323
fill: #083749;
2424
}
2525

26-
.complex-swipeable-list__item--name {
26+
.complex-swipeable-list__item-name {
2727
font-weight: bold;
2828
font-size: 22px;
2929
line-height: 27px;
@@ -34,7 +34,7 @@
3434
text-overflow: ellipsis;
3535
}
3636

37-
.complex-swipeable-list__item--description {
37+
.complex-swipeable-list__item-description {
3838
margin-left: 2px;
3939
margin-top: 4px;
4040
color: #959595;

‎examples/src/list-items/ComplexListItem.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import './ComplexListItem.css';
55

66
const ComplexListItem = ({ description, icon, name }) => (
77
<div className="complex-swipeable-list__item">
8-
<div className="complex-swipeable-list__item--label">
9-
{icon}
10-
<span className="complex-swipeable-list__item--name">{name}</span>
8+
<div className="complex-swipeable-list__item-label">
9+
<span className="complex-swipeable-list__item-icon">{icon}</span>
10+
<span className="complex-swipeable-list__item-name">{name}</span>
1111
</div>
1212
{description && (
13-
<div className="complex-swipeable-list__item--description">
13+
<div className="complex-swipeable-list__item-description">
1414
{description}
1515
</div>
1616
)}

‎examples/src/list-items/ComplexSwipeContent.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
padding-top: 8px;
3333
}
3434

35-
.complex-swipeable-list__svg {
35+
.complex-swipeable-list__icon {
3636
fill: white;
3737
width: 32px;
3838
height: 32px;

0 commit comments

Comments
 (0)