@prototyp/skeletor 1.0.4 → 1.0.5
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/components/InputFocusScrollView/InputFocusScrollView.js +5 -13
- package/lib/module/components/InputFocusScrollView/InputFocusScrollView.js.map +1 -1
- package/lib/module/models/Border.js +1 -1
- package/lib/module/models/Size.js +1 -1
- package/lib/module/models/Spacing.js +1 -1
- package/lib/typescript/lib/module/components/Block/Block.d.ts +1 -1
- package/lib/typescript/lib/module/components/InputFocusScrollView/InputFocusScrollView.d.ts +1 -1
- package/lib/typescript/lib/module/components/InputFocusScrollView/InputFocusScrollView.d.ts.map +1 -1
- package/lib/typescript/lib/module/components/Text/Text.d.ts +1 -1
- package/lib/typescript/lib/module/hooks/useAnimation.d.ts +1 -1
- package/lib/typescript/lib/module/models/Border.d.ts +1 -0
- package/lib/typescript/lib/module/models/Size.d.ts +1 -0
- package/lib/typescript/lib/module/models/Spacing.d.ts +1 -0
- package/lib/typescript/lib/module/models/index.d.ts +3 -0
- package/lib/typescript/src/components/InputFocusScrollView/InputFocusScrollView.d.ts.map +1 -1
- package/lib/typescript/src/models/Border.d.ts +6 -5
- package/lib/typescript/src/models/Border.d.ts.map +1 -1
- package/lib/typescript/src/models/Size.d.ts +7 -6
- package/lib/typescript/src/models/Size.d.ts.map +1 -1
- package/lib/typescript/src/models/Spacing.d.ts +15 -14
- package/lib/typescript/src/models/Spacing.d.ts.map +1 -1
- package/package.json +10 -7
- package/src/components/InputFocusScrollView/InputFocusScrollView.tsx +10 -15
- package/src/models/Border.ts +7 -5
- package/src/models/Size.ts +8 -6
- package/src/models/Spacing.ts +16 -14
|
@@ -21,13 +21,11 @@ export const InputFocusScrollView = _ref => {
|
|
|
21
21
|
} = _ref;
|
|
22
22
|
const screenHeight = useRef(Dimensions.get("screen").height).current;
|
|
23
23
|
const ref = useRef(null);
|
|
24
|
-
const [scrollTarget, setScrollTarget] = useState();
|
|
25
24
|
/** Cached scroll position to keep focus on input if layout shifts. */
|
|
26
|
-
const [scrollPosition, setScrollPosition] = useState();
|
|
25
|
+
const [scrollPosition, setScrollPosition] = useState(null);
|
|
26
|
+
const [scrollTarget, setScrollTarget] = useState(null);
|
|
27
27
|
function onInputFocus(e) {
|
|
28
|
-
if (Platform.OS !== "ios" || !scrollTarget)
|
|
29
|
-
return;
|
|
30
|
-
}
|
|
28
|
+
if (Platform.OS !== "ios" || !scrollTarget) return;
|
|
31
29
|
e.currentTarget.measureLayout(scrollTarget, (nope, top, nuuh, elementHeight) => {
|
|
32
30
|
var _ref$current;
|
|
33
31
|
let scrollY = top - elementHeight;
|
|
@@ -43,12 +41,6 @@ export const InputFocusScrollView = _ref => {
|
|
|
43
41
|
});
|
|
44
42
|
}, () => console.error("failed to measure layout"));
|
|
45
43
|
}
|
|
46
|
-
function onScrollViewLayout(e) {
|
|
47
|
-
if (Platform.OS !== "ios") {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
setScrollTarget(e.nativeEvent.target);
|
|
51
|
-
}
|
|
52
44
|
|
|
53
45
|
/** Handle layout shifts by programmatically scrolling to the same input position without animation. */
|
|
54
46
|
function onContentSizeChange() {
|
|
@@ -60,7 +52,7 @@ export const InputFocusScrollView = _ref => {
|
|
|
60
52
|
y: scrollPosition,
|
|
61
53
|
animated: false
|
|
62
54
|
});
|
|
63
|
-
setScrollPosition(
|
|
55
|
+
setScrollPosition(null);
|
|
64
56
|
}
|
|
65
57
|
const containerStyles = StyleSheet.flatten([styles[height], margins, style]);
|
|
66
58
|
const contentStyles = StyleSheet.flatten([styles.content, {
|
|
@@ -70,7 +62,7 @@ export const InputFocusScrollView = _ref => {
|
|
|
70
62
|
ref: ref,
|
|
71
63
|
scrollToOverflowEnabled: true,
|
|
72
64
|
scrollEventThrottle: 16,
|
|
73
|
-
onLayout:
|
|
65
|
+
onLayout: e => setScrollTarget(e.currentTarget),
|
|
74
66
|
onContentSizeChange: onContentSizeChange,
|
|
75
67
|
showsVerticalScrollIndicator: false,
|
|
76
68
|
showsHorizontalScrollIndicator: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useRef","useState","Platform","ScrollView","StyleSheet","Dimensions","InputFocusScrollView","children","style","contentContainerStyle","height","focusPositionOffset","margins","paddings","rest","screenHeight","get","current","ref","
|
|
1
|
+
{"version":3,"names":["React","useRef","useState","Platform","ScrollView","StyleSheet","Dimensions","InputFocusScrollView","children","style","contentContainerStyle","height","focusPositionOffset","margins","paddings","rest","screenHeight","get","current","ref","scrollPosition","setScrollPosition","scrollTarget","setScrollTarget","onInputFocus","e","OS","currentTarget","measureLayout","nope","top","nuuh","elementHeight","scrollY","undefined","scrollTo","y","console","error","onContentSizeChange","animated","containerStyles","flatten","styles","contentStyles","content","create","full","auto","flexGrow","paddingBottom"],"sourceRoot":"../../src","sources":["InputFocusScrollView.tsx"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=Border.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=Size.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
export {};
|
|
2
2
|
//# sourceMappingURL=Spacing.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export function Block(_ref2: any): React.FunctionComponentElement<any> | React.CElement<import("react-native").ScrollViewProps, ScrollView>;
|
|
2
2
|
import React from "react";
|
|
3
|
-
import { ScrollView } from "react-native";
|
|
3
|
+
import { ScrollView } from "react-native/Libraries/Components/ScrollView/ScrollView";
|
|
4
4
|
//# sourceMappingURL=Block.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export function InputFocusScrollView(_ref: any): React.CElement<import("react-native").ScrollViewProps, ScrollView>;
|
|
2
|
-
import { ScrollView } from "react-native";
|
|
2
|
+
import { ScrollView } from "react-native/Libraries/Components/ScrollView/ScrollView";
|
|
3
3
|
import React from "react";
|
|
4
4
|
//# sourceMappingURL=InputFocusScrollView.d.ts.map
|
package/lib/typescript/lib/module/components/InputFocusScrollView/InputFocusScrollView.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputFocusScrollView.d.ts","sourceRoot":"","sources":["../../../../../module/components/InputFocusScrollView/InputFocusScrollView.js"],"names":[],"mappings":"AAUO,
|
|
1
|
+
{"version":3,"file":"InputFocusScrollView.d.ts","sourceRoot":"","sources":["../../../../../module/components/InputFocusScrollView/InputFocusScrollView.js"],"names":[],"mappings":"AAUO,oHA6DN"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export function Text(_ref: any): React.CElement<import("react-native").TextProps, RNText>;
|
|
2
|
-
import { Text as RNText } from "react-native";
|
|
2
|
+
import { Text as RNText } from "react-native/Libraries/Text/Text";
|
|
3
3
|
import React from "react";
|
|
4
4
|
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputFocusScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/components/InputFocusScrollView/InputFocusScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAGL,oBAAoB,EAEpB,eAAe,EAEf,uBAAuB,
|
|
1
|
+
{"version":3,"file":"InputFocusScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/components/InputFocusScrollView/InputFocusScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAGL,oBAAoB,EAEpB,eAAe,EAEf,uBAAuB,EAKxB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,WAAW,yBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,OAAO;IACT,4LAA4L;IAC5L,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,EAAE,CACR,YAAY,EAAE,CAAC,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,KAAK,IAAI,KACrE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqEpE,CAAC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AnimatableNumericValue } from "react-native/types";
|
|
1
2
|
export interface Border {
|
|
2
3
|
border?: {
|
|
3
4
|
borderWidth?: number;
|
|
@@ -6,11 +7,11 @@ export interface Border {
|
|
|
6
7
|
borderLeftWidth?: number;
|
|
7
8
|
borderRightWidth?: number;
|
|
8
9
|
borderColor?: string;
|
|
9
|
-
borderRadius?:
|
|
10
|
-
borderTopLeftRadius?:
|
|
11
|
-
borderTopRightRadius?:
|
|
12
|
-
borderBottomLeftRadius?:
|
|
13
|
-
borderBottomRightRadius?:
|
|
10
|
+
borderRadius?: AnimatableNumericValue;
|
|
11
|
+
borderTopLeftRadius?: AnimatableNumericValue;
|
|
12
|
+
borderTopRightRadius?: AnimatableNumericValue;
|
|
13
|
+
borderBottomLeftRadius?: AnimatableNumericValue;
|
|
14
|
+
borderBottomRightRadius?: AnimatableNumericValue;
|
|
14
15
|
};
|
|
15
16
|
}
|
|
16
17
|
//# sourceMappingURL=Border.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Border.d.ts","sourceRoot":"","sources":["../../../../src/models/Border.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACrB,MAAM,CAAC,EAAE;QACP,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"Border.d.ts","sourceRoot":"","sources":["../../../../src/models/Border.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,MAAM,WAAW,MAAM;IACrB,MAAM,CAAC,EAAE;QACP,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,CAAC,EAAE,sBAAsB,CAAC;QACtC,mBAAmB,CAAC,EAAE,sBAAsB,CAAC;QAC7C,oBAAoB,CAAC,EAAE,sBAAsB,CAAC;QAC9C,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;QAChD,uBAAuB,CAAC,EAAE,sBAAsB,CAAC;KAClD,CAAC;CACH"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
+
import { DimensionValue } from "react-native/types";
|
|
1
2
|
export interface Size {
|
|
2
|
-
width?:
|
|
3
|
-
height?:
|
|
4
|
-
minHeight?:
|
|
5
|
-
minWidth?:
|
|
6
|
-
maxHeight?:
|
|
7
|
-
maxWidth?:
|
|
3
|
+
width?: DimensionValue;
|
|
4
|
+
height?: DimensionValue;
|
|
5
|
+
minHeight?: DimensionValue;
|
|
6
|
+
minWidth?: DimensionValue;
|
|
7
|
+
maxHeight?: DimensionValue;
|
|
8
|
+
maxWidth?: DimensionValue;
|
|
8
9
|
flex?: number;
|
|
9
10
|
}
|
|
10
11
|
//# sourceMappingURL=Size.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Size.d.ts","sourceRoot":"","sources":["../../../../src/models/Size.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACnB,KAAK,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"Size.d.ts","sourceRoot":"","sources":["../../../../src/models/Size.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,WAAW,IAAI;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}
|
|
@@ -1,21 +1,22 @@
|
|
|
1
|
+
import { DimensionValue } from "react-native/types";
|
|
1
2
|
export interface Spacing {
|
|
2
3
|
margins?: {
|
|
3
|
-
marginTop?:
|
|
4
|
-
marginBottom?:
|
|
5
|
-
marginLeft?:
|
|
6
|
-
marginRight?:
|
|
7
|
-
marginHorizontal?:
|
|
8
|
-
marginVertical?:
|
|
9
|
-
margin?:
|
|
4
|
+
marginTop?: DimensionValue;
|
|
5
|
+
marginBottom?: DimensionValue;
|
|
6
|
+
marginLeft?: DimensionValue;
|
|
7
|
+
marginRight?: DimensionValue;
|
|
8
|
+
marginHorizontal?: DimensionValue;
|
|
9
|
+
marginVertical?: DimensionValue;
|
|
10
|
+
margin?: DimensionValue;
|
|
10
11
|
};
|
|
11
12
|
paddings?: {
|
|
12
|
-
paddingTop?:
|
|
13
|
-
paddingBottom?:
|
|
14
|
-
paddingLeft?:
|
|
15
|
-
paddingRight?:
|
|
16
|
-
paddingHorizontal?:
|
|
17
|
-
paddingVertical?:
|
|
18
|
-
padding?:
|
|
13
|
+
paddingTop?: DimensionValue;
|
|
14
|
+
paddingBottom?: DimensionValue;
|
|
15
|
+
paddingLeft?: DimensionValue;
|
|
16
|
+
paddingRight?: DimensionValue;
|
|
17
|
+
paddingHorizontal?: DimensionValue;
|
|
18
|
+
paddingVertical?: DimensionValue;
|
|
19
|
+
padding?: DimensionValue;
|
|
19
20
|
};
|
|
20
21
|
}
|
|
21
22
|
//# sourceMappingURL=Spacing.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/models/Spacing.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"Spacing.d.ts","sourceRoot":"","sources":["../../../../src/models/Spacing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,WAAW,OAAO;IACtB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,cAAc,CAAC;QAC3B,YAAY,CAAC,EAAE,cAAc,CAAC;QAC9B,UAAU,CAAC,EAAE,cAAc,CAAC;QAC5B,WAAW,CAAC,EAAE,cAAc,CAAC;QAC7B,gBAAgB,CAAC,EAAE,cAAc,CAAC;QAClC,cAAc,CAAC,EAAE,cAAc,CAAC;QAChC,MAAM,CAAC,EAAE,cAAc,CAAC;KACzB,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,UAAU,CAAC,EAAE,cAAc,CAAC;QAC5B,aAAa,CAAC,EAAE,cAAc,CAAC;QAC/B,WAAW,CAAC,EAAE,cAAc,CAAC;QAC7B,YAAY,CAAC,EAAE,cAAc,CAAC;QAC9B,iBAAiB,CAAC,EAAE,cAAc,CAAC;QACnC,eAAe,CAAC,EAAE,cAAc,CAAC;QACjC,OAAO,CAAC,EAAE,cAAc,CAAC;KAC1B,CAAC;CACH"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@prototyp/skeletor",
|
|
3
3
|
"description": "React-Native UI and functional toolkit",
|
|
4
4
|
"author": "Luka Buljan <luka@prototyp.digital>",
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.5",
|
|
6
6
|
"types": "lib/typescript/src/index.d.ts",
|
|
7
7
|
"main": "lib/module/index.js",
|
|
8
8
|
"react-native": "src/index.ts",
|
|
@@ -16,18 +16,21 @@
|
|
|
16
16
|
"prepack": "bob build"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
|
-
"@tsconfig/react-native": "
|
|
19
|
+
"@tsconfig/react-native": "^3.0.0",
|
|
20
20
|
"@types/jest": "29.4.0",
|
|
21
|
-
"@types/react
|
|
21
|
+
"@types/react": "^18.0.24",
|
|
22
|
+
"@react-native-community/eslint-config": "3.2.0",
|
|
23
|
+
"@react-native/eslint-config": "^0.72.2",
|
|
24
|
+
"@react-native/metro-config": "^0.72.9",
|
|
22
25
|
"jest": "29.4.2",
|
|
23
|
-
"react": "18.
|
|
24
|
-
"react-native": "0.
|
|
26
|
+
"react": "^18.2.0",
|
|
27
|
+
"react-native": "^0.72.0",
|
|
25
28
|
"react-native-builder-bob": "0.20.3",
|
|
26
|
-
"typescript": "4.8.
|
|
29
|
+
"typescript": "4.8.4"
|
|
27
30
|
},
|
|
28
31
|
"peerDependencies": {
|
|
29
32
|
"react": ">=16",
|
|
30
|
-
"react-native": ">=0.
|
|
33
|
+
"react-native": ">=0.72.0"
|
|
31
34
|
},
|
|
32
35
|
"publishConfig": {
|
|
33
36
|
"access": "public"
|
|
@@ -8,6 +8,9 @@ import {
|
|
|
8
8
|
StyleSheet,
|
|
9
9
|
TextInputFocusEventData,
|
|
10
10
|
Dimensions,
|
|
11
|
+
UIManager,
|
|
12
|
+
findNodeHandle,
|
|
13
|
+
TextInput,
|
|
11
14
|
} from "react-native";
|
|
12
15
|
import { Spacing } from "../../models";
|
|
13
16
|
|
|
@@ -41,15 +44,14 @@ export const InputFocusScrollView: React.FC<InputFocusScrollViewProps> = ({
|
|
|
41
44
|
}) => {
|
|
42
45
|
const screenHeight = useRef(Dimensions.get("screen").height).current;
|
|
43
46
|
const ref = useRef<ScrollView>(null);
|
|
44
|
-
const [scrollTarget, setScrollTarget] = useState<number | null>();
|
|
45
47
|
/** Cached scroll position to keep focus on input if layout shifts. */
|
|
46
|
-
const [scrollPosition, setScrollPosition] = useState<number | null>();
|
|
48
|
+
const [scrollPosition, setScrollPosition] = useState<number | null>(null);
|
|
49
|
+
const [scrollTarget, setScrollTarget] = useState<number | null>(null);
|
|
47
50
|
|
|
48
51
|
function onInputFocus(e: NativeSyntheticEvent<TextInputFocusEventData>) {
|
|
49
|
-
if (Platform.OS !== "ios" || !scrollTarget)
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
e.currentTarget.measureLayout(
|
|
52
|
+
if (Platform.OS !== "ios" || !scrollTarget) return;
|
|
53
|
+
|
|
54
|
+
(e.currentTarget as unknown as TextInput).measureLayout(
|
|
53
55
|
scrollTarget,
|
|
54
56
|
(nope, top, nuuh, elementHeight) => {
|
|
55
57
|
let scrollY = top - elementHeight;
|
|
@@ -66,20 +68,13 @@ export const InputFocusScrollView: React.FC<InputFocusScrollViewProps> = ({
|
|
|
66
68
|
);
|
|
67
69
|
}
|
|
68
70
|
|
|
69
|
-
function onScrollViewLayout(e: LayoutChangeEvent) {
|
|
70
|
-
if (Platform.OS !== "ios") {
|
|
71
|
-
return;
|
|
72
|
-
}
|
|
73
|
-
setScrollTarget(e.nativeEvent.target);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
71
|
/** Handle layout shifts by programmatically scrolling to the same input position without animation. */
|
|
77
72
|
function onContentSizeChange() {
|
|
78
73
|
if (Platform.OS !== "ios" || !scrollPosition) {
|
|
79
74
|
return;
|
|
80
75
|
}
|
|
81
76
|
ref.current?.scrollTo({ y: scrollPosition, animated: false });
|
|
82
|
-
setScrollPosition(
|
|
77
|
+
setScrollPosition(null);
|
|
83
78
|
}
|
|
84
79
|
|
|
85
80
|
const containerStyles = StyleSheet.flatten([styles[height], margins, style]);
|
|
@@ -95,7 +90,7 @@ export const InputFocusScrollView: React.FC<InputFocusScrollViewProps> = ({
|
|
|
95
90
|
ref={ref}
|
|
96
91
|
scrollToOverflowEnabled
|
|
97
92
|
scrollEventThrottle={16}
|
|
98
|
-
onLayout={
|
|
93
|
+
onLayout={(e) => setScrollTarget(e.currentTarget)}
|
|
99
94
|
onContentSizeChange={onContentSizeChange}
|
|
100
95
|
showsVerticalScrollIndicator={false}
|
|
101
96
|
showsHorizontalScrollIndicator={false}
|
package/src/models/Border.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { AnimatableNumericValue } from "react-native/types";
|
|
2
|
+
|
|
1
3
|
export interface Border {
|
|
2
4
|
border?: {
|
|
3
5
|
borderWidth?: number;
|
|
@@ -6,10 +8,10 @@ export interface Border {
|
|
|
6
8
|
borderLeftWidth?: number;
|
|
7
9
|
borderRightWidth?: number;
|
|
8
10
|
borderColor?: string;
|
|
9
|
-
borderRadius?:
|
|
10
|
-
borderTopLeftRadius?:
|
|
11
|
-
borderTopRightRadius?:
|
|
12
|
-
borderBottomLeftRadius?:
|
|
13
|
-
borderBottomRightRadius?:
|
|
11
|
+
borderRadius?: AnimatableNumericValue;
|
|
12
|
+
borderTopLeftRadius?: AnimatableNumericValue;
|
|
13
|
+
borderTopRightRadius?: AnimatableNumericValue;
|
|
14
|
+
borderBottomLeftRadius?: AnimatableNumericValue;
|
|
15
|
+
borderBottomRightRadius?: AnimatableNumericValue;
|
|
14
16
|
};
|
|
15
17
|
}
|
package/src/models/Size.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
+
import { DimensionValue } from "react-native/types";
|
|
2
|
+
|
|
1
3
|
export interface Size {
|
|
2
|
-
width?:
|
|
3
|
-
height?:
|
|
4
|
-
minHeight?:
|
|
5
|
-
minWidth?:
|
|
6
|
-
maxHeight?:
|
|
7
|
-
maxWidth?:
|
|
4
|
+
width?: DimensionValue;
|
|
5
|
+
height?: DimensionValue;
|
|
6
|
+
minHeight?: DimensionValue;
|
|
7
|
+
minWidth?: DimensionValue;
|
|
8
|
+
maxHeight?: DimensionValue;
|
|
9
|
+
maxWidth?: DimensionValue;
|
|
8
10
|
flex?: number;
|
|
9
11
|
}
|
package/src/models/Spacing.ts
CHANGED
|
@@ -1,20 +1,22 @@
|
|
|
1
|
+
import { DimensionValue } from "react-native/types";
|
|
2
|
+
|
|
1
3
|
export interface Spacing {
|
|
2
4
|
margins?: {
|
|
3
|
-
marginTop?:
|
|
4
|
-
marginBottom?:
|
|
5
|
-
marginLeft?:
|
|
6
|
-
marginRight?:
|
|
7
|
-
marginHorizontal?:
|
|
8
|
-
marginVertical?:
|
|
9
|
-
margin?:
|
|
5
|
+
marginTop?: DimensionValue;
|
|
6
|
+
marginBottom?: DimensionValue;
|
|
7
|
+
marginLeft?: DimensionValue;
|
|
8
|
+
marginRight?: DimensionValue;
|
|
9
|
+
marginHorizontal?: DimensionValue;
|
|
10
|
+
marginVertical?: DimensionValue;
|
|
11
|
+
margin?: DimensionValue;
|
|
10
12
|
};
|
|
11
13
|
paddings?: {
|
|
12
|
-
paddingTop?:
|
|
13
|
-
paddingBottom?:
|
|
14
|
-
paddingLeft?:
|
|
15
|
-
paddingRight?:
|
|
16
|
-
paddingHorizontal?:
|
|
17
|
-
paddingVertical?:
|
|
18
|
-
padding?:
|
|
14
|
+
paddingTop?: DimensionValue;
|
|
15
|
+
paddingBottom?: DimensionValue;
|
|
16
|
+
paddingLeft?: DimensionValue;
|
|
17
|
+
paddingRight?: DimensionValue;
|
|
18
|
+
paddingHorizontal?: DimensionValue;
|
|
19
|
+
paddingVertical?: DimensionValue;
|
|
20
|
+
padding?: DimensionValue;
|
|
19
21
|
};
|
|
20
22
|
}
|