@draftbit/core 50.1.2-0962b7.2 → 50.1.2-83aab9.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
|
@@ -1 +1 @@
|
|
|
1
|
-
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _this=this,_jsxFileName="/home/runner/work/react-native-jigsaw/react-native-jigsaw/packages/core/src/components/TabView/TabView.tsx";import*as React from"react";import{TabView,TabBar}from"react-native-tab-view";import TabViewItem from"./TabViewItem";import{withTheme}from"../../theming";import{flattenReactFragments,extractStyles}from"../../utilities";import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";var TabViewComponent=function TabViewComponent(_ref){var Icon=_ref.Icon,onIndexChanged=_ref.onIndexChanged,onEndReached=_ref.onEndReached,_ref$initialTabIndex=_ref.initialTabIndex,initialTabIndex=_ref$initialTabIndex===void 0?0:_ref$initialTabIndex,tabBarPosition=_ref.tabBarPosition,keyboardDismissMode=_ref.keyboardDismissMode,swipeEnabled=_ref.swipeEnabled,scrollEnabled=_ref.scrollEnabled,activeColor=_ref.activeColor,inactiveColor=_ref.inactiveColor,pressColor=_ref.pressColor,indicatorColor=_ref.indicatorColor,tabsBackgroundColor=_ref.tabsBackgroundColor,_ref$iconSize=_ref.iconSize,iconSize=_ref$iconSize===void 0?16:_ref$iconSize,style=_ref.style,theme=_ref.theme,childrenProp=_ref.children;var _React$useState=React.useState(initialTabIndex),_React$useState2=_slicedToArray(_React$useState,2),index=_React$useState2[0],setIndex=_React$useState2[1];var _React$useState3=React.useState([]),_React$useState4=_slicedToArray(_React$useState3,2),routes=_React$useState4[0],setRoutes=_React$useState4[1];var _extractStyles=extractStyles(style),textStyles=_extractStyles.textStyles,viewStyles=_extractStyles.viewStyles;var children=React.useMemo(function(){return flattenReactFragments(React.Children.toArray(childrenProp)).filter(function(child){return React.isValidElement(child)&&child.type===TabViewItem;});},[childrenProp]);React.useEffect(function(){var newRoutes=[];children.forEach(function(item,idx){var child=item;newRoutes.push({key:idx.toString(),title:child.props.title,icon:child.props.icon,accessibilityLabel:child.props.accessibilityLabel});});setRoutes(newRoutes);},[children]);var indexChangeHandler=function indexChangeHandler(i){setIndex(i);onIndexChanged==null?void 0:onIndexChanged(i);if(i===routes.length){onEndReached==null?void 0:onEndReached();}};var renderTabBar=function renderTabBar(props){return _jsx(TabBar,Object.assign({},props,{activeColor:activeColor||theme.colors.primary,inactiveColor:inactiveColor||"rgb(200,200,200)",pressColor:pressColor||theme.colors.primary,scrollEnabled:scrollEnabled,indicatorStyle:{backgroundColor:indicatorColor||theme.colors.primary},labelStyle:[{textTransform:"none"},textStyles],renderIcon:function renderIcon(_ref2){var route=_ref2.route,color=_ref2.color;return route!=null&&route.icon?_jsx(Icon,{name:route.icon,color:color,size:iconSize}):null;},style:{backgroundColor:tabsBackgroundColor||theme.colors.background}}));};var renderScene=function renderScene(_ref3){var route=_ref3.route;var index=Number(route.key);return children[index];};if(!routes.length){return _jsx(_Fragment,{});}return _jsx(TabView,{style:viewStyles,navigationState:{index:index,routes:routes},renderScene:renderScene,renderTabBar:renderTabBar,onIndexChange:indexChangeHandler,tabBarPosition:tabBarPosition,keyboardDismissMode:keyboardDismissMode,swipeEnabled:swipeEnabled});};export default withTheme(TabViewComponent);
|
|
1
|
+
import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _this=this,_jsxFileName="/home/runner/work/react-native-jigsaw/react-native-jigsaw/packages/core/src/components/TabView/TabView.tsx";import*as React from"react";import{TabView,TabBar}from"react-native-tab-view";import TabViewItem from"./TabViewItem";import{withTheme}from"../../theming";import{flattenReactFragments,extractStyles}from"../../utilities";import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";var TabViewComponent=function TabViewComponent(_ref){var Icon=_ref.Icon,onIndexChanged=_ref.onIndexChanged,onEndReached=_ref.onEndReached,_ref$initialTabIndex=_ref.initialTabIndex,initialTabIndex=_ref$initialTabIndex===void 0?0:_ref$initialTabIndex,tabBarPosition=_ref.tabBarPosition,keyboardDismissMode=_ref.keyboardDismissMode,swipeEnabled=_ref.swipeEnabled,scrollEnabled=_ref.scrollEnabled,activeColor=_ref.activeColor,inactiveColor=_ref.inactiveColor,pressColor=_ref.pressColor,indicatorColor=_ref.indicatorColor,tabsBackgroundColor=_ref.tabsBackgroundColor,_ref$iconSize=_ref.iconSize,iconSize=_ref$iconSize===void 0?16:_ref$iconSize,_ref$iconPosition=_ref.iconPosition,iconPosition=_ref$iconPosition===void 0?"top":_ref$iconPosition,style=_ref.style,theme=_ref.theme,childrenProp=_ref.children;var _React$useState=React.useState(initialTabIndex),_React$useState2=_slicedToArray(_React$useState,2),index=_React$useState2[0],setIndex=_React$useState2[1];var _React$useState3=React.useState([]),_React$useState4=_slicedToArray(_React$useState3,2),routes=_React$useState4[0],setRoutes=_React$useState4[1];var _extractStyles=extractStyles(style),textStyles=_extractStyles.textStyles,viewStyles=_extractStyles.viewStyles;var children=React.useMemo(function(){return flattenReactFragments(React.Children.toArray(childrenProp)).filter(function(child){return React.isValidElement(child)&&child.type===TabViewItem;});},[childrenProp]);React.useEffect(function(){var newRoutes=[];children.forEach(function(item,idx){var child=item;newRoutes.push({key:idx.toString(),title:child.props.title,icon:child.props.icon,accessibilityLabel:child.props.accessibilityLabel});});setRoutes(newRoutes);},[children]);var indexChangeHandler=function indexChangeHandler(i){setIndex(i);onIndexChanged==null?void 0:onIndexChanged(i);if(i===routes.length){onEndReached==null?void 0:onEndReached();}};var renderTabBar=function renderTabBar(props){var tabFlexDirection;switch(iconPosition){case"top":tabFlexDirection="column";break;case"bottom":tabFlexDirection="column-reverse";break;case"left":tabFlexDirection="row";break;case"right":tabFlexDirection="row-reverse";break;}return _jsx(TabBar,Object.assign({},props,{activeColor:activeColor||theme.colors.primary,inactiveColor:inactiveColor||"rgb(200,200,200)",pressColor:pressColor||theme.colors.primary,scrollEnabled:scrollEnabled,indicatorStyle:{backgroundColor:indicatorColor||theme.colors.primary},labelStyle:[{textTransform:"none"},textStyles],tabStyle:{flexDirection:tabFlexDirection},renderIcon:function renderIcon(_ref2){var route=_ref2.route,color=_ref2.color;return route!=null&&route.icon?_jsx(Icon,{name:route.icon,color:color,size:iconSize}):null;},style:{backgroundColor:tabsBackgroundColor||theme.colors.background}}));};var renderScene=function renderScene(_ref3){var route=_ref3.route;var index=Number(route.key);return children[index];};if(!routes.length){return _jsx(_Fragment,{});}return _jsx(TabView,{style:viewStyles,navigationState:{index:index,routes:routes},renderScene:renderScene,renderTabBar:renderTabBar,onIndexChange:indexChangeHandler,tabBarPosition:tabBarPosition,keyboardDismissMode:keyboardDismissMode,swipeEnabled:swipeEnabled});};export default withTheme(TabViewComponent);
|
|
@@ -4,6 +4,7 @@ import type { IconSlot } from "../../interfaces/Icon";
|
|
|
4
4
|
import type { Theme } from "../../styles/DefaultTheme";
|
|
5
5
|
declare type TabBarPosition = "top" | "bottom";
|
|
6
6
|
declare type KeyboardDismissMode = "none" | "auto" | "on-drag";
|
|
7
|
+
declare type IconPosition = "top" | "bottom" | "left" | "right";
|
|
7
8
|
declare type TabViewProps = {
|
|
8
9
|
onIndexChanged?: (index: number) => void;
|
|
9
10
|
onEndReached?: () => void;
|
|
@@ -18,6 +19,7 @@ declare type TabViewProps = {
|
|
|
18
19
|
indicatorColor?: string;
|
|
19
20
|
tabsBackgroundColor?: string;
|
|
20
21
|
iconSize?: number;
|
|
22
|
+
iconPosition?: IconPosition;
|
|
21
23
|
style?: StyleProp<ViewStyle | TextStyle>;
|
|
22
24
|
theme: Theme;
|
|
23
25
|
} & IconSlot;
|
|
@@ -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":["../../../../../src/components/TabView/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":["../../../../../src/components/TabView/TabView.tsx"],"names":[],"mappings":"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"}
|