Merge branch 'master' into feature/issue-29

Author: kimcoder

README.md

@@ -76,6 +76,8 @@ If You want to see more detail source,<br>
 |      **style**      |  `String`  | `Optional` | css object                                                                                                                                                        |           |
 |  **slideDuration**  |  `Number`  | `Optional` | css transition-duration property                                                                                                                                  | `0.5`     |
 |    **navStyle**     |  `Number`  | `Optional` | Arrow Navgation Style,<br>1 or 2                                                                                                                                  | `1`       |
+|     **navSize**     |  `Number`  | `Optional` | Arrow Size                                                                                                                                                        | 50        |
+|    **navMargin**    |  `Number`  | `Optional` | Arrow Margin                                                                                                                                                      | 30        |
 |    **showNavs**     | `Boolean`  | `Optional` | Toggle Arrow Navgation                                                                                                                                            | `true`    |
 |   **showBullets**   | `Boolean`  | `Optional` | Toggle Bullets                                                                                                                                                    | `true`    |
 |  **useGPURender**   | `Boolean`  | `Optional` | Toggle GPU Render                                                                                                                                                 | `true`    |

example/App.tsx

@@ -12,6 +12,7 @@ import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import SimpleImageSlider from '../dist';
+import Input from '@material-ui/core/Input';
 
 const IMAGES = [
   { url: 'images/1.jpg' },
@@ -28,6 +29,8 @@ type SliderOptions = {
   showNavs: boolean;
   showBullets: boolean;
   navStyle: 1 | 2;
+  navSize: number;
+  navMargin: number;
   duration: number;
   bgColor: string;
 };
@@ -38,6 +41,8 @@ const App: React.FC = () => {
     showNavs: true,
     showBullets: true,
     navStyle: 1,
+    navSize: 50,
+    navMargin: 30,
     duration: 0.5,
     bgColor: '#000'
   });
@@ -70,23 +75,17 @@ const App: React.FC = () => {
     (key: string, value: boolean | number | string) => () => {
       console.log(`[App updateOptions] ${key} ${value}`);
       switch (key) {
-        case 'useGPURender':
-          setSliderOptions({ ...sliderOptions, useGPURender: value as boolean });
-          break;
-        case 'showNavs':
-          setSliderOptions({ ...sliderOptions, showNavs: value as boolean });
-          break;
-        case 'showBullets':
-          setSliderOptions({ ...sliderOptions, showBullets: value as boolean });
-          break;
         case 'navStyle':
           setSliderOptions({ ...sliderOptions, navStyle: value as 1 | 2 });
           break;
+        case 'useGPURender':
+        case 'showNavs':
+        case 'showBullets':
         case 'duration':
-          setSliderOptions({ ...sliderOptions, duration: value as number });
-          break;
         case 'bgColor':
-          setSliderOptions({ ...sliderOptions, bgColor: value as string });
+        case 'navSize':
+        case 'navMargin':
+          setSliderOptions({ ...sliderOptions, [key]: value });
           break;
       }
     },
@@ -125,6 +124,8 @@ const App: React.FC = () => {
         showNavs={sliderOptions.showNavs}
         useGPURender={sliderOptions.useGPURender}
         navStyle={sliderOptions.navStyle}
+        navSize={sliderOptions.navSize}
+        navMargin={sliderOptions.navMargin}
         slideDuration={sliderOptions.duration}
         onClick={onClick}
         onClickNav={onClickNav}
@@ -151,7 +152,7 @@ const App: React.FC = () => {
             </ListItem>
           ))}
         <ListItem>
-          <FormControl component="fieldset">
+          <FormControl>
             <InputLabel>NavStyle</InputLabel>
             <Select value={sliderOptions.navStyle} onChange={onChangeSelect} inputProps={{ name: 'navStyle' }}>
               <MenuItem value={1}>1</MenuItem>
@@ -170,6 +171,28 @@ const App: React.FC = () => {
             </Select>
           </FormControl>
         </ListItem>
+        <ListItem>
+          <FormControl>
+            <InputLabel>Navigation Size</InputLabel>
+            <Input
+              value={sliderOptions.navSize}
+              type="number"
+              name="navSize"
+              onChange={(event) => updateOptions(event.target.name, event.target.value)()}
+            />
+          </FormControl>
+        </ListItem>
+        <ListItem>
+          <FormControl>
+            <InputLabel>Navigation Margin</InputLabel>
+            <Input
+              value={sliderOptions.navMargin}
+              type="number"
+              name="navMargin"
+              onChange={(event) => updateOptions(event.target.name, event.target.value)()}
+            />
+          </FormControl>
+        </ListItem>
       </List>
     </div>
   );

package-lock.json

@@ -14,6 +14,8 @@ export type SimpleImageSliderProps = {
   slideDuration?: number;
   bgColor?: string;
   useGPURender?: boolean;
+  navSize?: number;
+  navMargin?: number;
   navStyle?: ImageSliderNavStyle;
   onClick?: (idx: number, event: React.SyntheticEvent) => void;
   onClickNav?: (toRight: boolean) => void;
@@ -32,6 +34,8 @@ const SimpleImageSlider: React.FC<SimpleImageSliderProps> = ({
   slideDuration = 0.5,
   bgColor = '#000',
   useGPURender = true,
+  navSize = 50,
+  navMargin = 30,
   navStyle = ImageSliderNavStyle.NORMAL,
   onClick = undefined,
   onClickNav = undefined,
@@ -58,9 +62,10 @@ const SimpleImageSlider: React.FC<SimpleImageSliderProps> = ({
       if (isSliding) {
         return;
       }
+      const isRight: boolean = direction === ImageSliderNavDirection.RIGHT;
 
-      onClickNav?.(true);
-      slide(direction === ImageSliderNavDirection.RIGHT ? slideIdx + 1 : slideIdx - 1);
+      onClickNav?.(isRight);
+      slide(isRight ? slideIdx + 1 : slideIdx - 1);
     },
     [slideIdx, isSliding]
   );
@@ -124,10 +129,22 @@ const SimpleImageSlider: React.FC<SimpleImageSliderProps> = ({
 
         {/* Render Navigation */}
         {showNavs && images.length > 0 && slideIdx > 0 && (
-          <ImageSliderNavigation direction={ImageSliderNavDirection.LEFT} navStyle={navStyle} onClickNav={handleClickNav} />
+          <ImageSliderNavigation
+            direction={ImageSliderNavDirection.LEFT}
+            navStyle={navStyle}
+            navSize={navSize}
+            navMargin={navMargin}
+            onClickNav={handleClickNav}
+          />
         )}
         {showNavs && images.length > 0 && slideIdx < images.length - 1 && (
-          <ImageSliderNavigation direction={ImageSliderNavDirection.RIGHT} navStyle={navStyle} onClickNav={handleClickNav} />
+          <ImageSliderNavigation
+            direction={ImageSliderNavDirection.RIGHT}
+            navStyle={navStyle}
+            navSize={navSize}
+            navMargin={navMargin}
+            onClickNav={handleClickNav}
+          />
         )}
 
         {/* Render Bullets */}