@draftbit/core 42.1.3 → 42.1.6-f67332.0

package/src/components/Picker/PickerComponent.android.js

@@ -40,6 +40,9 @@ const Picker = ({ style, options, placeholder, selectedValue, disabled = false,
             "marginBottom",
             "marginLeft",
         ]);
+    const selectedLabel = selectedValue &&
+        (options.find((opt) => opt.value === selectedValue)?.label ??
+            selectedValue);
     return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
         React.createElement(View, null,
             React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: (value, index) => onValueChange(value.toString(), index), style: {
@@ -51,7 +54,7 @@ const Picker = ({ style, options, placeholder, selectedValue, disabled = false,
                     bottom: 0,
                 } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
             React.createElement(View, { pointerEvents: "none" },
-                React.createElement(TextField, { ...props, value: selectedValue, placeholder: placeholder, 
+                React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder, 
                     // @ts-ignore
                     ref: textField, disabled: disabled, 
                     // @ts-expect-error

package/src/components/Picker/PickerComponent.android.tsx

@@ -61,6 +61,11 @@ const Picker: React.FC<PickerComponentProps> = ({
       "marginLeft",
     ]);
 
+  const selectedLabel =
+    selectedValue &&
+    (options.find((opt) => opt.value === selectedValue)?.label ??
+      selectedValue);
+
   return (
     <Touchable
       disabled={disabled}
@@ -90,7 +95,7 @@ const Picker: React.FC<PickerComponentProps> = ({
         <View pointerEvents="none">
           <TextField
             {...props}
-            value={selectedValue}
+            value={selectedLabel}
             placeholder={placeholder}
             // @ts-ignore
             ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()

package/src/components/Picker/PickerComponent.web.js

@@ -39,6 +39,9 @@ const Picker = ({ style, options, placeholder, selectedValue, disabled = false,
             "marginBottom",
             "marginLeft",
         ]);
+    const selectedLabel = selectedValue &&
+        (options.find((opt) => opt.value === selectedValue)?.label ??
+            selectedValue);
     return (React.createElement(Touchable, { disabled: disabled, onPress: toggleFocus, style: [styles.container, viewStyles] },
         React.createElement(View, null,
             React.createElement(NativePicker, { enabled: !disabled, selectedValue: selectedValue, onValueChange: (value, index) => onValueChange(value.toString(), index), style: {
@@ -51,7 +54,7 @@ const Picker = ({ style, options, placeholder, selectedValue, disabled = false,
                     bottom: 0,
                 } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))),
             React.createElement(View, { pointerEvents: "none" },
-                React.createElement(TextField, { ...props, value: selectedValue, placeholder: placeholder, 
+                React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder, 
                     // @ts-ignore
                     ref: textField, disabled: disabled, 
                     // @ts-expect-error

package/src/components/Picker/PickerComponent.web.tsx

@@ -60,6 +60,11 @@ const Picker: React.FC<PickerComponentProps> = ({
       "marginLeft",
     ]);
 
+  const selectedLabel =
+    selectedValue &&
+    (options.find((opt) => opt.value === selectedValue)?.label ??
+      selectedValue);
+
   return (
     <Touchable
       disabled={disabled}
@@ -90,7 +95,7 @@ const Picker: React.FC<PickerComponentProps> = ({
         <View pointerEvents="none">
           <TextField
             {...props}
-            value={selectedValue}
+            value={selectedLabel}
             placeholder={placeholder}
             // @ts-ignore
             ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()

package/src/components/RadioButton/RadioButtonRow.js

@@ -108,3 +108,4 @@ export const SEED_DATA = {
         }),
     },
 };
+// TODO comment testing

package/src/components/RadioButton/RadioButtonRow.tsx

@@ -191,3 +191,4 @@ export const SEED_DATA = {
     }),
   },
 };
+// TODO comment testing

package/src/components/Switch.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Switch as NativeSwitch, } from "react-native";
 import { withTheme } from "../theming";
 import FormRow from "./FormRow";
-import { COMPONENT_TYPES, GROUPS, createBoolProp, createColorProp, createFieldNameProp, createTextProp, createRowDirectionProp, RowDirection, Triggers, } from "@draftbit/types";
+import { RowDirection } from "@draftbit/types";
 import { usePrevious } from "../hooks";
 function Switch({ value = false, initialValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, style, ...rest }) {
     const activeTrackThemeColor = activeTrackColor || theme.colors.primary;
@@ -55,74 +55,5 @@ function Row({ label = "Label", direction = RowDirection.Row, style, value = fal
 const SwitchRow = withTheme(Row);
 export { SwitchRow };
 export default withTheme(Switch);
-const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
-export const SEED_DATA = [
-    {
-        name: "Switch",
-        tag: "Switch",
-        category: COMPONENT_TYPES.input,
-        layout: {},
-        triggers: SEED_DATA_TRIGGERS,
-        props: {
-            disabled: createBoolProp({
-                label: "Disabled",
-                description: "Boolean to handle disabling the switch",
-            }),
-            fieldName: createFieldNameProp({
-                handlerPropName: "onValueChange",
-                valuePropName: "value",
-                defaultValue: "switchValue",
-            }),
-            activeTrackColor: createColorProp({
-                label: "Active Track Color",
-            }),
-            inactiveTrackColor: createColorProp({
-                label: "Inactive Track Color",
-            }),
-            activeThumbColor: createColorProp({
-                label: "Active Thumb Color",
-            }),
-            inactiveThumbColor: createColorProp({
-                label: "Inactive Thumb Color",
-            }),
-        },
-    },
-    {
-        name: "Switch Row",
-        tag: "SwitchRow",
-        category: COMPONENT_TYPES.input,
-        layout: {},
-        triggers: SEED_DATA_TRIGGERS,
-        props: {
-            label: createTextProp({
-                label: "Label",
-                description: "Label to show with the checkbox",
-                required: true,
-                defaultValue: "First Option",
-            }),
-            direction: createRowDirectionProp(),
-            disabled: createBoolProp({
-                label: "Disabled",
-                description: "Boolean to handle disabling the switch",
-                group: GROUPS.data,
-            }),
-            fieldName: createFieldNameProp({
-                handlerPropName: "onValueChange",
-                valuePropName: "value",
-                defaultValue: "switchValue",
-            }),
-            activeTrackColor: createColorProp({
-                label: "Active Track Color",
-            }),
-            inactiveTrackColor: createColorProp({
-                label: "Inactive Track Color",
-            }),
-            activeThumbColor: createColorProp({
-                label: "Active Thumb Color",
-            }),
-            inactiveThumbColor: createColorProp({
-                label: "Inactive Thumb Color",
-            }),
-        },
-    },
-];
+/* README: SEED_DATA lives inside mappings/Switch.js since there were weird issues taking place with sourceMaps being
+ * generated */

package/src/components/Switch.tsx

@@ -7,17 +7,7 @@ import {
 } from "react-native";
 import { withTheme } from "../theming";
 import FormRow from "./FormRow";
-import {
-  COMPONENT_TYPES,
-  GROUPS,
-  createBoolProp,
-  createColorProp,
-  createFieldNameProp,
-  createTextProp,
-  createRowDirectionProp,
-  RowDirection,
-  Triggers,
-} from "@draftbit/types";
+import { RowDirection } from "@draftbit/types";
 import type { Theme } from "../styles/DefaultTheme";
 import { usePrevious } from "../hooks";
 
@@ -153,77 +143,7 @@ function Row({
 
 const SwitchRow = withTheme(Row);
 export { SwitchRow };
-
 export default withTheme(Switch);
 
-const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
-export const SEED_DATA = [
-  {
-    name: "Switch",
-    tag: "Switch",
-    category: COMPONENT_TYPES.input,
-    layout: {},
-    triggers: SEED_DATA_TRIGGERS,
-    props: {
-      disabled: createBoolProp({
-        label: "Disabled",
-        description: "Boolean to handle disabling the switch",
-      }),
-      fieldName: createFieldNameProp({
-        handlerPropName: "onValueChange",
-        valuePropName: "value",
-        defaultValue: "switchValue",
-      }),
-      activeTrackColor: createColorProp({
-        label: "Active Track Color",
-      }),
-      inactiveTrackColor: createColorProp({
-        label: "Inactive Track Color",
-      }),
-      activeThumbColor: createColorProp({
-        label: "Active Thumb Color",
-      }),
-      inactiveThumbColor: createColorProp({
-        label: "Inactive Thumb Color",
-      }),
-    },
-  },
-  {
-    name: "Switch Row",
-    tag: "SwitchRow",
-    category: COMPONENT_TYPES.input,
-    layout: {},
-    triggers: SEED_DATA_TRIGGERS,
-    props: {
-      label: createTextProp({
-        label: "Label",
-        description: "Label to show with the checkbox",
-        required: true,
-        defaultValue: "First Option",
-      }),
-      direction: createRowDirectionProp(),
-      disabled: createBoolProp({
-        label: "Disabled",
-        description: "Boolean to handle disabling the switch",
-        group: GROUPS.data,
-      }),
-      fieldName: createFieldNameProp({
-        handlerPropName: "onValueChange",
-        valuePropName: "value",
-        defaultValue: "switchValue",
-      }),
-      activeTrackColor: createColorProp({
-        label: "Active Track Color",
-      }),
-      inactiveTrackColor: createColorProp({
-        label: "Inactive Track Color",
-      }),
-      activeThumbColor: createColorProp({
-        label: "Active Thumb Color",
-      }),
-      inactiveThumbColor: createColorProp({
-        label: "Inactive Thumb Color",
-      }),
-    },
-  },
-];
+/* README: SEED_DATA lives inside mappings/Switch.js since there were weird issues taking place with sourceMaps being
+ * generated */

package/src/mappings/Switch.js

@@ -0,0 +1,81 @@
+import {
+  COMPONENT_TYPES,
+  GROUPS,
+  createBoolProp,
+  createColorProp,
+  createFieldNameProp,
+  createTextProp,
+  createRowDirectionProp,
+  Triggers,
+} from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
+export const SEED_DATA = [
+  {
+    name: "Switch",
+    tag: "Switch",
+    category: COMPONENT_TYPES.input,
+    layout: {},
+    triggers: SEED_DATA_TRIGGERS,
+    props: {
+      disabled: createBoolProp({
+        label: "Disabled",
+        description: "Boolean to handle disabling the switch",
+      }),
+      fieldName: createFieldNameProp({
+        handlerPropName: "onValueChange",
+        valuePropName: "value",
+        defaultValue: "switchValue",
+      }),
+      activeTrackColor: createColorProp({
+        label: "Active Track Color",
+      }),
+      inactiveTrackColor: createColorProp({
+        label: "Inactive Track Color",
+      }),
+      activeThumbColor: createColorProp({
+        label: "Active Thumb Color",
+      }),
+      inactiveThumbColor: createColorProp({
+        label: "Inactive Thumb Color",
+      }),
+    },
+  },
+  {
+    name: "Switch Row",
+    tag: "SwitchRow",
+    category: COMPONENT_TYPES.input,
+    layout: {},
+    triggers: SEED_DATA_TRIGGERS,
+    props: {
+      label: createTextProp({
+        label: "Label",
+        description: "Label to show with the checkbox",
+        required: true,
+        defaultValue: "First Option",
+      }),
+      direction: createRowDirectionProp(),
+      disabled: createBoolProp({
+        label: "Disabled",
+        description: "Boolean to handle disabling the switch",
+        group: GROUPS.data,
+      }),
+      fieldName: createFieldNameProp({
+        handlerPropName: "onValueChange",
+        valuePropName: "value",
+        defaultValue: "switchValue",
+      }),
+      activeTrackColor: createColorProp({
+        label: "Active Track Color",
+      }),
+      inactiveTrackColor: createColorProp({
+        label: "Inactive Track Color",
+      }),
+      activeThumbColor: createColorProp({
+        label: "Active Thumb Color",
+      }),
+      inactiveThumbColor: createColorProp({
+        label: "Inactive Thumb Color",
+      }),
+    },
+  },
+];