@gnwebsoft/ui 3.0.1 → 3.0.4
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/README.md +688 -0
- package/dist/chunk-4H3AFH7A.js +505 -0
- package/dist/chunk-DE62KYFK.js +122 -0
- package/dist/chunk-DEPJRTVT.js +1 -0
- package/dist/chunk-EBRUE2WR.cjs +493 -0
- package/dist/chunk-FD57PCAC.cjs +1 -0
- package/dist/chunk-H3GQLELL.js +2025 -0
- package/dist/chunk-MVPLBJRK.cjs +1 -0
- package/dist/chunk-OJF67RNM.js +1 -0
- package/dist/chunk-OT7COE7R.cjs +2025 -0
- package/dist/chunk-R2YK4LTT.cjs +122 -0
- package/dist/chunk-U6SDYCWF.js +493 -0
- package/dist/chunk-ZC7FGYL2.cjs +505 -0
- package/dist/components/index.cjs +25 -0
- package/dist/components/index.d.cts +752 -0
- package/dist/components/index.d.ts +664 -15
- package/dist/components/index.js +25 -24
- package/dist/enhanced-z-I7EHVS.d.cts +134 -0
- package/dist/enhanced-z-I7EHVS.d.ts +134 -0
- package/dist/hooks/index.cjs +12 -0
- package/dist/hooks/index.d.cts +95 -0
- package/dist/hooks/index.d.ts +82 -4
- package/dist/hooks/index.js +12 -7
- package/dist/index.cjs +127 -0
- package/dist/index.d.cts +14 -0
- package/dist/index.d.ts +4 -6
- package/dist/index.js +127 -54
- package/dist/types/index.cjs +2 -0
- package/dist/types/index.d.cts +241 -0
- package/dist/types/index.d.ts +205 -20
- package/dist/types/index.js +2 -1
- package/dist/utils/index.cjs +45 -0
- package/dist/utils/index.d.cts +366 -0
- package/dist/utils/index.d.ts +317 -9
- package/dist/utils/index.js +45 -22
- package/dist/wrappers/index.cjs +54 -0
- package/dist/wrappers/index.d.cts +1684 -0
- package/dist/wrappers/index.d.ts +1601 -118
- package/dist/wrappers/index.js +54 -8
- package/package.json +145 -88
- package/dist/AsyncSelectPayload-Cz4bgak0.d.mts +0 -10
- package/dist/AsyncSelectPayload-Cz4bgak0.d.ts +0 -10
- package/dist/chunk-2JFL7TS5.mjs +0 -0
- package/dist/chunk-6BGQA4BQ.js +0 -1
- package/dist/chunk-6JZ35VQJ.js +0 -19
- package/dist/chunk-7M2VOCYN.js +0 -1
- package/dist/chunk-BWQUYXUW.mjs +0 -1634
- package/dist/chunk-D3J7MWAU.js +0 -1634
- package/dist/chunk-EVPUCTZA.mjs +0 -0
- package/dist/chunk-FSU3H777.mjs +0 -473
- package/dist/chunk-GFSTK7KN.mjs +0 -19
- package/dist/chunk-I7EIUZKK.js +0 -332
- package/dist/chunk-JKUOV3MN.js +0 -473
- package/dist/chunk-RQS44YC7.mjs +0 -332
- package/dist/components/index.d.mts +0 -103
- package/dist/components/index.mjs +0 -24
- package/dist/hooks/index.d.mts +0 -17
- package/dist/hooks/index.mjs +0 -7
- package/dist/index.d.mts +0 -16
- package/dist/index.mjs +0 -54
- package/dist/types/index.d.mts +0 -56
- package/dist/types/index.mjs +0 -1
- package/dist/utils/index.d.mts +0 -58
- package/dist/utils/index.mjs +0 -22
- package/dist/wrappers/index.d.mts +0 -201
- package/dist/wrappers/index.mjs +0 -8
package/dist/components/index.js
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
1
|
+
import {
|
|
2
|
+
AuthorizedView_default,
|
|
3
|
+
CancelButton_default,
|
|
4
|
+
ClearButton_default,
|
|
5
|
+
FilterButton_default,
|
|
6
|
+
FilterWrapper_default,
|
|
7
|
+
FormWrapper_default,
|
|
8
|
+
LabelText_default,
|
|
9
|
+
ListWrapper_default,
|
|
10
|
+
SimpleButton_default,
|
|
11
|
+
SimpleToolbar_default
|
|
12
|
+
} from "../chunk-U6SDYCWF.js";
|
|
13
|
+
export {
|
|
14
|
+
AuthorizedView_default as AuthorizedView,
|
|
15
|
+
CancelButton_default as CancelButton,
|
|
16
|
+
ClearButton_default as ClearButton,
|
|
17
|
+
FilterButton_default as FilterButton,
|
|
18
|
+
FilterWrapper_default as FilterWrapper,
|
|
19
|
+
FormWrapper_default as FormWrapper,
|
|
20
|
+
LabelText_default as LabelText,
|
|
21
|
+
ListWrapper_default as ListWrapper,
|
|
22
|
+
SimpleButton_default as SimpleButton,
|
|
23
|
+
SimpleToolbar_default as SimpleToolbar
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFtdLAogICJzb3VyY2VzQ29udGVudCI6IFtdLAogICJtYXBwaW5ncyI6ICIiLAogICJuYW1lcyI6IFtdCn0K
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { ChangeEvent } from 'react';
|
|
2
|
+
import { FieldValues, FieldPath, PathValue, UseControllerReturn } from 'react-hook-form';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Field types for built-in transformation patterns
|
|
6
|
+
*/
|
|
7
|
+
type FieldType = 'text' | 'number' | 'date' | 'time' | 'select' | 'radio';
|
|
8
|
+
/**
|
|
9
|
+
* Enhanced options for the useTransform hook with performance optimizations
|
|
10
|
+
* and built-in field type handling.
|
|
11
|
+
*
|
|
12
|
+
* @template TFieldValues - The form values type
|
|
13
|
+
* @template TName - The field name type
|
|
14
|
+
* @template TValue - The transformed value type
|
|
15
|
+
*
|
|
16
|
+
* @public
|
|
17
|
+
*/
|
|
18
|
+
interface EnhancedUseTransformOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = PathValue<TFieldValues, TName>> {
|
|
19
|
+
/** The current field value from react-hook-form */
|
|
20
|
+
value: UseControllerReturn<TFieldValues, TName>["field"]["value"];
|
|
21
|
+
/** The onChange handler from react-hook-form */
|
|
22
|
+
onChange: UseControllerReturn<TFieldValues, TName>["field"]["onChange"];
|
|
23
|
+
/** Optional transformation functions */
|
|
24
|
+
transform?: {
|
|
25
|
+
/**
|
|
26
|
+
* Transform the field value for display in the input
|
|
27
|
+
* @param value - The current field value
|
|
28
|
+
* @returns The transformed value to display
|
|
29
|
+
*/
|
|
30
|
+
input?: (value: PathValue<TFieldValues, TName>) => TValue;
|
|
31
|
+
/**
|
|
32
|
+
* Transform the input event back to the field value
|
|
33
|
+
* @param event - The input event or value
|
|
34
|
+
* @returns The transformed value to store in the form
|
|
35
|
+
*/
|
|
36
|
+
output?: (...args: any[]) => PathValue<TFieldValues, TName>;
|
|
37
|
+
};
|
|
38
|
+
/** Built-in field type for automatic transformation */
|
|
39
|
+
fieldType?: FieldType;
|
|
40
|
+
/** Default value to use when field value is null/undefined */
|
|
41
|
+
defaultValue?: TValue;
|
|
42
|
+
/** Enable development warnings for debugging */
|
|
43
|
+
enableWarnings?: boolean;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Enhanced return type for the useTransform hook with stable references
|
|
47
|
+
*
|
|
48
|
+
* @template TFieldValues - The form values type
|
|
49
|
+
* @template TName - The field name type
|
|
50
|
+
* @template TValue - The transformed value type
|
|
51
|
+
*
|
|
52
|
+
* @public
|
|
53
|
+
*/
|
|
54
|
+
interface EnhancedUseTransformReturn<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = PathValue<TFieldValues, TName>> {
|
|
55
|
+
/** The transformed value to display in the input (memoized) */
|
|
56
|
+
value: TValue;
|
|
57
|
+
/** The enhanced onChange handler with transformation applied (memoized) */
|
|
58
|
+
onChange: UseControllerReturn<TFieldValues, TName>["field"]["onChange"];
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Transform factories for common field types
|
|
62
|
+
*/
|
|
63
|
+
declare const transformFactories: {
|
|
64
|
+
readonly number: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>() => {
|
|
65
|
+
input: (value: PathValue<TFieldValues, TName>) => string;
|
|
66
|
+
output: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => PathValue<TFieldValues, TName>;
|
|
67
|
+
};
|
|
68
|
+
readonly text: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>() => {
|
|
69
|
+
input: (value: PathValue<TFieldValues, TName>) => string;
|
|
70
|
+
output: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => PathValue<TFieldValues, TName>;
|
|
71
|
+
};
|
|
72
|
+
readonly select: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>() => {
|
|
73
|
+
input: (value: PathValue<TFieldValues, TName>) => string;
|
|
74
|
+
output: (event: any, value?: any) => PathValue<TFieldValues, TName>;
|
|
75
|
+
};
|
|
76
|
+
};
|
|
77
|
+
/**
|
|
78
|
+
* An enhanced hook for transforming form field values with performance optimizations
|
|
79
|
+
* and built-in field type handling.
|
|
80
|
+
*
|
|
81
|
+
* This enhanced version provides:
|
|
82
|
+
* - Performance optimizations with useMemo and useCallback
|
|
83
|
+
* - Built-in transformations for common field types
|
|
84
|
+
* - Better TypeScript inference
|
|
85
|
+
* - Development warnings
|
|
86
|
+
* - Stable references to prevent unnecessary re-renders
|
|
87
|
+
*
|
|
88
|
+
* @example
|
|
89
|
+
* Basic usage with built-in number handling:
|
|
90
|
+
* ```tsx
|
|
91
|
+
* const { value, onChange } = useEnhancedTransform({
|
|
92
|
+
* value: field.value,
|
|
93
|
+
* onChange: field.onChange,
|
|
94
|
+
* fieldType: 'number'
|
|
95
|
+
* });
|
|
96
|
+
* ```
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* Custom transformations (same as original):
|
|
100
|
+
* ```tsx
|
|
101
|
+
* const { value, onChange } = useEnhancedTransform({
|
|
102
|
+
* value: field.value,
|
|
103
|
+
* onChange: field.onChange,
|
|
104
|
+
* transform: {
|
|
105
|
+
* input: (value) => value?.toString() || '',
|
|
106
|
+
* output: (event) => parseInt(event.target.value) || null
|
|
107
|
+
* }
|
|
108
|
+
* });
|
|
109
|
+
* ```
|
|
110
|
+
*
|
|
111
|
+
* @example
|
|
112
|
+
* With default value and warnings:
|
|
113
|
+
* ```tsx
|
|
114
|
+
* const { value, onChange } = useEnhancedTransform({
|
|
115
|
+
* value: field.value,
|
|
116
|
+
* onChange: field.onChange,
|
|
117
|
+
* fieldType: 'text',
|
|
118
|
+
* defaultValue: '',
|
|
119
|
+
* enableWarnings: process.env.NODE_ENV === 'development'
|
|
120
|
+
* });
|
|
121
|
+
* ```
|
|
122
|
+
*
|
|
123
|
+
* @template TFieldValues - The form values type
|
|
124
|
+
* @template TName - The field name type
|
|
125
|
+
* @template TValue - The transformed value type
|
|
126
|
+
*
|
|
127
|
+
* @param options - Configuration options including value, onChange, and transform functions
|
|
128
|
+
* @returns Object with transformed value and enhanced onChange handler (both memoized)
|
|
129
|
+
*
|
|
130
|
+
* @public
|
|
131
|
+
*/
|
|
132
|
+
declare function useEnhancedTransform<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = PathValue<TFieldValues, TName>>(options: EnhancedUseTransformOptions<TFieldValues, TName, TValue>): EnhancedUseTransformReturn<TFieldValues, TName, TValue>;
|
|
133
|
+
|
|
134
|
+
export { type EnhancedUseTransformOptions as E, type FieldType as F, type EnhancedUseTransformReturn as a, transformFactories as t, useEnhancedTransform as u };
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { ChangeEvent } from 'react';
|
|
2
|
+
import { FieldValues, FieldPath, PathValue, UseControllerReturn } from 'react-hook-form';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Field types for built-in transformation patterns
|
|
6
|
+
*/
|
|
7
|
+
type FieldType = 'text' | 'number' | 'date' | 'time' | 'select' | 'radio';
|
|
8
|
+
/**
|
|
9
|
+
* Enhanced options for the useTransform hook with performance optimizations
|
|
10
|
+
* and built-in field type handling.
|
|
11
|
+
*
|
|
12
|
+
* @template TFieldValues - The form values type
|
|
13
|
+
* @template TName - The field name type
|
|
14
|
+
* @template TValue - The transformed value type
|
|
15
|
+
*
|
|
16
|
+
* @public
|
|
17
|
+
*/
|
|
18
|
+
interface EnhancedUseTransformOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = PathValue<TFieldValues, TName>> {
|
|
19
|
+
/** The current field value from react-hook-form */
|
|
20
|
+
value: UseControllerReturn<TFieldValues, TName>["field"]["value"];
|
|
21
|
+
/** The onChange handler from react-hook-form */
|
|
22
|
+
onChange: UseControllerReturn<TFieldValues, TName>["field"]["onChange"];
|
|
23
|
+
/** Optional transformation functions */
|
|
24
|
+
transform?: {
|
|
25
|
+
/**
|
|
26
|
+
* Transform the field value for display in the input
|
|
27
|
+
* @param value - The current field value
|
|
28
|
+
* @returns The transformed value to display
|
|
29
|
+
*/
|
|
30
|
+
input?: (value: PathValue<TFieldValues, TName>) => TValue;
|
|
31
|
+
/**
|
|
32
|
+
* Transform the input event back to the field value
|
|
33
|
+
* @param event - The input event or value
|
|
34
|
+
* @returns The transformed value to store in the form
|
|
35
|
+
*/
|
|
36
|
+
output?: (...args: any[]) => PathValue<TFieldValues, TName>;
|
|
37
|
+
};
|
|
38
|
+
/** Built-in field type for automatic transformation */
|
|
39
|
+
fieldType?: FieldType;
|
|
40
|
+
/** Default value to use when field value is null/undefined */
|
|
41
|
+
defaultValue?: TValue;
|
|
42
|
+
/** Enable development warnings for debugging */
|
|
43
|
+
enableWarnings?: boolean;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Enhanced return type for the useTransform hook with stable references
|
|
47
|
+
*
|
|
48
|
+
* @template TFieldValues - The form values type
|
|
49
|
+
* @template TName - The field name type
|
|
50
|
+
* @template TValue - The transformed value type
|
|
51
|
+
*
|
|
52
|
+
* @public
|
|
53
|
+
*/
|
|
54
|
+
interface EnhancedUseTransformReturn<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = PathValue<TFieldValues, TName>> {
|
|
55
|
+
/** The transformed value to display in the input (memoized) */
|
|
56
|
+
value: TValue;
|
|
57
|
+
/** The enhanced onChange handler with transformation applied (memoized) */
|
|
58
|
+
onChange: UseControllerReturn<TFieldValues, TName>["field"]["onChange"];
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Transform factories for common field types
|
|
62
|
+
*/
|
|
63
|
+
declare const transformFactories: {
|
|
64
|
+
readonly number: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>() => {
|
|
65
|
+
input: (value: PathValue<TFieldValues, TName>) => string;
|
|
66
|
+
output: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => PathValue<TFieldValues, TName>;
|
|
67
|
+
};
|
|
68
|
+
readonly text: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>() => {
|
|
69
|
+
input: (value: PathValue<TFieldValues, TName>) => string;
|
|
70
|
+
output: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => PathValue<TFieldValues, TName>;
|
|
71
|
+
};
|
|
72
|
+
readonly select: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>() => {
|
|
73
|
+
input: (value: PathValue<TFieldValues, TName>) => string;
|
|
74
|
+
output: (event: any, value?: any) => PathValue<TFieldValues, TName>;
|
|
75
|
+
};
|
|
76
|
+
};
|
|
77
|
+
/**
|
|
78
|
+
* An enhanced hook for transforming form field values with performance optimizations
|
|
79
|
+
* and built-in field type handling.
|
|
80
|
+
*
|
|
81
|
+
* This enhanced version provides:
|
|
82
|
+
* - Performance optimizations with useMemo and useCallback
|
|
83
|
+
* - Built-in transformations for common field types
|
|
84
|
+
* - Better TypeScript inference
|
|
85
|
+
* - Development warnings
|
|
86
|
+
* - Stable references to prevent unnecessary re-renders
|
|
87
|
+
*
|
|
88
|
+
* @example
|
|
89
|
+
* Basic usage with built-in number handling:
|
|
90
|
+
* ```tsx
|
|
91
|
+
* const { value, onChange } = useEnhancedTransform({
|
|
92
|
+
* value: field.value,
|
|
93
|
+
* onChange: field.onChange,
|
|
94
|
+
* fieldType: 'number'
|
|
95
|
+
* });
|
|
96
|
+
* ```
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* Custom transformations (same as original):
|
|
100
|
+
* ```tsx
|
|
101
|
+
* const { value, onChange } = useEnhancedTransform({
|
|
102
|
+
* value: field.value,
|
|
103
|
+
* onChange: field.onChange,
|
|
104
|
+
* transform: {
|
|
105
|
+
* input: (value) => value?.toString() || '',
|
|
106
|
+
* output: (event) => parseInt(event.target.value) || null
|
|
107
|
+
* }
|
|
108
|
+
* });
|
|
109
|
+
* ```
|
|
110
|
+
*
|
|
111
|
+
* @example
|
|
112
|
+
* With default value and warnings:
|
|
113
|
+
* ```tsx
|
|
114
|
+
* const { value, onChange } = useEnhancedTransform({
|
|
115
|
+
* value: field.value,
|
|
116
|
+
* onChange: field.onChange,
|
|
117
|
+
* fieldType: 'text',
|
|
118
|
+
* defaultValue: '',
|
|
119
|
+
* enableWarnings: process.env.NODE_ENV === 'development'
|
|
120
|
+
* });
|
|
121
|
+
* ```
|
|
122
|
+
*
|
|
123
|
+
* @template TFieldValues - The form values type
|
|
124
|
+
* @template TName - The field name type
|
|
125
|
+
* @template TValue - The transformed value type
|
|
126
|
+
*
|
|
127
|
+
* @param options - Configuration options including value, onChange, and transform functions
|
|
128
|
+
* @returns Object with transformed value and enhanced onChange handler (both memoized)
|
|
129
|
+
*
|
|
130
|
+
* @public
|
|
131
|
+
*/
|
|
132
|
+
declare function useEnhancedTransform<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = PathValue<TFieldValues, TName>>(options: EnhancedUseTransformOptions<TFieldValues, TName, TValue>): EnhancedUseTransformReturn<TFieldValues, TName, TValue>;
|
|
133
|
+
|
|
134
|
+
export { type EnhancedUseTransformOptions as E, type FieldType as F, type EnhancedUseTransformReturn as a, transformFactories as t, useEnhancedTransform as u };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../chunk-MVPLBJRK.cjs');
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
var _chunkR2YK4LTTcjs = require('../chunk-R2YK4LTT.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
exports.transformFactories = _chunkR2YK4LTTcjs.transformFactories; exports.useEnhancedTransform = _chunkR2YK4LTTcjs.useEnhancedTransform; exports.useTransform = _chunkR2YK4LTTcjs.useTransform;
|
|
12
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImQ6XFxQcm9qZWN0c1xcZ253ZWItbW9ub3JlcG9cXHBhY2thZ2VzXFx1aVxcZGlzdFxcaG9va3NcXGluZGV4LmNqcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSwwR0FBOEI7QUFDOUI7QUFDRTtBQUNBO0FBQ0E7QUFDRix5REFBOEI7QUFDOUI7QUFDRTtBQUNBO0FBQ0E7QUFDRixnTUFBQyIsImZpbGUiOiJEOlxcUHJvamVjdHNcXGdud2ViLW1vbm9yZXBvXFxwYWNrYWdlc1xcdWlcXGRpc3RcXGhvb2tzXFxpbmRleC5janMifQ==
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { FieldValues, FieldPath, UseControllerReturn, PathValue } from 'react-hook-form';
|
|
2
|
+
export { E as EnhancedUseTransformOptions, a as EnhancedUseTransformReturn, F as FieldType, t as transformFactories, u as useEnhancedTransform } from '../enhanced-z-I7EHVS.cjs';
|
|
3
|
+
import 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Options for the useTransform hook.
|
|
7
|
+
*
|
|
8
|
+
* @template TFieldValues - The form values type
|
|
9
|
+
* @template TName - The field name type
|
|
10
|
+
* @template TValue - The transformed value type
|
|
11
|
+
*
|
|
12
|
+
* @public
|
|
13
|
+
*/
|
|
14
|
+
interface UseTransformOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown> {
|
|
15
|
+
/** The current field value from react-hook-form */
|
|
16
|
+
value: UseControllerReturn<TFieldValues, TName>["field"]["value"];
|
|
17
|
+
/** The onChange handler from react-hook-form */
|
|
18
|
+
onChange: UseControllerReturn<TFieldValues, TName>["field"]["onChange"];
|
|
19
|
+
/** Optional transformation functions */
|
|
20
|
+
transform?: {
|
|
21
|
+
/**
|
|
22
|
+
* Transform the field value for display in the input
|
|
23
|
+
* @param value - The current field value
|
|
24
|
+
* @returns The transformed value to display
|
|
25
|
+
*/
|
|
26
|
+
input?: (value: PathValue<TFieldValues, TName>) => TValue;
|
|
27
|
+
/**
|
|
28
|
+
* Transform the input event back to the field value
|
|
29
|
+
* @param event - The input event parameters
|
|
30
|
+
* @returns The transformed value to store in the form
|
|
31
|
+
*/
|
|
32
|
+
output?: (...event: any[]) => PathValue<TFieldValues, TName>;
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Return type for the useTransform hook.
|
|
37
|
+
*
|
|
38
|
+
* @template TFieldValues - The form values type
|
|
39
|
+
* @template TName - The field name type
|
|
40
|
+
* @template TValue - The transformed value type
|
|
41
|
+
*
|
|
42
|
+
* @public
|
|
43
|
+
*/
|
|
44
|
+
interface UseTransformReturn<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown> {
|
|
45
|
+
/** The transformed value to display in the input */
|
|
46
|
+
value: TValue;
|
|
47
|
+
/** The enhanced onChange handler with transformation applied */
|
|
48
|
+
onChange: UseControllerReturn<TFieldValues, TName>["field"]["onChange"];
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* A hook for transforming form field values between display and storage formats.
|
|
52
|
+
*
|
|
53
|
+
* This hook provides a way to transform values as they flow between the form field
|
|
54
|
+
* and the display component. It's particularly useful for formatting data for display
|
|
55
|
+
* (like dates, numbers, or complex objects) while maintaining a different internal
|
|
56
|
+
* representation in the form state.
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
* Transform a date for display:
|
|
60
|
+
* ```tsx
|
|
61
|
+
* const { value, onChange } = useTransform({
|
|
62
|
+
* value: field.value,
|
|
63
|
+
* onChange: field.onChange,
|
|
64
|
+
* transform: {
|
|
65
|
+
* input: (date) => date ? format(date, 'yyyy-MM-dd') : '',
|
|
66
|
+
* output: (event) => new Date(event.target.value)
|
|
67
|
+
* }
|
|
68
|
+
* });
|
|
69
|
+
* ```
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
72
|
+
* Transform numbers with formatting:
|
|
73
|
+
* ```tsx
|
|
74
|
+
* const { value, onChange } = useTransform({
|
|
75
|
+
* value: field.value,
|
|
76
|
+
* onChange: field.onChange,
|
|
77
|
+
* transform: {
|
|
78
|
+
* input: (num) => num ? num.toLocaleString() : '',
|
|
79
|
+
* output: (event) => parseFloat(event.target.value.replace(/,/g, ''))
|
|
80
|
+
* }
|
|
81
|
+
* });
|
|
82
|
+
* ```
|
|
83
|
+
*
|
|
84
|
+
* @template TFieldValues - The form values type
|
|
85
|
+
* @template TName - The field name type
|
|
86
|
+
* @template TValue - The transformed value type
|
|
87
|
+
*
|
|
88
|
+
* @param options - Configuration options including value, onChange, and transform functions
|
|
89
|
+
* @returns Object with transformed value and enhanced onChange handler
|
|
90
|
+
*
|
|
91
|
+
* @public
|
|
92
|
+
*/
|
|
93
|
+
declare function useTransform<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown>(options: UseTransformOptions<TFieldValues, TName, TValue>): UseTransformReturn<TFieldValues, TName, TValue>;
|
|
94
|
+
|
|
95
|
+
export { type UseTransformOptions, type UseTransformReturn, useTransform };
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -1,17 +1,95 @@
|
|
|
1
1
|
import { FieldValues, FieldPath, UseControllerReturn, PathValue } from 'react-hook-form';
|
|
2
|
+
export { E as EnhancedUseTransformOptions, a as EnhancedUseTransformReturn, F as FieldType, t as transformFactories, u as useEnhancedTransform } from '../enhanced-z-I7EHVS.js';
|
|
3
|
+
import 'react';
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Options for the useTransform hook.
|
|
7
|
+
*
|
|
8
|
+
* @template TFieldValues - The form values type
|
|
9
|
+
* @template TName - The field name type
|
|
10
|
+
* @template TValue - The transformed value type
|
|
11
|
+
*
|
|
12
|
+
* @public
|
|
13
|
+
*/
|
|
14
|
+
interface UseTransformOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown> {
|
|
15
|
+
/** The current field value from react-hook-form */
|
|
4
16
|
value: UseControllerReturn<TFieldValues, TName>["field"]["value"];
|
|
17
|
+
/** The onChange handler from react-hook-form */
|
|
5
18
|
onChange: UseControllerReturn<TFieldValues, TName>["field"]["onChange"];
|
|
19
|
+
/** Optional transformation functions */
|
|
6
20
|
transform?: {
|
|
21
|
+
/**
|
|
22
|
+
* Transform the field value for display in the input
|
|
23
|
+
* @param value - The current field value
|
|
24
|
+
* @returns The transformed value to display
|
|
25
|
+
*/
|
|
7
26
|
input?: (value: PathValue<TFieldValues, TName>) => TValue;
|
|
27
|
+
/**
|
|
28
|
+
* Transform the input event back to the field value
|
|
29
|
+
* @param event - The input event parameters
|
|
30
|
+
* @returns The transformed value to store in the form
|
|
31
|
+
*/
|
|
8
32
|
output?: (...event: any[]) => PathValue<TFieldValues, TName>;
|
|
9
33
|
};
|
|
10
|
-
}
|
|
11
|
-
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Return type for the useTransform hook.
|
|
37
|
+
*
|
|
38
|
+
* @template TFieldValues - The form values type
|
|
39
|
+
* @template TName - The field name type
|
|
40
|
+
* @template TValue - The transformed value type
|
|
41
|
+
*
|
|
42
|
+
* @public
|
|
43
|
+
*/
|
|
44
|
+
interface UseTransformReturn<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown> {
|
|
45
|
+
/** The transformed value to display in the input */
|
|
12
46
|
value: TValue;
|
|
47
|
+
/** The enhanced onChange handler with transformation applied */
|
|
13
48
|
onChange: UseControllerReturn<TFieldValues, TName>["field"]["onChange"];
|
|
14
|
-
}
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* A hook for transforming form field values between display and storage formats.
|
|
52
|
+
*
|
|
53
|
+
* This hook provides a way to transform values as they flow between the form field
|
|
54
|
+
* and the display component. It's particularly useful for formatting data for display
|
|
55
|
+
* (like dates, numbers, or complex objects) while maintaining a different internal
|
|
56
|
+
* representation in the form state.
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
* Transform a date for display:
|
|
60
|
+
* ```tsx
|
|
61
|
+
* const { value, onChange } = useTransform({
|
|
62
|
+
* value: field.value,
|
|
63
|
+
* onChange: field.onChange,
|
|
64
|
+
* transform: {
|
|
65
|
+
* input: (date) => date ? format(date, 'yyyy-MM-dd') : '',
|
|
66
|
+
* output: (event) => new Date(event.target.value)
|
|
67
|
+
* }
|
|
68
|
+
* });
|
|
69
|
+
* ```
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
72
|
+
* Transform numbers with formatting:
|
|
73
|
+
* ```tsx
|
|
74
|
+
* const { value, onChange } = useTransform({
|
|
75
|
+
* value: field.value,
|
|
76
|
+
* onChange: field.onChange,
|
|
77
|
+
* transform: {
|
|
78
|
+
* input: (num) => num ? num.toLocaleString() : '',
|
|
79
|
+
* output: (event) => parseFloat(event.target.value.replace(/,/g, ''))
|
|
80
|
+
* }
|
|
81
|
+
* });
|
|
82
|
+
* ```
|
|
83
|
+
*
|
|
84
|
+
* @template TFieldValues - The form values type
|
|
85
|
+
* @template TName - The field name type
|
|
86
|
+
* @template TValue - The transformed value type
|
|
87
|
+
*
|
|
88
|
+
* @param options - Configuration options including value, onChange, and transform functions
|
|
89
|
+
* @returns Object with transformed value and enhanced onChange handler
|
|
90
|
+
*
|
|
91
|
+
* @public
|
|
92
|
+
*/
|
|
15
93
|
declare function useTransform<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown>(options: UseTransformOptions<TFieldValues, TName, TValue>): UseTransformReturn<TFieldValues, TName, TValue>;
|
|
16
94
|
|
|
17
95
|
export { type UseTransformOptions, type UseTransformReturn, useTransform };
|
package/dist/hooks/index.js
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import "../chunk-OJF67RNM.js";
|
|
2
|
+
import {
|
|
3
|
+
transformFactories,
|
|
4
|
+
useEnhancedTransform,
|
|
5
|
+
useTransform
|
|
6
|
+
} from "../chunk-DE62KYFK.js";
|
|
7
|
+
export {
|
|
8
|
+
transformFactories,
|
|
9
|
+
useEnhancedTransform,
|
|
10
|
+
useTransform
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFtdLAogICJzb3VyY2VzQ29udGVudCI6IFtdLAogICJtYXBwaW5ncyI6ICIiLAogICJuYW1lcyI6IFtdCn0K
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
var _chunkEBRUE2WRcjs = require('./chunk-EBRUE2WR.cjs');
|
|
13
|
+
require('./chunk-MVPLBJRK.cjs');
|
|
14
|
+
require('./chunk-FD57PCAC.cjs');
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
var _chunkZC7FGYL2cjs = require('./chunk-ZC7FGYL2.cjs');
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
var _chunkOT7COE7Rcjs = require('./chunk-OT7COE7R.cjs');
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
var _chunkR2YK4LTTcjs = require('./chunk-R2YK4LTT.cjs');
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
exports.AsyncMultiSelect2 = _chunkOT7COE7Rcjs.AsyncMultiSelect2; exports.AuthorizedView = _chunkEBRUE2WRcjs.AuthorizedView_default; exports.CancelButton = _chunkEBRUE2WRcjs.CancelButton_default; exports.CheckboxElement = _chunkOT7COE7Rcjs.CheckboxElement; exports.CheckboxGroup = _chunkOT7COE7Rcjs.CheckboxGroup; exports.ClearButton = _chunkEBRUE2WRcjs.ClearButton_default; exports.DatePickerElement = _chunkOT7COE7Rcjs.DatePickerElement; exports.DatePickerElementCore = _chunkOT7COE7Rcjs.DatePickerElementCore; exports.EnhancedTextFieldElement = _chunkOT7COE7Rcjs.EnhancedTextFieldElement; exports.FilterButton = _chunkEBRUE2WRcjs.FilterButton_default; exports.FilterWrapper = _chunkEBRUE2WRcjs.FilterWrapper_default; exports.FormWrapper = _chunkEBRUE2WRcjs.FormWrapper_default; exports.LabelText = _chunkEBRUE2WRcjs.LabelText_default; exports.ListWrapper = _chunkEBRUE2WRcjs.ListWrapper_default; exports.PasswordElement = _chunkOT7COE7Rcjs.PasswordElement_default; exports.RadioButtonGroup = _chunkOT7COE7Rcjs.RadioButtonGroup_default; exports.SelectCascadeElement = _chunkOT7COE7Rcjs.SelectCascadeElement_default; exports.SelectElement = _chunkOT7COE7Rcjs.SelectElement_default; exports.SelectMultiElement = _chunkOT7COE7Rcjs.SelectMultiElement_default; exports.SimpleButton = _chunkEBRUE2WRcjs.SimpleButton_default; exports.SimpleToolbar = _chunkEBRUE2WRcjs.SimpleToolbar_default; exports.TextFieldElement = _chunkOT7COE7Rcjs.TextFieldElement_default; exports.TimePickerElement = _chunkOT7COE7Rcjs.TimePickerElement_default; exports.api = _chunkZC7FGYL2cjs.api; exports.api2 = _chunkZC7FGYL2cjs.api2; exports.createDateInputTransform = _chunkOT7COE7Rcjs.createDateInputTransform; exports.createDateOutputTransform = _chunkOT7COE7Rcjs.createDateOutputTransform; exports.createDefaultDatePickerConfig = _chunkOT7COE7Rcjs.createDefaultDatePickerConfig; exports.createStableKey = _chunkOT7COE7Rcjs.createStableKey; exports.extractErrorMessage = _chunkOT7COE7Rcjs.extractErrorMessage; exports.flattenObjectKeys = _chunkZC7FGYL2cjs.flattenObjectKeys; exports.getTimezone = _chunkZC7FGYL2cjs.getTimezone; exports.handleServerErrors = _chunkZC7FGYL2cjs.handleServerErrors; exports.isParsableDateString = _chunkOT7COE7Rcjs.isParsableDateString; exports.isValidDate = _chunkOT7COE7Rcjs.isValidDate; exports.propertyExists = _chunkZC7FGYL2cjs.propertyExists; exports.readDatePickerValueAsDate = _chunkOT7COE7Rcjs.readDatePickerValueAsDate; exports.readValueAsDate = _chunkZC7FGYL2cjs.readValueAsDate; exports.removeLeadingTrailingSlashes = _chunkZC7FGYL2cjs.removeLeadingTrailingSlashes; exports.schemaTools = _chunkZC7FGYL2cjs.schemaTools; exports.transformFactories = _chunkR2YK4LTTcjs.transformFactories; exports.typedWatch = _chunkZC7FGYL2cjs.typedWatch; exports.useDatePickerStyles = _chunkOT7COE7Rcjs.useDatePickerStyles; exports.useDatePickerValidation = _chunkOT7COE7Rcjs.useDatePickerValidation; exports.useDatePickerValue = _chunkOT7COE7Rcjs.useDatePickerValue; exports.useEnhancedTransform = _chunkR2YK4LTTcjs.useEnhancedTransform; exports.useTransform = _chunkR2YK4LTTcjs.useTransform; exports.useWatchBatch = _chunkZC7FGYL2cjs.useWatchBatch; exports.useWatchBoolean = _chunkZC7FGYL2cjs.useWatchBoolean; exports.useWatchConditional = _chunkZC7FGYL2cjs.useWatchConditional; exports.useWatchDebounced = _chunkZC7FGYL2cjs.useWatchDebounced; exports.useWatchDefault = _chunkZC7FGYL2cjs.useWatchDefault; exports.useWatchField = _chunkZC7FGYL2cjs.useWatchField; exports.useWatchFields = _chunkZC7FGYL2cjs.useWatchFields; exports.useWatchForm = _chunkZC7FGYL2cjs.useWatchForm; exports.useWatchSelector = _chunkZC7FGYL2cjs.useWatchSelector; exports.useWatchTransform = _chunkZC7FGYL2cjs.useWatchTransform;
|
|
127
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImQ6XFxQcm9qZWN0c1xcZ253ZWItbW9ub3JlcG9cXHBhY2thZ2VzXFx1aVxcZGlzdFxcaW5kZXguY2pzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0U7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDRix3REFBNkI7QUFDN0IsZ0NBQTZCO0FBQzdCLGdDQUE2QjtBQUM3QjtBQUNFO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDRix3REFBNkI7QUFDN0I7QUFDRTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDRix3REFBNkI7QUFDN0I7QUFDRTtBQUNBO0FBQ0E7QUFDRix3REFBNkI7QUFDN0I7QUFDRTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDRixzbkhBQUMiLCJmaWxlIjoiRDpcXFByb2plY3RzXFxnbndlYi1tb25vcmVwb1xccGFja2FnZXNcXHVpXFxkaXN0XFxpbmRleC5janMifQ==
|