@draftbit/core 46.7.9-437259.2 → 46.7.9-87e09b.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 (53) hide show
  1. package/lib/commonjs/components/DeprecatedFAB.js +21 -3
  2. package/lib/commonjs/components/Divider.js +14 -1
  3. package/lib/commonjs/components/Shadow.js +42 -0
  4. package/lib/commonjs/index.js +7 -13
  5. package/lib/commonjs/mappings/Shadow.js +94 -0
  6. package/lib/module/components/IconButton.js +4 -21
  7. package/lib/module/components/Shadow.js +34 -0
  8. package/lib/module/constants.js +1 -0
  9. package/lib/module/index.js +1 -1
  10. package/lib/module/mappings/Shadow.js +87 -0
  11. package/lib/typescript/src/components/Shadow.d.ts +24 -0
  12. package/lib/typescript/src/components/Shadow.d.ts.map +1 -0
  13. package/lib/typescript/src/index.d.ts +1 -1
  14. package/lib/typescript/src/index.d.ts.map +1 -1
  15. package/lib/typescript/src/mappings/Shadow.d.ts +173 -0
  16. package/lib/typescript/src/mappings/Shadow.d.ts.map +1 -0
  17. package/package.json +4 -4
  18. package/src/components/Shadow.js +16 -0
  19. package/src/components/Shadow.tsx +58 -0
  20. package/src/index.js +1 -1
  21. package/src/index.tsx +1 -1
  22. package/src/mappings/Shadow.js +87 -0
  23. package/src/mappings/Shadow.ts +95 -0
  24. package/lib/commonjs/components/DeckSwiper/DeckSwiper.js +0 -73
  25. package/lib/commonjs/components/DeckSwiper/DeckSwiperCard.js +0 -35
  26. package/lib/commonjs/components/DeckSwiper/index.js +0 -20
  27. package/lib/commonjs/mappings/DeckSwiper.js +0 -52
  28. package/lib/commonjs/mappings/DeckSwiperCard.js +0 -16
  29. package/lib/module/components/DeckSwiper/DeckSwiper.js +0 -65
  30. package/lib/module/components/DeckSwiper/DeckSwiperCard.js +0 -27
  31. package/lib/module/components/DeckSwiper/index.js +0 -2
  32. package/lib/module/mappings/DeckSwiper.js +0 -45
  33. package/lib/module/mappings/DeckSwiperCard.js +0 -9
  34. package/lib/typescript/src/components/DeckSwiper/DeckSwiper.d.ts +0 -15
  35. package/lib/typescript/src/components/DeckSwiper/DeckSwiper.d.ts.map +0 -1
  36. package/lib/typescript/src/components/DeckSwiper/DeckSwiperCard.d.ts +0 -13
  37. package/lib/typescript/src/components/DeckSwiper/DeckSwiperCard.d.ts.map +0 -1
  38. package/lib/typescript/src/components/DeckSwiper/index.d.ts +0 -3
  39. package/lib/typescript/src/components/DeckSwiper/index.d.ts.map +0 -1
  40. package/lib/typescript/src/mappings/DeckSwiper.d.ts +0 -83
  41. package/lib/typescript/src/mappings/DeckSwiper.d.ts.map +0 -1
  42. package/lib/typescript/src/mappings/DeckSwiperCard.d.ts +0 -9
  43. package/lib/typescript/src/mappings/DeckSwiperCard.d.ts.map +0 -1
  44. package/src/components/DeckSwiper/DeckSwiper.js +0 -34
  45. package/src/components/DeckSwiper/DeckSwiper.tsx +0 -93
  46. package/src/components/DeckSwiper/DeckSwiperCard.js +0 -22
  47. package/src/components/DeckSwiper/DeckSwiperCard.tsx +0 -42
  48. package/src/components/DeckSwiper/index.js +0 -2
  49. package/src/components/DeckSwiper/index.tsx +0 -2
  50. package/src/mappings/DeckSwiper.js +0 -45
  51. package/src/mappings/DeckSwiper.ts +0 -54
  52. package/src/mappings/DeckSwiperCard.js +0 -9
  53. package/src/mappings/DeckSwiperCard.ts +0 -13
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@draftbit/core",
3
- "version": "46.7.9-437259.2+437259f",
3
+ "version": "46.7.9-87e09b.2+87e09b8",
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.7.9-437259.2+437259f",
44
+ "@draftbit/types": "^46.7.9-87e09b.2+87e09b8",
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",
@@ -53,8 +53,8 @@
53
53
  "lodash.isnumber": "^3.0.3",
54
54
  "lodash.omit": "^4.5.0",
55
55
  "lodash.tonumber": "^4.0.3",
56
- "react-native-deck-swiper": "^2.0.12",
57
56
  "react-native-modal-datetime-picker": "^13.0.0",
57
+ "react-native-shadow-2": "^7.0.6",
58
58
  "react-native-svg": "12.3.0",
59
59
  "react-native-typography": "^1.4.1",
60
60
  "react-native-web-swiper": "^2.2.3"
@@ -92,5 +92,5 @@
92
92
  ]
93
93
  ]
94
94
  },
95
- "gitHead": "437259f8dc889b1b26cadfda9f0a30caa2788d25"
95
+ "gitHead": "87e09b8a7f6d280be426cde235209de0cb9cef97"
96
96
  }
@@ -0,0 +1,16 @@
1
+ import React from "react";
2
+ import { Shadow as ShadowComponent } from "react-native-shadow-2";
3
+ const Shadow = ({ offsetX = 0, offsetY = 0, showShadowSideStart = true, showShadowSideEnd = true, showShadowSideTop = true, showShadowSideBottom = true, showShadowCornerTopStart = true, showShadowCornerTopEnd = true, showShadowCornerBottomStart = true, showShadowCornerBottomEnd = true, ...rest }) => {
4
+ return (React.createElement(ShadowComponent, { offset: [offsetX, offsetY], sides: {
5
+ start: showShadowSideStart,
6
+ end: showShadowSideEnd,
7
+ top: showShadowSideTop,
8
+ bottom: showShadowSideBottom,
9
+ }, corners: {
10
+ topStart: showShadowCornerTopStart,
11
+ topEnd: showShadowCornerTopEnd,
12
+ bottomStart: showShadowCornerBottomStart,
13
+ bottomEnd: showShadowCornerBottomEnd,
14
+ }, ...rest }));
15
+ };
16
+ export default Shadow;
@@ -0,0 +1,58 @@
1
+ import React from "react";
2
+ import { StyleProp, ViewStyle } from "react-native";
3
+ import { Shadow as ShadowComponent } from "react-native-shadow-2";
4
+
5
+ interface ShadowProps {
6
+ disabled?: boolean;
7
+ startColor?: string;
8
+ endColor?: string;
9
+ distance?: number;
10
+ paintInside?: boolean;
11
+ stretch?: boolean;
12
+ offsetX?: number;
13
+ offsetY?: number;
14
+ showShadowSideStart?: boolean;
15
+ showShadowSideEnd?: boolean;
16
+ showShadowSideTop?: boolean;
17
+ showShadowSideBottom?: boolean;
18
+ showShadowCornerTopStart?: boolean;
19
+ showShadowCornerTopEnd?: boolean;
20
+ showShadowCornerBottomStart?: boolean;
21
+ showShadowCornerBottomEnd?: boolean;
22
+ style?: StyleProp<ViewStyle>;
23
+ }
24
+
25
+ const Shadow: React.FC<React.PropsWithChildren<ShadowProps>> = ({
26
+ offsetX = 0,
27
+ offsetY = 0,
28
+ showShadowSideStart = true,
29
+ showShadowSideEnd = true,
30
+ showShadowSideTop = true,
31
+ showShadowSideBottom = true,
32
+ showShadowCornerTopStart = true,
33
+ showShadowCornerTopEnd = true,
34
+ showShadowCornerBottomStart = true,
35
+ showShadowCornerBottomEnd = true,
36
+ ...rest
37
+ }) => {
38
+ return (
39
+ <ShadowComponent
40
+ offset={[offsetX, offsetY]}
41
+ sides={{
42
+ start: showShadowSideStart,
43
+ end: showShadowSideEnd,
44
+ top: showShadowSideTop,
45
+ bottom: showShadowSideBottom,
46
+ }}
47
+ corners={{
48
+ topStart: showShadowCornerTopStart,
49
+ topEnd: showShadowCornerTopEnd,
50
+ bottomStart: showShadowCornerBottomStart,
51
+ bottomEnd: showShadowCornerBottomEnd,
52
+ }}
53
+ {...rest}
54
+ />
55
+ );
56
+ };
57
+
58
+ export default Shadow;
package/src/index.js CHANGED
@@ -31,7 +31,7 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/A
31
31
  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
- export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
34
+ export { default as Shadow } from "./components/Shadow";
35
35
  /* Deprecated: Fix or Delete! */
36
36
  export { default as DatePicker } from "./components/DatePicker/DatePicker";
37
37
  export { default as Picker } from "./components/Picker/Picker";
package/src/index.tsx CHANGED
@@ -51,7 +51,7 @@ export {
51
51
  RadioButtonFieldGroup,
52
52
  } from "./components/RadioButton/index";
53
53
 
54
- export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
54
+ export { default as Shadow } from "./components/Shadow";
55
55
 
56
56
  /* Deprecated: Fix or Delete! */
57
57
  export { default as DatePicker } from "./components/DatePicker/DatePicker";
@@ -0,0 +1,87 @@
1
+ import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS, createColorProp, createStaticNumberProp, createStaticBoolProp, createDisabledProp, } from "@draftbit/types";
2
+ export const SEED_DATA = {
3
+ name: "Shadow",
4
+ tag: "Shadow View",
5
+ description: "A cross-platform, universal shadow.",
6
+ category: COMPONENT_TYPES.view,
7
+ stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
8
+ props: {
9
+ disabled: createDisabledProp({
10
+ description: "Disables the shadow.",
11
+ }),
12
+ startColor: createColorProp({
13
+ label: "Start Color",
14
+ description: "The initial gradient color of the shadow.",
15
+ defaultValue: null,
16
+ }),
17
+ endColor: createColorProp({
18
+ label: "End Color",
19
+ description: "The final gradient color of the shadow.",
20
+ defaultValue: null,
21
+ }),
22
+ distance: createStaticNumberProp({
23
+ label: "Distance",
24
+ description: "The distance of the shadow.",
25
+ }),
26
+ paintInside: createStaticBoolProp({
27
+ label: "Paint Inside",
28
+ description: "Apply the shadow below/inside the content.",
29
+ defaultValue: null,
30
+ }),
31
+ stretch: createStaticBoolProp({
32
+ label: "Stretch",
33
+ description: "Force children to occupy all available horizontal space.",
34
+ defaultValue: null,
35
+ }),
36
+ offsetX: createStaticNumberProp({
37
+ label: "Offset X",
38
+ description: "Moved the shadow in the x direction",
39
+ defeaultValue: 0,
40
+ }),
41
+ offsetY: createStaticNumberProp({
42
+ label: "Offset Y",
43
+ description: "Moved the shadow in the y direction",
44
+ defeaultValue: 0,
45
+ }),
46
+ showShadowSideStart: createStaticBoolProp({
47
+ label: "Show Shadow Start",
48
+ description: "Whether to show shadow on the start side or not",
49
+ defaultValue: true,
50
+ }),
51
+ showShadowSideEnd: createStaticBoolProp({
52
+ label: "Show Shadow End",
53
+ description: "Whether to show shadow on the end side or not",
54
+ defaultValue: true,
55
+ }),
56
+ showShadowSideTop: createStaticBoolProp({
57
+ label: "Show Shadow Top",
58
+ description: "Whether to show shadow on the top side or not",
59
+ defaultValue: true,
60
+ }),
61
+ showShadowSideBottom: createStaticBoolProp({
62
+ label: "Show Shadow Bottom",
63
+ description: "Whether to show shadow on the bottom side or not",
64
+ defaultValue: true,
65
+ }),
66
+ showShadowCornerTopStart: createStaticBoolProp({
67
+ label: "Show Shadow Top Start Corner",
68
+ description: "Whether to show shadow on the top start corner or not",
69
+ defaultValue: true,
70
+ }),
71
+ showShadowCornerTopEnd: createStaticBoolProp({
72
+ label: "Show Shadow Top End Corner",
73
+ description: "Whether to show shadow on the top end corner or not",
74
+ defaultValue: true,
75
+ }),
76
+ showShadowCornerBottomStart: createStaticBoolProp({
77
+ label: "Show Shadow Bottom Start Corner",
78
+ description: "Whether to show shadow on the bottom start corner or not",
79
+ defaultValue: true,
80
+ }),
81
+ showShadowCornerBottomEnd: createStaticBoolProp({
82
+ label: "Show Shadow Bottom End Corner",
83
+ description: "Whether to show shadow on the bottom end corner or not",
84
+ defaultValue: true,
85
+ }),
86
+ },
87
+ };
@@ -0,0 +1,95 @@
1
+ import {
2
+ COMPONENT_TYPES,
3
+ CONTAINER_COMPONENT_STYLES_SECTIONS,
4
+ createColorProp,
5
+ createStaticNumberProp,
6
+ createStaticBoolProp,
7
+ createDisabledProp,
8
+ } from "@draftbit/types";
9
+
10
+ export const SEED_DATA = {
11
+ name: "Shadow",
12
+ tag: "Shadow View",
13
+ description: "A cross-platform, universal shadow.",
14
+ category: COMPONENT_TYPES.view,
15
+ stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
16
+ props: {
17
+ disabled: createDisabledProp({
18
+ description: "Disables the shadow.",
19
+ }),
20
+ startColor: createColorProp({
21
+ label: "Start Color",
22
+ description: "The initial gradient color of the shadow.",
23
+ defaultValue: null,
24
+ }),
25
+ endColor: createColorProp({
26
+ label: "End Color",
27
+ description: "The final gradient color of the shadow.",
28
+ defaultValue: null,
29
+ }),
30
+ distance: createStaticNumberProp({
31
+ label: "Distance",
32
+ description: "The distance of the shadow.",
33
+ }),
34
+ paintInside: createStaticBoolProp({
35
+ label: "Paint Inside",
36
+ description: "Apply the shadow below/inside the content.",
37
+ defaultValue: null,
38
+ }),
39
+ stretch: createStaticBoolProp({
40
+ label: "Stretch",
41
+ description: "Force children to occupy all available horizontal space.",
42
+ defaultValue: null,
43
+ }),
44
+ offsetX: createStaticNumberProp({
45
+ label: "Offset X",
46
+ description: "Moved the shadow in the x direction",
47
+ defeaultValue: 0,
48
+ }),
49
+ offsetY: createStaticNumberProp({
50
+ label: "Offset Y",
51
+ description: "Moved the shadow in the y direction",
52
+ defeaultValue: 0,
53
+ }),
54
+ showShadowSideStart: createStaticBoolProp({
55
+ label: "Show Shadow Start",
56
+ description: "Whether to show shadow on the start side or not",
57
+ defaultValue: true,
58
+ }),
59
+ showShadowSideEnd: createStaticBoolProp({
60
+ label: "Show Shadow End",
61
+ description: "Whether to show shadow on the end side or not",
62
+ defaultValue: true,
63
+ }),
64
+ showShadowSideTop: createStaticBoolProp({
65
+ label: "Show Shadow Top",
66
+ description: "Whether to show shadow on the top side or not",
67
+ defaultValue: true,
68
+ }),
69
+ showShadowSideBottom: createStaticBoolProp({
70
+ label: "Show Shadow Bottom",
71
+ description: "Whether to show shadow on the bottom side or not",
72
+ defaultValue: true,
73
+ }),
74
+ showShadowCornerTopStart: createStaticBoolProp({
75
+ label: "Show Shadow Top Start Corner",
76
+ description: "Whether to show shadow on the top start corner or not",
77
+ defaultValue: true,
78
+ }),
79
+ showShadowCornerTopEnd: createStaticBoolProp({
80
+ label: "Show Shadow Top End Corner",
81
+ description: "Whether to show shadow on the top end corner or not",
82
+ defaultValue: true,
83
+ }),
84
+ showShadowCornerBottomStart: createStaticBoolProp({
85
+ label: "Show Shadow Bottom Start Corner",
86
+ description: "Whether to show shadow on the bottom start corner or not",
87
+ defaultValue: true,
88
+ }),
89
+ showShadowCornerBottomEnd: createStaticBoolProp({
90
+ label: "Show Shadow Bottom End Corner",
91
+ description: "Whether to show shadow on the bottom end corner or not",
92
+ defaultValue: true,
93
+ }),
94
+ },
95
+ };
@@ -1,73 +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
- var _reactNativeDeckSwiper = _interopRequireDefault(require("react-native-deck-swiper"));
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
- const DeckSwiper = _ref => {
12
- let {
13
- onIndexChanged,
14
- onEndReached,
15
- startCardIndex = 0,
16
- infiniteSwiping = false,
17
- verticalEnabled = true,
18
- horizontalEnabled = true,
19
- visibleCardCount = 1,
20
- style,
21
- children
22
- } = _ref;
23
- const childrenArray = _react.default.useMemo(() => _react.default.Children.toArray(children), [children]);
24
-
25
- // an array of indices based on children count
26
- const cardsFillerData = _react.default.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
27
-
28
- /**
29
- * By default react-native-deck-swiper positions everything with absolute position
30
- * To overcome this, it is wrapped in a View to be able to add the component in any layout structure
31
- *
32
- * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird
33
- * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space
34
- * This effectivley makes the default height of the container be the height of the first card
35
- */
36
-
37
- return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
38
- style: styles.containerHeightFiller
39
- }, childrenArray.length && childrenArray[0]), /*#__PURE__*/_react.default.createElement(_reactNativeDeckSwiper.default, {
40
- cards: cardsFillerData,
41
- renderCard: (_, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childrenArray[i]),
42
- keyExtractor: card => card === null || card === void 0 ? void 0 : card.toString(),
43
- containerStyle: _reactNative.StyleSheet.flatten([styles.cardsContainer, style]),
44
- cardStyle: styles.card,
45
- onSwiped: onIndexChanged,
46
- onSwipedAll: onEndReached,
47
- cardIndex: startCardIndex,
48
- infinite: infiniteSwiping,
49
- verticalSwipe: verticalEnabled,
50
- horizontalSwipe: horizontalEnabled,
51
- showSecondCard: visibleCardCount > 1,
52
- stackSize: visibleCardCount,
53
- backgroundColor: "transparent",
54
- cardVerticalMargin: 0,
55
- cardHorizontalMargin: 0
56
- }));
57
- };
58
- const styles = _reactNative.StyleSheet.create({
59
- cardsContainer: {
60
- width: "100%"
61
- },
62
- card: {
63
- left: 0,
64
- right: 0,
65
- width: "auto",
66
- height: "auto"
67
- },
68
- containerHeightFiller: {
69
- opacity: 0.0
70
- }
71
- });
72
- var _default = DeckSwiper;
73
- exports.default = _default;
@@ -1,35 +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
- var _theming = require("../../theming");
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
- const DeckSwiperCard = _ref => {
12
- let {
13
- style,
14
- children,
15
- theme
16
- } = _ref;
17
- return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
18
- style: [styles.card, {
19
- backgroundColor: theme.colors.background,
20
- borderRadius: theme.borderRadius.global,
21
- borderColor: theme.colors.divider
22
- }, style]
23
- }, children);
24
- };
25
- const styles = _reactNative.StyleSheet.create({
26
- card: {
27
- flex: 1,
28
- alignItems: "center",
29
- justifyContent: "center",
30
- padding: 20,
31
- borderWidth: 2
32
- }
33
- });
34
- var _default = (0, _theming.withTheme)(DeckSwiperCard);
35
- exports.default = _default;
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "DeckSwiper", {
7
- enumerable: true,
8
- get: function () {
9
- return _DeckSwiper.default;
10
- }
11
- });
12
- Object.defineProperty(exports, "DeckSwiperCard", {
13
- enumerable: true,
14
- get: function () {
15
- return _DeckSwiperCard.default;
16
- }
17
- });
18
- var _DeckSwiper = _interopRequireDefault(require("./DeckSwiper"));
19
- var _DeckSwiperCard = _interopRequireDefault(require("./DeckSwiperCard"));
20
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -1,52 +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: "Deck Swiper",
10
- tag: "DeckSwiper",
11
- description: "Deck swiper container",
12
- category: _types.COMPONENT_TYPES.swiper,
13
- stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
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
- startCardIndex: (0, _types.createStaticNumberProp)({
25
- label: "Start card index",
26
- description: "Index of card to start swiping from",
27
- defaultValue: 0
28
- }),
29
- infiniteSwiping: (0, _types.createStaticBoolProp)({
30
- label: "Infinite swiping",
31
- description: "Whether to infinitley loop through cards or not"
32
- }),
33
- verticalEnabled: (0, _types.createStaticBoolProp)({
34
- label: "Vertical swipe enabled",
35
- description: "Whether cards should be swipeable vertically or not",
36
- defaultValue: true
37
- }),
38
- horizontalEnabled: (0, _types.createStaticBoolProp)({
39
- label: "Horizontal swipe enabled",
40
- description: "Whether cards should be swipeable horizontally or not",
41
- defaultValue: true
42
- }),
43
- visibleCardCount: (0, _types.createStaticNumberProp)({
44
- label: "Visible card count",
45
- description: "Number of cards visible behind (and including) the current card",
46
- defaultValue: 1,
47
- min: 1,
48
- step: 1
49
- })
50
- }
51
- };
52
- exports.SEED_DATA = SEED_DATA;
@@ -1,16 +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: "Deck Swiper Card",
10
- tag: "DeckSwiperCard",
11
- description: "Single Deck Swiper Card item to be used in DeckSwiper",
12
- category: _types.COMPONENT_TYPES.swiper,
13
- stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
14
- props: {}
15
- };
16
- exports.SEED_DATA = SEED_DATA;
@@ -1,65 +0,0 @@
1
- import React from "react";
2
- import { StyleSheet, View } from "react-native";
3
- import DeckSwiperComponent from "react-native-deck-swiper";
4
- const DeckSwiper = _ref => {
5
- let {
6
- onIndexChanged,
7
- onEndReached,
8
- startCardIndex = 0,
9
- infiniteSwiping = false,
10
- verticalEnabled = true,
11
- horizontalEnabled = true,
12
- visibleCardCount = 1,
13
- style,
14
- children
15
- } = _ref;
16
- const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
17
-
18
- // an array of indices based on children count
19
- const cardsFillerData = React.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
20
-
21
- /**
22
- * By default react-native-deck-swiper positions everything with absolute position
23
- * To overcome this, it is wrapped in a View to be able to add the component in any layout structure
24
- *
25
- * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird
26
- * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space
27
- * This effectivley makes the default height of the container be the height of the first card
28
- */
29
-
30
- return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
31
- style: styles.containerHeightFiller
32
- }, childrenArray.length && childrenArray[0]), /*#__PURE__*/React.createElement(DeckSwiperComponent, {
33
- cards: cardsFillerData,
34
- renderCard: (_, i) => /*#__PURE__*/React.createElement(React.Fragment, null, childrenArray[i]),
35
- keyExtractor: card => card === null || card === void 0 ? void 0 : card.toString(),
36
- containerStyle: StyleSheet.flatten([styles.cardsContainer, style]),
37
- cardStyle: styles.card,
38
- onSwiped: onIndexChanged,
39
- onSwipedAll: onEndReached,
40
- cardIndex: startCardIndex,
41
- infinite: infiniteSwiping,
42
- verticalSwipe: verticalEnabled,
43
- horizontalSwipe: horizontalEnabled,
44
- showSecondCard: visibleCardCount > 1,
45
- stackSize: visibleCardCount,
46
- backgroundColor: "transparent",
47
- cardVerticalMargin: 0,
48
- cardHorizontalMargin: 0
49
- }));
50
- };
51
- const styles = StyleSheet.create({
52
- cardsContainer: {
53
- width: "100%"
54
- },
55
- card: {
56
- left: 0,
57
- right: 0,
58
- width: "auto",
59
- height: "auto"
60
- },
61
- containerHeightFiller: {
62
- opacity: 0.0
63
- }
64
- });
65
- export default DeckSwiper;
@@ -1,27 +0,0 @@
1
- import React from "react";
2
- import { View, StyleSheet } from "react-native";
3
- import { withTheme } from "../../theming";
4
- const DeckSwiperCard = _ref => {
5
- let {
6
- style,
7
- children,
8
- theme
9
- } = _ref;
10
- return /*#__PURE__*/React.createElement(View, {
11
- style: [styles.card, {
12
- backgroundColor: theme.colors.background,
13
- borderRadius: theme.borderRadius.global,
14
- borderColor: theme.colors.divider
15
- }, style]
16
- }, children);
17
- };
18
- const styles = StyleSheet.create({
19
- card: {
20
- flex: 1,
21
- alignItems: "center",
22
- justifyContent: "center",
23
- padding: 20,
24
- borderWidth: 2
25
- }
26
- });
27
- export default withTheme(DeckSwiperCard);
@@ -1,2 +0,0 @@
1
- export { default as DeckSwiper } from "./DeckSwiper";
2
- export { default as DeckSwiperCard } from "./DeckSwiperCard";
@@ -1,45 +0,0 @@
1
- import { COMPONENT_TYPES, Triggers, createActionProp, createStaticNumberProp, createStaticBoolProp, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
2
- export const SEED_DATA = {
3
- name: "Deck Swiper",
4
- tag: "DeckSwiper",
5
- description: "Deck swiper container",
6
- category: COMPONENT_TYPES.swiper,
7
- stylesPanelSections: BLOCK_STYLES_SECTIONS,
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
- startCardIndex: createStaticNumberProp({
19
- label: "Start card index",
20
- description: "Index of card to start swiping from",
21
- defaultValue: 0
22
- }),
23
- infiniteSwiping: createStaticBoolProp({
24
- label: "Infinite swiping",
25
- description: "Whether to infinitley loop through cards or not"
26
- }),
27
- verticalEnabled: createStaticBoolProp({
28
- label: "Vertical swipe enabled",
29
- description: "Whether cards should be swipeable vertically or not",
30
- defaultValue: true
31
- }),
32
- horizontalEnabled: createStaticBoolProp({
33
- label: "Horizontal swipe enabled",
34
- description: "Whether cards should be swipeable horizontally or not",
35
- defaultValue: true
36
- }),
37
- visibleCardCount: createStaticNumberProp({
38
- label: "Visible card count",
39
- description: "Number of cards visible behind (and including) the current card",
40
- defaultValue: 1,
41
- min: 1,
42
- step: 1
43
- })
44
- }
45
- };
@@ -1,9 +0,0 @@
1
- import { COMPONENT_TYPES, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
2
- export const SEED_DATA = {
3
- name: "Deck Swiper Card",
4
- tag: "DeckSwiperCard",
5
- description: "Single Deck Swiper Card item to be used in DeckSwiper",
6
- category: COMPONENT_TYPES.swiper,
7
- stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
8
- props: {}
9
- };