@artistry/react - npm Package Compare versions

Comparing version 0.5.16 to 0.5.17

dist/scripts/components/CardCarousel.d.ts

@@ -8,2 +8,3 @@ import * as React from 'react';
     carouselSpacing?: number;
+    onChangeSize?: (index: number, slideSize?: number, oldSlideSize?: number) => any;
 }
@@ -18,4 +19,7 @@ export interface ICardCarouselState {
     componentDidMount(): void;
+    componentWillUnmount(): void;
+    onChangeSize: (slideSize: number, oldSlideSize: number) => void;
+    resizeHandler: () => void;
     componentDidUpdate(): void;
     render(): JSX.Element;
 }

dist/scripts/components/CardCarousel.js

@@ -23,43 +23,49 @@ "use strict";
         };
+        this.onChangeSize = (slideSize, oldSlideSize) => {
+            if (this.props.onChangeSize) {
+                let newIndex = Math.floor(this.props.activeIndex * oldSlideSize / slideSize);
+                this.props.onChangeSize(newIndex, slideSize, oldSlideSize);
+            }
+        };
+        this.resizeHandler = () => {
+            let { minWidth, cardSpacing, carouselSpacing } = this.props;
+            let slideSize = 1;
+            let element = this.element.current;
+            if (element) {
+                minWidth = minWidth || 300;
+                cardSpacing = cardSpacing || 10;
+                carouselSpacing = carouselSpacing || 10;
+                minWidth += cardSpacing;
+                let width = element.clientWidth;
+                if (width > minWidth + cardSpacing) {
+                    let remainder = (width - cardSpacing) % minWidth;
+                    slideSize = (width - cardSpacing - remainder) / minWidth;
+                }
+            }
+            if (!this.state.rendered) {
+                let oldSlideSize = this.state.slideSize;
+                this.setState({
+                    rendered: true,
+                    slideSize: slideSize
+                });
+                this.onChangeSize(slideSize, oldSlideSize);
+            }
+            else if (slideSize !== this.state.slideSize) {
+                let oldSlideSize = this.state.slideSize;
+                this.setState({
+                    slideSize: slideSize
+                });
+                this.onChangeSize(slideSize, oldSlideSize);
+            }
+        };
     }
     componentDidMount() {
-        let { minWidth, cardSpacing, carouselSpacing } = this.props;
-        let slideSize = 1;
-        let element = this.element.current;
-        if (element) {
-            minWidth = minWidth || 300;
-            cardSpacing = cardSpacing || 10;
-            carouselSpacing = carouselSpacing || 10;
-            minWidth += cardSpacing;
-            let width = element.clientWidth;
-            if (width > minWidth + cardSpacing) {
-                let remainder = (width - cardSpacing) % minWidth;
-                slideSize = (width - cardSpacing - remainder) / minWidth;
-            }
-        }
-        this.setState({
-            rendered: true,
-            slideSize: slideSize
-        });
+        this.resizeHandler();
+        window.addEventListener('resize', this.resizeHandler);
     }
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.resizeHandler);
+    }
     componentDidUpdate() {
-        let { minWidth, cardSpacing, carouselSpacing } = this.props;
-        let slideSize = 1;
-        let element = this.element.current;
-        if (element) {
-            minWidth = minWidth || 300;
-            cardSpacing = cardSpacing || 10;
-            carouselSpacing = carouselSpacing || 10;
-            minWidth += cardSpacing;
-            let width = element.clientWidth;
-            if (width > minWidth + cardSpacing) {
-                let remainder = (width - cardSpacing) % minWidth;
-                slideSize = (width - cardSpacing - remainder) / minWidth;
-            }
-        }
-        if (slideSize !== this.state.slideSize) {
-            this.setState({
-                slideSize: slideSize
-            });
-        }
+        this.resizeHandler();
     }
@@ -66,0 +72,0 @@ render() {

package.json

 {
   "name": "@artistry/react",
-  "version": "0.5.16",
+  "version": "0.5.17",
   "description": "A powerful component library for React",
@@ -5,0 +5,0 @@ "repository": "https://www.github.com/sjohnsonaz/artistry-react.git",

No alert changes

Improved metrics

Total package byte prevSize

229787

increased by0.26%

Lines of code

5694

increased by0.18%

No dependency changes