diff --git a/CHANGELOG.md b/CHANGELOG.md index 164ea58..31d1a90 100644 --- 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 index 641f39f..11d8323 100644 --- a/example/App.jsx +++ b/example/App.jsx @@ -93,8 +93,8 @@ class App extends React.Component { + + + React Simple Image Slider Example + + + + + + +
+ + + diff --git a/index.d.ts b/index.d.ts index 9b85bf8..48f0f04 100644 --- 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 index fcac5e3..c2a8646 100644 --- 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 index b309983..118edf0 100644 --- 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 index 33fc816..38e2b76 100644 --- 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 index 2fb6fe8..df7e7a0 100644 --- 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)`, }), };