@draftbit/core 46.2.4-a3d00e.4 → 46.2.4-b61cba.5
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/Config.js +1 -1
- package/lib/commonjs/components/{SVG.js → Svg.js} +5 -10
- package/lib/commonjs/index.js +7 -21
- package/lib/commonjs/mappings/MapView.js +1 -0
- package/lib/commonjs/mappings/{SVG.js → Svg.js} +1 -0
- package/lib/module/components/Config.js +1 -1
- package/lib/module/components/{SVG.js → Svg.js} +5 -7
- package/lib/module/index.js +1 -2
- package/lib/module/mappings/MapView.js +1 -0
- package/lib/module/mappings/Svg.js +15 -0
- package/lib/typescript/src/components/Svg.d.ts +6 -0
- package/lib/typescript/src/index.d.ts +1 -2
- package/lib/typescript/src/mappings/MapView.d.ts +1 -0
- package/lib/typescript/src/mappings/{SVG.d.ts → Svg.d.ts} +1 -0
- package/package.json +3 -5
- package/src/components/Config.js +1 -1
- package/src/components/Config.ts +1 -1
- package/src/components/{SVG.js → Svg.js} +5 -7
- package/src/components/Svg.tsx +25 -0
- package/src/index.js +1 -2
- package/src/index.tsx +1 -2
- package/src/mappings/MapView.js +1 -0
- package/src/mappings/MapView.ts +1 -0
- package/src/mappings/Svg.js +20 -0
- package/src/mappings/Svg.ts +25 -0
- package/lib/commonjs/components/TabView/TabView.js +0 -102
- package/lib/commonjs/components/TabView/TabViewItem.js +0 -26
- package/lib/commonjs/components/TabView/index.js +0 -23
- package/lib/commonjs/mappings/TabView.js +0 -79
- package/lib/module/components/TabView/TabView.js +0 -87
- package/lib/module/components/TabView/TabViewItem.js +0 -18
- package/lib/module/components/TabView/index.js +0 -2
- package/lib/module/mappings/SVG.js +0 -14
- package/lib/module/mappings/TabView.js +0 -70
- package/lib/typescript/src/components/SVG.d.ts +0 -8
- package/lib/typescript/src/components/TabView/TabView.d.ts +0 -19
- package/lib/typescript/src/components/TabView/TabViewItem.d.ts +0 -10
- package/lib/typescript/src/components/TabView/index.d.ts +0 -2
- package/lib/typescript/src/mappings/TabView.d.ts +0 -111
- package/src/components/SVG.tsx +0 -35
- package/src/components/TabView/TabView.js +0 -34
- package/src/components/TabView/TabView.tsx +0 -97
- package/src/components/TabView/TabViewItem.js +0 -5
- package/src/components/TabView/TabViewItem.tsx +0 -21
- package/src/components/TabView/index.js +0 -2
- package/src/components/TabView/index.ts +0 -2
- package/src/mappings/SVG.js +0 -14
- package/src/mappings/SVG.ts +0 -15
- package/src/mappings/TabView.js +0 -73
- package/src/mappings/TabView.ts +0 -80
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.SEED_DATA = void 0;
|
|
7
|
-
|
|
8
|
-
var _types = require("@draftbit/types");
|
|
9
|
-
|
|
10
|
-
const SEED_DATA = [{
|
|
11
|
-
name: "TabView",
|
|
12
|
-
tag: "TabView",
|
|
13
|
-
category: _types.COMPONENT_TYPES.container,
|
|
14
|
-
layout: {},
|
|
15
|
-
props: {
|
|
16
|
-
tabBarPosition: (0, _types.createTextEnumProp)({
|
|
17
|
-
label: "Tab Bar Position",
|
|
18
|
-
description: "Tab Bar Position",
|
|
19
|
-
options: ["top", "bottom"],
|
|
20
|
-
defaultValue: "top"
|
|
21
|
-
}),
|
|
22
|
-
keyboardDismissMode: (0, _types.createTextEnumProp)({
|
|
23
|
-
label: "Keyboard Dismiss Mode",
|
|
24
|
-
description: "Keyboard Dismiss Mode",
|
|
25
|
-
options: ["auto", "on-drag", "none"],
|
|
26
|
-
defaultValue: "auto"
|
|
27
|
-
}),
|
|
28
|
-
swipeEnabled: (0, _types.createBoolProp)({
|
|
29
|
-
label: "Swipe Enabled",
|
|
30
|
-
description: "Swipe Enabled",
|
|
31
|
-
defaultValue: true
|
|
32
|
-
}),
|
|
33
|
-
scrollEnabled: (0, _types.createBoolProp)({
|
|
34
|
-
label: "Scroll Enabled",
|
|
35
|
-
description: "Scroll Enabled",
|
|
36
|
-
defaultValue: true
|
|
37
|
-
}),
|
|
38
|
-
activeColor: (0, _types.createColorProp)({
|
|
39
|
-
label: "Active Color",
|
|
40
|
-
description: "Active Color",
|
|
41
|
-
defaultValue: "primary"
|
|
42
|
-
}),
|
|
43
|
-
inactiveColor: (0, _types.createColorProp)({
|
|
44
|
-
label: "Inactive Color",
|
|
45
|
-
description: "Inactive Color",
|
|
46
|
-
defaultValue: null
|
|
47
|
-
}),
|
|
48
|
-
pressColor: (0, _types.createColorProp)({
|
|
49
|
-
label: "Press Color",
|
|
50
|
-
description: "Press Color",
|
|
51
|
-
defaultValue: null
|
|
52
|
-
}),
|
|
53
|
-
indicatorColor: (0, _types.createColorProp)({
|
|
54
|
-
label: "Indicator Color",
|
|
55
|
-
description: "Indicator Color",
|
|
56
|
-
defaultValue: null
|
|
57
|
-
})
|
|
58
|
-
}
|
|
59
|
-
}, {
|
|
60
|
-
name: "TabViewItem",
|
|
61
|
-
tag: "TabViewItem",
|
|
62
|
-
category: _types.COMPONENT_TYPES.container,
|
|
63
|
-
layout: {},
|
|
64
|
-
props: {
|
|
65
|
-
title: (0, _types.createTextProp)({
|
|
66
|
-
label: "Title",
|
|
67
|
-
description: "Tab Title"
|
|
68
|
-
}),
|
|
69
|
-
id: (0, _types.createTextProp)({
|
|
70
|
-
label: "Id",
|
|
71
|
-
description: "Tab Id"
|
|
72
|
-
}),
|
|
73
|
-
accessibilityLabel: (0, _types.createTextProp)({
|
|
74
|
-
label: "Accessibility Label",
|
|
75
|
-
description: "Accessibility Label"
|
|
76
|
-
})
|
|
77
|
-
}
|
|
78
|
-
}];
|
|
79
|
-
exports.SEED_DATA = SEED_DATA;
|
|
@@ -1,87 +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
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import { TabView, TabBar, SceneMap } from "react-native-tab-view"; // import { withTheme } from "../../theming";
|
|
5
|
-
|
|
6
|
-
import TabViewItem from "./TabViewItem";
|
|
7
|
-
|
|
8
|
-
const TabViewComponent = _ref => {
|
|
9
|
-
let {
|
|
10
|
-
Icon,
|
|
11
|
-
tabBarPosition,
|
|
12
|
-
keyboardDismissMode,
|
|
13
|
-
swipeEnabled,
|
|
14
|
-
scrollEnabled,
|
|
15
|
-
activeColor,
|
|
16
|
-
inactiveColor,
|
|
17
|
-
pressColor,
|
|
18
|
-
indicatorColor,
|
|
19
|
-
style,
|
|
20
|
-
children
|
|
21
|
-
} = _ref;
|
|
22
|
-
const [index, setIndex] = React.useState(0);
|
|
23
|
-
const [routes, setRoutes] = React.useState([]);
|
|
24
|
-
const [tabScenes, setTabScenes] = React.useState({});
|
|
25
|
-
React.useEffect(() => {
|
|
26
|
-
const newRoutes = [];
|
|
27
|
-
const scenes = {};
|
|
28
|
-
React.Children.toArray(children).filter(child => child.type === TabViewItem).forEach(child => {
|
|
29
|
-
var _child$props;
|
|
30
|
-
|
|
31
|
-
if (child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.id) {
|
|
32
|
-
var _child$props2, _child$props3;
|
|
33
|
-
|
|
34
|
-
newRoutes.push({
|
|
35
|
-
key: child === null || child === void 0 ? void 0 : (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.id,
|
|
36
|
-
...(child === null || child === void 0 ? void 0 : child.props)
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
scenes[child === null || child === void 0 ? void 0 : (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.id] = () => child;
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
setRoutes(newRoutes);
|
|
43
|
-
setTabScenes(scenes);
|
|
44
|
-
}, [children]);
|
|
45
|
-
|
|
46
|
-
const indexChangeHandler = i => setIndex(i);
|
|
47
|
-
|
|
48
|
-
const renderTabBar = props => {
|
|
49
|
-
console.log(props);
|
|
50
|
-
return /*#__PURE__*/React.createElement(TabBar, _extends({}, props, {
|
|
51
|
-
activeColor: activeColor,
|
|
52
|
-
inactiveColor: inactiveColor,
|
|
53
|
-
pressColor: pressColor,
|
|
54
|
-
scrollEnabled: scrollEnabled,
|
|
55
|
-
indicatorStyle: {
|
|
56
|
-
backgroundColor: indicatorColor
|
|
57
|
-
},
|
|
58
|
-
renderIcon: _ref2 => {
|
|
59
|
-
let {
|
|
60
|
-
route,
|
|
61
|
-
color
|
|
62
|
-
} = _ref2;
|
|
63
|
-
return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
64
|
-
name: route.icon,
|
|
65
|
-
color: color,
|
|
66
|
-
size: 36
|
|
67
|
-
}) : null;
|
|
68
|
-
},
|
|
69
|
-
style: style
|
|
70
|
-
}));
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
return /*#__PURE__*/React.createElement(TabView, {
|
|
74
|
-
navigationState: {
|
|
75
|
-
index,
|
|
76
|
-
routes
|
|
77
|
-
},
|
|
78
|
-
renderScene: SceneMap(tabScenes),
|
|
79
|
-
renderTabBar: renderTabBar,
|
|
80
|
-
onIndexChange: indexChangeHandler,
|
|
81
|
-
tabBarPosition: tabBarPosition,
|
|
82
|
-
keyboardDismissMode: keyboardDismissMode,
|
|
83
|
-
swipeEnabled: swipeEnabled
|
|
84
|
-
});
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
export default TabViewComponent;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createSvgProp } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "SVG",
|
|
4
|
-
tag: "SVG",
|
|
5
|
-
description: "An SVG component",
|
|
6
|
-
category: COMPONENT_TYPES.media,
|
|
7
|
-
layout: {
|
|
8
|
-
width: 100,
|
|
9
|
-
height: 100
|
|
10
|
-
},
|
|
11
|
-
props: {
|
|
12
|
-
source: createSvgProp()
|
|
13
|
-
}
|
|
14
|
-
};
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createTextProp, createTextEnumProp, createBoolProp, createColorProp } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = [{
|
|
3
|
-
name: "TabView",
|
|
4
|
-
tag: "TabView",
|
|
5
|
-
category: COMPONENT_TYPES.container,
|
|
6
|
-
layout: {},
|
|
7
|
-
props: {
|
|
8
|
-
tabBarPosition: createTextEnumProp({
|
|
9
|
-
label: "Tab Bar Position",
|
|
10
|
-
description: "Tab Bar Position",
|
|
11
|
-
options: ["top", "bottom"],
|
|
12
|
-
defaultValue: "top"
|
|
13
|
-
}),
|
|
14
|
-
keyboardDismissMode: createTextEnumProp({
|
|
15
|
-
label: "Keyboard Dismiss Mode",
|
|
16
|
-
description: "Keyboard Dismiss Mode",
|
|
17
|
-
options: ["auto", "on-drag", "none"],
|
|
18
|
-
defaultValue: "auto"
|
|
19
|
-
}),
|
|
20
|
-
swipeEnabled: createBoolProp({
|
|
21
|
-
label: "Swipe Enabled",
|
|
22
|
-
description: "Swipe Enabled",
|
|
23
|
-
defaultValue: true
|
|
24
|
-
}),
|
|
25
|
-
scrollEnabled: createBoolProp({
|
|
26
|
-
label: "Scroll Enabled",
|
|
27
|
-
description: "Scroll Enabled",
|
|
28
|
-
defaultValue: true
|
|
29
|
-
}),
|
|
30
|
-
activeColor: createColorProp({
|
|
31
|
-
label: "Active Color",
|
|
32
|
-
description: "Active Color",
|
|
33
|
-
defaultValue: "primary"
|
|
34
|
-
}),
|
|
35
|
-
inactiveColor: createColorProp({
|
|
36
|
-
label: "Inactive Color",
|
|
37
|
-
description: "Inactive Color",
|
|
38
|
-
defaultValue: null
|
|
39
|
-
}),
|
|
40
|
-
pressColor: createColorProp({
|
|
41
|
-
label: "Press Color",
|
|
42
|
-
description: "Press Color",
|
|
43
|
-
defaultValue: null
|
|
44
|
-
}),
|
|
45
|
-
indicatorColor: createColorProp({
|
|
46
|
-
label: "Indicator Color",
|
|
47
|
-
description: "Indicator Color",
|
|
48
|
-
defaultValue: null
|
|
49
|
-
})
|
|
50
|
-
}
|
|
51
|
-
}, {
|
|
52
|
-
name: "TabViewItem",
|
|
53
|
-
tag: "TabViewItem",
|
|
54
|
-
category: COMPONENT_TYPES.container,
|
|
55
|
-
layout: {},
|
|
56
|
-
props: {
|
|
57
|
-
title: createTextProp({
|
|
58
|
-
label: "Title",
|
|
59
|
-
description: "Tab Title"
|
|
60
|
-
}),
|
|
61
|
-
id: createTextProp({
|
|
62
|
-
label: "Id",
|
|
63
|
-
description: "Tab Id"
|
|
64
|
-
}),
|
|
65
|
-
accessibilityLabel: createTextProp({
|
|
66
|
-
label: "Accessibility Label",
|
|
67
|
-
description: "Accessibility Label"
|
|
68
|
-
})
|
|
69
|
-
}
|
|
70
|
-
}];
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { StyleProp, ImageStyle } from "react-native";
|
|
3
|
-
declare type SVGComponentProps = {
|
|
4
|
-
source: string;
|
|
5
|
-
style?: StyleProp<ImageStyle>;
|
|
6
|
-
};
|
|
7
|
-
declare const SVG: ({ source, style }: SVGComponentProps) => JSX.Element;
|
|
8
|
-
export default SVG;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
3
|
-
import type { IconSlot } from "../../interfaces/Icon";
|
|
4
|
-
declare type TabBarPosition = "top" | "bottom";
|
|
5
|
-
declare type KeyboardDismissMode = "none" | "auto" | "on-drag";
|
|
6
|
-
declare type TabViewProps = {
|
|
7
|
-
tabBarPosition?: TabBarPosition;
|
|
8
|
-
keyboardDismissMode?: KeyboardDismissMode;
|
|
9
|
-
swipeEnabled?: boolean;
|
|
10
|
-
scrollEnabled?: boolean;
|
|
11
|
-
activeColor?: string;
|
|
12
|
-
inactiveColor?: string;
|
|
13
|
-
pressColor?: string;
|
|
14
|
-
indicatorColor?: string;
|
|
15
|
-
style?: StyleProp<TextStyle | ViewStyle>;
|
|
16
|
-
children: React.ReactNode;
|
|
17
|
-
} & IconSlot;
|
|
18
|
-
declare const TabViewComponent: ({ Icon, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, style, children, }: TabViewProps) => JSX.Element;
|
|
19
|
-
export default TabViewComponent;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
interface TabViewItemProps {
|
|
3
|
-
title: string;
|
|
4
|
-
id: string;
|
|
5
|
-
icon: string;
|
|
6
|
-
accessibilityLabel: string;
|
|
7
|
-
children: React.ReactNode;
|
|
8
|
-
}
|
|
9
|
-
declare const TabViewItem: ({ title, id, icon, children, accessibilityLabel, }: TabViewItemProps) => React.ReactNode;
|
|
10
|
-
export default TabViewItem;
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
export declare const SEED_DATA: ({
|
|
2
|
-
name: string;
|
|
3
|
-
tag: string;
|
|
4
|
-
category: string;
|
|
5
|
-
layout: {};
|
|
6
|
-
props: {
|
|
7
|
-
tabBarPosition: {
|
|
8
|
-
group: string;
|
|
9
|
-
label: string;
|
|
10
|
-
description: string;
|
|
11
|
-
editable: boolean;
|
|
12
|
-
required: boolean;
|
|
13
|
-
formType: string;
|
|
14
|
-
propType: string;
|
|
15
|
-
defaultValue: null;
|
|
16
|
-
options: never[];
|
|
17
|
-
};
|
|
18
|
-
keyboardDismissMode: {
|
|
19
|
-
group: string;
|
|
20
|
-
label: string;
|
|
21
|
-
description: string;
|
|
22
|
-
editable: boolean;
|
|
23
|
-
required: boolean;
|
|
24
|
-
formType: string;
|
|
25
|
-
propType: string;
|
|
26
|
-
defaultValue: null;
|
|
27
|
-
options: never[];
|
|
28
|
-
};
|
|
29
|
-
swipeEnabled: {
|
|
30
|
-
label: string;
|
|
31
|
-
description: string;
|
|
32
|
-
formType: string;
|
|
33
|
-
propType: string;
|
|
34
|
-
defaultValue: boolean;
|
|
35
|
-
editable: boolean;
|
|
36
|
-
required: boolean;
|
|
37
|
-
group: string;
|
|
38
|
-
};
|
|
39
|
-
scrollEnabled: {
|
|
40
|
-
label: string;
|
|
41
|
-
description: string;
|
|
42
|
-
formType: string;
|
|
43
|
-
propType: string;
|
|
44
|
-
defaultValue: boolean;
|
|
45
|
-
editable: boolean;
|
|
46
|
-
required: boolean;
|
|
47
|
-
group: string;
|
|
48
|
-
};
|
|
49
|
-
activeColor: {
|
|
50
|
-
group: string;
|
|
51
|
-
label: string;
|
|
52
|
-
description: string;
|
|
53
|
-
editable: boolean;
|
|
54
|
-
required: boolean;
|
|
55
|
-
defaultValue: null;
|
|
56
|
-
formType: string;
|
|
57
|
-
propType: string;
|
|
58
|
-
};
|
|
59
|
-
inactiveColor: {
|
|
60
|
-
group: string;
|
|
61
|
-
label: string;
|
|
62
|
-
description: string;
|
|
63
|
-
editable: boolean;
|
|
64
|
-
required: boolean;
|
|
65
|
-
defaultValue: null;
|
|
66
|
-
formType: string;
|
|
67
|
-
propType: string;
|
|
68
|
-
};
|
|
69
|
-
pressColor: {
|
|
70
|
-
group: string;
|
|
71
|
-
label: string;
|
|
72
|
-
description: string;
|
|
73
|
-
editable: boolean;
|
|
74
|
-
required: boolean;
|
|
75
|
-
defaultValue: null;
|
|
76
|
-
formType: string;
|
|
77
|
-
propType: string;
|
|
78
|
-
};
|
|
79
|
-
indicatorColor: {
|
|
80
|
-
group: string;
|
|
81
|
-
label: string;
|
|
82
|
-
description: string;
|
|
83
|
-
editable: boolean;
|
|
84
|
-
required: boolean;
|
|
85
|
-
defaultValue: null;
|
|
86
|
-
formType: string;
|
|
87
|
-
propType: string;
|
|
88
|
-
};
|
|
89
|
-
title?: undefined;
|
|
90
|
-
id?: undefined;
|
|
91
|
-
accessibilityLabel?: undefined;
|
|
92
|
-
};
|
|
93
|
-
} | {
|
|
94
|
-
name: string;
|
|
95
|
-
tag: string;
|
|
96
|
-
category: string;
|
|
97
|
-
layout: {};
|
|
98
|
-
props: {
|
|
99
|
-
title: any;
|
|
100
|
-
id: any;
|
|
101
|
-
accessibilityLabel: any;
|
|
102
|
-
tabBarPosition?: undefined;
|
|
103
|
-
keyboardDismissMode?: undefined;
|
|
104
|
-
swipeEnabled?: undefined;
|
|
105
|
-
scrollEnabled?: undefined;
|
|
106
|
-
activeColor?: undefined;
|
|
107
|
-
inactiveColor?: undefined;
|
|
108
|
-
pressColor?: undefined;
|
|
109
|
-
indicatorColor?: undefined;
|
|
110
|
-
};
|
|
111
|
-
})[];
|
package/src/components/SVG.tsx
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { View, Platform, Image, StyleProp, ImageStyle } from "react-native";
|
|
3
|
-
import { SvgUri } from "react-native-svg";
|
|
4
|
-
|
|
5
|
-
import Config from "./Config";
|
|
6
|
-
|
|
7
|
-
type SVGComponentProps = {
|
|
8
|
-
source: string;
|
|
9
|
-
style?: StyleProp<ImageStyle>;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
const SVG = ({ source, style }: SVGComponentProps) => {
|
|
13
|
-
let svgSource =
|
|
14
|
-
source === null || source === undefined ? Config.placeholderSvgURL : source;
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<>
|
|
18
|
-
{Platform.OS === "ios" && (
|
|
19
|
-
<View style={style}>
|
|
20
|
-
<SvgUri width="100%" height="100%" uri={svgSource} />
|
|
21
|
-
</View>
|
|
22
|
-
)}
|
|
23
|
-
{Platform.OS === "android" && (
|
|
24
|
-
<View style={style}>
|
|
25
|
-
<SvgUri width="100%" height="100%" uri={svgSource} />
|
|
26
|
-
</View>
|
|
27
|
-
)}
|
|
28
|
-
{Platform.OS === "web" && (
|
|
29
|
-
<Image style={style} source={{ uri: svgSource }} />
|
|
30
|
-
)}
|
|
31
|
-
</>
|
|
32
|
-
);
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
export default SVG;
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { TabView, TabBar, SceneMap } from "react-native-tab-view";
|
|
3
|
-
// import { withTheme } from "../../theming";
|
|
4
|
-
import TabViewItem from "./TabViewItem";
|
|
5
|
-
const TabViewComponent = ({ Icon, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, style, children, }) => {
|
|
6
|
-
const [index, setIndex] = React.useState(0);
|
|
7
|
-
const [routes, setRoutes] = React.useState([]);
|
|
8
|
-
const [tabScenes, setTabScenes] = React.useState({});
|
|
9
|
-
React.useEffect(() => {
|
|
10
|
-
const newRoutes = [];
|
|
11
|
-
const scenes = {};
|
|
12
|
-
React.Children.toArray(children)
|
|
13
|
-
.filter((child) => child.type === TabViewItem)
|
|
14
|
-
.forEach((child) => {
|
|
15
|
-
var _a, _b, _c;
|
|
16
|
-
if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.id) {
|
|
17
|
-
newRoutes.push({
|
|
18
|
-
key: (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.id,
|
|
19
|
-
...child === null || child === void 0 ? void 0 : child.props,
|
|
20
|
-
});
|
|
21
|
-
scenes[(_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.id] = () => child;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
setRoutes(newRoutes);
|
|
25
|
-
setTabScenes(scenes);
|
|
26
|
-
}, [children]);
|
|
27
|
-
const indexChangeHandler = (i) => setIndex(i);
|
|
28
|
-
const renderTabBar = (props) => {
|
|
29
|
-
console.log(props);
|
|
30
|
-
return (React.createElement(TabBar, { ...props, activeColor: activeColor, inactiveColor: inactiveColor, pressColor: pressColor, scrollEnabled: scrollEnabled, indicatorStyle: { backgroundColor: indicatorColor }, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: style }));
|
|
31
|
-
};
|
|
32
|
-
return (React.createElement(TabView, { navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
|
|
33
|
-
};
|
|
34
|
-
export default TabViewComponent;
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { StyleProp, TextStyle, ViewStyle } from "react-native";
|
|
3
|
-
import { TabView, TabBar, SceneMap } from "react-native-tab-view";
|
|
4
|
-
|
|
5
|
-
// import { withTheme } from "../../theming";
|
|
6
|
-
import TabViewItem from "./TabViewItem";
|
|
7
|
-
import type { IconSlot } from "../../interfaces/Icon";
|
|
8
|
-
|
|
9
|
-
type TabBarPosition = "top" | "bottom";
|
|
10
|
-
type KeyboardDismissMode = "none" | "auto" | "on-drag";
|
|
11
|
-
|
|
12
|
-
type TabViewProps = {
|
|
13
|
-
tabBarPosition?: TabBarPosition;
|
|
14
|
-
keyboardDismissMode?: KeyboardDismissMode;
|
|
15
|
-
swipeEnabled?: boolean;
|
|
16
|
-
scrollEnabled?: boolean;
|
|
17
|
-
activeColor?: string;
|
|
18
|
-
inactiveColor?: string;
|
|
19
|
-
pressColor?: string;
|
|
20
|
-
indicatorColor?: string;
|
|
21
|
-
style?: StyleProp<TextStyle | ViewStyle>;
|
|
22
|
-
children: React.ReactNode;
|
|
23
|
-
} & IconSlot;
|
|
24
|
-
|
|
25
|
-
const TabViewComponent = ({
|
|
26
|
-
Icon,
|
|
27
|
-
tabBarPosition,
|
|
28
|
-
keyboardDismissMode,
|
|
29
|
-
swipeEnabled,
|
|
30
|
-
scrollEnabled,
|
|
31
|
-
activeColor,
|
|
32
|
-
inactiveColor,
|
|
33
|
-
pressColor,
|
|
34
|
-
indicatorColor,
|
|
35
|
-
style,
|
|
36
|
-
children,
|
|
37
|
-
}: TabViewProps) => {
|
|
38
|
-
const [index, setIndex] = React.useState(0);
|
|
39
|
-
const [routes, setRoutes] = React.useState([]);
|
|
40
|
-
const [tabScenes, setTabScenes] = React.useState({});
|
|
41
|
-
|
|
42
|
-
React.useEffect(() => {
|
|
43
|
-
const newRoutes: any = [];
|
|
44
|
-
const scenes: any = {};
|
|
45
|
-
|
|
46
|
-
React.Children.toArray(children)
|
|
47
|
-
.filter((child: any) => child.type === TabViewItem)
|
|
48
|
-
.forEach((child: any) => {
|
|
49
|
-
if (child?.props?.id) {
|
|
50
|
-
newRoutes.push({
|
|
51
|
-
key: child?.props?.id,
|
|
52
|
-
...child?.props,
|
|
53
|
-
});
|
|
54
|
-
scenes[child?.props?.id] = () => child;
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
setRoutes(newRoutes);
|
|
59
|
-
setTabScenes(scenes);
|
|
60
|
-
}, [children]);
|
|
61
|
-
|
|
62
|
-
const indexChangeHandler = (i: any) => setIndex(i);
|
|
63
|
-
|
|
64
|
-
const renderTabBar = (props: any) => {
|
|
65
|
-
console.log(props);
|
|
66
|
-
return (
|
|
67
|
-
<TabBar
|
|
68
|
-
{...props}
|
|
69
|
-
activeColor={activeColor}
|
|
70
|
-
inactiveColor={inactiveColor}
|
|
71
|
-
pressColor={pressColor}
|
|
72
|
-
scrollEnabled={scrollEnabled}
|
|
73
|
-
indicatorStyle={{ backgroundColor: indicatorColor }}
|
|
74
|
-
renderIcon={({ route, color }) =>
|
|
75
|
-
route?.icon ? (
|
|
76
|
-
<Icon name={route.icon} color={color} size={36} />
|
|
77
|
-
) : null
|
|
78
|
-
}
|
|
79
|
-
style={style}
|
|
80
|
-
/>
|
|
81
|
-
);
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
return (
|
|
85
|
-
<TabView
|
|
86
|
-
navigationState={{ index, routes }}
|
|
87
|
-
renderScene={SceneMap(tabScenes)}
|
|
88
|
-
renderTabBar={renderTabBar}
|
|
89
|
-
onIndexChange={indexChangeHandler}
|
|
90
|
-
tabBarPosition={tabBarPosition}
|
|
91
|
-
keyboardDismissMode={keyboardDismissMode}
|
|
92
|
-
swipeEnabled={swipeEnabled}
|
|
93
|
-
/>
|
|
94
|
-
);
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
export default TabViewComponent;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
interface TabViewItemProps {
|
|
3
|
-
title: string;
|
|
4
|
-
id: string;
|
|
5
|
-
icon: string;
|
|
6
|
-
accessibilityLabel: string;
|
|
7
|
-
children: React.ReactNode;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
const TabViewItem = ({
|
|
11
|
-
title,
|
|
12
|
-
id,
|
|
13
|
-
icon,
|
|
14
|
-
children,
|
|
15
|
-
accessibilityLabel,
|
|
16
|
-
}: TabViewItemProps) => {
|
|
17
|
-
console.log({ title, id, icon, accessibilityLabel });
|
|
18
|
-
return children;
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
export default TabViewItem;
|
package/src/mappings/SVG.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createSvgProp } from "@draftbit/types";
|
|
2
|
-
export const SEED_DATA = {
|
|
3
|
-
name: "SVG",
|
|
4
|
-
tag: "SVG",
|
|
5
|
-
description: "An SVG component",
|
|
6
|
-
category: COMPONENT_TYPES.media,
|
|
7
|
-
layout: {
|
|
8
|
-
width: 100,
|
|
9
|
-
height: 100,
|
|
10
|
-
},
|
|
11
|
-
props: {
|
|
12
|
-
source: createSvgProp(),
|
|
13
|
-
},
|
|
14
|
-
};
|
package/src/mappings/SVG.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { COMPONENT_TYPES, createSvgProp } from "@draftbit/types";
|
|
2
|
-
|
|
3
|
-
export const SEED_DATA = {
|
|
4
|
-
name: "SVG",
|
|
5
|
-
tag: "SVG",
|
|
6
|
-
description: "An SVG component",
|
|
7
|
-
category: COMPONENT_TYPES.media,
|
|
8
|
-
layout: {
|
|
9
|
-
width: 100,
|
|
10
|
-
height: 100,
|
|
11
|
-
},
|
|
12
|
-
props: {
|
|
13
|
-
source: createSvgProp(),
|
|
14
|
-
},
|
|
15
|
-
};
|