@draftbit/core 46.8.2-bdb2fb.2 → 46.8.2-d00b3c.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 (17) hide show
  1. package/lib/commonjs/components/TabView/TabView.js +2 -15
  2. package/lib/commonjs/mappings/TabView.js +2 -5
  3. package/lib/commonjs/mappings/TabViewItem.js +1 -1
  4. package/lib/module/components/Portal/PortalManager.js +7 -33
  5. package/lib/module/components/TabView/TabView.js +2 -15
  6. package/lib/module/mappings/TabView.js +3 -6
  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/mappings/TabView.d.ts +0 -3
  10. package/lib/typescript/src/mappings/TabView.d.ts.map +1 -1
  11. package/package.json +3 -3
  12. package/src/components/TabView/TabView.js +5 -10
  13. package/src/components/TabView/TabView.tsx +5 -13
  14. package/src/mappings/TabView.js +3 -9
  15. package/src/mappings/TabView.ts +3 -8
  16. package/src/mappings/TabViewItem.js +1 -1
  17. package/src/mappings/TabViewItem.ts +1 -1
package/lib/commonjs/components/TabView/TabView.js CHANGED
@@ -5,11 +5,9 @@ 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");
9
8
  var _reactNativeTabView = require("react-native-tab-view");
10
9
  var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
11
10
  var _theming = require("../../theming");
12
- var _utilities = require("../../utilities");
13
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
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); }
15
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; }
@@ -35,10 +33,6 @@ const TabViewComponent = _ref => {
35
33
  const [index, setIndex] = React.useState(0);
36
34
  const [routes, setRoutes] = React.useState([]);
37
35
  const [tabScenes, setTabScenes] = React.useState({});
38
- const {
39
- textStyles,
40
- viewStyles
41
- } = (0, _utilities.extractStyles)(style);
42
36
 
43
37
  //Populate routes and scenes based on children
44
38
  React.useEffect(() => {
@@ -73,7 +67,6 @@ const TabViewComponent = _ref => {
73
67
  indicatorStyle: {
74
68
  backgroundColor: indicatorColor || theme.colors.primary
75
69
  },
76
- labelStyle: textStyles,
77
70
  renderIcon: _ref2 => {
78
71
  let {
79
72
  route,
@@ -85,13 +78,12 @@ const TabViewComponent = _ref => {
85
78
  size: 36
86
79
  }) : null;
87
80
  },
88
- style: {
81
+ style: [{
89
82
  backgroundColor: tabsBackgroundColor || theme.colors.background
90
- }
83
+ }, style]
91
84
  }));
92
85
  };
93
86
  return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
94
- style: [styles.tabView, viewStyles],
95
87
  navigationState: {
96
88
  index,
97
89
  routes
@@ -104,10 +96,5 @@ const TabViewComponent = _ref => {
104
96
  swipeEnabled: swipeEnabled
105
97
  });
106
98
  };
107
- const styles = _reactNative.StyleSheet.create({
108
- tabView: {
109
- flex: 1
110
- }
111
- });
112
99
  var _default = (0, _theming.withTheme)(TabViewComponent);
113
100
  exports.default = _default;
package/lib/commonjs/mappings/TabView.js CHANGED
@@ -10,10 +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],
14
- layout: {
15
- flex: 1
16
- },
13
+ stylesPanelSections: [..._types.BLOCK_STYLES_SECTIONS, _types.StylesPanelSections.Background],
17
14
  triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
18
15
  props: {
19
16
  onIndexChanged: (0, _types.createActionProp)({
@@ -44,7 +41,7 @@ const SEED_DATA = {
44
41
  scrollEnabled: (0, _types.createStaticBoolProp)({
45
42
  label: "Scroll Enabled",
46
43
  description: "Whether scrolling of tabs is enabled or not",
47
- defaultValue: false
44
+ defaultValue: true
48
45
  }),
49
46
  activeColor: (0, _types.createColorProp)({
50
47
  label: "Active Color",
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/Portal/PortalManager.js CHANGED
@@ -1,3 +1,6 @@
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 * as React from "react";
2
5
  import { View, StyleSheet } from "react-native";
3
6
  /**
@@ -6,47 +9,18 @@ import { View, StyleSheet } from "react-native";
6
9
  export default class PortalManager extends React.PureComponent {
7
10
  constructor() {
8
11
  super(...arguments);
9
- this.state = {
12
+ _defineProperty(this, "state", {
10
13
  portals: []
11
- };
12
- this.mount = (key, children) => {
14
+ });
15
+ _defineProperty(this, "mount", (key, children) => {
13
16
  this.setState(state => ({
14
17
  portals: [...state.portals, {
15
18
  key,
16
19
  children
17
20
  }]
18
21
  }));
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);
47
22
  });
48
- }
49
- }ey, children) => this.setState(state => ({
23
+ _defineProperty(this, "update", (key, children) => this.setState(state => ({
50
24
  portals: state.portals.map(item => {
51
25
  if (item.key === key) {
52
26
  return {
package/lib/module/components/TabView/TabView.js CHANGED
@@ -1,10 +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
- import { StyleSheet } from "react-native";
4
3
  import { TabView, TabBar, SceneMap } from "react-native-tab-view";
5
4
  import TabViewItem from "./TabViewItem";
6
5
  import { withTheme } from "../../theming";
7
- import { extractStyles } from "../../utilities";
8
6
  const TabViewComponent = _ref => {
9
7
  let {
10
8
  Icon,
@@ -26,10 +24,6 @@ const TabViewComponent = _ref => {
26
24
  const [index, setIndex] = React.useState(0);
27
25
  const [routes, setRoutes] = React.useState([]);
28
26
  const [tabScenes, setTabScenes] = React.useState({});
29
- const {
30
- textStyles,
31
- viewStyles
32
- } = extractStyles(style);
33
27
 
34
28
  //Populate routes and scenes based on children
35
29
  React.useEffect(() => {
@@ -64,7 +58,6 @@ const TabViewComponent = _ref => {
64
58
  indicatorStyle: {
65
59
  backgroundColor: indicatorColor || theme.colors.primary
66
60
  },
67
- labelStyle: textStyles,
68
61
  renderIcon: _ref2 => {
69
62
  let {
70
63
  route,
@@ -76,13 +69,12 @@ const TabViewComponent = _ref => {
76
69
  size: 36
77
70
  }) : null;
78
71
  },
79
- style: {
72
+ style: [{
80
73
  backgroundColor: tabsBackgroundColor || theme.colors.background
81
- }
74
+ }, style]
82
75
  }));
83
76
  };
84
77
  return /*#__PURE__*/React.createElement(TabView, {
85
- style: [styles.tabView, viewStyles],
86
78
  navigationState: {
87
79
  index,
88
80
  routes
@@ -95,9 +87,4 @@ const TabViewComponent = _ref => {
95
87
  swipeEnabled: swipeEnabled
96
88
  });
97
89
  };
98
- const styles = StyleSheet.create({
99
- tabView: {
100
- flex: 1
101
- }
102
- });
103
90
  export default withTheme(TabViewComponent);
package/lib/module/mappings/TabView.js CHANGED
@@ -1,13 +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],
8
- layout: {
9
- flex: 1
10
- },
7
+ stylesPanelSections: [...BLOCK_STYLES_SECTIONS, StylesPanelSections.Background],
11
8
  triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
12
9
  props: {
13
10
  onIndexChanged: createActionProp({
@@ -38,7 +35,7 @@ export const SEED_DATA = {
38
35
  scrollEnabled: createStaticBoolProp({
39
36
  label: "Scroll Enabled",
40
37
  description: "Whether scrolling of tabs is enabled or not",
41
- defaultValue: false
38
+ defaultValue: true
42
39
  }),
43
40
  activeColor: createColorProp({
44
41
  label: "Active Color",
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,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;;;;AAmGb,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/mappings/TabView.d.ts CHANGED
@@ -4,9 +4,6 @@ export declare const SEED_DATA: {
4
4
  description: string;
5
5
  category: string;
6
6
  stylesPanelSections: string[];
7
- layout: {
8
- flex: number;
9
- };
10
7
  triggers: string[];
11
8
  props: {
12
9
  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":"AAWA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ErB,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-bdb2fb.2+bdb2fbd",
3
+ "version": "46.8.2-d00b3c.2+d00b3cc",
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-bdb2fb.2+bdb2fbd",
44
+ "@draftbit/types": "^46.8.2-d00b3c.2+d00b3cc",
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": "bdb2fbd9d472a8abb0d9553ca73679456ab4aa40"
97
+ "gitHead": "d00b3cc3a295efaaa187a3a9a4d8bfa016befaf1"
98
98
  }
package/src/components/TabView/TabView.js CHANGED
@@ -1,14 +1,11 @@
1
1
  import * as React from "react";
2
- import { StyleSheet } from "react-native";
3
2
  import { TabView, TabBar, SceneMap, } from "react-native-tab-view";
4
3
  import TabViewItem from "./TabViewItem";
5
4
  import { withTheme } from "../../theming";
6
- import { extractStyles } from "../../utilities";
7
5
  const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, style, theme, children, }) => {
8
6
  const [index, setIndex] = React.useState(0);
9
7
  const [routes, setRoutes] = React.useState([]);
10
8
  const [tabScenes, setTabScenes] = React.useState({});
11
- const { textStyles, viewStyles } = extractStyles(style);
12
9
  //Populate routes and scenes based on children
13
10
  React.useEffect(() => {
14
11
  const newRoutes = [];
@@ -38,13 +35,11 @@ const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition,
38
35
  const renderTabBar = (props) => {
39
36
  return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || theme.colors.divider, pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
40
37
  backgroundColor: indicatorColor || theme.colors.primary,
41
- }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: {
42
- backgroundColor: tabsBackgroundColor || theme.colors.background,
43
- } }));
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
+ ] }));
44
42
  };
45
- return (React.createElement(TabView, { style: [styles.tabView, 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 }));
46
44
  };
47
- const styles = StyleSheet.create({
48
- tabView: { flex: 1 },
49
- });
50
45
  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, StyleSheet } from "react-native";
2
+ import { StyleProp, ViewStyle } from "react-native";
3
3
  import {
4
4
  TabView,
5
5
  TabBar,
@@ -13,7 +13,6 @@ 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,8 +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
60
  //Populate routes and scenes based on children
64
61
  React.useEffect(() => {
65
62
  const newRoutes: Route[] = [];
@@ -103,22 +100,21 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
103
100
  indicatorStyle={{
104
101
  backgroundColor: indicatorColor || theme.colors.primary,
105
102
  }}
106
- labelStyle={textStyles}
107
103
  renderIcon={({ route, color }) =>
108
104
  route?.icon ? (
109
105
  <Icon name={route.icon} color={color} size={36} />
110
106
  ) : null
111
107
  }
112
- style={{
113
- backgroundColor: tabsBackgroundColor || theme.colors.background,
114
- }}
108
+ style={[
109
+ { backgroundColor: tabsBackgroundColor || theme.colors.background },
110
+ style,
111
+ ]}
115
112
  />
116
113
  );
117
114
  };
118
115
 
119
116
  return (
120
117
  <TabView
121
- style={[styles.tabView, viewStyles]}
122
118
  navigationState={{ index, routes }}
123
119
  renderScene={SceneMap(tabScenes)}
124
120
  renderTabBar={renderTabBar}
@@ -130,8 +126,4 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
130
126
  );
131
127
  };
132
128
 
133
- const styles = StyleSheet.create({
134
- tabView: { flex: 1 },
135
- });
136
-
137
129
  export default withTheme(TabViewComponent);
package/src/mappings/TabView.js CHANGED
@@ -1,19 +1,13 @@
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
- layout: { flex: 1 },
17
11
  triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
18
12
  props: {
19
13
  onIndexChanged: createActionProp({
@@ -44,7 +38,7 @@ export const SEED_DATA = {
44
38
  scrollEnabled: createStaticBoolProp({
45
39
  label: "Scroll Enabled",
46
40
  description: "Whether scrolling of tabs is enabled or not",
47
- defaultValue: false,
41
+ defaultValue: true,
48
42
  }),
49
43
  activeColor: createColorProp({
50
44
  label: "Active Color",
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,15 +16,9 @@ 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
- layout: { flex: 1 },
27
22
  triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
28
23
  props: {
29
24
  onIndexChanged: createActionProp({
@@ -54,7 +49,7 @@ export const SEED_DATA = {
54
49
  scrollEnabled: createStaticBoolProp({
55
50
  label: "Scroll Enabled",
56
51
  description: "Whether scrolling of tabs is enabled or not",
57
- defaultValue: false,
52
+ defaultValue: true,
58
53
  }),
59
54
  activeColor: createColorProp({
60
55
  label: "Active Color",
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
  }),