Skip to content

Commit b08e446

Browse files
author
sagiv.bengiat
committed
bug fixes with goto and better swiping logic
1 parent ae745a3 commit b08e446

File tree

4 files changed

+221
-143
lines changed

4 files changed

+221
-143
lines changed

‎demoApp/src/DemoApp.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import React, { useState, useRef } from "react";
2+
import Carousel from "react-elastic-carousel";
3+
import styled from "styled-components";
4+
5+
const Item = styled.div`
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
color: #fff;
10+
background-color: green;
11+
width: 100%;
12+
height: 150px;
13+
margin: 15px;
14+
`;
15+
16+
const Layout = styled.div`
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: center;
20+
align-items: center;
21+
height: 100vh;
22+
`;
23+
24+
const ControlsLayout = styled.div`
25+
display: flex;
26+
flex-direction: column;
27+
margin: 25px;
28+
`;
29+
30+
const StyledControlFields = styled.div`
31+
display: flex;
32+
margin: 5px;
33+
`;
34+
35+
const breakPoints = [
36+
{ width: 200, itemsToShow: 1 },
37+
{ width: 600, itemsToShow: 2 },
38+
];
39+
const toggle = (updater) => () => updater((o) => !o);
40+
41+
const CheckBox = ({ label, onToggle, ...rest }) => {
42+
return (
43+
<StyledControlFields>
44+
<label htmlFor={label}>{label}</label>
45+
<input {...rest} id={label} type="checkbox" onChange={toggle(onToggle)} />
46+
</StyledControlFields>
47+
);
48+
};
49+
50+
const DemoApp = () => {
51+
const [items, setItems] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
52+
const [itemsToShow, setItemsToShow] = useState(3);
53+
const [showArrows, setShowArrows] = useState(true);
54+
const [pagination, setPagination] = useState(true);
55+
const [verticalMode, setVerticalMode] = useState(false);
56+
const carouselRef = useRef();
57+
58+
const addItem = () => {
59+
setItems((currentItems) => [...currentItems, currentItems.length + 1]);
60+
};
61+
62+
const removeItem = () => {
63+
setItems((currentItems) => currentItems.slice(0, currentItems.length - 1));
64+
};
65+
66+
const updateItemsToShow = ({ target }) =>
67+
setItemsToShow(Number(target.value));
68+
69+
const goTo = ({ target }) => carouselRef.current.goTo(Number(target.value));
70+
71+
return (
72+
<Layout>
73+
<ControlsLayout>
74+
<StyledControlFields>
75+
<button onClick={addItem}>Add Item</button>
76+
<button onClick={removeItem}>Remove Item</button>
77+
</StyledControlFields>
78+
<StyledControlFields>
79+
<label>goTo</label>
80+
<input type="number" onChange={goTo} />
81+
</StyledControlFields>
82+
<StyledControlFields>
83+
<label>itemsToShow</label>
84+
<input
85+
type="number"
86+
value={itemsToShow}
87+
onChange={updateItemsToShow}
88+
/>
89+
</StyledControlFields>
90+
<CheckBox
91+
label="showArrows"
92+
checked={showArrows}
93+
onToggle={setShowArrows}
94+
/>
95+
<CheckBox
96+
label="pagination"
97+
checked={pagination}
98+
onToggle={setPagination}
99+
/>
100+
<CheckBox
101+
label="verticalMode"
102+
checked={verticalMode}
103+
onToggle={setVerticalMode}
104+
/>
105+
</ControlsLayout>
106+
<Carousel
107+
ref={carouselRef}
108+
verticalMode={verticalMode}
109+
itemsToShow={itemsToShow}
110+
showArrows={showArrows}
111+
pagination={pagination}
112+
>
113+
{items.map((item) => (
114+
<Item key={item}>{item}</Item>
115+
))}
116+
</Carousel>
117+
</Layout>
118+
);
119+
};
120+
121+
export default DemoApp;

‎demoApp/src/index.js‎

Lines changed: 2 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,5 @@
1-
import React, { useState, useEffect } from "react";
1+
import React from "react";
22
import ReactDOM from "react-dom";
3-
import Carousel from "react-elastic-carousel";
4-
import styled from "styled-components";
5-
6-
const Item = styled.div`
7-
display: flex;
8-
justify-content: center;
9-
align-items: center;
10-
color: #fff;
11-
background-color: green;
12-
width: 100%;
13-
height: 150px;
14-
margin: 0 15px;
15-
`;
16-
17-
const Layout = styled.div`
18-
display: flex;
19-
flex-direction: column;
20-
justify-content: center;
21-
align-items: center;
22-
height: 100vh;
23-
`;
24-
25-
const ControlsLayout = styled.div`
26-
display: flex;
27-
flex-direction: column;
28-
margin: 25px;
29-
`;
30-
31-
const ControlFields = styled.div`
32-
display: flex;
33-
margin: 5px;
34-
`;
35-
36-
const DemoApp = () => {
37-
const [items, setItems] = useState([1, 2, 3, 4, 5]);
38-
const [itemsToShow, setItemsToShow] = useState(3);
39-
const [showArrows, setShowArrows] = useState(true);
40-
const [pagination, setPagination] = useState(true);
41-
42-
const addItem = () => {
43-
setItems((currentItems) => [...currentItems, currentItems.length + 1]);
44-
};
45-
46-
const removeItem = () => {
47-
setItems((currentItems) => currentItems.slice(0, currentItems.length - 1));
48-
};
49-
50-
const updateItemsToShow = ({ target }) =>
51-
setItemsToShow(Number(target.value));
52-
53-
const toggle = (updater) => () => updater((o) => !o);
54-
55-
return (
56-
<Layout>
57-
<ControlsLayout>
58-
<ControlFields>
59-
<button onClick={addItem}>Add Item</button>
60-
<button onClick={removeItem}>Remove Item</button>
61-
</ControlFields>
62-
<ControlFields>
63-
<label>itemsToShow</label>
64-
<input
65-
type="number"
66-
value={itemsToShow}
67-
onChange={updateItemsToShow}
68-
/>
69-
</ControlFields>
70-
<ControlFields>
71-
<label>showArrows</label>
72-
<input
73-
type="checkbox"
74-
checked={showArrows}
75-
onChange={toggle(setShowArrows)}
76-
/>
77-
</ControlFields>
78-
<ControlFields>
79-
<label>pagination</label>
80-
<input
81-
type="checkbox"
82-
checked={pagination}
83-
onChange={toggle(setPagination)}
84-
/>
85-
</ControlFields>
86-
</ControlsLayout>
87-
<Carousel
88-
itemsToShow={itemsToShow}
89-
showArrows={showArrows}
90-
pagination={pagination}
91-
>
92-
{items.map((item) => (
93-
<Item key={item}>{item}</Item>
94-
))}
95-
</Carousel>
96-
</Layout>
97-
);
98-
};
3+
import DemoApp from './DemoApp';
994

1005
ReactDOM.render(<DemoApp />, document.getElementById("app"));

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
},
1616
"scripts": {
1717
"start": "concurrently -r -k -s all \"docz dev\" \"yarn run lint:watch\"",
18-
"demo": "rollup --config rollup.config.demo.js --watch",
18+
"demo": "concurrently -r -k -s all \"rollup --config rollup.config.demo.js --watch\" \"yarn run lint:watch\"",
1919
"lint:fix": "eslint src/. --fix",
2020
"lint:watch": "esw --watch --fix src/.",
2121
"test": "cross-env CI=1 react-scripts test --env=jsdom",

0 commit comments

Comments
 (0)