@draftbit/core 46.8.2-81337b.2 → 46.8.2-9b0174.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 (64) hide show
  1. package/lib/commonjs/components/BottomSheet/BottomSheet.js +89 -0
  2. package/lib/commonjs/components/BottomSheet/BottomSheetComponent.js +464 -0
  3. package/lib/commonjs/components/BottomSheet/index.js +13 -0
  4. package/lib/commonjs/components/DeprecatedCardWrapper.js +1 -15
  5. package/lib/commonjs/constants.js +1 -1
  6. package/lib/commonjs/index.js +7 -13
  7. package/lib/commonjs/mappings/BottomSheet.js +75 -0
  8. package/lib/commonjs/styles/overlay.js +3 -1
  9. package/lib/commonjs/utilities.js +2 -1
  10. package/lib/module/components/BottomSheet/BottomSheet.js +81 -0
  11. package/lib/module/components/BottomSheet/BottomSheetComponent.js +470 -0
  12. package/lib/module/components/BottomSheet/index.js +1 -0
  13. package/lib/module/index.js +1 -1
  14. package/lib/module/mappings/BottomSheet.js +68 -0
  15. package/lib/typescript/src/components/BottomSheet/BottomSheet.d.ts +20 -0
  16. package/lib/typescript/src/components/BottomSheet/BottomSheet.d.ts.map +1 -0
  17. package/lib/typescript/src/components/BottomSheet/BottomSheetComponent.d.ts +170 -0
  18. package/lib/typescript/src/components/BottomSheet/BottomSheetComponent.d.ts.map +1 -0
  19. package/lib/typescript/src/components/BottomSheet/index.d.ts +2 -0
  20. package/lib/typescript/src/components/BottomSheet/index.d.ts.map +1 -0
  21. package/lib/typescript/src/index.d.ts +1 -1
  22. package/lib/typescript/src/index.d.ts.map +1 -1
  23. package/lib/typescript/src/mappings/{TabView.d.ts → BottomSheet.d.ts} +40 -43
  24. package/lib/typescript/src/mappings/BottomSheet.d.ts.map +1 -0
  25. package/package.json +3 -5
  26. package/src/components/BottomSheet/BottomSheet.js +57 -0
  27. package/src/components/BottomSheet/BottomSheet.tsx +121 -0
  28. package/src/components/BottomSheet/BottomSheetComponent.js +437 -0
  29. package/src/components/BottomSheet/BottomSheetComponent.tsx +895 -0
  30. package/src/components/BottomSheet/index.js +1 -0
  31. package/src/components/BottomSheet/index.ts +1 -0
  32. package/src/index.js +1 -1
  33. package/src/index.tsx +1 -1
  34. package/src/mappings/BottomSheet.js +64 -0
  35. package/src/mappings/BottomSheet.ts +78 -0
  36. package/lib/commonjs/components/TabView/TabView.js +0 -100
  37. package/lib/commonjs/components/TabView/TabViewItem.js +0 -25
  38. package/lib/commonjs/components/TabView/index.js +0 -20
  39. package/lib/commonjs/mappings/TabView.js +0 -74
  40. package/lib/commonjs/mappings/TabViewItem.js +0 -37
  41. package/lib/module/components/TabView/TabView.js +0 -90
  42. package/lib/module/components/TabView/TabViewItem.js +0 -20
  43. package/lib/module/components/TabView/index.js +0 -2
  44. package/lib/module/mappings/TabView.js +0 -67
  45. package/lib/module/mappings/TabViewItem.js +0 -30
  46. package/lib/typescript/src/components/TabView/TabView.d.ts +0 -26
  47. package/lib/typescript/src/components/TabView/TabView.d.ts.map +0 -1
  48. package/lib/typescript/src/components/TabView/TabViewItem.d.ts +0 -11
  49. package/lib/typescript/src/components/TabView/TabViewItem.d.ts.map +0 -1
  50. package/lib/typescript/src/components/TabView/index.d.ts +0 -3
  51. package/lib/typescript/src/components/TabView/index.d.ts.map +0 -1
  52. package/lib/typescript/src/mappings/TabView.d.ts.map +0 -1
  53. package/lib/typescript/src/mappings/TabViewItem.d.ts +0 -25
  54. package/lib/typescript/src/mappings/TabViewItem.d.ts.map +0 -1
  55. package/src/components/TabView/TabView.js +0 -45
  56. package/src/components/TabView/TabView.tsx +0 -129
  57. package/src/components/TabView/TabViewItem.js +0 -11
  58. package/src/components/TabView/TabViewItem.tsx +0 -25
  59. package/src/components/TabView/index.js +0 -2
  60. package/src/components/TabView/index.tsx +0 -2
  61. package/src/mappings/TabView.js +0 -70
  62. package/src/mappings/TabView.ts +0 -81
  63. package/src/mappings/TabViewItem.js +0 -30
  64. package/src/mappings/TabViewItem.ts +0 -38
@@ -0,0 +1 @@
1
+ export { default as BottomSheet } from "./BottomSheet";
@@ -0,0 +1 @@
1
+ export { default as BottomSheet } from "./BottomSheet";
package/src/index.js CHANGED
@@ -32,7 +32,7 @@ export { Swiper, SwiperItem } from "./components/Swiper";
32
32
  export { Center, Circle, Square, Row, Stack, Spacer, } from "./components/Layout";
33
33
  export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup, } from "./components/RadioButton/index";
34
34
  export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
35
- export { TabView, TabViewItem } from "./components/TabView";
35
+ export { BottomSheet } from "./components/BottomSheet";
36
36
  /* Deprecated: Fix or Delete! */
37
37
  export { default as DatePicker } from "./components/DatePicker/DatePicker";
38
38
  export { default as Picker } from "./components/Picker/Picker";
package/src/index.tsx CHANGED
@@ -53,7 +53,7 @@ export {
53
53
 
54
54
  export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
55
55
 
56
- export { TabView, TabViewItem } from "./components/TabView";
56
+ export { BottomSheet } from "./components/BottomSheet";
57
57
 
58
58
  /* Deprecated: Fix or Delete! */
59
59
  export { default as DatePicker } from "./components/DatePicker/DatePicker";
@@ -0,0 +1,64 @@
1
+ import { COMPONENT_TYPES, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createColorProp, createStaticArrayProp, createStaticNumberProp, } from "@draftbit/types";
2
+ export const SEED_DATA = {
3
+ name: "Bottom Sheet",
4
+ tag: "BottomSheet",
5
+ description: "A draggable Bottom sheet that snaps to specific points. Renders children in ScrollView",
6
+ category: COMPONENT_TYPES.bottomsheet,
7
+ stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
8
+ layout: { paddingHorizontal: 16, paddingVertical: 10, flex: 1 },
9
+ triggers: [Triggers.OnSettle],
10
+ props: {
11
+ onSettle: createActionProp({
12
+ label: "On settle",
13
+ description: "Action to execute when sheet settles on a snap point",
14
+ }),
15
+ snapPoints: createStaticArrayProp({
16
+ label: "Snap points",
17
+ description: "An array of numerical values (that represent distance from the top) where bottom sheet can snap to place. Accepts numbers and percentages (minimum 2 snap points)",
18
+ defaultValue: ["10%", "50%", "80%"],
19
+ }),
20
+ initialSnapIndex: createStaticNumberProp({
21
+ label: "Initial snap index",
22
+ description: "Index of the snap point to be used as the initial point",
23
+ defaultValue: 0,
24
+ required: false,
25
+ }),
26
+ showHandle: createStaticBoolProp({
27
+ label: "Show handle",
28
+ description: "Whether to show the top handle or not",
29
+ defaultValue: true,
30
+ }),
31
+ handleColor: createColorProp({
32
+ label: "Handle color",
33
+ description: "Color of the top handle",
34
+ defaultValue: "divider",
35
+ }),
36
+ topBorderRadius: createStaticNumberProp({
37
+ label: "Top border radius",
38
+ description: "Border radius of top corners",
39
+ defaultValue: 20,
40
+ required: false,
41
+ }),
42
+ borderWidth: createStaticNumberProp({
43
+ label: "Border width",
44
+ description: "Width of bottom sheet borders",
45
+ defaultValue: 1,
46
+ required: false,
47
+ }),
48
+ borderColor: createColorProp({
49
+ label: "Border color",
50
+ description: "Color of bottom sheet borders",
51
+ defaultValue: "divider",
52
+ }),
53
+ showsVerticalScrollIndicator: createStaticBoolProp({
54
+ label: "Show Vertical Scroll Indicator",
55
+ description: "When true, shows a vertical scroll indicator. The default value is true.",
56
+ defaultValue: true,
57
+ }),
58
+ bounces: createStaticBoolProp({
59
+ label: "Bounce",
60
+ description: "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
61
+ defaultValue: true,
62
+ }),
63
+ },
64
+ };
@@ -0,0 +1,78 @@
1
+ import {
2
+ COMPONENT_TYPES,
3
+ createStaticBoolProp,
4
+ CONTAINER_COMPONENT_STYLES_SECTIONS,
5
+ Triggers,
6
+ createActionProp,
7
+ createColorProp,
8
+ createStaticArrayProp,
9
+ createStaticNumberProp,
10
+ } from "@draftbit/types";
11
+
12
+ export const SEED_DATA = {
13
+ name: "Bottom Sheet",
14
+ tag: "BottomSheet",
15
+ description:
16
+ "A draggable Bottom sheet that snaps to specific points. Renders children in ScrollView",
17
+ category: COMPONENT_TYPES.bottomsheet,
18
+ stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
19
+ layout: { paddingHorizontal: 16, paddingVertical: 10, flex: 1 },
20
+ triggers: [Triggers.OnSettle],
21
+ props: {
22
+ onSettle: createActionProp({
23
+ label: "On settle",
24
+ description: "Action to execute when sheet settles on a snap point",
25
+ }),
26
+ snapPoints: createStaticArrayProp({
27
+ label: "Snap points",
28
+ description:
29
+ "An array of numerical values (that represent distance from the top) where bottom sheet can snap to place. Accepts numbers and percentages (minimum 2 snap points)",
30
+ defaultValue: ["10%", "50%", "80%"],
31
+ }),
32
+ initialSnapIndex: createStaticNumberProp({
33
+ label: "Initial snap index",
34
+ description: "Index of the snap point to be used as the initial point",
35
+ defaultValue: 0,
36
+ required: false,
37
+ }),
38
+ showHandle: createStaticBoolProp({
39
+ label: "Show handle",
40
+ description: "Whether to show the top handle or not",
41
+ defaultValue: true,
42
+ }),
43
+ handleColor: createColorProp({
44
+ label: "Handle color",
45
+ description: "Color of the top handle",
46
+ defaultValue: "divider",
47
+ }),
48
+ topBorderRadius: createStaticNumberProp({
49
+ label: "Top border radius",
50
+ description: "Border radius of top corners",
51
+ defaultValue: 20,
52
+ required: false,
53
+ }),
54
+ borderWidth: createStaticNumberProp({
55
+ label: "Border width",
56
+ description: "Width of bottom sheet borders",
57
+ defaultValue: 1,
58
+ required: false,
59
+ }),
60
+ borderColor: createColorProp({
61
+ label: "Border color",
62
+ description: "Color of bottom sheet borders",
63
+ defaultValue: "divider",
64
+ }),
65
+ showsVerticalScrollIndicator: createStaticBoolProp({
66
+ label: "Show Vertical Scroll Indicator",
67
+ description:
68
+ "When true, shows a vertical scroll indicator. The default value is true.",
69
+ defaultValue: true,
70
+ }),
71
+ bounces: createStaticBoolProp({
72
+ label: "Bounce",
73
+ description:
74
+ "When true, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction.",
75
+ defaultValue: true,
76
+ }),
77
+ },
78
+ };
@@ -1,100 +0,0 @@
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 _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
10
- var _theming = require("../../theming");
11
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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
- 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
- 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); }
15
- const TabViewComponent = _ref => {
16
- let {
17
- Icon,
18
- onIndexChanged,
19
- onEndReached,
20
- tabBarPosition,
21
- keyboardDismissMode,
22
- swipeEnabled,
23
- scrollEnabled,
24
- activeColor,
25
- inactiveColor,
26
- pressColor,
27
- indicatorColor,
28
- tabsBackgroundColor,
29
- style,
30
- theme,
31
- children
32
- } = _ref;
33
- const [index, setIndex] = React.useState(0);
34
- const [routes, setRoutes] = React.useState([]);
35
- const [tabScenes, setTabScenes] = React.useState({});
36
-
37
- //Populate routes and scenes based on children
38
- React.useEffect(() => {
39
- const newRoutes = [];
40
- const scenes = {};
41
- React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === _TabViewItem.default).forEach((item, idx) => {
42
- const child = item;
43
- newRoutes.push({
44
- key: idx.toString(),
45
- title: child.props.title,
46
- icon: child.props.icon,
47
- accessibilityLabel: child.props.accessibilityLabel
48
- });
49
- scenes[idx] = () => child;
50
- });
51
- setRoutes(newRoutes);
52
- setTabScenes(scenes);
53
- }, [children]);
54
- const indexChangeHandler = i => {
55
- setIndex(i);
56
- onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
57
- if (i === routes.length) {
58
- onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
59
- }
60
- };
61
- const renderTabBar = props => {
62
- return /*#__PURE__*/React.createElement(_reactNativeTabView.TabBar, _extends({}, props, {
63
- activeColor: activeColor || theme.colors.primary,
64
- inactiveColor: inactiveColor || theme.colors.divider,
65
- pressColor: pressColor || theme.colors.primary,
66
- scrollEnabled: scrollEnabled,
67
- indicatorStyle: {
68
- backgroundColor: indicatorColor || theme.colors.primary
69
- },
70
- renderIcon: _ref2 => {
71
- let {
72
- route,
73
- color
74
- } = _ref2;
75
- return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
76
- name: route.icon,
77
- color: color,
78
- size: 36
79
- }) : null;
80
- },
81
- style: [{
82
- backgroundColor: tabsBackgroundColor || theme.colors.background
83
- }, style]
84
- }));
85
- };
86
- return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
87
- navigationState: {
88
- index,
89
- routes
90
- },
91
- renderScene: (0, _reactNativeTabView.SceneMap)(tabScenes),
92
- renderTabBar: renderTabBar,
93
- onIndexChange: indexChangeHandler,
94
- tabBarPosition: tabBarPosition,
95
- keyboardDismissMode: keyboardDismissMode,
96
- swipeEnabled: swipeEnabled
97
- });
98
- };
99
- var _default = (0, _theming.withTheme)(TabViewComponent);
100
- exports.default = _default;
@@ -1,25 +0,0 @@
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;
@@ -1,20 +0,0 @@
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 }; }
@@ -1,74 +0,0 @@
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.BLOCK_STYLES_SECTIONS, _types.StylesPanelSections.Background],
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: "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;
@@ -1,37 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.SEED_DATA = void 0;
7
- var _types = require("@draftbit/types");
8
- const SEED_DATA = {
9
- name: "Tab View Item",
10
- tag: "TabViewItem",
11
- description: "Single Tab View item to be used in TabView. Each item represents a single tab and its content",
12
- category: _types.COMPONENT_TYPES.swiper,
13
- stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
14
- layout: {
15
- flex: 1
16
- },
17
- props: {
18
- title: (0, _types.createTextProp)({
19
- label: "Title",
20
- description: "Title of tab item",
21
- defaultValue: "Title",
22
- required: true,
23
- group: _types.GROUPS.basic
24
- }),
25
- icon: (0, _types.createIconProp)({
26
- defaultValue: null,
27
- required: false
28
- }),
29
- accessibilityLabel: (0, _types.createTextProp)({
30
- label: "Accessibility Label",
31
- description: "Accessibility Label",
32
- defaultValue: null,
33
- group: _types.GROUPS.accessibility
34
- })
35
- }
36
- };
37
- exports.SEED_DATA = SEED_DATA;
@@ -1,90 +0,0 @@
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 TabViewItem from "./TabViewItem";
5
- import { withTheme } from "../../theming";
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
-
28
- //Populate routes and scenes based on children
29
- React.useEffect(() => {
30
- const newRoutes = [];
31
- const scenes = {};
32
- React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === TabViewItem).forEach((item, idx) => {
33
- const child = item;
34
- newRoutes.push({
35
- key: idx.toString(),
36
- title: child.props.title,
37
- icon: child.props.icon,
38
- accessibilityLabel: child.props.accessibilityLabel
39
- });
40
- scenes[idx] = () => child;
41
- });
42
- setRoutes(newRoutes);
43
- setTabScenes(scenes);
44
- }, [children]);
45
- const indexChangeHandler = i => {
46
- setIndex(i);
47
- onIndexChanged === null || onIndexChanged === void 0 ? void 0 : onIndexChanged(i);
48
- if (i === routes.length) {
49
- onEndReached === null || onEndReached === void 0 ? void 0 : onEndReached();
50
- }
51
- };
52
- const renderTabBar = props => {
53
- return /*#__PURE__*/React.createElement(TabBar, _extends({}, props, {
54
- activeColor: activeColor || theme.colors.primary,
55
- inactiveColor: inactiveColor || theme.colors.divider,
56
- pressColor: pressColor || theme.colors.primary,
57
- scrollEnabled: scrollEnabled,
58
- indicatorStyle: {
59
- backgroundColor: indicatorColor || theme.colors.primary
60
- },
61
- renderIcon: _ref2 => {
62
- let {
63
- route,
64
- color
65
- } = _ref2;
66
- return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
67
- name: route.icon,
68
- color: color,
69
- size: 36
70
- }) : null;
71
- },
72
- style: [{
73
- backgroundColor: tabsBackgroundColor || theme.colors.background
74
- }, style]
75
- }));
76
- };
77
- return /*#__PURE__*/React.createElement(TabView, {
78
- navigationState: {
79
- index,
80
- routes
81
- },
82
- renderScene: SceneMap(tabScenes),
83
- renderTabBar: renderTabBar,
84
- onIndexChange: indexChangeHandler,
85
- tabBarPosition: tabBarPosition,
86
- keyboardDismissMode: keyboardDismissMode,
87
- swipeEnabled: swipeEnabled
88
- });
89
- };
90
- export default withTheme(TabViewComponent);
@@ -1,20 +0,0 @@
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;
@@ -1,2 +0,0 @@
1
- export { default as TabView } from "./TabView";
2
- export { default as TabViewItem } from "./TabViewItem";
@@ -1,67 +0,0 @@
1
- import { COMPONENT_TYPES, createTextEnumProp, createColorProp, BLOCK_STYLES_SECTIONS, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS } from "@draftbit/types";
2
- export const SEED_DATA = {
3
- name: "Tab View",
4
- tag: "TabView",
5
- description: "Tab view container",
6
- category: COMPONENT_TYPES.swiper,
7
- stylesPanelSections: [...BLOCK_STYLES_SECTIONS, StylesPanelSections.Background],
8
- triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
9
- props: {
10
- onIndexChanged: createActionProp({
11
- label: "On index changed",
12
- description: "Action to execute when swipe to new index"
13
- }),
14
- onEndReached: createActionProp({
15
- label: "On end reached",
16
- description: "Action to execute when end of swiping reached"
17
- }),
18
- tabBarPosition: createTextEnumProp({
19
- label: "Tab Bar Position",
20
- description: "Position of tab bar",
21
- options: ["top", "bottom"],
22
- defaultValue: "top"
23
- }),
24
- keyboardDismissMode: createTextEnumProp({
25
- label: "Keyboard Dismiss Mode",
26
- description: "Keyboard Dismiss Mode",
27
- options: ["auto", "on-drag", "none"],
28
- defaultValue: "auto"
29
- }),
30
- swipeEnabled: createStaticBoolProp({
31
- label: "Swipe Enabled",
32
- description: "Whether swiping is enabled or not",
33
- defaultValue: true
34
- }),
35
- scrollEnabled: createStaticBoolProp({
36
- label: "Scroll Enabled",
37
- description: "Whether scrolling of tabs is enabled or not",
38
- defaultValue: false
39
- }),
40
- activeColor: createColorProp({
41
- label: "Active Color",
42
- description: "Color of icon and text of active tab",
43
- defaultValue: "primary"
44
- }),
45
- inactiveColor: createColorProp({
46
- label: "Inactive Color",
47
- description: "Color of icon and text of inactive tab(s)",
48
- defaultValue: null
49
- }),
50
- pressColor: createColorProp({
51
- label: "Press Color",
52
- description: "Color of ripple when pressed",
53
- defaultValue: "primary",
54
- group: GROUPS.android
55
- }),
56
- indicatorColor: createColorProp({
57
- label: "Indicator Color",
58
- description: "Color of indicator",
59
- defaultValue: "primary"
60
- }),
61
- tabsBackgroundColor: createColorProp({
62
- label: "Tabs Background Color",
63
- description: "Background color of tabs container",
64
- defaultValue: "background"
65
- })
66
- }
67
- };
@@ -1,30 +0,0 @@
1
- import { COMPONENT_TYPES, createTextProp, createIconProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS } from "@draftbit/types";
2
- export const SEED_DATA = {
3
- name: "Tab View Item",
4
- tag: "TabViewItem",
5
- description: "Single Tab View item to be used in TabView. Each item represents a single tab and its content",
6
- category: COMPONENT_TYPES.swiper,
7
- stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
8
- layout: {
9
- flex: 1
10
- },
11
- props: {
12
- title: createTextProp({
13
- label: "Title",
14
- description: "Title of tab item",
15
- defaultValue: "Title",
16
- required: true,
17
- group: GROUPS.basic
18
- }),
19
- icon: createIconProp({
20
- defaultValue: null,
21
- required: false
22
- }),
23
- accessibilityLabel: createTextProp({
24
- label: "Accessibility Label",
25
- description: "Accessibility Label",
26
- defaultValue: null,
27
- group: GROUPS.accessibility
28
- })
29
- }
30
- };
@@ -1,26 +0,0 @@
1
- import * as React from "react";
2
- import { StyleProp, ViewStyle } from "react-native";
3
- import type { IconSlot } from "../../interfaces/Icon";
4
- import type { Theme } from "../../styles/DefaultTheme";
5
- declare type TabBarPosition = "top" | "bottom";
6
- declare type KeyboardDismissMode = "none" | "auto" | "on-drag";
7
- declare type TabViewProps = {
8
- onIndexChanged?: (index: number) => void;
9
- onEndReached?: () => void;
10
- tabBarPosition?: TabBarPosition;
11
- keyboardDismissMode?: KeyboardDismissMode;
12
- swipeEnabled?: boolean;
13
- scrollEnabled?: boolean;
14
- activeColor?: string;
15
- inactiveColor?: string;
16
- pressColor?: string;
17
- indicatorColor?: string;
18
- tabsBackgroundColor?: string;
19
- style?: StyleProp<ViewStyle>;
20
- theme: Theme;
21
- } & IconSlot;
22
- declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<TabViewProps>, "theme"> & {
23
- theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
24
- }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<React.PropsWithChildren<TabViewProps>> & React.FC<React.PropsWithChildren<TabViewProps>>, {}>;
25
- export default _default;
26
- //# sourceMappingURL=TabView.d.ts.map
@@ -1 +0,0 @@
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"}