data-feed - npm Package Compare versions

Comparing version 0.0.15 to 0.0.16

dist/feed/index.d.ts

 import React from 'react';
-import { FeedFilterOptions, FeedSortOption, FeedButonProps } from '../interfaces';
+import { FeedFilterOptions, FeedSortOption, FeedButonProps, RenderSortOptionProps } from '../interfaces';
 import { FeedFieldProps } from '../field';
@@ -15,8 +15,6 @@ import './index.scss';
     refreshButtonProps?: Partial<FeedButonProps>;
-    sortEmpty?: React.ReactNode;
-    sortAsc?: React.ReactNode;
-    sortDesc?: React.ReactNode;
     loadText?: string;
     filterClassName?: string;
+    renderSortOption?: (props: RenderSortOptionProps) => React.ReactNode;
 }
 export declare const DataFeed: React.FC<DataFeedProps>;

dist/filter/index.d.ts

 import React from 'react';
-import { FeedFilterOptions, FeedSortOption, FeedButonProps, FeedFilterLoadOptions } from '../interfaces';
+import { FeedFilterOptions, FeedSortOption, FeedButonProps, FeedFilterLoadOptions, RenderSortOptionProps } from '../interfaces';
 import './index.scss';
@@ -15,6 +15,4 @@ import { FeedFieldProps } from '../field';
     refreshButtonProps?: Partial<FeedButonProps>;
-    sortEmpty: React.ReactNode;
-    sortAsc: React.ReactNode;
-    sortDesc: React.ReactNode;
     fields?: FeedFieldProps[];
+    renderSortOption?: (props: RenderSortOptionProps) => React.ReactNode;
     className?: string;
@@ -21,0 +19,0 @@ }

dist/index.esm.js

@@ -59,2 +59,3 @@ import React, { useCallback, useState, useEffect } from 'react';
 };
+//# sourceMappingURL=field-wrapper.js.map
 
@@ -88,2 +89,3 @@ function useInputTextCallback(action) {
 }
+//# sourceMappingURL=index.js.map
 
@@ -115,2 +117,3 @@ var FeedField = function (props) {
 };
+//# sourceMappingURL=index.js.map
 
@@ -128,4 +131,4 @@ function feedDefaultOptions(skip, sortOptions) {
 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, sortEmpty = _a.sortEmpty, sortAsc = _a.sortAsc, sortDesc = _a.sortDesc, fields = _a.fields, onClean = _a.onClean, onRefresh = _a.onRefresh, className = _a.className;
-    var _b = useState(initSortOptions), sortOptions = _b[0], setSortOptions = _b[1];
+    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 _b = useState(initSortOptions || []), sortOptions = _b[0], setSortOptions = _b[1];
     var _c = useState(true), cleanDisabled = _c[0], setCleanDisabled = _c[1];
@@ -137,5 +140,8 @@ var _d = useState(feedDefaultOptions(loadOptions.skip, sortOptions)), options = _d[0], setOptions = _d[1];
     var handleSort = useCallback(function (sort) {
-        sort.mode = sort.mode === 'desc' ? 'asc' : 'desc';
+        var mode = sort.mode;
+        sortOptions.forEach(function (x) { return (x.mode = undefined); });
+        setSortOptions(__spreadArrays(sortOptions));
+        sort.mode = mode === 'desc' ? 'asc' : 'desc';
         setOptions(__assign(__assign({}, options), { sort: __assign({}, sort) }));
-    }, [options]);
+    }, [options, sortOptions]);
     useEffect(function () {
@@ -151,18 +157,13 @@ setCleanDisabled(!options.search);
     return (React.createElement("div", { className: classNames('feed-filter', className) },
-        options && sortOptions ? (React.createElement("div", { className: "feed-filter__sort" }, sortOptions.map(function (x, i) {
+        options && sortOptions.length ? (React.createElement("div", { className: "feed-filter__sort" }, sortOptions.map(function (x, i) {
             var _a;
             var sort = options.sort;
-            var sortIcon = sortEmpty;
             var isActive = x.key === maybe(sort).return(function (s) { return s.key; });
-            var mode = maybe(sort, function (x) { return x.mode; }, '');
-            if (isActive) {
-                sortIcon = maybe(sort, function (x) { return x.mode; }, '') === 'desc' ? sortDesc : sortAsc;
-            }
-            return (React.createElement("div", { key: i, className: classNames('feed-filter__sort-option', (_a = {
-                        'feed-filter__sort-option--active': isActive
-                    },
-                    _a["feed-filter__sort-option--" + mode] = isActive,
-                    _a)), onClick: function () { return handleSort(x); } },
-                React.createElement("div", null, x.name || x.key),
-                React.createElement("div", { className: "feed-filter__sort-option-action" }, sortIcon)));
+            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,
@@ -222,2 +223,3 @@ React.createElement("div", { className: "feed-filter__search" },
 };
+//# sourceMappingURL=array-util.js.map
 
@@ -237,5 +239,6 @@ var RenderUtil = {
 };
+//# sourceMappingURL=render-util.js.map
 
 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, sortEmpty = _a.sortEmpty, sortAsc = _a.sortAsc, sortDesc = _a.sortDesc, fields = _a.fields, loadText = _a.loadText, renderItem = _a.renderItem, filterClassName = _a.filterClassName;
+    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 _b = useState({
@@ -258,3 +261,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, sortEmpty: RenderUtil.sortEmpty(sortEmpty), sortAsc: RenderUtil.sortAsc(sortAsc), sortDesc: RenderUtil.sortDesc(sortDesc), fields: fields, onClean: handleClean, onRefresh: handleRefresh, className: filterClassName }),
+        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("div", { className: "feed__data" }, (data || []).map(function (item, i) { return (React.createElement("div", { key: i }, renderItem(item))); })),
@@ -283,2 +286,3 @@ showLoad ? (React.createElement("div", { className: "feed__load" },
 };
+//# sourceMappingURL=index.js.map
 
@@ -303,3 +307,4 @@ var DataFeedItem = function (_a) {
 };
+//# sourceMappingURL=index.js.map
 
 export { DataFeed, DataFeedItem, FeedArrayUtil, RenderUtil };

dist/index.js

@@ -66,2 +66,3 @@ 'use strict';
 };
+//# sourceMappingURL=field-wrapper.js.map
 
@@ -95,2 +96,3 @@ function useInputTextCallback(action) {
 }
+//# sourceMappingURL=index.js.map
 
@@ -122,2 +124,3 @@ var FeedField = function (props) {
 };
+//# sourceMappingURL=index.js.map
 
@@ -135,4 +138,4 @@ function feedDefaultOptions(skip, sortOptions) {
 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, sortEmpty = _a.sortEmpty, sortAsc = _a.sortAsc, sortDesc = _a.sortDesc, fields = _a.fields, onClean = _a.onClean, onRefresh = _a.onRefresh, className = _a.className;
-    var _b = React.useState(initSortOptions), sortOptions = _b[0], setSortOptions = _b[1];
+    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 _b = React.useState(initSortOptions || []), sortOptions = _b[0], setSortOptions = _b[1];
     var _c = React.useState(true), cleanDisabled = _c[0], setCleanDisabled = _c[1];
@@ -144,5 +147,8 @@ var _d = React.useState(feedDefaultOptions(loadOptions.skip, sortOptions)), options = _d[0], setOptions = _d[1];
     var handleSort = React.useCallback(function (sort) {
-        sort.mode = sort.mode === 'desc' ? 'asc' : 'desc';
+        var mode = sort.mode;
+        sortOptions.forEach(function (x) { return (x.mode = undefined); });
+        setSortOptions(__spreadArrays(sortOptions));
+        sort.mode = mode === 'desc' ? 'asc' : 'desc';
         setOptions(__assign(__assign({}, options), { sort: __assign({}, sort) }));
-    }, [options]);
+    }, [options, sortOptions]);
     React.useEffect(function () {
@@ -158,18 +164,13 @@ setCleanDisabled(!options.search);
     return (React__default.createElement("div", { className: classNames('feed-filter', className) },
-        options && sortOptions ? (React__default.createElement("div", { className: "feed-filter__sort" }, sortOptions.map(function (x, i) {
+        options && sortOptions.length ? (React__default.createElement("div", { className: "feed-filter__sort" }, sortOptions.map(function (x, i) {
             var _a;
             var sort = options.sort;
-            var sortIcon = sortEmpty;
             var isActive = x.key === tsMaybeMonad.maybe(sort).return(function (s) { return s.key; });
-            var mode = tsMaybeMonad.maybe(sort, function (x) { return x.mode; }, '');
-            if (isActive) {
-                sortIcon = tsMaybeMonad.maybe(sort, function (x) { return x.mode; }, '') === 'desc' ? sortDesc : sortAsc;
-            }
-            return (React__default.createElement("div", { key: i, className: classNames('feed-filter__sort-option', (_a = {
-                        'feed-filter__sort-option--active': isActive
-                    },
-                    _a["feed-filter__sort-option--" + mode] = isActive,
-                    _a)), onClick: function () { return handleSort(x); } },
-                React__default.createElement("div", null, x.name || x.key),
-                React__default.createElement("div", { className: "feed-filter__sort-option-action" }, sortIcon)));
+            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,
@@ -229,2 +230,3 @@ React__default.createElement("div", { className: "feed-filter__search" },
 };
+//# sourceMappingURL=array-util.js.map
 
@@ -244,5 +246,6 @@ var RenderUtil = {
 };
+//# sourceMappingURL=render-util.js.map
 
 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, sortEmpty = _a.sortEmpty, sortAsc = _a.sortAsc, sortDesc = _a.sortDesc, fields = _a.fields, loadText = _a.loadText, renderItem = _a.renderItem, filterClassName = _a.filterClassName;
+    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 _b = React.useState({
@@ -265,3 +268,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, sortEmpty: RenderUtil.sortEmpty(sortEmpty), sortAsc: RenderUtil.sortAsc(sortAsc), sortDesc: RenderUtil.sortDesc(sortDesc), fields: fields, onClean: handleClean, onRefresh: handleRefresh, className: filterClassName }),
+        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("div", { className: "feed__data" }, (data || []).map(function (item, i) { return (React__default.createElement("div", { key: i }, renderItem(item))); })),
@@ -290,2 +293,3 @@ showLoad ? (React__default.createElement("div", { className: "feed__load" },
 };
+//# sourceMappingURL=index.js.map
 
@@ -310,2 +314,3 @@ var DataFeedItem = function (_a) {
 };
+//# sourceMappingURL=index.js.map
 
@@ -312,0 +317,0 @@ exports.DataFeed = DataFeed;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

44542

increased by0.4%

Lines of code

856

increased by0.71%

No dependency changes