@draftbit/core 46.8.2-81337b.2 → 46.8.2-9b0174.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/BottomSheet/BottomSheet.js +89 -0
- package/lib/commonjs/components/BottomSheet/BottomSheetComponent.js +464 -0
- package/lib/commonjs/components/BottomSheet/index.js +13 -0
- package/lib/commonjs/components/DeprecatedCardWrapper.js +1 -15
- package/lib/commonjs/constants.js +1 -1
- package/lib/commonjs/index.js +7 -13
- package/lib/commonjs/mappings/BottomSheet.js +75 -0
- package/lib/commonjs/styles/overlay.js +3 -1
- package/lib/commonjs/utilities.js +2 -1
- package/lib/module/components/BottomSheet/BottomSheet.js +81 -0
- package/lib/module/components/BottomSheet/BottomSheetComponent.js +470 -0
- package/lib/module/components/BottomSheet/index.js +1 -0
- package/lib/module/index.js +1 -1
- package/lib/module/mappings/BottomSheet.js +68 -0
- package/lib/typescript/src/components/BottomSheet/BottomSheet.d.ts +20 -0
- package/lib/typescript/src/components/BottomSheet/BottomSheet.d.ts.map +1 -0
- package/lib/typescript/src/components/BottomSheet/BottomSheetComponent.d.ts +170 -0
- package/lib/typescript/src/components/BottomSheet/BottomSheetComponent.d.ts.map +1 -0
- package/lib/typescript/src/components/BottomSheet/index.d.ts +2 -0
- package/lib/typescript/src/components/BottomSheet/index.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/mappings/{TabView.d.ts → BottomSheet.d.ts} +40 -43
- package/lib/typescript/src/mappings/BottomSheet.d.ts.map +1 -0
- package/package.json +3 -5
- package/src/components/BottomSheet/BottomSheet.js +57 -0
- package/src/components/BottomSheet/BottomSheet.tsx +121 -0
- package/src/components/BottomSheet/BottomSheetComponent.js +437 -0
- package/src/components/BottomSheet/BottomSheetComponent.tsx +895 -0
- package/src/components/BottomSheet/index.js +1 -0
- package/src/components/BottomSheet/index.ts +1 -0
- package/src/index.js +1 -1
- package/src/index.tsx +1 -1
- package/src/mappings/BottomSheet.js +64 -0
- package/src/mappings/BottomSheet.ts +78 -0
- package/lib/commonjs/components/TabView/TabView.js +0 -100
- package/lib/commonjs/components/TabView/TabViewItem.js +0 -25
- package/lib/commonjs/components/TabView/index.js +0 -20
- package/lib/commonjs/mappings/TabView.js +0 -74
- package/lib/commonjs/mappings/TabViewItem.js +0 -37
- package/lib/module/components/TabView/TabView.js +0 -90
- package/lib/module/components/TabView/TabViewItem.js +0 -20
- package/lib/module/components/TabView/index.js +0 -2
- package/lib/module/mappings/TabView.js +0 -67
- package/lib/module/mappings/TabViewItem.js +0 -30
- package/lib/typescript/src/components/TabView/TabView.d.ts +0 -26
- package/lib/typescript/src/components/TabView/TabView.d.ts.map +0 -1
- package/lib/typescript/src/components/TabView/TabViewItem.d.ts +0 -11
- package/lib/typescript/src/components/TabView/TabViewItem.d.ts.map +0 -1
- package/lib/typescript/src/components/TabView/index.d.ts +0 -3
- package/lib/typescript/src/components/TabView/index.d.ts.map +0 -1
- package/lib/typescript/src/mappings/TabView.d.ts.map +0 -1
- package/lib/typescript/src/mappings/TabViewItem.d.ts +0 -25
- package/lib/typescript/src/mappings/TabViewItem.d.ts.map +0 -1
- package/src/components/TabView/TabView.js +0 -45
- package/src/components/TabView/TabView.tsx +0 -129
- package/src/components/TabView/TabViewItem.js +0 -11
- package/src/components/TabView/TabViewItem.tsx +0 -25
- package/src/components/TabView/index.js +0 -2
- package/src/components/TabView/index.tsx +0 -2
- package/src/mappings/TabView.js +0 -70
- package/src/mappings/TabView.ts +0 -81
- package/src/mappings/TabViewItem.js +0 -30
- package/src/mappings/TabViewItem.ts +0 -38
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
-
interface TabViewItemProps {
|
|
4
|
-
title: string;
|
|
5
|
-
icon?: string;
|
|
6
|
-
accessibilityLabel?: string;
|
|
7
|
-
style?: StyleProp<ViewStyle>;
|
|
8
|
-
}
|
|
9
|
-
declare const TabViewItem: React.FC<React.PropsWithChildren<TabViewItemProps>>;
|
|
10
|
-
export default TabViewItem;
|
|
11
|
-
//# sourceMappingURL=TabViewItem.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabViewItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabViewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAC;AAGtE,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAKpE,CAAC;AAQF,eAAe,WAAW,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TabView.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoErB,CAAC"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
export declare const SEED_DATA: {
|
|
2
|
-
name: string;
|
|
3
|
-
tag: string;
|
|
4
|
-
description: string;
|
|
5
|
-
category: string;
|
|
6
|
-
stylesPanelSections: string[];
|
|
7
|
-
layout: {
|
|
8
|
-
flex: number;
|
|
9
|
-
};
|
|
10
|
-
props: {
|
|
11
|
-
title: any;
|
|
12
|
-
icon: {
|
|
13
|
-
label: string;
|
|
14
|
-
description: string;
|
|
15
|
-
formType: string;
|
|
16
|
-
propType: string;
|
|
17
|
-
defaultValue: string;
|
|
18
|
-
required: boolean;
|
|
19
|
-
editable: boolean;
|
|
20
|
-
group: string;
|
|
21
|
-
};
|
|
22
|
-
accessibilityLabel: any;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
//# sourceMappingURL=TabViewItem.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabViewItem.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TabViewItem.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CA6BrB,CAAC"}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { TabView, TabBar, SceneMap, } from "react-native-tab-view";
|
|
3
|
-
import TabViewItem from "./TabViewItem";
|
|
4
|
-
import { withTheme } from "../../theming";
|
|
5
|
-
const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, style, theme, children, }) => {
|
|
6
|
-
const [index, setIndex] = React.useState(0);
|
|
7
|
-
const [routes, setRoutes] = React.useState([]);
|
|
8
|
-
const [tabScenes, setTabScenes] = React.useState({});
|
|
9
|
-
//Populate routes and scenes based on children
|
|
10
|
-
React.useEffect(() => {
|
|
11
|
-
const newRoutes = [];
|
|
12
|
-
const scenes = {};
|
|
13
|
-
React.Children.toArray(children)
|
|
14
|
-
.filter((child) => React.isValidElement(child) && child.type === TabViewItem)
|
|
15
|
-
.forEach((item, idx) => {
|
|
16
|
-
const child = item;
|
|
17
|
-
newRoutes.push({
|
|
18
|
-
key: idx.toString(),
|
|
19
|
-
title: child.props.title,
|
|
20
|
-
icon: child.props.icon,
|
|
21
|
-
accessibilityLabel: child.props.accessibilityLabel,
|
|
22
|
-
});
|
|
23
|
-
scenes[idx] = () => child;
|
|
24
|
-
});
|
|
25
|
-
setRoutes(newRoutes);
|
|
26
|
-
setTabScenes(scenes);
|
|
27
|
-
}, [children]);
|
|
28
|
-
const indexChangeHandler = (i) => {
|
|
29
|
-
setIndex(i);
|
|
30
|
-
onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
|
|
31
|
-
if (i === routes.length) {
|
|
32
|
-
onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
const renderTabBar = (props) => {
|
|
36
|
-
return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || theme.colors.divider, pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
|
|
37
|
-
backgroundColor: indicatorColor || theme.colors.primary,
|
|
38
|
-
}, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: [
|
|
39
|
-
{ backgroundColor: tabsBackgroundColor || theme.colors.background },
|
|
40
|
-
style,
|
|
41
|
-
] }));
|
|
42
|
-
};
|
|
43
|
-
return (React.createElement(TabView, { navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
|
|
44
|
-
};
|
|
45
|
-
export default withTheme(TabViewComponent);
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
-
import {
|
|
4
|
-
TabView,
|
|
5
|
-
TabBar,
|
|
6
|
-
SceneMap,
|
|
7
|
-
SceneRendererProps,
|
|
8
|
-
NavigationState,
|
|
9
|
-
Route,
|
|
10
|
-
} from "react-native-tab-view";
|
|
11
|
-
|
|
12
|
-
import TabViewItem from "./TabViewItem";
|
|
13
|
-
import type { IconSlot } from "../../interfaces/Icon";
|
|
14
|
-
import { withTheme } from "../../theming";
|
|
15
|
-
import type { Theme } from "../../styles/DefaultTheme";
|
|
16
|
-
|
|
17
|
-
type TabBarProps = SceneRendererProps & {
|
|
18
|
-
navigationState: NavigationState<any>;
|
|
19
|
-
};
|
|
20
|
-
type TabBarPosition = "top" | "bottom";
|
|
21
|
-
type KeyboardDismissMode = "none" | "auto" | "on-drag";
|
|
22
|
-
|
|
23
|
-
type TabViewProps = {
|
|
24
|
-
onIndexChanged?: (index: number) => void;
|
|
25
|
-
onEndReached?: () => void;
|
|
26
|
-
tabBarPosition?: TabBarPosition;
|
|
27
|
-
keyboardDismissMode?: KeyboardDismissMode;
|
|
28
|
-
swipeEnabled?: boolean;
|
|
29
|
-
scrollEnabled?: boolean;
|
|
30
|
-
activeColor?: string;
|
|
31
|
-
inactiveColor?: string;
|
|
32
|
-
pressColor?: string;
|
|
33
|
-
indicatorColor?: string;
|
|
34
|
-
tabsBackgroundColor?: string;
|
|
35
|
-
style?: StyleProp<ViewStyle>;
|
|
36
|
-
theme: Theme;
|
|
37
|
-
} & IconSlot;
|
|
38
|
-
|
|
39
|
-
const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
|
|
40
|
-
Icon,
|
|
41
|
-
onIndexChanged,
|
|
42
|
-
onEndReached,
|
|
43
|
-
tabBarPosition,
|
|
44
|
-
keyboardDismissMode,
|
|
45
|
-
swipeEnabled,
|
|
46
|
-
scrollEnabled,
|
|
47
|
-
activeColor,
|
|
48
|
-
inactiveColor,
|
|
49
|
-
pressColor,
|
|
50
|
-
indicatorColor,
|
|
51
|
-
tabsBackgroundColor,
|
|
52
|
-
style,
|
|
53
|
-
theme,
|
|
54
|
-
children,
|
|
55
|
-
}) => {
|
|
56
|
-
const [index, setIndex] = React.useState(0);
|
|
57
|
-
const [routes, setRoutes] = React.useState<Route[]>([]);
|
|
58
|
-
const [tabScenes, setTabScenes] = React.useState({});
|
|
59
|
-
|
|
60
|
-
//Populate routes and scenes based on children
|
|
61
|
-
React.useEffect(() => {
|
|
62
|
-
const newRoutes: Route[] = [];
|
|
63
|
-
const scenes: any = {};
|
|
64
|
-
|
|
65
|
-
React.Children.toArray(children)
|
|
66
|
-
.filter(
|
|
67
|
-
(child) => React.isValidElement(child) && child.type === TabViewItem
|
|
68
|
-
)
|
|
69
|
-
.forEach((item: any, idx) => {
|
|
70
|
-
const child = item as React.ReactElement;
|
|
71
|
-
newRoutes.push({
|
|
72
|
-
key: idx.toString(),
|
|
73
|
-
title: child.props.title,
|
|
74
|
-
icon: child.props.icon,
|
|
75
|
-
accessibilityLabel: child.props.accessibilityLabel,
|
|
76
|
-
});
|
|
77
|
-
scenes[idx] = () => child;
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
setRoutes(newRoutes);
|
|
81
|
-
setTabScenes(scenes);
|
|
82
|
-
}, [children]);
|
|
83
|
-
|
|
84
|
-
const indexChangeHandler = (i: number) => {
|
|
85
|
-
setIndex(i);
|
|
86
|
-
onIndexChanged?.(i);
|
|
87
|
-
if (i === routes.length) {
|
|
88
|
-
onEndReached?.();
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
const renderTabBar: React.FC<TabBarProps> = (props) => {
|
|
93
|
-
return (
|
|
94
|
-
<TabBar
|
|
95
|
-
{...props}
|
|
96
|
-
activeColor={activeColor || theme.colors.primary}
|
|
97
|
-
inactiveColor={inactiveColor || theme.colors.divider}
|
|
98
|
-
pressColor={pressColor || theme.colors.primary}
|
|
99
|
-
scrollEnabled={scrollEnabled}
|
|
100
|
-
indicatorStyle={{
|
|
101
|
-
backgroundColor: indicatorColor || theme.colors.primary,
|
|
102
|
-
}}
|
|
103
|
-
renderIcon={({ route, color }) =>
|
|
104
|
-
route?.icon ? (
|
|
105
|
-
<Icon name={route.icon} color={color} size={36} />
|
|
106
|
-
) : null
|
|
107
|
-
}
|
|
108
|
-
style={[
|
|
109
|
-
{ backgroundColor: tabsBackgroundColor || theme.colors.background },
|
|
110
|
-
style,
|
|
111
|
-
]}
|
|
112
|
-
/>
|
|
113
|
-
);
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
return (
|
|
117
|
-
<TabView
|
|
118
|
-
navigationState={{ index, routes }}
|
|
119
|
-
renderScene={SceneMap(tabScenes)}
|
|
120
|
-
renderTabBar={renderTabBar}
|
|
121
|
-
onIndexChange={indexChangeHandler}
|
|
122
|
-
tabBarPosition={tabBarPosition}
|
|
123
|
-
keyboardDismissMode={keyboardDismissMode}
|
|
124
|
-
swipeEnabled={swipeEnabled}
|
|
125
|
-
/>
|
|
126
|
-
);
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
export default withTheme(TabViewComponent);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StyleSheet, View } from "react-native";
|
|
3
|
-
const TabViewItem = ({ style, children, }) => {
|
|
4
|
-
return React.createElement(View, { style: [styles.parentContainer, style] }, children);
|
|
5
|
-
};
|
|
6
|
-
const styles = StyleSheet.create({
|
|
7
|
-
parentContainer: {
|
|
8
|
-
flex: 1,
|
|
9
|
-
},
|
|
10
|
-
});
|
|
11
|
-
export default TabViewItem;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
|
|
3
|
-
|
|
4
|
-
//Props used by parent (TabView) to create tabs
|
|
5
|
-
interface TabViewItemProps {
|
|
6
|
-
title: string;
|
|
7
|
-
icon?: string;
|
|
8
|
-
accessibilityLabel?: string;
|
|
9
|
-
style?: StyleProp<ViewStyle>;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const TabViewItem: React.FC<React.PropsWithChildren<TabViewItemProps>> = ({
|
|
13
|
-
style,
|
|
14
|
-
children,
|
|
15
|
-
}) => {
|
|
16
|
-
return <View style={[styles.parentContainer, style]}>{children}</View>;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
const styles = StyleSheet.create({
|
|
20
|
-
parentContainer: {
|
|
21
|
-
flex: 1,
|
|
22
|
-
},
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
export default TabViewItem;
|
package/src/mappings/TabView.js
DELETED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createTextEnumProp, createColorProp, BLOCK_STYLES_SECTIONS, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS, } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "Tab View",
|
|
4
|
-
tag: "TabView",
|
|
5
|
-
description: "Tab view container",
|
|
6
|
-
category: COMPONENT_TYPES.swiper,
|
|
7
|
-
stylesPanelSections: [
|
|
8
|
-
...BLOCK_STYLES_SECTIONS,
|
|
9
|
-
StylesPanelSections.Background,
|
|
10
|
-
],
|
|
11
|
-
triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
|
|
12
|
-
props: {
|
|
13
|
-
onIndexChanged: createActionProp({
|
|
14
|
-
label: "On index changed",
|
|
15
|
-
description: "Action to execute when swipe to new index",
|
|
16
|
-
}),
|
|
17
|
-
onEndReached: createActionProp({
|
|
18
|
-
label: "On end reached",
|
|
19
|
-
description: "Action to execute when end of swiping reached",
|
|
20
|
-
}),
|
|
21
|
-
tabBarPosition: createTextEnumProp({
|
|
22
|
-
label: "Tab Bar Position",
|
|
23
|
-
description: "Position of tab bar",
|
|
24
|
-
options: ["top", "bottom"],
|
|
25
|
-
defaultValue: "top",
|
|
26
|
-
}),
|
|
27
|
-
keyboardDismissMode: createTextEnumProp({
|
|
28
|
-
label: "Keyboard Dismiss Mode",
|
|
29
|
-
description: "Keyboard Dismiss Mode",
|
|
30
|
-
options: ["auto", "on-drag", "none"],
|
|
31
|
-
defaultValue: "auto",
|
|
32
|
-
}),
|
|
33
|
-
swipeEnabled: createStaticBoolProp({
|
|
34
|
-
label: "Swipe Enabled",
|
|
35
|
-
description: "Whether swiping is enabled or not",
|
|
36
|
-
defaultValue: true,
|
|
37
|
-
}),
|
|
38
|
-
scrollEnabled: createStaticBoolProp({
|
|
39
|
-
label: "Scroll Enabled",
|
|
40
|
-
description: "Whether scrolling of tabs is enabled or not",
|
|
41
|
-
defaultValue: false,
|
|
42
|
-
}),
|
|
43
|
-
activeColor: createColorProp({
|
|
44
|
-
label: "Active Color",
|
|
45
|
-
description: "Color of icon and text of active tab",
|
|
46
|
-
defaultValue: "primary",
|
|
47
|
-
}),
|
|
48
|
-
inactiveColor: createColorProp({
|
|
49
|
-
label: "Inactive Color",
|
|
50
|
-
description: "Color of icon and text of inactive tab(s)",
|
|
51
|
-
defaultValue: null,
|
|
52
|
-
}),
|
|
53
|
-
pressColor: createColorProp({
|
|
54
|
-
label: "Press Color",
|
|
55
|
-
description: "Color of ripple when pressed",
|
|
56
|
-
defaultValue: "primary",
|
|
57
|
-
group: GROUPS.android,
|
|
58
|
-
}),
|
|
59
|
-
indicatorColor: createColorProp({
|
|
60
|
-
label: "Indicator Color",
|
|
61
|
-
description: "Color of indicator",
|
|
62
|
-
defaultValue: "primary",
|
|
63
|
-
}),
|
|
64
|
-
tabsBackgroundColor: createColorProp({
|
|
65
|
-
label: "Tabs Background Color",
|
|
66
|
-
description: "Background color of tabs container",
|
|
67
|
-
defaultValue: "background",
|
|
68
|
-
}),
|
|
69
|
-
},
|
|
70
|
-
};
|
package/src/mappings/TabView.ts
DELETED
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
COMPONENT_TYPES,
|
|
3
|
-
createTextEnumProp,
|
|
4
|
-
createColorProp,
|
|
5
|
-
BLOCK_STYLES_SECTIONS,
|
|
6
|
-
StylesPanelSections,
|
|
7
|
-
Triggers,
|
|
8
|
-
createActionProp,
|
|
9
|
-
createStaticBoolProp,
|
|
10
|
-
GROUPS,
|
|
11
|
-
} from "@draftbit/types";
|
|
12
|
-
|
|
13
|
-
export const SEED_DATA = {
|
|
14
|
-
name: "Tab View",
|
|
15
|
-
tag: "TabView",
|
|
16
|
-
description: "Tab view container",
|
|
17
|
-
category: COMPONENT_TYPES.swiper,
|
|
18
|
-
stylesPanelSections: [
|
|
19
|
-
...BLOCK_STYLES_SECTIONS,
|
|
20
|
-
StylesPanelSections.Background,
|
|
21
|
-
],
|
|
22
|
-
triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
|
|
23
|
-
props: {
|
|
24
|
-
onIndexChanged: createActionProp({
|
|
25
|
-
label: "On index changed",
|
|
26
|
-
description: "Action to execute when swipe to new index",
|
|
27
|
-
}),
|
|
28
|
-
onEndReached: createActionProp({
|
|
29
|
-
label: "On end reached",
|
|
30
|
-
description: "Action to execute when end of swiping reached",
|
|
31
|
-
}),
|
|
32
|
-
tabBarPosition: createTextEnumProp({
|
|
33
|
-
label: "Tab Bar Position",
|
|
34
|
-
description: "Position of tab bar",
|
|
35
|
-
options: ["top", "bottom"],
|
|
36
|
-
defaultValue: "top",
|
|
37
|
-
}),
|
|
38
|
-
keyboardDismissMode: createTextEnumProp({
|
|
39
|
-
label: "Keyboard Dismiss Mode",
|
|
40
|
-
description: "Keyboard Dismiss Mode",
|
|
41
|
-
options: ["auto", "on-drag", "none"],
|
|
42
|
-
defaultValue: "auto",
|
|
43
|
-
}),
|
|
44
|
-
swipeEnabled: createStaticBoolProp({
|
|
45
|
-
label: "Swipe Enabled",
|
|
46
|
-
description: "Whether swiping is enabled or not",
|
|
47
|
-
defaultValue: true,
|
|
48
|
-
}),
|
|
49
|
-
scrollEnabled: createStaticBoolProp({
|
|
50
|
-
label: "Scroll Enabled",
|
|
51
|
-
description: "Whether scrolling of tabs is enabled or not",
|
|
52
|
-
defaultValue: false,
|
|
53
|
-
}),
|
|
54
|
-
activeColor: createColorProp({
|
|
55
|
-
label: "Active Color",
|
|
56
|
-
description: "Color of icon and text of active tab",
|
|
57
|
-
defaultValue: "primary",
|
|
58
|
-
}),
|
|
59
|
-
inactiveColor: createColorProp({
|
|
60
|
-
label: "Inactive Color",
|
|
61
|
-
description: "Color of icon and text of inactive tab(s)",
|
|
62
|
-
defaultValue: null,
|
|
63
|
-
}),
|
|
64
|
-
pressColor: createColorProp({
|
|
65
|
-
label: "Press Color",
|
|
66
|
-
description: "Color of ripple when pressed",
|
|
67
|
-
defaultValue: "primary",
|
|
68
|
-
group: GROUPS.android,
|
|
69
|
-
}),
|
|
70
|
-
indicatorColor: createColorProp({
|
|
71
|
-
label: "Indicator Color",
|
|
72
|
-
description: "Color of indicator",
|
|
73
|
-
defaultValue: "primary",
|
|
74
|
-
}),
|
|
75
|
-
tabsBackgroundColor: createColorProp({
|
|
76
|
-
label: "Tabs Background Color",
|
|
77
|
-
description: "Background color of tabs container",
|
|
78
|
-
defaultValue: "background",
|
|
79
|
-
}),
|
|
80
|
-
},
|
|
81
|
-
};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createTextProp, createIconProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "Tab View Item",
|
|
4
|
-
tag: "TabViewItem",
|
|
5
|
-
description: "Single Tab View item to be used in TabView. Each item represents a single tab and its content",
|
|
6
|
-
category: COMPONENT_TYPES.swiper,
|
|
7
|
-
stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
8
|
-
layout: {
|
|
9
|
-
flex: 1,
|
|
10
|
-
},
|
|
11
|
-
props: {
|
|
12
|
-
title: createTextProp({
|
|
13
|
-
label: "Title",
|
|
14
|
-
description: "Title of tab item",
|
|
15
|
-
defaultValue: "Title",
|
|
16
|
-
required: true,
|
|
17
|
-
group: GROUPS.basic,
|
|
18
|
-
}),
|
|
19
|
-
icon: createIconProp({
|
|
20
|
-
defaultValue: null,
|
|
21
|
-
required: false,
|
|
22
|
-
}),
|
|
23
|
-
accessibilityLabel: createTextProp({
|
|
24
|
-
label: "Accessibility Label",
|
|
25
|
-
description: "Accessibility Label",
|
|
26
|
-
defaultValue: null,
|
|
27
|
-
group: GROUPS.accessibility,
|
|
28
|
-
}),
|
|
29
|
-
},
|
|
30
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
COMPONENT_TYPES,
|
|
3
|
-
createTextProp,
|
|
4
|
-
createIconProp,
|
|
5
|
-
CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
6
|
-
GROUPS,
|
|
7
|
-
} from "@draftbit/types";
|
|
8
|
-
|
|
9
|
-
export const SEED_DATA = {
|
|
10
|
-
name: "Tab View Item",
|
|
11
|
-
tag: "TabViewItem",
|
|
12
|
-
description:
|
|
13
|
-
"Single Tab View item to be used in TabView. Each item represents a single tab and its content",
|
|
14
|
-
category: COMPONENT_TYPES.swiper,
|
|
15
|
-
stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
16
|
-
layout: {
|
|
17
|
-
flex: 1,
|
|
18
|
-
},
|
|
19
|
-
props: {
|
|
20
|
-
title: createTextProp({
|
|
21
|
-
label: "Title",
|
|
22
|
-
description: "Title of tab item",
|
|
23
|
-
defaultValue: "Title",
|
|
24
|
-
required: true,
|
|
25
|
-
group: GROUPS.basic,
|
|
26
|
-
}),
|
|
27
|
-
icon: createIconProp({
|
|
28
|
-
defaultValue: null,
|
|
29
|
-
required: false,
|
|
30
|
-
}),
|
|
31
|
-
accessibilityLabel: createTextProp({
|
|
32
|
-
label: "Accessibility Label",
|
|
33
|
-
description: "Accessibility Label",
|
|
34
|
-
defaultValue: null,
|
|
35
|
-
group: GROUPS.accessibility,
|
|
36
|
-
}),
|
|
37
|
-
},
|
|
38
|
-
};
|