feat: add Props, navSize, navMargin

kimcoder · kimcoder · commit 031688c47995 · 2021-04-08T17:01:19.000+09:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/images/arrow-left-2.png b/src/images/arrow-left-2.png
diff --git a/src/images/arrow-normal.svg 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
diff --git a/src/images/arrow-right-2.png b/src/images/arrow-right-2.png

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-simple-image-slider",`
`3`		`- "version": "2.0.4",`
	`3`	`+ "version": "2.1.0",`
`4`	`4`	`"description": "simple image slider component for react",`
`5`	`5`	`"main": "dist/index.js",`
`6`	`6`	`"scripts": {`
Original file line number	Diff line number	Diff line change
`@@ -2,3 +2,8 @@ declare module '*.png' {`
`2`	`2`	`const value: string;`
`3`	`3`	`export = value;`
`4`	`4`	`}`
	`5`	`+`
	`6`	`+declare module '*.svg' {`
	`7`	`+ const value: string;`
	`8`	`+ export = value;`
	`9`	`+}`