Merge pull request #2 from kimcoder/feature/issue-1

kimcoder · web-flow · commit 767374b6f938 · 2020-03-30T20:23:24.000+09:00
[feature/issue-1] modify props types about width and height
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change Log
 
+1.0.3 (March 30, 2018)
+- modify props types about width and height. ( number -> string or number )
+  - can set value like this. '100%' or '100px' or 100
+
 1.0.2 (October 08, 2018)
 - add index.d.ts (for typescript).
 
diff --git a/example/App.jsx b/example/App.jsx
@@ -93,8 +93,8 @@ class App extends React.Component {
                 </AppBar>
                 <SimpleImageSlider
                     style={{ margin: "0 auto", marginTop: "50px" }}
-                    width={896}
-                    height={504}
+                    width={200}
+                    height={200}
                     images={images}
                     showBullets={this.state.showBullets}
                     showNavs={this.state.showNavs}
diff --git a/example/mobile.html b/example/mobile.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>React Simple Image Slider Example</title>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"">
+        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
+        <meta name="theme-color" content="#000000">
+    </head>
+    <body>
+        <div id="App"></div>
+        <script src="index.js"></script>
+    </body>
+</html>
diff --git a/index.d.ts b/index.d.ts
@@ -6,8 +6,8 @@ export interface RSISImage {
 }
 
 export interface RSISProps {
-    width: number;
-    height: number;
+    width: string;
+    height: string;
     images: RSISImage[],
 
     style?: CSSStyleDeclaration,
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-simple-image-slider",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "simple image slider component for react",
   "main": "dist/ImageSlider.js",
   "scripts": {
diff --git a/src/ImageSlider.jsx b/src/ImageSlider.jsx
@@ -13,7 +13,7 @@ class ImageSlider extends React.Component {
             idx: 0,
             sliding: false,
             currentSlideStyle: styles.getImageSlide(this.getImageUrl(0), this.props.slideDuration, 0),
-            nextSlideStyle: styles.getImageSlide(this.getImageUrl(1), this.props.slideDuration, this.props.width),
+            nextSlideStyle: styles.getImageSlide(this.getImageUrl(1), this.props.slideDuration, 1),
         };
         ImagePreLoader.load(this.getImageUrl(2));
     }
@@ -49,8 +49,8 @@ class ImageSlider extends React.Component {
         const toNext = (idx > this.state.idx);
         const currentUrl = this.getImageUrl(this.state.idx);
         const nextUrl = this.getImageUrl(idx);
-        const nextReadyX = toNext ? this.props.width : -this.props.width;
-        const currentOffetX = toNext ? -this.props.width : this.props.width;
+        const nextReadyX = toNext ? 1 : -1;
+        const currentOffetX = toNext ? -1 : 1;
 
         // ready to animation slides
         this.setState({
diff --git a/src/ImageSliderPropTypes.js b/src/ImageSliderPropTypes.js
@@ -5,8 +5,14 @@ const isValidNavStyle = prop => (/[1-2]/.test(prop) && typeof (prop) === "number
 export default {
     propTypes: {
         // Required
-        width: PropTypes.number.isRequired,
-        height: PropTypes.number.isRequired,
+        width: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+        ]).isRequired,
+        height: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+        ]).isRequired,
         images: PropTypes.arrayOf(PropTypes.shape({
             url: PropTypes.string.isRequired,
         })).isRequired,
diff --git a/src/ImageSliderStyle.js b/src/ImageSliderStyle.js
@@ -72,10 +72,10 @@ export default {
         width,
         height,
     }),
-    getImageSlide: (url, duration, x, isGpuRender) => assignObjects(basicSlide, {
+    getImageSlide: (url, duration, idx, isGpuRender) => assignObjects(basicSlide, {
         overflow: "hidden",
         transition: `${duration}s`,
         backgroundImage: `url(${url})`,
-        transform: isGpuRender ? `translate3d(${x}px, 0px, 0px)` : `translate(${x}px, 0px)`,
+        transform: isGpuRender ? `translate3d(${idx * 100}%, 0px, 0px)` : `translate(${idx * 100}%, 0px)`,
     }),
 };

Original file line number	Diff line number	Diff line change
`@@ -6,8 +6,8 @@ export interface RSISImage {`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`export interface RSISProps {`
`9`		`- width: number;`
`10`		`- height: number;`
	`9`	`+ width: string;`
	`10`	`+ height: string;`
`11`	`11`	`images: RSISImage[],`
`12`	`12`
`13`	`13`	`style?: CSSStyleDeclaration,`
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": "1.0.2",`
	`3`	`+ "version": "1.0.3",`
`4`	`4`	`"description": "simple image slider component for react",`
`5`	`5`	`"main": "dist/ImageSlider.js",`
`6`	`6`	`"scripts": {`