data-feed - npm Package Compare versions

Comparing version 0.0.16 to 0.0.17

dist/feed/index.d.ts

@@ -18,3 +18,7 @@ import React from 'react';
     renderSortOption?: (props: RenderSortOptionProps) => React.ReactNode;
+    sortLabel?: string;
+    totalLabel?: string;
+    showTotal?: boolean;
+    renderSearch?: (value: FeedFilterOptions, onChange: (param: FeedFilterOptions) => void) => React.ReactNode;
 }
 export declare const DataFeed: React.FC<DataFeedProps>;

dist/filter/index.d.ts

@@ -18,4 +18,8 @@ import React from 'react';
     className?: string;
+    sortLabel?: string;
+    totalLabel?: string;
+    showTotal?: boolean;
+    renderSearch?: (value: FeedFilterOptions, onChange: (param: FeedFilterOptions) => void) => React.ReactNode;
 }
 export declare const FeedFilter: React.FC<FeedFilterProps>;
 export {};

dist/index.esm.js

@@ -61,11 +61,2 @@ import React, { useCallback, useState, useEffect } from 'react';
 
-function useInputTextCallback(action) {
-    var params = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        params[_i - 1] = arguments[_i];
-    }
-    return useCallback(function (e) {
-        action(e.currentTarget.value);
-    }, params);
-}
 function useInputCheckboxCallback(action) {
@@ -129,9 +120,9 @@ var params = [];
 var FeedFilter = function (_a) {
-    var onChange = _a.onChange, initSortOptions = _a.sortOptions, all = _a.all, loadOptions = _a.loadOptions, renderButton = _a.renderButton, cleanButtonProps = _a.cleanButtonProps, refreshButtonProps = _a.refreshButtonProps, fields = _a.fields, onClean = _a.onClean, onRefresh = _a.onRefresh, className = _a.className, renderSortOption = _a.renderSortOption;
+    var onChange = _a.onChange, initSortOptions = _a.sortOptions, all = _a.all, loadOptions = _a.loadOptions, renderButton = _a.renderButton, cleanButtonProps = _a.cleanButtonProps, refreshButtonProps = _a.refreshButtonProps, fields = _a.fields, onClean = _a.onClean, onRefresh = _a.onRefresh, className = _a.className, renderSortOption = _a.renderSortOption, sortLabel = _a.sortLabel, totalLabel = _a.totalLabel, showTotal = _a.showTotal, renderSearch = _a.renderSearch;
     var _b = useState(initSortOptions || []), sortOptions = _b[0], setSortOptions = _b[1];
     var _c = useState(true), cleanDisabled = _c[0], setCleanDisabled = _c[1];
     var _d = useState(feedDefaultOptions(loadOptions.skip, sortOptions)), options = _d[0], setOptions = _d[1];
-    var handleSearchChange = useInputTextCallback(function (value) {
-        setOptions(__assign(__assign({}, options), { search: value }));
-    }, options);
+    // const handleSearchChange = useInputTextCallback(value => {
+    //     setOptions({ ...options, search: value });
+    // }, options);
     var handleSort = useCallback(function (sort) {
@@ -154,16 +145,32 @@ var mode = sort.mode;
     return (React.createElement("div", { className: classNames('feed-filter', className) },
-        options && sortOptions.length ? (React.createElement("div", { className: "feed-filter__sort" }, sortOptions.map(function (x, i) {
-            var _a;
-            var sort = options.sort;
-            var isActive = x.key === maybe(sort).return(function (s) { return s.key; });
-            return renderSortOption ? (React.createElement(React.Fragment, { key: i }, renderSortOption({
-                option: x,
-                onClick: handleSort,
-            }))) : (React.createElement("div", { key: i, className: classNames('feed-filter__sort-option', {
-                    'feed-filter__sort-option--active': isActive,
-                }), onClick: function () { return handleSort(x); } },
-                React.createElement("div", null, "" + (x.name || x.key) + (isActive ? (((_a = sort) === null || _a === void 0 ? void 0 : _a.mode) === 'asc' ? ' +' : ' -') : ''))));
-        }))) : null,
-        React.createElement("div", { className: "feed-filter__search" },
-            React.createElement("input", { type: "search", value: options.search || '', onChange: handleSearchChange, className: "feed-filter__search-input" })),
+        options && sortOptions.length ? (React.createElement("div", { className: "feed-filter__sort" },
+            sortLabel ? (React.createElement(React.Fragment, { key: "key" },
+                React.createElement("div", { className: "feed-filter__sort-option" }, sortLabel))) : null,
+            React.createElement(React.Fragment, { key: "list" }, sortOptions.map(function (x, i) {
+                var _a;
+                var sort = options.sort;
+                var name = x.name, key = x.key, mode = x.mode;
+                return renderSortOption ? (React.createElement(React.Fragment, { key: i }, renderSortOption({
+                    option: x,
+                    onClick: handleSort,
+                }))) : (React.createElement("div", { key: i, className: classNames('feed-filter__sort-option') },
+                    React.createElement("div", { className: classNames('feed-filter__sort-option__text', (_a = {},
+                            _a["feed-filter__sort-option__text--" + mode] = !!mode,
+                            _a)), onClick: function () { return handleSort(x); } }, "" + (x.name || x.key))));
+            })))) : null,
+        React.createElement("div", { className: "feed-filter__search" }, renderSearch ? (renderSearch(options, setOptions)) : (React.createElement("input", { type: "search", value: options.search || '', onChange: function (e) {
+                return setOptions(__assign(__assign({}, options), { search: e.currentTarget.value }));
+            }, className: "feed-filter__search-input" }))
+        //     renderSearch ?
+        //         renderSearch(options, setOptions)
+        //     (
+        //     <input
+        //     type="search"
+        //     value={options.search || ''}
+        //     onChange={(e: React.FormEvent<HTMLInputElement>) =>
+        //         setOptions({ ...options, search: e.currentTarget.value })
+        //     }
+        //     className="feed-filter__search-input"
+        // />)
+        ),
         fields && options ? (React.createElement("div", { className: "feed-filter__field" }, fields.map(function (props, i) {
@@ -177,3 +184,3 @@ var value = options[props.name];
         React.createElement("div", { className: "feed-filter__bottom" },
-            React.createElement("div", { className: "feed-filter__all" }, (all || 0) > 0 ? all : ''),
+            React.createElement("div", { className: "feed-filter__all" }, showTotal === false ? null : (React.createElement(React.Fragment, null, (all || 0) > 0 ? "" + (totalLabel ? totalLabel + " " : '') + all : ''))),
             React.createElement("div", { className: "feed-filter__action" },
@@ -239,3 +246,3 @@ React.createElement("div", null, renderButton(__assign({ text: 'Clean', onClick: onClean, disabled: cleanDisabled }, cleanButtonProps))),
 var DataFeed = function (_a) {
-    var data = _a.data, all = _a.all, onChange = _a.onChange, sortOptions = _a.sortOptions, renderButton = _a.renderButton, cleanButtonProps = _a.cleanButtonProps, refreshButtonProps = _a.refreshButtonProps, fields = _a.fields, loadText = _a.loadText, renderItem = _a.renderItem, filterClassName = _a.filterClassName, renderSortOption = _a.renderSortOption;
+    var data = _a.data, all = _a.all, onChange = _a.onChange, sortOptions = _a.sortOptions, renderButton = _a.renderButton, cleanButtonProps = _a.cleanButtonProps, refreshButtonProps = _a.refreshButtonProps, fields = _a.fields, loadText = _a.loadText, renderItem = _a.renderItem, filterClassName = _a.filterClassName, renderSortOption = _a.renderSortOption, sortLabel = _a.sortLabel, totalLabel = _a.totalLabel, showTotal = _a.showTotal, renderSearch = _a.renderSearch;
     var _b = useState({
@@ -258,3 +265,3 @@ skip: 0,
     return (React.createElement("div", { className: "feed" },
-        React.createElement(FeedFilter, { onChange: onChange ? onChange : function () { }, sortOptions: sortOptions, all: all, loadOptions: loadOptions, renderButton: renderButton ? renderButton : RenderUtil.renderButton, cleanButtonProps: cleanButtonProps, refreshButtonProps: refreshButtonProps, fields: fields, onClean: handleClean, onRefresh: handleRefresh, className: filterClassName, renderSortOption: renderSortOption }),
+        React.createElement(FeedFilter, { onChange: onChange ? onChange : function () { }, sortOptions: sortOptions, all: all, loadOptions: loadOptions, renderButton: renderButton ? renderButton : RenderUtil.renderButton, cleanButtonProps: cleanButtonProps, refreshButtonProps: refreshButtonProps, fields: fields, onClean: handleClean, onRefresh: handleRefresh, className: filterClassName, renderSortOption: renderSortOption, sortLabel: sortLabel, totalLabel: totalLabel, showTotal: showTotal, renderSearch: renderSearch }),
         React.createElement("div", { className: "feed__data" }, (data || []).map(function (item, i) { return (React.createElement("div", { key: i }, renderItem(item))); })),
@@ -261,0 +268,0 @@ showLoad ? (React.createElement("div", { className: "feed__load" },

dist/index.js

@@ -68,11 +68,2 @@ 'use strict';
 
-function useInputTextCallback(action) {
-    var params = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        params[_i - 1] = arguments[_i];
-    }
-    return React.useCallback(function (e) {
-        action(e.currentTarget.value);
-    }, params);
-}
 function useInputCheckboxCallback(action) {
@@ -136,9 +127,9 @@ var params = [];
 var FeedFilter = function (_a) {
-    var onChange = _a.onChange, initSortOptions = _a.sortOptions, all = _a.all, loadOptions = _a.loadOptions, renderButton = _a.renderButton, cleanButtonProps = _a.cleanButtonProps, refreshButtonProps = _a.refreshButtonProps, fields = _a.fields, onClean = _a.onClean, onRefresh = _a.onRefresh, className = _a.className, renderSortOption = _a.renderSortOption;
+    var onChange = _a.onChange, initSortOptions = _a.sortOptions, all = _a.all, loadOptions = _a.loadOptions, renderButton = _a.renderButton, cleanButtonProps = _a.cleanButtonProps, refreshButtonProps = _a.refreshButtonProps, fields = _a.fields, onClean = _a.onClean, onRefresh = _a.onRefresh, className = _a.className, renderSortOption = _a.renderSortOption, sortLabel = _a.sortLabel, totalLabel = _a.totalLabel, showTotal = _a.showTotal, renderSearch = _a.renderSearch;
     var _b = React.useState(initSortOptions || []), sortOptions = _b[0], setSortOptions = _b[1];
     var _c = React.useState(true), cleanDisabled = _c[0], setCleanDisabled = _c[1];
     var _d = React.useState(feedDefaultOptions(loadOptions.skip, sortOptions)), options = _d[0], setOptions = _d[1];
-    var handleSearchChange = useInputTextCallback(function (value) {
-        setOptions(__assign(__assign({}, options), { search: value }));
-    }, options);
+    // const handleSearchChange = useInputTextCallback(value => {
+    //     setOptions({ ...options, search: value });
+    // }, options);
     var handleSort = React.useCallback(function (sort) {
@@ -161,16 +152,32 @@ var mode = sort.mode;
     return (React__default.createElement("div", { className: classNames('feed-filter', className) },
-        options && sortOptions.length ? (React__default.createElement("div", { className: "feed-filter__sort" }, sortOptions.map(function (x, i) {
-            var _a;
-            var sort = options.sort;
-            var isActive = x.key === tsMaybeMonad.maybe(sort).return(function (s) { return s.key; });
-            return renderSortOption ? (React__default.createElement(React__default.Fragment, { key: i }, renderSortOption({
-                option: x,
-                onClick: handleSort,
-            }))) : (React__default.createElement("div", { key: i, className: classNames('feed-filter__sort-option', {
-                    'feed-filter__sort-option--active': isActive,
-                }), onClick: function () { return handleSort(x); } },
-                React__default.createElement("div", null, "" + (x.name || x.key) + (isActive ? (((_a = sort) === null || _a === void 0 ? void 0 : _a.mode) === 'asc' ? ' +' : ' -') : ''))));
-        }))) : null,
-        React__default.createElement("div", { className: "feed-filter__search" },
-            React__default.createElement("input", { type: "search", value: options.search || '', onChange: handleSearchChange, className: "feed-filter__search-input" })),
+        options && sortOptions.length ? (React__default.createElement("div", { className: "feed-filter__sort" },
+            sortLabel ? (React__default.createElement(React__default.Fragment, { key: "key" },
+                React__default.createElement("div", { className: "feed-filter__sort-option" }, sortLabel))) : null,
+            React__default.createElement(React__default.Fragment, { key: "list" }, sortOptions.map(function (x, i) {
+                var _a;
+                var sort = options.sort;
+                var name = x.name, key = x.key, mode = x.mode;
+                return renderSortOption ? (React__default.createElement(React__default.Fragment, { key: i }, renderSortOption({
+                    option: x,
+                    onClick: handleSort,
+                }))) : (React__default.createElement("div", { key: i, className: classNames('feed-filter__sort-option') },
+                    React__default.createElement("div", { className: classNames('feed-filter__sort-option__text', (_a = {},
+                            _a["feed-filter__sort-option__text--" + mode] = !!mode,
+                            _a)), onClick: function () { return handleSort(x); } }, "" + (x.name || x.key))));
+            })))) : null,
+        React__default.createElement("div", { className: "feed-filter__search" }, renderSearch ? (renderSearch(options, setOptions)) : (React__default.createElement("input", { type: "search", value: options.search || '', onChange: function (e) {
+                return setOptions(__assign(__assign({}, options), { search: e.currentTarget.value }));
+            }, className: "feed-filter__search-input" }))
+        //     renderSearch ?
+        //         renderSearch(options, setOptions)
+        //     (
+        //     <input
+        //     type="search"
+        //     value={options.search || ''}
+        //     onChange={(e: React.FormEvent<HTMLInputElement>) =>
+        //         setOptions({ ...options, search: e.currentTarget.value })
+        //     }
+        //     className="feed-filter__search-input"
+        // />)
+        ),
         fields && options ? (React__default.createElement("div", { className: "feed-filter__field" }, fields.map(function (props, i) {
@@ -184,3 +191,3 @@ var value = options[props.name];
         React__default.createElement("div", { className: "feed-filter__bottom" },
-            React__default.createElement("div", { className: "feed-filter__all" }, (all || 0) > 0 ? all : ''),
+            React__default.createElement("div", { className: "feed-filter__all" }, showTotal === false ? null : (React__default.createElement(React__default.Fragment, null, (all || 0) > 0 ? "" + (totalLabel ? totalLabel + " " : '') + all : ''))),
             React__default.createElement("div", { className: "feed-filter__action" },
@@ -246,3 +253,3 @@ React__default.createElement("div", null, renderButton(__assign({ text: 'Clean', onClick: onClean, disabled: cleanDisabled }, cleanButtonProps))),
 var DataFeed = function (_a) {
-    var data = _a.data, all = _a.all, onChange = _a.onChange, sortOptions = _a.sortOptions, renderButton = _a.renderButton, cleanButtonProps = _a.cleanButtonProps, refreshButtonProps = _a.refreshButtonProps, fields = _a.fields, loadText = _a.loadText, renderItem = _a.renderItem, filterClassName = _a.filterClassName, renderSortOption = _a.renderSortOption;
+    var data = _a.data, all = _a.all, onChange = _a.onChange, sortOptions = _a.sortOptions, renderButton = _a.renderButton, cleanButtonProps = _a.cleanButtonProps, refreshButtonProps = _a.refreshButtonProps, fields = _a.fields, loadText = _a.loadText, renderItem = _a.renderItem, filterClassName = _a.filterClassName, renderSortOption = _a.renderSortOption, sortLabel = _a.sortLabel, totalLabel = _a.totalLabel, showTotal = _a.showTotal, renderSearch = _a.renderSearch;
     var _b = React.useState({
@@ -265,3 +272,3 @@ skip: 0,
     return (React__default.createElement("div", { className: "feed" },
-        React__default.createElement(FeedFilter, { onChange: onChange ? onChange : function () { }, sortOptions: sortOptions, all: all, loadOptions: loadOptions, renderButton: renderButton ? renderButton : RenderUtil.renderButton, cleanButtonProps: cleanButtonProps, refreshButtonProps: refreshButtonProps, fields: fields, onClean: handleClean, onRefresh: handleRefresh, className: filterClassName, renderSortOption: renderSortOption }),
+        React__default.createElement(FeedFilter, { onChange: onChange ? onChange : function () { }, sortOptions: sortOptions, all: all, loadOptions: loadOptions, renderButton: renderButton ? renderButton : RenderUtil.renderButton, cleanButtonProps: cleanButtonProps, refreshButtonProps: refreshButtonProps, fields: fields, onClean: handleClean, onRefresh: handleRefresh, className: filterClassName, renderSortOption: renderSortOption, sortLabel: sortLabel, totalLabel: totalLabel, showTotal: showTotal, renderSearch: renderSearch }),
         React__default.createElement("div", { className: "feed__data" }, (data || []).map(function (item, i) { return (React__default.createElement("div", { key: i }, renderItem(item))); })),
@@ -268,0 +275,0 @@ showLoad ? (React__default.createElement("div", { className: "feed__load" },

dist/interfaces/filter-options.d.ts

@@ -16,1 +16,5 @@ export interface FeedFilterOptions {
 }
+export interface RenderSortOptionProps {
+    option: FeedSortOption;
+    onClick: (option: FeedSortOption) => void;
+}

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

47471

increased by6.58%

Lines of code

894

increased by4.44%

No dependency changes