@draftbit/core 46.8.2-799d91.2 → 46.8.2-877fc5.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/Image.js +2 -17
- package/lib/commonjs/components/Portal/PortalHost.js +15 -44
- package/lib/commonjs/components/ScreenContainer.js +6 -24
- package/lib/commonjs/components/Shadow.js +46 -0
- package/lib/commonjs/components/TabView/TabView.js +116 -0
- package/lib/commonjs/components/TabView/TabViewItem.js +25 -0
- package/lib/commonjs/components/TabView/index.js +20 -0
- package/lib/commonjs/index.js +20 -0
- package/lib/commonjs/mappings/FlashList.js +2 -8
- package/lib/commonjs/mappings/Markdown.js +2 -2
- package/lib/commonjs/mappings/Shadow.js +102 -0
- package/lib/commonjs/mappings/TabView.js +74 -0
- package/lib/commonjs/mappings/TabViewItem.js +37 -0
- package/lib/module/components/Shadow.js +38 -0
- package/lib/module/components/TabView/TabView.js +107 -0
- package/lib/module/components/TabView/TabViewItem.js +20 -0
- package/lib/module/components/TabView/index.js +2 -0
- package/lib/module/index.js +2 -0
- package/lib/module/mappings/FlashList.js +3 -9
- package/lib/module/mappings/Markdown.js +2 -2
- package/lib/module/mappings/Shadow.js +95 -0
- package/lib/module/mappings/TabView.js +67 -0
- package/lib/module/mappings/TabViewItem.js +30 -0
- package/lib/typescript/src/components/Shadow.d.ts +24 -0
- package/lib/typescript/src/components/Shadow.d.ts.map +1 -0
- package/lib/typescript/src/components/TabView/TabView.d.ts +26 -0
- package/lib/typescript/src/components/TabView/TabView.d.ts.map +1 -0
- package/lib/typescript/src/components/TabView/TabViewItem.d.ts +11 -0
- package/lib/typescript/src/components/TabView/TabViewItem.d.ts.map +1 -0
- package/lib/typescript/src/components/TabView/index.d.ts +3 -0
- package/lib/typescript/src/components/TabView/index.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +2 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/mappings/FlashList.d.ts +0 -6
- package/lib/typescript/src/mappings/FlashList.d.ts.map +1 -1
- package/lib/typescript/src/mappings/Shadow.d.ts +173 -0
- package/lib/typescript/src/mappings/Shadow.d.ts.map +1 -0
- package/lib/typescript/src/mappings/TabView.d.ts +123 -0
- package/lib/typescript/src/mappings/TabView.d.ts.map +1 -0
- package/lib/typescript/src/mappings/TabViewItem.d.ts +25 -0
- package/lib/typescript/src/mappings/TabViewItem.d.ts.map +1 -0
- package/package.json +6 -3
- package/src/components/Shadow.js +16 -0
- package/src/components/Shadow.tsx +62 -0
- package/src/components/TabView/TabView.js +54 -0
- package/src/components/TabView/TabView.tsx +147 -0
- package/src/components/TabView/TabViewItem.js +11 -0
- package/src/components/TabView/TabViewItem.tsx +25 -0
- package/src/components/TabView/index.js +2 -0
- package/src/components/TabView/index.tsx +2 -0
- package/src/index.js +2 -0
- package/src/index.tsx +3 -0
- package/src/mappings/FlashList.js +9 -9
- package/src/mappings/FlashList.ts +9 -9
- package/src/mappings/Markdown.js +2 -2
- package/src/mappings/Markdown.ts +2 -2
- package/src/mappings/Shadow.js +95 -0
- package/src/mappings/Shadow.ts +104 -0
- package/src/mappings/TabView.js +75 -0
- package/src/mappings/TabView.ts +85 -0
- package/src/mappings/TabViewItem.js +30 -0
- package/src/mappings/TabViewItem.ts +38 -0
|
@@ -9,8 +9,7 @@ var _reactNative = require("react-native");
|
|
|
9
9
|
var _Config = _interopRequireDefault(require("./Config"));
|
|
10
10
|
var _AspectRatio = _interopRequireDefault(require("./AspectRatio"));
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
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
13
|
const generateDimensions = _ref => {
|
|
15
14
|
let {
|
|
16
15
|
aspectRatio,
|
|
@@ -63,27 +62,13 @@ const Image = _ref2 => {
|
|
|
63
62
|
height,
|
|
64
63
|
aspectRatio
|
|
65
64
|
}]
|
|
66
|
-
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
|
|
67
|
-
...props,
|
|
65
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, _extends({}, props, {
|
|
68
66
|
source: imageSource,
|
|
69
67
|
resizeMode: resizeMode,
|
|
70
68
|
style: [style, {
|
|
71
69
|
height: "100%",
|
|
72
70
|
width: "100%"
|
|
73
71
|
}]
|
|
74
|
-
}));
|
|
75
|
-
}
|
|
76
|
-
return /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
|
|
77
|
-
...props,
|
|
78
|
-
source: source,
|
|
79
|
-
resizeMode: resizeMode,
|
|
80
|
-
style: style
|
|
81
|
-
});
|
|
82
|
-
};
|
|
83
|
-
var _default = Image;
|
|
84
|
-
exports.default = _default; "100%",
|
|
85
|
-
width: "100%"
|
|
86
|
-
}]
|
|
87
72
|
})));
|
|
88
73
|
}
|
|
89
74
|
return /*#__PURE__*/_react.default.createElement(_reactNative.Image, _extends({}, props, {
|
|
@@ -10,7 +10,11 @@ var _PortalManager = _interopRequireDefault(require("./PortalManager"));
|
|
|
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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
14
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
15
|
+
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
13
16
|
const PortalContext = /*#__PURE__*/React.createContext(null);
|
|
17
|
+
|
|
14
18
|
/**
|
|
15
19
|
* Portal host renders all of its children `Portal` elements.
|
|
16
20
|
* For example, you can wrap a screen in `Portal.Host` to render items above the screen.
|
|
@@ -39,10 +43,10 @@ exports.PortalContext = PortalContext;
|
|
|
39
43
|
class PortalHost extends React.Component {
|
|
40
44
|
constructor() {
|
|
41
45
|
super(...arguments);
|
|
42
|
-
this
|
|
46
|
+
_defineProperty(this, "setManager", manager => {
|
|
43
47
|
this.manager = manager;
|
|
44
|
-
};
|
|
45
|
-
this
|
|
48
|
+
});
|
|
49
|
+
_defineProperty(this, "mount", children => {
|
|
46
50
|
const key = this.nextKey++;
|
|
47
51
|
if (this.manager) {
|
|
48
52
|
this.manager.mount(key, children);
|
|
@@ -54,8 +58,8 @@ class PortalHost extends React.Component {
|
|
|
54
58
|
});
|
|
55
59
|
}
|
|
56
60
|
return key;
|
|
57
|
-
};
|
|
58
|
-
this
|
|
61
|
+
});
|
|
62
|
+
_defineProperty(this, "update", (key, children) => {
|
|
59
63
|
if (this.manager) {
|
|
60
64
|
this.manager.update(key, children);
|
|
61
65
|
} else {
|
|
@@ -72,8 +76,8 @@ class PortalHost extends React.Component {
|
|
|
72
76
|
this.queue.push(op);
|
|
73
77
|
}
|
|
74
78
|
}
|
|
75
|
-
};
|
|
76
|
-
this
|
|
79
|
+
});
|
|
80
|
+
_defineProperty(this, "unmount", key => {
|
|
77
81
|
if (this.manager) {
|
|
78
82
|
this.manager.unmount(key);
|
|
79
83
|
} else {
|
|
@@ -82,9 +86,10 @@ class PortalHost extends React.Component {
|
|
|
82
86
|
key
|
|
83
87
|
});
|
|
84
88
|
}
|
|
85
|
-
};
|
|
86
|
-
this
|
|
87
|
-
this
|
|
89
|
+
});
|
|
90
|
+
_defineProperty(this, "nextKey", 0);
|
|
91
|
+
_defineProperty(this, "queue", []);
|
|
92
|
+
_defineProperty(this, "manager", void 0);
|
|
88
93
|
}
|
|
89
94
|
componentDidMount() {
|
|
90
95
|
const manager = this.manager;
|
|
@@ -123,40 +128,6 @@ class PortalHost extends React.Component {
|
|
|
123
128
|
}
|
|
124
129
|
}
|
|
125
130
|
exports.default = PortalHost;
|
|
126
|
-
PortalHost.displayName = "Portal.Host";
|
|
127
|
-
const styles = _reactNative.StyleSheet.create({
|
|
128
|
-
container: {
|
|
129
|
-
flex: 1
|
|
130
|
-
}
|
|
131
|
-
});nager.mount(action.key, action.children);
|
|
132
|
-
break;
|
|
133
|
-
case "update":
|
|
134
|
-
manager.update(action.key, action.children);
|
|
135
|
-
break;
|
|
136
|
-
case "unmount":
|
|
137
|
-
manager.unmount(action.key);
|
|
138
|
-
break;
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
render() {
|
|
144
|
-
return /*#__PURE__*/React.createElement(PortalContext.Provider, {
|
|
145
|
-
value: {
|
|
146
|
-
mount: this.mount,
|
|
147
|
-
update: this.update,
|
|
148
|
-
unmount: this.unmount
|
|
149
|
-
}
|
|
150
|
-
}, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
151
|
-
style: styles.container,
|
|
152
|
-
collapsable: false,
|
|
153
|
-
pointerEvents: "box-none"
|
|
154
|
-
}, this.props.children), /*#__PURE__*/React.createElement(_PortalManager.default, {
|
|
155
|
-
ref: this.setManager
|
|
156
|
-
}));
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
exports.default = PortalHost;
|
|
160
131
|
_defineProperty(PortalHost, "displayName", "Portal.Host");
|
|
161
132
|
const styles = _reactNative.StyleSheet.create({
|
|
162
133
|
container: {
|
|
@@ -10,7 +10,9 @@ var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
|
|
|
10
10
|
var _theming = require("../theming");
|
|
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
|
function ScreenContainer(_ref) {
|
|
15
|
+
var _StyleSheet$flatten;
|
|
14
16
|
let {
|
|
15
17
|
scrollable = false,
|
|
16
18
|
hasSafeArea = false,
|
|
@@ -21,8 +23,7 @@ function ScreenContainer(_ref) {
|
|
|
21
23
|
children,
|
|
22
24
|
...rest
|
|
23
25
|
} = _ref;
|
|
24
|
-
|
|
25
|
-
const backgroundColor = ((_a = _reactNative.StyleSheet.flatten(style)) === null || _a === void 0 ? void 0 : _a.backgroundColor) || theme.colors.background;
|
|
26
|
+
const backgroundColor = ((_StyleSheet$flatten = _reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.backgroundColor) || theme.colors.background;
|
|
26
27
|
const edges = ["left", "right"];
|
|
27
28
|
if (hasSafeArea || hasTopSafeArea) {
|
|
28
29
|
edges.push("top");
|
|
@@ -30,13 +31,12 @@ function ScreenContainer(_ref) {
|
|
|
30
31
|
if (hasSafeArea || hasBottomSafeArea) {
|
|
31
32
|
edges.push("bottom");
|
|
32
33
|
}
|
|
33
|
-
return /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaView, {
|
|
34
|
+
return /*#__PURE__*/React.createElement(_reactNativeSafeAreaContext.SafeAreaView, _extends({
|
|
34
35
|
edges: edges,
|
|
35
36
|
style: [styles.container, {
|
|
36
37
|
backgroundColor
|
|
37
|
-
}]
|
|
38
|
-
|
|
39
|
-
}, scrollable ? /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
|
|
38
|
+
}]
|
|
39
|
+
}, rest), scrollable ? /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
|
|
40
40
|
contentContainerStyle: [styles.scrollViewContainer, {
|
|
41
41
|
backgroundColor
|
|
42
42
|
}, style]
|
|
@@ -56,22 +56,4 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
56
56
|
}
|
|
57
57
|
});
|
|
58
58
|
var _default = (0, _theming.withTheme)(ScreenContainer);
|
|
59
|
-
exports.default = _default;olor
|
|
60
|
-
}, style]
|
|
61
|
-
}, children) : /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
62
|
-
style: [styles.container, {
|
|
63
|
-
backgroundColor
|
|
64
|
-
}, style]
|
|
65
|
-
}, children));
|
|
66
|
-
}
|
|
67
|
-
const styles = _reactNative.StyleSheet.create({
|
|
68
|
-
container: {
|
|
69
|
-
flex: 1
|
|
70
|
-
},
|
|
71
|
-
scrollViewContainer: {
|
|
72
|
-
flexGrow: 1,
|
|
73
|
-
flex: undefined
|
|
74
|
-
}
|
|
75
|
-
});
|
|
76
|
-
var _default = (0, _theming.withTheme)(ScreenContainer);
|
|
77
59
|
exports.default = _default;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNativeShadow = require("react-native-shadow-2");
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
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); }
|
|
11
|
+
const Shadow = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
offsetX = 0,
|
|
14
|
+
offsetY = 0,
|
|
15
|
+
showShadowSideStart = true,
|
|
16
|
+
showShadowSideEnd = true,
|
|
17
|
+
showShadowSideTop = true,
|
|
18
|
+
showShadowSideBottom = true,
|
|
19
|
+
showShadowCornerTopStart = true,
|
|
20
|
+
showShadowCornerTopEnd = true,
|
|
21
|
+
showShadowCornerBottomStart = true,
|
|
22
|
+
showShadowCornerBottomEnd = true,
|
|
23
|
+
paintInside = false,
|
|
24
|
+
style,
|
|
25
|
+
...rest
|
|
26
|
+
} = _ref;
|
|
27
|
+
return /*#__PURE__*/_react.default.createElement(_reactNativeShadow.Shadow, _extends({
|
|
28
|
+
offset: [offsetX, offsetY],
|
|
29
|
+
sides: {
|
|
30
|
+
start: showShadowSideStart,
|
|
31
|
+
end: showShadowSideEnd,
|
|
32
|
+
top: showShadowSideTop,
|
|
33
|
+
bottom: showShadowSideBottom
|
|
34
|
+
},
|
|
35
|
+
corners: {
|
|
36
|
+
topStart: showShadowCornerTopStart,
|
|
37
|
+
topEnd: showShadowCornerTopEnd,
|
|
38
|
+
bottomStart: showShadowCornerBottomStart,
|
|
39
|
+
bottomEnd: showShadowCornerBottomEnd
|
|
40
|
+
},
|
|
41
|
+
containerStyle: style,
|
|
42
|
+
paintInside: paintInside
|
|
43
|
+
}, rest));
|
|
44
|
+
};
|
|
45
|
+
var _default = Shadow;
|
|
46
|
+
exports.default = _default;
|
|
@@ -0,0 +1,116 @@
|
|
|
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 _theming = require("../../theming");
|
|
10
|
+
var _utilities = require("../../utilities");
|
|
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
|
+
onIndexChanged,
|
|
18
|
+
onEndReached,
|
|
19
|
+
tabBarPosition,
|
|
20
|
+
keyboardDismissMode,
|
|
21
|
+
swipeEnabled,
|
|
22
|
+
scrollEnabled,
|
|
23
|
+
activeColor,
|
|
24
|
+
inactiveColor,
|
|
25
|
+
pressColor,
|
|
26
|
+
indicatorColor,
|
|
27
|
+
tabsBackgroundColor,
|
|
28
|
+
style,
|
|
29
|
+
theme,
|
|
30
|
+
children
|
|
31
|
+
} = _ref;
|
|
32
|
+
const [index, setIndex] = React.useState(0);
|
|
33
|
+
const [routes, setRoutes] = React.useState([]);
|
|
34
|
+
const [tabScenes, setTabScenes] = React.useState({});
|
|
35
|
+
const {
|
|
36
|
+
textStyles,
|
|
37
|
+
viewStyles
|
|
38
|
+
} = (0, _utilities.extractStyles)(style);
|
|
39
|
+
|
|
40
|
+
//Check type of child using props
|
|
41
|
+
//Regular '.type' cannot work because Draftbit strips the type in Draft view
|
|
42
|
+
const instanceOfTabViewItemProps = object => {
|
|
43
|
+
return "title" in object;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
//Populate routes and scenes based on children
|
|
47
|
+
React.useEffect(() => {
|
|
48
|
+
const newRoutes = [];
|
|
49
|
+
const scenes = {};
|
|
50
|
+
React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && instanceOfTabViewItemProps(child.props)).forEach((item, idx) => {
|
|
51
|
+
const child = item;
|
|
52
|
+
newRoutes.push({
|
|
53
|
+
key: idx.toString(),
|
|
54
|
+
title: child.props.title,
|
|
55
|
+
icon: child.props.icon,
|
|
56
|
+
accessibilityLabel: child.props.accessibilityLabel
|
|
57
|
+
});
|
|
58
|
+
scenes[idx] = () => child;
|
|
59
|
+
});
|
|
60
|
+
setRoutes(newRoutes);
|
|
61
|
+
setTabScenes(scenes);
|
|
62
|
+
}, [children]);
|
|
63
|
+
const indexChangeHandler = i => {
|
|
64
|
+
setIndex(i);
|
|
65
|
+
onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
|
|
66
|
+
if (i === routes.length) {
|
|
67
|
+
onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
const renderTabBar = props => {
|
|
71
|
+
return /*#__PURE__*/React.createElement(_reactNativeTabView.TabBar, _extends({}, props, {
|
|
72
|
+
activeColor: activeColor || theme.colors.primary,
|
|
73
|
+
inactiveColor: inactiveColor || theme.colors.divider,
|
|
74
|
+
pressColor: pressColor || theme.colors.primary,
|
|
75
|
+
scrollEnabled: scrollEnabled,
|
|
76
|
+
indicatorStyle: {
|
|
77
|
+
backgroundColor: indicatorColor || theme.colors.primary
|
|
78
|
+
},
|
|
79
|
+
labelStyle: textStyles,
|
|
80
|
+
renderIcon: _ref2 => {
|
|
81
|
+
let {
|
|
82
|
+
route,
|
|
83
|
+
color
|
|
84
|
+
} = _ref2;
|
|
85
|
+
return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
86
|
+
name: route.icon,
|
|
87
|
+
color: color,
|
|
88
|
+
size: 16
|
|
89
|
+
}) : null;
|
|
90
|
+
},
|
|
91
|
+
style: {
|
|
92
|
+
backgroundColor: tabsBackgroundColor || theme.colors.background
|
|
93
|
+
}
|
|
94
|
+
}));
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
//Cannot render TabView without at least one tab
|
|
98
|
+
if (!routes.length) {
|
|
99
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
100
|
+
}
|
|
101
|
+
return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
|
|
102
|
+
style: [viewStyles],
|
|
103
|
+
navigationState: {
|
|
104
|
+
index,
|
|
105
|
+
routes
|
|
106
|
+
},
|
|
107
|
+
renderScene: (0, _reactNativeTabView.SceneMap)(tabScenes),
|
|
108
|
+
renderTabBar: renderTabBar,
|
|
109
|
+
onIndexChange: indexChangeHandler,
|
|
110
|
+
tabBarPosition: tabBarPosition,
|
|
111
|
+
keyboardDismissMode: keyboardDismissMode,
|
|
112
|
+
swipeEnabled: swipeEnabled
|
|
113
|
+
});
|
|
114
|
+
};
|
|
115
|
+
var _default = (0, _theming.withTheme)(TabViewComponent);
|
|
116
|
+
exports.default = _default;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
const TabViewItem = _ref => {
|
|
11
|
+
let {
|
|
12
|
+
style,
|
|
13
|
+
children
|
|
14
|
+
} = _ref;
|
|
15
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
16
|
+
style: [styles.parentContainer, style]
|
|
17
|
+
}, children);
|
|
18
|
+
};
|
|
19
|
+
const styles = _reactNative.StyleSheet.create({
|
|
20
|
+
parentContainer: {
|
|
21
|
+
flex: 1
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
var _default = TabViewItem;
|
|
25
|
+
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 }; }
|
package/lib/commonjs/index.js
CHANGED
|
@@ -279,6 +279,12 @@ Object.defineProperty(exports, "ScreenContainer", {
|
|
|
279
279
|
return _ScreenContainer.default;
|
|
280
280
|
}
|
|
281
281
|
});
|
|
282
|
+
Object.defineProperty(exports, "Shadow", {
|
|
283
|
+
enumerable: true,
|
|
284
|
+
get: function () {
|
|
285
|
+
return _Shadow.default;
|
|
286
|
+
}
|
|
287
|
+
});
|
|
282
288
|
Object.defineProperty(exports, "Slider", {
|
|
283
289
|
enumerable: true,
|
|
284
290
|
get: function () {
|
|
@@ -345,6 +351,18 @@ Object.defineProperty(exports, "SwitchRow", {
|
|
|
345
351
|
return _Switch.SwitchRow;
|
|
346
352
|
}
|
|
347
353
|
});
|
|
354
|
+
Object.defineProperty(exports, "TabView", {
|
|
355
|
+
enumerable: true,
|
|
356
|
+
get: function () {
|
|
357
|
+
return _TabView.TabView;
|
|
358
|
+
}
|
|
359
|
+
});
|
|
360
|
+
Object.defineProperty(exports, "TabViewItem", {
|
|
361
|
+
enumerable: true,
|
|
362
|
+
get: function () {
|
|
363
|
+
return _TabView.TabViewItem;
|
|
364
|
+
}
|
|
365
|
+
});
|
|
348
366
|
Object.defineProperty(exports, "TextField", {
|
|
349
367
|
enumerable: true,
|
|
350
368
|
get: function () {
|
|
@@ -419,7 +437,9 @@ var _ActionSheet = require("./components/ActionSheet");
|
|
|
419
437
|
var _Swiper = require("./components/Swiper");
|
|
420
438
|
var _Layout = require("./components/Layout");
|
|
421
439
|
var _index = require("./components/RadioButton/index");
|
|
440
|
+
var _Shadow = _interopRequireDefault(require("./components/Shadow"));
|
|
422
441
|
var _DeckSwiper = require("./components/DeckSwiper");
|
|
442
|
+
var _TabView = require("./components/TabView");
|
|
423
443
|
var _Markdown = _interopRequireDefault(require("./components/Markdown"));
|
|
424
444
|
var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
|
|
425
445
|
var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
|
|
@@ -11,10 +11,7 @@ const SEED_DATA = [{
|
|
|
11
11
|
description: "Masonry Flashlist by Shopify",
|
|
12
12
|
packageName: "@shopify/flash-list",
|
|
13
13
|
category: _types.COMPONENT_TYPES.data,
|
|
14
|
-
stylesPanelSections: _types.
|
|
15
|
-
layout: {
|
|
16
|
-
flex: 1
|
|
17
|
-
},
|
|
14
|
+
stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.MarginsAndPaddings],
|
|
18
15
|
triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
|
|
19
16
|
props: {
|
|
20
17
|
onRefresh: (0, _types.createActionProp)(),
|
|
@@ -61,10 +58,7 @@ const SEED_DATA = [{
|
|
|
61
58
|
description: "Flashlist by Shopify",
|
|
62
59
|
packageName: "@shopify/flash-list",
|
|
63
60
|
category: _types.COMPONENT_TYPES.data,
|
|
64
|
-
stylesPanelSections: _types.
|
|
65
|
-
layout: {
|
|
66
|
-
flex: 1
|
|
67
|
-
},
|
|
61
|
+
stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.MarginsAndPaddings],
|
|
68
62
|
triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
|
|
69
63
|
props: {
|
|
70
64
|
onRefresh: (0, _types.createActionProp)(),
|
|
@@ -9,7 +9,7 @@ const SEED_DATA = {
|
|
|
9
9
|
name: "Markdown",
|
|
10
10
|
tag: "Markdown",
|
|
11
11
|
description: "A component that renders markdown",
|
|
12
|
-
category: _types.COMPONENT_TYPES.
|
|
12
|
+
category: _types.COMPONENT_TYPES.text,
|
|
13
13
|
stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Effects],
|
|
14
14
|
props: {
|
|
15
15
|
children: {
|
|
@@ -20,7 +20,7 @@ const SEED_DATA = {
|
|
|
20
20
|
required: true,
|
|
21
21
|
formType: _types.FORM_TYPES.string,
|
|
22
22
|
propType: _types.PROP_TYPES.STRING,
|
|
23
|
-
defaultValue: "
|
|
23
|
+
defaultValue: "### Markdown"
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
};
|
|
@@ -0,0 +1,102 @@
|
|
|
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: "Shadow",
|
|
10
|
+
tag: "Shadow",
|
|
11
|
+
description: "A cross-platform, universal shadow.",
|
|
12
|
+
category: _types.COMPONENT_TYPES.view,
|
|
13
|
+
stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
14
|
+
props: {
|
|
15
|
+
disabled: (0, _types.createDisabledProp)({
|
|
16
|
+
description: "Disables the shadow."
|
|
17
|
+
}),
|
|
18
|
+
startColor: (0, _types.createColorProp)({
|
|
19
|
+
label: "Start Color",
|
|
20
|
+
description: "The initial gradient color of the shadow.",
|
|
21
|
+
defaultValue: null
|
|
22
|
+
}),
|
|
23
|
+
endColor: (0, _types.createColorProp)({
|
|
24
|
+
label: "End Color",
|
|
25
|
+
description: "The final gradient color of the shadow.",
|
|
26
|
+
defaultValue: null
|
|
27
|
+
}),
|
|
28
|
+
distance: (0, _types.createStaticNumberProp)({
|
|
29
|
+
label: "Distance",
|
|
30
|
+
description: "The distance of the shadow."
|
|
31
|
+
}),
|
|
32
|
+
paintInside: (0, _types.createStaticBoolProp)({
|
|
33
|
+
label: "Paint Inside",
|
|
34
|
+
description: "Apply the shadow below/inside the content.",
|
|
35
|
+
defaultValue: false
|
|
36
|
+
}),
|
|
37
|
+
stretch: (0, _types.createStaticBoolProp)({
|
|
38
|
+
label: "Stretch",
|
|
39
|
+
description: "Force children to occupy all available horizontal space.",
|
|
40
|
+
defaultValue: null
|
|
41
|
+
}),
|
|
42
|
+
offsetX: (0, _types.createStaticNumberProp)({
|
|
43
|
+
label: "Offset X",
|
|
44
|
+
description: "Moves the shadow in the x direction",
|
|
45
|
+
defeaultValue: 0
|
|
46
|
+
}),
|
|
47
|
+
offsetY: (0, _types.createStaticNumberProp)({
|
|
48
|
+
label: "Offset Y",
|
|
49
|
+
description: "Moves the shadow in the y direction",
|
|
50
|
+
defeaultValue: 0
|
|
51
|
+
}),
|
|
52
|
+
showShadowSideStart: (0, _types.createStaticBoolProp)({
|
|
53
|
+
label: "Show Shadow Start",
|
|
54
|
+
description: "Whether to show shadow on the start side or not",
|
|
55
|
+
defaultValue: true,
|
|
56
|
+
group: _types.GROUPS.advanced
|
|
57
|
+
}),
|
|
58
|
+
showShadowSideEnd: (0, _types.createStaticBoolProp)({
|
|
59
|
+
label: "Show Shadow End",
|
|
60
|
+
description: "Whether to show shadow on the end side or not",
|
|
61
|
+
defaultValue: true,
|
|
62
|
+
group: _types.GROUPS.advanced
|
|
63
|
+
}),
|
|
64
|
+
showShadowSideTop: (0, _types.createStaticBoolProp)({
|
|
65
|
+
label: "Show Shadow Top",
|
|
66
|
+
description: "Whether to show shadow on the top side or not",
|
|
67
|
+
defaultValue: true,
|
|
68
|
+
group: _types.GROUPS.advanced
|
|
69
|
+
}),
|
|
70
|
+
showShadowSideBottom: (0, _types.createStaticBoolProp)({
|
|
71
|
+
label: "Show Shadow Bottom",
|
|
72
|
+
description: "Whether to show shadow on the bottom side or not",
|
|
73
|
+
defaultValue: true,
|
|
74
|
+
group: _types.GROUPS.advanced
|
|
75
|
+
}),
|
|
76
|
+
showShadowCornerTopStart: (0, _types.createStaticBoolProp)({
|
|
77
|
+
label: "Show Shadow Top Start Corner",
|
|
78
|
+
description: "Whether to show shadow on the top start corner or not",
|
|
79
|
+
defaultValue: true,
|
|
80
|
+
group: _types.GROUPS.advanced
|
|
81
|
+
}),
|
|
82
|
+
showShadowCornerTopEnd: (0, _types.createStaticBoolProp)({
|
|
83
|
+
label: "Show Shadow Top End Corner",
|
|
84
|
+
description: "Whether to show shadow on the top end corner or not",
|
|
85
|
+
defaultValue: true,
|
|
86
|
+
group: _types.GROUPS.advanced
|
|
87
|
+
}),
|
|
88
|
+
showShadowCornerBottomStart: (0, _types.createStaticBoolProp)({
|
|
89
|
+
label: "Show Shadow Bottom Start Corner",
|
|
90
|
+
description: "Whether to show shadow on the bottom start corner or not",
|
|
91
|
+
defaultValue: true,
|
|
92
|
+
group: _types.GROUPS.advanced
|
|
93
|
+
}),
|
|
94
|
+
showShadowCornerBottomEnd: (0, _types.createStaticBoolProp)({
|
|
95
|
+
label: "Show Shadow Bottom End Corner",
|
|
96
|
+
description: "Whether to show shadow on the bottom end corner or not",
|
|
97
|
+
defaultValue: true,
|
|
98
|
+
group: _types.GROUPS.advanced
|
|
99
|
+
})
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
exports.SEED_DATA = SEED_DATA;
|
|
@@ -0,0 +1,74 @@
|
|
|
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
|
+
description: "Tab view container",
|
|
12
|
+
category: _types.COMPONENT_TYPES.swiper,
|
|
13
|
+
stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.Background, _types.StylesPanelSections.Typography],
|
|
14
|
+
triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
|
|
15
|
+
props: {
|
|
16
|
+
onIndexChanged: (0, _types.createActionProp)({
|
|
17
|
+
label: "On index changed",
|
|
18
|
+
description: "Action to execute when swipe to new index"
|
|
19
|
+
}),
|
|
20
|
+
onEndReached: (0, _types.createActionProp)({
|
|
21
|
+
label: "On end reached",
|
|
22
|
+
description: "Action to execute when end of swiping reached"
|
|
23
|
+
}),
|
|
24
|
+
tabBarPosition: (0, _types.createTextEnumProp)({
|
|
25
|
+
label: "Tab Bar Position",
|
|
26
|
+
description: "Position of tab bar",
|
|
27
|
+
options: ["top", "bottom"],
|
|
28
|
+
defaultValue: "top"
|
|
29
|
+
}),
|
|
30
|
+
keyboardDismissMode: (0, _types.createTextEnumProp)({
|
|
31
|
+
label: "Keyboard Dismiss Mode",
|
|
32
|
+
description: "Keyboard Dismiss Mode",
|
|
33
|
+
options: ["auto", "on-drag", "none"],
|
|
34
|
+
defaultValue: "auto"
|
|
35
|
+
}),
|
|
36
|
+
swipeEnabled: (0, _types.createStaticBoolProp)({
|
|
37
|
+
label: "Swipe Enabled",
|
|
38
|
+
description: "Whether swiping is enabled or not",
|
|
39
|
+
defaultValue: true
|
|
40
|
+
}),
|
|
41
|
+
scrollEnabled: (0, _types.createStaticBoolProp)({
|
|
42
|
+
label: "Tab Scroll Enabled",
|
|
43
|
+
description: "Whether scrolling of tabs is enabled or not",
|
|
44
|
+
defaultValue: false
|
|
45
|
+
}),
|
|
46
|
+
activeColor: (0, _types.createColorProp)({
|
|
47
|
+
label: "Active Color",
|
|
48
|
+
description: "Color of icon and text of active tab",
|
|
49
|
+
defaultValue: "primary"
|
|
50
|
+
}),
|
|
51
|
+
inactiveColor: (0, _types.createColorProp)({
|
|
52
|
+
label: "Inactive Color",
|
|
53
|
+
description: "Color of icon and text of inactive tab(s)",
|
|
54
|
+
defaultValue: null
|
|
55
|
+
}),
|
|
56
|
+
pressColor: (0, _types.createColorProp)({
|
|
57
|
+
label: "Press Color",
|
|
58
|
+
description: "Color of ripple when pressed",
|
|
59
|
+
defaultValue: "primary",
|
|
60
|
+
group: _types.GROUPS.android
|
|
61
|
+
}),
|
|
62
|
+
indicatorColor: (0, _types.createColorProp)({
|
|
63
|
+
label: "Indicator Color",
|
|
64
|
+
description: "Color of indicator",
|
|
65
|
+
defaultValue: "primary"
|
|
66
|
+
}),
|
|
67
|
+
tabsBackgroundColor: (0, _types.createColorProp)({
|
|
68
|
+
label: "Tabs Background Color",
|
|
69
|
+
description: "Background color of tabs container",
|
|
70
|
+
defaultValue: "background"
|
|
71
|
+
})
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
exports.SEED_DATA = SEED_DATA;
|