@prototyp/skeletor 1.0.8 → 1.0.9
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/lib/module/hooks/skeleform/package.json +1 -1
- package/lib/module/hooks/skeleform/src/index.js +35 -10
- package/lib/module/hooks/skeleform/src/index.js.map +1 -1
- package/lib/module/hooks/skeleform/yarn.lock +50 -2967
- package/lib/typescript/hooks/skeleform/src/index.d.ts +3 -5
- package/lib/typescript/hooks/skeleform/src/index.d.ts.map +1 -1
- package/lib/typescript/models/Border.d.ts +7 -14
- package/lib/typescript/models/Border.d.ts.map +1 -1
- package/lib/typescript/models/Spacing.d.ts +12 -19
- package/lib/typescript/models/Spacing.d.ts.map +1 -1
- package/package.json +5 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export declare type Validation<T> = {
|
|
2
2
|
[K in keyof Partial<T>]?: boolean;
|
|
3
3
|
};
|
|
4
|
-
declare type Rules<T> = {
|
|
4
|
+
export declare type Rules<T> = {
|
|
5
5
|
[K in keyof T]?: (value: T[K], state: T, optional: boolean) => boolean | undefined;
|
|
6
6
|
};
|
|
7
7
|
export declare type Values<T> = {
|
|
@@ -12,9 +12,6 @@ export declare type FormConfig<R> = {
|
|
|
12
12
|
optional?: Array<keyof R>;
|
|
13
13
|
/** Validation rules by specified property name. If you define a validation rule function here, the field will be validated against it. If no rule is set, a crude value check will be used instead (optional || Boolean(value)). Note: For complex value types (objects, arrays, dates etc) it is best to use a custom validation rule. */
|
|
14
14
|
rules?: Rules<R>;
|
|
15
|
-
/** Will compare key/value pairs instead of just top level JSON.stringify on complex objects/arrays */
|
|
16
|
-
deepCompare?: boolean;
|
|
17
|
-
logging?: boolean;
|
|
18
15
|
};
|
|
19
16
|
/** One-fits-all solution to manage state changes, field validation and optional entries within a form.
|
|
20
17
|
* @example <caption>Simple use case:</caption>
|
|
@@ -24,6 +21,7 @@ export declare type FormConfig<R> = {
|
|
|
24
21
|
* @example <caption>For more complex form states (ie one field can be of multiple types), you should pass the form's type:</caption>
|
|
25
22
|
* const { state, validation, update } = useForm<{ numericOrUndefined: number | undefined }>({ numericOrUndefined: undefined }, { rules: { numericOrUndefined: (value: number | undefined): boolean | undefined => ... }});
|
|
26
23
|
*
|
|
24
|
+
* Note: Avoid using class constructors for form state as it will continuously re-render the form. Every class construct is a new object, so the initial values parameter will always be different thus causing an infinite loop of re-renders. Use plain objects instead or memoize classes before passing them into the hook.
|
|
27
25
|
*/
|
|
28
26
|
export declare function useForm<T>(values: Values<T>, config?: FormConfig<T>): {
|
|
29
27
|
state: Values<T>;
|
|
@@ -32,6 +30,7 @@ export declare function useForm<T>(values: Values<T>, config?: FormConfig<T>): {
|
|
|
32
30
|
validate: <K_1 extends keyof T>(key: K_1) => void;
|
|
33
31
|
validateForm: () => boolean;
|
|
34
32
|
isFormValid: () => boolean;
|
|
33
|
+
hasStateChanged: () => boolean;
|
|
35
34
|
clearForm: () => void;
|
|
36
35
|
resetState: () => void;
|
|
37
36
|
resetValidation: () => void;
|
|
@@ -48,5 +47,4 @@ export declare function useFormUtils<T>(config?: FormConfig<T>): {
|
|
|
48
47
|
validation: Validation<T>;
|
|
49
48
|
};
|
|
50
49
|
};
|
|
51
|
-
export {};
|
|
52
50
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/skeleform/src/index.ts"],"names":[],"mappings":"AAEA,oBAAY,UAAU,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO;CAAE,CAAC;AAClE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/skeleform/src/index.ts"],"names":[],"mappings":"AAEA,oBAAY,UAAU,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO;CAAE,CAAC;AAClE,oBAAY,KAAK,CAAC,CAAC,IAAI;KACpB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CACf,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EACX,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,OAAO,KACd,OAAO,GAAG,SAAS;CACzB,CAAC;AAEF,oBAAY,MAAM,CAAC,CAAC,IAAI;KACrB,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrB,CAAC;AAEF,oBAAY,UAAU,CAAC,CAAC,IAAI;IAC1B,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAC1B,2UAA2U;IAC3U,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;CAClB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;;;8EA4B/C,OAAO;;;;;;;;;EAyF3B;AAED,0EAA0E;AAC1E,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC;4BAE3C,CAAC,CAAC,MAAM,CAAC,CAAC;oEA4B+B,OAAO,CAAC,CAAC;sBANnD,MAAM,CAAC;2BAiBe,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,OAAO,CAAC,CAAC;6BAY1C,OAAO,CAAC,CAAC;;;;EAuB1C"}
|
|
@@ -1,17 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ViewStyle } from "react-native/types";
|
|
2
|
+
declare type BorderKey = Extract<keyof ViewStyle, `border${string}`>;
|
|
3
|
+
declare type BorderStyles = {
|
|
4
|
+
[K in BorderKey]?: ViewStyle[K];
|
|
5
|
+
};
|
|
2
6
|
export interface Border {
|
|
3
|
-
border?:
|
|
4
|
-
borderWidth?: number;
|
|
5
|
-
borderTopWidth?: number;
|
|
6
|
-
borderBottomWidth?: number;
|
|
7
|
-
borderLeftWidth?: number;
|
|
8
|
-
borderRightWidth?: number;
|
|
9
|
-
borderColor?: string;
|
|
10
|
-
borderRadius?: AnimatableNumericValue;
|
|
11
|
-
borderTopLeftRadius?: AnimatableNumericValue;
|
|
12
|
-
borderTopRightRadius?: AnimatableNumericValue;
|
|
13
|
-
borderBottomLeftRadius?: AnimatableNumericValue;
|
|
14
|
-
borderBottomRightRadius?: AnimatableNumericValue;
|
|
15
|
-
};
|
|
7
|
+
border?: BorderStyles;
|
|
16
8
|
}
|
|
9
|
+
export {};
|
|
17
10
|
//# sourceMappingURL=Border.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Border.d.ts","sourceRoot":"","sources":["../../../src/models/Border.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Border.d.ts","sourceRoot":"","sources":["../../../src/models/Border.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,aAAK,SAAS,GAAG,OAAO,CAAC,MAAM,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC,CAAC;AAC7D,aAAK,YAAY,GAAG;KACjB,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,MAAM;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB"}
|
|
@@ -1,22 +1,15 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ViewStyle } from "react-native/types";
|
|
2
|
+
declare type MarginKey = Extract<keyof ViewStyle, `margin${string}`>;
|
|
3
|
+
declare type PaddingKey = Extract<keyof ViewStyle, `padding${string}`>;
|
|
4
|
+
declare type MarginStyles = {
|
|
5
|
+
[K in MarginKey]?: ViewStyle[K];
|
|
6
|
+
};
|
|
7
|
+
declare type PaddingStyles = {
|
|
8
|
+
[K in PaddingKey]?: ViewStyle[K];
|
|
9
|
+
};
|
|
2
10
|
export interface Spacing {
|
|
3
|
-
margins?:
|
|
4
|
-
|
|
5
|
-
marginBottom?: DimensionValue;
|
|
6
|
-
marginLeft?: DimensionValue;
|
|
7
|
-
marginRight?: DimensionValue;
|
|
8
|
-
marginHorizontal?: DimensionValue;
|
|
9
|
-
marginVertical?: DimensionValue;
|
|
10
|
-
margin?: DimensionValue;
|
|
11
|
-
};
|
|
12
|
-
paddings?: {
|
|
13
|
-
paddingTop?: DimensionValue;
|
|
14
|
-
paddingBottom?: DimensionValue;
|
|
15
|
-
paddingLeft?: DimensionValue;
|
|
16
|
-
paddingRight?: DimensionValue;
|
|
17
|
-
paddingHorizontal?: DimensionValue;
|
|
18
|
-
paddingVertical?: DimensionValue;
|
|
19
|
-
padding?: DimensionValue;
|
|
20
|
-
};
|
|
11
|
+
margins?: MarginStyles;
|
|
12
|
+
paddings?: PaddingStyles;
|
|
21
13
|
}
|
|
14
|
+
export {};
|
|
22
15
|
//# sourceMappingURL=Spacing.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../src/models/Spacing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../src/models/Spacing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,aAAK,SAAS,GAAG,OAAO,CAAC,MAAM,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC,CAAC;AAC7D,aAAK,UAAU,GAAG,OAAO,CAAC,MAAM,SAAS,EAAE,UAAU,MAAM,EAAE,CAAC,CAAC;AAE/D,aAAK,YAAY,GAAG;KACjB,CAAC,IAAI,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;CAChC,CAAC;AAEF,aAAK,aAAa,GAAG;KAClB,CAAC,IAAI,UAAU,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,11 @@
|
|
|
2
2
|
"name": "@prototyp/skeletor",
|
|
3
3
|
"description": "React-Native UI and functional toolkit",
|
|
4
4
|
"author": "Luka Buljan <luka@prototyp.digital>",
|
|
5
|
-
"
|
|
5
|
+
"contributors": [
|
|
6
|
+
"Luka Buljan <luka@prototyp.digital>",
|
|
7
|
+
"Vlatko Vlahek <vlatko@prototyp.digital>"
|
|
8
|
+
],
|
|
9
|
+
"version": "1.0.9",
|
|
6
10
|
"license": "MIT",
|
|
7
11
|
"types": "lib/typescript/index.d.ts",
|
|
8
12
|
"main": "lib/module/index.js",
|