@draftbit/core 46.8.2-41c76e.2 → 46.8.2-57763.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/Markdown.js +30 -0
- package/lib/commonjs/components/Picker/PickerComponent.android.js +20 -3
- 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/constants.js +1 -1
- package/lib/commonjs/index.js +20 -0
- package/lib/commonjs/mappings/Markdown.js +27 -0
- package/lib/commonjs/mappings/TabView.js +74 -0
- package/lib/commonjs/mappings/TabViewItem.js +37 -0
- package/lib/module/components/Markdown.js +20 -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/Markdown.js +20 -0
- package/lib/module/mappings/TabView.js +67 -0
- package/lib/module/mappings/TabViewItem.js +30 -0
- package/lib/typescript/src/components/Markdown.d.ts +8 -0
- package/lib/typescript/src/components/Markdown.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/Markdown.d.ts +20 -0
- package/lib/typescript/src/mappings/Markdown.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/Markdown.js +10 -0
- package/src/components/Markdown.tsx +22 -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/Markdown.js +25 -0
- package/src/mappings/Markdown.ts +32 -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
|
@@ -0,0 +1,30 @@
|
|
|
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 _reactNativeMarkdownDisplay = _interopRequireDefault(require("react-native-markdown-display"));
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
12
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
|
+
const Markdown = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
children,
|
|
16
|
+
style
|
|
17
|
+
} = _ref;
|
|
18
|
+
return (
|
|
19
|
+
/*#__PURE__*/
|
|
20
|
+
//'body' style applies to all markdown components
|
|
21
|
+
//@ts-ignore TS does not like the type of this named style for some reason
|
|
22
|
+
React.createElement(_reactNativeMarkdownDisplay.default, {
|
|
23
|
+
style: {
|
|
24
|
+
body: _reactNative.StyleSheet.flatten(style)
|
|
25
|
+
}
|
|
26
|
+
}, children)
|
|
27
|
+
);
|
|
28
|
+
};
|
|
29
|
+
var _default = Markdown;
|
|
30
|
+
exports.default = _default;
|
|
@@ -15,9 +15,7 @@ var _Touchable = _interopRequireDefault(require("../Touchable"));
|
|
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
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
17
|
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; }
|
|
18
|
-
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); }
|
|
19
18
|
const Picker = _ref => {
|
|
20
|
-
var _options$find$label, _options$find;
|
|
21
19
|
let {
|
|
22
20
|
style,
|
|
23
21
|
options,
|
|
@@ -27,6 +25,7 @@ const Picker = _ref => {
|
|
|
27
25
|
onValueChange: onValueChangeOverride = () => {},
|
|
28
26
|
...props
|
|
29
27
|
} = _ref;
|
|
28
|
+
var _a, _b;
|
|
30
29
|
const {
|
|
31
30
|
viewStyles: {
|
|
32
31
|
borderRadius,
|
|
@@ -71,7 +70,7 @@ const Picker = _ref => {
|
|
|
71
70
|
};
|
|
72
71
|
|
|
73
72
|
const stylesWithoutMargin = style && (0, _lodash.default)(_reactNative.StyleSheet.flatten(style), ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"]);
|
|
74
|
-
const selectedLabel = selectedValue && ((
|
|
73
|
+
const selectedLabel = selectedValue && ((_b = (_a = options.find(o => o.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : selectedValue);
|
|
75
74
|
return /*#__PURE__*/React.createElement(_Touchable.default, {
|
|
76
75
|
disabled: disabled,
|
|
77
76
|
onPress: toggleFocus,
|
|
@@ -95,6 +94,24 @@ const Picker = _ref => {
|
|
|
95
94
|
key: o.value
|
|
96
95
|
}))), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
97
96
|
pointerEvents: "none"
|
|
97
|
+
}, /*#__PURE__*/React.createElement(_TextField.default, {
|
|
98
|
+
...props,
|
|
99
|
+
value: selectedLabel,
|
|
100
|
+
placeholder: placeholder,
|
|
101
|
+
// @ts-ignore
|
|
102
|
+
ref: textField,
|
|
103
|
+
disabled: disabled,
|
|
104
|
+
// @ts-expect-error
|
|
105
|
+
style: stylesWithoutMargin
|
|
106
|
+
}))));
|
|
107
|
+
};
|
|
108
|
+
const styles = _reactNative.StyleSheet.create({
|
|
109
|
+
container: {
|
|
110
|
+
alignSelf: "stretch"
|
|
111
|
+
}
|
|
112
|
+
});
|
|
113
|
+
var _default = (0, _theming.withTheme)(Picker);
|
|
114
|
+
exports.default = _default;pointerEvents: "none"
|
|
98
115
|
}, /*#__PURE__*/React.createElement(_TextField.default, _extends({}, props, {
|
|
99
116
|
value: selectedLabel,
|
|
100
117
|
placeholder: placeholder
|
|
@@ -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 }; }
|
|
@@ -12,4 +12,4 @@ const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
|
|
|
12
12
|
android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
|
|
13
13
|
ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
|
|
14
14
|
});
|
|
15
|
-
exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
|
|
15
|
+
exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;AR_HEIGHT;
|
package/lib/commonjs/index.js
CHANGED
|
@@ -177,6 +177,12 @@ 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
|
+
});
|
|
180
186
|
Object.defineProperty(exports, "NumberInput", {
|
|
181
187
|
enumerable: true,
|
|
182
188
|
get: function () {
|
|
@@ -339,6 +345,18 @@ Object.defineProperty(exports, "SwitchRow", {
|
|
|
339
345
|
return _Switch.SwitchRow;
|
|
340
346
|
}
|
|
341
347
|
});
|
|
348
|
+
Object.defineProperty(exports, "TabView", {
|
|
349
|
+
enumerable: true,
|
|
350
|
+
get: function () {
|
|
351
|
+
return _TabView.TabView;
|
|
352
|
+
}
|
|
353
|
+
});
|
|
354
|
+
Object.defineProperty(exports, "TabViewItem", {
|
|
355
|
+
enumerable: true,
|
|
356
|
+
get: function () {
|
|
357
|
+
return _TabView.TabViewItem;
|
|
358
|
+
}
|
|
359
|
+
});
|
|
342
360
|
Object.defineProperty(exports, "TextField", {
|
|
343
361
|
enumerable: true,
|
|
344
362
|
get: function () {
|
|
@@ -414,6 +432,8 @@ var _Swiper = require("./components/Swiper");
|
|
|
414
432
|
var _Layout = require("./components/Layout");
|
|
415
433
|
var _index = require("./components/RadioButton/index");
|
|
416
434
|
var _DeckSwiper = require("./components/DeckSwiper");
|
|
435
|
+
var _TabView = require("./components/TabView");
|
|
436
|
+
var _Markdown = _interopRequireDefault(require("./components/Markdown"));
|
|
417
437
|
var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
|
|
418
438
|
var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
|
|
419
439
|
var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
|
|
@@ -0,0 +1,27 @@
|
|
|
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: "Markdown",
|
|
10
|
+
tag: "Markdown",
|
|
11
|
+
description: "A component that renders markdown",
|
|
12
|
+
category: _types.COMPONENT_TYPES.text,
|
|
13
|
+
stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Effects],
|
|
14
|
+
props: {
|
|
15
|
+
children: {
|
|
16
|
+
group: _types.GROUPS.data,
|
|
17
|
+
label: "Markdown Text",
|
|
18
|
+
description: "Markdown text to be rendered ",
|
|
19
|
+
editable: true,
|
|
20
|
+
required: true,
|
|
21
|
+
formType: _types.FORM_TYPES.string,
|
|
22
|
+
propType: _types.PROP_TYPES.STRING,
|
|
23
|
+
defaultValue: "### Markdown"
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
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;
|
|
@@ -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;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { StyleSheet } from "react-native";
|
|
3
|
+
import MarkdownComponent from "react-native-markdown-display";
|
|
4
|
+
const Markdown = _ref => {
|
|
5
|
+
let {
|
|
6
|
+
children,
|
|
7
|
+
style
|
|
8
|
+
} = _ref;
|
|
9
|
+
return (
|
|
10
|
+
/*#__PURE__*/
|
|
11
|
+
//'body' style applies to all markdown components
|
|
12
|
+
//@ts-ignore TS does not like the type of this named style for some reason
|
|
13
|
+
React.createElement(MarkdownComponent, {
|
|
14
|
+
style: {
|
|
15
|
+
body: StyleSheet.flatten(style)
|
|
16
|
+
}
|
|
17
|
+
}, children)
|
|
18
|
+
);
|
|
19
|
+
};
|
|
20
|
+
export default Markdown;
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { TabView, TabBar, SceneMap } from "react-native-tab-view";
|
|
4
|
+
import { withTheme } from "../../theming";
|
|
5
|
+
import { extractStyles } from "../../utilities";
|
|
6
|
+
const TabViewComponent = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
Icon,
|
|
9
|
+
onIndexChanged,
|
|
10
|
+
onEndReached,
|
|
11
|
+
tabBarPosition,
|
|
12
|
+
keyboardDismissMode,
|
|
13
|
+
swipeEnabled,
|
|
14
|
+
scrollEnabled,
|
|
15
|
+
activeColor,
|
|
16
|
+
inactiveColor,
|
|
17
|
+
pressColor,
|
|
18
|
+
indicatorColor,
|
|
19
|
+
tabsBackgroundColor,
|
|
20
|
+
style,
|
|
21
|
+
theme,
|
|
22
|
+
children
|
|
23
|
+
} = _ref;
|
|
24
|
+
const [index, setIndex] = React.useState(0);
|
|
25
|
+
const [routes, setRoutes] = React.useState([]);
|
|
26
|
+
const [tabScenes, setTabScenes] = React.useState({});
|
|
27
|
+
const {
|
|
28
|
+
textStyles,
|
|
29
|
+
viewStyles
|
|
30
|
+
} = extractStyles(style);
|
|
31
|
+
|
|
32
|
+
//Check type of child using props
|
|
33
|
+
//Regular '.type' cannot work because Draftbit strips the type in Draft view
|
|
34
|
+
const instanceOfTabViewItemProps = object => {
|
|
35
|
+
return "title" in object;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
//Populate routes and scenes based on children
|
|
39
|
+
React.useEffect(() => {
|
|
40
|
+
const newRoutes = [];
|
|
41
|
+
const scenes = {};
|
|
42
|
+
React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && instanceOfTabViewItemProps(child.props)).forEach((item, idx) => {
|
|
43
|
+
const child = item;
|
|
44
|
+
newRoutes.push({
|
|
45
|
+
key: idx.toString(),
|
|
46
|
+
title: child.props.title,
|
|
47
|
+
icon: child.props.icon,
|
|
48
|
+
accessibilityLabel: child.props.accessibilityLabel
|
|
49
|
+
});
|
|
50
|
+
scenes[idx] = () => child;
|
|
51
|
+
});
|
|
52
|
+
setRoutes(newRoutes);
|
|
53
|
+
setTabScenes(scenes);
|
|
54
|
+
}, [children]);
|
|
55
|
+
const indexChangeHandler = i => {
|
|
56
|
+
setIndex(i);
|
|
57
|
+
onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
|
|
58
|
+
if (i === routes.length) {
|
|
59
|
+
onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
const renderTabBar = props => {
|
|
63
|
+
return /*#__PURE__*/React.createElement(TabBar, _extends({}, props, {
|
|
64
|
+
activeColor: activeColor || theme.colors.primary,
|
|
65
|
+
inactiveColor: inactiveColor || theme.colors.divider,
|
|
66
|
+
pressColor: pressColor || theme.colors.primary,
|
|
67
|
+
scrollEnabled: scrollEnabled,
|
|
68
|
+
indicatorStyle: {
|
|
69
|
+
backgroundColor: indicatorColor || theme.colors.primary
|
|
70
|
+
},
|
|
71
|
+
labelStyle: textStyles,
|
|
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: 16
|
|
81
|
+
}) : null;
|
|
82
|
+
},
|
|
83
|
+
style: {
|
|
84
|
+
backgroundColor: tabsBackgroundColor || theme.colors.background
|
|
85
|
+
}
|
|
86
|
+
}));
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
//Cannot render TabView without at least one tab
|
|
90
|
+
if (!routes.length) {
|
|
91
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
92
|
+
}
|
|
93
|
+
return /*#__PURE__*/React.createElement(TabView, {
|
|
94
|
+
style: [viewStyles],
|
|
95
|
+
navigationState: {
|
|
96
|
+
index,
|
|
97
|
+
routes
|
|
98
|
+
},
|
|
99
|
+
renderScene: SceneMap(tabScenes),
|
|
100
|
+
renderTabBar: renderTabBar,
|
|
101
|
+
onIndexChange: indexChangeHandler,
|
|
102
|
+
tabBarPosition: tabBarPosition,
|
|
103
|
+
keyboardDismissMode: keyboardDismissMode,
|
|
104
|
+
swipeEnabled: swipeEnabled
|
|
105
|
+
});
|
|
106
|
+
};
|
|
107
|
+
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,6 +32,8 @@ 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 { TabView, TabViewItem } from "./components/TabView";
|
|
36
|
+
export { default as Markdown } from "./components/Markdown";
|
|
35
37
|
|
|
36
38
|
/* Deprecated: Fix or Delete! */
|
|
37
39
|
export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, StylesPanelSections } from "@draftbit/types";
|
|
2
|
+
export const SEED_DATA = {
|
|
3
|
+
name: "Markdown",
|
|
4
|
+
tag: "Markdown",
|
|
5
|
+
description: "A component that renders markdown",
|
|
6
|
+
category: COMPONENT_TYPES.text,
|
|
7
|
+
stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.LayoutSelectedItem, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Effects],
|
|
8
|
+
props: {
|
|
9
|
+
children: {
|
|
10
|
+
group: GROUPS.data,
|
|
11
|
+
label: "Markdown Text",
|
|
12
|
+
description: "Markdown text to be rendered ",
|
|
13
|
+
editable: true,
|
|
14
|
+
required: true,
|
|
15
|
+
formType: FORM_TYPES.string,
|
|
16
|
+
propType: PROP_TYPES.STRING,
|
|
17
|
+
defaultValue: "### Markdown"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
};
|