@snack-uikit/utils 3.7.1-preview-74c13173.0 → 3.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/README.md +1 -10
- package/dist/cjs/hooks/index.d.ts +1 -2
- package/dist/cjs/hooks/index.js +1 -2
- package/dist/cjs/hooks/useDataPersist/index.d.ts +2 -0
- package/dist/cjs/hooks/{useSaveState → useDataPersist}/index.js +1 -1
- package/dist/cjs/hooks/{useSaveState → useDataPersist}/sources/baseSource.d.ts +1 -1
- package/dist/cjs/hooks/{useSaveState → useDataPersist}/sources/baseSource.js +8 -4
- package/dist/cjs/hooks/{useSaveState → useDataPersist}/sources/localStorageSource.d.ts +1 -1
- package/dist/cjs/hooks/{useSaveState → useDataPersist}/sources/localStorageSource.js +1 -1
- package/dist/cjs/hooks/{useSaveState → useDataPersist}/sources/queryParamSource.d.ts +1 -1
- package/dist/cjs/hooks/{useSaveState → useDataPersist}/sources/queryParamSource.js +1 -1
- package/dist/cjs/hooks/{useSaveFilterState.d.ts → useDataPersist/useDataPersist.d.ts} +5 -2
- package/dist/cjs/hooks/useDataPersist/useDataPersist.js +43 -0
- package/dist/cjs/hooks/useDataPersist/useSource.d.ts +8 -0
- package/dist/cjs/hooks/useDataPersist/useSource.js +24 -0
- package/dist/esm/hooks/index.d.ts +1 -2
- package/dist/esm/hooks/index.js +1 -2
- package/dist/esm/hooks/useDataPersist/index.d.ts +2 -0
- package/dist/esm/hooks/useDataPersist/index.js +2 -0
- package/dist/esm/hooks/{useSaveState → useDataPersist}/sources/baseSource.d.ts +1 -1
- package/dist/esm/hooks/{useSaveState → useDataPersist}/sources/baseSource.js +9 -4
- package/dist/esm/hooks/{useSaveState → useDataPersist}/sources/localStorageSource.d.ts +1 -1
- package/dist/esm/hooks/{useSaveState → useDataPersist}/sources/localStorageSource.js +1 -1
- package/dist/esm/hooks/{useSaveState → useDataPersist}/sources/queryParamSource.d.ts +1 -1
- package/dist/esm/hooks/{useSaveState → useDataPersist}/sources/queryParamSource.js +1 -1
- package/dist/esm/hooks/{useSaveFilterState.d.ts → useDataPersist/useDataPersist.d.ts} +5 -2
- package/dist/esm/hooks/useDataPersist/useDataPersist.js +24 -0
- package/dist/esm/hooks/useDataPersist/useSource.d.ts +8 -0
- package/dist/esm/hooks/useDataPersist/useSource.js +11 -0
- package/package.json +2 -2
- package/src/hooks/index.ts +1 -2
- package/src/hooks/useDataPersist/index.ts +2 -0
- package/src/hooks/{useSaveState → useDataPersist}/sources/baseSource.ts +9 -5
- package/src/hooks/{useSaveState → useDataPersist}/sources/localStorageSource.ts +1 -1
- package/src/hooks/{useSaveState → useDataPersist}/sources/queryParamSource.ts +1 -1
- package/src/hooks/useDataPersist/useDataPersist.ts +52 -0
- package/src/hooks/useDataPersist/useSource.ts +23 -0
- package/dist/cjs/hooks/useSaveFilterState.js +0 -56
- package/dist/cjs/hooks/useSaveState/index.d.ts +0 -2
- package/dist/cjs/hooks/useSaveState/useSaveState.d.ts +0 -7
- package/dist/cjs/hooks/useSaveState/useSaveState.js +0 -29
- package/dist/esm/hooks/useSaveFilterState.js +0 -34
- package/dist/esm/hooks/useSaveState/index.d.ts +0 -2
- package/dist/esm/hooks/useSaveState/index.js +0 -2
- package/dist/esm/hooks/useSaveState/useSaveState.d.ts +0 -7
- package/dist/esm/hooks/useSaveState/useSaveState.js +0 -17
- package/src/hooks/useSaveFilterState.ts +0 -67
- package/src/hooks/useSaveState/index.ts +0 -2
- package/src/hooks/useSaveState/useSaveState.ts +0 -28
- /package/dist/cjs/hooks/{useSaveState → useDataPersist}/sources/index.d.ts +0 -0
- /package/dist/cjs/hooks/{useSaveState → useDataPersist}/sources/index.js +0 -0
- /package/dist/esm/hooks/{useSaveState → useDataPersist}/sources/index.d.ts +0 -0
- /package/dist/esm/hooks/{useSaveState → useDataPersist}/sources/index.js +0 -0
- /package/src/hooks/{useSaveState → useDataPersist}/sources/index.ts +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# 3.8.0 (2025-03-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **PDS-681:** add save filter ([1406c6c](https://github.com/cloud-ru-tech/snack-uikit/commit/1406c6c447f337b5140135f8741b52ed1a0dfbf0))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# 3.7.0 (2025-01-23)
|
|
7
18
|
|
|
8
19
|
|
package/README.md
CHANGED
|
@@ -71,19 +71,10 @@
|
|
|
71
71
|
| value | `TValue` | - | Значение состояния |
|
|
72
72
|
| defaultValue | `TValue` | - | Значение по умолчанию |
|
|
73
73
|
| onChange | `(value: TValue) => void` | - | Колбек, вызываемый на смену состояния |
|
|
74
|
-
##
|
|
74
|
+
## useDataPersist
|
|
75
75
|
### Props
|
|
76
76
|
| name | type | default value | description |
|
|
77
77
|
|------|------|---------------|-------------|
|
|
78
|
-
| onLoadFilter* | `(filter: T) => void` | - | |
|
|
79
|
-
| filter* | `T` | - | |
|
|
80
|
-
| source | `BaseSource<T>` | - | |
|
|
81
|
-
## useSaveFilterState
|
|
82
|
-
### Props
|
|
83
|
-
| name | type | default value | description |
|
|
84
|
-
|------|------|---------------|-------------|
|
|
85
|
-
| onLoadFilter* | `(filter: TFilter) => void` | - | |
|
|
86
|
-
| filter* | `TFilter` | - | |
|
|
87
78
|
| options | `FilterStateOptions<TFilter>` | - | |
|
|
88
79
|
| parser | `(jsonFilter: string) => TFilter` | - | |
|
|
89
80
|
| serializer | `(filter: TFilter) => string` | - | |
|
package/dist/cjs/hooks/index.js
CHANGED
|
@@ -29,5 +29,4 @@ __exportStar(require("./useIsomorphicLayoutEffect"), exports);
|
|
|
29
29
|
__exportStar(require("./useSwipeable"), exports);
|
|
30
30
|
__exportStar(require("./useThemeConfig"), exports);
|
|
31
31
|
__exportStar(require("./useValueControl"), exports);
|
|
32
|
-
__exportStar(require("./
|
|
33
|
-
__exportStar(require("./useSaveFilterState"), exports);
|
|
32
|
+
__exportStar(require("./useDataPersist"), exports);
|
|
@@ -22,5 +22,5 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
|
|
|
22
22
|
Object.defineProperty(exports, "__esModule", {
|
|
23
23
|
value: true
|
|
24
24
|
});
|
|
25
|
-
__exportStar(require("./
|
|
25
|
+
__exportStar(require("./useDataPersist"), exports);
|
|
26
26
|
__exportStar(require("./sources"), exports);
|
|
@@ -3,7 +3,7 @@ export declare abstract class BaseSource<TFilter> {
|
|
|
3
3
|
private validate;
|
|
4
4
|
protected parser: (value: string) => TFilter;
|
|
5
5
|
protected serializer: (value: TFilter) => string;
|
|
6
|
-
protected abstract
|
|
6
|
+
protected abstract getFromSource(): string;
|
|
7
7
|
protected abstract setToSource(value: string): void;
|
|
8
8
|
constructor(filterKey: string, validate: (value: unknown) => value is TFilter, parser?: (value: string) => TFilter, serializer?: (value: TFilter) => string);
|
|
9
9
|
getFilter: () => NonNullable<TFilter> | null;
|
|
@@ -11,10 +11,14 @@ class BaseSource {
|
|
|
11
11
|
this.parser = JSON.parse;
|
|
12
12
|
this.serializer = JSON.stringify;
|
|
13
13
|
this.getFilter = () => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
try {
|
|
15
|
+
const filterFromQueryParams = this.getFromSource();
|
|
16
|
+
const parsedValue = filterFromQueryParams ? this.parser(filterFromQueryParams) : null;
|
|
17
|
+
const isValid = parsedValue && this.validate(parsedValue);
|
|
18
|
+
return isValid ? parsedValue : null;
|
|
19
|
+
} catch (_a) {
|
|
20
|
+
return null;
|
|
21
|
+
}
|
|
18
22
|
};
|
|
19
23
|
this.setFilter = filter => {
|
|
20
24
|
const encodedValue = this.serializer(filter);
|
|
@@ -7,7 +7,7 @@ exports.LocalStorageSource = void 0;
|
|
|
7
7
|
const utils_1 = require("../../../utils");
|
|
8
8
|
const baseSource_1 = require("./baseSource");
|
|
9
9
|
class LocalStorageSource extends baseSource_1.BaseSource {
|
|
10
|
-
|
|
10
|
+
getFromSource() {
|
|
11
11
|
if ((0, utils_1.isBrowser)()) {
|
|
12
12
|
return localStorage.getItem(this.filterKey) || '';
|
|
13
13
|
}
|
|
@@ -7,7 +7,7 @@ exports.QueryParamSource = void 0;
|
|
|
7
7
|
const utils_1 = require("../../../utils");
|
|
8
8
|
const baseSource_1 = require("./baseSource");
|
|
9
9
|
class QueryParamSource extends baseSource_1.BaseSource {
|
|
10
|
-
|
|
10
|
+
getFromSource() {
|
|
11
11
|
if ((0, utils_1.isBrowser)()) {
|
|
12
12
|
return new URL(window.location.href).searchParams.get(this.filterKey) || '';
|
|
13
13
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { StateProps } from './
|
|
1
|
+
import { StateProps } from './useSource';
|
|
2
2
|
export type FilterStateOptions<T> = {
|
|
3
3
|
filterQueryKey: string;
|
|
4
4
|
filterLocalStorageKey: string;
|
|
@@ -9,5 +9,8 @@ type FilterStateProps<TFilter> = Omit<StateProps<TFilter>, 'source'> & {
|
|
|
9
9
|
parser?(jsonFilter: string): TFilter;
|
|
10
10
|
serializer?(filter: TFilter): string;
|
|
11
11
|
};
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const useDataPersist: <TFilter>({ options, parser, serializer }: FilterStateProps<TFilter>) => {
|
|
13
|
+
getDefaultFilter: () => NonNullable<TFilter> | null | undefined;
|
|
14
|
+
setDataToStorages: (data: TFilter) => void;
|
|
15
|
+
};
|
|
13
16
|
export {};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useDataPersist = void 0;
|
|
7
|
+
const react_1 = require("react");
|
|
8
|
+
const sources_1 = require("./sources");
|
|
9
|
+
const useSource_1 = require("./useSource");
|
|
10
|
+
const useDataPersist = _ref => {
|
|
11
|
+
let {
|
|
12
|
+
options,
|
|
13
|
+
parser,
|
|
14
|
+
serializer
|
|
15
|
+
} = _ref;
|
|
16
|
+
const querySource = (0, react_1.useMemo)(() => options ? new sources_1.QueryParamSource(options.filterQueryKey, options.validateData, parser, serializer) : undefined, [options, parser, serializer]);
|
|
17
|
+
const localStorageSource = (0, react_1.useMemo)(() => options ? new sources_1.LocalStorageSource(options.filterLocalStorageKey, options.validateData) : undefined, [options]);
|
|
18
|
+
const {
|
|
19
|
+
getData: getLocalStorageData,
|
|
20
|
+
setData: setLocalStorageData
|
|
21
|
+
} = (0, useSource_1.useSource)({
|
|
22
|
+
source: querySource
|
|
23
|
+
});
|
|
24
|
+
const {
|
|
25
|
+
getData: getQueryParamsData,
|
|
26
|
+
setData: setQueryParamsData
|
|
27
|
+
} = (0, useSource_1.useSource)({
|
|
28
|
+
source: localStorageSource
|
|
29
|
+
});
|
|
30
|
+
const setDataToStorages = (0, react_1.useCallback)(data => {
|
|
31
|
+
setLocalStorageData(data);
|
|
32
|
+
setQueryParamsData(data);
|
|
33
|
+
}, [setLocalStorageData, setQueryParamsData]);
|
|
34
|
+
const getDefaultFilter = (0, react_1.useCallback)(() => {
|
|
35
|
+
const queryData = getQueryParamsData();
|
|
36
|
+
return queryData ? queryData : getLocalStorageData();
|
|
37
|
+
}, [getLocalStorageData, getQueryParamsData]);
|
|
38
|
+
return {
|
|
39
|
+
getDefaultFilter,
|
|
40
|
+
setDataToStorages
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
exports.useDataPersist = useDataPersist;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { BaseSource } from './sources/baseSource';
|
|
2
|
+
export type StateProps<T> = {
|
|
3
|
+
source?: BaseSource<T>;
|
|
4
|
+
};
|
|
5
|
+
export declare const useSource: <T>({ source }: StateProps<T>) => {
|
|
6
|
+
getData: () => NonNullable<T> | null | undefined;
|
|
7
|
+
setData: (filter: T) => void;
|
|
8
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useSource = void 0;
|
|
7
|
+
const react_1 = require("react");
|
|
8
|
+
const useSource = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
source
|
|
11
|
+
} = _ref;
|
|
12
|
+
const setData = (0, react_1.useCallback)(filter => {
|
|
13
|
+
if (!source) {
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
source.setFilter(filter);
|
|
17
|
+
}, [source]);
|
|
18
|
+
const getData = (0, react_1.useCallback)(() => source === null || source === void 0 ? void 0 : source.getFilter(), [source]);
|
|
19
|
+
return {
|
|
20
|
+
getData,
|
|
21
|
+
setData
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
exports.useSource = useSource;
|
package/dist/esm/hooks/index.js
CHANGED
|
@@ -3,7 +3,7 @@ export declare abstract class BaseSource<TFilter> {
|
|
|
3
3
|
private validate;
|
|
4
4
|
protected parser: (value: string) => TFilter;
|
|
5
5
|
protected serializer: (value: TFilter) => string;
|
|
6
|
-
protected abstract
|
|
6
|
+
protected abstract getFromSource(): string;
|
|
7
7
|
protected abstract setToSource(value: string): void;
|
|
8
8
|
constructor(filterKey: string, validate: (value: unknown) => value is TFilter, parser?: (value: string) => TFilter, serializer?: (value: TFilter) => string);
|
|
9
9
|
getFilter: () => NonNullable<TFilter> | null;
|
|
@@ -5,10 +5,15 @@ export class BaseSource {
|
|
|
5
5
|
this.parser = JSON.parse;
|
|
6
6
|
this.serializer = JSON.stringify;
|
|
7
7
|
this.getFilter = () => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
try {
|
|
9
|
+
const filterFromQueryParams = this.getFromSource();
|
|
10
|
+
const parsedValue = filterFromQueryParams ? this.parser(filterFromQueryParams) : null;
|
|
11
|
+
const isValid = parsedValue && this.validate(parsedValue);
|
|
12
|
+
return isValid ? parsedValue : null;
|
|
13
|
+
}
|
|
14
|
+
catch (_a) {
|
|
15
|
+
return null;
|
|
16
|
+
}
|
|
12
17
|
};
|
|
13
18
|
this.setFilter = (filter) => {
|
|
14
19
|
const encodedValue = this.serializer(filter);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { isBrowser } from '../../../utils';
|
|
2
2
|
import { BaseSource } from './baseSource';
|
|
3
3
|
export class QueryParamSource extends BaseSource {
|
|
4
|
-
|
|
4
|
+
getFromSource() {
|
|
5
5
|
if (isBrowser()) {
|
|
6
6
|
return new URL(window.location.href).searchParams.get(this.filterKey) || '';
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { StateProps } from './
|
|
1
|
+
import { StateProps } from './useSource';
|
|
2
2
|
export type FilterStateOptions<T> = {
|
|
3
3
|
filterQueryKey: string;
|
|
4
4
|
filterLocalStorageKey: string;
|
|
@@ -9,5 +9,8 @@ type FilterStateProps<TFilter> = Omit<StateProps<TFilter>, 'source'> & {
|
|
|
9
9
|
parser?(jsonFilter: string): TFilter;
|
|
10
10
|
serializer?(filter: TFilter): string;
|
|
11
11
|
};
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const useDataPersist: <TFilter>({ options, parser, serializer }: FilterStateProps<TFilter>) => {
|
|
13
|
+
getDefaultFilter: () => NonNullable<TFilter> | null | undefined;
|
|
14
|
+
setDataToStorages: (data: TFilter) => void;
|
|
15
|
+
};
|
|
13
16
|
export {};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { useCallback, useMemo } from 'react';
|
|
2
|
+
import { LocalStorageSource, QueryParamSource } from './sources';
|
|
3
|
+
import { useSource } from './useSource';
|
|
4
|
+
export const useDataPersist = ({ options, parser, serializer }) => {
|
|
5
|
+
const querySource = useMemo(() => options
|
|
6
|
+
? new QueryParamSource(options.filterQueryKey, options.validateData, parser, serializer)
|
|
7
|
+
: undefined, [options, parser, serializer]);
|
|
8
|
+
const localStorageSource = useMemo(() => (options ? new LocalStorageSource(options.filterLocalStorageKey, options.validateData) : undefined), [options]);
|
|
9
|
+
const { getData: getLocalStorageData, setData: setLocalStorageData } = useSource({
|
|
10
|
+
source: querySource,
|
|
11
|
+
});
|
|
12
|
+
const { getData: getQueryParamsData, setData: setQueryParamsData } = useSource({
|
|
13
|
+
source: localStorageSource,
|
|
14
|
+
});
|
|
15
|
+
const setDataToStorages = useCallback((data) => {
|
|
16
|
+
setLocalStorageData(data);
|
|
17
|
+
setQueryParamsData(data);
|
|
18
|
+
}, [setLocalStorageData, setQueryParamsData]);
|
|
19
|
+
const getDefaultFilter = useCallback(() => {
|
|
20
|
+
const queryData = getQueryParamsData();
|
|
21
|
+
return queryData ? queryData : getLocalStorageData();
|
|
22
|
+
}, [getLocalStorageData, getQueryParamsData]);
|
|
23
|
+
return { getDefaultFilter, setDataToStorages };
|
|
24
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { BaseSource } from './sources/baseSource';
|
|
2
|
+
export type StateProps<T> = {
|
|
3
|
+
source?: BaseSource<T>;
|
|
4
|
+
};
|
|
5
|
+
export declare const useSource: <T>({ source }: StateProps<T>) => {
|
|
6
|
+
getData: () => NonNullable<T> | null | undefined;
|
|
7
|
+
setData: (filter: T) => void;
|
|
8
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { useCallback } from 'react';
|
|
2
|
+
export const useSource = ({ source }) => {
|
|
3
|
+
const setData = useCallback((filter) => {
|
|
4
|
+
if (!source) {
|
|
5
|
+
return;
|
|
6
|
+
}
|
|
7
|
+
source.setFilter(filter);
|
|
8
|
+
}, [source]);
|
|
9
|
+
const getData = useCallback(() => source === null || source === void 0 ? void 0 : source.getFilter(), [source]);
|
|
10
|
+
return { getData, setData };
|
|
11
|
+
};
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Utils",
|
|
7
|
-
"version": "3.
|
|
7
|
+
"version": "3.8.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"react-swipeable": "7.0.2",
|
|
40
40
|
"uncontrollable": "8.0.4"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "ec4e54b1ea5c4455ca404632e1f205e22b881f98"
|
|
43
43
|
}
|
package/src/hooks/index.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export abstract class BaseSource<TFilter> {
|
|
2
2
|
protected parser: (value: string) => TFilter = JSON.parse;
|
|
3
3
|
protected serializer: (value: TFilter) => string = JSON.stringify;
|
|
4
|
-
protected abstract
|
|
4
|
+
protected abstract getFromSource(): string;
|
|
5
5
|
protected abstract setToSource(value: string): void;
|
|
6
6
|
|
|
7
7
|
constructor(
|
|
@@ -19,10 +19,14 @@ export abstract class BaseSource<TFilter> {
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
getFilter = () => {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
try {
|
|
23
|
+
const filterFromQueryParams = this.getFromSource();
|
|
24
|
+
const parsedValue = filterFromQueryParams ? (this.parser(filterFromQueryParams) as TFilter) : null;
|
|
25
|
+
const isValid = parsedValue && this.validate(parsedValue);
|
|
26
|
+
return isValid ? parsedValue : null;
|
|
27
|
+
} catch {
|
|
28
|
+
return null;
|
|
29
|
+
}
|
|
26
30
|
};
|
|
27
31
|
|
|
28
32
|
setFilter = (filter: TFilter) => {
|
|
@@ -2,7 +2,7 @@ import { isBrowser } from '../../../utils';
|
|
|
2
2
|
import { BaseSource } from './baseSource';
|
|
3
3
|
|
|
4
4
|
export class LocalStorageSource<TFilter> extends BaseSource<TFilter> {
|
|
5
|
-
|
|
5
|
+
getFromSource(): string {
|
|
6
6
|
if (isBrowser()) {
|
|
7
7
|
return localStorage.getItem(this.filterKey) || '';
|
|
8
8
|
}
|
|
@@ -2,7 +2,7 @@ import { isBrowser } from '../../../utils';
|
|
|
2
2
|
import { BaseSource } from './baseSource';
|
|
3
3
|
|
|
4
4
|
export class QueryParamSource<TFilter> extends BaseSource<TFilter> {
|
|
5
|
-
|
|
5
|
+
getFromSource(): string {
|
|
6
6
|
if (isBrowser()) {
|
|
7
7
|
return new URL(window.location.href).searchParams.get(this.filterKey) || '';
|
|
8
8
|
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { useCallback, useMemo } from 'react';
|
|
2
|
+
|
|
3
|
+
import { LocalStorageSource, QueryParamSource } from './sources';
|
|
4
|
+
import { StateProps, useSource } from './useSource';
|
|
5
|
+
|
|
6
|
+
export type FilterStateOptions<T> = {
|
|
7
|
+
filterQueryKey: string;
|
|
8
|
+
filterLocalStorageKey: string;
|
|
9
|
+
validateData(value: unknown): value is T;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
type FilterStateProps<TFilter> = Omit<StateProps<TFilter>, 'source'> & {
|
|
13
|
+
options?: FilterStateOptions<TFilter>;
|
|
14
|
+
parser?(jsonFilter: string): TFilter;
|
|
15
|
+
serializer?(filter: TFilter): string;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export const useDataPersist = <TFilter>({ options, parser, serializer }: FilterStateProps<TFilter>) => {
|
|
19
|
+
const querySource = useMemo(
|
|
20
|
+
() =>
|
|
21
|
+
options
|
|
22
|
+
? new QueryParamSource<TFilter>(options.filterQueryKey, options.validateData, parser, serializer)
|
|
23
|
+
: undefined,
|
|
24
|
+
[options, parser, serializer],
|
|
25
|
+
);
|
|
26
|
+
const localStorageSource = useMemo(
|
|
27
|
+
() => (options ? new LocalStorageSource<TFilter>(options.filterLocalStorageKey, options.validateData) : undefined),
|
|
28
|
+
[options],
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
const { getData: getLocalStorageData, setData: setLocalStorageData } = useSource<TFilter>({
|
|
32
|
+
source: querySource,
|
|
33
|
+
});
|
|
34
|
+
const { getData: getQueryParamsData, setData: setQueryParamsData } = useSource<TFilter>({
|
|
35
|
+
source: localStorageSource,
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
const setDataToStorages = useCallback(
|
|
39
|
+
(data: TFilter) => {
|
|
40
|
+
setLocalStorageData(data);
|
|
41
|
+
setQueryParamsData(data);
|
|
42
|
+
},
|
|
43
|
+
[setLocalStorageData, setQueryParamsData],
|
|
44
|
+
);
|
|
45
|
+
|
|
46
|
+
const getDefaultFilter = useCallback(() => {
|
|
47
|
+
const queryData = getQueryParamsData();
|
|
48
|
+
return queryData ? queryData : getLocalStorageData();
|
|
49
|
+
}, [getLocalStorageData, getQueryParamsData]);
|
|
50
|
+
|
|
51
|
+
return { getDefaultFilter, setDataToStorages };
|
|
52
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { useCallback } from 'react';
|
|
2
|
+
|
|
3
|
+
import { BaseSource } from './sources/baseSource';
|
|
4
|
+
|
|
5
|
+
export type StateProps<T> = {
|
|
6
|
+
source?: BaseSource<T>;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export const useSource = <T>({ source }: StateProps<T>) => {
|
|
10
|
+
const setData = useCallback(
|
|
11
|
+
(filter: T) => {
|
|
12
|
+
if (!source) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
source.setFilter(filter);
|
|
16
|
+
},
|
|
17
|
+
[source],
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
const getData = useCallback(() => source?.getFilter(), [source]);
|
|
21
|
+
|
|
22
|
+
return { getData, setData };
|
|
23
|
+
};
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useSaveFilterState = void 0;
|
|
7
|
-
const react_1 = require("react");
|
|
8
|
-
const useSaveState_1 = require("./useSaveState");
|
|
9
|
-
const useSaveFilterState = _ref => {
|
|
10
|
-
let {
|
|
11
|
-
options,
|
|
12
|
-
filter,
|
|
13
|
-
onLoadFilter,
|
|
14
|
-
parser,
|
|
15
|
-
serializer
|
|
16
|
-
} = _ref;
|
|
17
|
-
const [queryFilter, setQueryFilter] = (0, react_1.useState)(null);
|
|
18
|
-
const [localStorageFilter, setLocalStorageFilter] = (0, react_1.useState)(null);
|
|
19
|
-
const [isLoaded, setIsLoaded] = (0, react_1.useState)({
|
|
20
|
-
localStorage: false,
|
|
21
|
-
queryParams: false
|
|
22
|
-
});
|
|
23
|
-
const onLoadQueryParams = (0, react_1.useCallback)(value => {
|
|
24
|
-
setQueryFilter(value);
|
|
25
|
-
setIsLoaded(prev => Object.assign(Object.assign({}, prev), {
|
|
26
|
-
queryParams: true
|
|
27
|
-
}));
|
|
28
|
-
}, []);
|
|
29
|
-
const onLoadLocalStorage = (0, react_1.useCallback)(value => {
|
|
30
|
-
setLocalStorageFilter(value);
|
|
31
|
-
setIsLoaded(prev => Object.assign(Object.assign({}, prev), {
|
|
32
|
-
localStorage: true
|
|
33
|
-
}));
|
|
34
|
-
}, []);
|
|
35
|
-
const querySource = (0, react_1.useMemo)(() => options ? new useSaveState_1.QueryParamSource(options.filterQueryKey, options.validateData, parser, serializer) : undefined, [options, parser, serializer]);
|
|
36
|
-
const localStorageSource = (0, react_1.useMemo)(() => options ? new useSaveState_1.LocalStorageSource(options.filterLocalStorageKey, options.validateData, parser, serializer) : undefined, [options, parser, serializer]);
|
|
37
|
-
(0, useSaveState_1.useSaveState)({
|
|
38
|
-
filter,
|
|
39
|
-
onLoadFilter: onLoadQueryParams,
|
|
40
|
-
source: querySource
|
|
41
|
-
});
|
|
42
|
-
(0, useSaveState_1.useSaveState)({
|
|
43
|
-
filter,
|
|
44
|
-
onLoadFilter: onLoadLocalStorage,
|
|
45
|
-
source: localStorageSource
|
|
46
|
-
});
|
|
47
|
-
(0, react_1.useEffect)(() => {
|
|
48
|
-
if (!options) {
|
|
49
|
-
onLoadFilter(null);
|
|
50
|
-
}
|
|
51
|
-
if (isLoaded.localStorage && isLoaded.queryParams) {
|
|
52
|
-
onLoadFilter(queryFilter ? queryFilter : localStorageFilter);
|
|
53
|
-
}
|
|
54
|
-
}, [queryFilter, onLoadFilter, localStorageFilter, isLoaded, options]);
|
|
55
|
-
};
|
|
56
|
-
exports.useSaveFilterState = useSaveFilterState;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useSaveState = void 0;
|
|
7
|
-
const react_1 = require("react");
|
|
8
|
-
const useSaveState = _ref => {
|
|
9
|
-
let {
|
|
10
|
-
filter,
|
|
11
|
-
onLoadFilter,
|
|
12
|
-
source
|
|
13
|
-
} = _ref;
|
|
14
|
-
const [isLoaded, setIsLoaded] = (0, react_1.useState)(false);
|
|
15
|
-
(0, react_1.useEffect)(() => {
|
|
16
|
-
if (!source) {
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
onLoadFilter(source.getFilter());
|
|
20
|
-
setIsLoaded(true);
|
|
21
|
-
}, [onLoadFilter, source]);
|
|
22
|
-
(0, react_1.useEffect)(() => {
|
|
23
|
-
if (!source || !isLoaded) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
source.setFilter(filter);
|
|
27
|
-
}, [filter, source, isLoaded]);
|
|
28
|
-
};
|
|
29
|
-
exports.useSaveState = useSaveState;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
2
|
-
import { LocalStorageSource, QueryParamSource, useSaveState } from './useSaveState';
|
|
3
|
-
export const useSaveFilterState = ({ options, filter, onLoadFilter, parser, serializer, }) => {
|
|
4
|
-
const [queryFilter, setQueryFilter] = useState(null);
|
|
5
|
-
const [localStorageFilter, setLocalStorageFilter] = useState(null);
|
|
6
|
-
const [isLoaded, setIsLoaded] = useState({
|
|
7
|
-
localStorage: false,
|
|
8
|
-
queryParams: false,
|
|
9
|
-
});
|
|
10
|
-
const onLoadQueryParams = useCallback((value) => {
|
|
11
|
-
setQueryFilter(value);
|
|
12
|
-
setIsLoaded(prev => (Object.assign(Object.assign({}, prev), { queryParams: true })));
|
|
13
|
-
}, []);
|
|
14
|
-
const onLoadLocalStorage = useCallback((value) => {
|
|
15
|
-
setLocalStorageFilter(value);
|
|
16
|
-
setIsLoaded(prev => (Object.assign(Object.assign({}, prev), { localStorage: true })));
|
|
17
|
-
}, []);
|
|
18
|
-
const querySource = useMemo(() => options
|
|
19
|
-
? new QueryParamSource(options.filterQueryKey, options.validateData, parser, serializer)
|
|
20
|
-
: undefined, [options, parser, serializer]);
|
|
21
|
-
const localStorageSource = useMemo(() => options
|
|
22
|
-
? new LocalStorageSource(options.filterLocalStorageKey, options.validateData, parser, serializer)
|
|
23
|
-
: undefined, [options, parser, serializer]);
|
|
24
|
-
useSaveState({ filter, onLoadFilter: onLoadQueryParams, source: querySource });
|
|
25
|
-
useSaveState({ filter, onLoadFilter: onLoadLocalStorage, source: localStorageSource });
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
if (!options) {
|
|
28
|
-
onLoadFilter(null);
|
|
29
|
-
}
|
|
30
|
-
if (isLoaded.localStorage && isLoaded.queryParams) {
|
|
31
|
-
onLoadFilter(queryFilter ? queryFilter : localStorageFilter);
|
|
32
|
-
}
|
|
33
|
-
}, [queryFilter, onLoadFilter, localStorageFilter, isLoaded, options]);
|
|
34
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react';
|
|
2
|
-
export const useSaveState = ({ filter, onLoadFilter, source }) => {
|
|
3
|
-
const [isLoaded, setIsLoaded] = useState(false);
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
if (!source) {
|
|
6
|
-
return;
|
|
7
|
-
}
|
|
8
|
-
onLoadFilter(source.getFilter());
|
|
9
|
-
setIsLoaded(true);
|
|
10
|
-
}, [onLoadFilter, source]);
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
if (!source || !isLoaded) {
|
|
13
|
-
return;
|
|
14
|
-
}
|
|
15
|
-
source.setFilter(filter);
|
|
16
|
-
}, [filter, source, isLoaded]);
|
|
17
|
-
};
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
2
|
-
|
|
3
|
-
import { LocalStorageSource, QueryParamSource, StateProps, useSaveState } from './useSaveState';
|
|
4
|
-
|
|
5
|
-
export type FilterStateOptions<T> = {
|
|
6
|
-
filterQueryKey: string;
|
|
7
|
-
filterLocalStorageKey: string;
|
|
8
|
-
validateData(value: unknown): value is T;
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
type FilterStateProps<TFilter> = Omit<StateProps<TFilter>, 'source'> & {
|
|
12
|
-
options?: FilterStateOptions<TFilter>;
|
|
13
|
-
parser?(jsonFilter: string): TFilter;
|
|
14
|
-
serializer?(filter: TFilter): string;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export const useSaveFilterState = <TFilter>({
|
|
18
|
-
options,
|
|
19
|
-
filter,
|
|
20
|
-
onLoadFilter,
|
|
21
|
-
parser,
|
|
22
|
-
serializer,
|
|
23
|
-
}: FilterStateProps<TFilter>) => {
|
|
24
|
-
const [queryFilter, setQueryFilter] = useState<TFilter | null>(null);
|
|
25
|
-
const [localStorageFilter, setLocalStorageFilter] = useState<TFilter | null>(null);
|
|
26
|
-
const [isLoaded, setIsLoaded] = useState<{ localStorage: boolean; queryParams: boolean }>({
|
|
27
|
-
localStorage: false,
|
|
28
|
-
queryParams: false,
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
const onLoadQueryParams = useCallback((value: TFilter | null) => {
|
|
32
|
-
setQueryFilter(value);
|
|
33
|
-
setIsLoaded(prev => ({ ...prev, queryParams: true }));
|
|
34
|
-
}, []);
|
|
35
|
-
|
|
36
|
-
const onLoadLocalStorage = useCallback((value: TFilter | null) => {
|
|
37
|
-
setLocalStorageFilter(value);
|
|
38
|
-
setIsLoaded(prev => ({ ...prev, localStorage: true }));
|
|
39
|
-
}, []);
|
|
40
|
-
|
|
41
|
-
const querySource = useMemo(
|
|
42
|
-
() =>
|
|
43
|
-
options
|
|
44
|
-
? new QueryParamSource<TFilter>(options.filterQueryKey, options.validateData, parser, serializer)
|
|
45
|
-
: undefined,
|
|
46
|
-
[options, parser, serializer],
|
|
47
|
-
);
|
|
48
|
-
const localStorageSource = useMemo(
|
|
49
|
-
() =>
|
|
50
|
-
options
|
|
51
|
-
? new LocalStorageSource<TFilter>(options.filterLocalStorageKey, options.validateData, parser, serializer)
|
|
52
|
-
: undefined,
|
|
53
|
-
[options, parser, serializer],
|
|
54
|
-
);
|
|
55
|
-
|
|
56
|
-
useSaveState<TFilter>({ filter, onLoadFilter: onLoadQueryParams, source: querySource });
|
|
57
|
-
useSaveState<TFilter>({ filter, onLoadFilter: onLoadLocalStorage, source: localStorageSource });
|
|
58
|
-
|
|
59
|
-
useEffect(() => {
|
|
60
|
-
if (!options) {
|
|
61
|
-
onLoadFilter(null);
|
|
62
|
-
}
|
|
63
|
-
if (isLoaded.localStorage && isLoaded.queryParams) {
|
|
64
|
-
onLoadFilter(queryFilter ? queryFilter : localStorageFilter);
|
|
65
|
-
}
|
|
66
|
-
}, [queryFilter, onLoadFilter, localStorageFilter, isLoaded, options]);
|
|
67
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react';
|
|
2
|
-
|
|
3
|
-
import { BaseSource } from './sources/baseSource';
|
|
4
|
-
|
|
5
|
-
export type StateProps<T> = {
|
|
6
|
-
filter: T;
|
|
7
|
-
onLoadFilter(filter: T | null): void;
|
|
8
|
-
source?: BaseSource<T>;
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export const useSaveState = <T>({ filter, onLoadFilter, source }: StateProps<T>) => {
|
|
12
|
-
const [isLoaded, setIsLoaded] = useState<boolean>(false);
|
|
13
|
-
|
|
14
|
-
useEffect(() => {
|
|
15
|
-
if (!source) {
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
onLoadFilter(source.getFilter());
|
|
19
|
-
setIsLoaded(true);
|
|
20
|
-
}, [onLoadFilter, source]);
|
|
21
|
-
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
if (!source || !isLoaded) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
source.setFilter(filter);
|
|
27
|
-
}, [filter, source, isLoaded]);
|
|
28
|
-
};
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|