@draftbit/core 46.8.1-e9e820.2 → 46.8.1-fdeb41.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/Accordion/AccordionItem.js +4 -23
- package/lib/commonjs/components/Layout.js +40 -19
- package/lib/commonjs/components/ScreenContainer.js +2 -1
- package/lib/commonjs/index.js +0 -13
- package/lib/module/components/Accordion/AccordionItem.js +4 -25
- package/lib/module/components/ScreenContainer.js +2 -1
- package/lib/module/constants.js +0 -1
- package/lib/module/index.js +0 -1
- package/lib/typescript/src/components/ScreenContainer.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +0 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +3 -5
- package/src/components/ScreenContainer.js +2 -1
- package/src/components/ScreenContainer.tsx +2 -1
- package/src/index.js +0 -1
- package/src/index.tsx +0 -2
- 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 -73
- package/lib/commonjs/mappings/TabViewItem.js +0 -35
- 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 -66
- package/lib/module/mappings/TabViewItem.js +0 -28
- 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 +0 -123
- 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 -69
- package/src/mappings/TabView.ts +0 -79
- package/src/mappings/TabViewItem.js +0 -28
- package/src/mappings/TabViewItem.ts +0 -35
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
import { TabView, TabBar, SceneMap } from "react-native-tab-view";
|
|
4
|
-
import TabViewItem from "./TabViewItem";
|
|
5
|
-
import { withTheme } from "../../theming";
|
|
6
|
-
const TabViewComponent = _ref => {
|
|
7
|
-
let {
|
|
8
|
-
Icon,
|
|
9
|
-
onIndexChanged,
|
|
10
|
-
onEndReached,
|
|
11
|
-
tabBarPosition,
|
|
12
|
-
keyboardDismissMode,
|
|
13
|
-
swipeEnabled,
|
|
14
|
-
scrollEnabled,
|
|
15
|
-
activeColor,
|
|
16
|
-
inactiveColor,
|
|
17
|
-
pressColor,
|
|
18
|
-
indicatorColor,
|
|
19
|
-
tabsBackgroundColor,
|
|
20
|
-
style,
|
|
21
|
-
theme,
|
|
22
|
-
children
|
|
23
|
-
} = _ref;
|
|
24
|
-
const [index, setIndex] = React.useState(0);
|
|
25
|
-
const [routes, setRoutes] = React.useState([]);
|
|
26
|
-
const [tabScenes, setTabScenes] = React.useState({});
|
|
27
|
-
|
|
28
|
-
//Populate routes and scenes based on children
|
|
29
|
-
React.useEffect(() => {
|
|
30
|
-
const newRoutes = [];
|
|
31
|
-
const scenes = {};
|
|
32
|
-
React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === TabViewItem).forEach((item, idx) => {
|
|
33
|
-
const child = item;
|
|
34
|
-
newRoutes.push({
|
|
35
|
-
key: idx.toString(),
|
|
36
|
-
title: child.props.title,
|
|
37
|
-
icon: child.props.icon,
|
|
38
|
-
accessibilityLabel: child.props.accessibilityLabel
|
|
39
|
-
});
|
|
40
|
-
scenes[idx] = () => child;
|
|
41
|
-
});
|
|
42
|
-
setRoutes(newRoutes);
|
|
43
|
-
setTabScenes(scenes);
|
|
44
|
-
}, [children]);
|
|
45
|
-
const indexChangeHandler = i => {
|
|
46
|
-
setIndex(i);
|
|
47
|
-
onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
|
|
48
|
-
if (i === routes.length) {
|
|
49
|
-
onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
const renderTabBar = props => {
|
|
53
|
-
return /*#__PURE__*/React.createElement(TabBar, _extends({}, props, {
|
|
54
|
-
activeColor: activeColor || theme.colors.primary,
|
|
55
|
-
inactiveColor: inactiveColor || theme.colors.divider,
|
|
56
|
-
pressColor: pressColor || theme.colors.primary,
|
|
57
|
-
scrollEnabled: scrollEnabled,
|
|
58
|
-
indicatorStyle: {
|
|
59
|
-
backgroundColor: indicatorColor || theme.colors.primary
|
|
60
|
-
},
|
|
61
|
-
renderIcon: _ref2 => {
|
|
62
|
-
let {
|
|
63
|
-
route,
|
|
64
|
-
color
|
|
65
|
-
} = _ref2;
|
|
66
|
-
return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
67
|
-
name: route.icon,
|
|
68
|
-
color: color,
|
|
69
|
-
size: 36
|
|
70
|
-
}) : null;
|
|
71
|
-
},
|
|
72
|
-
style: [{
|
|
73
|
-
backgroundColor: tabsBackgroundColor || theme.colors.background
|
|
74
|
-
}, style]
|
|
75
|
-
}));
|
|
76
|
-
};
|
|
77
|
-
return /*#__PURE__*/React.createElement(TabView, {
|
|
78
|
-
navigationState: {
|
|
79
|
-
index,
|
|
80
|
-
routes
|
|
81
|
-
},
|
|
82
|
-
renderScene: SceneMap(tabScenes),
|
|
83
|
-
renderTabBar: renderTabBar,
|
|
84
|
-
onIndexChange: indexChangeHandler,
|
|
85
|
-
tabBarPosition: tabBarPosition,
|
|
86
|
-
keyboardDismissMode: keyboardDismissMode,
|
|
87
|
-
swipeEnabled: swipeEnabled
|
|
88
|
-
});
|
|
89
|
-
};
|
|
90
|
-
export default withTheme(TabViewComponent);
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { StyleSheet, View } from "react-native";
|
|
3
|
-
|
|
4
|
-
//Props used by parent (TabView) to create tabs
|
|
5
|
-
|
|
6
|
-
const TabViewItem = _ref => {
|
|
7
|
-
let {
|
|
8
|
-
style,
|
|
9
|
-
children
|
|
10
|
-
} = _ref;
|
|
11
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
12
|
-
style: [styles.parentContainer, style]
|
|
13
|
-
}, children);
|
|
14
|
-
};
|
|
15
|
-
const styles = StyleSheet.create({
|
|
16
|
-
parentContainer: {
|
|
17
|
-
flex: 1
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
export default TabViewItem;
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createTextEnumProp, createColorProp, BLOCK_STYLES_SECTIONS, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp } 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: [...BLOCK_STYLES_SECTIONS, StylesPanelSections.Background],
|
|
8
|
-
triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
|
|
9
|
-
props: {
|
|
10
|
-
onIndexChanged: createActionProp({
|
|
11
|
-
label: "On index changed",
|
|
12
|
-
description: "Action to execute when swipe to new index"
|
|
13
|
-
}),
|
|
14
|
-
onEndReached: createActionProp({
|
|
15
|
-
label: "On end reached",
|
|
16
|
-
description: "Action to execute when end of swiping reached"
|
|
17
|
-
}),
|
|
18
|
-
tabBarPosition: createTextEnumProp({
|
|
19
|
-
label: "Tab Bar Position",
|
|
20
|
-
description: "Position of tab bar",
|
|
21
|
-
options: ["top", "bottom"],
|
|
22
|
-
defaultValue: "top"
|
|
23
|
-
}),
|
|
24
|
-
keyboardDismissMode: createTextEnumProp({
|
|
25
|
-
label: "Keyboard Dismiss Mode",
|
|
26
|
-
description: "Keyboard Dismiss Mode",
|
|
27
|
-
options: ["auto", "on-drag", "none"],
|
|
28
|
-
defaultValue: "auto"
|
|
29
|
-
}),
|
|
30
|
-
swipeEnabled: createStaticBoolProp({
|
|
31
|
-
label: "Swipe Enabled",
|
|
32
|
-
description: "Whether swiping is enabled or not",
|
|
33
|
-
defaultValue: true
|
|
34
|
-
}),
|
|
35
|
-
scrollEnabled: createStaticBoolProp({
|
|
36
|
-
label: "Scroll Enabled",
|
|
37
|
-
description: "Whether scrolling of tabs is enabled or not",
|
|
38
|
-
defaultValue: true
|
|
39
|
-
}),
|
|
40
|
-
activeColor: createColorProp({
|
|
41
|
-
label: "Active Color",
|
|
42
|
-
description: "Color of icon and text of active tab",
|
|
43
|
-
defaultValue: "primary"
|
|
44
|
-
}),
|
|
45
|
-
inactiveColor: createColorProp({
|
|
46
|
-
label: "Inactive Color",
|
|
47
|
-
description: "Color of icon and text of inactive tab(s)",
|
|
48
|
-
defaultValue: null
|
|
49
|
-
}),
|
|
50
|
-
pressColor: createColorProp({
|
|
51
|
-
label: "Press Color",
|
|
52
|
-
description: "Color of ripple when pressed (android only)",
|
|
53
|
-
defaultValue: "primary"
|
|
54
|
-
}),
|
|
55
|
-
indicatorColor: createColorProp({
|
|
56
|
-
label: "Indicator Color",
|
|
57
|
-
description: "Color of indicator",
|
|
58
|
-
defaultValue: "primary"
|
|
59
|
-
}),
|
|
60
|
-
tabsBackgroundColor: createColorProp({
|
|
61
|
-
label: "Tabs Background Color",
|
|
62
|
-
description: "Background color of tabs container",
|
|
63
|
-
defaultValue: "background"
|
|
64
|
-
})
|
|
65
|
-
}
|
|
66
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createTextProp, createIconProp, CONTAINER_COMPONENT_STYLES_SECTIONS } 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: null,
|
|
16
|
-
required: true
|
|
17
|
-
}),
|
|
18
|
-
icon: createIconProp({
|
|
19
|
-
defaultValue: null,
|
|
20
|
-
required: false
|
|
21
|
-
}),
|
|
22
|
-
accessibilityLabel: createTextProp({
|
|
23
|
-
label: "Accessibility Label",
|
|
24
|
-
description: "Accessibility Label",
|
|
25
|
-
defaultValue: null
|
|
26
|
-
})
|
|
27
|
-
}
|
|
28
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { StyleProp, ViewStyle } from "react-native";
|
|
3
|
-
import type { IconSlot } from "../../interfaces/Icon";
|
|
4
|
-
import type { Theme } from "../../styles/DefaultTheme";
|
|
5
|
-
declare type TabBarPosition = "top" | "bottom";
|
|
6
|
-
declare type KeyboardDismissMode = "none" | "auto" | "on-drag";
|
|
7
|
-
declare type TabViewProps = {
|
|
8
|
-
onIndexChanged?: (index: number) => void;
|
|
9
|
-
onEndReached?: () => void;
|
|
10
|
-
tabBarPosition?: TabBarPosition;
|
|
11
|
-
keyboardDismissMode?: KeyboardDismissMode;
|
|
12
|
-
swipeEnabled?: boolean;
|
|
13
|
-
scrollEnabled?: boolean;
|
|
14
|
-
activeColor?: string;
|
|
15
|
-
inactiveColor?: string;
|
|
16
|
-
pressColor?: string;
|
|
17
|
-
indicatorColor?: string;
|
|
18
|
-
tabsBackgroundColor?: string;
|
|
19
|
-
style?: StyleProp<ViewStyle>;
|
|
20
|
-
theme: Theme;
|
|
21
|
-
} & IconSlot;
|
|
22
|
-
declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<TabViewProps>, "theme"> & {
|
|
23
|
-
theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
|
|
24
|
-
}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<TabViewProps>> & React.FC<React.PropsWithChildren<TabViewProps>>, {}>;
|
|
25
|
-
export default _default;
|
|
26
|
-
//# sourceMappingURL=TabView.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAKvD,aAAK,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AACvC,aAAK,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD,aAAK,YAAY,GAAG;IAClB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AA4Fb,wBAA2C"}
|
|
@@ -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,123 +0,0 @@
|
|
|
1
|
-
export declare const SEED_DATA: {
|
|
2
|
-
name: string;
|
|
3
|
-
tag: string;
|
|
4
|
-
description: string;
|
|
5
|
-
category: string;
|
|
6
|
-
stylesPanelSections: string[];
|
|
7
|
-
triggers: string[];
|
|
8
|
-
props: {
|
|
9
|
-
onIndexChanged: {
|
|
10
|
-
label: string;
|
|
11
|
-
description: string;
|
|
12
|
-
editable: boolean;
|
|
13
|
-
required: boolean;
|
|
14
|
-
formType: string;
|
|
15
|
-
propType: string;
|
|
16
|
-
defaultValue: null;
|
|
17
|
-
group: string;
|
|
18
|
-
};
|
|
19
|
-
onEndReached: {
|
|
20
|
-
label: string;
|
|
21
|
-
description: string;
|
|
22
|
-
editable: boolean;
|
|
23
|
-
required: boolean;
|
|
24
|
-
formType: string;
|
|
25
|
-
propType: string;
|
|
26
|
-
defaultValue: null;
|
|
27
|
-
group: string;
|
|
28
|
-
};
|
|
29
|
-
tabBarPosition: {
|
|
30
|
-
group: string;
|
|
31
|
-
label: string;
|
|
32
|
-
description: string;
|
|
33
|
-
editable: boolean;
|
|
34
|
-
required: boolean;
|
|
35
|
-
formType: string;
|
|
36
|
-
propType: string;
|
|
37
|
-
defaultValue: null;
|
|
38
|
-
options: never[];
|
|
39
|
-
};
|
|
40
|
-
keyboardDismissMode: {
|
|
41
|
-
group: string;
|
|
42
|
-
label: string;
|
|
43
|
-
description: string;
|
|
44
|
-
editable: boolean;
|
|
45
|
-
required: boolean;
|
|
46
|
-
formType: string;
|
|
47
|
-
propType: string;
|
|
48
|
-
defaultValue: null;
|
|
49
|
-
options: never[];
|
|
50
|
-
};
|
|
51
|
-
swipeEnabled: {
|
|
52
|
-
label: string;
|
|
53
|
-
description: string;
|
|
54
|
-
formType: string;
|
|
55
|
-
propType: string;
|
|
56
|
-
defaultValue: boolean;
|
|
57
|
-
editable: boolean;
|
|
58
|
-
required: boolean;
|
|
59
|
-
group: string;
|
|
60
|
-
};
|
|
61
|
-
scrollEnabled: {
|
|
62
|
-
label: string;
|
|
63
|
-
description: string;
|
|
64
|
-
formType: string;
|
|
65
|
-
propType: string;
|
|
66
|
-
defaultValue: boolean;
|
|
67
|
-
editable: boolean;
|
|
68
|
-
required: boolean;
|
|
69
|
-
group: string;
|
|
70
|
-
};
|
|
71
|
-
activeColor: {
|
|
72
|
-
group: string;
|
|
73
|
-
label: string;
|
|
74
|
-
description: string;
|
|
75
|
-
editable: boolean;
|
|
76
|
-
required: boolean;
|
|
77
|
-
defaultValue: null;
|
|
78
|
-
formType: string;
|
|
79
|
-
propType: string;
|
|
80
|
-
};
|
|
81
|
-
inactiveColor: {
|
|
82
|
-
group: string;
|
|
83
|
-
label: string;
|
|
84
|
-
description: string;
|
|
85
|
-
editable: boolean;
|
|
86
|
-
required: boolean;
|
|
87
|
-
defaultValue: null;
|
|
88
|
-
formType: string;
|
|
89
|
-
propType: string;
|
|
90
|
-
};
|
|
91
|
-
pressColor: {
|
|
92
|
-
group: string;
|
|
93
|
-
label: string;
|
|
94
|
-
description: string;
|
|
95
|
-
editable: boolean;
|
|
96
|
-
required: boolean;
|
|
97
|
-
defaultValue: null;
|
|
98
|
-
formType: string;
|
|
99
|
-
propType: string;
|
|
100
|
-
};
|
|
101
|
-
indicatorColor: {
|
|
102
|
-
group: string;
|
|
103
|
-
label: string;
|
|
104
|
-
description: string;
|
|
105
|
-
editable: boolean;
|
|
106
|
-
required: boolean;
|
|
107
|
-
defaultValue: null;
|
|
108
|
-
formType: string;
|
|
109
|
-
propType: string;
|
|
110
|
-
};
|
|
111
|
-
tabsBackgroundColor: {
|
|
112
|
-
group: string;
|
|
113
|
-
label: string;
|
|
114
|
-
description: string;
|
|
115
|
-
editable: boolean;
|
|
116
|
-
required: boolean;
|
|
117
|
-
defaultValue: null;
|
|
118
|
-
formType: string;
|
|
119
|
-
propType: string;
|
|
120
|
-
};
|
|
121
|
-
};
|
|
122
|
-
};
|
|
123
|
-
//# sourceMappingURL=TabView.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TabView.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmErB,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":"AAOA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CA2BrB,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;
|