@draftbit/core 46.8.2-cd657e.2 → 46.8.2-deff12.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 +6 -22
  2. package/lib/commonjs/mappings/TabView.js +2 -2
  3. package/lib/commonjs/mappings/TabViewItem.js +1 -1
  4. package/lib/module/components/TabView/TabView.js +5 -22
  5. package/lib/module/constants.js +0 -1
  6. package/lib/module/mappings/TabView.js +3 -3
  7. package/lib/module/mappings/TabViewItem.js +1 -1
  8. package/lib/typescript/src/components/TabView/TabView.d.ts.map +1 -1
  9. package/lib/typescript/src/components/TabView/TabViewItem.d.ts +1 -1
  10. package/lib/typescript/src/components/TabView/TabViewItem.d.ts.map +1 -1
  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 +7 -16
  14. package/src/components/TabView/TabView.tsx +7 -25
  15. package/src/components/TabView/TabViewItem.tsx +1 -1
  16. package/src/mappings/TabView.js +3 -8
  17. package/src/mappings/TabView.ts +3 -7
  18. package/src/mappings/TabViewItem.js +1 -1
  19. package/src/mappings/TabViewItem.ts +1 -1
package/lib/commonjs/components/TabView/TabView.js CHANGED
@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = void 0;
7
7
  var React = _interopRequireWildcard(require("react"));
8
8
  var _reactNativeTabView = require("react-native-tab-view");
9
+ var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
9
10
  var _theming = require("../../theming");
10
- var _utilities = require("../../utilities");
11
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
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); }
12
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; }
13
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); }
@@ -32,22 +33,12 @@ const TabViewComponent = _ref => {
32
33
  const [index, setIndex] = React.useState(0);
33
34
  const [routes, setRoutes] = React.useState([]);
34
35
  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
36
 
46
37
  //Populate routes and scenes based on children
47
38
  React.useEffect(() => {
48
39
  const newRoutes = [];
49
40
  const scenes = {};
50
- React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && instanceOfTabViewItemProps(child.props)).forEach((item, idx) => {
41
+ React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === _TabViewItem.default).forEach((item, idx) => {
51
42
  const child = item;
52
43
  newRoutes.push({
53
44
  key: idx.toString(),
@@ -76,7 +67,6 @@ const TabViewComponent = _ref => {
76
67
  indicatorStyle: {
77
68
  backgroundColor: indicatorColor || theme.colors.primary
78
69
  },
79
- labelStyle: textStyles,
80
70
  renderIcon: _ref2 => {
81
71
  let {
82
72
  route,
@@ -85,21 +75,15 @@ const TabViewComponent = _ref => {
85
75
  return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
86
76
  name: route.icon,
87
77
  color: color,
88
- size: 16
78
+ size: 36
89
79
  }) : null;
90
80
  },
91
- style: {
81
+ style: [{
92
82
  backgroundColor: tabsBackgroundColor || theme.colors.background
93
- }
83
+ }, style]
94
84
  }));
95
85
  };
96
-
97
- //Cannot render TabView without at least one tab
98
- if (!routes.length) {
99
- return /*#__PURE__*/React.createElement(React.Fragment, null);
100
- }
101
86
  return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
102
- style: [viewStyles],
103
87
  navigationState: {
104
88
  index,
105
89
  routes
package/lib/commonjs/mappings/TabView.js CHANGED
@@ -10,7 +10,7 @@ const SEED_DATA = {
10
10
  tag: "TabView",
11
11
  description: "Tab view container",
12
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],
13
+ stylesPanelSections: [..._types.BLOCK_STYLES_SECTIONS, _types.StylesPanelSections.Background],
14
14
  triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
15
15
  props: {
16
16
  onIndexChanged: (0, _types.createActionProp)({
@@ -39,7 +39,7 @@ const SEED_DATA = {
39
39
  defaultValue: true
40
40
  }),
41
41
  scrollEnabled: (0, _types.createStaticBoolProp)({
42
- label: "Tab Scroll Enabled",
42
+ label: "Scroll Enabled",
43
43
  description: "Whether scrolling of tabs is enabled or not",
44
44
  defaultValue: false
45
45
  }),
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: "Title",
21
+ defaultValue: null,
22
22
  required: true,
23
23
  group: _types.GROUPS.basic
24
24
  }),
package/lib/module/components/TabView/TabView.js CHANGED
@@ -1,8 +1,8 @@
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
3
  import { TabView, TabBar, SceneMap } from "react-native-tab-view";
4
+ import TabViewItem from "./TabViewItem";
4
5
  import { withTheme } from "../../theming";
5
- import { extractStyles } from "../../utilities";
6
6
  const TabViewComponent = _ref => {
7
7
  let {
8
8
  Icon,
@@ -24,22 +24,12 @@ const TabViewComponent = _ref => {
24
24
  const [index, setIndex] = React.useState(0);
25
25
  const [routes, setRoutes] = React.useState([]);
26
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
27
 
38
28
  //Populate routes and scenes based on children
39
29
  React.useEffect(() => {
40
30
  const newRoutes = [];
41
31
  const scenes = {};
42
- React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && instanceOfTabViewItemProps(child.props)).forEach((item, idx) => {
32
+ React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === TabViewItem).forEach((item, idx) => {
43
33
  const child = item;
44
34
  newRoutes.push({
45
35
  key: idx.toString(),
@@ -68,7 +58,6 @@ const TabViewComponent = _ref => {
68
58
  indicatorStyle: {
69
59
  backgroundColor: indicatorColor || theme.colors.primary
70
60
  },
71
- labelStyle: textStyles,
72
61
  renderIcon: _ref2 => {
73
62
  let {
74
63
  route,
@@ -77,21 +66,15 @@ const TabViewComponent = _ref => {
77
66
  return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
78
67
  name: route.icon,
79
68
  color: color,
80
- size: 16
69
+ size: 36
81
70
  }) : null;
82
71
  },
83
- style: {
72
+ style: [{
84
73
  backgroundColor: tabsBackgroundColor || theme.colors.background
85
- }
74
+ }, style]
86
75
  }));
87
76
  };
88
-
89
- //Cannot render TabView without at least one tab
90
- if (!routes.length) {
91
- return /*#__PURE__*/React.createElement(React.Fragment, null);
92
- }
93
77
  return /*#__PURE__*/React.createElement(TabView, {
94
- style: [viewStyles],
95
78
  navigationState: {
96
79
  index,
97
80
  routes
package/lib/module/constants.js CHANGED
@@ -6,5 +6,4 @@ const DEFAULT_STATUSBAR_HEIGHT_EXPO = expo !== null && expo !== void 0 && expo.C
6
6
  export const APPROX_STATUSBAR_HEIGHT = Platform.select({
7
7
  android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
8
8
  ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
9
- });O : 0
10
9
  });
package/lib/module/mappings/TabView.js CHANGED
@@ -1,10 +1,10 @@
1
- import { COMPONENT_TYPES, createTextEnumProp, createColorProp, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS } from "@draftbit/types";
1
+ import { COMPONENT_TYPES, createTextEnumProp, createColorProp, BLOCK_STYLES_SECTIONS, 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: [StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects, StylesPanelSections.LayoutSelectedItem, StylesPanelSections.Background, StylesPanelSections.Typography],
7
+ stylesPanelSections: [...BLOCK_STYLES_SECTIONS, StylesPanelSections.Background],
8
8
  triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
9
9
  props: {
10
10
  onIndexChanged: createActionProp({
@@ -33,7 +33,7 @@ export const SEED_DATA = {
33
33
  defaultValue: true
34
34
  }),
35
35
  scrollEnabled: createStaticBoolProp({
36
- label: "Tab Scroll Enabled",
36
+ label: "Scroll Enabled",
37
37
  description: "Whether scrolling of tabs is enabled or not",
38
38
  defaultValue: false
39
39
  }),
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: "Title",
15
+ defaultValue: null,
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;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;;;;AA6Gb,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,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"}
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
- export interface TabViewItemProps {
3
+ 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,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"}
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"}
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":"AAWA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyErB,CAAC"}
1
+ {"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TabView.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoErB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "46.8.2-cd657e.2+cd657e6",
3
+ "version": "46.8.2-deff12.2+deff122",
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-cd657e.2+cd657e6",
44
+ "@draftbit/types": "^46.8.2-deff12.2+deff122",
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": "cd657e600fbd295c13085b08e44baec83d54afa1"
97
+ "gitHead": "deff1222ccbb8c708696a110ed25e4d6d0a90036"
98
98
  }
package/src/components/TabView/TabView.js CHANGED
@@ -1,23 +1,17 @@
1
1
  import * as React from "react";
2
2
  import { TabView, TabBar, SceneMap, } from "react-native-tab-view";
3
+ import TabViewItem from "./TabViewItem";
3
4
  import { withTheme } from "../../theming";
4
- import { extractStyles } from "../../utilities";
5
5
  const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, style, theme, children, }) => {
6
6
  const [index, setIndex] = React.useState(0);
7
7
  const [routes, setRoutes] = React.useState([]);
8
8
  const [tabScenes, setTabScenes] = React.useState({});
9
- const { textStyles, viewStyles } = extractStyles(style);
10
- //Check type of child using props
11
- //Regular '.type' cannot work because Draftbit strips the type in Draft view
12
- const instanceOfTabViewItemProps = (object) => {
13
- return "title" in object;
14
- };
15
9
  //Populate routes and scenes based on children
16
10
  React.useEffect(() => {
17
11
  const newRoutes = [];
18
12
  const scenes = {};
19
13
  React.Children.toArray(children)
20
- .filter((child) => React.isValidElement(child) && instanceOfTabViewItemProps(child.props))
14
+ .filter((child) => React.isValidElement(child) && child.type === TabViewItem)
21
15
  .forEach((item, idx) => {
22
16
  const child = item;
23
17
  newRoutes.push({
@@ -41,14 +35,11 @@ const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition,
41
35
  const renderTabBar = (props) => {
42
36
  return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || theme.colors.divider, pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
43
37
  backgroundColor: indicatorColor || theme.colors.primary,
44
- }, 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: {
45
- backgroundColor: tabsBackgroundColor || theme.colors.background,
46
- } }));
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
+ ] }));
47
42
  };
48
- //Cannot render TabView without at least one tab
49
- if (!routes.length) {
50
- return React.createElement(React.Fragment, null);
51
- }
52
- return (React.createElement(TabView, { style: [viewStyles], navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
43
+ return (React.createElement(TabView, { navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
53
44
  };
54
45
  export default withTheme(TabViewComponent);
package/src/components/TabView/TabView.tsx CHANGED
@@ -9,11 +9,10 @@ import {
9
9
  Route,
10
10
  } from "react-native-tab-view";
11
11
 
12
- import { TabViewItemProps } from "./TabViewItem";
12
+ import TabViewItem 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";
17
16
 
18
17
  type TabBarProps = SceneRendererProps & {
19
18
  navigationState: NavigationState<any>;
@@ -58,16 +57,6 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
58
57
  const [routes, setRoutes] = React.useState<Route[]>([]);
59
58
  const [tabScenes, setTabScenes] = React.useState({});
60
59
 
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
-
71
60
  //Populate routes and scenes based on children
72
61
  React.useEffect(() => {
73
62
  const newRoutes: Route[] = [];
@@ -75,8 +64,7 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
75
64
 
76
65
  React.Children.toArray(children)
77
66
  .filter(
78
- (child) =>
79
- React.isValidElement(child) && instanceOfTabViewItemProps(child.props)
67
+ (child) => React.isValidElement(child) && child.type === TabViewItem
80
68
  )
81
69
  .forEach((item: any, idx) => {
82
70
  const child = item as React.ReactElement;
@@ -112,27 +100,21 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
112
100
  indicatorStyle={{
113
101
  backgroundColor: indicatorColor || theme.colors.primary,
114
102
  }}
115
- labelStyle={textStyles}
116
103
  renderIcon={({ route, color }) =>
117
104
  route?.icon ? (
118
- <Icon name={route.icon} color={color} size={16} />
105
+ <Icon name={route.icon} color={color} size={36} />
119
106
  ) : null
120
107
  }
121
- style={{
122
- backgroundColor: tabsBackgroundColor || theme.colors.background,
123
- }}
108
+ style={[
109
+ { backgroundColor: tabsBackgroundColor || theme.colors.background },
110
+ style,
111
+ ]}
124
112
  />
125
113
  );
126
114
  };
127
115
 
128
- //Cannot render TabView without at least one tab
129
- if (!routes.length) {
130
- return <></>;
131
- }
132
-
133
116
  return (
134
117
  <TabView
135
- style={[viewStyles]}
136
118
  navigationState={{ index, routes }}
137
119
  renderScene={SceneMap(tabScenes)}
138
120
  renderTabBar={renderTabBar}
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
- export interface TabViewItemProps {
5
+ interface TabViewItemProps {
6
6
  title: string;
7
7
  icon?: string;
8
8
  accessibilityLabel?: string;
package/src/mappings/TabView.js CHANGED
@@ -1,17 +1,12 @@
1
- import { COMPONENT_TYPES, createTextEnumProp, createColorProp, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS, } from "@draftbit/types";
1
+ import { COMPONENT_TYPES, createTextEnumProp, createColorProp, BLOCK_STYLES_SECTIONS, 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
- StylesPanelSections.Size,
9
- StylesPanelSections.MarginsAndPaddings,
10
- StylesPanelSections.Position,
11
- StylesPanelSections.Effects,
12
- StylesPanelSections.LayoutSelectedItem,
8
+ ...BLOCK_STYLES_SECTIONS,
13
9
  StylesPanelSections.Background,
14
- StylesPanelSections.Typography,
15
10
  ],
16
11
  triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
17
12
  props: {
@@ -41,7 +36,7 @@ export const SEED_DATA = {
41
36
  defaultValue: true,
42
37
  }),
43
38
  scrollEnabled: createStaticBoolProp({
44
- label: "Tab Scroll Enabled",
39
+ label: "Scroll Enabled",
45
40
  description: "Whether scrolling of tabs is enabled or not",
46
41
  defaultValue: false,
47
42
  }),
package/src/mappings/TabView.ts CHANGED
@@ -2,6 +2,7 @@ import {
2
2
  COMPONENT_TYPES,
3
3
  createTextEnumProp,
4
4
  createColorProp,
5
+ BLOCK_STYLES_SECTIONS,
5
6
  StylesPanelSections,
6
7
  Triggers,
7
8
  createActionProp,
@@ -15,13 +16,8 @@ export const SEED_DATA = {
15
16
  description: "Tab view container",
16
17
  category: COMPONENT_TYPES.swiper,
17
18
  stylesPanelSections: [
18
- StylesPanelSections.Size,
19
- StylesPanelSections.MarginsAndPaddings,
20
- StylesPanelSections.Position,
21
- StylesPanelSections.Effects,
22
- StylesPanelSections.LayoutSelectedItem,
19
+ ...BLOCK_STYLES_SECTIONS,
23
20
  StylesPanelSections.Background,
24
- StylesPanelSections.Typography,
25
21
  ],
26
22
  triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
27
23
  props: {
@@ -51,7 +47,7 @@ export const SEED_DATA = {
51
47
  defaultValue: true,
52
48
  }),
53
49
  scrollEnabled: createStaticBoolProp({
54
- label: "Tab Scroll Enabled",
50
+ label: "Scroll Enabled",
55
51
  description: "Whether scrolling of tabs is enabled or not",
56
52
  defaultValue: false,
57
53
  }),
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: "Title",
15
+ defaultValue: null,
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: "Title",
23
+ defaultValue: null,
24
24
  required: true,
25
25
  group: GROUPS.basic,
26
26
  }),