Skip to content

Commit 7b5d1ca

Browse files
ethansharethanshar
authored
Add docs to TabController (#1646)
* Add docs to TabController * Remove PageCarousel api props property cause it's empty * dummy commit * fix file name * Add some missing default values
1 parent 75f55ec commit 7b5d1ca

File tree

5 files changed

+116
-0
lines changed

5 files changed

+116
-0
lines changed

‎src/components/tabController/apis/pageCarousel.api.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"name": "TabController.PageCarousel",
3+
"category": "layoutsAndTemplates",
4+
"description": "TabController's PageCarousel component",
5+
"note": "You must pass `asCarousel` flag to TabController and render your TabPages inside a PageCarousel",
6+
"extends": ["ScrollView"],
7+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
8+
"images": []
9+
}

‎src/components/tabController/apis/tabBar.api.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "TabController.TabBar",
3+
"category": "layoutsAndTemplates",
4+
"description": "TabController's TabBar component",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
6+
"images": [],
7+
"props": [
8+
{"name": "height", "type": "number", "description": "Tab Bar height", "default": "48"},
9+
{"name": "enableShadow", "type": "boolean", "description": "Show Tab Bar bottom shadow"},
10+
{"name": "shadowStyle", "type": "ViewStyle", "description": "Custom shadow style"},
11+
{"name": "indicatorStyle", "type": "ViewStyle", "description": "Custom style for the selected indicator"},
12+
{"name": "labelStyle", "type": "TextStyle", "description": "Custom label style"},
13+
{"name": "selectedLabelStyle", "type": "TextStyle", "description": "Custom selected label style"},
14+
{"name": "labelColor", "type": "string", "description": "The default label color"},
15+
{"name": "selectedLabelColor", "type": "string", "description": "The selected label color"},
16+
{"name": "uppercase", "type": "boolean", "description": "Whether to change the text to uppercase"},
17+
{"name": "iconColor", "type": "string", "description": "Icon tint color"},
18+
{"name": "selectedIconColor", "type": "string", "description": "Icon selected tint color"},
19+
{"name": "activeBackgroundColor", "type": "string", "description": "Apply background color on press for tab item"},
20+
{"name": "backgroundColor", "type": "string", "description": "The TabBar background Color", "default": "Colors.white"},
21+
{"name": "containerWidth", "type": "number", "description": "The TabBar container width"},
22+
{"name": "centerSelected", "type": "boolean", "description": "Pass to center selected item"},
23+
{"name": "spreadItems", "type": "boolean", "description": "Whether the tabBar should be spread", "default": "true"},
24+
{"name": "indicatorInsets", "type": "number", "description": "The indicator insets", "default": "Spacings.s4"},
25+
{"name": "containerStyle", "type": "ViewStyle", "description": "Additional styles for the container"},
26+
{"name": "testID", "type": "string", "description": "The component test id"}
27+
]
28+
}

‎src/components/tabController/apis/tabBarItem.api.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "TabController.TabBarItem",
3+
"category": "layoutsAndTemplates",
4+
"description": "TabController's TabBarItem component",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
6+
"images": [],
7+
"props": [
8+
{"name": "label", "type": "string", "description": "Label of the tab"},
9+
{"name": "labelStyle;", "type": "TextStyle", "description": "Custom label style"},
10+
{"name": "selectedLabelStyle", "type": "TextStyle", "description": "Custom selected label style"},
11+
{"name": "labelColor", "type": "string", "description": "The default label color", "default": "Colors.black"},
12+
{"name": "selectedLabelColor", "type": "string", "description": "The selected label color", "default": "Colors.primary"},
13+
{"name": "icon", "type": "number", "description": "Icon of the tab"},
14+
{"name": "iconColor", "type": "string", "description": "Icon tint color"},
15+
{"name": "selectedIconColor", "type": "string", "description": "Icon selected tint color"},
16+
{"name": "badge", "type": "BadgeProps", "description": "Badge component props to display next the item label"},
17+
{"name": "leadingAccessory", "type": "ReactElement", "description": "Pass to render a leading element"},
18+
{"name": "trailingAccessory", "type": "ReactElement", "description": "Pass to render a trailing element"},
19+
{"name": "width", "type": "number", "description": "A fixed width for the item"},
20+
{"name": "ignore", "type": "boolean", "description": "Ignore tab presses"},
21+
{"name": "onPress", "type": "(index: number) => void", "description": "Callback for when pressing a tab"},
22+
{"name": "uppercase", "type": "boolean", "description": "Whether to change the text to uppercase"},
23+
{"name": "activeOpacity", "type": "number", "description": "The active opacity when pressing a tab"},
24+
{
25+
"name": "activeBackgroundColor",
26+
"type": "string",
27+
"description": " Apply background color on press for TouchableOpacity"
28+
},
29+
{"name": "style", "type": "ViewStyle", "description": "Pass custom style"},
30+
{"name": "testID", "type": "string", "description": "Used as a testing identifier"}
31+
]
32+
}

‎src/components/tabController/apis/tabController.api.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "TabController",
3+
"category": "layoutsAndTemplates",
4+
"description": "A performant solution for a tab controller with lazy load mechanism",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
6+
"note": "This component is based on react-native-gesture-handler.\nOn Android, when using react-native-navigation, make sure to wrap your screen with gestureHandlerRootHOC",
7+
"images": [],
8+
"props": [
9+
{"name": "items", "type": "TabControllerItemProps[]", "description": "The list of tab bar items"},
10+
{"name": "initialIndex", "type": "number", "description": "Initial selected index", "default": "0"},
11+
{"name": "selectedIndex", "type": "number", "description": "The current selected index", "deprecated": true},
12+
{
13+
"name": "onChangeIndex",
14+
"type": "(index: number, prevIndex: number | null) => void",
15+
"description": "Callback for when index has change (will not be called on ignored items)"
16+
},
17+
{
18+
"name": "asCarousel",
19+
"type": "boolean",
20+
"description": "When using TabController.PageCarousel this should be turned on",
21+
"default": "false"
22+
},
23+
{"name": "carouselPageWidth;", "type": "number", "description": "Pass for custom carousel page width"}
24+
]
25+
}

‎src/components/tabController/apis/tabPage.api.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "TabController.TabPage",
3+
"category": "layoutsAndTemplates",
4+
"description": "TabController's TabPage component",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
6+
"images": [],
7+
"props": [
8+
{"name": "index", "type": "number", "description": "The index of the the TabPage"},
9+
{"name": "lazy", "type": "boolean", "description": "Whether this page should be loaded lazily"},
10+
{
11+
"name": "lazyLoadTime",
12+
"type": "number",
13+
"description": "How long to wait till lazy load complete (good for showing loader screens)"
14+
},
15+
{
16+
"name": "renderLoading",
17+
"type": "() => JSX.Element",
18+
"description": "Render a custom loading page when lazy loading"
19+
},
20+
{"name": "testID", "type": "string", "description": "The component test id"}
21+
]
22+
}

0 commit comments

Comments
 (0)