@draftbit/core 46.7.8-9c448b.2 → 46.7.9-13d0dd.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/DatePicker/DatePicker.js +6 -0
  2. package/lib/commonjs/components/Divider.js +14 -1
  3. package/lib/commonjs/components/Elevation.js +14 -2
  4. package/lib/commonjs/components/Picker/Picker.js +14 -14
  5. package/lib/commonjs/index.js +0 -13
  6. package/lib/commonjs/mappings/DatePicker.js +6 -1
  7. package/lib/commonjs/mappings/Picker.js +5 -0
  8. package/lib/module/components/Accordion/AccordionItem.js +25 -4
  9. package/lib/module/components/DatePicker/DatePicker.js +7 -1
  10. package/lib/module/components/Picker/Picker.js +15 -15
  11. package/lib/module/index.js +0 -1
  12. package/lib/module/mappings/DatePicker.js +7 -2
  13. package/lib/module/mappings/Picker.js +6 -1
  14. package/lib/typescript/src/components/DatePicker/DatePicker.d.ts +1 -0
  15. package/lib/typescript/src/components/DatePicker/DatePicker.d.ts.map +1 -1
  16. package/lib/typescript/src/components/Picker/Picker.d.ts +1 -0
  17. package/lib/typescript/src/components/Picker/Picker.d.ts.map +1 -1
  18. package/lib/typescript/src/index.d.ts +0 -1
  19. package/lib/typescript/src/index.d.ts.map +1 -1
  20. package/lib/typescript/src/mappings/DatePicker.d.ts +10 -0
  21. package/lib/typescript/src/mappings/DatePicker.d.ts.map +1 -1
  22. package/lib/typescript/src/mappings/Picker.d.ts +10 -0
  23. package/lib/typescript/src/mappings/Picker.d.ts.map +1 -1
  24. package/package.json +3 -4
  25. package/src/components/DatePicker/DatePicker.js +7 -2
  26. package/src/components/DatePicker/DatePicker.tsx +9 -0
  27. package/src/components/Picker/Picker.js +11 -12
  28. package/src/components/Picker/Picker.tsx +15 -16
  29. package/src/index.js +0 -1
  30. package/src/index.tsx +0 -2
  31. package/src/mappings/DatePicker.js +6 -1
  32. package/src/mappings/DatePicker.ts +6 -0
  33. package/src/mappings/Picker.js +6 -1
  34. package/src/mappings/Picker.ts +6 -0
  35. package/lib/commonjs/components/DeckSwiper/DeckSwiper.js +0 -73
  36. package/lib/commonjs/components/DeckSwiper/DeckSwiperCard.js +0 -35
  37. package/lib/commonjs/components/DeckSwiper/index.js +0 -20
  38. package/lib/commonjs/mappings/DeckSwiper.js +0 -52
  39. package/lib/commonjs/mappings/DeckSwiperCard.js +0 -16
  40. package/lib/module/components/DeckSwiper/DeckSwiper.js +0 -65
  41. package/lib/module/components/DeckSwiper/DeckSwiperCard.js +0 -27
  42. package/lib/module/components/DeckSwiper/index.js +0 -2
  43. package/lib/module/mappings/DeckSwiper.js +0 -45
  44. package/lib/module/mappings/DeckSwiperCard.js +0 -9
  45. package/lib/typescript/src/components/DeckSwiper/DeckSwiper.d.ts +0 -15
  46. package/lib/typescript/src/components/DeckSwiper/DeckSwiper.d.ts.map +0 -1
  47. package/lib/typescript/src/components/DeckSwiper/DeckSwiperCard.d.ts +0 -13
  48. package/lib/typescript/src/components/DeckSwiper/DeckSwiperCard.d.ts.map +0 -1
  49. package/lib/typescript/src/components/DeckSwiper/index.d.ts +0 -3
  50. package/lib/typescript/src/components/DeckSwiper/index.d.ts.map +0 -1
  51. package/lib/typescript/src/mappings/DeckSwiper.d.ts +0 -83
  52. package/lib/typescript/src/mappings/DeckSwiper.d.ts.map +0 -1
  53. package/lib/typescript/src/mappings/DeckSwiperCard.d.ts +0 -9
  54. package/lib/typescript/src/mappings/DeckSwiperCard.d.ts.map +0 -1
  55. package/src/components/DeckSwiper/DeckSwiper.js +0 -34
  56. package/src/components/DeckSwiper/DeckSwiper.tsx +0 -93
  57. package/src/components/DeckSwiper/DeckSwiperCard.js +0 -22
  58. package/src/components/DeckSwiper/DeckSwiperCard.tsx +0 -42
  59. package/src/components/DeckSwiper/index.js +0 -2
  60. package/src/components/DeckSwiper/index.tsx +0 -2
  61. package/src/mappings/DeckSwiper.js +0 -45
  62. package/src/mappings/DeckSwiper.ts +0 -54
  63. package/src/mappings/DeckSwiperCard.js +0 -9
  64. package/src/mappings/DeckSwiperCard.ts +0 -13
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { View, StyleSheet, Text, Platform, Dimensions, } from "react-native";
2
+ import { View, StyleSheet, Text, Platform, Dimensions, Keyboard, } from "react-native";
3
3
  import { omit, pickBy, identity, isObject } from "lodash";
4
4
  import { SafeAreaView } from "react-native-safe-area-context";
5
5
  import { Picker as NativePicker } from "@react-native-picker/picker";
@@ -35,7 +35,7 @@ const isIos = Platform.OS === "ios";
35
35
  const unstyledColor = "rgba(165, 173, 183, 1)";
36
36
  const disabledColor = "rgb(240, 240, 240)";
37
37
  const errorColor = "rgba(255, 69, 100, 1)";
38
- const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, theme, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", }) => {
38
+ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", autoDismissKeyboard = true, }) => {
39
39
  var _a, _b;
40
40
  const androidPickerRef = React.useRef(undefined);
41
41
  const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -59,11 +59,15 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
59
59
  (_a = androidPickerRef === null || androidPickerRef === void 0 ? void 0 : androidPickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
60
60
  }
61
61
  }, [pickerVisible, androidPickerRef]);
62
+ React.useEffect(() => {
63
+ if (pickerVisible && autoDismissKeyboard) {
64
+ Keyboard.dismiss();
65
+ }
66
+ }, [pickerVisible, autoDismissKeyboard]);
62
67
  const normalizedOptions = normalizeOptions(options);
63
68
  const pickerOptions = placeholder
64
69
  ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
65
70
  : normalizedOptions;
66
- const { colors } = theme;
67
71
  const { viewStyles, textStyles } = extractStyles(style);
68
72
  const additionalBorderStyles = ["backgroundColor"];
69
73
  const additionalMarginStyles = [
@@ -183,13 +187,8 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
183
187
  rightIcon)),
184
188
  assistiveTextLabel),
185
189
  isIos && pickerVisible ? (React.createElement(Portal, null,
186
- React.createElement(View, { style: [
187
- styles.iosPicker,
188
- {
189
- backgroundColor: colors.divider,
190
- },
191
- ] },
192
- React.createElement(SafeAreaView, { style: styles.iosSafeArea },
190
+ React.createElement(SafeAreaView, { style: styles.iosPicker },
191
+ React.createElement(View, { style: styles.iosPickerContent },
193
192
  React.createElement(Button, { Icon: Icon, type: "text", onPress: togglePickerVisible, style: styles.iosButton }, "Close"),
194
193
  React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
195
194
  !isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
@@ -239,9 +238,9 @@ const styles = StyleSheet.create({
239
238
  width: "100%",
240
239
  maxWidth: deviceWidth,
241
240
  maxHeight: deviceHeight,
242
- },
243
- iosSafeArea: {
244
241
  backgroundColor: "white",
242
+ },
243
+ iosPickerContent: {
245
244
  flexDirection: "column",
246
245
  width: "100%",
247
246
  maxWidth: deviceWidth,
@@ -7,6 +7,7 @@ import {
7
7
  ViewStyle,
8
8
  StyleProp,
9
9
  Dimensions,
10
+ Keyboard,
10
11
  } from "react-native";
11
12
  import { omit, pickBy, identity, isObject } from "lodash";
12
13
  import { SafeAreaView } from "react-native-safe-area-context";
@@ -48,6 +49,7 @@ export type PickerProps = {
48
49
  placeholderTextColor?: string;
49
50
  rightIconName?: string;
50
51
  type?: "solid" | "underline";
52
+ autoDismissKeyboard?: boolean;
51
53
  theme: Theme;
52
54
  Icon: IconSlot["Icon"];
53
55
  };
@@ -98,7 +100,6 @@ const Picker: React.FC<PickerProps> = ({
98
100
  placeholder,
99
101
  value,
100
102
  disabled = false,
101
- theme,
102
103
  assistiveText,
103
104
  label,
104
105
  iconColor = unstyledColor,
@@ -108,6 +109,7 @@ const Picker: React.FC<PickerProps> = ({
108
109
  placeholderTextColor = unstyledColor,
109
110
  rightIconName,
110
111
  type = "solid",
112
+ autoDismissKeyboard = true,
111
113
  }) => {
112
114
  const androidPickerRef = React.useRef<any | undefined>(undefined);
113
115
 
@@ -139,14 +141,18 @@ const Picker: React.FC<PickerProps> = ({
139
141
  }
140
142
  }, [pickerVisible, androidPickerRef]);
141
143
 
144
+ React.useEffect(() => {
145
+ if (pickerVisible && autoDismissKeyboard) {
146
+ Keyboard.dismiss();
147
+ }
148
+ }, [pickerVisible, autoDismissKeyboard]);
149
+
142
150
  const normalizedOptions = normalizeOptions(options);
143
151
 
144
152
  const pickerOptions = placeholder
145
153
  ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
146
154
  : normalizedOptions;
147
155
 
148
- const { colors } = theme;
149
-
150
156
  const { viewStyles, textStyles } = extractStyles(style);
151
157
 
152
158
  const additionalBorderStyles = ["backgroundColor"];
@@ -347,15 +353,8 @@ const Picker: React.FC<PickerProps> = ({
347
353
  {/* iosPicker */}
348
354
  {isIos && pickerVisible ? (
349
355
  <Portal>
350
- <View
351
- style={[
352
- styles.iosPicker,
353
- {
354
- backgroundColor: colors.divider,
355
- },
356
- ]}
357
- >
358
- <SafeAreaView style={styles.iosSafeArea}>
356
+ <SafeAreaView style={styles.iosPicker}>
357
+ <View style={styles.iosPickerContent}>
359
358
  <Button
360
359
  Icon={Icon}
361
360
  type="text"
@@ -378,8 +377,8 @@ const Picker: React.FC<PickerProps> = ({
378
377
  />
379
378
  ))}
380
379
  </NativePicker>
381
- </SafeAreaView>
382
- </View>
380
+ </View>
381
+ </SafeAreaView>
383
382
  </Portal>
384
383
  ) : null}
385
384
 
@@ -451,9 +450,9 @@ const styles = StyleSheet.create({
451
450
  width: "100%",
452
451
  maxWidth: deviceWidth,
453
452
  maxHeight: deviceHeight,
454
- },
455
- iosSafeArea: {
456
453
  backgroundColor: "white",
454
+ },
455
+ iosPickerContent: {
457
456
  flexDirection: "column",
458
457
  width: "100%",
459
458
  maxWidth: deviceWidth,
package/src/index.js CHANGED
@@ -31,7 +31,6 @@ 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";
35
34
  /* Deprecated: Fix or Delete! */
36
35
  export { default as DatePicker } from "./components/DatePicker/DatePicker";
37
36
  export { default as Picker } from "./components/Picker/Picker";
package/src/index.tsx CHANGED
@@ -51,8 +51,6 @@ export {
51
51
  RadioButtonFieldGroup,
52
52
  } from "./components/RadioButton/index";
53
53
 
54
- export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
55
-
56
54
  /* Deprecated: Fix or Delete! */
57
55
  export { default as DatePicker } from "./components/DatePicker/DatePicker";
58
56
  export { default as Picker } from "./components/Picker/Picker";
@@ -1,4 +1,4 @@
1
- import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, } from "@draftbit/types";
1
+ import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, createStaticBoolProp, } from "@draftbit/types";
2
2
  const SEED_DATA_PROPS = {
3
3
  mode: {
4
4
  label: "Mode",
@@ -171,6 +171,11 @@ export const SEED_DATA = [
171
171
  required: true,
172
172
  group: GROUPS.basic,
173
173
  },
174
+ autoDismissKeyboard: createStaticBoolProp({
175
+ label: "Auto dismiss keyboard",
176
+ description: "Automatically dismiss keyboard when DatePicker is opened",
177
+ defaultValue: true,
178
+ }),
174
179
  },
175
180
  },
176
181
  ];
@@ -8,6 +8,7 @@ import {
8
8
  StylesPanelSections,
9
9
  createNumberProp,
10
10
  createColorProp,
11
+ createStaticBoolProp,
11
12
  } from "@draftbit/types";
12
13
 
13
14
  const SEED_DATA_PROPS = {
@@ -185,6 +186,11 @@ export const SEED_DATA = [
185
186
  required: true,
186
187
  group: GROUPS.basic,
187
188
  },
189
+ autoDismissKeyboard: createStaticBoolProp({
190
+ label: "Auto dismiss keyboard",
191
+ description: "Automatically dismiss keyboard when DatePicker is opened",
192
+ defaultValue: true,
193
+ }),
188
194
  },
189
195
  },
190
196
  ];
@@ -1,4 +1,4 @@
1
- import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections, } from "@draftbit/types";
1
+ import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections, createStaticBoolProp, } from "@draftbit/types";
2
2
  const SEED_DATA_PROPS = {
3
3
  label: {
4
4
  group: GROUPS.data,
@@ -142,6 +142,11 @@ export const SEED_DATA = [
142
142
  },
143
143
  iconSize: createIconSizeProp({ defaultValue: 24 }),
144
144
  iconColor: createColorProp({ label: "Icon Color" }),
145
+ autoDismissKeyboard: createStaticBoolProp({
146
+ label: "Auto dismiss keyboard",
147
+ description: "Automatically dismiss keyboard when Picker is opened",
148
+ defaultValue: true,
149
+ }),
145
150
  },
146
151
  layout: {},
147
152
  },
@@ -8,6 +8,7 @@ import {
8
8
  createIconSizeProp,
9
9
  createColorProp,
10
10
  StylesPanelSections,
11
+ createStaticBoolProp,
11
12
  } from "@draftbit/types";
12
13
 
13
14
  const SEED_DATA_PROPS = {
@@ -157,6 +158,11 @@ export const SEED_DATA = [
157
158
  },
158
159
  iconSize: createIconSizeProp({ defaultValue: 24 }),
159
160
  iconColor: createColorProp({ label: "Icon Color" }),
161
+ autoDismissKeyboard: createStaticBoolProp({
162
+ label: "Auto dismiss keyboard",
163
+ description: "Automatically dismiss keyboard when Picker is opened",
164
+ defaultValue: true,
165
+ }),
160
166
  },
161
167
  layout: {},
162
168
  },
@@ -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
- };
@@ -1,15 +0,0 @@
1
- import React from "react";
2
- import { StyleProp, ViewStyle } from "react-native";
3
- export interface DeckSwiperProps {
4
- onIndexChanged?: (index: number) => void;
5
- onEndReached?: () => void;
6
- startCardIndex?: number;
7
- infiniteSwiping?: boolean;
8
- verticalEnabled?: boolean;
9
- horizontalEnabled?: boolean;
10
- visibleCardCount?: number;
11
- style?: StyleProp<ViewStyle>;
12
- }
13
- declare const DeckSwiper: React.FC<React.PropsWithChildren<DeckSwiperProps>>;
14
- export default DeckSwiper;
15
- //# sourceMappingURL=DeckSwiper.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DeckSwiper.d.ts","sourceRoot":"","sources":["../../../../../src/components/DeckSwiper/DeckSwiper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAC;AAGtE,MAAM,WAAW,eAAe;IAC9B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA4DlE,CAAC;AAiBF,eAAe,UAAU,CAAC"}
@@ -1,13 +0,0 @@
1
- import React from "react";
2
- import { StyleProp, ViewStyle } from "react-native";
3
- import type { Theme } from "../../styles/DefaultTheme";
4
- export interface DeckSwiperCardProps {
5
- style?: StyleProp<ViewStyle>;
6
- children: React.ReactNode;
7
- theme: Theme;
8
- }
9
- declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<DeckSwiperCardProps, "theme"> & {
10
- theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
11
- }> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<DeckSwiperCardProps> & React.FC<DeckSwiperCardProps>, {}>;
12
- export default _default;
13
- //# sourceMappingURL=DeckSwiperCard.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DeckSwiperCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/DeckSwiper/DeckSwiperCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAGvD,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;CACd;;;;AAgCD,wBAAyC"}
@@ -1,3 +0,0 @@
1
- export { default as DeckSwiper } from "./DeckSwiper";
2
- export { default as DeckSwiperCard } from "./DeckSwiperCard";
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/DeckSwiper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC"}