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

package/lib/typescript/src/mappings/DatePickerModal.d.ts

@@ -0,0 +1,241 @@
+export declare const SEED_DATA: ({
+    name: string;
+    description: string;
+    props: {
+        onConfirm: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        onChange: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        mode: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        fieldName: {
+            handlerPropName: string;
+            group: string;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: string;
+            valuePropName: string;
+            editable: boolean;
+            required: boolean;
+        };
+        onDismiss: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        locale: any;
+        visible: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        label: any;
+        saveLabel: any;
+        saveLabelDisabled: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        uppercase: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        startYear: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        endYear: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+    };
+    tag: string;
+    packageName: string;
+    triggers: string[];
+    category: string;
+    StylesPanelSections: string[];
+} | {
+    name: string;
+    description: string;
+    props: {
+        onConfirm: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        onChange: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        mode: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        moreLabel: any;
+        startLabel: any;
+        endLabel: any;
+        fieldName: {
+            handlerPropName: string;
+            group: string;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: string;
+            valuePropName: string;
+            editable: boolean;
+            required: boolean;
+        };
+        onDismiss: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        locale: any;
+        visible: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        label: any;
+        saveLabel: any;
+        saveLabelDisabled: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        uppercase: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        startYear: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        endYear: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+    };
+    tag: string;
+    packageName: string;
+    triggers: string[];
+    category: string;
+    StylesPanelSections: string[];
+})[];
+//# sourceMappingURL=DatePickerModal.d.ts.map

package/lib/typescript/src/mappings/DatePickerModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerModal.d.ts","sourceRoot":"","sources":["../../../../src/mappings/DatePickerModal.ts"],"names":[],"mappings":"AAsFA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiFrB,CAAC"}

package/lib/typescript/src/mappings/Picker.d.ts

@@ -40,16 +40,6 @@ export declare const SEED_DATA: {
             formType: string;
             propType: string;
         };
-        autoDismissKeyboard: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: boolean;
-            editable: boolean;
-            required: boolean;
-            group: string;
-        };
         label: {
             group: string;
             label: string;

package/lib/typescript/src/mappings/Picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Picker.ts"],"names":[],"mappings":"AA+HA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCrB,CAAC"}
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/mappings/Picker.ts"],"names":[],"mappings":"AA8HA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.7.9-9ade8f.2+9ade8fc",
+  "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-9ade8f.2+9ade8fc",
+    "@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",
@@ -91,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "9ade8fc93de8d4203db4b4a34a7cf2cc6618bcc2"
+  "gitHead": "b47217fd8dbf71431b72eb41b8a4b4242ee666ac"
 }

package/src/components/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, Keyboard, } from "react-native";
+import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import dateFormat from "dateformat";
 import { withTheme } from "../../theming";
@@ -25,7 +25,7 @@ const MONTHS = [
     "November",
     "December",
 ];
-const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, autoDismissKeyboard = true, ...props }) => {
+const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, ...props }) => {
     const [value, setValue] = React.useState(date || defaultValue);
     React.useEffect(() => {
         if (defaultValue != null) {
@@ -113,11 +113,6 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
             clearTimeout(_showPlaceholder());
         };
     }, [focused, label, placeholder]);
-    React.useEffect(() => {
-        if (pickerVisible && autoDismissKeyboard) {
-            Keyboard.dismiss();
-        }
-    }, [pickerVisible, autoDismissKeyboard]);
     const _handleFocus = () => {
         if (disabled) {
             return;

package/src/components/DatePicker/DatePicker.tsx

@@ -12,7 +12,6 @@ import {
   I18nManager,
   LayoutChangeEvent,
   TextInput as NativeTextInput,
-  Keyboard,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -56,7 +55,6 @@ type Props = {
   rightIconName?: string;
   borderColor?: string;
   borderColorActive?: string;
-  autoDismissKeyboard?: boolean;
 } & IconSlot &
   TextInputProps;
 
@@ -95,7 +93,6 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   placeholder,
   borderColor: inputBorderColor,
   borderColorActive: inputBorderColorActive,
-  autoDismissKeyboard = true,
   ...props
 }) => {
   const [value, setValue] = React.useState<any>(date || defaultValue);
@@ -207,12 +204,6 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     };
   }, [focused, label, placeholder]);
 
-  React.useEffect(() => {
-    if (pickerVisible && autoDismissKeyboard) {
-      Keyboard.dismiss();
-    }
-  }, [pickerVisible, autoDismissKeyboard]);
-
   const _handleFocus = () => {
     if (disabled) {
       return;

package/src/components/Picker/Picker.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, StyleSheet, Text, Platform, Dimensions, Keyboard, } from "react-native";
+import { View, StyleSheet, Text, Platform, Dimensions, } 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";
@@ -35,7 +35,7 @@ const isIos = Platform.OS === "ios";
 const unstyledColor = "rgba(165, 173, 183, 1)";
 const disabledColor = "rgb(240, 240, 240)";
 const errorColor = "rgba(255, 69, 100, 1)";
-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, }) => {
+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", }) => {
     var _a, _b;
     const androidPickerRef = React.useRef(undefined);
     const [internalValue, setInternalValue] = React.useState(value || defaultValue);
@@ -59,11 +59,6 @@ const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style,
             (_a = androidPickerRef === null || androidPickerRef === void 0 ? void 0 : androidPickerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [pickerVisible, androidPickerRef]);
-    React.useEffect(() => {
-        if (pickerVisible && autoDismissKeyboard) {
-            Keyboard.dismiss();
-        }
-    }, [pickerVisible, autoDismissKeyboard]);
     const normalizedOptions = normalizeOptions(options);
     const pickerOptions = placeholder
         ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]

package/src/components/Picker/Picker.tsx

@@ -7,7 +7,6 @@ import {
   ViewStyle,
   StyleProp,
   Dimensions,
-  Keyboard,
 } from "react-native";
 import { omit, pickBy, identity, isObject } from "lodash";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -49,7 +48,6 @@ export type PickerProps = {
   placeholderTextColor?: string;
   rightIconName?: string;
   type?: "solid" | "underline";
-  autoDismissKeyboard?: boolean;
   theme: Theme;
   Icon: IconSlot["Icon"];
 };
@@ -109,13 +107,13 @@ const Picker: React.FC<PickerProps> = ({
   placeholderTextColor = unstyledColor,
   rightIconName,
   type = "solid",
-  autoDismissKeyboard = true,
 }) => {
   const androidPickerRef = React.useRef<any | undefined>(undefined);
 
   const [internalValue, setInternalValue] = React.useState<string | undefined>(
     value || defaultValue
   );
+
   const [pickerVisible, setPickerVisible] = React.useState(false);
 
   const togglePickerVisible = () => {
@@ -140,12 +138,6 @@ const Picker: React.FC<PickerProps> = ({
     }
   }, [pickerVisible, androidPickerRef]);
 
-  React.useEffect(() => {
-    if (pickerVisible && autoDismissKeyboard) {
-      Keyboard.dismiss();
-    }
-  }, [pickerVisible, autoDismissKeyboard]);
-
   const normalizedOptions = normalizeOptions(options);
 
   const pickerOptions = placeholder

package/src/mappings/DatePicker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, createStaticBoolProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     mode: {
         label: "Mode",
@@ -171,11 +171,6 @@ export const SEED_DATA = [
                 required: true,
                 group: GROUPS.basic,
             },
-            autoDismissKeyboard: createStaticBoolProp({
-                label: "Auto dismiss keyboard",
-                description: "Automatically dismiss keyboard when DatePicker is opened",
-                defaultValue: true,
-            }),
         },
     },
 ];

package/src/mappings/DatePicker.ts

@@ -8,7 +8,6 @@ import {
   StylesPanelSections,
   createNumberProp,
   createColorProp,
-  createStaticBoolProp,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -186,11 +185,6 @@ export const SEED_DATA = [
         required: true,
         group: GROUPS.basic,
       },
-      autoDismissKeyboard: createStaticBoolProp({
-        label: "Auto dismiss keyboard",
-        description: "Automatically dismiss keyboard when DatePicker is opened",
-        defaultValue: true,
-      }),
     },
   },
 ];

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",
+            }),
+        },
+    },
+];