@draftbit/core 46.8.2-deff12.2 → 46.8.2-e916bf.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.
Files changed (19) hide show
  1. package/lib/commonjs/components/TabView/TabView.js +28 -6
  2. package/lib/commonjs/mappings/TabView.js +5 -2
  3. package/lib/commonjs/mappings/TabViewItem.js +1 -1
  4. package/lib/module/components/TabView/TabView.js +28 -5
  5. package/lib/module/mappings/TabView.js +6 -3
  6. package/lib/module/mappings/TabViewItem.js +1 -1
  7. package/lib/typescript/src/components/TabView/TabView.d.ts.map +1 -1
  8. package/lib/typescript/src/components/TabView/TabViewItem.d.ts +1 -1
  9. package/lib/typescript/src/components/TabView/TabViewItem.d.ts.map +1 -1
  10. package/lib/typescript/src/mappings/TabView.d.ts +3 -0
  11. package/lib/typescript/src/mappings/TabView.d.ts.map +1 -1
  12. package/package.json +3 -3
  13. package/src/components/TabView/TabView.js +20 -7
  14. package/src/components/TabView/TabView.tsx +30 -8
  15. package/src/components/TabView/TabViewItem.tsx +1 -1
  16. package/src/mappings/TabView.js +9 -3
  17. package/src/mappings/TabView.ts +8 -3
  18. package/src/mappings/TabViewItem.js +1 -1
  19. package/src/mappings/TabViewItem.ts +1 -1
package/lib/commonjs/components/TabView/TabView.js CHANGED
@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
  var React = _interopRequireWildcard(require("react"));
8
+ var _reactNative = require("react-native");
8
9
  var _reactNativeTabView = require("react-native-tab-view");
9
- var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
10
10
  var _theming = require("../../theming");
11
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ var _utilities = require("../../utilities");
12
12
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
13
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
14
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -33,12 +33,22 @@ const TabViewComponent = _ref => {
33
33
  const [index, setIndex] = React.useState(0);
34
34
  const [routes, setRoutes] = React.useState([]);
35
35
  const [tabScenes, setTabScenes] = React.useState({});
36
+ const {
37
+ textStyles,
38
+ viewStyles
39
+ } = (0, _utilities.extractStyles)(style);
40
+
41
+ //Check type of child using props
42
+ //Regular '.type' cannot work because Draftbit strips the type in Draft view
43
+ const instanceOfTabViewItemProps = object => {
44
+ return "title" in object;
45
+ };
36
46
 
37
47
  //Populate routes and scenes based on children
38
48
  React.useEffect(() => {
39
49
  const newRoutes = [];
40
50
  const scenes = {};
41
- React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === _TabViewItem.default).forEach((item, idx) => {
51
+ React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && instanceOfTabViewItemProps(child.props)).forEach((item, idx) => {
42
52
  const child = item;
43
53
  newRoutes.push({
44
54
  key: idx.toString(),
@@ -67,6 +77,7 @@ const TabViewComponent = _ref => {
67
77
  indicatorStyle: {
68
78
  backgroundColor: indicatorColor || theme.colors.primary
69
79
  },
80
+ labelStyle: textStyles,
70
81
  renderIcon: _ref2 => {
71
82
  let {
72
83
  route,
@@ -75,15 +86,21 @@ const TabViewComponent = _ref => {
75
86
  return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
76
87
  name: route.icon,
77
88
  color: color,
78
- size: 36
89
+ size: 16
79
90
  }) : null;
80
91
  },
81
- style: [{
92
+ style: {
82
93
  backgroundColor: tabsBackgroundColor || theme.colors.background
83
- }, style]
94
+ }
84
95
  }));
85
96
  };
97
+
98
+ //Cannot render TabView without at least one tab
99
+ if (!routes.length) {
100
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
101
+ }
86
102
  return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
103
+ style: [styles.tabView, viewStyles],
87
104
  navigationState: {
88
105
  index,
89
106
  routes
@@ -96,5 +113,10 @@ const TabViewComponent = _ref => {
96
113
  swipeEnabled: swipeEnabled
97
114
  });
98
115
  };
116
+ const styles = _reactNative.StyleSheet.create({
117
+ tabView: {
118
+ flex: 1
119
+ }
120
+ });
99
121
  var _default = (0, _theming.withTheme)(TabViewComponent);
100
122
  exports.default = _default;
package/lib/commonjs/mappings/TabView.js CHANGED
@@ -10,7 +10,10 @@ const SEED_DATA = {
10
10
  tag: "TabView",
11
11
  description: "Tab view container",
12
12
  category: _types.COMPONENT_TYPES.swiper,
13
- stylesPanelSections: [..._types.BLOCK_STYLES_SECTIONS, _types.StylesPanelSections.Background],
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
+ },
14
17
  triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
15
18
  props: {
16
19
  onIndexChanged: (0, _types.createActionProp)({
@@ -39,7 +42,7 @@ const SEED_DATA = {
39
42
  defaultValue: true
40
43
  }),
41
44
  scrollEnabled: (0, _types.createStaticBoolProp)({
42
- label: "Scroll Enabled",
45
+ label: "Tab Scroll Enabled",
43
46
  description: "Whether scrolling of tabs is enabled or not",
44
47
  defaultValue: false
45
48
  }),
package/lib/commonjs/mappings/TabViewItem.js CHANGED
@@ -18,7 +18,7 @@ const SEED_DATA = {
18
18
  title: (0, _types.createTextProp)({
19
19
  label: "Title",
20
20
  description: "Title of tab item",
21
- defaultValue: null,
21
+ defaultValue: "Title",
22
22
  required: true,
23
23
  group: _types.GROUPS.basic
24
24
  }),
package/lib/module/components/TabView/TabView.js CHANGED
@@ -1,8 +1,9 @@
1
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
2
  import * as React from "react";
3
+ import { StyleSheet } from "react-native";
3
4
  import { TabView, TabBar, SceneMap } from "react-native-tab-view";
4
- import TabViewItem from "./TabViewItem";
5
5
  import { withTheme } from "../../theming";
6
+ import { extractStyles } from "../../utilities";
6
7
  const TabViewComponent = _ref => {
7
8
  let {
8
9
  Icon,
@@ -24,12 +25,22 @@ const TabViewComponent = _ref => {
24
25
  const [index, setIndex] = React.useState(0);
25
26
  const [routes, setRoutes] = React.useState([]);
26
27
  const [tabScenes, setTabScenes] = React.useState({});
28
+ const {
29
+ textStyles,
30
+ viewStyles
31
+ } = extractStyles(style);
32
+
33
+ //Check type of child using props
34
+ //Regular '.type' cannot work because Draftbit strips the type in Draft view
35
+ const instanceOfTabViewItemProps = object => {
36
+ return "title" in object;
37
+ };
27
38
 
28
39
  //Populate routes and scenes based on children
29
40
  React.useEffect(() => {
30
41
  const newRoutes = [];
31
42
  const scenes = {};
32
- React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === TabViewItem).forEach((item, idx) => {
43
+ React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && instanceOfTabViewItemProps(child.props)).forEach((item, idx) => {
33
44
  const child = item;
34
45
  newRoutes.push({
35
46
  key: idx.toString(),
@@ -58,6 +69,7 @@ const TabViewComponent = _ref => {
58
69
  indicatorStyle: {
59
70
  backgroundColor: indicatorColor || theme.colors.primary
60
71
  },
72
+ labelStyle: textStyles,
61
73
  renderIcon: _ref2 => {
62
74
  let {
63
75
  route,
@@ -66,15 +78,21 @@ const TabViewComponent = _ref => {
66
78
  return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
67
79
  name: route.icon,
68
80
  color: color,
69
- size: 36
81
+ size: 16
70
82
  }) : null;
71
83
  },
72
- style: [{
84
+ style: {
73
85
  backgroundColor: tabsBackgroundColor || theme.colors.background
74
- }, style]
86
+ }
75
87
  }));
76
88
  };
89
+
90
+ //Cannot render TabView without at least one tab
91
+ if (!routes.length) {
92
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
93
+ }
77
94
  return /*#__PURE__*/React.createElement(TabView, {
95
+ style: [styles.tabView, viewStyles],
78
96
  navigationState: {
79
97
  index,
80
98
  routes
@@ -87,4 +105,9 @@ const TabViewComponent = _ref => {
87
105
  swipeEnabled: swipeEnabled
88
106
  });
89
107
  };
108
+ const styles = StyleSheet.create({
109
+ tabView: {
110
+ flex: 1
111
+ }
112
+ });
90
113
  export default withTheme(TabViewComponent);
package/lib/module/mappings/TabView.js CHANGED
@@ -1,10 +1,13 @@
1
- import { COMPONENT_TYPES, createTextEnumProp, createColorProp, BLOCK_STYLES_SECTIONS, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS } from "@draftbit/types";
1
+ import { COMPONENT_TYPES, createTextEnumProp, createColorProp, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS } from "@draftbit/types";
2
2
  export const SEED_DATA = {
3
3
  name: "Tab View",
4
4
  tag: "TabView",
5
5
  description: "Tab view container",
6
6
  category: COMPONENT_TYPES.swiper,
7
- stylesPanelSections: [...BLOCK_STYLES_SECTIONS, StylesPanelSections.Background],
7
+ stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects, StylesPanelSections.LayoutSelectedItem, StylesPanelSections.Background, StylesPanelSections.Typography],
8
+ layout: {
9
+ flex: 1
10
+ },
8
11
  triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
9
12
  props: {
10
13
  onIndexChanged: createActionProp({
@@ -33,7 +36,7 @@ export const SEED_DATA = {
33
36
  defaultValue: true
34
37
  }),
35
38
  scrollEnabled: createStaticBoolProp({
36
- label: "Scroll Enabled",
39
+ label: "Tab Scroll Enabled",
37
40
  description: "Whether scrolling of tabs is enabled or not",
38
41
  defaultValue: false
39
42
  }),
package/lib/module/mappings/TabViewItem.js CHANGED
@@ -12,7 +12,7 @@ export const SEED_DATA = {
12
12
  title: createTextProp({
13
13
  label: "Title",
14
14
  description: "Title of tab item",
15
- defaultValue: null,
15
+ defaultValue: "Title",
16
16
  required: true,
17
17
  group: GROUPS.basic
18
18
  }),
package/lib/typescript/src/components/TabView/TabView.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAKvD,aAAK,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AACvC,aAAK,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD,aAAK,YAAY,GAAG;IAClB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AA4Fb,wBAA2C"}
1
+ {"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAWhE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAMvD,aAAK,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AACvC,aAAK,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD,aAAK,YAAY,GAAG;IAClB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AAiHb,wBAA2C"}
package/lib/typescript/src/components/TabView/TabViewItem.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { StyleProp, ViewStyle } from "react-native";
3
- interface TabViewItemProps {
3
+ export interface TabViewItemProps {
4
4
  title: string;
5
5
  icon?: string;
6
6
  accessibilityLabel?: string;
package/lib/typescript/src/components/TabView/TabViewItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabViewItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabViewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAC;AAGtE,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAKpE,CAAC;AAQF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"TabViewItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabViewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAC;AAGtE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAKpE,CAAC;AAQF,eAAe,WAAW,CAAC"}
package/lib/typescript/src/mappings/TabView.d.ts CHANGED
@@ -4,6 +4,9 @@ export declare const SEED_DATA: {
4
4
  description: string;
5
5
  category: string;
6
6
  stylesPanelSections: string[];
7
+ layout: {
8
+ flex: number;
9
+ };
7
10
  triggers: string[];
8
11
  props: {
9
12
  onIndexChanged: {
package/lib/typescript/src/mappings/TabView.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TabView.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoErB,CAAC"}
1
+ {"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TabView.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ErB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "46.8.2-deff12.2+deff122",
3
+ "version": "46.8.2-e916bf.2+e916bf3",
4
4
  "description": "Core (non-native) Components",
5
5
  "main": "lib/commonjs/index.js",
6
6
  "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
41
41
  "dependencies": {
42
42
  "@date-io/date-fns": "^1.3.13",
43
43
  "@draftbit/react-theme-provider": "^2.1.1",
44
- "@draftbit/types": "^46.8.2-deff12.2+deff122",
44
+ "@draftbit/types": "^46.8.2-e916bf.2+e916bf3",
45
45
  "@material-ui/core": "^4.11.0",
46
46
  "@material-ui/pickers": "^3.2.10",
47
47
  "@react-native-community/slider": "4.2.3",
@@ -94,5 +94,5 @@
94
94
  ]
95
95
  ]
96
96
  },
97
- "gitHead": "deff1222ccbb8c708696a110ed25e4d6d0a90036"
97
+ "gitHead": "e916bf330335c3bd9d1a4bd1046b4f7a3bcd30fa"
98
98
  }
package/src/components/TabView/TabView.js CHANGED
@@ -1,17 +1,24 @@
1
1
  import * as React from "react";
2
+ import { StyleSheet } from "react-native";
2
3
  import { TabView, TabBar, SceneMap, } from "react-native-tab-view";
3
- import TabViewItem from "./TabViewItem";
4
4
  import { withTheme } from "../../theming";
5
+ import { extractStyles } from "../../utilities";
5
6
  const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, style, theme, children, }) => {
6
7
  const [index, setIndex] = React.useState(0);
7
8
  const [routes, setRoutes] = React.useState([]);
8
9
  const [tabScenes, setTabScenes] = React.useState({});
10
+ const { textStyles, viewStyles } = extractStyles(style);
11
+ //Check type of child using props
12
+ //Regular '.type' cannot work because Draftbit strips the type in Draft view
13
+ const instanceOfTabViewItemProps = (object) => {
14
+ return "title" in object;
15
+ };
9
16
  //Populate routes and scenes based on children
10
17
  React.useEffect(() => {
11
18
  const newRoutes = [];
12
19
  const scenes = {};
13
20
  React.Children.toArray(children)
14
- .filter((child) => React.isValidElement(child) && child.type === TabViewItem)
21
+ .filter((child) => React.isValidElement(child) && instanceOfTabViewItemProps(child.props))
15
22
  .forEach((item, idx) => {
16
23
  const child = item;
17
24
  newRoutes.push({
@@ -35,11 +42,17 @@ const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition,
35
42
  const renderTabBar = (props) => {
36
43
  return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || theme.colors.divider, pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
37
44
  backgroundColor: indicatorColor || theme.colors.primary,
38
- }, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: [
39
- { backgroundColor: tabsBackgroundColor || theme.colors.background },
40
- style,
41
- ] }));
45
+ }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 16 })) : null, style: {
46
+ backgroundColor: tabsBackgroundColor || theme.colors.background,
47
+ } }));
42
48
  };
43
- return (React.createElement(TabView, { navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
49
+ //Cannot render TabView without at least one tab
50
+ if (!routes.length) {
51
+ return React.createElement(React.Fragment, null);
52
+ }
53
+ return (React.createElement(TabView, { style: [styles.tabView, viewStyles], navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
44
54
  };
55
+ const styles = StyleSheet.create({
56
+ tabView: { flex: 1 },
57
+ });
45
58
  export default withTheme(TabViewComponent);
package/src/components/TabView/TabView.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { StyleProp, ViewStyle } from "react-native";
2
+ import { StyleProp, ViewStyle, StyleSheet } from "react-native";
3
3
  import {
4
4
  TabView,
5
5
  TabBar,
@@ -9,10 +9,11 @@ import {
9
9
  Route,
10
10
  } from "react-native-tab-view";
11
11
 
12
- import TabViewItem from "./TabViewItem";
12
+ import { TabViewItemProps } from "./TabViewItem";
13
13
  import type { IconSlot } from "../../interfaces/Icon";
14
14
  import { withTheme } from "../../theming";
15
15
  import type { Theme } from "../../styles/DefaultTheme";
16
+ import { extractStyles } from "../../utilities";
16
17
 
17
18
  type TabBarProps = SceneRendererProps & {
18
19
  navigationState: NavigationState<any>;
@@ -57,6 +58,16 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
57
58
  const [routes, setRoutes] = React.useState<Route[]>([]);
58
59
  const [tabScenes, setTabScenes] = React.useState({});
59
60
 
61
+ const { textStyles, viewStyles } = extractStyles(style);
62
+
63
+ //Check type of child using props
64
+ //Regular '.type' cannot work because Draftbit strips the type in Draft view
65
+ const instanceOfTabViewItemProps = (
66
+ object: any
67
+ ): object is TabViewItemProps => {
68
+ return "title" in object;
69
+ };
70
+
60
71
  //Populate routes and scenes based on children
61
72
  React.useEffect(() => {
62
73
  const newRoutes: Route[] = [];
@@ -64,7 +75,8 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
64
75
 
65
76
  React.Children.toArray(children)
66
77
  .filter(
67
- (child) => React.isValidElement(child) && child.type === TabViewItem
78
+ (child) =>
79
+ React.isValidElement(child) && instanceOfTabViewItemProps(child.props)
68
80
  )
69
81
  .forEach((item: any, idx) => {
70
82
  const child = item as React.ReactElement;
@@ -100,21 +112,27 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
100
112
  indicatorStyle={{
101
113
  backgroundColor: indicatorColor || theme.colors.primary,
102
114
  }}
115
+ labelStyle={textStyles}
103
116
  renderIcon={({ route, color }) =>
104
117
  route?.icon ? (
105
- <Icon name={route.icon} color={color} size={36} />
118
+ <Icon name={route.icon} color={color} size={16} />
106
119
  ) : null
107
120
  }
108
- style={[
109
- { backgroundColor: tabsBackgroundColor || theme.colors.background },
110
- style,
111
- ]}
121
+ style={{
122
+ backgroundColor: tabsBackgroundColor || theme.colors.background,
123
+ }}
112
124
  />
113
125
  );
114
126
  };
115
127
 
128
+ //Cannot render TabView without at least one tab
129
+ if (!routes.length) {
130
+ return <></>;
131
+ }
132
+
116
133
  return (
117
134
  <TabView
135
+ style={[styles.tabView, viewStyles]}
118
136
  navigationState={{ index, routes }}
119
137
  renderScene={SceneMap(tabScenes)}
120
138
  renderTabBar={renderTabBar}
@@ -126,4 +144,8 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
126
144
  );
127
145
  };
128
146
 
147
+ const styles = StyleSheet.create({
148
+ tabView: { flex: 1 },
149
+ });
150
+
129
151
  export default withTheme(TabViewComponent);
package/src/components/TabView/TabViewItem.tsx CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
3
3
 
4
4
  //Props used by parent (TabView) to create tabs
5
- interface TabViewItemProps {
5
+ export interface TabViewItemProps {
6
6
  title: string;
7
7
  icon?: string;
8
8
  accessibilityLabel?: string;
package/src/mappings/TabView.js CHANGED
@@ -1,13 +1,19 @@
1
- import { COMPONENT_TYPES, createTextEnumProp, createColorProp, BLOCK_STYLES_SECTIONS, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS, } from "@draftbit/types";
1
+ import { COMPONENT_TYPES, createTextEnumProp, createColorProp, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS, } from "@draftbit/types";
2
2
  export const SEED_DATA = {
3
3
  name: "Tab View",
4
4
  tag: "TabView",
5
5
  description: "Tab view container",
6
6
  category: COMPONENT_TYPES.swiper,
7
7
  stylesPanelSections: [
8
- ...BLOCK_STYLES_SECTIONS,
8
+ StylesPanelSections.Size,
9
+ StylesPanelSections.MarginsAndPaddings,
10
+ StylesPanelSections.Position,
11
+ StylesPanelSections.Effects,
12
+ StylesPanelSections.LayoutSelectedItem,
9
13
  StylesPanelSections.Background,
14
+ StylesPanelSections.Typography,
10
15
  ],
16
+ layout: { flex: 1 },
11
17
  triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
12
18
  props: {
13
19
  onIndexChanged: createActionProp({
@@ -36,7 +42,7 @@ export const SEED_DATA = {
36
42
  defaultValue: true,
37
43
  }),
38
44
  scrollEnabled: createStaticBoolProp({
39
- label: "Scroll Enabled",
45
+ label: "Tab Scroll Enabled",
40
46
  description: "Whether scrolling of tabs is enabled or not",
41
47
  defaultValue: false,
42
48
  }),
package/src/mappings/TabView.ts CHANGED
@@ -2,7 +2,6 @@ import {
2
2
  COMPONENT_TYPES,
3
3
  createTextEnumProp,
4
4
  createColorProp,
5
- BLOCK_STYLES_SECTIONS,
6
5
  StylesPanelSections,
7
6
  Triggers,
8
7
  createActionProp,
@@ -16,9 +15,15 @@ export const SEED_DATA = {
16
15
  description: "Tab view container",
17
16
  category: COMPONENT_TYPES.swiper,
18
17
  stylesPanelSections: [
19
- ...BLOCK_STYLES_SECTIONS,
18
+ StylesPanelSections.Size,
19
+ StylesPanelSections.MarginsAndPaddings,
20
+ StylesPanelSections.Position,
21
+ StylesPanelSections.Effects,
22
+ StylesPanelSections.LayoutSelectedItem,
20
23
  StylesPanelSections.Background,
24
+ StylesPanelSections.Typography,
21
25
  ],
26
+ layout: { flex: 1 },
22
27
  triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
23
28
  props: {
24
29
  onIndexChanged: createActionProp({
@@ -47,7 +52,7 @@ export const SEED_DATA = {
47
52
  defaultValue: true,
48
53
  }),
49
54
  scrollEnabled: createStaticBoolProp({
50
- label: "Scroll Enabled",
55
+ label: "Tab Scroll Enabled",
51
56
  description: "Whether scrolling of tabs is enabled or not",
52
57
  defaultValue: false,
53
58
  }),
package/src/mappings/TabViewItem.js CHANGED
@@ -12,7 +12,7 @@ export const SEED_DATA = {
12
12
  title: createTextProp({
13
13
  label: "Title",
14
14
  description: "Title of tab item",
15
- defaultValue: null,
15
+ defaultValue: "Title",
16
16
  required: true,
17
17
  group: GROUPS.basic,
18
18
  }),
package/src/mappings/TabViewItem.ts CHANGED
@@ -20,7 +20,7 @@ export const SEED_DATA = {
20
20
  title: createTextProp({
21
21
  label: "Title",
22
22
  description: "Title of tab item",
23
- defaultValue: null,
23
+ defaultValue: "Title",
24
24
  required: true,
25
25
  group: GROUPS.basic,
26
26
  }),