@draftbit/core 50.1.2-8f069c.2 → 50.1.2
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/TabView/TabView.js +1 -1
- package/lib/typescript/src/components/TabView/TabView.d.ts +2 -0
- package/lib/typescript/src/components/TabView/TabView.js +17 -2
- package/lib/typescript/src/components/TabView/TabView.js.map +1 -1
- package/lib/typescript/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/components/TabView/TabView.js +17 -2
- package/src/components/TabView/TabView.js.map +1 -1
- package/src/components/TabView/TabView.tsx +19 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "50.1.2
|
|
3
|
+
"version": "50.1.2",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"types": "lib/typescript/src/index.d.ts",
|
|
@@ -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": "
|
|
44
|
+
"@draftbit/types": "50.1.0",
|
|
45
45
|
"@expo/vector-icons": "^14.0.0",
|
|
46
46
|
"@gorhom/bottom-sheet": "5.0.0-alpha.7",
|
|
47
47
|
"@material-ui/core": "^4.11.0",
|
|
@@ -117,5 +117,5 @@
|
|
|
117
117
|
],
|
|
118
118
|
"testEnvironment": "node"
|
|
119
119
|
},
|
|
120
|
-
"gitHead": "
|
|
120
|
+
"gitHead": "a54f32d20ab73e3d99472451fda160f150a4399a"
|
|
121
121
|
}
|
|
@@ -3,7 +3,7 @@ import { TabView, TabBar, } from "react-native-tab-view";
|
|
|
3
3
|
import TabViewItem from "./TabViewItem";
|
|
4
4
|
import { withTheme } from "../../theming";
|
|
5
5
|
import { flattenReactFragments, extractStyles } from "../../utilities";
|
|
6
|
-
const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, initialTabIndex = 0, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, iconSize = 16, style, theme, children: childrenProp, }) => {
|
|
6
|
+
const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, initialTabIndex = 0, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, iconSize = 16, iconPosition = "top", style, theme, children: childrenProp, }) => {
|
|
7
7
|
const [index, setIndex] = React.useState(initialTabIndex);
|
|
8
8
|
const [routes, setRoutes] = React.useState([]);
|
|
9
9
|
const { textStyles, viewStyles } = extractStyles(style);
|
|
@@ -30,9 +30,24 @@ const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, initialTabIndex
|
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
32
|
const renderTabBar = (props) => {
|
|
33
|
+
let tabFlexDirection;
|
|
34
|
+
switch (iconPosition) {
|
|
35
|
+
case "top":
|
|
36
|
+
tabFlexDirection = "column";
|
|
37
|
+
break;
|
|
38
|
+
case "bottom":
|
|
39
|
+
tabFlexDirection = "column-reverse";
|
|
40
|
+
break;
|
|
41
|
+
case "left":
|
|
42
|
+
tabFlexDirection = "row";
|
|
43
|
+
break;
|
|
44
|
+
case "right":
|
|
45
|
+
tabFlexDirection = "row-reverse";
|
|
46
|
+
break;
|
|
47
|
+
}
|
|
33
48
|
return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || "rgb(200,200,200)", pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
|
|
34
49
|
backgroundColor: indicatorColor || theme.colors.primary,
|
|
35
|
-
}, labelStyle: [{ textTransform: "none" }, textStyles], renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: iconSize })) : null, style: {
|
|
50
|
+
}, labelStyle: [{ textTransform: "none" }, textStyles], tabStyle: { flexDirection: tabFlexDirection }, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: iconSize })) : null, style: {
|
|
36
51
|
backgroundColor: tabsBackgroundColor || theme.colors.background,
|
|
37
52
|
} }));
|
|
38
53
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabView.js","sourceRoot":"","sources":["TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,OAAO,EACP,MAAM,GAIP,MAAM,uBAAuB,CAAC;AAE/B,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"TabView.js","sourceRoot":"","sources":["TabView.tsx"],"names":[],"mappings":"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"}
|
|
@@ -22,6 +22,7 @@ type TabBarProps = SceneRendererProps & {
|
|
|
22
22
|
};
|
|
23
23
|
type TabBarPosition = "top" | "bottom";
|
|
24
24
|
type KeyboardDismissMode = "none" | "auto" | "on-drag";
|
|
25
|
+
type IconPosition = "top" | "bottom" | "left" | "right";
|
|
25
26
|
|
|
26
27
|
type TabViewProps = {
|
|
27
28
|
onIndexChanged?: (index: number) => void;
|
|
@@ -37,6 +38,7 @@ type TabViewProps = {
|
|
|
37
38
|
indicatorColor?: string;
|
|
38
39
|
tabsBackgroundColor?: string;
|
|
39
40
|
iconSize?: number;
|
|
41
|
+
iconPosition?: IconPosition;
|
|
40
42
|
style?: StyleProp<ViewStyle | TextStyle>;
|
|
41
43
|
theme: Theme;
|
|
42
44
|
} & IconSlot;
|
|
@@ -56,6 +58,7 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
|
|
|
56
58
|
indicatorColor,
|
|
57
59
|
tabsBackgroundColor,
|
|
58
60
|
iconSize = 16,
|
|
61
|
+
iconPosition = "top",
|
|
59
62
|
style,
|
|
60
63
|
theme,
|
|
61
64
|
children: childrenProp,
|
|
@@ -101,6 +104,21 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
|
|
|
101
104
|
};
|
|
102
105
|
|
|
103
106
|
const renderTabBar: React.FC<TabBarProps> = (props) => {
|
|
107
|
+
let tabFlexDirection: "row" | "column" | "row-reverse" | "column-reverse";
|
|
108
|
+
switch (iconPosition) {
|
|
109
|
+
case "top":
|
|
110
|
+
tabFlexDirection = "column";
|
|
111
|
+
break;
|
|
112
|
+
case "bottom":
|
|
113
|
+
tabFlexDirection = "column-reverse";
|
|
114
|
+
break;
|
|
115
|
+
case "left":
|
|
116
|
+
tabFlexDirection = "row";
|
|
117
|
+
break;
|
|
118
|
+
case "right":
|
|
119
|
+
tabFlexDirection = "row-reverse";
|
|
120
|
+
break;
|
|
121
|
+
}
|
|
104
122
|
return (
|
|
105
123
|
<TabBar
|
|
106
124
|
{...props}
|
|
@@ -112,6 +130,7 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
|
|
|
112
130
|
backgroundColor: indicatorColor || theme.colors.primary,
|
|
113
131
|
}}
|
|
114
132
|
labelStyle={[{ textTransform: "none" }, textStyles]}
|
|
133
|
+
tabStyle={{ flexDirection: tabFlexDirection }}
|
|
115
134
|
renderIcon={({ route, color }) =>
|
|
116
135
|
route?.icon ? (
|
|
117
136
|
<Icon name={route.icon} color={color} size={iconSize} />
|