@draftbit/core 46.7.9-9ce779.2 → 46.7.9-b47217.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.7.9-9ce779.2+9ce7799",
+  "version": "46.7.9-b47217.2+b47217f",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.7.9-9ce779.2+9ce7799",
+    "@draftbit/types": "^46.7.9-b47217.2+b47217f",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -53,7 +53,6 @@
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
-    "react-native-deck-swiper": "^2.0.12",
     "react-native-modal-datetime-picker": "^13.0.0",
     "react-native-svg": "12.3.0",
     "react-native-typography": "^1.4.1",
@@ -92,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "9ce77999dd0ae314668a03f87c7e230da78d3787"
+  "gitHead": "b47217fd8dbf71431b72eb41b8a4b4242ee666ac"
 }

package/src/index.js

@@ -31,7 +31,6 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel, } from "./components/A
 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";
 export { default as Picker } from "./components/Picker/Picker";

package/src/index.tsx

@@ -51,8 +51,6 @@ export {
   RadioButtonFieldGroup,
 } from "./components/RadioButton/index";
 
-export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
-
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";

package/src/mappings/DatePickerModal.js

@@ -0,0 +1,146 @@
+import { COMPONENT_TYPES, FORM_TYPES, Triggers, StylesPanelSections, createBoolProp, createTextProp, createTextEnumProp, createStaticBoolProp, createStaticNumberProp, createFieldNameProp, createActionProp, } from "@draftbit/types";
+/**
+ * Maps react-native-paper-dates DatePickerModal in modes: "single" and "multiple"
+ * Cannot map mode "range" because it relies on 2 fieldNames (startDate and endDate)
+ */
+const SHARED_SEED_DATA = {
+    tag: "DatePickerModal",
+    packageName: "react-native-paper-dates",
+    triggers: [Triggers.OnDismiss, Triggers.OnConfirm, Triggers.OnChange],
+    category: COMPONENT_TYPES.input,
+    StylesPanelSections: [
+        StylesPanelSections.Typography,
+        StylesPanelSections.Background,
+        StylesPanelSections.Size,
+        StylesPanelSections.MarginsAndPaddings,
+        StylesPanelSections.Position,
+    ],
+};
+const SHARED_SEED_DATA_PROPS = {
+    onDismiss: createActionProp({
+        label: "On Dismiss",
+        description: "Called when date picker dimissed",
+        required: true,
+    }),
+    locale: createTextProp({
+        label: "Locale",
+        description: "A locale can be composed of both a base language, the country (territory) of use, and possibly codeset (which is usually assumed). For example, German is de",
+        defaultValue: "en",
+        required: true,
+    }),
+    visible: createBoolProp({
+        label: "Visible",
+        description: "Flag indicating if the component should be displayed",
+        required: true,
+    }),
+    label: createTextProp({
+        label: "Label",
+        description: "The label used as the header in the component",
+        defaultValue: "Select date",
+    }),
+    saveLabel: createTextProp({
+        label: "Save Label",
+        description: "Label used to confirm a date selection",
+        defaultValue: "Save",
+    }),
+    saveLabelDisabled: createStaticBoolProp({
+        label: "Disable Save Label",
+        description: "Flag indicating if the save label should be disabled and unable to receive events",
+    }),
+    uppercase: createStaticBoolProp({
+        label: "Uppercase",
+        description: "Flag indicating if the text in the component should be uppercase",
+        defaultValue: true,
+    }),
+    startYear: createStaticNumberProp({
+        label: "Start Year",
+        description: "The start year when the component is rendered",
+        required: false,
+        defaultValue: 1800,
+    }),
+    endYear: createStaticNumberProp({
+        label: "End Year",
+        description: "The end year when the component is rendered",
+        required: false,
+        defaultValue: 2200,
+    }),
+};
+export const SEED_DATA = [
+    {
+        ...SHARED_SEED_DATA,
+        name: "Date Picker Modal",
+        description: "Date Picker modal for date selection",
+        props: {
+            ...SHARED_SEED_DATA_PROPS,
+            onConfirm: createActionProp({
+                label: "On Confirm",
+                description: "Called when date selected and confirmed",
+                required: true,
+            }),
+            onChange: createActionProp({
+                label: "On Change",
+                description: "Called when date selection changes",
+            }),
+            mode: createTextEnumProp({
+                label: "Mode",
+                description: "The selection mode of the date picker",
+                required: true,
+                options: ["single"],
+                editable: false,
+                defaultValue: "single",
+                formType: FORM_TYPES.flatArray,
+            }),
+            fieldName: createFieldNameProp({
+                defaultValue: "date",
+                handlerPropName: "onConfirm",
+                valuePropName: "date",
+            }),
+        },
+    },
+    {
+        ...SHARED_SEED_DATA,
+        name: "Multiple Date Picker Modal",
+        description: "Date Picker modal for multiple date selection",
+        props: {
+            ...SHARED_SEED_DATA_PROPS,
+            onConfirm: createActionProp({
+                label: "On Confirm",
+                description: "Called when dates selected and confirmed",
+                required: true,
+            }),
+            onChange: createActionProp({
+                label: "On Change",
+                description: "Called when dates selection changes",
+            }),
+            mode: createTextEnumProp({
+                label: "Mode",
+                description: "The selection mode of the date picker",
+                required: true,
+                options: ["multiple"],
+                editable: false,
+                defaultValue: "multiple",
+                formType: FORM_TYPES.flatArray,
+            }),
+            moreLabel: createTextProp({
+                label: "More Label",
+                description: "The label used display when multiple dates have been selected in the component",
+                defaultValue: "More",
+            }),
+            startLabel: createTextProp({
+                label: "Start Label",
+                description: "The label used as the prefix to the starting date in the component",
+                defaultValue: "Start",
+            }),
+            endLabel: createTextProp({
+                label: "End Label",
+                description: "The label used as the suffix to the ending date in the component",
+                defaultValue: "End",
+            }),
+            fieldName: createFieldNameProp({
+                defaultValue: "dates",
+                handlerPropName: "onConfirm",
+                valuePropName: "dates",
+            }),
+        },
+    },
+];

package/src/mappings/DatePickerModal.ts

@@ -0,0 +1,168 @@
+import {
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  Triggers,
+  StylesPanelSections,
+  createBoolProp,
+  createTextProp,
+  createTextEnumProp,
+  createStaticBoolProp,
+  createStaticNumberProp,
+  createFieldNameProp,
+  createActionProp,
+} from "@draftbit/types";
+
+/**
+ * Maps react-native-paper-dates DatePickerModal in modes: "single" and "multiple"
+ * Cannot map mode "range" because it relies on 2 fieldNames (startDate and endDate)
+ */
+
+const SHARED_SEED_DATA = {
+  tag: "DatePickerModal",
+  packageName: "react-native-paper-dates",
+  triggers: [Triggers.OnDismiss, Triggers.OnConfirm, Triggers.OnChange],
+  category: COMPONENT_TYPES.input,
+  StylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.Background,
+    StylesPanelSections.Size,
+    StylesPanelSections.MarginsAndPaddings,
+    StylesPanelSections.Position,
+  ],
+};
+
+const SHARED_SEED_DATA_PROPS = {
+  onDismiss: createActionProp({
+    label: "On Dismiss",
+    description: "Called when date picker dimissed",
+    required: true,
+  }),
+  locale: createTextProp({
+    label: "Locale",
+    description:
+      "A locale can be composed of both a base language, the country (territory) of use, and possibly codeset (which is usually assumed). For example, German is de",
+    defaultValue: "en",
+    required: true,
+  }),
+  visible: createBoolProp({
+    label: "Visible",
+    description: "Flag indicating if the component should be displayed",
+    required: true,
+  }),
+  label: createTextProp({
+    label: "Label",
+    description: "The label used as the header in the component",
+    defaultValue: "Select date",
+  }),
+  saveLabel: createTextProp({
+    label: "Save Label",
+    description: "Label used to confirm a date selection",
+    defaultValue: "Save",
+  }),
+  saveLabelDisabled: createStaticBoolProp({
+    label: "Disable Save Label",
+    description:
+      "Flag indicating if the save label should be disabled and unable to receive events",
+  }),
+  uppercase: createStaticBoolProp({
+    label: "Uppercase",
+    description:
+      "Flag indicating if the text in the component should be uppercase",
+    defaultValue: true,
+  }),
+  startYear: createStaticNumberProp({
+    label: "Start Year",
+    description: "The start year when the component is rendered",
+    required: false,
+    defaultValue: 1800,
+  }),
+  endYear: createStaticNumberProp({
+    label: "End Year",
+    description: "The end year when the component is rendered",
+    required: false,
+    defaultValue: 2200,
+  }),
+};
+
+export const SEED_DATA = [
+  {
+    ...SHARED_SEED_DATA,
+    name: "Date Picker Modal",
+    description: "Date Picker modal for date selection",
+    props: {
+      ...SHARED_SEED_DATA_PROPS,
+      onConfirm: createActionProp({
+        label: "On Confirm",
+        description: "Called when date selected and confirmed",
+        required: true,
+      }),
+      onChange: createActionProp({
+        label: "On Change",
+        description: "Called when date selection changes",
+      }),
+      mode: createTextEnumProp({
+        label: "Mode",
+        description: "The selection mode of the date picker",
+        required: true,
+        options: ["single"],
+        editable: false,
+        defaultValue: "single",
+        formType: FORM_TYPES.flatArray,
+      }),
+      fieldName: createFieldNameProp({
+        defaultValue: "date",
+        handlerPropName: "onConfirm",
+        valuePropName: "date",
+      }),
+    },
+  },
+  {
+    ...SHARED_SEED_DATA,
+    name: "Multiple Date Picker Modal",
+    description: "Date Picker modal for multiple date selection",
+    props: {
+      ...SHARED_SEED_DATA_PROPS,
+      onConfirm: createActionProp({
+        label: "On Confirm",
+        description: "Called when dates selected and confirmed",
+        required: true,
+      }),
+      onChange: createActionProp({
+        label: "On Change",
+        description: "Called when dates selection changes",
+      }),
+      mode: createTextEnumProp({
+        label: "Mode",
+        description: "The selection mode of the date picker",
+        required: true,
+        options: ["multiple"],
+        editable: false,
+        defaultValue: "multiple",
+        formType: FORM_TYPES.flatArray,
+      }),
+      moreLabel: createTextProp({
+        label: "More Label",
+        description:
+          "The label used display when multiple dates have been selected in the component",
+        defaultValue: "More",
+      }),
+      startLabel: createTextProp({
+        label: "Start Label",
+        description:
+          "The label used as the prefix to the starting date in the component",
+        defaultValue: "Start",
+      }),
+      endLabel: createTextProp({
+        label: "End Label",
+        description:
+          "The label used as the suffix to the ending date in the component",
+        defaultValue: "End",
+      }),
+      fieldName: createFieldNameProp({
+        defaultValue: "dates",
+        handlerPropName: "onConfirm",
+        valuePropName: "dates",
+      }),
+    },
+  },
+];

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

@@ -1,73 +0,0 @@
-"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

@@ -1,35 +0,0 @@
-"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,
-      borderRadius: theme.borderRadius.global,
-      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

@@ -1,20 +0,0 @@
-"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/mappings/DeckSwiper.js

@@ -1,52 +0,0 @@
-"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,
-  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

@@ -1,16 +0,0 @@
-"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,
-  props: {}
-};
-exports.SEED_DATA = SEED_DATA;

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

@@ -1,65 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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,
-      borderRadius: theme.borderRadius.global,
-      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

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