Skip to content

Commit e18f351

Browse files
kimcoderkimcoder
committed
fix: fix error for image length 1
1 parent 877ba89 commit e18f351

17 files changed

+2817
-1364
lines changed

‎.babelrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
{
66
"useBuiltIns": "usage",
77
"modules": false,
8+
"corejs": 3,
89
"targets": "> 0.25%, not dead"
910
}
1011
],
1112
"@babel/preset-react",
1213
"@babel/preset-typescript"
1314
],
1415
"plugins": [
15-
"@babel/plugin-transform-runtime",
1616
"@babel/plugin-proposal-class-properties"
1717
],
1818
"ignore": ["node_modules/**"]

‎.editorconfig

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎.prettierignore

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
dist
2-
src
3-
example
4-
webpack.config.js
2+
example/index.js
53
*.json
64
*.md
75
.babelrc

‎.prettierrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"tabWidth": 2,
33
"singleQuote": true,
4-
"printWidth": 120,
4+
"printWidth": 150,
55
"bracketSpacing": true,
66
"jsxBracketSameLine": true,
77
"useTabs": false,

‎example/App.jsx

Lines changed: 0 additions & 165 deletions
This file was deleted.

‎example/App.tsx

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import React, { useCallback, useState } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import CssBaseline from '@material-ui/core/CssBaseline';
4+
import AppBar from '@material-ui/core/AppBar';
5+
import List from '@material-ui/core/List';
6+
import ListItem from '@material-ui/core/ListItem';
7+
import ListItemText from '@material-ui/core/ListItemText';
8+
import ListSubheader from '@material-ui/core/ListSubheader';
9+
import Checkbox from '@material-ui/core/Checkbox';
10+
import FormControl from '@material-ui/core/FormControl';
11+
import InputLabel from '@material-ui/core/InputLabel';
12+
import MenuItem from '@material-ui/core/MenuItem';
13+
import Select from '@material-ui/core/Select';
14+
import SimpleImageSlider from '../dist';
15+
16+
const IMAGES = [
17+
{ url: 'images/1.jpg' },
18+
{ url: 'images/2.jpg' },
19+
{ url: 'images/3.jpg' },
20+
{ url: 'images/4.jpg' },
21+
{ url: 'images/5.jpg' },
22+
{ url: 'images/6.jpg' },
23+
{ url: 'images/7.jpg' }
24+
];
25+
26+
type SliderOptions = {
27+
useGPURender: boolean;
28+
showNavs: boolean;
29+
showBullets: boolean;
30+
navStyle: 1 | 2;
31+
duration: number;
32+
bgColor: string;
33+
};
34+
35+
const App: React.FC = () => {
36+
const [sliderOptions, setSliderOptions] = useState<SliderOptions>({
37+
useGPURender: true,
38+
showNavs: true,
39+
showBullets: true,
40+
navStyle: 1,
41+
duration: 0.5,
42+
bgColor: '#000'
43+
});
44+
45+
const [slideIndexText, setSlideIndexText] = useState<string>('');
46+
47+
const onClick = useCallback((idx: number, event: React.SyntheticEvent) => {
48+
console.log(`[App onClick] ${idx} ${event.currentTarget}`);
49+
}, []);
50+
51+
const onClickNav = useCallback((toRight: boolean) => {
52+
console.log(`[App onClickNav] ${toRight}`);
53+
}, []);
54+
55+
const onClickBullets = useCallback((idx: number) => {
56+
console.log(`[App onClickBullets] ${idx}`);
57+
}, []);
58+
59+
const onStartSlide = useCallback((idx: number, length: number) => {
60+
console.log(`[App onStartSlide] ${idx}/${length}`);
61+
setSlideIndexText(`${idx} / ${length}`);
62+
}, []);
63+
64+
const onCompleteSlide = useCallback((idx: number, length: number) => {
65+
console.log(`[App onCompleteSlide] ${idx}/${length}`);
66+
setSlideIndexText(`${idx} / ${length}`);
67+
}, []);
68+
69+
const updateOptions = useCallback(
70+
(key: string, value: boolean | number | string) => () => {
71+
console.log(`[App updateOptions] ${key} ${value}`);
72+
switch (key) {
73+
case 'useGPURender':
74+
setSliderOptions({ ...sliderOptions, useGPURender: value as boolean });
75+
break;
76+
case 'showNavs':
77+
setSliderOptions({ ...sliderOptions, showNavs: value as boolean });
78+
break;
79+
case 'showBullets':
80+
setSliderOptions({ ...sliderOptions, showBullets: value as boolean });
81+
break;
82+
case 'navStyle':
83+
setSliderOptions({ ...sliderOptions, navStyle: value as 1 | 2 });
84+
break;
85+
case 'duration':
86+
setSliderOptions({ ...sliderOptions, duration: value as number });
87+
break;
88+
case 'bgColor':
89+
setSliderOptions({ ...sliderOptions, bgColor: value as string });
90+
break;
91+
}
92+
},
93+
[sliderOptions]
94+
);
95+
96+
const onChangeSelect = useCallback(
97+
(event: React.ChangeEvent<{ name?: string; value: string | number }>) => {
98+
event.target.name && updateOptions(event.target.name, event.target.value)();
99+
},
100+
[updateOptions]
101+
);
102+
103+
return (
104+
<div style={{ textAlign: 'center' }}>
105+
<CssBaseline />
106+
<AppBar style={{ position: 'relative', height: 140, textAlign: 'center' }}>
107+
<h1 style={{ marginBottom: 5 }}>React Simple Image Slider Example</h1>
108+
<p>simple image slider component for react</p>
109+
<div>
110+
<iframe
111+
title="git icon"
112+
src="https://ghbtns.com/github-btn.html?user=kimcoder&repo=react-simple-image-slider&type=star"
113+
frameBorder="0"
114+
width="51px"
115+
height="30px"
116+
/>
117+
</div>
118+
</AppBar>
119+
<SimpleImageSlider
120+
style={{ margin: '0 auto', marginTop: '50px' }}
121+
width={896}
122+
height={504}
123+
images={IMAGES}
124+
showBullets={sliderOptions.showBullets}
125+
showNavs={sliderOptions.showNavs}
126+
useGPURender={sliderOptions.useGPURender}
127+
navStyle={sliderOptions.navStyle}
128+
slideDuration={sliderOptions.duration}
129+
onClick={onClick}
130+
onClickNav={onClickNav}
131+
onClickBullets={onClickBullets}
132+
onStartSlide={onStartSlide}
133+
onCompleteSlide={onCompleteSlide}
134+
/>
135+
136+
<div style={{ margin: '10px' }}>{slideIndexText || `${1} / ${IMAGES.length}`}</div>
137+
138+
<List
139+
subheader={
140+
<ListSubheader>
141+
<h1>Slider Settings</h1>
142+
</ListSubheader>
143+
}
144+
style={{ margin: '0 auto 100px auto', width: 900, textAlign: 'left' }}>
145+
{Object.entries(sliderOptions)
146+
.filter((item) => typeof item[1] === 'boolean')
147+
.map((item: [string, boolean]) => (
148+
<ListItem key={item[0]} button onClick={updateOptions(item[0], !item[1])}>
149+
<Checkbox checked={item[1]} disableRipple />
150+
<ListItemText primary={`${item[0]}`} />
151+
</ListItem>
152+
))}
153+
<ListItem>
154+
<FormControl component="fieldset">
155+
<InputLabel>NavStyle</InputLabel>
156+
<Select value={sliderOptions.navStyle} onChange={onChangeSelect} inputProps={{ name: 'navStyle' }}>
157+
<MenuItem value={1}>1</MenuItem>
158+
<MenuItem value={2}>2</MenuItem>
159+
</Select>
160+
</FormControl>
161+
</ListItem>
162+
<ListItem>
163+
<FormControl>
164+
<InputLabel>slideDuration</InputLabel>
165+
<Select value={sliderOptions.duration} onChange={onChangeSelect} inputProps={{ name: 'duration' }}>
166+
<MenuItem value={0.3}>0.3</MenuItem>
167+
<MenuItem value={0.5}>0.5</MenuItem>
168+
<MenuItem value={0.7}>0.9</MenuItem>
169+
<MenuItem value={1.2}>1.2</MenuItem>
170+
</Select>
171+
</FormControl>
172+
</ListItem>
173+
</List>
174+
</div>
175+
);
176+
};
177+
178+
ReactDOM.render(<App />, document.getElementById('App'));

0 commit comments

Comments
 (0)