@pallasoft/ps-core-components 2.43.0 → 2.44.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/dist/components/ps-skeleton-table.d.ts +3 -1
- package/dist/components/ps-skeleton-table.js +15 -2
- package/dist/constants/ps-flag-param-value.d.ts +3 -0
- package/dist/constants/ps-flag-param-value.js +6 -0
- package/dist/constants/ps-query-param-config.d.ts +4 -0
- package/dist/constants/ps-query-param-config.js +6 -0
- package/dist/constants/ps-rerender-config.d.ts +3 -0
- package/dist/constants/ps-rerender-config.js +6 -0
- package/dist/constants/ps-skeleton-config.d.ts +2 -0
- package/dist/constants/ps-skeleton-config.js +2 -0
- package/dist/esm/components/ps-skeleton-table.js +15 -2
- package/dist/esm/constants/ps-flag-param-value.js +3 -0
- package/dist/esm/constants/ps-query-param-config.js +3 -0
- package/dist/esm/constants/ps-rerender-config.js +3 -0
- package/dist/esm/constants/ps-skeleton-config.js +2 -0
- package/dist/esm/hooks/use-ps-choice-param.js +6 -0
- package/dist/esm/hooks/use-ps-flag-param.js +6 -0
- package/dist/esm/hooks/use-ps-rerender-at.js +21 -0
- package/dist/esm/index.js +15 -0
- package/dist/esm/models/ps-choice-param-data.js +1 -0
- package/dist/esm/models/ps-choice-param-options.js +1 -0
- package/dist/esm/models/ps-flag-param-data.js +1 -0
- package/dist/esm/models/ps-flag-param-options.js +1 -0
- package/dist/esm/models/ps-search-params-set-options.js +1 -0
- package/dist/esm/models/ps-search-params-setter.js +1 -0
- package/dist/esm/models/ps-search-params-state.js +1 -0
- package/dist/esm/models/ps-skeleton-table-row.js +1 -0
- package/dist/esm/services/ps-query-param-service.js +32 -0
- package/dist/hooks/use-ps-choice-param.d.ts +4 -0
- package/dist/hooks/use-ps-choice-param.js +10 -0
- package/dist/hooks/use-ps-flag-param.d.ts +4 -0
- package/dist/hooks/use-ps-flag-param.js +10 -0
- package/dist/hooks/use-ps-rerender-at.d.ts +1 -0
- package/dist/hooks/use-ps-rerender-at.js +25 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.js +15 -0
- package/dist/models/ps-choice-param-data.d.ts +4 -0
- package/dist/models/ps-choice-param-data.js +2 -0
- package/dist/models/ps-choice-param-options.d.ts +6 -0
- package/dist/models/ps-choice-param-options.js +2 -0
- package/dist/models/ps-flag-param-data.d.ts +4 -0
- package/dist/models/ps-flag-param-data.js +2 -0
- package/dist/models/ps-flag-param-options.d.ts +4 -0
- package/dist/models/ps-flag-param-options.js +2 -0
- package/dist/models/ps-search-params-set-options.d.ts +4 -0
- package/dist/models/ps-search-params-set-options.js +2 -0
- package/dist/models/ps-search-params-setter.d.ts +2 -0
- package/dist/models/ps-search-params-setter.js +2 -0
- package/dist/models/ps-search-params-state.d.ts +2 -0
- package/dist/models/ps-search-params-state.js +2 -0
- package/dist/models/ps-skeleton-table-row.d.ts +4 -0
- package/dist/models/ps-skeleton-table-row.js +2 -0
- package/dist/services/ps-query-param-service.d.ts +7 -0
- package/dist/services/ps-query-param-service.js +36 -0
- package/package.json +1 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { PsSkeletonTableRow } from '../models/ps-skeleton-table-row';
|
|
1
2
|
export interface PsSkeletonTableProps {
|
|
2
3
|
alignments?: ('left' | 'right')[];
|
|
3
4
|
className?: string;
|
|
@@ -5,6 +6,7 @@ export interface PsSkeletonTableProps {
|
|
|
5
6
|
hasFooter?: boolean;
|
|
6
7
|
hasToolbar?: boolean;
|
|
7
8
|
isFramed?: boolean;
|
|
9
|
+
rowLayout?: PsSkeletonTableRow[];
|
|
8
10
|
rows?: number;
|
|
9
11
|
}
|
|
10
|
-
export declare const PsSkeletonTable: ({ alignments, className, columns, hasFooter, hasToolbar, isFramed, rows, }: PsSkeletonTableProps) => import("react").JSX.Element;
|
|
12
|
+
export declare const PsSkeletonTable: ({ alignments, className, columns, hasFooter, hasToolbar, isFramed, rowLayout, rows, }: PsSkeletonTableProps) => import("react").JSX.Element;
|
|
@@ -7,7 +7,8 @@ const ps_skeleton_config_1 = require("../constants/ps-skeleton-config");
|
|
|
7
7
|
const ps_skeleton_shape_1 = require("../constants/ps-skeleton-shape");
|
|
8
8
|
const ps_skeleton_1 = require("./ps-skeleton");
|
|
9
9
|
const ps_skeleton_group_1 = require("./ps-skeleton-group");
|
|
10
|
-
const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false, hasToolbar = false, isFramed = true, rows = 6, }) => {
|
|
10
|
+
const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false, hasToolbar = false, isFramed = true, rowLayout, rows = 6, }) => {
|
|
11
|
+
const layout = rowLayout === undefined ? Array.from({ length: rows }, () => ({})) : rowLayout;
|
|
11
12
|
const gridTemplateColumns = `minmax(0, 2fr) repeat(${Math.max(columns - 1, 0)}, minmax(0, 1fr))`;
|
|
12
13
|
const isRight = (columnIndex) => alignments !== undefined
|
|
13
14
|
? alignments[columnIndex] === 'right'
|
|
@@ -17,6 +18,18 @@ const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false
|
|
|
17
18
|
: ps_skeleton_config_1.PsSkeletonConfig.lineWidths[(rowIndex + columnIndex) % ps_skeleton_config_1.PsSkeletonConfig.lineWidths.length], isStrong ? 'h-3.5' : '') }, columnIndex));
|
|
18
19
|
return ((0, jsx_runtime_1.jsxs)(ps_skeleton_group_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-3', className), children: [hasToolbar ? ((0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-3', children: [(0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'max-w-sm', shape: ps_skeleton_shape_1.PsSkeletonShape.Control }), (0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: 'ml-auto w-24', shape: ps_skeleton_shape_1.PsSkeletonShape.Button })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: isFramed
|
|
19
20
|
? ps_design_system_1.PallasoftClassNameService.merge('overflow-hidden border border-line bg-surface', ps_skeleton_config_1.PsSkeletonConfig.tableFrameClassName)
|
|
20
|
-
: 'overflow-hidden', children: [(0, jsx_runtime_1.jsx)("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: isRight(index) ? 'ml-auto h-2.5 w-12' : 'h-2.5 w-16' }, index))) }),
|
|
21
|
+
: 'overflow-hidden', children: [(0, jsx_runtime_1.jsx)("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: isRight(index) ? 'ml-auto h-2.5 w-12' : 'h-2.5 w-16' }, index))) }), layout.map((row, rowIndex) => {
|
|
22
|
+
const isSection = row.isSection === true;
|
|
23
|
+
const depth = row.depth === undefined ? 0 : row.depth;
|
|
24
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: 'grid items-center gap-4 border-t border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => {
|
|
25
|
+
if (isSection && columnIndex > 0 && !isRight(columnIndex))
|
|
26
|
+
return (0, jsx_runtime_1.jsx)("span", {}, columnIndex);
|
|
27
|
+
if (columnIndex > 0 || (depth === 0 && !isSection))
|
|
28
|
+
return cell(rowIndex, columnIndex, isSection);
|
|
29
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex min-w-0 items-center gap-3', style: {
|
|
30
|
+
paddingInlineStart: `${depth * ps_skeleton_config_1.PsSkeletonConfig.tableIndentRem}rem`,
|
|
31
|
+
}, children: [isSection ? ((0, jsx_runtime_1.jsx)(ps_skeleton_1.PsSkeleton, { className: ps_skeleton_config_1.PsSkeletonConfig.tableSectionMarkerClassName })) : null, cell(rowIndex, columnIndex, isSection)] }, columnIndex));
|
|
32
|
+
}) }, rowIndex));
|
|
33
|
+
}), hasFooter ? ((0, jsx_runtime_1.jsx)("div", { className: 'grid items-center gap-4 border-t-2 border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => cell(layout.length, columnIndex, true)) })) : null] })] }));
|
|
21
34
|
};
|
|
22
35
|
exports.PsSkeletonTable = PsSkeletonTable;
|
|
@@ -14,6 +14,8 @@ export declare const PsSkeletonConfig: {
|
|
|
14
14
|
readonly tabWidthClassName: "w-24";
|
|
15
15
|
readonly tabCount: 4;
|
|
16
16
|
readonly tableFrameClassName: "rounded-[0.875rem]";
|
|
17
|
+
readonly tableIndentRem: 1.25;
|
|
18
|
+
readonly tableSectionMarkerClassName: "h-5 w-5 shrink-0 rounded-md";
|
|
17
19
|
readonly shapeClassNames: Record<PsSkeletonShape, string>;
|
|
18
20
|
readonly shapeSizes: Record<PsSkeletonShape, PsSkeletonSize>;
|
|
19
21
|
};
|
|
@@ -20,6 +20,8 @@ exports.PsSkeletonConfig = {
|
|
|
20
20
|
tabWidthClassName: 'w-24',
|
|
21
21
|
tabCount: 4,
|
|
22
22
|
tableFrameClassName: 'rounded-[0.875rem]',
|
|
23
|
+
tableIndentRem: 1.25,
|
|
24
|
+
tableSectionMarkerClassName: 'h-5 w-5 shrink-0 rounded-md',
|
|
23
25
|
shapeClassNames: {
|
|
24
26
|
[ps_skeleton_shape_1.PsSkeletonShape.Badge]: controlRadius,
|
|
25
27
|
[ps_skeleton_shape_1.PsSkeletonShape.Block]: controlRadius,
|
|
@@ -4,7 +4,8 @@ import { PsSkeletonConfig } from '../constants/ps-skeleton-config.js';
|
|
|
4
4
|
import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
|
|
5
5
|
import { PsSkeleton } from './ps-skeleton.js';
|
|
6
6
|
import { PsSkeletonGroup } from './ps-skeleton-group.js';
|
|
7
|
-
export const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false, hasToolbar = false, isFramed = true, rows = 6, }) => {
|
|
7
|
+
export const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter = false, hasToolbar = false, isFramed = true, rowLayout, rows = 6, }) => {
|
|
8
|
+
const layout = rowLayout === undefined ? Array.from({ length: rows }, () => ({})) : rowLayout;
|
|
8
9
|
const gridTemplateColumns = `minmax(0, 2fr) repeat(${Math.max(columns - 1, 0)}, minmax(0, 1fr))`;
|
|
9
10
|
const isRight = (columnIndex) => alignments !== undefined
|
|
10
11
|
? alignments[columnIndex] === 'right'
|
|
@@ -14,5 +15,17 @@ export const PsSkeletonTable = ({ alignments, className, columns = 4, hasFooter
|
|
|
14
15
|
: PsSkeletonConfig.lineWidths[(rowIndex + columnIndex) % PsSkeletonConfig.lineWidths.length], isStrong ? 'h-3.5' : '') }, columnIndex));
|
|
15
16
|
return (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('flex flex-col gap-3', className), children: [hasToolbar ? (_jsxs("div", { className: 'flex items-center gap-3', children: [_jsx(PsSkeleton, { className: 'max-w-sm', shape: PsSkeletonShape.Control }), _jsx(PsSkeleton, { className: 'ml-auto w-24', shape: PsSkeletonShape.Button })] })) : null, _jsxs("div", { className: isFramed
|
|
16
17
|
? PallasoftClassNameService.merge('overflow-hidden border border-line bg-surface', PsSkeletonConfig.tableFrameClassName)
|
|
17
|
-
: 'overflow-hidden', children: [_jsx("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => (_jsx(PsSkeleton, { className: isRight(index) ? 'ml-auto h-2.5 w-12' : 'h-2.5 w-16' }, index))) }),
|
|
18
|
+
: 'overflow-hidden', children: [_jsx("div", { className: 'grid gap-4 bg-mist/70 px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (_, index) => (_jsx(PsSkeleton, { className: isRight(index) ? 'ml-auto h-2.5 w-12' : 'h-2.5 w-16' }, index))) }), layout.map((row, rowIndex) => {
|
|
19
|
+
const isSection = row.isSection === true;
|
|
20
|
+
const depth = row.depth === undefined ? 0 : row.depth;
|
|
21
|
+
return (_jsx("div", { className: 'grid items-center gap-4 border-t border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => {
|
|
22
|
+
if (isSection && columnIndex > 0 && !isRight(columnIndex))
|
|
23
|
+
return _jsx("span", {}, columnIndex);
|
|
24
|
+
if (columnIndex > 0 || (depth === 0 && !isSection))
|
|
25
|
+
return cell(rowIndex, columnIndex, isSection);
|
|
26
|
+
return (_jsxs("div", { className: 'flex min-w-0 items-center gap-3', style: {
|
|
27
|
+
paddingInlineStart: `${depth * PsSkeletonConfig.tableIndentRem}rem`,
|
|
28
|
+
}, children: [isSection ? (_jsx(PsSkeleton, { className: PsSkeletonConfig.tableSectionMarkerClassName })) : null, cell(rowIndex, columnIndex, isSection)] }, columnIndex));
|
|
29
|
+
}) }, rowIndex));
|
|
30
|
+
}), hasFooter ? (_jsx("div", { className: 'grid items-center gap-4 border-t-2 border-line px-5 py-4', style: { gridTemplateColumns }, children: Array.from({ length: columns }, (__, columnIndex) => cell(layout.length, columnIndex, true)) })) : null] })] }));
|
|
18
31
|
};
|
|
@@ -17,6 +17,8 @@ export const PsSkeletonConfig = {
|
|
|
17
17
|
tabWidthClassName: 'w-24',
|
|
18
18
|
tabCount: 4,
|
|
19
19
|
tableFrameClassName: 'rounded-[0.875rem]',
|
|
20
|
+
tableIndentRem: 1.25,
|
|
21
|
+
tableSectionMarkerClassName: 'h-5 w-5 shrink-0 rounded-md',
|
|
20
22
|
shapeClassNames: {
|
|
21
23
|
[PsSkeletonShape.Badge]: controlRadius,
|
|
22
24
|
[PsSkeletonShape.Block]: controlRadius,
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { PsQueryParamConfig } from '../constants/ps-query-param-config.js';
|
|
2
|
+
import { PsQueryParamService } from '../services/ps-query-param-service.js';
|
|
3
|
+
export const usePsChoiceParam = ([searchParams, setSearchParams], { fallback, name, options, resetParams }) => ({
|
|
4
|
+
onChange: (value) => setSearchParams((current) => PsQueryParamService.withChoice(current, name, value, fallback, resetParams), PsQueryParamConfig.setOptions),
|
|
5
|
+
value: PsQueryParamService.choice(searchParams.get(name), options, fallback),
|
|
6
|
+
});
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { PsQueryParamConfig } from '../constants/ps-query-param-config.js';
|
|
2
|
+
import { PsQueryParamService } from '../services/ps-query-param-service.js';
|
|
3
|
+
export const usePsFlagParam = ([searchParams, setSearchParams], { name, resetParams }) => ({
|
|
4
|
+
isOn: PsQueryParamService.flag(searchParams.get(name)),
|
|
5
|
+
onChange: (isOn) => setSearchParams((current) => PsQueryParamService.withFlag(current, name, isOn, resetParams), PsQueryParamConfig.setOptions),
|
|
6
|
+
});
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { useEffect, useState } from 'react';
|
|
2
|
+
import { PsRerenderConfig } from '../constants/ps-rerender-config.js';
|
|
3
|
+
export const usePsRerenderAt = (atMs) => {
|
|
4
|
+
const [, setTick] = useState(0);
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
if (atMs === null || typeof window === 'undefined')
|
|
7
|
+
return;
|
|
8
|
+
let timer = 0;
|
|
9
|
+
const arm = () => {
|
|
10
|
+
const remaining = atMs - Date.now();
|
|
11
|
+
if (remaining <= 0) {
|
|
12
|
+
setTick((tick) => tick + 1);
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
timer = window.setTimeout(arm, Math.min(remaining, PsRerenderConfig.maxTimerMs));
|
|
16
|
+
};
|
|
17
|
+
arm();
|
|
18
|
+
return () => window.clearTimeout(timer);
|
|
19
|
+
}, [atMs]);
|
|
20
|
+
return Date.now();
|
|
21
|
+
};
|
package/dist/esm/index.js
CHANGED
|
@@ -59,6 +59,7 @@ export * from './components/ps-skeleton.js';
|
|
|
59
59
|
export * from './services/ps-scroll-lock-service.js';
|
|
60
60
|
export * from './services/ps-skeleton-class-service.js';
|
|
61
61
|
export * from './models/ps-skeleton-size.js';
|
|
62
|
+
export * from './models/ps-skeleton-table-row.js';
|
|
62
63
|
export * from './constants/ps-skeleton-shape.js';
|
|
63
64
|
export * from './components/ps-skeleton-card.js';
|
|
64
65
|
export * from './components/ps-skeleton-group.js';
|
|
@@ -202,3 +203,17 @@ export * from './hooks/use-ps-scroll-restoration.js';
|
|
|
202
203
|
export * from './components/ps-scroll-restoration.js';
|
|
203
204
|
export * from './hooks/use-ps-browser-layout-effect.js';
|
|
204
205
|
export * from './models/ps-scroll-pending-save-data.js';
|
|
206
|
+
export * from './constants/ps-flag-param-value.js';
|
|
207
|
+
export * from './constants/ps-query-param-config.js';
|
|
208
|
+
export * from './models/ps-search-params-set-options.js';
|
|
209
|
+
export * from './models/ps-search-params-setter.js';
|
|
210
|
+
export * from './models/ps-search-params-state.js';
|
|
211
|
+
export * from './models/ps-choice-param-data.js';
|
|
212
|
+
export * from './models/ps-flag-param-data.js';
|
|
213
|
+
export * from './models/ps-choice-param-options.js';
|
|
214
|
+
export * from './models/ps-flag-param-options.js';
|
|
215
|
+
export * from './services/ps-query-param-service.js';
|
|
216
|
+
export * from './hooks/use-ps-choice-param.js';
|
|
217
|
+
export * from './hooks/use-ps-flag-param.js';
|
|
218
|
+
export * from './constants/ps-rerender-config.js';
|
|
219
|
+
export * from './hooks/use-ps-rerender-at.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { PsFlagParamValue } from '../constants/ps-flag-param-value.js';
|
|
2
|
+
export class PsQueryParamService {
|
|
3
|
+
static choice(value, options, fallback) {
|
|
4
|
+
const match = options.find((option) => option === value);
|
|
5
|
+
return match === undefined ? fallback : match;
|
|
6
|
+
}
|
|
7
|
+
static withChoice(params, name, value, fallback, resetParams = []) {
|
|
8
|
+
const next = PsQueryParamService.cleared(params, resetParams);
|
|
9
|
+
if (value === fallback)
|
|
10
|
+
next.delete(name);
|
|
11
|
+
else
|
|
12
|
+
next.set(name, value);
|
|
13
|
+
return next;
|
|
14
|
+
}
|
|
15
|
+
static flag(value) {
|
|
16
|
+
return value === PsFlagParamValue.on;
|
|
17
|
+
}
|
|
18
|
+
static withFlag(params, name, isOn, resetParams = []) {
|
|
19
|
+
const next = PsQueryParamService.cleared(params, resetParams);
|
|
20
|
+
if (isOn)
|
|
21
|
+
next.set(name, PsFlagParamValue.on);
|
|
22
|
+
else
|
|
23
|
+
next.delete(name);
|
|
24
|
+
return next;
|
|
25
|
+
}
|
|
26
|
+
static cleared(params, resetParams) {
|
|
27
|
+
const next = new URLSearchParams(params);
|
|
28
|
+
for (const name of resetParams)
|
|
29
|
+
next.delete(name);
|
|
30
|
+
return next;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { PsChoiceParamData } from '../models/ps-choice-param-data';
|
|
2
|
+
import type { PsChoiceParamOptions } from '../models/ps-choice-param-options';
|
|
3
|
+
import type { PsSearchParamsState } from '../models/ps-search-params-state';
|
|
4
|
+
export declare const usePsChoiceParam: <Value extends string>([searchParams, setSearchParams]: PsSearchParamsState, { fallback, name, options, resetParams }: PsChoiceParamOptions<Value>) => PsChoiceParamData<Value>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.usePsChoiceParam = void 0;
|
|
4
|
+
const ps_query_param_config_1 = require("../constants/ps-query-param-config");
|
|
5
|
+
const ps_query_param_service_1 = require("../services/ps-query-param-service");
|
|
6
|
+
const usePsChoiceParam = ([searchParams, setSearchParams], { fallback, name, options, resetParams }) => ({
|
|
7
|
+
onChange: (value) => setSearchParams((current) => ps_query_param_service_1.PsQueryParamService.withChoice(current, name, value, fallback, resetParams), ps_query_param_config_1.PsQueryParamConfig.setOptions),
|
|
8
|
+
value: ps_query_param_service_1.PsQueryParamService.choice(searchParams.get(name), options, fallback),
|
|
9
|
+
});
|
|
10
|
+
exports.usePsChoiceParam = usePsChoiceParam;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { PsFlagParamData } from '../models/ps-flag-param-data';
|
|
2
|
+
import type { PsFlagParamOptions } from '../models/ps-flag-param-options';
|
|
3
|
+
import type { PsSearchParamsState } from '../models/ps-search-params-state';
|
|
4
|
+
export declare const usePsFlagParam: ([searchParams, setSearchParams]: PsSearchParamsState, { name, resetParams }: PsFlagParamOptions) => PsFlagParamData;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.usePsFlagParam = void 0;
|
|
4
|
+
const ps_query_param_config_1 = require("../constants/ps-query-param-config");
|
|
5
|
+
const ps_query_param_service_1 = require("../services/ps-query-param-service");
|
|
6
|
+
const usePsFlagParam = ([searchParams, setSearchParams], { name, resetParams }) => ({
|
|
7
|
+
isOn: ps_query_param_service_1.PsQueryParamService.flag(searchParams.get(name)),
|
|
8
|
+
onChange: (isOn) => setSearchParams((current) => ps_query_param_service_1.PsQueryParamService.withFlag(current, name, isOn, resetParams), ps_query_param_config_1.PsQueryParamConfig.setOptions),
|
|
9
|
+
});
|
|
10
|
+
exports.usePsFlagParam = usePsFlagParam;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const usePsRerenderAt: (atMs: number | null) => number;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.usePsRerenderAt = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const ps_rerender_config_1 = require("../constants/ps-rerender-config");
|
|
6
|
+
const usePsRerenderAt = (atMs) => {
|
|
7
|
+
const [, setTick] = (0, react_1.useState)(0);
|
|
8
|
+
(0, react_1.useEffect)(() => {
|
|
9
|
+
if (atMs === null || typeof window === 'undefined')
|
|
10
|
+
return;
|
|
11
|
+
let timer = 0;
|
|
12
|
+
const arm = () => {
|
|
13
|
+
const remaining = atMs - Date.now();
|
|
14
|
+
if (remaining <= 0) {
|
|
15
|
+
setTick((tick) => tick + 1);
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
timer = window.setTimeout(arm, Math.min(remaining, ps_rerender_config_1.PsRerenderConfig.maxTimerMs));
|
|
19
|
+
};
|
|
20
|
+
arm();
|
|
21
|
+
return () => window.clearTimeout(timer);
|
|
22
|
+
}, [atMs]);
|
|
23
|
+
return Date.now();
|
|
24
|
+
};
|
|
25
|
+
exports.usePsRerenderAt = usePsRerenderAt;
|
package/dist/index.d.ts
CHANGED
|
@@ -59,6 +59,7 @@ export * from './components/ps-skeleton';
|
|
|
59
59
|
export * from './services/ps-scroll-lock-service';
|
|
60
60
|
export * from './services/ps-skeleton-class-service';
|
|
61
61
|
export * from './models/ps-skeleton-size';
|
|
62
|
+
export * from './models/ps-skeleton-table-row';
|
|
62
63
|
export * from './constants/ps-skeleton-shape';
|
|
63
64
|
export * from './components/ps-skeleton-card';
|
|
64
65
|
export * from './components/ps-skeleton-group';
|
|
@@ -202,3 +203,17 @@ export * from './hooks/use-ps-scroll-restoration';
|
|
|
202
203
|
export * from './components/ps-scroll-restoration';
|
|
203
204
|
export * from './hooks/use-ps-browser-layout-effect';
|
|
204
205
|
export * from './models/ps-scroll-pending-save-data';
|
|
206
|
+
export * from './constants/ps-flag-param-value';
|
|
207
|
+
export * from './constants/ps-query-param-config';
|
|
208
|
+
export * from './models/ps-search-params-set-options';
|
|
209
|
+
export * from './models/ps-search-params-setter';
|
|
210
|
+
export * from './models/ps-search-params-state';
|
|
211
|
+
export * from './models/ps-choice-param-data';
|
|
212
|
+
export * from './models/ps-flag-param-data';
|
|
213
|
+
export * from './models/ps-choice-param-options';
|
|
214
|
+
export * from './models/ps-flag-param-options';
|
|
215
|
+
export * from './services/ps-query-param-service';
|
|
216
|
+
export * from './hooks/use-ps-choice-param';
|
|
217
|
+
export * from './hooks/use-ps-flag-param';
|
|
218
|
+
export * from './constants/ps-rerender-config';
|
|
219
|
+
export * from './hooks/use-ps-rerender-at';
|
package/dist/index.js
CHANGED
|
@@ -75,6 +75,7 @@ __exportStar(require("./components/ps-skeleton"), exports);
|
|
|
75
75
|
__exportStar(require("./services/ps-scroll-lock-service"), exports);
|
|
76
76
|
__exportStar(require("./services/ps-skeleton-class-service"), exports);
|
|
77
77
|
__exportStar(require("./models/ps-skeleton-size"), exports);
|
|
78
|
+
__exportStar(require("./models/ps-skeleton-table-row"), exports);
|
|
78
79
|
__exportStar(require("./constants/ps-skeleton-shape"), exports);
|
|
79
80
|
__exportStar(require("./components/ps-skeleton-card"), exports);
|
|
80
81
|
__exportStar(require("./components/ps-skeleton-group"), exports);
|
|
@@ -218,3 +219,17 @@ __exportStar(require("./hooks/use-ps-scroll-restoration"), exports);
|
|
|
218
219
|
__exportStar(require("./components/ps-scroll-restoration"), exports);
|
|
219
220
|
__exportStar(require("./hooks/use-ps-browser-layout-effect"), exports);
|
|
220
221
|
__exportStar(require("./models/ps-scroll-pending-save-data"), exports);
|
|
222
|
+
__exportStar(require("./constants/ps-flag-param-value"), exports);
|
|
223
|
+
__exportStar(require("./constants/ps-query-param-config"), exports);
|
|
224
|
+
__exportStar(require("./models/ps-search-params-set-options"), exports);
|
|
225
|
+
__exportStar(require("./models/ps-search-params-setter"), exports);
|
|
226
|
+
__exportStar(require("./models/ps-search-params-state"), exports);
|
|
227
|
+
__exportStar(require("./models/ps-choice-param-data"), exports);
|
|
228
|
+
__exportStar(require("./models/ps-flag-param-data"), exports);
|
|
229
|
+
__exportStar(require("./models/ps-choice-param-options"), exports);
|
|
230
|
+
__exportStar(require("./models/ps-flag-param-options"), exports);
|
|
231
|
+
__exportStar(require("./services/ps-query-param-service"), exports);
|
|
232
|
+
__exportStar(require("./hooks/use-ps-choice-param"), exports);
|
|
233
|
+
__exportStar(require("./hooks/use-ps-flag-param"), exports);
|
|
234
|
+
__exportStar(require("./constants/ps-rerender-config"), exports);
|
|
235
|
+
__exportStar(require("./hooks/use-ps-rerender-at"), exports);
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare class PsQueryParamService {
|
|
2
|
+
static choice<Value extends string>(value: string | null, options: readonly Value[], fallback: Value): Value;
|
|
3
|
+
static withChoice<Value extends string>(params: URLSearchParams, name: string, value: Value, fallback: Value, resetParams?: readonly string[]): URLSearchParams;
|
|
4
|
+
static flag(value: string | null): boolean;
|
|
5
|
+
static withFlag(params: URLSearchParams, name: string, isOn: boolean, resetParams?: readonly string[]): URLSearchParams;
|
|
6
|
+
private static cleared;
|
|
7
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.PsQueryParamService = void 0;
|
|
4
|
+
const ps_flag_param_value_1 = require("../constants/ps-flag-param-value");
|
|
5
|
+
class PsQueryParamService {
|
|
6
|
+
static choice(value, options, fallback) {
|
|
7
|
+
const match = options.find((option) => option === value);
|
|
8
|
+
return match === undefined ? fallback : match;
|
|
9
|
+
}
|
|
10
|
+
static withChoice(params, name, value, fallback, resetParams = []) {
|
|
11
|
+
const next = PsQueryParamService.cleared(params, resetParams);
|
|
12
|
+
if (value === fallback)
|
|
13
|
+
next.delete(name);
|
|
14
|
+
else
|
|
15
|
+
next.set(name, value);
|
|
16
|
+
return next;
|
|
17
|
+
}
|
|
18
|
+
static flag(value) {
|
|
19
|
+
return value === ps_flag_param_value_1.PsFlagParamValue.on;
|
|
20
|
+
}
|
|
21
|
+
static withFlag(params, name, isOn, resetParams = []) {
|
|
22
|
+
const next = PsQueryParamService.cleared(params, resetParams);
|
|
23
|
+
if (isOn)
|
|
24
|
+
next.set(name, ps_flag_param_value_1.PsFlagParamValue.on);
|
|
25
|
+
else
|
|
26
|
+
next.delete(name);
|
|
27
|
+
return next;
|
|
28
|
+
}
|
|
29
|
+
static cleared(params, resetParams) {
|
|
30
|
+
const next = new URLSearchParams(params);
|
|
31
|
+
for (const name of resetParams)
|
|
32
|
+
next.delete(name);
|
|
33
|
+
return next;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
exports.PsQueryParamService = PsQueryParamService;
|