@draftbit/core 46.4.4-b53636.2 → 46.4.4-d93fe1.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 +5 -25
- package/lib/commonjs/components/AnimatedCircularProgress.js +2 -12
- package/lib/commonjs/components/CircleImage.js +2 -16
- package/lib/commonjs/components/Container.js +17 -5
- package/lib/commonjs/components/ProgressBar.js +23 -7
- package/lib/commonjs/components/TabView/TabView.js +102 -0
- package/lib/commonjs/components/TabView/TabViewItem.js +26 -0
- package/lib/commonjs/components/TabView/index.js +23 -0
- package/lib/commonjs/index.js +14 -0
- package/lib/commonjs/mappings/AudioPlayer.js +2 -32
- package/lib/commonjs/mappings/TabView.js +79 -0
- package/lib/module/components/Accordion/AccordionItem.js +5 -26
- package/lib/module/components/TabView/TabView.js +87 -0
- package/lib/module/components/TabView/TabViewItem.js +18 -0
- package/lib/module/components/TabView/index.js +2 -0
- package/lib/module/components/ToggleButton.js +17 -3
- package/lib/module/index.js +1 -0
- package/lib/module/mappings/AudioPlayer.js +3 -33
- 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 -0
- package/lib/typescript/src/mappings/AudioPlayer.d.ts +1 -62
- package/lib/typescript/src/mappings/TabView.d.ts +111 -0
- package/package.json +6 -4
- 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 -0
- package/src/index.tsx +1 -0
- package/src/mappings/AudioPlayer.js +2 -39
- package/src/mappings/AudioPlayer.ts +1 -41
- package/src/mappings/TabView.js +73 -0
- package/src/mappings/TabView.ts +80 -0
|
@@ -21,6 +21,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
21
21
|
|
|
22
22
|
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; }
|
|
23
23
|
|
|
24
|
+
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); }
|
|
25
|
+
|
|
24
26
|
const AccordionItem = _ref => {
|
|
25
27
|
let {
|
|
26
28
|
Icon,
|
|
@@ -35,10 +37,9 @@ const AccordionItem = _ref => {
|
|
|
35
37
|
textStyles,
|
|
36
38
|
viewStyles
|
|
37
39
|
} = (0, _utilities.extractStyles)(style);
|
|
38
|
-
return /*#__PURE__*/React.createElement(_reactNative.Pressable, {
|
|
39
|
-
style: [styles.container, viewStyles]
|
|
40
|
-
|
|
41
|
-
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
40
|
+
return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
|
|
41
|
+
style: [styles.container, viewStyles]
|
|
42
|
+
}, rest), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
42
43
|
style: styles.row
|
|
43
44
|
}, icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
44
45
|
name: icon,
|
|
@@ -73,25 +74,4 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
73
74
|
|
|
74
75
|
var _default = (0, _theming.withTheme)(AccordionItem);
|
|
75
76
|
|
|
76
|
-
exports.default = _default;StyleSheet.create({
|
|
77
|
-
container: {
|
|
78
|
-
padding: 8
|
|
79
|
-
},
|
|
80
|
-
row: {
|
|
81
|
-
flexDirection: "row",
|
|
82
|
-
alignItems: "center",
|
|
83
|
-
paddingLeft: 8
|
|
84
|
-
},
|
|
85
|
-
item: {
|
|
86
|
-
marginVertical: 6,
|
|
87
|
-
paddingLeft: 8
|
|
88
|
-
},
|
|
89
|
-
content: {
|
|
90
|
-
flex: 1,
|
|
91
|
-
justifyContent: "center"
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
var _default = (0, _theming.withTheme)(AccordionItem);
|
|
96
|
-
|
|
97
77
|
exports.default = _default;
|
|
@@ -17,6 +17,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
17
17
|
|
|
18
18
|
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; }
|
|
19
19
|
|
|
20
|
+
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); }
|
|
21
|
+
|
|
20
22
|
const AnimatedProgress = _reactNative.Animated.createAnimatedComponent(_CircularProgress.default);
|
|
21
23
|
|
|
22
24
|
const AnimatedCircularProgress = _ref => {
|
|
@@ -67,18 +69,6 @@ const AnimatedCircularProgress = _ref => {
|
|
|
67
69
|
React.useEffect(() => {
|
|
68
70
|
animate();
|
|
69
71
|
}, [fill, animate]);
|
|
70
|
-
return /*#__PURE__*/React.createElement(AnimatedProgress, { ...other,
|
|
71
|
-
style: other.style,
|
|
72
|
-
childrenContainerStyle: other.childrenContainerStyle,
|
|
73
|
-
fill: fillAnimation,
|
|
74
|
-
tintColor: animateColor()
|
|
75
|
-
});
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
var _default = AnimatedCircularProgress;
|
|
79
|
-
exports.default = _default;eEffect(() => {
|
|
80
|
-
animate();
|
|
81
|
-
}, [fill, animate]);
|
|
82
72
|
return /*#__PURE__*/React.createElement(AnimatedProgress, _extends({}, other, {
|
|
83
73
|
style: other.style,
|
|
84
74
|
childrenContainerStyle: other.childrenContainerStyle,
|
|
@@ -17,6 +17,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
17
17
|
|
|
18
18
|
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; }
|
|
19
19
|
|
|
20
|
+
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); }
|
|
21
|
+
|
|
20
22
|
const CircleImage = _ref => {
|
|
21
23
|
let {
|
|
22
24
|
source = _Config.default.placeholderImageURL,
|
|
@@ -25,22 +27,6 @@ const CircleImage = _ref => {
|
|
|
25
27
|
...props
|
|
26
28
|
} = _ref;
|
|
27
29
|
const borderRadius = size / 2;
|
|
28
|
-
return /*#__PURE__*/React.createElement(_reactNative.Image, {
|
|
29
|
-
style: [{
|
|
30
|
-
width: size,
|
|
31
|
-
height: size,
|
|
32
|
-
borderRadius
|
|
33
|
-
}, style],
|
|
34
|
-
source: typeof source === "string" ? {
|
|
35
|
-
uri: source
|
|
36
|
-
} : source,
|
|
37
|
-
resizeMode: "cover",
|
|
38
|
-
...props
|
|
39
|
-
});
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
var _default = CircleImage;
|
|
43
|
-
exports.default = _default;size / 2;
|
|
44
30
|
return /*#__PURE__*/React.createElement(_reactNative.Image, _extends({
|
|
45
31
|
style: [{
|
|
46
32
|
width: size,
|
|
@@ -19,8 +19,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
19
19
|
|
|
20
20
|
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; }
|
|
21
21
|
|
|
22
|
-
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); }
|
|
23
|
-
|
|
24
22
|
const Container = _ref => {
|
|
25
23
|
let {
|
|
26
24
|
useThemeGutterPadding,
|
|
@@ -82,9 +80,10 @@ const Container = _ref => {
|
|
|
82
80
|
};
|
|
83
81
|
const Wrap = elevation ? _Elevation.default : _reactNative.View;
|
|
84
82
|
if (elevation) containerStyle.elevation = elevation;
|
|
85
|
-
return /*#__PURE__*/React.createElement(Wrap,
|
|
86
|
-
style: [containerStyle, style]
|
|
87
|
-
|
|
83
|
+
return /*#__PURE__*/React.createElement(Wrap, {
|
|
84
|
+
style: [containerStyle, style],
|
|
85
|
+
...rest
|
|
86
|
+
}, backgroundImage ? /*#__PURE__*/React.createElement(_reactNative.ImageBackground, {
|
|
88
87
|
source: typeof backgroundImage === "string" ? {
|
|
89
88
|
uri: backgroundImage
|
|
90
89
|
} : backgroundImage,
|
|
@@ -101,4 +100,17 @@ const Container = _ref => {
|
|
|
101
100
|
|
|
102
101
|
var _default = (0, _theming.withTheme)(Container);
|
|
103
102
|
|
|
103
|
+
exports.default = _default;izeMode: backgroundImageResizeMode,
|
|
104
|
+
style: {
|
|
105
|
+
flex: 1
|
|
106
|
+
}
|
|
107
|
+
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
108
|
+
style: innerStyle
|
|
109
|
+
}, children)) : /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
110
|
+
style: innerStyle
|
|
111
|
+
}, children));
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
var _default = (0, _theming.withTheme)(Container);
|
|
115
|
+
|
|
104
116
|
exports.default = _default;
|
|
@@ -13,10 +13,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
13
13
|
|
|
14
14
|
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; }
|
|
15
15
|
|
|
16
|
-
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); }
|
|
17
|
-
|
|
18
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
|
-
|
|
20
16
|
const INDETERMINATE_WIDTH_FACTOR = 0.3;
|
|
21
17
|
const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
|
|
22
18
|
|
|
@@ -24,7 +20,7 @@ class ProgressBar extends _react.Component {
|
|
|
24
20
|
constructor(props) {
|
|
25
21
|
super(props);
|
|
26
22
|
|
|
27
|
-
|
|
23
|
+
this.handleLayout = event => {
|
|
28
24
|
const {
|
|
29
25
|
width = 150,
|
|
30
26
|
onLayout
|
|
@@ -39,7 +35,7 @@ class ProgressBar extends _react.Component {
|
|
|
39
35
|
if (onLayout) {
|
|
40
36
|
onLayout(event);
|
|
41
37
|
}
|
|
42
|
-
}
|
|
38
|
+
};
|
|
43
39
|
|
|
44
40
|
const {
|
|
45
41
|
progress: progressP = 0,
|
|
@@ -93,7 +89,6 @@ class ProgressBar extends _react.Component {
|
|
|
93
89
|
_reactNative.Animated[animationType](this.state.progress, { ...animationConfig,
|
|
94
90
|
toValue: progress,
|
|
95
91
|
velocity: 0,
|
|
96
|
-
//adjust this value if animation fails - velocity is required
|
|
97
92
|
useNativeDriver
|
|
98
93
|
}).start();
|
|
99
94
|
} else {
|
|
@@ -165,6 +160,27 @@ class ProgressBar extends _react.Component {
|
|
|
165
160
|
})
|
|
166
161
|
}]
|
|
167
162
|
};
|
|
163
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
164
|
+
style: [containerStyle, style],
|
|
165
|
+
onLayout: this.handleLayout,
|
|
166
|
+
...restProps
|
|
167
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
168
|
+
style: progressStyle
|
|
169
|
+
}), children);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
exports.default = ProgressBar;h / (_reactNative.I18nManager.isRTL ? 2 : -2), 0]
|
|
175
|
+
})
|
|
176
|
+
}, {
|
|
177
|
+
// Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
|
|
178
|
+
scaleX: this.state.progress.interpolate({
|
|
179
|
+
inputRange: [0, 1],
|
|
180
|
+
outputRange: [0.0001, 1]
|
|
181
|
+
})
|
|
182
|
+
}]
|
|
183
|
+
};
|
|
168
184
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
|
|
169
185
|
style: [containerStyle, style],
|
|
170
186
|
onLayout: this.handleLayout
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var React = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNativeTabView = require("react-native-tab-view");
|
|
11
|
+
|
|
12
|
+
var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
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); }
|
|
17
|
+
|
|
18
|
+
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; }
|
|
19
|
+
|
|
20
|
+
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); }
|
|
21
|
+
|
|
22
|
+
const TabViewComponent = _ref => {
|
|
23
|
+
let {
|
|
24
|
+
Icon,
|
|
25
|
+
tabBarPosition,
|
|
26
|
+
keyboardDismissMode,
|
|
27
|
+
swipeEnabled,
|
|
28
|
+
scrollEnabled,
|
|
29
|
+
activeColor,
|
|
30
|
+
inactiveColor,
|
|
31
|
+
pressColor,
|
|
32
|
+
indicatorColor,
|
|
33
|
+
style,
|
|
34
|
+
children
|
|
35
|
+
} = _ref;
|
|
36
|
+
const [index, setIndex] = React.useState(0);
|
|
37
|
+
const [routes, setRoutes] = React.useState([]);
|
|
38
|
+
const [tabScenes, setTabScenes] = React.useState({});
|
|
39
|
+
React.useEffect(() => {
|
|
40
|
+
const newRoutes = [];
|
|
41
|
+
const scenes = {};
|
|
42
|
+
React.Children.toArray(children).filter(child => child.type === _TabViewItem.default).forEach(child => {
|
|
43
|
+
var _child$props;
|
|
44
|
+
|
|
45
|
+
if (child !== null && child !== void 0 && (_child$props = child.props) !== null && _child$props !== void 0 && _child$props.id) {
|
|
46
|
+
var _child$props2, _child$props3;
|
|
47
|
+
|
|
48
|
+
newRoutes.push({
|
|
49
|
+
key: child === null || child === void 0 ? void 0 : (_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.id,
|
|
50
|
+
...(child === null || child === void 0 ? void 0 : child.props)
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
scenes[child === null || child === void 0 ? void 0 : (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.id] = () => child;
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
setRoutes(newRoutes);
|
|
57
|
+
setTabScenes(scenes);
|
|
58
|
+
}, [children]);
|
|
59
|
+
|
|
60
|
+
const indexChangeHandler = i => setIndex(i);
|
|
61
|
+
|
|
62
|
+
const renderTabBar = props => {
|
|
63
|
+
console.log(props);
|
|
64
|
+
return /*#__PURE__*/React.createElement(_reactNativeTabView.TabBar, _extends({}, props, {
|
|
65
|
+
activeColor: activeColor,
|
|
66
|
+
inactiveColor: inactiveColor,
|
|
67
|
+
pressColor: pressColor,
|
|
68
|
+
scrollEnabled: scrollEnabled,
|
|
69
|
+
indicatorStyle: {
|
|
70
|
+
backgroundColor: indicatorColor
|
|
71
|
+
},
|
|
72
|
+
renderIcon: _ref2 => {
|
|
73
|
+
let {
|
|
74
|
+
route,
|
|
75
|
+
color
|
|
76
|
+
} = _ref2;
|
|
77
|
+
return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
78
|
+
name: route.icon,
|
|
79
|
+
color: color,
|
|
80
|
+
size: 36
|
|
81
|
+
}) : null;
|
|
82
|
+
},
|
|
83
|
+
style: style
|
|
84
|
+
}));
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
|
|
88
|
+
navigationState: {
|
|
89
|
+
index,
|
|
90
|
+
routes
|
|
91
|
+
},
|
|
92
|
+
renderScene: (0, _reactNativeTabView.SceneMap)(tabScenes),
|
|
93
|
+
renderTabBar: renderTabBar,
|
|
94
|
+
onIndexChange: indexChangeHandler,
|
|
95
|
+
tabBarPosition: tabBarPosition,
|
|
96
|
+
keyboardDismissMode: keyboardDismissMode,
|
|
97
|
+
swipeEnabled: swipeEnabled
|
|
98
|
+
});
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
var _default = TabViewComponent;
|
|
102
|
+
exports.default = _default;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
const TabViewItem = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
title,
|
|
11
|
+
id,
|
|
12
|
+
icon,
|
|
13
|
+
children,
|
|
14
|
+
accessibilityLabel
|
|
15
|
+
} = _ref;
|
|
16
|
+
console.log({
|
|
17
|
+
title,
|
|
18
|
+
id,
|
|
19
|
+
icon,
|
|
20
|
+
accessibilityLabel
|
|
21
|
+
});
|
|
22
|
+
return children;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
var _default = TabViewItem;
|
|
26
|
+
exports.default = _default;
|
|
@@ -0,0 +1,23 @@
|
|
|
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
|
+
|
|
19
|
+
var _TabView = _interopRequireDefault(require("./TabView"));
|
|
20
|
+
|
|
21
|
+
var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
|
|
22
|
+
|
|
23
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
package/lib/commonjs/index.js
CHANGED
|
@@ -369,6 +369,18 @@ Object.defineProperty(exports, "SwitchRow", {
|
|
|
369
369
|
return _Switch.SwitchRow;
|
|
370
370
|
}
|
|
371
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
|
+
});
|
|
372
384
|
Object.defineProperty(exports, "TextField", {
|
|
373
385
|
enumerable: true,
|
|
374
386
|
get: function () {
|
|
@@ -472,6 +484,8 @@ var _ActionSheet = require("./components/ActionSheet");
|
|
|
472
484
|
|
|
473
485
|
var _Swiper = require("./components/Swiper");
|
|
474
486
|
|
|
487
|
+
var _TabView = require("./components/TabView");
|
|
488
|
+
|
|
475
489
|
var _Layout = require("./components/Layout");
|
|
476
490
|
|
|
477
491
|
var _index = require("./components/RadioButton/index");
|
|
@@ -12,17 +12,7 @@ const SEED_DATA = {
|
|
|
12
12
|
tag: "AudioPlayer",
|
|
13
13
|
description: "Given a source URL, plays sounds & audio!",
|
|
14
14
|
category: _types.COMPONENT_TYPES.media,
|
|
15
|
-
|
|
16
|
-
layout: {
|
|
17
|
-
backgroundColor: "#eee",
|
|
18
|
-
paddingLeft: 16,
|
|
19
|
-
paddingRight: 16,
|
|
20
|
-
paddingTop: 8,
|
|
21
|
-
paddingBottom: 8,
|
|
22
|
-
borderRadius: 24,
|
|
23
|
-
flexDirection: "row",
|
|
24
|
-
alignItems: "center"
|
|
25
|
-
},
|
|
15
|
+
layout: {},
|
|
26
16
|
props: {
|
|
27
17
|
source: {
|
|
28
18
|
group: _types.GROUPS.data,
|
|
@@ -33,27 +23,7 @@ const SEED_DATA = {
|
|
|
33
23
|
defaultValue: "https://static.draftbit.com/audio/intro-to-draftbit-audio.mp3",
|
|
34
24
|
formType: _types.FORM_TYPES.sourceUrl,
|
|
35
25
|
propType: _types.PROP_TYPES.OBJECT
|
|
36
|
-
}
|
|
37
|
-
sliderColor: (0, _types.createColorProp)({
|
|
38
|
-
label: "Thumb Color",
|
|
39
|
-
defaultValue: "black"
|
|
40
|
-
}),
|
|
41
|
-
completedTrackColor: (0, _types.createColorProp)({
|
|
42
|
-
label: "Completed Track Color",
|
|
43
|
-
defaultValue: "white"
|
|
44
|
-
}),
|
|
45
|
-
remainingTrackColor: (0, _types.createColorProp)({
|
|
46
|
-
label: "Remaining Track Color",
|
|
47
|
-
defaultValue: "#333333"
|
|
48
|
-
}),
|
|
49
|
-
trackThumbSize: (0, _types.createNumberProp)({
|
|
50
|
-
label: "Thumb Size",
|
|
51
|
-
defaultValue: 24
|
|
52
|
-
}),
|
|
53
|
-
playIconColor: (0, _types.createColorProp)({
|
|
54
|
-
label: "Play Icon Color",
|
|
55
|
-
defaultValue: "black"
|
|
56
|
-
})
|
|
26
|
+
}
|
|
57
27
|
}
|
|
58
28
|
};
|
|
59
29
|
exports.SEED_DATA = SEED_DATA;
|
|
@@ -0,0 +1,79 @@
|
|
|
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: "Tab View",
|
|
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: "Tab View Item",
|
|
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,3 +1,5 @@
|
|
|
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
|
+
|
|
1
3
|
import * as React from "react";
|
|
2
4
|
import { Pressable, StyleSheet, View } from "react-native";
|
|
3
5
|
import Text from "../Text";
|
|
@@ -18,10 +20,9 @@ const AccordionItem = _ref => {
|
|
|
18
20
|
textStyles,
|
|
19
21
|
viewStyles
|
|
20
22
|
} = extractStyles(style);
|
|
21
|
-
return /*#__PURE__*/React.createElement(Pressable, {
|
|
22
|
-
style: [styles.container, viewStyles]
|
|
23
|
-
|
|
24
|
-
}, /*#__PURE__*/React.createElement(View, {
|
|
23
|
+
return /*#__PURE__*/React.createElement(Pressable, _extends({
|
|
24
|
+
style: [styles.container, viewStyles]
|
|
25
|
+
}, rest), /*#__PURE__*/React.createElement(View, {
|
|
25
26
|
style: styles.row
|
|
26
27
|
}, icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
27
28
|
name: icon,
|
|
@@ -35,28 +36,6 @@ const AccordionItem = _ref => {
|
|
|
35
36
|
}, label))));
|
|
36
37
|
};
|
|
37
38
|
|
|
38
|
-
const styles = StyleSheet.create({
|
|
39
|
-
container: {
|
|
40
|
-
padding: 8
|
|
41
|
-
},
|
|
42
|
-
row: {
|
|
43
|
-
flexDirection: "row",
|
|
44
|
-
alignItems: "center",
|
|
45
|
-
paddingLeft: 8
|
|
46
|
-
},
|
|
47
|
-
item: {
|
|
48
|
-
marginVertical: 6,
|
|
49
|
-
paddingLeft: 8
|
|
50
|
-
},
|
|
51
|
-
content: {
|
|
52
|
-
flex: 1,
|
|
53
|
-
justifyContent: "center"
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
export default withTheme(AccordionItem);xtStyles
|
|
57
|
-
}, label))));
|
|
58
|
-
};
|
|
59
|
-
|
|
60
39
|
const styles = StyleSheet.create({
|
|
61
40
|
container: {
|
|
62
41
|
padding: 8
|
|
@@ -0,0 +1,87 @@
|
|
|
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;
|