@draftbit/core 46.8.2-a9cd67.2 → 46.8.2-bdb2fb.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/Portal/PortalConsumer.js +7 -22
- package/lib/commonjs/components/TabView/TabView.js +113 -0
- package/lib/commonjs/components/TabView/TabViewItem.js +25 -0
- package/lib/commonjs/components/TabView/index.js +20 -0
- package/lib/commonjs/index.js +13 -7
- package/lib/commonjs/mappings/TabView.js +77 -0
- package/lib/commonjs/mappings/TabViewItem.js +37 -0
- package/lib/module/components/CircularProgress.js +8 -28
- package/lib/module/components/Portal/PortalManager.js +33 -7
- package/lib/module/components/TabView/TabView.js +103 -0
- package/lib/module/components/TabView/TabViewItem.js +20 -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/module/mappings/TabViewItem.js +30 -0
- package/lib/module/styles/overlay.js +3 -1
- 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 +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/mappings/TabView.d.ts +126 -0
- package/lib/typescript/src/mappings/TabView.d.ts.map +1 -0
- package/lib/typescript/src/mappings/{Markdown.d.ts → TabViewItem.d.ts} +10 -5
- package/lib/typescript/src/mappings/TabViewItem.d.ts.map +1 -0
- package/package.json +5 -4
- package/src/components/TabView/TabView.js +50 -0
- package/src/components/TabView/TabView.tsx +137 -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 +1 -1
- package/src/index.tsx +1 -1
- package/src/mappings/TabView.js +76 -0
- package/src/mappings/TabView.ts +86 -0
- package/src/mappings/TabViewItem.js +30 -0
- package/src/mappings/TabViewItem.ts +38 -0
- package/lib/commonjs/components/Markdown.js +0 -30
- package/lib/commonjs/mappings/Markdown.js +0 -27
- package/lib/module/components/Markdown.js +0 -20
- package/lib/module/mappings/Markdown.js +0 -20
- package/lib/typescript/src/components/Markdown.d.ts +0 -8
- package/lib/typescript/src/components/Markdown.d.ts.map +0 -1
- package/lib/typescript/src/mappings/Markdown.d.ts.map +0 -1
- package/src/components/Markdown.js +0 -10
- package/src/components/Markdown.tsx +0 -22
- package/src/mappings/Markdown.js +0 -25
- package/src/mappings/Markdown.ts +0 -32
|
@@ -7,31 +7,16 @@ exports.default = void 0;
|
|
|
7
7
|
var React = _interopRequireWildcard(require("react"));
|
|
8
8
|
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); }
|
|
9
9
|
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; }
|
|
10
|
+
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; }
|
|
11
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
12
|
+
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); }
|
|
10
13
|
class PortalConsumer extends React.Component {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
await Promise.resolve();
|
|
15
|
-
this.key = this.props.manager.mount(this.props.children);
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
_defineProperty(this, "key", void 0);
|
|
16
17
|
}
|
|
17
|
-
|
|
18
|
-
this.checkManager();
|
|
19
|
-
this.props.manager.update(this.key, this.props.children);
|
|
20
|
-
}
|
|
21
|
-
componentWillUnmount() {
|
|
18
|
+
async componentDidMount() {
|
|
22
19
|
this.checkManager();
|
|
23
|
-
this.props.manager.unmount(this.key);
|
|
24
|
-
}
|
|
25
|
-
checkManager() {
|
|
26
|
-
if (!this.props.manager) {
|
|
27
|
-
throw new Error("Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.\n\n" + "Please read our getting-started guide and make sure you've followed all the required steps.\n\n" + "https://callstack.github.io/react-native-paper/getting-started.html");
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
render() {
|
|
31
|
-
return null;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
exports.default = PortalConsumer;s.checkManager();
|
|
35
20
|
|
|
36
21
|
// Delay updating to prevent React from going to infinite loop
|
|
37
22
|
await Promise.resolve();
|
|
@@ -0,0 +1,113 @@
|
|
|
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 _reactNative = require("react-native");
|
|
9
|
+
var _reactNativeTabView = require("react-native-tab-view");
|
|
10
|
+
var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
|
|
11
|
+
var _theming = require("../../theming");
|
|
12
|
+
var _utilities = require("../../utilities");
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
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); }
|
|
15
|
+
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; }
|
|
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
|
+
const TabViewComponent = _ref => {
|
|
18
|
+
let {
|
|
19
|
+
Icon,
|
|
20
|
+
onIndexChanged,
|
|
21
|
+
onEndReached,
|
|
22
|
+
tabBarPosition,
|
|
23
|
+
keyboardDismissMode,
|
|
24
|
+
swipeEnabled,
|
|
25
|
+
scrollEnabled,
|
|
26
|
+
activeColor,
|
|
27
|
+
inactiveColor,
|
|
28
|
+
pressColor,
|
|
29
|
+
indicatorColor,
|
|
30
|
+
tabsBackgroundColor,
|
|
31
|
+
style,
|
|
32
|
+
theme,
|
|
33
|
+
children
|
|
34
|
+
} = _ref;
|
|
35
|
+
const [index, setIndex] = React.useState(0);
|
|
36
|
+
const [routes, setRoutes] = React.useState([]);
|
|
37
|
+
const [tabScenes, setTabScenes] = React.useState({});
|
|
38
|
+
const {
|
|
39
|
+
textStyles,
|
|
40
|
+
viewStyles
|
|
41
|
+
} = (0, _utilities.extractStyles)(style);
|
|
42
|
+
|
|
43
|
+
//Populate routes and scenes based on children
|
|
44
|
+
React.useEffect(() => {
|
|
45
|
+
const newRoutes = [];
|
|
46
|
+
const scenes = {};
|
|
47
|
+
React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === _TabViewItem.default).forEach((item, idx) => {
|
|
48
|
+
const child = item;
|
|
49
|
+
newRoutes.push({
|
|
50
|
+
key: idx.toString(),
|
|
51
|
+
title: child.props.title,
|
|
52
|
+
icon: child.props.icon,
|
|
53
|
+
accessibilityLabel: child.props.accessibilityLabel
|
|
54
|
+
});
|
|
55
|
+
scenes[idx] = () => child;
|
|
56
|
+
});
|
|
57
|
+
setRoutes(newRoutes);
|
|
58
|
+
setTabScenes(scenes);
|
|
59
|
+
}, [children]);
|
|
60
|
+
const indexChangeHandler = i => {
|
|
61
|
+
setIndex(i);
|
|
62
|
+
onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
|
|
63
|
+
if (i === routes.length) {
|
|
64
|
+
onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
const renderTabBar = props => {
|
|
68
|
+
return /*#__PURE__*/React.createElement(_reactNativeTabView.TabBar, _extends({}, props, {
|
|
69
|
+
activeColor: activeColor || theme.colors.primary,
|
|
70
|
+
inactiveColor: inactiveColor || theme.colors.divider,
|
|
71
|
+
pressColor: pressColor || theme.colors.primary,
|
|
72
|
+
scrollEnabled: scrollEnabled,
|
|
73
|
+
indicatorStyle: {
|
|
74
|
+
backgroundColor: indicatorColor || theme.colors.primary
|
|
75
|
+
},
|
|
76
|
+
labelStyle: textStyles,
|
|
77
|
+
renderIcon: _ref2 => {
|
|
78
|
+
let {
|
|
79
|
+
route,
|
|
80
|
+
color
|
|
81
|
+
} = _ref2;
|
|
82
|
+
return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
83
|
+
name: route.icon,
|
|
84
|
+
color: color,
|
|
85
|
+
size: 36
|
|
86
|
+
}) : null;
|
|
87
|
+
},
|
|
88
|
+
style: {
|
|
89
|
+
backgroundColor: tabsBackgroundColor || theme.colors.background
|
|
90
|
+
}
|
|
91
|
+
}));
|
|
92
|
+
};
|
|
93
|
+
return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
|
|
94
|
+
style: [styles.tabView, viewStyles],
|
|
95
|
+
navigationState: {
|
|
96
|
+
index,
|
|
97
|
+
routes
|
|
98
|
+
},
|
|
99
|
+
renderScene: (0, _reactNativeTabView.SceneMap)(tabScenes),
|
|
100
|
+
renderTabBar: renderTabBar,
|
|
101
|
+
onIndexChange: indexChangeHandler,
|
|
102
|
+
tabBarPosition: tabBarPosition,
|
|
103
|
+
keyboardDismissMode: keyboardDismissMode,
|
|
104
|
+
swipeEnabled: swipeEnabled
|
|
105
|
+
});
|
|
106
|
+
};
|
|
107
|
+
const styles = _reactNative.StyleSheet.create({
|
|
108
|
+
tabView: {
|
|
109
|
+
flex: 1
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
var _default = (0, _theming.withTheme)(TabViewComponent);
|
|
113
|
+
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
|
@@ -177,12 +177,6 @@ Object.defineProperty(exports, "Link", {
|
|
|
177
177
|
return _Text.Link;
|
|
178
178
|
}
|
|
179
179
|
});
|
|
180
|
-
Object.defineProperty(exports, "Markdown", {
|
|
181
|
-
enumerable: true,
|
|
182
|
-
get: function () {
|
|
183
|
-
return _Markdown.default;
|
|
184
|
-
}
|
|
185
|
-
});
|
|
186
180
|
Object.defineProperty(exports, "NumberInput", {
|
|
187
181
|
enumerable: true,
|
|
188
182
|
get: function () {
|
|
@@ -345,6 +339,18 @@ Object.defineProperty(exports, "SwitchRow", {
|
|
|
345
339
|
return _Switch.SwitchRow;
|
|
346
340
|
}
|
|
347
341
|
});
|
|
342
|
+
Object.defineProperty(exports, "TabView", {
|
|
343
|
+
enumerable: true,
|
|
344
|
+
get: function () {
|
|
345
|
+
return _TabView.TabView;
|
|
346
|
+
}
|
|
347
|
+
});
|
|
348
|
+
Object.defineProperty(exports, "TabViewItem", {
|
|
349
|
+
enumerable: true,
|
|
350
|
+
get: function () {
|
|
351
|
+
return _TabView.TabViewItem;
|
|
352
|
+
}
|
|
353
|
+
});
|
|
348
354
|
Object.defineProperty(exports, "TextField", {
|
|
349
355
|
enumerable: true,
|
|
350
356
|
get: function () {
|
|
@@ -420,7 +426,7 @@ var _Swiper = require("./components/Swiper");
|
|
|
420
426
|
var _Layout = require("./components/Layout");
|
|
421
427
|
var _index = require("./components/RadioButton/index");
|
|
422
428
|
var _DeckSwiper = require("./components/DeckSwiper");
|
|
423
|
-
var
|
|
429
|
+
var _TabView = require("./components/TabView");
|
|
424
430
|
var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
|
|
425
431
|
var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
|
|
426
432
|
var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
|
|
@@ -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
|
+
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
|
+
layout: {
|
|
15
|
+
flex: 1
|
|
16
|
+
},
|
|
17
|
+
triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
|
|
18
|
+
props: {
|
|
19
|
+
onIndexChanged: (0, _types.createActionProp)({
|
|
20
|
+
label: "On index changed",
|
|
21
|
+
description: "Action to execute when swipe to new index"
|
|
22
|
+
}),
|
|
23
|
+
onEndReached: (0, _types.createActionProp)({
|
|
24
|
+
label: "On end reached",
|
|
25
|
+
description: "Action to execute when end of swiping reached"
|
|
26
|
+
}),
|
|
27
|
+
tabBarPosition: (0, _types.createTextEnumProp)({
|
|
28
|
+
label: "Tab Bar Position",
|
|
29
|
+
description: "Position of tab bar",
|
|
30
|
+
options: ["top", "bottom"],
|
|
31
|
+
defaultValue: "top"
|
|
32
|
+
}),
|
|
33
|
+
keyboardDismissMode: (0, _types.createTextEnumProp)({
|
|
34
|
+
label: "Keyboard Dismiss Mode",
|
|
35
|
+
description: "Keyboard Dismiss Mode",
|
|
36
|
+
options: ["auto", "on-drag", "none"],
|
|
37
|
+
defaultValue: "auto"
|
|
38
|
+
}),
|
|
39
|
+
swipeEnabled: (0, _types.createStaticBoolProp)({
|
|
40
|
+
label: "Swipe Enabled",
|
|
41
|
+
description: "Whether swiping is enabled or not",
|
|
42
|
+
defaultValue: true
|
|
43
|
+
}),
|
|
44
|
+
scrollEnabled: (0, _types.createStaticBoolProp)({
|
|
45
|
+
label: "Scroll Enabled",
|
|
46
|
+
description: "Whether scrolling of tabs is enabled or not",
|
|
47
|
+
defaultValue: false
|
|
48
|
+
}),
|
|
49
|
+
activeColor: (0, _types.createColorProp)({
|
|
50
|
+
label: "Active Color",
|
|
51
|
+
description: "Color of icon and text of active tab",
|
|
52
|
+
defaultValue: "primary"
|
|
53
|
+
}),
|
|
54
|
+
inactiveColor: (0, _types.createColorProp)({
|
|
55
|
+
label: "Inactive Color",
|
|
56
|
+
description: "Color of icon and text of inactive tab(s)",
|
|
57
|
+
defaultValue: null
|
|
58
|
+
}),
|
|
59
|
+
pressColor: (0, _types.createColorProp)({
|
|
60
|
+
label: "Press Color",
|
|
61
|
+
description: "Color of ripple when pressed",
|
|
62
|
+
defaultValue: "primary",
|
|
63
|
+
group: _types.GROUPS.android
|
|
64
|
+
}),
|
|
65
|
+
indicatorColor: (0, _types.createColorProp)({
|
|
66
|
+
label: "Indicator Color",
|
|
67
|
+
description: "Color of indicator",
|
|
68
|
+
defaultValue: "primary"
|
|
69
|
+
}),
|
|
70
|
+
tabsBackgroundColor: (0, _types.createColorProp)({
|
|
71
|
+
label: "Tabs Background Color",
|
|
72
|
+
description: "Background color of tabs container",
|
|
73
|
+
defaultValue: "background"
|
|
74
|
+
})
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
exports.SEED_DATA = SEED_DATA;
|
|
@@ -0,0 +1,37 @@
|
|
|
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 Item",
|
|
10
|
+
tag: "TabViewItem",
|
|
11
|
+
description: "Single Tab View item to be used in TabView. Each item represents a single tab and its content",
|
|
12
|
+
category: _types.COMPONENT_TYPES.swiper,
|
|
13
|
+
stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
|
|
14
|
+
layout: {
|
|
15
|
+
flex: 1
|
|
16
|
+
},
|
|
17
|
+
props: {
|
|
18
|
+
title: (0, _types.createTextProp)({
|
|
19
|
+
label: "Title",
|
|
20
|
+
description: "Title of tab item",
|
|
21
|
+
defaultValue: "Title",
|
|
22
|
+
required: true,
|
|
23
|
+
group: _types.GROUPS.basic
|
|
24
|
+
}),
|
|
25
|
+
icon: (0, _types.createIconProp)({
|
|
26
|
+
defaultValue: null,
|
|
27
|
+
required: false
|
|
28
|
+
}),
|
|
29
|
+
accessibilityLabel: (0, _types.createTextProp)({
|
|
30
|
+
label: "Accessibility Label",
|
|
31
|
+
description: "Accessibility Label",
|
|
32
|
+
defaultValue: null,
|
|
33
|
+
group: _types.GROUPS.accessibility
|
|
34
|
+
})
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
exports.SEED_DATA = SEED_DATA;
|
|
@@ -1,24 +1,27 @@
|
|
|
1
|
+
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; }
|
|
2
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
3
|
+
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); }
|
|
1
4
|
import React from "react";
|
|
2
5
|
import { View } from "react-native";
|
|
3
6
|
import { Svg, Path, G } from "react-native-svg";
|
|
4
7
|
class CircularProgress extends React.Component {
|
|
5
8
|
constructor() {
|
|
6
9
|
super(...arguments);
|
|
7
|
-
this
|
|
10
|
+
_defineProperty(this, "polarToCartesian", (centerX, centerY, radius, angleInDegrees) => {
|
|
8
11
|
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
|
|
9
12
|
return {
|
|
10
13
|
x: centerX + radius * Math.cos(angleInRadians),
|
|
11
14
|
y: centerY + radius * Math.sin(angleInRadians)
|
|
12
15
|
};
|
|
13
|
-
};
|
|
14
|
-
this
|
|
16
|
+
});
|
|
17
|
+
_defineProperty(this, "circlePath", (x, y, radius, startAngle, endAngle) => {
|
|
15
18
|
var start = this.polarToCartesian(x, y, radius, endAngle * 0.9999);
|
|
16
19
|
var end = this.polarToCartesian(x, y, radius, startAngle);
|
|
17
20
|
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
|
|
18
21
|
var d = ["M", start.x, start.y, "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y];
|
|
19
22
|
return d.join(" ");
|
|
20
|
-
};
|
|
21
|
-
this
|
|
23
|
+
});
|
|
24
|
+
_defineProperty(this, "clampFill", fill => Math.min(100, Math.max(0, fill)));
|
|
22
25
|
}
|
|
23
26
|
render() {
|
|
24
27
|
const {
|
|
@@ -98,27 +101,4 @@ class CircularProgress extends React.Component {
|
|
|
98
101
|
}, children(fill)));
|
|
99
102
|
}
|
|
100
103
|
}
|
|
101
|
-
export default CircularProgress;eElement(G, {
|
|
102
|
-
rotation: rotation,
|
|
103
|
-
originX: (size + padding) / 2,
|
|
104
|
-
originY: (size + padding) / 2
|
|
105
|
-
}, backgroundColor && /*#__PURE__*/React.createElement(Path, {
|
|
106
|
-
d: backgroundPath,
|
|
107
|
-
stroke: backgroundColor,
|
|
108
|
-
strokeWidth: backgroundWidth || width,
|
|
109
|
-
strokeLinecap: lineCap,
|
|
110
|
-
strokeDasharray: strokeDasharrayBackground,
|
|
111
|
-
fill: "transparent"
|
|
112
|
-
}), fill > 0 && /*#__PURE__*/React.createElement(Path, {
|
|
113
|
-
d: circlePathItem,
|
|
114
|
-
stroke: tintColor,
|
|
115
|
-
strokeWidth: width,
|
|
116
|
-
strokeLinecap: lineCap,
|
|
117
|
-
strokeDasharray: strokeDasharrayTint,
|
|
118
|
-
fill: "transparent"
|
|
119
|
-
}), cap)), children && /*#__PURE__*/React.createElement(View, {
|
|
120
|
-
style: localChildrenContainerStyle
|
|
121
|
-
}, children(fill)));
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
104
|
export default CircularProgress;
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
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; }
|
|
2
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
3
|
-
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); }
|
|
4
1
|
import * as React from "react";
|
|
5
2
|
import { View, StyleSheet } from "react-native";
|
|
6
3
|
/**
|
|
@@ -9,18 +6,47 @@ import { View, StyleSheet } from "react-native";
|
|
|
9
6
|
export default class PortalManager extends React.PureComponent {
|
|
10
7
|
constructor() {
|
|
11
8
|
super(...arguments);
|
|
12
|
-
|
|
9
|
+
this.state = {
|
|
13
10
|
portals: []
|
|
14
|
-
}
|
|
15
|
-
|
|
11
|
+
};
|
|
12
|
+
this.mount = (key, children) => {
|
|
16
13
|
this.setState(state => ({
|
|
17
14
|
portals: [...state.portals, {
|
|
18
15
|
key,
|
|
19
16
|
children
|
|
20
17
|
}]
|
|
21
18
|
}));
|
|
19
|
+
};
|
|
20
|
+
this.update = (key, children) => this.setState(state => ({
|
|
21
|
+
portals: state.portals.map(item => {
|
|
22
|
+
if (item.key === key) {
|
|
23
|
+
return {
|
|
24
|
+
...item,
|
|
25
|
+
children
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
return item;
|
|
29
|
+
})
|
|
30
|
+
}));
|
|
31
|
+
this.unmount = key => this.setState(state => ({
|
|
32
|
+
portals: state.portals.filter(item => item.key !== key)
|
|
33
|
+
}));
|
|
34
|
+
}
|
|
35
|
+
render() {
|
|
36
|
+
return this.state.portals.map(_ref => {
|
|
37
|
+
let {
|
|
38
|
+
key,
|
|
39
|
+
children
|
|
40
|
+
} = _ref;
|
|
41
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
42
|
+
key: key,
|
|
43
|
+
collapsable: false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */,
|
|
44
|
+
pointerEvents: "box-none",
|
|
45
|
+
style: StyleSheet.absoluteFill
|
|
46
|
+
}, children);
|
|
22
47
|
});
|
|
23
|
-
|
|
48
|
+
}
|
|
49
|
+
}ey, children) => this.setState(state => ({
|
|
24
50
|
portals: state.portals.map(item => {
|
|
25
51
|
if (item.key === key) {
|
|
26
52
|
return {
|
|
@@ -0,0 +1,103 @@
|
|
|
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 { StyleSheet } from "react-native";
|
|
4
|
+
import { TabView, TabBar, SceneMap } from "react-native-tab-view";
|
|
5
|
+
import TabViewItem from "./TabViewItem";
|
|
6
|
+
import { withTheme } from "../../theming";
|
|
7
|
+
import { extractStyles } from "../../utilities";
|
|
8
|
+
const TabViewComponent = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
Icon,
|
|
11
|
+
onIndexChanged,
|
|
12
|
+
onEndReached,
|
|
13
|
+
tabBarPosition,
|
|
14
|
+
keyboardDismissMode,
|
|
15
|
+
swipeEnabled,
|
|
16
|
+
scrollEnabled,
|
|
17
|
+
activeColor,
|
|
18
|
+
inactiveColor,
|
|
19
|
+
pressColor,
|
|
20
|
+
indicatorColor,
|
|
21
|
+
tabsBackgroundColor,
|
|
22
|
+
style,
|
|
23
|
+
theme,
|
|
24
|
+
children
|
|
25
|
+
} = _ref;
|
|
26
|
+
const [index, setIndex] = React.useState(0);
|
|
27
|
+
const [routes, setRoutes] = React.useState([]);
|
|
28
|
+
const [tabScenes, setTabScenes] = React.useState({});
|
|
29
|
+
const {
|
|
30
|
+
textStyles,
|
|
31
|
+
viewStyles
|
|
32
|
+
} = extractStyles(style);
|
|
33
|
+
|
|
34
|
+
//Populate routes and scenes based on children
|
|
35
|
+
React.useEffect(() => {
|
|
36
|
+
const newRoutes = [];
|
|
37
|
+
const scenes = {};
|
|
38
|
+
React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === TabViewItem).forEach((item, idx) => {
|
|
39
|
+
const child = item;
|
|
40
|
+
newRoutes.push({
|
|
41
|
+
key: idx.toString(),
|
|
42
|
+
title: child.props.title,
|
|
43
|
+
icon: child.props.icon,
|
|
44
|
+
accessibilityLabel: child.props.accessibilityLabel
|
|
45
|
+
});
|
|
46
|
+
scenes[idx] = () => child;
|
|
47
|
+
});
|
|
48
|
+
setRoutes(newRoutes);
|
|
49
|
+
setTabScenes(scenes);
|
|
50
|
+
}, [children]);
|
|
51
|
+
const indexChangeHandler = i => {
|
|
52
|
+
setIndex(i);
|
|
53
|
+
onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
|
|
54
|
+
if (i === routes.length) {
|
|
55
|
+
onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
const renderTabBar = props => {
|
|
59
|
+
return /*#__PURE__*/React.createElement(TabBar, _extends({}, props, {
|
|
60
|
+
activeColor: activeColor || theme.colors.primary,
|
|
61
|
+
inactiveColor: inactiveColor || theme.colors.divider,
|
|
62
|
+
pressColor: pressColor || theme.colors.primary,
|
|
63
|
+
scrollEnabled: scrollEnabled,
|
|
64
|
+
indicatorStyle: {
|
|
65
|
+
backgroundColor: indicatorColor || theme.colors.primary
|
|
66
|
+
},
|
|
67
|
+
labelStyle: textStyles,
|
|
68
|
+
renderIcon: _ref2 => {
|
|
69
|
+
let {
|
|
70
|
+
route,
|
|
71
|
+
color
|
|
72
|
+
} = _ref2;
|
|
73
|
+
return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
74
|
+
name: route.icon,
|
|
75
|
+
color: color,
|
|
76
|
+
size: 36
|
|
77
|
+
}) : null;
|
|
78
|
+
},
|
|
79
|
+
style: {
|
|
80
|
+
backgroundColor: tabsBackgroundColor || theme.colors.background
|
|
81
|
+
}
|
|
82
|
+
}));
|
|
83
|
+
};
|
|
84
|
+
return /*#__PURE__*/React.createElement(TabView, {
|
|
85
|
+
style: [styles.tabView, viewStyles],
|
|
86
|
+
navigationState: {
|
|
87
|
+
index,
|
|
88
|
+
routes
|
|
89
|
+
},
|
|
90
|
+
renderScene: SceneMap(tabScenes),
|
|
91
|
+
renderTabBar: renderTabBar,
|
|
92
|
+
onIndexChange: indexChangeHandler,
|
|
93
|
+
tabBarPosition: tabBarPosition,
|
|
94
|
+
keyboardDismissMode: keyboardDismissMode,
|
|
95
|
+
swipeEnabled: swipeEnabled
|
|
96
|
+
});
|
|
97
|
+
};
|
|
98
|
+
const styles = StyleSheet.create({
|
|
99
|
+
tabView: {
|
|
100
|
+
flex: 1
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
export default withTheme(TabViewComponent);
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { StyleSheet, View } from "react-native";
|
|
3
|
+
|
|
4
|
+
//Props used by parent (TabView) to create tabs
|
|
5
|
+
|
|
6
|
+
const TabViewItem = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
style,
|
|
9
|
+
children
|
|
10
|
+
} = _ref;
|
|
11
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
12
|
+
style: [styles.parentContainer, style]
|
|
13
|
+
}, children);
|
|
14
|
+
};
|
|
15
|
+
const styles = StyleSheet.create({
|
|
16
|
+
parentContainer: {
|
|
17
|
+
flex: 1
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
export default TabViewItem;
|
package/lib/module/index.js
CHANGED
|
@@ -32,7 +32,7 @@ export { Swiper, SwiperItem } from "./components/Swiper";
|
|
|
32
32
|
export { Center, Circle, Square, Row, Stack, Spacer } from "./components/Layout";
|
|
33
33
|
export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
|
|
34
34
|
export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
|
|
35
|
-
export {
|
|
35
|
+
export { TabView, TabViewItem } from "./components/TabView";
|
|
36
36
|
|
|
37
37
|
/* Deprecated: Fix or Delete! */
|
|
38
38
|
export { default as DatePicker } from "./components/DatePicker/DatePicker";
|