data-feed - npm Package Compare versions

Comparing version 0.0.28 to 0.0.30

dist/feed/index.d.ts

@@ -23,3 +23,9 @@ import React from 'react';
     renderFilterField?: (item: FeedFieldProps) => React.ReactNode;
+    /** used to autoload feed when scrolling to the end */
+    autoLoad?: boolean;
+    /** used with autoLoad property*/
+    containerRef?: React.RefObject<HTMLElement>;
+    /** Toggles if if filter is hidden */
+    hideFilter?: boolean;
 }
-export declare function DataFeed<T = any>({ data, all, onChange, sortOptions, filterFields, renderItem, filterClassName, renderSortOption, showTotal, renderSearch, renderCleanButton, texts: initialTexts, searchField, sortNameField, sortModeField, renderFilterField, }: DataFeedProps<T>): JSX.Element;
+export declare function DataFeed<T = any>({ data, all, onChange, sortOptions, filterFields, renderItem, filterClassName, renderSortOption, showTotal, renderSearch, renderCleanButton, texts: initialTexts, searchField, sortNameField, sortModeField, renderFilterField, autoLoad, containerRef, hideFilter, }: DataFeedProps<T>): JSX.Element;

dist/filter/index.d.ts

 import React from 'react';
+import './index.scss';
 import { FeedSortOption, FeedButonProps, RenderSortOptionProps, FeedFieldProps } from '../interfaces';
-import './index.scss';
 interface FeedFilterProps {
@@ -5,0 +5,0 @@ onChange: (values: any, sort: any) => void;

dist/index.esm.js

@@ -1,6 +0,6 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { debounce } from 'lodash';
 import classNames from 'classnames';
 import { useForm, FormContext, useFormContext } from 'react-hook-form';
 import equal from 'deep-equal';
-import { debounce } from 'lodash';
 
@@ -59,2 +59,3 @@ /*! *****************************************************************************
 };
+//# sourceMappingURL=field-wrapper.js.map
 
@@ -90,2 +91,3 @@ var FeedField = function (_a) {
 };
+//# sourceMappingURL=index.js.map
 
@@ -132,2 +134,3 @@ function getDefaultSort(sortOptions, sortNameField, sortModeField) {
 };
+//# sourceMappingURL=sort.js.map
 
@@ -172,5 +175,5 @@ function getDefaultValues(fields) {
     }, [fields]);
-    var handleChange = useCallback(function () {
-        handleDebounce();
-    }, [fields]);
+    // const handleChange = useCallback(() => {
+    //     handleDebounce();
+    // }, [fields]);
     var handleDebounce = useCallback(function () {
@@ -218,2 +221,3 @@ var values = getValues();
 };
+//# sourceMappingURL=index.js.map
 
@@ -257,2 +261,3 @@ var FeedArrayUtil = {
 };
+//# sourceMappingURL=array-util.js.map
 
@@ -272,9 +277,14 @@ var RenderUtil = {
 };
+//# sourceMappingURL=render-util.js.map
 
 function DataFeed(_a) {
-    var data = _a.data, all = _a.all, onChange = _a.onChange, sortOptions = _a.sortOptions, filterFields = _a.filterFields, renderItem = _a.renderItem, filterClassName = _a.filterClassName, renderSortOption = _a.renderSortOption, showTotal = _a.showTotal, renderSearch = _a.renderSearch, renderCleanButton = _a.renderCleanButton, initialTexts = _a.texts, searchField = _a.searchField, sortNameField = _a.sortNameField, sortModeField = _a.sortModeField, renderFilterField = _a.renderFilterField;
-    var showLoad = data && all && data.length > 0 && data.length < all;
+    var data = _a.data, all = _a.all, onChange = _a.onChange, sortOptions = _a.sortOptions, filterFields = _a.filterFields, renderItem = _a.renderItem, filterClassName = _a.filterClassName, renderSortOption = _a.renderSortOption, showTotal = _a.showTotal, renderSearch = _a.renderSearch, renderCleanButton = _a.renderCleanButton, initialTexts = _a.texts, searchField = _a.searchField, sortNameField = _a.sortNameField, sortModeField = _a.sortModeField, renderFilterField = _a.renderFilterField, autoLoad = _a.autoLoad, containerRef = _a.containerRef, hideFilter = _a.hideFilter;
+    var loadMoreActive = data && all && data.length > 0 && data.length < all;
+    var loadMoreRef = useRef(null);
     var _b = useState({ skip: 0 }), changeParams = _b[0], setChangeParams = _b[1];
     var texts = initialTexts || {};
-    var debounceChange = useCallback(debounce(onChange, 200), [onChange]);
+    var debounceChange = useCallback(debounce(function (p) {
+        // console.log(p, 'load');
+        onChange(p);
+    }, 200), [onChange]);
     useEffect(function () {
@@ -286,12 +296,55 @@ debounceChange(changeParams);
     }, [changeParams]);
+    var loadMore = useCallback(function () {
+        if (loadMoreActive) {
+            setChangeParams(__assign(__assign({}, changeParams), { skip: data ? data.length : 0 }));
+        }
+    }, [changeParams, data, loadMoreActive]);
+    var onScroll = useCallback(function () {
+        if (containerRef && containerRef.current != null) {
+            var scrollNode = containerRef.current;
+            var scrollContainerBottomPosition = scrollNode.scrollTop + scrollNode.clientHeight;
+            var scrollPosition = scrollNode.scrollHeight;
+            if (scrollPosition <= scrollContainerBottomPosition) {
+                loadMore();
+            }
+        }
+        else {
+            var loadMoreNode = loadMoreRef && loadMoreRef.current;
+            var offsetHeightForStartLoad = 200;
+            var scrollNode = document.scrollingElement || document.documentElement;
+            var scrollFeedContainerBottomPosition = scrollNode.scrollTop + scrollNode.clientHeight + offsetHeightForStartLoad;
+            var loadMorePosition = loadMoreNode && loadMoreNode.offsetTop;
+            if (loadMorePosition && loadMorePosition <= scrollFeedContainerBottomPosition) {
+                loadMore();
+            }
+        }
+    }, [containerRef, loadMore, loadMoreRef]);
+    useEffect(function () {
+        if (autoLoad) {
+            var ref_1 = containerRef && containerRef.current;
+            if (ref_1 != null) {
+                ref_1.addEventListener('scroll', onScroll);
+            }
+            else {
+                window.addEventListener('scroll', onScroll);
+            }
+            return function () {
+                if (ref_1 != null) {
+                    ref_1.removeEventListener('scroll', onScroll);
+                }
+                else {
+                    window.removeEventListener('scroll', onScroll);
+                }
+            };
+        }
+    }, [autoLoad, onScroll]);
     return (React.createElement("div", { className: "feed" },
-        React.createElement(FeedFilter, { onChange: function (filterValues, sort) {
-                setChangeParams(__assign(__assign(__assign({}, changeParams), sort), filterValues));
-            }, sortOptions: sortOptions || [], all: all, renderCleanButton: renderCleanButton ? renderCleanButton : RenderUtil.renderButton, fields: filterFields || [], className: filterClassName, renderSortOption: renderSortOption, showTotal: showTotal, renderSearch: renderSearch, texts: texts, searchField: searchField, sortNameField: sortNameField, sortModeField: sortModeField, renderField: renderFilterField }),
+        hideFilter === true ? null : (React.createElement(FeedFilter, { onChange: function (filterValues, sort) {
+                setChangeParams(__assign(__assign(__assign(__assign({}, changeParams), sort), filterValues), { skip: 0 }));
+            }, sortOptions: sortOptions || [], all: all, renderCleanButton: renderCleanButton ? renderCleanButton : RenderUtil.renderButton, fields: filterFields || [], className: filterClassName, renderSortOption: renderSortOption, showTotal: showTotal, renderSearch: renderSearch, texts: texts, searchField: searchField, sortNameField: sortNameField, sortModeField: sortModeField, renderField: renderFilterField })),
         React.createElement("div", { className: "feed__data" }, (data || []).map(function (item, i) { return (React.createElement("div", { key: i }, renderItem(item))); })),
-        showLoad ? (React.createElement("div", { className: "feed__load" },
-            React.createElement("div", { onClick: function () {
-                    setChangeParams(__assign(__assign({}, changeParams), { skip: data ? data.length : 0 }));
-                } }, texts['load'] ? texts['load'] : 'See More'))) : null));
+        loadMoreActive ? (React.createElement("div", { className: "feed__load", ref: loadMoreRef },
+            React.createElement("div", { onClick: loadMore }, texts['load'] ? texts['load'] : 'See More'))) : null));
 }
+//# sourceMappingURL=index.js.map
 
@@ -310,2 +363,3 @@ var FeedAttribute = function (_a) {
 };
+//# sourceMappingURL=index.js.map
 
@@ -319,6 +373,6 @@ var DataFeedItem = function (_a) {
         React.createElement("div", { className: "feed-item__content" },
-            title || titleRight ? (React.createElement("div", { className: "feed-item__top feed-item__child" },
+            title || titleRight ? (React.createElement("div", { className: "feed-item__top" },
                 React.createElement("div", { className: "feed-item__title" }, title),
                 React.createElement("div", { className: "feed-item__top-right" }, titleRight))) : null,
-            attributeSet.map(function (set, setKey) { return (React.createElement("div", { key: setKey, className: "feed-item__attribute-set feed-item__child" }, set.map(function (_a, i) {
+            attributeSet.map(function (set, setKey) { return (React.createElement("div", { key: setKey, className: "feed-item__attribute-set" }, set.map(function (_a, i) {
                 var width = _a.width, attrProps = __rest(_a, ["width"]);
@@ -328,5 +382,6 @@ return (React.createElement("div", { key: i },
             }))); }),
-            actionSet.length > 0 ? (React.createElement("div", { className: "feed-item__action-set feed-item__child" }, actionSet.map(function (action, i) { return (React.createElement("div", { key: i }, action)); }))) : null),
+            actionSet.length > 0 ? (React.createElement("div", { className: "feed-item__action-set" }, actionSet.map(function (action, i) { return (React.createElement("div", { key: i }, action)); }))) : null),
         right ? React.createElement("div", { className: "feed-item__right" }, right) : null));
 };
+//# sourceMappingURL=index.js.map
 
@@ -336,3 +391,4 @@ function useFeedFilterContext() {
 }
+//# sourceMappingURL=index.js.map
 
 export { DataFeed, DataFeedItem, FeedArrayUtil, RenderUtil, useFeedFilterContext };

dist/index.js

@@ -9,6 +9,6 @@ 'use strict';
 var React__default = _interopDefault(React);
+var lodash = require('lodash');
 var classNames = _interopDefault(require('classnames'));
 var reactHookForm = require('react-hook-form');
 var equal = _interopDefault(require('deep-equal'));
-var lodash = require('lodash');
 
@@ -67,2 +67,3 @@ /*! *****************************************************************************
 };
+//# sourceMappingURL=field-wrapper.js.map
 
@@ -98,2 +99,3 @@ var FeedField = function (_a) {
 };
+//# sourceMappingURL=index.js.map
 
@@ -140,2 +142,3 @@ function getDefaultSort(sortOptions, sortNameField, sortModeField) {
 };
+//# sourceMappingURL=sort.js.map
 
@@ -180,5 +183,5 @@ function getDefaultValues(fields) {
     }, [fields]);
-    var handleChange = React.useCallback(function () {
-        handleDebounce();
-    }, [fields]);
+    // const handleChange = useCallback(() => {
+    //     handleDebounce();
+    // }, [fields]);
     var handleDebounce = React.useCallback(function () {
@@ -226,2 +229,3 @@ var values = getValues();
 };
+//# sourceMappingURL=index.js.map
 
@@ -265,2 +269,3 @@ var FeedArrayUtil = {
 };
+//# sourceMappingURL=array-util.js.map
 
@@ -280,9 +285,14 @@ var RenderUtil = {
 };
+//# sourceMappingURL=render-util.js.map
 
 function DataFeed(_a) {
-    var data = _a.data, all = _a.all, onChange = _a.onChange, sortOptions = _a.sortOptions, filterFields = _a.filterFields, renderItem = _a.renderItem, filterClassName = _a.filterClassName, renderSortOption = _a.renderSortOption, showTotal = _a.showTotal, renderSearch = _a.renderSearch, renderCleanButton = _a.renderCleanButton, initialTexts = _a.texts, searchField = _a.searchField, sortNameField = _a.sortNameField, sortModeField = _a.sortModeField, renderFilterField = _a.renderFilterField;
-    var showLoad = data && all && data.length > 0 && data.length < all;
+    var data = _a.data, all = _a.all, onChange = _a.onChange, sortOptions = _a.sortOptions, filterFields = _a.filterFields, renderItem = _a.renderItem, filterClassName = _a.filterClassName, renderSortOption = _a.renderSortOption, showTotal = _a.showTotal, renderSearch = _a.renderSearch, renderCleanButton = _a.renderCleanButton, initialTexts = _a.texts, searchField = _a.searchField, sortNameField = _a.sortNameField, sortModeField = _a.sortModeField, renderFilterField = _a.renderFilterField, autoLoad = _a.autoLoad, containerRef = _a.containerRef, hideFilter = _a.hideFilter;
+    var loadMoreActive = data && all && data.length > 0 && data.length < all;
+    var loadMoreRef = React.useRef(null);
     var _b = React.useState({ skip: 0 }), changeParams = _b[0], setChangeParams = _b[1];
     var texts = initialTexts || {};
-    var debounceChange = React.useCallback(lodash.debounce(onChange, 200), [onChange]);
+    var debounceChange = React.useCallback(lodash.debounce(function (p) {
+        // console.log(p, 'load');
+        onChange(p);
+    }, 200), [onChange]);
     React.useEffect(function () {
@@ -294,12 +304,55 @@ debounceChange(changeParams);
     }, [changeParams]);
+    var loadMore = React.useCallback(function () {
+        if (loadMoreActive) {
+            setChangeParams(__assign(__assign({}, changeParams), { skip: data ? data.length : 0 }));
+        }
+    }, [changeParams, data, loadMoreActive]);
+    var onScroll = React.useCallback(function () {
+        if (containerRef && containerRef.current != null) {
+            var scrollNode = containerRef.current;
+            var scrollContainerBottomPosition = scrollNode.scrollTop + scrollNode.clientHeight;
+            var scrollPosition = scrollNode.scrollHeight;
+            if (scrollPosition <= scrollContainerBottomPosition) {
+                loadMore();
+            }
+        }
+        else {
+            var loadMoreNode = loadMoreRef && loadMoreRef.current;
+            var offsetHeightForStartLoad = 200;
+            var scrollNode = document.scrollingElement || document.documentElement;
+            var scrollFeedContainerBottomPosition = scrollNode.scrollTop + scrollNode.clientHeight + offsetHeightForStartLoad;
+            var loadMorePosition = loadMoreNode && loadMoreNode.offsetTop;
+            if (loadMorePosition && loadMorePosition <= scrollFeedContainerBottomPosition) {
+                loadMore();
+            }
+        }
+    }, [containerRef, loadMore, loadMoreRef]);
+    React.useEffect(function () {
+        if (autoLoad) {
+            var ref_1 = containerRef && containerRef.current;
+            if (ref_1 != null) {
+                ref_1.addEventListener('scroll', onScroll);
+            }
+            else {
+                window.addEventListener('scroll', onScroll);
+            }
+            return function () {
+                if (ref_1 != null) {
+                    ref_1.removeEventListener('scroll', onScroll);
+                }
+                else {
+                    window.removeEventListener('scroll', onScroll);
+                }
+            };
+        }
+    }, [autoLoad, onScroll]);
     return (React__default.createElement("div", { className: "feed" },
-        React__default.createElement(FeedFilter, { onChange: function (filterValues, sort) {
-                setChangeParams(__assign(__assign(__assign({}, changeParams), sort), filterValues));
-            }, sortOptions: sortOptions || [], all: all, renderCleanButton: renderCleanButton ? renderCleanButton : RenderUtil.renderButton, fields: filterFields || [], className: filterClassName, renderSortOption: renderSortOption, showTotal: showTotal, renderSearch: renderSearch, texts: texts, searchField: searchField, sortNameField: sortNameField, sortModeField: sortModeField, renderField: renderFilterField }),
+        hideFilter === true ? null : (React__default.createElement(FeedFilter, { onChange: function (filterValues, sort) {
+                setChangeParams(__assign(__assign(__assign(__assign({}, changeParams), sort), filterValues), { skip: 0 }));
+            }, sortOptions: sortOptions || [], all: all, renderCleanButton: renderCleanButton ? renderCleanButton : RenderUtil.renderButton, fields: filterFields || [], className: filterClassName, renderSortOption: renderSortOption, showTotal: showTotal, renderSearch: renderSearch, texts: texts, searchField: searchField, sortNameField: sortNameField, sortModeField: sortModeField, renderField: renderFilterField })),
         React__default.createElement("div", { className: "feed__data" }, (data || []).map(function (item, i) { return (React__default.createElement("div", { key: i }, renderItem(item))); })),
-        showLoad ? (React__default.createElement("div", { className: "feed__load" },
-            React__default.createElement("div", { onClick: function () {
-                    setChangeParams(__assign(__assign({}, changeParams), { skip: data ? data.length : 0 }));
-                } }, texts['load'] ? texts['load'] : 'See More'))) : null));
+        loadMoreActive ? (React__default.createElement("div", { className: "feed__load", ref: loadMoreRef },
+            React__default.createElement("div", { onClick: loadMore }, texts['load'] ? texts['load'] : 'See More'))) : null));
 }
+//# sourceMappingURL=index.js.map
 
@@ -318,2 +371,3 @@ var FeedAttribute = function (_a) {
 };
+//# sourceMappingURL=index.js.map
 
@@ -327,6 +381,6 @@ var DataFeedItem = function (_a) {
         React__default.createElement("div", { className: "feed-item__content" },
-            title || titleRight ? (React__default.createElement("div", { className: "feed-item__top feed-item__child" },
+            title || titleRight ? (React__default.createElement("div", { className: "feed-item__top" },
                 React__default.createElement("div", { className: "feed-item__title" }, title),
                 React__default.createElement("div", { className: "feed-item__top-right" }, titleRight))) : null,
-            attributeSet.map(function (set, setKey) { return (React__default.createElement("div", { key: setKey, className: "feed-item__attribute-set feed-item__child" }, set.map(function (_a, i) {
+            attributeSet.map(function (set, setKey) { return (React__default.createElement("div", { key: setKey, className: "feed-item__attribute-set" }, set.map(function (_a, i) {
                 var width = _a.width, attrProps = __rest(_a, ["width"]);
@@ -336,5 +390,6 @@ return (React__default.createElement("div", { key: i },
             }))); }),
-            actionSet.length > 0 ? (React__default.createElement("div", { className: "feed-item__action-set feed-item__child" }, actionSet.map(function (action, i) { return (React__default.createElement("div", { key: i }, action)); }))) : null),
+            actionSet.length > 0 ? (React__default.createElement("div", { className: "feed-item__action-set" }, actionSet.map(function (action, i) { return (React__default.createElement("div", { key: i }, action)); }))) : null),
         right ? React__default.createElement("div", { className: "feed-item__right" }, right) : null));
 };
+//# sourceMappingURL=index.js.map
 
@@ -344,2 +399,3 @@ function useFeedFilterContext() {
 }
+//# sourceMappingURL=index.js.map
 
@@ -346,0 +402,0 @@ exports.DataFeed = DataFeed;

package.json

 {
     "name": "data-feed",
-    "version": "0.0.28",
+    "version": "0.0.30",
     "description": "Data feed view",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

57028

increased by9.71%

Lines of code

1090

increased by11.91%

No dependency changes