@draftbit/core 43.2.3-bd5c77.0 → 43.2.4-3548b7.1
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/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 +32 -18
- package/lib/commonjs/components/NumberInput.js.map +1 -1
- package/lib/commonjs/components/TextField.js +11 -4
- package/lib/commonjs/components/TextField.js.map +1 -1
- package/lib/commonjs/index.js +0 -14
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/mappings/CardBlock.js.map +1 -1
- package/lib/commonjs/mappings/FAB.js.map +1 -1
- package/lib/commonjs/mappings/Layout.js.map +1 -1
- package/lib/commonjs/mappings/ProgressCircle.js.map +1 -1
- package/lib/commonjs/mappings/RadioButtonRow.js.map +1 -1
- package/lib/commonjs/mappings/Surface.js.map +1 -1
- package/lib/module/components/NumberInput.js +34 -20
- package/lib/module/components/NumberInput.js.map +1 -1
- package/lib/module/components/ProgressIndicator.js.map +1 -1
- package/lib/module/components/TextField.js +11 -4
- package/lib/module/components/TextField.js.map +1 -1
- package/lib/module/index.js +0 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/mappings/ActionSheetCancel.js.map +1 -1
- package/lib/typescript/src/components/NumberInput.d.ts +2 -1
- package/lib/typescript/src/index.d.ts +0 -1
- package/package.json +2 -4
- package/src/components/NumberInput.js +24 -15
- package/src/components/NumberInput.tsx +35 -20
- package/src/components/TextField.js +9 -2
- package/src/components/TextField.tsx +8 -2
- package/src/index.js +0 -1
- package/src/index.tsx +0 -1
- 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
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createTextProp, createTextEnumProp, createBoolProp, createColorProp } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = [{
|
|
3
|
-
name: "TabView",
|
|
4
|
-
tag: "TabView",
|
|
5
|
-
category: COMPONENT_TYPES.container,
|
|
6
|
-
layout: {},
|
|
7
|
-
props: {
|
|
8
|
-
tabBarPosition: createTextEnumProp({
|
|
9
|
-
label: "Tab Bar Position",
|
|
10
|
-
description: "Tab Bar Position",
|
|
11
|
-
options: ["top", "bottom"],
|
|
12
|
-
defaultValue: "top"
|
|
13
|
-
}),
|
|
14
|
-
keyboardDismissMode: createTextEnumProp({
|
|
15
|
-
label: "Keyboard Dismiss Mode",
|
|
16
|
-
description: "Keyboard Dismiss Mode",
|
|
17
|
-
options: ["auto", "on-drag", "none"],
|
|
18
|
-
defaultValue: "auto"
|
|
19
|
-
}),
|
|
20
|
-
swipeEnabled: createBoolProp({
|
|
21
|
-
label: "Swipe Enabled",
|
|
22
|
-
description: "Swipe Enabled",
|
|
23
|
-
defaultValue: true
|
|
24
|
-
}),
|
|
25
|
-
scrollEnabled: createBoolProp({
|
|
26
|
-
label: "Scroll Enabled",
|
|
27
|
-
description: "Scroll Enabled",
|
|
28
|
-
defaultValue: true
|
|
29
|
-
}),
|
|
30
|
-
activeColor: createColorProp({
|
|
31
|
-
label: "Active Color",
|
|
32
|
-
description: "Active Color",
|
|
33
|
-
defaultValue: "primary"
|
|
34
|
-
}),
|
|
35
|
-
inactiveColor: createColorProp({
|
|
36
|
-
label: "Inactive Color",
|
|
37
|
-
description: "Inactive Color",
|
|
38
|
-
defaultValue: null
|
|
39
|
-
}),
|
|
40
|
-
pressColor: createColorProp({
|
|
41
|
-
label: "Press Color",
|
|
42
|
-
description: "Press Color",
|
|
43
|
-
defaultValue: null
|
|
44
|
-
}),
|
|
45
|
-
indicatorColor: createColorProp({
|
|
46
|
-
label: "Indicator Color",
|
|
47
|
-
description: "Indicator Color",
|
|
48
|
-
defaultValue: null
|
|
49
|
-
})
|
|
50
|
-
}
|
|
51
|
-
}, {
|
|
52
|
-
name: "TabViewItem",
|
|
53
|
-
tag: "TabViewItem",
|
|
54
|
-
category: COMPONENT_TYPES.container,
|
|
55
|
-
layout: {},
|
|
56
|
-
props: {
|
|
57
|
-
title: createTextProp({
|
|
58
|
-
label: "Title",
|
|
59
|
-
description: "Tab Title"
|
|
60
|
-
}),
|
|
61
|
-
id: createTextProp({
|
|
62
|
-
label: "Id",
|
|
63
|
-
description: "Tab Id"
|
|
64
|
-
}),
|
|
65
|
-
accessibilityLabel: createTextProp({
|
|
66
|
-
label: "Accessibility Label",
|
|
67
|
-
description: "Accessibility Label"
|
|
68
|
-
})
|
|
69
|
-
}
|
|
70
|
-
}];
|
|
71
|
-
//# sourceMappingURL=TabView.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["TabView.ts"],"names":["COMPONENT_TYPES","createTextProp","createTextEnumProp","createBoolProp","createColorProp","SEED_DATA","name","tag","category","container","layout","props","tabBarPosition","label","description","options","defaultValue","keyboardDismissMode","swipeEnabled","scrollEnabled","activeColor","inactiveColor","pressColor","indicatorColor","title","id","accessibilityLabel"],"mappings":"AAAA,SACEA,eADF,EAEEC,cAFF,EAGEC,kBAHF,EAIEC,cAJF,EAKEC,eALF,QAMO,iBANP;AAQA,OAAO,MAAMC,SAAS,GAAG,CACvB;AACEC,EAAAA,IAAI,EAAE,SADR;AAEEC,EAAAA,GAAG,EAAE,SAFP;AAGEC,EAAAA,QAAQ,EAAER,eAAe,CAACS,SAH5B;AAIEC,EAAAA,MAAM,EAAE,EAJV;AAKEC,EAAAA,KAAK,EAAE;AACLC,IAAAA,cAAc,EAAEV,kBAAkB,CAAC;AACjCW,MAAAA,KAAK,EAAE,kBAD0B;AAEjCC,MAAAA,WAAW,EAAE,kBAFoB;AAGjCC,MAAAA,OAAO,EAAE,CAAC,KAAD,EAAQ,QAAR,CAHwB;AAIjCC,MAAAA,YAAY,EAAE;AAJmB,KAAD,CAD7B;AAOLC,IAAAA,mBAAmB,EAAEf,kBAAkB,CAAC;AACtCW,MAAAA,KAAK,EAAE,uBAD+B;AAEtCC,MAAAA,WAAW,EAAE,uBAFyB;AAGtCC,MAAAA,OAAO,EAAE,CAAC,MAAD,EAAS,SAAT,EAAoB,MAApB,CAH6B;AAItCC,MAAAA,YAAY,EAAE;AAJwB,KAAD,CAPlC;AAaLE,IAAAA,YAAY,EAAEf,cAAc,CAAC;AAC3BU,MAAAA,KAAK,EAAE,eADoB;AAE3BC,MAAAA,WAAW,EAAE,eAFc;AAG3BE,MAAAA,YAAY,EAAE;AAHa,KAAD,CAbvB;AAkBLG,IAAAA,aAAa,EAAEhB,cAAc,CAAC;AAC5BU,MAAAA,KAAK,EAAE,gBADqB;AAE5BC,MAAAA,WAAW,EAAE,gBAFe;AAG5BE,MAAAA,YAAY,EAAE;AAHc,KAAD,CAlBxB;AAuBLI,IAAAA,WAAW,EAAEhB,eAAe,CAAC;AAC3BS,MAAAA,KAAK,EAAE,cADoB;AAE3BC,MAAAA,WAAW,EAAE,cAFc;AAG3BE,MAAAA,YAAY,EAAE;AAHa,KAAD,CAvBvB;AA4BLK,IAAAA,aAAa,EAAEjB,eAAe,CAAC;AAC7BS,MAAAA,KAAK,EAAE,gBADsB;AAE7BC,MAAAA,WAAW,EAAE,gBAFgB;AAG7BE,MAAAA,YAAY,EAAE;AAHe,KAAD,CA5BzB;AAiCLM,IAAAA,UAAU,EAAElB,eAAe,CAAC;AAC1BS,MAAAA,KAAK,EAAE,aADmB;AAE1BC,MAAAA,WAAW,EAAE,aAFa;AAG1BE,MAAAA,YAAY,EAAE;AAHY,KAAD,CAjCtB;AAsCLO,IAAAA,cAAc,EAAEnB,eAAe,CAAC;AAC9BS,MAAAA,KAAK,EAAE,iBADuB;AAE9BC,MAAAA,WAAW,EAAE,iBAFiB;AAG9BE,MAAAA,YAAY,EAAE;AAHgB,KAAD;AAtC1B;AALT,CADuB,EAmDvB;AACEV,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,GAAG,EAAE,aAFP;AAGEC,EAAAA,QAAQ,EAAER,eAAe,CAACS,SAH5B;AAIEC,EAAAA,MAAM,EAAE,EAJV;AAKEC,EAAAA,KAAK,EAAE;AACLa,IAAAA,KAAK,EAAEvB,cAAc,CAAC;AACpBY,MAAAA,KAAK,EAAE,OADa;AAEpBC,MAAAA,WAAW,EAAE;AAFO,KAAD,CADhB;AAKLW,IAAAA,EAAE,EAAExB,cAAc,CAAC;AACjBY,MAAAA,KAAK,EAAE,IADU;AAEjBC,MAAAA,WAAW,EAAE;AAFI,KAAD,CALb;AASLY,IAAAA,kBAAkB,EAAEzB,cAAc,CAAC;AACjCY,MAAAA,KAAK,EAAE,qBAD0B;AAEjCC,MAAAA,WAAW,EAAE;AAFoB,KAAD;AAT7B;AALT,CAnDuB,CAAlB","sourcesContent":["import {\n COMPONENT_TYPES,\n createTextProp,\n createTextEnumProp,\n createBoolProp,\n createColorProp,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = [\n {\n name: \"TabView\",\n tag: \"TabView\",\n category: COMPONENT_TYPES.container,\n layout: {},\n props: {\n tabBarPosition: createTextEnumProp({\n label: \"Tab Bar Position\",\n description: \"Tab Bar Position\",\n options: [\"top\", \"bottom\"],\n defaultValue: \"top\",\n }),\n keyboardDismissMode: createTextEnumProp({\n label: \"Keyboard Dismiss Mode\",\n description: \"Keyboard Dismiss Mode\",\n options: [\"auto\", \"on-drag\", \"none\"],\n defaultValue: \"auto\",\n }),\n swipeEnabled: createBoolProp({\n label: \"Swipe Enabled\",\n description: \"Swipe Enabled\",\n defaultValue: true,\n }),\n scrollEnabled: createBoolProp({\n label: \"Scroll Enabled\",\n description: \"Scroll Enabled\",\n defaultValue: true,\n }),\n activeColor: createColorProp({\n label: \"Active Color\",\n description: \"Active Color\",\n defaultValue: \"primary\",\n }),\n inactiveColor: createColorProp({\n label: \"Inactive Color\",\n description: \"Inactive Color\",\n defaultValue: null,\n }),\n pressColor: createColorProp({\n label: \"Press Color\",\n description: \"Press Color\",\n defaultValue: null,\n }),\n indicatorColor: createColorProp({\n label: \"Indicator Color\",\n description: \"Indicator Color\",\n defaultValue: null,\n }),\n },\n },\n {\n name: \"TabViewItem\",\n tag: \"TabViewItem\",\n category: COMPONENT_TYPES.container,\n layout: {},\n props: {\n title: createTextProp({\n label: \"Title\",\n description: \"Tab Title\",\n }),\n id: createTextProp({\n label: \"Id\",\n description: \"Tab Id\",\n }),\n accessibilityLabel: createTextProp({\n label: \"Accessibility Label\",\n description: \"Accessibility Label\",\n }),\n },\n },\n];\n"]}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
3
|
-
import type { IconSlot } from "../../interfaces/Icon";
|
|
4
|
-
declare type TabBarPosition = "top" | "bottom";
|
|
5
|
-
declare type KeyboardDismissMode = "none" | "auto" | "on-drag";
|
|
6
|
-
declare type TabViewProps = {
|
|
7
|
-
tabBarPosition?: TabBarPosition;
|
|
8
|
-
keyboardDismissMode?: KeyboardDismissMode;
|
|
9
|
-
swipeEnabled?: boolean;
|
|
10
|
-
scrollEnabled?: boolean;
|
|
11
|
-
activeColor?: string;
|
|
12
|
-
inactiveColor?: string;
|
|
13
|
-
pressColor?: string;
|
|
14
|
-
indicatorColor?: string;
|
|
15
|
-
style?: StyleProp<TextStyle | ViewStyle>;
|
|
16
|
-
children: React.ReactNode;
|
|
17
|
-
} & IconSlot;
|
|
18
|
-
declare const TabViewComponent: ({ Icon, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, style, children, }: TabViewProps) => JSX.Element;
|
|
19
|
-
export default TabViewComponent;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
interface TabViewItemProps {
|
|
3
|
-
title: string;
|
|
4
|
-
id: string;
|
|
5
|
-
icon: string;
|
|
6
|
-
accessibilityLabel: string;
|
|
7
|
-
children: React.ReactNode;
|
|
8
|
-
}
|
|
9
|
-
declare const TabViewItem: ({ title, id, icon, children, accessibilityLabel, }: TabViewItemProps) => React.ReactNode;
|
|
10
|
-
export default TabViewItem;
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
export declare const SEED_DATA: ({
|
|
2
|
-
name: string;
|
|
3
|
-
tag: string;
|
|
4
|
-
category: string;
|
|
5
|
-
layout: {};
|
|
6
|
-
props: {
|
|
7
|
-
tabBarPosition: {
|
|
8
|
-
group: string;
|
|
9
|
-
label: string;
|
|
10
|
-
description: string;
|
|
11
|
-
editable: boolean;
|
|
12
|
-
required: boolean;
|
|
13
|
-
formType: string;
|
|
14
|
-
propType: string;
|
|
15
|
-
defaultValue: null;
|
|
16
|
-
options: never[];
|
|
17
|
-
};
|
|
18
|
-
keyboardDismissMode: {
|
|
19
|
-
group: string;
|
|
20
|
-
label: string;
|
|
21
|
-
description: string;
|
|
22
|
-
editable: boolean;
|
|
23
|
-
required: boolean;
|
|
24
|
-
formType: string;
|
|
25
|
-
propType: string;
|
|
26
|
-
defaultValue: null;
|
|
27
|
-
options: never[];
|
|
28
|
-
};
|
|
29
|
-
swipeEnabled: {
|
|
30
|
-
label: string;
|
|
31
|
-
description: string;
|
|
32
|
-
formType: string;
|
|
33
|
-
propType: string;
|
|
34
|
-
defaultValue: boolean;
|
|
35
|
-
editable: boolean;
|
|
36
|
-
required: boolean;
|
|
37
|
-
group: string;
|
|
38
|
-
};
|
|
39
|
-
scrollEnabled: {
|
|
40
|
-
label: string;
|
|
41
|
-
description: string;
|
|
42
|
-
formType: string;
|
|
43
|
-
propType: string;
|
|
44
|
-
defaultValue: boolean;
|
|
45
|
-
editable: boolean;
|
|
46
|
-
required: boolean;
|
|
47
|
-
group: string;
|
|
48
|
-
};
|
|
49
|
-
activeColor: {
|
|
50
|
-
group: string;
|
|
51
|
-
label: string;
|
|
52
|
-
description: string;
|
|
53
|
-
editable: boolean;
|
|
54
|
-
required: boolean;
|
|
55
|
-
defaultValue: null;
|
|
56
|
-
formType: string;
|
|
57
|
-
propType: string;
|
|
58
|
-
};
|
|
59
|
-
inactiveColor: {
|
|
60
|
-
group: string;
|
|
61
|
-
label: string;
|
|
62
|
-
description: string;
|
|
63
|
-
editable: boolean;
|
|
64
|
-
required: boolean;
|
|
65
|
-
defaultValue: null;
|
|
66
|
-
formType: string;
|
|
67
|
-
propType: string;
|
|
68
|
-
};
|
|
69
|
-
pressColor: {
|
|
70
|
-
group: string;
|
|
71
|
-
label: string;
|
|
72
|
-
description: string;
|
|
73
|
-
editable: boolean;
|
|
74
|
-
required: boolean;
|
|
75
|
-
defaultValue: null;
|
|
76
|
-
formType: string;
|
|
77
|
-
propType: string;
|
|
78
|
-
};
|
|
79
|
-
indicatorColor: {
|
|
80
|
-
group: string;
|
|
81
|
-
label: string;
|
|
82
|
-
description: string;
|
|
83
|
-
editable: boolean;
|
|
84
|
-
required: boolean;
|
|
85
|
-
defaultValue: null;
|
|
86
|
-
formType: string;
|
|
87
|
-
propType: string;
|
|
88
|
-
};
|
|
89
|
-
title?: undefined;
|
|
90
|
-
id?: undefined;
|
|
91
|
-
accessibilityLabel?: undefined;
|
|
92
|
-
};
|
|
93
|
-
} | {
|
|
94
|
-
name: string;
|
|
95
|
-
tag: string;
|
|
96
|
-
category: string;
|
|
97
|
-
layout: {};
|
|
98
|
-
props: {
|
|
99
|
-
title: any;
|
|
100
|
-
id: any;
|
|
101
|
-
accessibilityLabel: any;
|
|
102
|
-
tabBarPosition?: undefined;
|
|
103
|
-
keyboardDismissMode?: undefined;
|
|
104
|
-
swipeEnabled?: undefined;
|
|
105
|
-
scrollEnabled?: undefined;
|
|
106
|
-
activeColor?: undefined;
|
|
107
|
-
inactiveColor?: undefined;
|
|
108
|
-
pressColor?: undefined;
|
|
109
|
-
indicatorColor?: undefined;
|
|
110
|
-
};
|
|
111
|
-
})[];
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { TabView, TabBar, SceneMap } from "react-native-tab-view";
|
|
3
|
-
// import { withTheme } from "../../theming";
|
|
4
|
-
import TabViewItem from "./TabViewItem";
|
|
5
|
-
const TabViewComponent = ({ Icon, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, style, children, }) => {
|
|
6
|
-
const [index, setIndex] = React.useState(0);
|
|
7
|
-
const [routes, setRoutes] = React.useState([]);
|
|
8
|
-
const [tabScenes, setTabScenes] = React.useState({});
|
|
9
|
-
React.useEffect(() => {
|
|
10
|
-
const newRoutes = [];
|
|
11
|
-
const scenes = {};
|
|
12
|
-
React.Children.toArray(children)
|
|
13
|
-
.filter((child) => child.type === TabViewItem)
|
|
14
|
-
.forEach((child) => {
|
|
15
|
-
if (child?.props?.id) {
|
|
16
|
-
newRoutes.push({
|
|
17
|
-
key: child?.props?.id,
|
|
18
|
-
...child?.props,
|
|
19
|
-
});
|
|
20
|
-
scenes[child?.props?.id] = () => child;
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
setRoutes(newRoutes);
|
|
24
|
-
setTabScenes(scenes);
|
|
25
|
-
}, [children]);
|
|
26
|
-
const indexChangeHandler = (i) => setIndex(i);
|
|
27
|
-
const renderTabBar = (props) => {
|
|
28
|
-
console.log(props);
|
|
29
|
-
return (React.createElement(TabBar, { ...props, activeColor: activeColor, inactiveColor: inactiveColor, pressColor: pressColor, scrollEnabled: scrollEnabled, indicatorStyle: { backgroundColor: indicatorColor }, renderIcon: ({ route, color }) => route?.icon ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: style }));
|
|
30
|
-
};
|
|
31
|
-
return (React.createElement(TabView, { navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
|
|
32
|
-
};
|
|
33
|
-
export default TabViewComponent;
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
3
|
-
import { TabView, TabBar, SceneMap } from "react-native-tab-view";
|
|
4
|
-
|
|
5
|
-
// import { withTheme } from "../../theming";
|
|
6
|
-
import TabViewItem from "./TabViewItem";
|
|
7
|
-
import type { IconSlot } from "../../interfaces/Icon";
|
|
8
|
-
|
|
9
|
-
type TabBarPosition = "top" | "bottom";
|
|
10
|
-
type KeyboardDismissMode = "none" | "auto" | "on-drag";
|
|
11
|
-
|
|
12
|
-
type TabViewProps = {
|
|
13
|
-
tabBarPosition?: TabBarPosition;
|
|
14
|
-
keyboardDismissMode?: KeyboardDismissMode;
|
|
15
|
-
swipeEnabled?: boolean;
|
|
16
|
-
scrollEnabled?: boolean;
|
|
17
|
-
activeColor?: string;
|
|
18
|
-
inactiveColor?: string;
|
|
19
|
-
pressColor?: string;
|
|
20
|
-
indicatorColor?: string;
|
|
21
|
-
style?: StyleProp<TextStyle | ViewStyle>;
|
|
22
|
-
children: React.ReactNode;
|
|
23
|
-
} & IconSlot;
|
|
24
|
-
|
|
25
|
-
const TabViewComponent = ({
|
|
26
|
-
Icon,
|
|
27
|
-
tabBarPosition,
|
|
28
|
-
keyboardDismissMode,
|
|
29
|
-
swipeEnabled,
|
|
30
|
-
scrollEnabled,
|
|
31
|
-
activeColor,
|
|
32
|
-
inactiveColor,
|
|
33
|
-
pressColor,
|
|
34
|
-
indicatorColor,
|
|
35
|
-
style,
|
|
36
|
-
children,
|
|
37
|
-
}: TabViewProps) => {
|
|
38
|
-
const [index, setIndex] = React.useState(0);
|
|
39
|
-
const [routes, setRoutes] = React.useState([]);
|
|
40
|
-
const [tabScenes, setTabScenes] = React.useState({});
|
|
41
|
-
|
|
42
|
-
React.useEffect(() => {
|
|
43
|
-
const newRoutes: any = [];
|
|
44
|
-
const scenes: any = {};
|
|
45
|
-
|
|
46
|
-
React.Children.toArray(children)
|
|
47
|
-
.filter((child: any) => child.type === TabViewItem)
|
|
48
|
-
.forEach((child: any) => {
|
|
49
|
-
if (child?.props?.id) {
|
|
50
|
-
newRoutes.push({
|
|
51
|
-
key: child?.props?.id,
|
|
52
|
-
...child?.props,
|
|
53
|
-
});
|
|
54
|
-
scenes[child?.props?.id] = () => child;
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
setRoutes(newRoutes);
|
|
59
|
-
setTabScenes(scenes);
|
|
60
|
-
}, [children]);
|
|
61
|
-
|
|
62
|
-
const indexChangeHandler = (i: any) => setIndex(i);
|
|
63
|
-
|
|
64
|
-
const renderTabBar = (props: any) => {
|
|
65
|
-
console.log(props);
|
|
66
|
-
return (
|
|
67
|
-
<TabBar
|
|
68
|
-
{...props}
|
|
69
|
-
activeColor={activeColor}
|
|
70
|
-
inactiveColor={inactiveColor}
|
|
71
|
-
pressColor={pressColor}
|
|
72
|
-
scrollEnabled={scrollEnabled}
|
|
73
|
-
indicatorStyle={{ backgroundColor: indicatorColor }}
|
|
74
|
-
renderIcon={({ route, color }) =>
|
|
75
|
-
route?.icon ? (
|
|
76
|
-
<Icon name={route.icon} color={color} size={36} />
|
|
77
|
-
) : null
|
|
78
|
-
}
|
|
79
|
-
style={style}
|
|
80
|
-
/>
|
|
81
|
-
);
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
return (
|
|
85
|
-
<TabView
|
|
86
|
-
navigationState={{ index, routes }}
|
|
87
|
-
renderScene={SceneMap(tabScenes)}
|
|
88
|
-
renderTabBar={renderTabBar}
|
|
89
|
-
onIndexChange={indexChangeHandler}
|
|
90
|
-
tabBarPosition={tabBarPosition}
|
|
91
|
-
keyboardDismissMode={keyboardDismissMode}
|
|
92
|
-
swipeEnabled={swipeEnabled}
|
|
93
|
-
/>
|
|
94
|
-
);
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
export default TabViewComponent;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
interface TabViewItemProps {
|
|
3
|
-
title: string;
|
|
4
|
-
id: string;
|
|
5
|
-
icon: string;
|
|
6
|
-
accessibilityLabel: string;
|
|
7
|
-
children: React.ReactNode;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
const TabViewItem = ({
|
|
11
|
-
title,
|
|
12
|
-
id,
|
|
13
|
-
icon,
|
|
14
|
-
children,
|
|
15
|
-
accessibilityLabel,
|
|
16
|
-
}: TabViewItemProps) => {
|
|
17
|
-
console.log({ title, id, icon, accessibilityLabel });
|
|
18
|
-
return children;
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
export default TabViewItem;
|
package/src/mappings/TabView.js
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createTextProp, createTextEnumProp, createBoolProp, createColorProp, } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = [
|
|
3
|
-
{
|
|
4
|
-
name: "TabView",
|
|
5
|
-
tag: "TabView",
|
|
6
|
-
category: COMPONENT_TYPES.container,
|
|
7
|
-
layout: {},
|
|
8
|
-
props: {
|
|
9
|
-
tabBarPosition: createTextEnumProp({
|
|
10
|
-
label: "Tab Bar Position",
|
|
11
|
-
description: "Tab Bar Position",
|
|
12
|
-
options: ["top", "bottom"],
|
|
13
|
-
defaultValue: "top",
|
|
14
|
-
}),
|
|
15
|
-
keyboardDismissMode: createTextEnumProp({
|
|
16
|
-
label: "Keyboard Dismiss Mode",
|
|
17
|
-
description: "Keyboard Dismiss Mode",
|
|
18
|
-
options: ["auto", "on-drag", "none"],
|
|
19
|
-
defaultValue: "auto",
|
|
20
|
-
}),
|
|
21
|
-
swipeEnabled: createBoolProp({
|
|
22
|
-
label: "Swipe Enabled",
|
|
23
|
-
description: "Swipe Enabled",
|
|
24
|
-
defaultValue: true,
|
|
25
|
-
}),
|
|
26
|
-
scrollEnabled: createBoolProp({
|
|
27
|
-
label: "Scroll Enabled",
|
|
28
|
-
description: "Scroll Enabled",
|
|
29
|
-
defaultValue: true,
|
|
30
|
-
}),
|
|
31
|
-
activeColor: createColorProp({
|
|
32
|
-
label: "Active Color",
|
|
33
|
-
description: "Active Color",
|
|
34
|
-
defaultValue: "primary",
|
|
35
|
-
}),
|
|
36
|
-
inactiveColor: createColorProp({
|
|
37
|
-
label: "Inactive Color",
|
|
38
|
-
description: "Inactive Color",
|
|
39
|
-
defaultValue: null,
|
|
40
|
-
}),
|
|
41
|
-
pressColor: createColorProp({
|
|
42
|
-
label: "Press Color",
|
|
43
|
-
description: "Press Color",
|
|
44
|
-
defaultValue: null,
|
|
45
|
-
}),
|
|
46
|
-
indicatorColor: createColorProp({
|
|
47
|
-
label: "Indicator Color",
|
|
48
|
-
description: "Indicator Color",
|
|
49
|
-
defaultValue: null,
|
|
50
|
-
}),
|
|
51
|
-
},
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
name: "TabViewItem",
|
|
55
|
-
tag: "TabViewItem",
|
|
56
|
-
category: COMPONENT_TYPES.container,
|
|
57
|
-
layout: {},
|
|
58
|
-
props: {
|
|
59
|
-
title: createTextProp({
|
|
60
|
-
label: "Title",
|
|
61
|
-
description: "Tab Title",
|
|
62
|
-
}),
|
|
63
|
-
id: createTextProp({
|
|
64
|
-
label: "Id",
|
|
65
|
-
description: "Tab Id",
|
|
66
|
-
}),
|
|
67
|
-
accessibilityLabel: createTextProp({
|
|
68
|
-
label: "Accessibility Label",
|
|
69
|
-
description: "Accessibility Label",
|
|
70
|
-
}),
|
|
71
|
-
},
|
|
72
|
-
},
|
|
73
|
-
];
|
package/src/mappings/TabView.ts
DELETED
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
COMPONENT_TYPES,
|
|
3
|
-
createTextProp,
|
|
4
|
-
createTextEnumProp,
|
|
5
|
-
createBoolProp,
|
|
6
|
-
createColorProp,
|
|
7
|
-
} from "@draftbit/types";
|
|
8
|
-
|
|
9
|
-
export const SEED_DATA = [
|
|
10
|
-
{
|
|
11
|
-
name: "TabView",
|
|
12
|
-
tag: "TabView",
|
|
13
|
-
category: COMPONENT_TYPES.container,
|
|
14
|
-
layout: {},
|
|
15
|
-
props: {
|
|
16
|
-
tabBarPosition: createTextEnumProp({
|
|
17
|
-
label: "Tab Bar Position",
|
|
18
|
-
description: "Tab Bar Position",
|
|
19
|
-
options: ["top", "bottom"],
|
|
20
|
-
defaultValue: "top",
|
|
21
|
-
}),
|
|
22
|
-
keyboardDismissMode: createTextEnumProp({
|
|
23
|
-
label: "Keyboard Dismiss Mode",
|
|
24
|
-
description: "Keyboard Dismiss Mode",
|
|
25
|
-
options: ["auto", "on-drag", "none"],
|
|
26
|
-
defaultValue: "auto",
|
|
27
|
-
}),
|
|
28
|
-
swipeEnabled: createBoolProp({
|
|
29
|
-
label: "Swipe Enabled",
|
|
30
|
-
description: "Swipe Enabled",
|
|
31
|
-
defaultValue: true,
|
|
32
|
-
}),
|
|
33
|
-
scrollEnabled: createBoolProp({
|
|
34
|
-
label: "Scroll Enabled",
|
|
35
|
-
description: "Scroll Enabled",
|
|
36
|
-
defaultValue: true,
|
|
37
|
-
}),
|
|
38
|
-
activeColor: createColorProp({
|
|
39
|
-
label: "Active Color",
|
|
40
|
-
description: "Active Color",
|
|
41
|
-
defaultValue: "primary",
|
|
42
|
-
}),
|
|
43
|
-
inactiveColor: createColorProp({
|
|
44
|
-
label: "Inactive Color",
|
|
45
|
-
description: "Inactive Color",
|
|
46
|
-
defaultValue: null,
|
|
47
|
-
}),
|
|
48
|
-
pressColor: createColorProp({
|
|
49
|
-
label: "Press Color",
|
|
50
|
-
description: "Press Color",
|
|
51
|
-
defaultValue: null,
|
|
52
|
-
}),
|
|
53
|
-
indicatorColor: createColorProp({
|
|
54
|
-
label: "Indicator Color",
|
|
55
|
-
description: "Indicator Color",
|
|
56
|
-
defaultValue: null,
|
|
57
|
-
}),
|
|
58
|
-
},
|
|
59
|
-
},
|
|
60
|
-
{
|
|
61
|
-
name: "TabViewItem",
|
|
62
|
-
tag: "TabViewItem",
|
|
63
|
-
category: COMPONENT_TYPES.container,
|
|
64
|
-
layout: {},
|
|
65
|
-
props: {
|
|
66
|
-
title: createTextProp({
|
|
67
|
-
label: "Title",
|
|
68
|
-
description: "Tab Title",
|
|
69
|
-
}),
|
|
70
|
-
id: createTextProp({
|
|
71
|
-
label: "Id",
|
|
72
|
-
description: "Tab Id",
|
|
73
|
-
}),
|
|
74
|
-
accessibilityLabel: createTextProp({
|
|
75
|
-
label: "Accessibility Label",
|
|
76
|
-
description: "Accessibility Label",
|
|
77
|
-
}),
|
|
78
|
-
},
|
|
79
|
-
},
|
|
80
|
-
];
|