@draftbit/core 46.7.9-f9c613.2 → 46.8.0

package/lib/commonjs/components/DatePicker/DatePicker.js

@@ -48,6 +48,7 @@ const DatePicker = _ref => {
     placeholder,
     borderColor: inputBorderColor,
     borderColorActive: inputBorderColorActive,
+    autoDismissKeyboard = true,
     ...props
   } = _ref;
   const [value, setValue] = React.useState(date || defaultValue);
@@ -143,6 +144,11 @@ const DatePicker = _ref => {
       clearTimeout(_showPlaceholder());
     };
   }, [focused, label, placeholder]);
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      _reactNative.Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
   const _handleFocus = () => {
     if (disabled) {
       return;
@@ -160,7 +166,14 @@ const DatePicker = _ref => {
   const MAXIMIZED_LABEL_FONT_SIZE = textStyles.fontSize || typography.subtitle1.fontSize;
   const MINIMIZED_LABEL_FONT_SIZE = labelSize ? labelSize : typography.caption.fontSize;
   const hasActiveOutline = focused;
-  let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
+  let inputTextColor,
+    activeColor,
+    underlineColor,
+    borderColor = inputBorderColor,
+    placeholderColor,
+    containerStyle,
+    backgroundColor,
+    inputStyle;
   inputTextColor = colors.strong;
   if (disabled) {
     activeColor = colors.light;

package/lib/commonjs/components/DeckSwiper/DeckSwiper.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeDeckSwiper = _interopRequireDefault(require("react-native-deck-swiper"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DeckSwiper = _ref => {
+  let {
+    onIndexChanged,
+    onEndReached,
+    startCardIndex = 0,
+    infiniteSwiping = false,
+    verticalEnabled = true,
+    horizontalEnabled = true,
+    visibleCardCount = 1,
+    style,
+    children
+  } = _ref;
+  const childrenArray = _react.default.useMemo(() => _react.default.Children.toArray(children), [children]);
+
+  // an array of indices based on children count
+  const cardsFillerData = _react.default.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
+
+  /**
+   * By default react-native-deck-swiper positions everything with absolute position.
+   * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
+   *
+   *
+   * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
+   * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
+   * This effectivley makes the default height of the container be the height of the first card.
+   */
+
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.containerHeightFiller
+  }, childrenArray.length && childrenArray[0]), /*#__PURE__*/_react.default.createElement(_reactNativeDeckSwiper.default, {
+    cards: cardsFillerData,
+    renderCard: (_, i) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, childrenArray[i]),
+    keyExtractor: card => card === null || card === void 0 ? void 0 : card.toString(),
+    containerStyle: _reactNative.StyleSheet.flatten([styles.cardsContainer, style]),
+    cardStyle: styles.card,
+    onSwiped: onIndexChanged,
+    onSwipedAll: onEndReached,
+    cardIndex: startCardIndex,
+    infinite: infiniteSwiping,
+    verticalSwipe: verticalEnabled,
+    horizontalSwipe: horizontalEnabled,
+    showSecondCard: visibleCardCount > 1,
+    stackSize: visibleCardCount,
+    backgroundColor: "transparent",
+    cardVerticalMargin: 0,
+    cardHorizontalMargin: 0
+  }));
+};
+const styles = _reactNative.StyleSheet.create({
+  cardsContainer: {
+    width: "100%"
+  },
+  card: {
+    left: 0,
+    right: 0,
+    width: "auto",
+    height: "auto"
+  },
+  containerHeightFiller: {
+    opacity: 0.0
+  }
+});
+var _default = DeckSwiper;
+exports.default = _default;

package/lib/commonjs/components/DeckSwiper/DeckSwiperCard.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _theming = require("../../theming");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DeckSwiperCard = _ref => {
+  let {
+    style,
+    children,
+    theme
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.card, {
+      backgroundColor: theme.colors.background,
+      borderColor: theme.colors.divider
+    }, style]
+  }, children);
+};
+const styles = _reactNative.StyleSheet.create({
+  card: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2
+  }
+});
+var _default = (0, _theming.withTheme)(DeckSwiperCard);
+exports.default = _default;

package/lib/commonjs/components/DeckSwiper/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DeckSwiper", {
+  enumerable: true,
+  get: function () {
+    return _DeckSwiper.default;
+  }
+});
+Object.defineProperty(exports, "DeckSwiperCard", {
+  enumerable: true,
+  get: function () {
+    return _DeckSwiperCard.default;
+  }
+});
+var _DeckSwiper = _interopRequireDefault(require("./DeckSwiper"));
+var _DeckSwiperCard = _interopRequireDefault(require("./DeckSwiperCard"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/commonjs/components/Divider.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _theming = require("../theming");
 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); }
 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; }
+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); }
 const Divider = _ref => {
   let {
     style,
@@ -18,20 +19,6 @@ const Divider = _ref => {
     },
     ...rest
   } = _ref;
-  return /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: [{
-      backgroundColor: color || colors.divider,
-      height: _reactNative.StyleSheet.hairlineWidth
-    }, style],
-    ...rest
-  });
-};
-var _default = (0, _theming.withTheme)(Divider);
-exports.default = _default;eme: {
-      colors
-    },
-    ...rest
-  } = _ref;
   return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
     style: [{
       backgroundColor: color || colors.divider,

package/lib/commonjs/components/Elevation.js

@@ -11,6 +11,7 @@ var _theming = require("../theming");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 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; }
+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); }
 /* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
 const Elevation = _ref => {
   let {
@@ -27,24 +28,11 @@ const Elevation = _ref => {
     colors
   } = theme;
   const borderRadius = radius;
-  return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
-    ...rest,
+  return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({}, rest, {
     style: [{
       borderRadius,
       backgroundColor: colors.surface
     }, elevation ? (0, _shadow.default)(elevation) : null, style]
-  }, /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: {
-      overflow: "hidden",
-      borderRadius
-    }
-  }, children));
-};
-var _default = (0, _theming.withTheme)(Elevation);
-exports.default = _default;
-      borderRadius,
-      backgroundColor: colors.surface
-    }, elevation ? (0, _shadow.default)(elevation) : null, style]
   }), /*#__PURE__*/React.createElement(_reactNative.View, {
     style: {
       overflow: "hidden",

package/lib/commonjs/components/Picker/Picker.js

@@ -42,6 +42,7 @@ const {
   height: deviceHeight
 } = _reactNative.Dimensions.get("screen");
 const isIos = _reactNative.Platform.OS === "ios";
+const isWeb = _reactNative.Platform.OS === "web";
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
@@ -65,7 +66,8 @@ const Picker = _ref => {
     leftIconName,
     placeholderTextColor = unstyledColor,
     rightIconName,
-    type = "solid"
+    type = "solid",
+    autoDismissKeyboard = true
   } = _ref;
   const androidPickerRef = React.useRef(undefined);
   const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -89,6 +91,11 @@ const Picker = _ref => {
       androidPickerRef === null || androidPickerRef === void 0 ? void 0 : (_androidPickerRef$cur = androidPickerRef.current) === null || _androidPickerRef$cur === void 0 ? void 0 : _androidPickerRef$cur.focus();
     }
   }, [pickerVisible, androidPickerRef]);
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      _reactNative.Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
   const normalizedOptions = normalizeOptions(options);
   const pickerOptions = placeholder ? [{
     value: placeholder,
@@ -233,8 +240,8 @@ const Picker = _ref => {
       label: option.label,
       value: option.value,
       key: option.value
-    })))))) : null, !isIos && pickerVisible ? /*#__PURE__*/React.createElement(_picker.Picker, {
-      enabled: pickerVisible,
+    })))))) : null, !isIos && (pickerVisible || isWeb) ? /*#__PURE__*/React.createElement(_picker.Picker, {
+      enabled: !disabled,
       selectedValue: internalValue,
       onValueChange: handleValueChange,
       style: styles.nonIosPicker,

package/lib/commonjs/index.js

@@ -123,6 +123,18 @@ Object.defineProperty(exports, "DatePicker", {
     return _DatePicker.default;
   }
 });
+Object.defineProperty(exports, "DeckSwiper", {
+  enumerable: true,
+  get: function () {
+    return _DeckSwiper.DeckSwiper;
+  }
+});
+Object.defineProperty(exports, "DeckSwiperCard", {
+  enumerable: true,
+  get: function () {
+    return _DeckSwiper.DeckSwiperCard;
+  }
+});
 Object.defineProperty(exports, "DefaultTheme", {
   enumerable: true,
   get: function () {
@@ -401,6 +413,7 @@ var _ActionSheet = require("./components/ActionSheet");
 var _Swiper = require("./components/Swiper");
 var _Layout = require("./components/Layout");
 var _index = require("./components/RadioButton/index");
+var _DeckSwiper = require("./components/DeckSwiper");
 var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
 var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));

package/lib/commonjs/mappings/DatePicker.js

@@ -37,7 +37,8 @@ const SEED_DATA_PROPS = {
     label: "Border Color"
   }),
   borderColorActive: (0, _types.createColorProp)({
-    label: "Border Color"
+    label: "Active Border Color",
+    description: "Color of border when date picker is active"
   }),
   format: {
     label: "Format",
@@ -169,7 +170,12 @@ const SEED_DATA = [{
       editable: true,
       required: true,
       group: _types.GROUPS.basic
-    }
+    },
+    autoDismissKeyboard: (0, _types.createStaticBoolProp)({
+      label: "Auto dismiss keyboard",
+      description: "Automatically dismiss keyboard when DatePicker is opened",
+      defaultValue: true
+    })
   }
 }];
 exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/DeckSwiper.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = {
+  name: "Deck Swiper",
+  tag: "DeckSwiper",
+  description: "Deck swiper container",
+  category: _types.COMPONENT_TYPES.swiper,
+  stylesPanelSections: _types.BLOCK_STYLES_SECTIONS,
+  layout: {
+    width: "100%"
+  },
+  triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
+  props: {
+    onIndexChanged: (0, _types.createActionProp)({
+      label: "On index changed",
+      description: "Action to execute when swipe to new index"
+    }),
+    onEndReached: (0, _types.createActionProp)({
+      label: "On end reached",
+      description: "Action to execute when end of swiping reached"
+    }),
+    startCardIndex: (0, _types.createStaticNumberProp)({
+      label: "Start card index",
+      description: "Index of card to start swiping from",
+      defaultValue: 0
+    }),
+    infiniteSwiping: (0, _types.createStaticBoolProp)({
+      label: "Infinite swiping",
+      description: "Whether to infinitley loop through cards or not"
+    }),
+    verticalEnabled: (0, _types.createStaticBoolProp)({
+      label: "Vertical swipe enabled",
+      description: "Whether cards should be swipeable vertically or not",
+      defaultValue: true
+    }),
+    horizontalEnabled: (0, _types.createStaticBoolProp)({
+      label: "Horizontal swipe enabled",
+      description: "Whether cards should be swipeable horizontally or not",
+      defaultValue: true
+    }),
+    visibleCardCount: (0, _types.createStaticNumberProp)({
+      label: "Visible card count",
+      description: "Number of cards visible behind (and including) the current card",
+      defaultValue: 1,
+      min: 1,
+      step: 1
+    })
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/DeckSwiperCard.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = {
+  name: "Deck Swiper Card",
+  tag: "DeckSwiperCard",
+  description: "Single Deck Swiper Card item to be used in DeckSwiper",
+  category: _types.COMPONENT_TYPES.swiper,
+  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2
+  },
+  props: {}
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/Picker.js

@@ -142,6 +142,11 @@ const SEED_DATA = [{
     }),
     iconColor: (0, _types.createColorProp)({
       label: "Icon Color"
+    }),
+    autoDismissKeyboard: (0, _types.createStaticBoolProp)({
+      label: "Auto dismiss keyboard",
+      description: "Automatically dismiss keyboard when Picker is opened",
+      defaultValue: true
     })
   },
   layout: {}

package/lib/module/components/DatePicker/DatePicker.js

@@ -1,6 +1,6 @@
 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); }
 import * as React from "react";
-import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput } from "react-native";
+import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, Keyboard } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import dateFormat from "dateformat";
 import { withTheme } from "../../theming";
@@ -39,6 +39,7 @@ const DatePicker = _ref => {
     placeholder,
     borderColor: inputBorderColor,
     borderColorActive: inputBorderColorActive,
+    autoDismissKeyboard = true,
     ...props
   } = _ref;
   const [value, setValue] = React.useState(date || defaultValue);
@@ -134,6 +135,11 @@ const DatePicker = _ref => {
       clearTimeout(_showPlaceholder());
     };
   }, [focused, label, placeholder]);
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
   const _handleFocus = () => {
     if (disabled) {
       return;
@@ -151,7 +157,14 @@ const DatePicker = _ref => {
   const MAXIMIZED_LABEL_FONT_SIZE = textStyles.fontSize || typography.subtitle1.fontSize;
   const MINIMIZED_LABEL_FONT_SIZE = labelSize ? labelSize : typography.caption.fontSize;
   const hasActiveOutline = focused;
-  let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
+  let inputTextColor,
+    activeColor,
+    underlineColor,
+    borderColor = inputBorderColor,
+    placeholderColor,
+    containerStyle,
+    backgroundColor,
+    inputStyle;
   inputTextColor = colors.strong;
   if (disabled) {
     activeColor = colors.light;

package/lib/module/components/DeckSwiper/DeckSwiper.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import DeckSwiperComponent from "react-native-deck-swiper";
+const DeckSwiper = _ref => {
+  let {
+    onIndexChanged,
+    onEndReached,
+    startCardIndex = 0,
+    infiniteSwiping = false,
+    verticalEnabled = true,
+    horizontalEnabled = true,
+    visibleCardCount = 1,
+    style,
+    children
+  } = _ref;
+  const childrenArray = React.useMemo(() => React.Children.toArray(children), [children]);
+
+  // an array of indices based on children count
+  const cardsFillerData = React.useMemo(() => Array.from(Array(childrenArray.length).keys()), [childrenArray]);
+
+  /**
+   * By default react-native-deck-swiper positions everything with absolute position.
+   * To overcome this, it is wrapped in a View to be able to add the component in any layout structure.
+   *
+   *
+   * Since all children of that View are absolutley positioned, the View does not have a height and still looks and behaves weird.
+   * To fix/mitage this without setting a static height, the first card is rendered in invisible state to take up space.
+   * This effectivley makes the default height of the container be the height of the first card.
+   */
+
+  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
+    style: styles.containerHeightFiller
+  }, childrenArray.length && childrenArray[0]), /*#__PURE__*/React.createElement(DeckSwiperComponent, {
+    cards: cardsFillerData,
+    renderCard: (_, i) => /*#__PURE__*/React.createElement(React.Fragment, null, childrenArray[i]),
+    keyExtractor: card => card === null || card === void 0 ? void 0 : card.toString(),
+    containerStyle: StyleSheet.flatten([styles.cardsContainer, style]),
+    cardStyle: styles.card,
+    onSwiped: onIndexChanged,
+    onSwipedAll: onEndReached,
+    cardIndex: startCardIndex,
+    infinite: infiniteSwiping,
+    verticalSwipe: verticalEnabled,
+    horizontalSwipe: horizontalEnabled,
+    showSecondCard: visibleCardCount > 1,
+    stackSize: visibleCardCount,
+    backgroundColor: "transparent",
+    cardVerticalMargin: 0,
+    cardHorizontalMargin: 0
+  }));
+};
+const styles = StyleSheet.create({
+  cardsContainer: {
+    width: "100%"
+  },
+  card: {
+    left: 0,
+    right: 0,
+    width: "auto",
+    height: "auto"
+  },
+  containerHeightFiller: {
+    opacity: 0.0
+  }
+});
+export default DeckSwiper;

package/lib/module/components/DeckSwiper/DeckSwiperCard.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+const DeckSwiperCard = _ref => {
+  let {
+    style,
+    children,
+    theme
+  } = _ref;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.card, {
+      backgroundColor: theme.colors.background,
+      borderColor: theme.colors.divider
+    }, style]
+  }, children);
+};
+const styles = StyleSheet.create({
+  card: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 20,
+    borderWidth: 2
+  }
+});
+export default withTheme(DeckSwiperCard);

package/lib/module/components/DeckSwiper/index.js

@@ -0,0 +1,2 @@
+export { default as DeckSwiper } from "./DeckSwiper";
+export { default as DeckSwiperCard } from "./DeckSwiperCard";

package/lib/module/components/Picker/Picker.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, Dimensions } from "react-native";
+import { View, StyleSheet, Text, Platform, Dimensions, Keyboard } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Picker as NativePicker } from "@react-native-picker/picker";
@@ -33,6 +33,7 @@ const {
   height: deviceHeight
 } = Dimensions.get("screen");
 const isIos = Platform.OS === "ios";
+const isWeb = Platform.OS === "web";
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
@@ -56,7 +57,8 @@ const Picker = _ref => {
     leftIconName,
     placeholderTextColor = unstyledColor,
     rightIconName,
-    type = "solid"
+    type = "solid",
+    autoDismissKeyboard = true
   } = _ref;
   const androidPickerRef = React.useRef(undefined);
   const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -80,6 +82,11 @@ const Picker = _ref => {
       androidPickerRef === null || androidPickerRef === void 0 ? void 0 : (_androidPickerRef$cur = androidPickerRef.current) === null || _androidPickerRef$cur === void 0 ? void 0 : _androidPickerRef$cur.focus();
     }
   }, [pickerVisible, androidPickerRef]);
+  React.useEffect(() => {
+    if (pickerVisible && autoDismissKeyboard) {
+      Keyboard.dismiss();
+    }
+  }, [pickerVisible, autoDismissKeyboard]);
   const normalizedOptions = normalizeOptions(options);
   const pickerOptions = placeholder ? [{
     value: placeholder,
@@ -224,8 +231,8 @@ const Picker = _ref => {
       label: option.label,
       value: option.value,
       key: option.value
-    })))))) : null, !isIos && pickerVisible ? /*#__PURE__*/React.createElement(NativePicker, {
-      enabled: pickerVisible,
+    })))))) : null, !isIos && (pickerVisible || isWeb) ? /*#__PURE__*/React.createElement(NativePicker, {
+      enabled: !disabled,
       selectedValue: internalValue,
       onValueChange: handleValueChange,
       style: styles.nonIosPicker,

package/lib/module/index.js

@@ -31,6 +31,7 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/Ac
 export { Swiper, SwiperItem } from "./components/Swiper";
 export { Center, Circle, Square, Row, Stack, Spacer } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
+export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";

package/lib/module/mappings/DatePicker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, createStaticBoolProp } from "@draftbit/types";
 const SEED_DATA_PROPS = {
   mode: {
     label: "Mode",
@@ -31,7 +31,8 @@ const SEED_DATA_PROPS = {
     label: "Border Color"
   }),
   borderColorActive: createColorProp({
-    label: "Border Color"
+    label: "Active Border Color",
+    description: "Color of border when date picker is active"
   }),
   format: {
     label: "Format",
@@ -163,6 +164,11 @@ export const SEED_DATA = [{
       editable: true,
       required: true,
       group: GROUPS.basic
-    }
+    },
+    autoDismissKeyboard: createStaticBoolProp({
+      label: "Auto dismiss keyboard",
+      description: "Automatically dismiss keyboard when DatePicker is opened",
+      defaultValue: true
+    })
   }
 }];