@draftbit/core 46.4.4-c18fe1.2 → 46.4.4-d55501.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/CircleImage.js +1 -15
- package/lib/commonjs/components/Container.js +15 -4
- package/lib/commonjs/components/Picker/Picker.js +1 -1
- package/lib/commonjs/components/TabView/TabView.js +87 -0
- package/lib/commonjs/components/TabView/TabViewItem.js +24 -0
- package/lib/commonjs/components/TabView/index.js +20 -0
- package/lib/commonjs/constants.js +1 -1
- package/lib/commonjs/index.js +13 -7
- package/lib/commonjs/mappings/TabView.js +77 -0
- package/lib/module/components/TabView/TabView.js +79 -0
- package/lib/module/components/TabView/TabViewItem.js +17 -0
- package/lib/module/components/TabView/index.js +2 -0
- package/lib/module/index.js +1 -1
- package/lib/module/mappings/TabView.js +70 -0
- package/lib/typescript/src/components/TabView/TabView.d.ts +19 -0
- package/lib/typescript/src/components/TabView/TabViewItem.d.ts +10 -0
- package/lib/typescript/src/components/TabView/index.d.ts +2 -0
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/mappings/TabView.d.ts +111 -0
- package/package.json +6 -6
- package/src/components/TabView/TabView.js +34 -0
- package/src/components/TabView/TabView.tsx +97 -0
- package/src/components/TabView/TabViewItem.js +5 -0
- package/src/components/TabView/TabViewItem.tsx +21 -0
- package/src/components/TabView/index.js +2 -0
- package/src/components/TabView/index.tsx +2 -0
- package/src/index.js +1 -1
- package/src/index.tsx +1 -1
- package/src/mappings/TabView.js +73 -0
- package/src/mappings/TabView.ts +80 -0
- package/lib/commonjs/components/BottomSheet/BottomSheet.native.js +0 -58
- package/lib/commonjs/components/BottomSheet/BottomSheet.web.js +0 -83
- package/lib/commonjs/components/BottomSheet/index.js +0 -13
- package/lib/commonjs/components/BottomSheet/types.js +0 -5
- package/lib/commonjs/mappings/BottomSheet.js +0 -20
- package/lib/module/components/BottomSheet/BottomSheet.native.js +0 -49
- package/lib/module/components/BottomSheet/BottomSheet.web.js +0 -75
- package/lib/module/components/BottomSheet/index.js +0 -2
- package/lib/module/components/BottomSheet/types.js +0 -1
- package/lib/module/mappings/BottomSheet.js +0 -13
- package/lib/typescript/src/components/BottomSheet/BottomSheet.native.d.ts +0 -4
- package/lib/typescript/src/components/BottomSheet/BottomSheet.web.d.ts +0 -4
- package/lib/typescript/src/components/BottomSheet/index.d.ts +0 -1
- package/lib/typescript/src/components/BottomSheet/types.d.ts +0 -8
- package/lib/typescript/src/mappings/BottomSheet.d.ts +0 -19
- package/src/components/BottomSheet/BottomSheet.native.js +0 -37
- package/src/components/BottomSheet/BottomSheet.native.tsx +0 -60
- package/src/components/BottomSheet/BottomSheet.web.js +0 -56
- package/src/components/BottomSheet/BottomSheet.web.tsx +0 -90
- package/src/components/BottomSheet/index.js +0 -2
- package/src/components/BottomSheet/index.tsx +0 -2
- package/src/components/BottomSheet/types.js +0 -1
- package/src/components/BottomSheet/types.tsx +0 -8
- package/src/mappings/BottomSheet.js +0 -20
- package/src/mappings/BottomSheet.ts +0 -25
|
@@ -10,6 +10,7 @@ var _Config = _interopRequireDefault(require("./Config"));
|
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
11
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
12
12
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
|
+
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); }
|
|
13
14
|
const CircleImage = _ref => {
|
|
14
15
|
let {
|
|
15
16
|
source = _Config.default.placeholderImageURL,
|
|
@@ -18,21 +19,6 @@ const CircleImage = _ref => {
|
|
|
18
19
|
...props
|
|
19
20
|
} = _ref;
|
|
20
21
|
const borderRadius = size / 2;
|
|
21
|
-
return /*#__PURE__*/React.createElement(_reactNative.Image, {
|
|
22
|
-
style: [{
|
|
23
|
-
width: size,
|
|
24
|
-
height: size,
|
|
25
|
-
borderRadius
|
|
26
|
-
}, style],
|
|
27
|
-
source: typeof source === "string" ? {
|
|
28
|
-
uri: source
|
|
29
|
-
} : source,
|
|
30
|
-
resizeMode: "cover",
|
|
31
|
-
...props
|
|
32
|
-
});
|
|
33
|
-
};
|
|
34
|
-
var _default = CircleImage;
|
|
35
|
-
exports.default = _default;size / 2;
|
|
36
22
|
return /*#__PURE__*/React.createElement(_reactNative.Image, _extends({
|
|
37
23
|
style: [{
|
|
38
24
|
width: size,
|
|
@@ -11,7 +11,6 @@ var _Elevation = _interopRequireDefault(require("./Elevation"));
|
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
13
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
14
|
-
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); }
|
|
15
14
|
const Container = _ref => {
|
|
16
15
|
let {
|
|
17
16
|
useThemeGutterPadding,
|
|
@@ -73,9 +72,10 @@ const Container = _ref => {
|
|
|
73
72
|
};
|
|
74
73
|
const Wrap = elevation ? _Elevation.default : _reactNative.View;
|
|
75
74
|
if (elevation) containerStyle.elevation = elevation;
|
|
76
|
-
return /*#__PURE__*/React.createElement(Wrap,
|
|
77
|
-
style: [containerStyle, style]
|
|
78
|
-
|
|
75
|
+
return /*#__PURE__*/React.createElement(Wrap, {
|
|
76
|
+
style: [containerStyle, style],
|
|
77
|
+
...rest
|
|
78
|
+
}, backgroundImage ? /*#__PURE__*/React.createElement(_reactNative.ImageBackground, {
|
|
79
79
|
source: typeof backgroundImage === "string" ? {
|
|
80
80
|
uri: backgroundImage
|
|
81
81
|
} : backgroundImage,
|
|
@@ -90,4 +90,15 @@ const Container = _ref => {
|
|
|
90
90
|
}, children));
|
|
91
91
|
};
|
|
92
92
|
var _default = (0, _theming.withTheme)(Container);
|
|
93
|
+
exports.default = _default;sizeMode: backgroundImageResizeMode,
|
|
94
|
+
style: {
|
|
95
|
+
flex: 1
|
|
96
|
+
}
|
|
97
|
+
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
98
|
+
style: innerStyle
|
|
99
|
+
}, children)) : /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
100
|
+
style: innerStyle
|
|
101
|
+
}, children));
|
|
102
|
+
};
|
|
103
|
+
var _default = (0, _theming.withTheme)(Container);
|
|
93
104
|
exports.default = _default;
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNativeTabView = require("react-native-tab-view");
|
|
9
|
+
var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
12
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
|
+
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); }
|
|
14
|
+
const TabViewComponent = _ref => {
|
|
15
|
+
let {
|
|
16
|
+
Icon,
|
|
17
|
+
tabBarPosition,
|
|
18
|
+
keyboardDismissMode,
|
|
19
|
+
swipeEnabled,
|
|
20
|
+
scrollEnabled,
|
|
21
|
+
activeColor,
|
|
22
|
+
inactiveColor,
|
|
23
|
+
pressColor,
|
|
24
|
+
indicatorColor,
|
|
25
|
+
style,
|
|
26
|
+
children
|
|
27
|
+
} = _ref;
|
|
28
|
+
const [index, setIndex] = React.useState(0);
|
|
29
|
+
const [routes, setRoutes] = React.useState([]);
|
|
30
|
+
const [tabScenes, setTabScenes] = React.useState({});
|
|
31
|
+
React.useEffect(() => {
|
|
32
|
+
const newRoutes = [];
|
|
33
|
+
const scenes = {};
|
|
34
|
+
React.Children.toArray(children).filter(child => child.type === _TabViewItem.default).forEach(child => {
|
|
35
|
+
var _child$props;
|
|
36
|
+
if (child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.id) {
|
|
37
|
+
var _child$props2, _child$props3;
|
|
38
|
+
newRoutes.push({
|
|
39
|
+
key: child === null || child === void 0 ? void 0 : (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.id,
|
|
40
|
+
...(child === null || child === void 0 ? void 0 : child.props)
|
|
41
|
+
});
|
|
42
|
+
scenes[child === null || child === void 0 ? void 0 : (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.id] = () => child;
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
setRoutes(newRoutes);
|
|
46
|
+
setTabScenes(scenes);
|
|
47
|
+
}, [children]);
|
|
48
|
+
const indexChangeHandler = i => setIndex(i);
|
|
49
|
+
const renderTabBar = props => {
|
|
50
|
+
console.log(props);
|
|
51
|
+
return /*#__PURE__*/React.createElement(_reactNativeTabView.TabBar, _extends({}, props, {
|
|
52
|
+
activeColor: activeColor,
|
|
53
|
+
inactiveColor: inactiveColor,
|
|
54
|
+
pressColor: pressColor,
|
|
55
|
+
scrollEnabled: scrollEnabled,
|
|
56
|
+
indicatorStyle: {
|
|
57
|
+
backgroundColor: indicatorColor
|
|
58
|
+
},
|
|
59
|
+
renderIcon: _ref2 => {
|
|
60
|
+
let {
|
|
61
|
+
route,
|
|
62
|
+
color
|
|
63
|
+
} = _ref2;
|
|
64
|
+
return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
65
|
+
name: route.icon,
|
|
66
|
+
color: color,
|
|
67
|
+
size: 36
|
|
68
|
+
}) : null;
|
|
69
|
+
},
|
|
70
|
+
style: style
|
|
71
|
+
}));
|
|
72
|
+
};
|
|
73
|
+
return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
|
|
74
|
+
navigationState: {
|
|
75
|
+
index,
|
|
76
|
+
routes
|
|
77
|
+
},
|
|
78
|
+
renderScene: (0, _reactNativeTabView.SceneMap)(tabScenes),
|
|
79
|
+
renderTabBar: renderTabBar,
|
|
80
|
+
onIndexChange: indexChangeHandler,
|
|
81
|
+
tabBarPosition: tabBarPosition,
|
|
82
|
+
keyboardDismissMode: keyboardDismissMode,
|
|
83
|
+
swipeEnabled: swipeEnabled
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
var _default = TabViewComponent;
|
|
87
|
+
exports.default = _default;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
const TabViewItem = _ref => {
|
|
8
|
+
let {
|
|
9
|
+
title,
|
|
10
|
+
id,
|
|
11
|
+
icon,
|
|
12
|
+
children,
|
|
13
|
+
accessibilityLabel
|
|
14
|
+
} = _ref;
|
|
15
|
+
console.log({
|
|
16
|
+
title,
|
|
17
|
+
id,
|
|
18
|
+
icon,
|
|
19
|
+
accessibilityLabel
|
|
20
|
+
});
|
|
21
|
+
return children;
|
|
22
|
+
};
|
|
23
|
+
var _default = TabViewItem;
|
|
24
|
+
exports.default = _default;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "TabView", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _TabView.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "TabViewItem", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _TabViewItem.default;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
var _TabView = _interopRequireDefault(require("./TabView"));
|
|
19
|
+
var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -12,4 +12,4 @@ const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
|
|
|
12
12
|
android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
|
|
13
13
|
ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
|
|
14
14
|
});
|
|
15
|
-
exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
|
|
15
|
+
exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;AR_HEIGHT;
|
package/lib/commonjs/index.js
CHANGED
|
@@ -51,12 +51,6 @@ Object.defineProperty(exports, "Banner", {
|
|
|
51
51
|
return _Banner.default;
|
|
52
52
|
}
|
|
53
53
|
});
|
|
54
|
-
Object.defineProperty(exports, "BottomSheet", {
|
|
55
|
-
enumerable: true,
|
|
56
|
-
get: function () {
|
|
57
|
-
return _BottomSheet.BottomSheet;
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
54
|
Object.defineProperty(exports, "Button", {
|
|
61
55
|
enumerable: true,
|
|
62
56
|
get: function () {
|
|
@@ -375,6 +369,18 @@ Object.defineProperty(exports, "SwitchRow", {
|
|
|
375
369
|
return _Switch.SwitchRow;
|
|
376
370
|
}
|
|
377
371
|
});
|
|
372
|
+
Object.defineProperty(exports, "TabView", {
|
|
373
|
+
enumerable: true,
|
|
374
|
+
get: function () {
|
|
375
|
+
return _TabView.TabView;
|
|
376
|
+
}
|
|
377
|
+
});
|
|
378
|
+
Object.defineProperty(exports, "TabViewItem", {
|
|
379
|
+
enumerable: true,
|
|
380
|
+
get: function () {
|
|
381
|
+
return _TabView.TabViewItem;
|
|
382
|
+
}
|
|
383
|
+
});
|
|
378
384
|
Object.defineProperty(exports, "TextField", {
|
|
379
385
|
enumerable: true,
|
|
380
386
|
get: function () {
|
|
@@ -447,7 +453,7 @@ var _Touchable = _interopRequireDefault(require("./components/Touchable"));
|
|
|
447
453
|
var _Accordion = require("./components/Accordion");
|
|
448
454
|
var _ActionSheet = require("./components/ActionSheet");
|
|
449
455
|
var _Swiper = require("./components/Swiper");
|
|
450
|
-
var
|
|
456
|
+
var _TabView = require("./components/TabView");
|
|
451
457
|
var _Layout = require("./components/Layout");
|
|
452
458
|
var _index = require("./components/RadioButton/index");
|
|
453
459
|
var _CardBlock = _interopRequireDefault(require("./components/CardBlock"));
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.SEED_DATA = void 0;
|
|
7
|
+
var _types = require("@draftbit/types");
|
|
8
|
+
const SEED_DATA = [{
|
|
9
|
+
name: "Tab View",
|
|
10
|
+
tag: "TabView",
|
|
11
|
+
category: _types.COMPONENT_TYPES.container,
|
|
12
|
+
layout: {},
|
|
13
|
+
props: {
|
|
14
|
+
tabBarPosition: (0, _types.createTextEnumProp)({
|
|
15
|
+
label: "Tab Bar Position",
|
|
16
|
+
description: "Tab Bar Position",
|
|
17
|
+
options: ["top", "bottom"],
|
|
18
|
+
defaultValue: "top"
|
|
19
|
+
}),
|
|
20
|
+
keyboardDismissMode: (0, _types.createTextEnumProp)({
|
|
21
|
+
label: "Keyboard Dismiss Mode",
|
|
22
|
+
description: "Keyboard Dismiss Mode",
|
|
23
|
+
options: ["auto", "on-drag", "none"],
|
|
24
|
+
defaultValue: "auto"
|
|
25
|
+
}),
|
|
26
|
+
swipeEnabled: (0, _types.createBoolProp)({
|
|
27
|
+
label: "Swipe Enabled",
|
|
28
|
+
description: "Swipe Enabled",
|
|
29
|
+
defaultValue: true
|
|
30
|
+
}),
|
|
31
|
+
scrollEnabled: (0, _types.createBoolProp)({
|
|
32
|
+
label: "Scroll Enabled",
|
|
33
|
+
description: "Scroll Enabled",
|
|
34
|
+
defaultValue: true
|
|
35
|
+
}),
|
|
36
|
+
activeColor: (0, _types.createColorProp)({
|
|
37
|
+
label: "Active Color",
|
|
38
|
+
description: "Active Color",
|
|
39
|
+
defaultValue: "primary"
|
|
40
|
+
}),
|
|
41
|
+
inactiveColor: (0, _types.createColorProp)({
|
|
42
|
+
label: "Inactive Color",
|
|
43
|
+
description: "Inactive Color",
|
|
44
|
+
defaultValue: null
|
|
45
|
+
}),
|
|
46
|
+
pressColor: (0, _types.createColorProp)({
|
|
47
|
+
label: "Press Color",
|
|
48
|
+
description: "Press Color",
|
|
49
|
+
defaultValue: null
|
|
50
|
+
}),
|
|
51
|
+
indicatorColor: (0, _types.createColorProp)({
|
|
52
|
+
label: "Indicator Color",
|
|
53
|
+
description: "Indicator Color",
|
|
54
|
+
defaultValue: null
|
|
55
|
+
})
|
|
56
|
+
}
|
|
57
|
+
}, {
|
|
58
|
+
name: "Tab View Item",
|
|
59
|
+
tag: "TabViewItem",
|
|
60
|
+
category: _types.COMPONENT_TYPES.container,
|
|
61
|
+
layout: {},
|
|
62
|
+
props: {
|
|
63
|
+
title: (0, _types.createTextProp)({
|
|
64
|
+
label: "Title",
|
|
65
|
+
description: "Tab Title"
|
|
66
|
+
}),
|
|
67
|
+
id: (0, _types.createTextProp)({
|
|
68
|
+
label: "Id",
|
|
69
|
+
description: "Tab Id"
|
|
70
|
+
}),
|
|
71
|
+
accessibilityLabel: (0, _types.createTextProp)({
|
|
72
|
+
label: "Accessibility Label",
|
|
73
|
+
description: "Accessibility Label"
|
|
74
|
+
})
|
|
75
|
+
}
|
|
76
|
+
}];
|
|
77
|
+
exports.SEED_DATA = SEED_DATA;
|
|
@@ -0,0 +1,79 @@
|
|
|
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
|
+
|
|
5
|
+
// import { withTheme } from "../../theming";
|
|
6
|
+
import TabViewItem from "./TabViewItem";
|
|
7
|
+
const TabViewComponent = _ref => {
|
|
8
|
+
let {
|
|
9
|
+
Icon,
|
|
10
|
+
tabBarPosition,
|
|
11
|
+
keyboardDismissMode,
|
|
12
|
+
swipeEnabled,
|
|
13
|
+
scrollEnabled,
|
|
14
|
+
activeColor,
|
|
15
|
+
inactiveColor,
|
|
16
|
+
pressColor,
|
|
17
|
+
indicatorColor,
|
|
18
|
+
style,
|
|
19
|
+
children
|
|
20
|
+
} = _ref;
|
|
21
|
+
const [index, setIndex] = React.useState(0);
|
|
22
|
+
const [routes, setRoutes] = React.useState([]);
|
|
23
|
+
const [tabScenes, setTabScenes] = React.useState({});
|
|
24
|
+
React.useEffect(() => {
|
|
25
|
+
const newRoutes = [];
|
|
26
|
+
const scenes = {};
|
|
27
|
+
React.Children.toArray(children).filter(child => child.type === TabViewItem).forEach(child => {
|
|
28
|
+
var _child$props;
|
|
29
|
+
if (child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.id) {
|
|
30
|
+
var _child$props2, _child$props3;
|
|
31
|
+
newRoutes.push({
|
|
32
|
+
key: child === null || child === void 0 ? void 0 : (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.id,
|
|
33
|
+
...(child === null || child === void 0 ? void 0 : child.props)
|
|
34
|
+
});
|
|
35
|
+
scenes[child === null || child === void 0 ? void 0 : (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.id] = () => child;
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
setRoutes(newRoutes);
|
|
39
|
+
setTabScenes(scenes);
|
|
40
|
+
}, [children]);
|
|
41
|
+
const indexChangeHandler = i => setIndex(i);
|
|
42
|
+
const renderTabBar = props => {
|
|
43
|
+
console.log(props);
|
|
44
|
+
return /*#__PURE__*/React.createElement(TabBar, _extends({}, props, {
|
|
45
|
+
activeColor: activeColor,
|
|
46
|
+
inactiveColor: inactiveColor,
|
|
47
|
+
pressColor: pressColor,
|
|
48
|
+
scrollEnabled: scrollEnabled,
|
|
49
|
+
indicatorStyle: {
|
|
50
|
+
backgroundColor: indicatorColor
|
|
51
|
+
},
|
|
52
|
+
renderIcon: _ref2 => {
|
|
53
|
+
let {
|
|
54
|
+
route,
|
|
55
|
+
color
|
|
56
|
+
} = _ref2;
|
|
57
|
+
return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
58
|
+
name: route.icon,
|
|
59
|
+
color: color,
|
|
60
|
+
size: 36
|
|
61
|
+
}) : null;
|
|
62
|
+
},
|
|
63
|
+
style: style
|
|
64
|
+
}));
|
|
65
|
+
};
|
|
66
|
+
return /*#__PURE__*/React.createElement(TabView, {
|
|
67
|
+
navigationState: {
|
|
68
|
+
index,
|
|
69
|
+
routes
|
|
70
|
+
},
|
|
71
|
+
renderScene: SceneMap(tabScenes),
|
|
72
|
+
renderTabBar: renderTabBar,
|
|
73
|
+
onIndexChange: indexChangeHandler,
|
|
74
|
+
tabBarPosition: tabBarPosition,
|
|
75
|
+
keyboardDismissMode: keyboardDismissMode,
|
|
76
|
+
swipeEnabled: swipeEnabled
|
|
77
|
+
});
|
|
78
|
+
};
|
|
79
|
+
export default TabViewComponent;
|
package/lib/module/index.js
CHANGED
|
@@ -29,7 +29,7 @@ export { default as Touchable } from "./components/Touchable";
|
|
|
29
29
|
export { AccordionGroup, AccordionItem } from "./components/Accordion";
|
|
30
30
|
export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/ActionSheet";
|
|
31
31
|
export { Swiper, SwiperItem } from "./components/Swiper";
|
|
32
|
-
export {
|
|
32
|
+
export { TabView, TabViewItem } from "./components/TabView";
|
|
33
33
|
export { Center, Circle, Square, Row, Stack, Spacer } from "./components/Layout";
|
|
34
34
|
export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
|
|
35
35
|
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { COMPONENT_TYPES, createTextProp, createTextEnumProp, createBoolProp, createColorProp } from "@draftbit/types";
|
|
2
|
+
export const SEED_DATA = [{
|
|
3
|
+
name: "Tab View",
|
|
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: "Tab View Item",
|
|
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
|
+
}];
|
|
@@ -0,0 +1,19 @@
|
|
|
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;
|
|
@@ -0,0 +1,10 @@
|
|
|
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;
|
|
@@ -29,7 +29,7 @@ export { default as Touchable } from "./components/Touchable";
|
|
|
29
29
|
export { AccordionGroup, AccordionItem } from "./components/Accordion";
|
|
30
30
|
export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/ActionSheet";
|
|
31
31
|
export { Swiper, SwiperItem } from "./components/Swiper";
|
|
32
|
-
export {
|
|
32
|
+
export { TabView, TabViewItem } from "./components/TabView";
|
|
33
33
|
export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
|
|
34
34
|
export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
|
|
35
35
|
export { default as CardBlock } from "./components/CardBlock";
|
|
@@ -0,0 +1,111 @@
|
|
|
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
|
+
})[];
|