data-feed - npm Package Compare versions

Comparing version 0.0.18 to 0.0.19

dist/feed/index.d.ts

 import React from 'react';
-import { FeedFilterValues, FeedSortOption, FeedButonProps, RenderSortOptionProps } from '../interfaces';
-import { FeedFieldProps } from '../field';
+import { FeedFilterValues, FeedSortOption, FeedButonProps, RenderSortOptionProps, FeedFieldProps } from '../interfaces';
 import './index.scss';
@@ -16,3 +15,2 @@ export interface DataFeedProps {
     showTotal?: boolean;
-    renderSearch?: (name: string, register: (instance: HTMLInputElement) => void) => React.ReactNode;
     texts?: {
@@ -24,4 +22,5 @@ [key: string]: string;
     sortModeField?: string;
-    renderFilterField?: (options: FeedFieldProps, register: (instance: HTMLInputElement) => void) => React.ReactNode;
+    renderSearch?: (fieldName: string) => React.ReactNode;
+    renderFilterField?: (item: FeedFieldProps) => React.ReactNode;
 }
 export declare const DataFeed: React.FC<DataFeedProps>;

dist/field/index.d.ts

 import React from 'react';
-export interface FeedFieldProps {
-    name: string;
-    label?: string;
-    defaultValue?: any;
-    type: 'checkbox' | 'select' | 'radio' | 'text';
-    options?: {
-        text: string;
-        value: string | number;
-    }[];
-    placeholder?: string;
-}
+import { FeedFieldProps } from '../interfaces';
 interface Props extends Omit<FeedFieldProps, 'defaultValue'> {
@@ -14,0 +4,0 @@ register: (instance: HTMLInputElement) => void;

dist/filter/index.d.ts

 import React from 'react';
-import { FeedSortOption, FeedButonProps, RenderSortOptionProps } from '../interfaces';
-import { FeedFieldProps } from '../field';
+import { FeedSortOption, FeedButonProps, RenderSortOptionProps, FeedFieldProps } from '../interfaces';
 import './index.scss';
@@ -13,4 +12,4 @@ interface FeedFilterProps {
     showTotal?: boolean;
-    renderSearch?: (name: string, register: (instance: HTMLInputElement) => void) => React.ReactNode;
-    renderField?: (options: FeedFieldProps, register: (instance: HTMLInputElement) => void) => React.ReactNode;
+    renderSearch?: (fieldName: string) => React.ReactNode;
+    renderField?: (item: FeedFieldProps) => React.ReactNode;
     className?: string;
@@ -17,0 +16,0 @@ texts: {

dist/hooks/index.d.ts

@@ -7,1 +7,2 @@ /// <reference types="react" />
 export declare function useSelectCallback(action: (value: string) => void, ...params: any[]): (e: React.FormEvent<HTMLSelectElement>) => void;
+export declare function useFeedFilterContext(): import("react-hook-form").FormContextValues<Record<string, any>>;

dist/index.d.ts

@@ -6,1 +6,2 @@ export * from './feed';
 export { FeedAttributeProps } from './attribute';
+export { useFeedFilterContext } from './hooks';

dist/index.esm.js

 import React, { useState, useCallback, useEffect } from 'react';
 import classNames from 'classnames';
 import { debounce } from 'lodash';
-import { useForm } from 'react-hook-form';
+import { useForm, FormContext, useFormContext } from 'react-hook-form';
 import equal from 'deep-equal';
@@ -59,2 +59,3 @@
 };
+//# sourceMappingURL=field-wrapper.js.map
 
@@ -90,2 +91,3 @@ var FeedField = function (_a) {
 };
+//# sourceMappingURL=index.js.map
 
@@ -119,6 +121,9 @@ var debounceChange = debounce(function (callback) {
     var _g = useState(undefined), defaultValues = _g[0], setDefaultValues = _g[1];
-    var _h = useState(false), cleanDisabled = _h[0], setCleanDisabled = _h[1];
-    var _j = useForm({
+    var _h = useState(undefined), loadedValues = _h[0], setLoadedValues = _h[1];
+    var _j = useState(false), cleanDisabled = _j[0], setCleanDisabled = _j[1];
+    var formMethods = useForm({
         defaultValues: getDefaultValues(fields),
-    }), register = _j.register, reset = _j.reset, getValues = _j.getValues;
+    });
+    var register = formMethods.register, watch = formMethods.watch, reset = formMethods.reset, getValues = formMethods.getValues;
+    var formValues = watch();
     var handleSort = useCallback(function (sortOption) {
@@ -134,12 +139,11 @@ var mode = sortOption.mode;
     var handleClean = useCallback(function () {
-        reset(getDefaultValues(fields));
-    }, [fields]);
-    var handleChange = useCallback(function () {
-        debounceChange(handleDebounce);
-    }, [fields]);
+        reset(defaultValues);
+    }, [defaultValues]);
     var handleDebounce = useCallback(function () {
-        var values = getValues();
-        onChange(values, sort);
-        setCleanDisabled(equal(values, defaultValues));
-    }, [defaultValues, sort]);
+        if (!equal(loadedValues, formValues)) {
+            onChange(formValues, sort);
+            setLoadedValues(formValues);
+        }
+        setCleanDisabled(equal(formValues, defaultValues));
+    }, [defaultValues, loadedValues, sort, formValues]);
     useEffect(function () {
@@ -152,33 +156,35 @@ setDefaultValues(getValues());
         }
-    }, [defaultValues, sort]);
+    }, [defaultValues, sort, formValues]);
     return (React.createElement("div", { className: classNames('feed-filter', className) },
-        React.createElement("form", { onChange: handleChange, onReset: handleChange },
-            sortOptions.length ? (React.createElement("div", { className: "feed-filter__sort" },
-                texts['sort'] ? (React.createElement(React.Fragment, { key: "key" },
-                    React.createElement("div", { className: "feed-filter__sort-option" }, texts['sort']))) : null,
-                React.createElement(React.Fragment, { key: "list" }, sortOptions.map(function (x, i) {
-                    var _a;
-                    var mode = x.mode, name = x.name;
-                    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.label || x.name))));
-                })))) : null,
-            React.createElement("div", { className: "feed-filter__search" }, renderSearch ? (renderSearch(searchField, register)) : (React.createElement("input", { type: "search", name: searchField, className: "feed-filter__search-input", ref: register }))),
-            React.createElement("div", { className: "feed-filter__field" }, fields.map(function (x, i) {
-                return renderField ? (React.createElement(React.Fragment, { key: i }, renderField(x, register))) : (React.createElement(FeedField, __assign({ key: i }, x, { register: register })));
-            })),
-            React.createElement("div", { className: "feed-filter__bottom" },
-                React.createElement("div", { className: "feed-filter__all" }, showTotal === false ? null : (React.createElement(React.Fragment, null, (all || 0) > 0 ? "" + (texts['total'] ? texts['total'] + " " : '') + all : ''))),
-                React.createElement("div", { className: "feed-filter__action" },
-                    React.createElement("div", null, renderCleanButton({
-                        text: texts['clean'] || 'Clean',
-                        onClick: handleClean,
-                        type: 'button',
-                        disabled: cleanDisabled,
-                    })))))));
+        React.createElement(FormContext, __assign({}, formMethods),
+            React.createElement("form", null,
+                sortOptions.length ? (React.createElement("div", { className: "feed-filter__sort" },
+                    texts['sort'] ? (React.createElement(React.Fragment, { key: "key" },
+                        React.createElement("div", { className: "feed-filter__sort-option" }, texts['sort']))) : null,
+                    React.createElement(React.Fragment, { key: "list" }, sortOptions.map(function (x, i) {
+                        var _a;
+                        var mode = x.mode, name = x.name;
+                        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.label || x.name))));
+                    })))) : null,
+                React.createElement("div", { className: "feed-filter__search" }, renderSearch ? (renderSearch(searchField)) : (React.createElement("input", { type: "search", name: searchField, className: "feed-filter__search-input", ref: register }))),
+                React.createElement("div", { className: "feed-filter__field" }, fields.map(function (x, i) {
+                    return renderField ? (React.createElement(React.Fragment, { key: i }, renderField(x))) : (React.createElement(FeedField, __assign({ key: i }, x, { register: register })));
+                })),
+                React.createElement("div", { className: "feed-filter__bottom" },
+                    React.createElement("div", { className: "feed-filter__all" }, showTotal === false ? null : (React.createElement(React.Fragment, null, (all || 0) > 0 ? "" + (texts['total'] ? texts['total'] + " " : '') + all : ''))),
+                    React.createElement("div", { className: "feed-filter__action" },
+                        React.createElement("div", null, renderCleanButton({
+                            text: texts['clean'] || 'Clean',
+                            onClick: handleClean,
+                            type: 'button',
+                            disabled: cleanDisabled,
+                        }))))))));
 };
+//# sourceMappingURL=index.js.map
 
@@ -222,2 +228,3 @@ var FeedArrayUtil = {
 };
+//# sourceMappingURL=array-util.js.map
 
@@ -237,2 +244,3 @@ var RenderUtil = {
 };
+//# sourceMappingURL=render-util.js.map
 
@@ -247,3 +255,2 @@ var DataFeed = function (_a) {
                 var values = __assign(__assign(__assign({}, sort), filterValues), { skip: skip });
-                console.log('load', values);
                 onChange(values);
@@ -270,2 +277,3 @@ }, 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 }),
 };
+//# sourceMappingURL=index.js.map
 
@@ -290,3 +298,9 @@ var DataFeedItem = function (_a) {
 };
+//# sourceMappingURL=index.js.map
 
-export { DataFeed, DataFeedItem, FeedArrayUtil, RenderUtil };
+function useFeedFilterContext() {
+    return useFormContext();
+}
+//# sourceMappingURL=index.js.map
+
+export { DataFeed, DataFeedItem, FeedArrayUtil, RenderUtil, useFeedFilterContext };

dist/index.js

@@ -66,2 +66,3 @@ 'use strict';
 };
+//# sourceMappingURL=field-wrapper.js.map
 
@@ -97,2 +98,3 @@ var FeedField = function (_a) {
 };
+//# sourceMappingURL=index.js.map
 
@@ -126,6 +128,9 @@ var debounceChange = lodash.debounce(function (callback) {
     var _g = React.useState(undefined), defaultValues = _g[0], setDefaultValues = _g[1];
-    var _h = React.useState(false), cleanDisabled = _h[0], setCleanDisabled = _h[1];
-    var _j = reactHookForm.useForm({
+    var _h = React.useState(undefined), loadedValues = _h[0], setLoadedValues = _h[1];
+    var _j = React.useState(false), cleanDisabled = _j[0], setCleanDisabled = _j[1];
+    var formMethods = reactHookForm.useForm({
         defaultValues: getDefaultValues(fields),
-    }), register = _j.register, reset = _j.reset, getValues = _j.getValues;
+    });
+    var register = formMethods.register, watch = formMethods.watch, reset = formMethods.reset, getValues = formMethods.getValues;
+    var formValues = watch();
     var handleSort = React.useCallback(function (sortOption) {
@@ -141,12 +146,11 @@ var mode = sortOption.mode;
     var handleClean = React.useCallback(function () {
-        reset(getDefaultValues(fields));
-    }, [fields]);
-    var handleChange = React.useCallback(function () {
-        debounceChange(handleDebounce);
-    }, [fields]);
+        reset(defaultValues);
+    }, [defaultValues]);
     var handleDebounce = React.useCallback(function () {
-        var values = getValues();
-        onChange(values, sort);
-        setCleanDisabled(equal(values, defaultValues));
-    }, [defaultValues, sort]);
+        if (!equal(loadedValues, formValues)) {
+            onChange(formValues, sort);
+            setLoadedValues(formValues);
+        }
+        setCleanDisabled(equal(formValues, defaultValues));
+    }, [defaultValues, loadedValues, sort, formValues]);
     React.useEffect(function () {
@@ -159,33 +163,35 @@ setDefaultValues(getValues());
         }
-    }, [defaultValues, sort]);
+    }, [defaultValues, sort, formValues]);
     return (React__default.createElement("div", { className: classNames('feed-filter', className) },
-        React__default.createElement("form", { onChange: handleChange, onReset: handleChange },
-            sortOptions.length ? (React__default.createElement("div", { className: "feed-filter__sort" },
-                texts['sort'] ? (React__default.createElement(React__default.Fragment, { key: "key" },
-                    React__default.createElement("div", { className: "feed-filter__sort-option" }, texts['sort']))) : null,
-                React__default.createElement(React__default.Fragment, { key: "list" }, sortOptions.map(function (x, i) {
-                    var _a;
-                    var mode = x.mode, name = x.name;
-                    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.label || x.name))));
-                })))) : null,
-            React__default.createElement("div", { className: "feed-filter__search" }, renderSearch ? (renderSearch(searchField, register)) : (React__default.createElement("input", { type: "search", name: searchField, className: "feed-filter__search-input", ref: register }))),
-            React__default.createElement("div", { className: "feed-filter__field" }, fields.map(function (x, i) {
-                return renderField ? (React__default.createElement(React__default.Fragment, { key: i }, renderField(x, register))) : (React__default.createElement(FeedField, __assign({ key: i }, x, { register: register })));
-            })),
-            React__default.createElement("div", { className: "feed-filter__bottom" },
-                React__default.createElement("div", { className: "feed-filter__all" }, showTotal === false ? null : (React__default.createElement(React__default.Fragment, null, (all || 0) > 0 ? "" + (texts['total'] ? texts['total'] + " " : '') + all : ''))),
-                React__default.createElement("div", { className: "feed-filter__action" },
-                    React__default.createElement("div", null, renderCleanButton({
-                        text: texts['clean'] || 'Clean',
-                        onClick: handleClean,
-                        type: 'button',
-                        disabled: cleanDisabled,
-                    })))))));
+        React__default.createElement(reactHookForm.FormContext, __assign({}, formMethods),
+            React__default.createElement("form", null,
+                sortOptions.length ? (React__default.createElement("div", { className: "feed-filter__sort" },
+                    texts['sort'] ? (React__default.createElement(React__default.Fragment, { key: "key" },
+                        React__default.createElement("div", { className: "feed-filter__sort-option" }, texts['sort']))) : null,
+                    React__default.createElement(React__default.Fragment, { key: "list" }, sortOptions.map(function (x, i) {
+                        var _a;
+                        var mode = x.mode, name = x.name;
+                        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.label || x.name))));
+                    })))) : null,
+                React__default.createElement("div", { className: "feed-filter__search" }, renderSearch ? (renderSearch(searchField)) : (React__default.createElement("input", { type: "search", name: searchField, className: "feed-filter__search-input", ref: register }))),
+                React__default.createElement("div", { className: "feed-filter__field" }, fields.map(function (x, i) {
+                    return renderField ? (React__default.createElement(React__default.Fragment, { key: i }, renderField(x))) : (React__default.createElement(FeedField, __assign({ key: i }, x, { register: register })));
+                })),
+                React__default.createElement("div", { className: "feed-filter__bottom" },
+                    React__default.createElement("div", { className: "feed-filter__all" }, showTotal === false ? null : (React__default.createElement(React__default.Fragment, null, (all || 0) > 0 ? "" + (texts['total'] ? texts['total'] + " " : '') + all : ''))),
+                    React__default.createElement("div", { className: "feed-filter__action" },
+                        React__default.createElement("div", null, renderCleanButton({
+                            text: texts['clean'] || 'Clean',
+                            onClick: handleClean,
+                            type: 'button',
+                            disabled: cleanDisabled,
+                        }))))))));
 };
+//# sourceMappingURL=index.js.map
 
@@ -229,2 +235,3 @@ var FeedArrayUtil = {
 };
+//# sourceMappingURL=array-util.js.map
 
@@ -244,2 +251,3 @@ var RenderUtil = {
 };
+//# sourceMappingURL=render-util.js.map
 
@@ -254,3 +262,2 @@ var DataFeed = function (_a) {
                 var values = __assign(__assign(__assign({}, sort), filterValues), { skip: skip });
-                console.log('load', values);
                 onChange(values);
@@ -277,2 +284,3 @@ }, 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 }),
 };
+//# sourceMappingURL=index.js.map
 
@@ -297,3 +305,9 @@ var DataFeedItem = function (_a) {
 };
+//# sourceMappingURL=index.js.map
 
+function useFeedFilterContext() {
+    return reactHookForm.useFormContext();
+}
+//# sourceMappingURL=index.js.map
+
 exports.DataFeed = DataFeed;
@@ -303,1 +317,2 @@ exports.DataFeedItem = DataFeedItem;
 exports.RenderUtil = RenderUtil;
+exports.useFeedFilterContext = useFeedFilterContext;

dist/interfaces/filter-options.d.ts

@@ -14,1 +14,12 @@ export interface FeedFilterValues {
 }
+export interface FeedFieldProps {
+    name: string;
+    label?: string;
+    defaultValue?: any;
+    type: 'checkbox' | 'select' | 'radio' | 'text';
+    options?: {
+        text: string;
+        value: string | number;
+    }[];
+    placeholder?: string;
+}

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

48288

increased by2.9%

Lines of code

895

increased by3.23%

No dependency changes