From 031688c47995e7da27754fe96f9ca2f0b138b4d6 Mon Sep 17 00:00:00 2001
From: kimcoder <kimcoder@me.com>
Date: Thu, 8 Apr 2021 17:01:19 +0900
Subject: [PATCH] feat: add Props, navSize, navMargin

---
 README.md                     |   2 ++
 example/App.tsx               |  49 +++++++++++++++++++++++++---------
 package.json                  |   2 +-
 src/ImageSlider.tsx           |  20 ++++++++++++--
 src/ImageSliderNavigation.tsx |  22 +++++----------
 src/ImageSliderStyle.ts       |  10 +++++++
 src/global.d.ts               |   5 ++++
 src/images/arrow-bold.svg     |  20 ++++++++++++++
 src/images/arrow-left-1.png   | Bin 379 -> 0 bytes
 src/images/arrow-left-2.png   | Bin 444 -> 0 bytes
 src/images/arrow-normal.svg   |  20 ++++++++++++++
 src/images/arrow-right-1.png  | Bin 380 -> 0 bytes
 src/images/arrow-right-2.png  | Bin 440 -> 0 bytes
 13 files changed, 119 insertions(+), 31 deletions(-)
 create mode 100644 src/images/arrow-bold.svg
 delete mode 100644 src/images/arrow-left-1.png
 delete mode 100644 src/images/arrow-left-2.png
 create mode 100644 src/images/arrow-normal.svg
 delete mode 100644 src/images/arrow-right-1.png
 delete mode 100644 src/images/arrow-right-2.png

diff --git a/README.md b/README.md
index 3918ab0..7faa61e 100644
--- a/README.md
+++ b/README.md
@@ -75,6 +75,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`    |
diff --git a/example/App.tsx b/example/App.tsx
index 7df7690..987b55d 100644
--- a/example/App.tsx
+++ b/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>
   );
diff --git a/package.json b/package.json
index 9eb3331..7924514 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-simple-image-slider",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "simple image slider component for react",
   "main": "dist/index.js",
   "scripts": {
diff --git a/src/ImageSlider.tsx b/src/ImageSlider.tsx
index b1728ae..0ac2109 100644
--- a/src/ImageSlider.tsx
+++ b/src/ImageSlider.tsx
@@ -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,
@@ -125,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 */}
diff --git a/src/ImageSliderNavigation.tsx b/src/ImageSliderNavigation.tsx
index 2f36cf9..56de2d6 100644
--- a/src/ImageSliderNavigation.tsx
+++ b/src/ImageSliderNavigation.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import styles from './ImageSliderStyle';
-import ImageNavArrowLeft1 from './images/arrow-left-1.png';
-import ImageNavArrowLeft2 from './images/arrow-left-2.png';
-import ImageNavArrowRight1 from './images/arrow-right-1.png';
-import ImageNavArrowRight2 from './images/arrow-right-2.png';
+import ImageNavArrowBold from './images/arrow-bold.svg';
+import ImageNavArrowNormal from './images/arrow-normal.svg';
 
 export enum ImageSliderNavStyle {
   NORMAL = 1,
@@ -17,27 +15,21 @@ export enum ImageSliderNavDirection {
 
 type ImageSliderNavigationProps = {
   navStyle: ImageSliderNavStyle;
+  navSize: number;
+  navMargin: number;
   direction: ImageSliderNavDirection;
   onClickNav: (direction: ImageSliderNavDirection) => (event: React.SyntheticEvent<HTMLButtonElement>) => void;
 };
 
 const altNavArrowLeft = 'slide to left';
 const altNavArrowRight = 'slide to right';
-const images: { [key: string]: string } = {
-  [`image-${ImageSliderNavDirection.LEFT}-${ImageSliderNavStyle.NORMAL}`]: ImageNavArrowLeft1,
-  [`image-${ImageSliderNavDirection.RIGHT}-${ImageSliderNavStyle.NORMAL}`]: ImageNavArrowRight1,
-  [`image-${ImageSliderNavDirection.LEFT}-${ImageSliderNavStyle.BOLD}`]: ImageNavArrowLeft2,
-  [`image-${ImageSliderNavDirection.RIGHT}-${ImageSliderNavStyle.BOLD}`]: ImageNavArrowRight2
-};
 
 const ImageSliderNavigation: React.FC<ImageSliderNavigationProps> = (props: ImageSliderNavigationProps) => {
   return (
-    <button
-      type="button"
-      style={props.direction === ImageSliderNavDirection.LEFT ? styles.NavLeft : styles.NavRight}
-      onClick={props.onClickNav(props.direction)}>
+    <button type="button" style={styles.getNavStyle(props.direction, props.navSize, props.navMargin)} onClick={props.onClickNav(props.direction)}>
       <img
-        src={images[`image-${props.direction}-${props.navStyle}`]}
+        src={props.navStyle === ImageSliderNavStyle.NORMAL ? ImageNavArrowNormal : ImageNavArrowBold}
+        style={{ width: '100%', ...(props.direction === ImageSliderNavDirection.RIGHT && { transform: 'rotate(180deg)' }) }}
         alt={props.direction === ImageSliderNavDirection.LEFT ? altNavArrowLeft : altNavArrowRight}
       />
     </button>
diff --git a/src/ImageSliderStyle.ts b/src/ImageSliderStyle.ts
index c32a173..0d384c7 100644
--- a/src/ImageSliderStyle.ts
+++ b/src/ImageSliderStyle.ts
@@ -1,3 +1,5 @@
+import { ImageSliderNavDirection } from './ImageSliderNavigation';
+
 const basic = {
   display: 'block',
   margin: '0',
@@ -69,5 +71,13 @@ export default {
       transition: `${duration}s`,
       backgroundImage: `url(${url})`,
       transform: isGpuRender ? `translate3d(${idx * 100}%, 0px, 0px)` : `translate(${idx * 100}%, 0px)`
+    } as React.CSSProperties),
+  getNavStyle: (direction: ImageSliderNavDirection, size: number, margin: number): React.CSSProperties =>
+    ({
+      ...basic,
+      ...basicNav,
+      ...(direction === ImageSliderNavDirection.LEFT ? { left: `${margin}px` } : { right: `${margin}px` }),
+      marginTop: `-${Math.floor(size / 2)}px`,
+      width: `${size}px`
     } as React.CSSProperties)
 };
diff --git a/src/global.d.ts b/src/global.d.ts
index 5eec77f..4210c53 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -2,3 +2,8 @@ declare module '*.png' {
   const value: string;
   export = value;
 }
+
+declare module '*.svg' {
+  const value: string;
+  export = value;
+}
diff --git a/src/images/arrow-bold.svg b/src/images/arrow-bold.svg
new file mode 100644
index 0000000..8719b08
--- /dev/null
+++ b/src/images/arrow-bold.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <filter id="0ls8o9a99a" width="168.9%" height="218.6%" x="-34.5%" y="-59.3%" filterUnits="objectBoundingBox">
+            <feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/>
+            <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+        </filter>
+        <path id="rs87bry78b" d="M19 7L20.413 8.414 11.707 17.12 2.999 8.414 4.413 7 11.707 14.291z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-24 -27) translate(24 27) rotate(90 11.707 12.06)">
+                    <use fill="#000" filter="url(#0ls8o9a99a)" xlink:href="#rs87bry78b"/>
+                    <use fill="#FFF" xlink:href="#rs87bry78b"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/images/arrow-left-1.png b/src/images/arrow-left-1.png
deleted file mode 100644
index de4ef3df116d34e3d1f42d1bb6a3bdf9216bbe8d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 379
zcmV->0fhdEP)<h;3K|Lk000e1NJLTq001%o001%w1ONa4v^GFG0003(Nkl<ZScUD?
zu}T9$5C-6X!Q&uaAcZJ42^K;sQ;0r6EbV;($s42z2q|Kv<Q04Yi<Cmr`4EOHENqf9
zogyhh#zL;p+ubYfpIGE>%Uk$ZX8sun^v?!}5-E{?L~{R|MH43XRuKfjTVGbwYwV~Y
z2;y52S&#2gRYHD<wG5xoRzgzZZh|W`5GWvj35CLE2|8jU$Vj#pbi`I}GGgy2D&lHd
zBI3>k4e>>fg!t1<LGlI&0}0}Re?}3IgZ<=1<YRf!#gTmsGG20c+?l?Md?pX4Fj~ki
z&gwVuT;yvuI<YYf#2~`CkKuGz4#Uccm*FKoWs)qzoLx?aJB1w#d!JYt{${i=8aqD2
zC?GC|jMy1E;?E5Y`OUmOqN0MNOrtk?-n&GtAmaH9BDBy(6QLdg7=)-IELeEXDUmHj
Zz5(dz2rJW2uYdpm002ovPDHLkV1g}OnZE!4

diff --git a/src/images/arrow-left-2.png b/src/images/arrow-left-2.png
deleted file mode 100644
index b6ee1819f68d3b1a8f52b39e719233284dadf2a1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 444
zcmV;t0Ym<YP)<h;3K|Lk000e1NJLTq001%o001%w1ONa4v^GFG0004lNkl<ZScUD@
zy-EW?5C`x%L@q>)A}UyE5gQ9p4?&0#Z3MNk@CAGZL0>`q=)@*qZ5=h%f?|=z+D?;*
zBv|A_EJWh%olEw--HUkt)xw);XZf+q?CwyL^ye=S5fUMPgt!s7*eEB-_(t8&5i%=B
z@3s6gb!bD#EM%H?yfv;@8KVK=1dIB;HJ||ziRYKKEgB{RjEF?#b>WcaDFNPzk65IB
z)?q+IMF0^s0Yica5F#gd6$DWcKtxTzkRSqt1QQsf4FNz#W5wfOB0OSjj#nQ!a&s47
z@e=@qMrOAQRn9!*Qay@84TU5qHL+W)apozz)P+VE)7y?gbeEqw^)i@y;xLl}Q}!^Z
z8_$?Io2knf+}q_cdol)waAs;>V9s0yh)9`p#z2u4Q}QriM9Sni14BNUv?VeZE(1gy
zrq5;$N{tp{#o=S>SLP~9Lpo+*fjPOQbsE$&)jQ10PUey}XpGFTZ<i_<Gj0EsNk-^G
m7!#vz>I~JwxQvj0ihKZop#XN$#63I!0000<MNUMnLSTX`y|hvQ

diff --git a/src/images/arrow-normal.svg b/src/images/arrow-normal.svg
new file mode 100644
index 0000000..55d79f4
--- /dev/null
+++ b/src/images/arrow-normal.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <filter id="8utpkffr2a" width="171.8%" height="232.4%" x="-35.9%" y="-66.2%" filterUnits="objectBoundingBox">
+            <feOffset in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/>
+            <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+        </filter>
+        <path id="6inzdknobb" d="M20 6.999L20.707 7.706 12.354 16.06 4 7.706 4.707 6.999 12.354 14.646z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-67 -27) translate(67 27) rotate(90 12.354 11.53)">
+                    <use fill="#000" filter="url(#8utpkffr2a)" xlink:href="#6inzdknobb"/>
+                    <use fill="#FFF" xlink:href="#6inzdknobb"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/images/arrow-right-1.png b/src/images/arrow-right-1.png
deleted file mode 100644
index 22aa8be7f8704e4853c963303f0d88da5f274be8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 380
zcmV-?0fYXDP)<h;3K|Lk000e1NJLTq001%o001%w1ONa4v^GFG0003)Nkl<ZSi|ks
zy=nqM6b0b3;1UoPEJTT=jd=r!jcwW#f<=lvg@xGJiWVUjd4Oyq<{?5}APE7Vz(NTA
zft6l=NCe~D*}^kT+?jUaWA@&AW*~6C5hF43uMwaY%-j78JpGI9It{rPh9a|%hn&VR
zkW}UVdn_{j)EEYmM6uKw&2)x=cu1jq-PRcf63I}IsMC-TJ3~Wk3=z>8DxxuD<dB*C
zFm%MkI6yRpjF=fZVy+Dx*)yH_LS+122%I20CewRbiO9<{E?pu1S3@?&;~Q>~cJsUZ
zL48YfUvY;#d>4iPL%3++BZ5DS27(<cN44Mwq@mpGs5f>L_tH|DmU;cEbHRH^SVoWa
zB(hF7=W!PiAPgijqZmjKHkT_~3{nu3Z<?s;Ny|VI$l?mQ-;C1MsfG78kOw$KI6Fqp
a6j=l74gs-oPa53-0000<MNUMnLSTaMcAgLb

diff --git a/src/images/arrow-right-2.png b/src/images/arrow-right-2.png
deleted file mode 100644
index 8b9b112f61bbb703bb66b4e5eb3cbea0272845cb..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 440
zcmV;p0Z0CcP)<h;3K|Lk000e1NJLTq001%o001%w1ONa4v^GFG0004hNkl<ZSi|ks
zze~eF6bJAZf}}c$LZr9|;%`S6HwOp*10guowGPgX{UZcd9ZGR^vHk`(CpQOeOx@}r
zYAkd)bE(%m?cE9W>!NuFS#t0pdGFpkV)XlqG9*L(Fv25w_PuOfjgw>ELmxYPM#!u0
zFxHGJvw8-Bqy&%nLC*jXf8^$pF&l&U62Ct<zw0pdZU%wmXx`g6tx2Xl^O?aUK4nf6
zW`9~`APDPbB9#Flf;rYQFeGK>yyB58fv7UoW`Ky9fg&2_o-<&i!`w<{S7AViV5(XM
zhS(S&BA7$Tgzelw5y4!9veLH4O!KB^BzZGXTzz^L$XPXqN60x?czYB?`I-XCgAq<N
z8w#;bljLEm>nl;92~Hr-iIKpacng8*T~-3qg|!5Bo)`$^WHb`E8E+v_w-qaaLB1g%
z$l}mzXd@7aL;1~8+%glG-!(|f!Cu@l5g5cJpH`Miw5BIe)#cJ~(#l8G2BMFjAUrd!
idcOiAsFflA6nO`=h5VdlzXgH-0000<MNUMnLSTYAIJ;#4