@draftbit/core 43.2.4-aa029f.0 → 43.2.5-0c3aa5.3
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/commonjs/components/Carousel.js +0 -3
- package/lib/commonjs/components/Carousel.js.map +1 -1
- package/lib/commonjs/components/DeprecatedCardWrapper.js +2 -14
- package/lib/commonjs/components/DeprecatedCardWrapper.js.map +1 -1
- package/lib/commonjs/components/DeprecatedFAB.js +20 -4
- package/lib/commonjs/components/DeprecatedFAB.js.map +1 -1
- package/lib/commonjs/components/Divider.js +13 -3
- package/lib/commonjs/components/Divider.js.map +1 -1
- package/lib/commonjs/components/NumberInput.js +25 -17
- package/lib/commonjs/components/NumberInput.js.map +1 -1
- package/lib/commonjs/components/Stepper.js +28 -19
- package/lib/commonjs/components/Stepper.js.map +1 -1
- package/lib/commonjs/components/ToggleButton.js +3 -3
- package/lib/commonjs/components/ToggleButton.js.map +1 -1
- package/lib/commonjs/index.js +0 -14
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/mappings/Carousel.js +3 -1
- package/lib/commonjs/mappings/Carousel.js.map +1 -1
- package/lib/commonjs/mappings/FAB.js +1 -1
- package/lib/commonjs/mappings/FAB.js.map +1 -1
- package/lib/commonjs/mappings/Stepper.js +9 -0
- package/lib/commonjs/mappings/Stepper.js.map +1 -1
- package/lib/module/components/Accordion/AccordionItem.js +5 -22
- package/lib/module/components/Carousel.js +0 -3
- package/lib/module/components/Carousel.js.map +1 -1
- package/lib/module/components/Header.js.map +1 -1
- package/lib/module/components/NumberInput.js +27 -19
- package/lib/module/components/NumberInput.js.map +1 -1
- package/lib/module/components/Stepper.js +27 -19
- package/lib/module/components/Stepper.js.map +1 -1
- package/lib/module/components/ToggleButton.js +3 -3
- package/lib/module/components/ToggleButton.js.map +1 -1
- package/lib/module/index.js +0 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/mappings/Carousel.js +3 -1
- package/lib/module/mappings/Carousel.js.map +1 -1
- package/lib/module/mappings/FAB.js +1 -1
- package/lib/module/mappings/FAB.js.map +1 -1
- package/lib/module/mappings/MapMarker.js.map +1 -1
- package/lib/module/mappings/Stepper.js +10 -1
- package/lib/module/mappings/Stepper.js.map +1 -1
- package/lib/typescript/src/components/NumberInput.d.ts +2 -1
- package/lib/typescript/src/components/Stepper.d.ts +2 -0
- package/lib/typescript/src/index.d.ts +0 -1
- package/lib/typescript/src/mappings/Carousel.d.ts +3 -1
- package/lib/typescript/src/mappings/FAB.d.ts +1 -1
- package/lib/typescript/src/mappings/Stepper.d.ts +22 -0
- package/package.json +3 -5
- package/src/components/Carousel.js +0 -3
- package/src/components/Carousel.tsx +0 -3
- package/src/components/NumberInput.js +19 -14
- package/src/components/NumberInput.tsx +28 -19
- package/src/components/Stepper.js +23 -21
- package/src/components/Stepper.tsx +27 -19
- package/src/components/ToggleButton.js +5 -3
- package/src/components/ToggleButton.tsx +5 -3
- package/src/index.js +0 -1
- package/src/index.tsx +0 -1
- package/src/mappings/Carousel.js +3 -1
- package/src/mappings/Carousel.ts +3 -1
- package/src/mappings/FAB.js +1 -1
- package/src/mappings/FAB.ts +1 -1
- package/src/mappings/Stepper.js +10 -1
- package/src/mappings/Stepper.ts +10 -0
- package/lib/commonjs/components/TabView/TabView.js +0 -103
- package/lib/commonjs/components/TabView/TabView.js.map +0 -1
- package/lib/commonjs/components/TabView/TabViewItem.js +0 -27
- package/lib/commonjs/components/TabView/TabViewItem.js.map +0 -1
- package/lib/commonjs/components/TabView/index.js +0 -24
- package/lib/commonjs/components/TabView/index.js.map +0 -1
- package/lib/commonjs/mappings/TabView.js +0 -80
- package/lib/commonjs/mappings/TabView.js.map +0 -1
- package/lib/module/components/TabView/TabView.js +0 -88
- package/lib/module/components/TabView/TabView.js.map +0 -1
- package/lib/module/components/TabView/TabViewItem.js +0 -19
- package/lib/module/components/TabView/TabViewItem.js.map +0 -1
- package/lib/module/components/TabView/index.js +0 -3
- package/lib/module/components/TabView/index.js.map +0 -1
- package/lib/module/mappings/TabView.js +0 -71
- package/lib/module/mappings/TabView.js.map +0 -1
- package/lib/typescript/src/components/TabView/TabView.d.ts +0 -19
- package/lib/typescript/src/components/TabView/TabViewItem.d.ts +0 -10
- package/lib/typescript/src/components/TabView/index.d.ts +0 -2
- package/lib/typescript/src/mappings/TabView.d.ts +0 -111
- package/src/components/TabView/TabView.js +0 -33
- package/src/components/TabView/TabView.tsx +0 -97
- package/src/components/TabView/TabViewItem.js +0 -5
- package/src/components/TabView/TabViewItem.tsx +0 -21
- package/src/components/TabView/index.js +0 -2
- package/src/components/TabView/index.ts +0 -2
- package/src/mappings/TabView.js +0 -73
- package/src/mappings/TabView.ts +0 -80
|
@@ -39,5 +39,27 @@ export declare const SEED_DATA: {
|
|
|
39
39
|
formType: string;
|
|
40
40
|
propType: string;
|
|
41
41
|
};
|
|
42
|
+
min: {
|
|
43
|
+
label: string;
|
|
44
|
+
description: string;
|
|
45
|
+
formType: string;
|
|
46
|
+
propType: string;
|
|
47
|
+
group: string;
|
|
48
|
+
defaultValue: null;
|
|
49
|
+
editable: boolean;
|
|
50
|
+
required: boolean;
|
|
51
|
+
step: number;
|
|
52
|
+
};
|
|
53
|
+
max: {
|
|
54
|
+
label: string;
|
|
55
|
+
description: string;
|
|
56
|
+
formType: string;
|
|
57
|
+
propType: string;
|
|
58
|
+
group: string;
|
|
59
|
+
defaultValue: null;
|
|
60
|
+
editable: boolean;
|
|
61
|
+
required: boolean;
|
|
62
|
+
step: number;
|
|
63
|
+
};
|
|
42
64
|
};
|
|
43
65
|
}[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "43.2.
|
|
3
|
+
"version": "43.2.5-0c3aa5.3+0c3aa508",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "^43.2.
|
|
44
|
+
"@draftbit/types": "^43.2.4",
|
|
45
45
|
"@material-ui/core": "^4.11.0",
|
|
46
46
|
"@material-ui/pickers": "^3.2.10",
|
|
47
47
|
"@react-native-community/slider": "4.1.7",
|
|
@@ -53,8 +53,6 @@
|
|
|
53
53
|
"lodash.omit": "^4.5.0",
|
|
54
54
|
"lodash.tonumber": "^4.0.3",
|
|
55
55
|
"react-native-modal-datetime-picker": "^13.0.0",
|
|
56
|
-
"react-native-pager-view": "^5.4.9",
|
|
57
|
-
"react-native-tab-view": "^3.1.1",
|
|
58
56
|
"react-native-typography": "^1.4.1",
|
|
59
57
|
"react-native-web-swiper": "^2.2.1"
|
|
60
58
|
},
|
|
@@ -81,5 +79,5 @@
|
|
|
81
79
|
]
|
|
82
80
|
]
|
|
83
81
|
},
|
|
84
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "0c3aa50807c45f385d40d0367a7b44ec4e6cd1ba"
|
|
85
83
|
}
|
|
@@ -1,23 +1,28 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { TextInput
|
|
3
|
-
const NumberInput = ({
|
|
4
|
-
const [
|
|
2
|
+
import { TextInput } from "react-native";
|
|
3
|
+
const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
|
|
4
|
+
const [isDecimal, setIsDecimal] = React.useState(value && !Number.isInteger(value));
|
|
5
5
|
React.useEffect(() => {
|
|
6
|
-
if (
|
|
7
|
-
|
|
6
|
+
if (value) {
|
|
7
|
+
setIsDecimal(value.toString().includes("."));
|
|
8
8
|
}
|
|
9
|
-
}, [
|
|
10
|
-
const handleChangeText = (
|
|
11
|
-
setInternalValue(value);
|
|
9
|
+
}, [value]);
|
|
10
|
+
const handleChangeText = (newValue) => {
|
|
12
11
|
if (onChangeText) {
|
|
13
|
-
|
|
12
|
+
const parsedNumber = parseFloat(newValue);
|
|
13
|
+
const number = isNaN(parsedNumber) ? 0 : parsedNumber;
|
|
14
|
+
setIsDecimal(newValue.includes("."));
|
|
15
|
+
onChangeText(number);
|
|
14
16
|
}
|
|
15
17
|
};
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
let strValue;
|
|
19
|
+
if (value != undefined) {
|
|
20
|
+
strValue = value.toString();
|
|
21
|
+
if (isDecimal && !strValue.includes(".")) {
|
|
22
|
+
strValue = `${strValue}.`;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
return (React.createElement(TextInput, { keyboardType: "numeric", ...props, value: strValue, defaultValue: defaultValue?.toString(), onChangeText: handleChangeText }));
|
|
21
26
|
};
|
|
22
27
|
export default NumberInput;
|
|
23
28
|
// comment to try to fix sourcemap issue
|
|
@@ -1,46 +1,55 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { TextInput
|
|
2
|
+
import { TextInput } from "react-native";
|
|
3
3
|
|
|
4
4
|
interface Props {
|
|
5
|
-
|
|
5
|
+
value?: number;
|
|
6
|
+
defaultValue?: number;
|
|
6
7
|
onChangeText: (value?: number) => void;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
const NumberInput: React.FC<Props> = ({
|
|
10
|
-
defaultValue,
|
|
11
11
|
onChangeText,
|
|
12
|
+
value,
|
|
13
|
+
defaultValue,
|
|
12
14
|
...props
|
|
13
15
|
}) => {
|
|
14
|
-
const [
|
|
15
|
-
|
|
16
|
+
const [isDecimal, setIsDecimal] = React.useState(
|
|
17
|
+
value && !Number.isInteger(value)
|
|
18
|
+
);
|
|
16
19
|
React.useEffect(() => {
|
|
17
|
-
if (
|
|
18
|
-
|
|
20
|
+
if (value) {
|
|
21
|
+
setIsDecimal(value.toString().includes("."));
|
|
19
22
|
}
|
|
20
|
-
}, [
|
|
23
|
+
}, [value]);
|
|
21
24
|
|
|
22
|
-
const handleChangeText = (
|
|
23
|
-
setInternalValue(value);
|
|
25
|
+
const handleChangeText = (newValue: string) => {
|
|
24
26
|
if (onChangeText) {
|
|
25
|
-
|
|
27
|
+
const parsedNumber = parseFloat(newValue);
|
|
28
|
+
const number = isNaN(parsedNumber) ? 0 : parsedNumber;
|
|
29
|
+
setIsDecimal(newValue.includes("."));
|
|
30
|
+
onChangeText(number);
|
|
26
31
|
}
|
|
27
32
|
};
|
|
28
33
|
|
|
34
|
+
let strValue;
|
|
35
|
+
if (value != undefined) {
|
|
36
|
+
strValue = value.toString();
|
|
37
|
+
if (isDecimal && !strValue.includes(".")) {
|
|
38
|
+
strValue = `${strValue}.`;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
29
42
|
return (
|
|
30
|
-
<
|
|
43
|
+
<TextInput
|
|
31
44
|
keyboardType="numeric"
|
|
32
|
-
onChangeText={handleChangeText}
|
|
33
45
|
{...props}
|
|
34
|
-
value={
|
|
46
|
+
value={strValue}
|
|
47
|
+
defaultValue={defaultValue?.toString()}
|
|
48
|
+
onChangeText={handleChangeText}
|
|
35
49
|
/>
|
|
36
50
|
);
|
|
37
51
|
};
|
|
38
52
|
|
|
39
|
-
const stringToInteger = (str: string | undefined): number => {
|
|
40
|
-
const number = parseFloat(str as string);
|
|
41
|
-
return isNaN(number) ? 0 : number;
|
|
42
|
-
};
|
|
43
|
-
|
|
44
53
|
export default NumberInput;
|
|
45
54
|
|
|
46
55
|
// comment to try to fix sourcemap issue
|
|
@@ -2,40 +2,42 @@ import * as React from "react";
|
|
|
2
2
|
import { View, Text } from "react-native";
|
|
3
3
|
import { withTheme } from "../theming";
|
|
4
4
|
import IconButton from "./IconButton";
|
|
5
|
-
|
|
5
|
+
import isNumber from "lodash.isnumber";
|
|
6
|
+
const Stepper = ({ Icon, value, min, max, style, onChange, defaultValue, theme: { colors, typography, roundness }, iconSize = 24, iconColor = colors.strong, borderRadius = roundness, typeStyle, }) => {
|
|
6
7
|
const [stateValue, setStateValue] = React.useState(value || defaultValue || 0);
|
|
7
8
|
React.useEffect(() => {
|
|
8
|
-
if (value
|
|
9
|
-
|
|
9
|
+
if (value || value === 0) {
|
|
10
|
+
onChange && onChange(stateValue);
|
|
10
11
|
}
|
|
11
|
-
}, [value]);
|
|
12
|
+
}, [onChange, stateValue, value]);
|
|
12
13
|
React.useEffect(() => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}, [defaultValue]);
|
|
17
|
-
const handleMinus = () => {
|
|
18
|
-
if (value || value === 0) {
|
|
19
|
-
onChange && onChange(value - 1);
|
|
14
|
+
let newValue = value || defaultValue || 0;
|
|
15
|
+
if (isNumber(max) && newValue > max) {
|
|
16
|
+
newValue = max;
|
|
20
17
|
}
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
if (isNumber(min) && newValue < min) {
|
|
19
|
+
newValue = min;
|
|
23
20
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
21
|
+
setStateValue(newValue);
|
|
22
|
+
}, [defaultValue, value, min, max]);
|
|
23
|
+
const handleMinus = React.useCallback(() => {
|
|
24
|
+
if (isNumber(min) && value === min) {
|
|
25
|
+
return;
|
|
28
26
|
}
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
setStateValue(stateValue - 1);
|
|
28
|
+
}, [min, stateValue, value]);
|
|
29
|
+
const handlePlus = React.useCallback(() => {
|
|
30
|
+
if (isNumber(max) && value === max) {
|
|
31
|
+
return;
|
|
31
32
|
}
|
|
32
|
-
|
|
33
|
+
setStateValue(stateValue + 1);
|
|
34
|
+
}, [max, stateValue, value]);
|
|
33
35
|
return (React.createElement(View, { style: [
|
|
34
36
|
{ flexDirection: "row" },
|
|
35
37
|
style,
|
|
36
38
|
borderRadius ? { borderRadius } : {},
|
|
37
39
|
] },
|
|
38
|
-
React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: handleMinus, size: iconSize, color: iconColor, disabled:
|
|
40
|
+
React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: handleMinus, size: iconSize, color: iconColor, disabled: stateValue === 0 }),
|
|
39
41
|
React.createElement(Text, { style: [
|
|
40
42
|
typography.body1,
|
|
41
43
|
{
|
|
@@ -5,9 +5,12 @@ import type { Theme } from "../styles/DefaultTheme";
|
|
|
5
5
|
import type { IconSlot } from "../interfaces/Icon";
|
|
6
6
|
|
|
7
7
|
import IconButton from "./IconButton";
|
|
8
|
+
import isNumber from "lodash.isnumber";
|
|
8
9
|
|
|
9
10
|
type Props = {
|
|
10
11
|
value?: number;
|
|
12
|
+
min?: number;
|
|
13
|
+
max?: number;
|
|
11
14
|
theme: Theme;
|
|
12
15
|
style?: StyleProp<ViewStyle>;
|
|
13
16
|
onChange?: (value: number) => void;
|
|
@@ -21,6 +24,8 @@ type Props = {
|
|
|
21
24
|
const Stepper: React.FC<Props> = ({
|
|
22
25
|
Icon,
|
|
23
26
|
value,
|
|
27
|
+
min,
|
|
28
|
+
max,
|
|
24
29
|
style,
|
|
25
30
|
onChange,
|
|
26
31
|
defaultValue,
|
|
@@ -35,32 +40,35 @@ const Stepper: React.FC<Props> = ({
|
|
|
35
40
|
);
|
|
36
41
|
|
|
37
42
|
React.useEffect(() => {
|
|
38
|
-
if (value
|
|
39
|
-
|
|
43
|
+
if (value || value === 0) {
|
|
44
|
+
onChange && onChange(stateValue);
|
|
40
45
|
}
|
|
41
|
-
}, [value]);
|
|
46
|
+
}, [onChange, stateValue, value]);
|
|
42
47
|
|
|
43
48
|
React.useEffect(() => {
|
|
44
|
-
|
|
45
|
-
|
|
49
|
+
let newValue = value || defaultValue || 0;
|
|
50
|
+
if (isNumber(max) && newValue > max) {
|
|
51
|
+
newValue = max;
|
|
52
|
+
}
|
|
53
|
+
if (isNumber(min) && newValue < min) {
|
|
54
|
+
newValue = min;
|
|
46
55
|
}
|
|
47
|
-
|
|
56
|
+
setStateValue(newValue);
|
|
57
|
+
}, [defaultValue, value, min, max]);
|
|
48
58
|
|
|
49
|
-
const handleMinus = () => {
|
|
50
|
-
if (
|
|
51
|
-
|
|
52
|
-
} else {
|
|
53
|
-
setStateValue(stateValue - 1);
|
|
59
|
+
const handleMinus = React.useCallback(() => {
|
|
60
|
+
if (isNumber(min) && value === min) {
|
|
61
|
+
return;
|
|
54
62
|
}
|
|
55
|
-
|
|
63
|
+
setStateValue(stateValue - 1);
|
|
64
|
+
}, [min, stateValue, value]);
|
|
56
65
|
|
|
57
|
-
const handlePlus = () => {
|
|
58
|
-
if (
|
|
59
|
-
|
|
60
|
-
} else {
|
|
61
|
-
setStateValue(stateValue + 1);
|
|
66
|
+
const handlePlus = React.useCallback(() => {
|
|
67
|
+
if (isNumber(max) && value === max) {
|
|
68
|
+
return;
|
|
62
69
|
}
|
|
63
|
-
|
|
70
|
+
setStateValue(stateValue + 1);
|
|
71
|
+
}, [max, stateValue, value]);
|
|
64
72
|
|
|
65
73
|
return (
|
|
66
74
|
<View
|
|
@@ -76,7 +84,7 @@ const Stepper: React.FC<Props> = ({
|
|
|
76
84
|
onPress={handleMinus}
|
|
77
85
|
size={iconSize}
|
|
78
86
|
color={iconColor}
|
|
79
|
-
disabled={
|
|
87
|
+
disabled={stateValue === 0}
|
|
80
88
|
/>
|
|
81
89
|
<Text
|
|
82
90
|
style={[
|
|
@@ -15,15 +15,17 @@ const ToggleButton = ({ Icon, icon, toggled = false, onPress = () => { }, defaul
|
|
|
15
15
|
}
|
|
16
16
|
}, [defaultValue]);
|
|
17
17
|
const handlePress = () => {
|
|
18
|
-
setInternalValue(!
|
|
19
|
-
onPress(!
|
|
18
|
+
setInternalValue(!internalValue);
|
|
19
|
+
onPress(!internalValue);
|
|
20
20
|
};
|
|
21
21
|
return (React.createElement(IconButton, { Icon: Icon, icon: icon, size: iconSize, color: internalValue ? colors[color] : colors[colorSecondary], onPress: handlePress, disabled: disabled, style: [
|
|
22
22
|
styles.mainContainer,
|
|
23
23
|
{
|
|
24
24
|
width,
|
|
25
25
|
height,
|
|
26
|
-
backgroundColor:
|
|
26
|
+
backgroundColor: internalValue
|
|
27
|
+
? colors[colorSecondary]
|
|
28
|
+
: colors[color],
|
|
27
29
|
borderColor: colors[borderColor],
|
|
28
30
|
},
|
|
29
31
|
style,
|
|
@@ -56,8 +56,8 @@ const ToggleButton: React.FC<Props> = ({
|
|
|
56
56
|
}, [defaultValue]);
|
|
57
57
|
|
|
58
58
|
const handlePress = () => {
|
|
59
|
-
setInternalValue(!
|
|
60
|
-
onPress(!
|
|
59
|
+
setInternalValue(!internalValue);
|
|
60
|
+
onPress(!internalValue);
|
|
61
61
|
};
|
|
62
62
|
|
|
63
63
|
return (
|
|
@@ -73,7 +73,9 @@ const ToggleButton: React.FC<Props> = ({
|
|
|
73
73
|
{
|
|
74
74
|
width,
|
|
75
75
|
height,
|
|
76
|
-
backgroundColor:
|
|
76
|
+
backgroundColor: internalValue
|
|
77
|
+
? colors[colorSecondary]
|
|
78
|
+
: colors[color],
|
|
77
79
|
borderColor: colors[borderColor],
|
|
78
80
|
},
|
|
79
81
|
style,
|
package/src/index.js
CHANGED
|
@@ -27,7 +27,6 @@ export { default as Touchable } from "./components/Touchable";
|
|
|
27
27
|
export { AccordionGroup, AccordionItem } from "./components/Accordion";
|
|
28
28
|
export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
|
|
29
29
|
export { Swiper, SwiperItem } from "./components/Swiper";
|
|
30
|
-
export { TabView, TabViewItem } from "./components/TabView";
|
|
31
30
|
export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
|
|
32
31
|
export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
|
|
33
32
|
/* Deprecated: Fix or Delete! */
|
package/src/index.tsx
CHANGED
package/src/mappings/Carousel.js
CHANGED
|
@@ -5,7 +5,9 @@ export const SEED_DATA = [
|
|
|
5
5
|
tag: "Carousel",
|
|
6
6
|
category: COMPONENT_TYPES.media,
|
|
7
7
|
description: "A horizontal scrolling carousel of images",
|
|
8
|
-
layout: {
|
|
8
|
+
layout: {
|
|
9
|
+
height: 250,
|
|
10
|
+
},
|
|
9
11
|
props: {
|
|
10
12
|
resizeMode: createResizeModeProp(),
|
|
11
13
|
dotColor: createColorProp({
|
package/src/mappings/Carousel.ts
CHANGED
|
@@ -10,7 +10,9 @@ export const SEED_DATA = [
|
|
|
10
10
|
tag: "Carousel",
|
|
11
11
|
category: COMPONENT_TYPES.media,
|
|
12
12
|
description: "A horizontal scrolling carousel of images",
|
|
13
|
-
layout: {
|
|
13
|
+
layout: {
|
|
14
|
+
height: 250,
|
|
15
|
+
},
|
|
14
16
|
props: {
|
|
15
17
|
resizeMode: createResizeModeProp(),
|
|
16
18
|
dotColor: createColorProp({
|
package/src/mappings/FAB.js
CHANGED
package/src/mappings/FAB.ts
CHANGED
package/src/mappings/Stepper.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, Triggers, } from "@draftbit/types";
|
|
1
|
+
import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, } from "@draftbit/types";
|
|
2
2
|
export const SEED_DATA = [
|
|
3
3
|
{
|
|
4
4
|
name: "Stepper",
|
|
@@ -15,6 +15,15 @@ export const SEED_DATA = [
|
|
|
15
15
|
}),
|
|
16
16
|
iconSize: createIconSizeProp({ defaultValue: 24 }),
|
|
17
17
|
iconColor: createColorProp({ defaultValue: "strong" }),
|
|
18
|
+
min: createStaticNumberProp({
|
|
19
|
+
label: "Minimum",
|
|
20
|
+
description: "Minimum Number",
|
|
21
|
+
defaultValue: 0,
|
|
22
|
+
}),
|
|
23
|
+
max: createStaticNumberProp({
|
|
24
|
+
label: "Maximum",
|
|
25
|
+
description: "Maximum Number",
|
|
26
|
+
}),
|
|
18
27
|
},
|
|
19
28
|
},
|
|
20
29
|
];
|
package/src/mappings/Stepper.ts
CHANGED
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
createIconSizeProp,
|
|
4
4
|
createColorProp,
|
|
5
5
|
createFieldNameProp,
|
|
6
|
+
createStaticNumberProp,
|
|
6
7
|
Triggers,
|
|
7
8
|
} from "@draftbit/types";
|
|
8
9
|
|
|
@@ -22,6 +23,15 @@ export const SEED_DATA = [
|
|
|
22
23
|
}),
|
|
23
24
|
iconSize: createIconSizeProp({ defaultValue: 24 }),
|
|
24
25
|
iconColor: createColorProp({ defaultValue: "strong" }),
|
|
26
|
+
min: createStaticNumberProp({
|
|
27
|
+
label: "Minimum",
|
|
28
|
+
description: "Minimum Number",
|
|
29
|
+
defaultValue: 0,
|
|
30
|
+
}),
|
|
31
|
+
max: createStaticNumberProp({
|
|
32
|
+
label: "Maximum",
|
|
33
|
+
description: "Maximum Number",
|
|
34
|
+
}),
|
|
25
35
|
},
|
|
26
36
|
},
|
|
27
37
|
];
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var React = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
|
-
var _reactNativeTabView = require("react-native-tab-view");
|
|
11
|
-
|
|
12
|
-
var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
|
-
|
|
18
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
-
|
|
20
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
|
-
|
|
22
|
-
const TabViewComponent = _ref => {
|
|
23
|
-
let {
|
|
24
|
-
Icon,
|
|
25
|
-
tabBarPosition,
|
|
26
|
-
keyboardDismissMode,
|
|
27
|
-
swipeEnabled,
|
|
28
|
-
scrollEnabled,
|
|
29
|
-
activeColor,
|
|
30
|
-
inactiveColor,
|
|
31
|
-
pressColor,
|
|
32
|
-
indicatorColor,
|
|
33
|
-
style,
|
|
34
|
-
children
|
|
35
|
-
} = _ref;
|
|
36
|
-
const [index, setIndex] = React.useState(0);
|
|
37
|
-
const [routes, setRoutes] = React.useState([]);
|
|
38
|
-
const [tabScenes, setTabScenes] = React.useState({});
|
|
39
|
-
React.useEffect(() => {
|
|
40
|
-
const newRoutes = [];
|
|
41
|
-
const scenes = {};
|
|
42
|
-
React.Children.toArray(children).filter(child => child.type === _TabViewItem.default).forEach(child => {
|
|
43
|
-
var _child$props;
|
|
44
|
-
|
|
45
|
-
if (child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.id) {
|
|
46
|
-
var _child$props2, _child$props3;
|
|
47
|
-
|
|
48
|
-
newRoutes.push({
|
|
49
|
-
key: child === null || child === void 0 ? void 0 : (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.id,
|
|
50
|
-
...(child === null || child === void 0 ? void 0 : child.props)
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
scenes[child === null || child === void 0 ? void 0 : (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.id] = () => child;
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
setRoutes(newRoutes);
|
|
57
|
-
setTabScenes(scenes);
|
|
58
|
-
}, [children]);
|
|
59
|
-
|
|
60
|
-
const indexChangeHandler = i => setIndex(i);
|
|
61
|
-
|
|
62
|
-
const renderTabBar = props => {
|
|
63
|
-
console.log(props);
|
|
64
|
-
return /*#__PURE__*/React.createElement(_reactNativeTabView.TabBar, _extends({}, props, {
|
|
65
|
-
activeColor: activeColor,
|
|
66
|
-
inactiveColor: inactiveColor,
|
|
67
|
-
pressColor: pressColor,
|
|
68
|
-
scrollEnabled: scrollEnabled,
|
|
69
|
-
indicatorStyle: {
|
|
70
|
-
backgroundColor: indicatorColor
|
|
71
|
-
},
|
|
72
|
-
renderIcon: _ref2 => {
|
|
73
|
-
let {
|
|
74
|
-
route,
|
|
75
|
-
color
|
|
76
|
-
} = _ref2;
|
|
77
|
-
return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
78
|
-
name: route.icon,
|
|
79
|
-
color: color,
|
|
80
|
-
size: 36
|
|
81
|
-
}) : null;
|
|
82
|
-
},
|
|
83
|
-
style: style
|
|
84
|
-
}));
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
|
|
88
|
-
navigationState: {
|
|
89
|
-
index,
|
|
90
|
-
routes
|
|
91
|
-
},
|
|
92
|
-
renderScene: (0, _reactNativeTabView.SceneMap)(tabScenes),
|
|
93
|
-
renderTabBar: renderTabBar,
|
|
94
|
-
onIndexChange: indexChangeHandler,
|
|
95
|
-
tabBarPosition: tabBarPosition,
|
|
96
|
-
keyboardDismissMode: keyboardDismissMode,
|
|
97
|
-
swipeEnabled: swipeEnabled
|
|
98
|
-
});
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
var _default = TabViewComponent;
|
|
102
|
-
exports.default = _default;
|
|
103
|
-
//# sourceMappingURL=TabView.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["TabView.tsx"],"names":["TabViewComponent","Icon","tabBarPosition","keyboardDismissMode","swipeEnabled","scrollEnabled","activeColor","inactiveColor","pressColor","indicatorColor","style","children","index","setIndex","React","useState","routes","setRoutes","tabScenes","setTabScenes","useEffect","newRoutes","scenes","Children","toArray","filter","child","type","TabViewItem","forEach","props","id","push","key","indexChangeHandler","i","renderTabBar","console","log","backgroundColor","route","color","icon"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { StyleProp, TextStyle, ViewStyle } from \"react-native\";\nimport { TabView, TabBar, SceneMap } from \"react-native-tab-view\";\n\n// import { withTheme } from \"../../theming\";\nimport TabViewItem from \"./TabViewItem\";\nimport type { IconSlot } from \"../../interfaces/Icon\";\n\ntype TabBarPosition = \"top\" | \"bottom\";\ntype KeyboardDismissMode = \"none\" | \"auto\" | \"on-drag\";\n\ntype TabViewProps = {\n tabBarPosition?: TabBarPosition;\n keyboardDismissMode?: KeyboardDismissMode;\n swipeEnabled?: boolean;\n scrollEnabled?: boolean;\n activeColor?: string;\n inactiveColor?: string;\n pressColor?: string;\n indicatorColor?: string;\n style?: StyleProp<TextStyle | ViewStyle>;\n children: React.ReactNode;\n} & IconSlot;\n\nconst TabViewComponent = ({\n Icon,\n tabBarPosition,\n keyboardDismissMode,\n swipeEnabled,\n scrollEnabled,\n activeColor,\n inactiveColor,\n pressColor,\n indicatorColor,\n style,\n children,\n}: TabViewProps) => {\n const [index, setIndex] = React.useState(0);\n const [routes, setRoutes] = React.useState([]);\n const [tabScenes, setTabScenes] = React.useState({});\n\n React.useEffect(() => {\n const newRoutes: any = [];\n const scenes: any = {};\n\n React.Children.toArray(children)\n .filter((child: any) => child.type === TabViewItem)\n .forEach((child: any) => {\n if (child?.props?.id) {\n newRoutes.push({\n key: child?.props?.id,\n ...child?.props,\n });\n scenes[child?.props?.id] = () => child;\n }\n });\n\n setRoutes(newRoutes);\n setTabScenes(scenes);\n }, [children]);\n\n const indexChangeHandler = (i: any) => setIndex(i);\n\n const renderTabBar = (props: any) => {\n console.log(props);\n return (\n <TabBar\n {...props}\n activeColor={activeColor}\n inactiveColor={inactiveColor}\n pressColor={pressColor}\n scrollEnabled={scrollEnabled}\n indicatorStyle={{ backgroundColor: indicatorColor }}\n renderIcon={({ route, color }) =>\n route?.icon ? (\n <Icon name={route.icon} color={color} size={36} />\n ) : null\n }\n style={style}\n />\n );\n };\n\n return (\n <TabView\n navigationState={{ index, routes }}\n renderScene={SceneMap(tabScenes)}\n renderTabBar={renderTabBar}\n onIndexChange={indexChangeHandler}\n tabBarPosition={tabBarPosition}\n keyboardDismissMode={keyboardDismissMode}\n swipeEnabled={swipeEnabled}\n />\n );\n};\n\nexport default TabViewComponent;\n"]}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
const TabViewItem = _ref => {
|
|
9
|
-
let {
|
|
10
|
-
title,
|
|
11
|
-
id,
|
|
12
|
-
icon,
|
|
13
|
-
children,
|
|
14
|
-
accessibilityLabel
|
|
15
|
-
} = _ref;
|
|
16
|
-
console.log({
|
|
17
|
-
title,
|
|
18
|
-
id,
|
|
19
|
-
icon,
|
|
20
|
-
accessibilityLabel
|
|
21
|
-
});
|
|
22
|
-
return children;
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
var _default = TabViewItem;
|
|
26
|
-
exports.default = _default;
|
|
27
|
-
//# sourceMappingURL=TabViewItem.js.map
|