Skip to content

Commit 102ccf8

Browse files
sag1vsag1v
authored
Merge pull request #136 from sag1v/next
Next merge to master
2 parents 1c8b1bf + 3a3a79a commit 102ccf8

File tree

15 files changed

+743
-104
lines changed

15 files changed

+743
-104
lines changed

‎.yarnrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
strict-ssl false

‎README.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,16 +70,26 @@ class App extends Component {
7070

7171
## Development
7272

73-
```console
73+
```console
7474
git clone https://github.com/sag1v/react-elastic-carousel.git
7575
cd react-elastic-carousel
7676
yarn
77+
```
78+
79+
### To run the docs site run
80+
81+
```console
7782
yarn start
7883
```
7984

85+
### to run a demo Application run
86+
87+
```console
88+
yarn demo
89+
```
90+
8091
The application is running at http://localhost:8888
8192

8293
## License
8394

8495
MIT © [sag1v](https://github.com/sag1v)
85-

‎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: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import DemoApp from './DemoApp';
4+
5+
ReactDOM.render(<DemoApp />, document.getElementById("app"));

‎doczrc.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ export default {
2424
'isRTL',
2525
'enableAutoPlay',
2626
'itemPadding',
27+
'outerSpacing',
28+
'showEmptySlots',
2729
'itemPosition',
2830
'easing',
2931
'renderArrow',
@@ -81,4 +83,4 @@ export default {
8183
// },
8284
// }
8385
// },
84-
}
86+
}

‎package.json‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
{
22
"name": "react-elastic-carousel",
3-
"version": "0.9.5",
3+
"version": "0.10.0-beta.1",
44
"description": "A flexible and responsive carousel component for react",
55
"author": "sag1v (Sagiv Ben Giat)",
66
"license": "MIT",
77
"repository": "sag1v/react-elastic-carousel",
88
"main": "dist/index.js",
99
"module": "dist/index.es.js",
10+
"types": "./dist/index.d.ts",
1011
"jsnext:main": "dist/index.es.js",
1112
"engines": {
1213
"node": ">=8",
1314
"npm": ">=5"
1415
},
1516
"scripts": {
1617
"start": "concurrently -r -k -s all \"docz dev\" \"yarn run lint:watch\"",
18+
"demo": "concurrently -r -k -s all \"rollup --config rollup.config.demo.js --watch\" \"yarn run lint:watch\"",
1719
"lint:fix": "eslint src/. --fix",
1820
"lint:watch": "esw --watch --fix src/.",
1921
"test": "cross-env CI=1 react-scripts test --env=jsdom",
@@ -24,7 +26,9 @@
2426
"build-doc": "docz build",
2527
"deploy-doc": "gh-pages -d demo"
2628
},
27-
"types": "./dist/index.d.ts",
29+
"lint-staged": {
30+
"*.js": "eslint src/. --fix"
31+
},
2832
"dependencies": {
2933
"classnames": "^2.2.6",
3034
"react-only-when": "^1.0.2",
@@ -58,6 +62,7 @@
5862
"@babel/plugin-syntax-import-meta": "^7.0.0",
5963
"@babel/preset-env": "^7.3.4",
6064
"@babel/preset-react": "^7.0.0",
65+
"@rollup/plugin-replace": "^2.3.4",
6166
"babel-eslint": "^9.0.0",
6267
"concurrently": "^4.1.0",
6368
"cross-env": "^5.1.4",
@@ -77,6 +82,8 @@
7782
"eslint-watch": "^4.0.2",
7883
"gatsby-plugin-google-analytics": "^2.1.34",
7984
"gh-pages": "^2.2.0",
85+
"husky": "^4.3.0",
86+
"lint-staged": "^10.5.2",
8087
"prettier": "1.14.2",
8188
"prettier-eslint": "^8.8.2",
8289
"react": "^16.12.0",
@@ -90,8 +97,10 @@
9097
"rollup-plugin-babel": "^4.3.2",
9198
"rollup-plugin-commonjs": "^9.1.3",
9299
"rollup-plugin-copy": "^3.3.0",
100+
"rollup-plugin-livereload": "^2.0.0",
93101
"rollup-plugin-node-resolve": "^3.3.0",
94102
"rollup-plugin-postcss": "^1.6.2",
103+
"rollup-plugin-serve": "^1.1.0",
95104
"rollup-plugin-url": "^1.4.0",
96105
"styled-components": "^5.1.0"
97106
},

‎rollup.config.demo.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import babel from "rollup-plugin-babel";
2+
import commonjs from "rollup-plugin-commonjs";
3+
import postcss from "rollup-plugin-postcss";
4+
import resolve from "rollup-plugin-node-resolve";
5+
import url from "rollup-plugin-url";
6+
import alias from "rollup-plugin-alias";
7+
import serve from "rollup-plugin-serve";
8+
import replace from "@rollup/plugin-replace";
9+
import livereload from 'rollup-plugin-livereload'
10+
11+
import libName from "./libName";
12+
13+
import * as ReactNamedExports from 'react';
14+
import * as ReactIsNamedExports from 'react-is';
15+
16+
export default {
17+
input: `demoApp/src/index.js`,
18+
output: [
19+
{
20+
file: "demoApp/dist/bundle.js",
21+
format: "cjs",
22+
sourcemap: true,
23+
exports: "named",
24+
},
25+
],
26+
plugins: [
27+
alias({
28+
"react-elastic-carousel": `src/${libName}/index.js`,
29+
}),
30+
//external(),
31+
postcss({
32+
modules: false,
33+
}),
34+
url(),
35+
babel({
36+
exclude: "node_modules/**",
37+
plugins: ["@babel/external-helpers"],
38+
}),
39+
resolve(),
40+
commonjs({
41+
include: "node_modules/**",
42+
namedExports: {
43+
"node_modules/react-is/index.js": Object.keys(ReactIsNamedExports),
44+
"node_modules/react/index.js": Object.keys(ReactNamedExports),
45+
},
46+
}),
47+
serve({
48+
open: true,
49+
contentBase: "demoApp/dist",
50+
}),
51+
livereload(),
52+
replace({
53+
"process.env.NODE_ENV": JSON.stringify("production"),
54+
}),
55+
],
56+
};

‎src/docs/mdx/outerSpacing.mdx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
name: outerSpacing
3+
route: /outerSpacing
4+
menu: Examples
5+
---
6+
7+
import {Playground, Props } from 'docz';
8+
import Carousel from 'react-elastic-carousel';
9+
import Item from '../components/SimpleItem';
10+
11+
# outerSpacing
12+
#### Sets a margin to the beginning and the end of the slider
13+
#### (not compatible with `verticalMode` yet !)
14+
15+
<Playground>
16+
<Carousel itemPadding={[0, 20]} itemsToShow={3} outerSpacing={100}>
17+
<Item>1</Item>
18+
<Item>2</Item>
19+
<Item>3</Item>
20+
<Item>4</Item>
21+
<Item>5</Item>
22+
<Item>6</Item>
23+
</Carousel>
24+
</Playground>

‎src/docs/mdx/showEmptySlots.mdx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
name: showEmptySlots
3+
route: /showEmptySlots
4+
menu: Examples
5+
---
6+
7+
import {Playground, Props } from 'docz';
8+
import Carousel from 'react-elastic-carousel';
9+
import Item from '../components/SimpleItem';
10+
11+
# showEmptySlots
12+
#### Shows empty slots when there are less children than items to show (`children.length` < `itemsToShow`)
13+
#### (not compatible with `verticalMode` yet !)
14+
15+
<Playground>
16+
<Carousel itemsToShow={5} showEmptySlots>
17+
<Item>1</Item>
18+
<Item>2</Item>
19+
</Carousel>
20+
</Playground>

0 commit comments

Comments
 (0)