@draftbit/core 44.1.13-9a8dff.0 → 44.1.13-c10e64.0

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

@@ -1,37 +1,117 @@
 import * as React from "react";
-import { /* StyleSheet, Dimensions,  */ Text } from "react-native";
+import { View, StyleSheet } from "react-native";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import omit from "lodash.omit";
+import { withTheme } from "../../theming";
+import { extractStyles } from "../../utilities";
 
-// import { Picker as NativePicker } from "@react-native-picker/picker";
+import TextField from "../TextField";
+import Touchable from "../Touchable";
+import { PickerComponentProps } from "./PickerTypes";
 
-import type { IconSlot } from "../../interfaces/Icon";
+const Picker: React.FC<PickerComponentProps> = ({
+  style,
+  options,
+  placeholder,
+  selectedValue,
+  disabled = false,
+  onValueChange: onValueChangeOverride = () => {},
+  ...props
+}) => {
+  const {
+    viewStyles: {
+      borderRadius, // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderTopWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderRightWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderBottomWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderLeftWidth, // eslint-disable-line @typescript-eslint/no-unused-vars
+      borderColor, // eslint-disable-line @typescript-eslint/no-unused-vars
+      backgroundColor, // eslint-disable-line @typescript-eslint/no-unused-vars
+      padding, // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingTop, // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingRight, // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingBottom, // eslint-disable-line @typescript-eslint/no-unused-vars
+      paddingLeft, // eslint-disable-line @typescript-eslint/no-unused-vars
+      ...viewStyles
+    },
+  } = extractStyles(style);
 
-import { PickerOption } from "./Picker";
+  const textField = React.useRef<typeof TextField | undefined>(undefined);
 
-// const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+  const onValueChange = (itemValue: string, itemIndex: number) => {
+    toggleFocus();
+    onValueChangeOverride(itemValue, itemIndex);
+  };
 
-interface PickerComponentProps {
-  Icon: IconSlot["Icon"];
-  androidPickerRef: React.RefObject<any>;
-  togglePickerVisible: () => void;
-  pickerOptions: PickerOption[];
-  internalValue: string | undefined;
-  handleValueChange: (newValue: string, itemIndex: number) => void;
-}
+  const toggleFocus = () => {
+    if (!disabled) {
+      // @ts-ignore
+      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
+    }
+  };
 
-export const PickerComponent: React.FC<PickerComponentProps> = () => {
-  return <Text>web</Text>;
+  const stylesWithoutMargin =
+    style &&
+    omit(StyleSheet.flatten(style), [
+      "margin",
+      "marginTop",
+      "marginRight",
+      "marginBottom",
+      "marginLeft",
+    ]);
+
+  const selectedLabel =
+    selectedValue &&
+    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
+
+  return (
+    <Touchable
+      disabled={disabled}
+      onPress={toggleFocus}
+      style={[styles.container, viewStyles]}
+    >
+      <View>
+        <NativePicker
+          enabled={!disabled}
+          selectedValue={selectedValue}
+          onValueChange={onValueChange}
+          style={{
+            flex: 1,
+            opacity: 0,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: "100%",
+          }}
+        >
+          {options.map((o) => (
+            <NativePicker.Item label={o.label} value={o.value} key={o.value} />
+          ))}
+        </NativePicker>
+        <View pointerEvents="none">
+          <TextField
+            {...props}
+            value={selectedLabel}
+            placeholder={placeholder}
+            // @ts-ignore
+            ref={textField} // cannot determine if ref is of correct type due to component being wrapped in a withTheme()
+            disabled={disabled}
+            // @ts-expect-error
+            style={stylesWithoutMargin}
+          />
+        </View>
+      </View>
+    </Touchable>
+  );
 };
 
-// const styles = StyleSheet.create({
-//   nonIosPicker: {
-//     opacity: 0,
-//     position: "absolute",
-//     top: 0,
-//     left: 0,
-//     right: 0,
-//     bottom: 0,
-//     width: "100%",
-//     maxWidth: deviceWidth,
-//     maxHeight: deviceHeight,
-//   },
-// });
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch",
+  },
+});
+
+export default withTheme(Picker);

package/src/components/Picker/PickerTypes.js

@@ -0,0 +1 @@
+export {};

package/src/components/Picker/PickerTypes.ts

@@ -0,0 +1,18 @@
+import { ViewStyle } from "react-native";
+import { StyleProp } from "react-native";
+import { Props as TextFieldProps } from "../TextField";
+
+export interface PickerOption {
+  value: string;
+  label: string;
+}
+
+export interface PickerComponentProps extends TextFieldProps {
+  style?: StyleProp<ViewStyle> & { height?: number };
+  options: PickerOption[];
+  placeholder?: string;
+  selectedValue: string;
+  disabled?: boolean;
+  onValueChange?: (value: string, index: number) => void;
+  defaultValue?: string;
+}

package/src/mappings/Picker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, } from "@draftbit/types";
+import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     label: {
         group: GROUPS.data,
@@ -131,8 +131,6 @@ export const SEED_DATA = [
                 required: true,
                 group: GROUPS.basic,
             },
-            iconSize: createIconSizeProp({ defaultValue: 24 }),
-            iconColor: createColorProp({ label: "Icon Color" }),
         },
         layout: {},
     },

package/src/mappings/Picker.ts

@@ -5,8 +5,6 @@ import {
   FORM_TYPES,
   PROP_TYPES,
   FIELD_NAME,
-  createIconSizeProp,
-  createColorProp,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -145,8 +143,6 @@ export const SEED_DATA = [
         required: true,
         group: GROUPS.basic,
       },
-      iconSize: createIconSizeProp({ defaultValue: 24 }),
-      iconColor: createColorProp({ label: "Icon Color" }),
     },
     layout: {},
   },

package/src/utilities.js

@@ -1,5 +1,5 @@
 import { StyleSheet } from "react-native";
-import { isString, isNumber, pick, pickBy, identity } from "lodash";
+import { isString, isNumber } from "lodash";
 export function extractStyles(style) {
     const { color, fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textTransform, textAlign, textDecorationLine, textDecorationColor, textDecorationStyle, ...viewStyles } = StyleSheet.flatten(style || {});
     const textStyles = {
@@ -17,54 +17,6 @@ export function extractStyles(style) {
     };
     return { viewStyles, textStyles };
 }
-export const borderStyleNames = [
-    "borderRadius",
-    "borderBottomColor",
-    "borderBottomEndRadius",
-    "borderBottomLeftRadius",
-    "borderBottomRightRadius",
-    "borderBottomStartRadius",
-    "borderBottomWidth",
-    "borderColor",
-    "borderEndColor",
-    "borderLeftColor",
-    "borderLeftWidth",
-    "borderRadius",
-    "borderRightColor",
-    "borderRightWidth",
-    "borderStartColor",
-    "borderStyle",
-    "borderTopColor",
-    "borderTopEndRadius",
-    "borderTopLeftRadius",
-    "borderTopRightRadius",
-    "borderTopStartRadius",
-    "borderTopWidth",
-    "borderWidth",
-];
-export const marginStyleNames = [
-    "margin",
-    "marginBottom",
-    "marginEnd",
-    "marginHorizontal",
-    "marginLeft",
-    "marginRight",
-    "marginStart",
-    "marginTop",
-    "marginVertical",
-];
-export function extractBorderAndMarginStyles(style, additionalBorderStyles, additionalMarginStyles) {
-    const flatStyle = StyleSheet.flatten(style || {});
-    const borderStyles = pickBy(pick(flatStyle, [
-        ...borderStyleNames,
-        ...(additionalBorderStyles ? additionalBorderStyles : []),
-    ]), identity);
-    const marginStyles = pickBy(pick(flatStyle, [
-        ...marginStyleNames,
-        ...(additionalMarginStyles ? additionalMarginStyles : []),
-    ]), identity);
-    return { borderStyles, marginStyles };
-}
 /**
  * Merges a style object on top of another style object. In React Native,
  * keys with undefined values in a style object will still override styles

package/src/utilities.ts

@@ -1,5 +1,5 @@
 import { StyleSheet, StyleProp, TextStyle } from "react-native";
-import { isString, isNumber, pick, pickBy, identity } from "lodash";
+import { isString, isNumber } from "lodash";
 
 export function extractStyles(style: StyleProp<any>) {
   const {
@@ -34,70 +34,6 @@ export function extractStyles(style: StyleProp<any>) {
   return { viewStyles, textStyles };
 }
 
-export const borderStyleNames = [
-  "borderRadius",
-  "borderBottomColor",
-  "borderBottomEndRadius",
-  "borderBottomLeftRadius",
-  "borderBottomRightRadius",
-  "borderBottomStartRadius",
-  "borderBottomWidth",
-  "borderColor",
-  "borderEndColor",
-  "borderLeftColor",
-  "borderLeftWidth",
-  "borderRadius",
-  "borderRightColor",
-  "borderRightWidth",
-  "borderStartColor",
-  "borderStyle",
-  "borderTopColor",
-  "borderTopEndRadius",
-  "borderTopLeftRadius",
-  "borderTopRightRadius",
-  "borderTopStartRadius",
-  "borderTopWidth",
-  "borderWidth",
-];
-
-export const marginStyleNames = [
-  "margin",
-  "marginBottom",
-  "marginEnd",
-  "marginHorizontal",
-  "marginLeft",
-  "marginRight",
-  "marginStart",
-  "marginTop",
-  "marginVertical",
-];
-
-export function extractBorderAndMarginStyles(
-  style: StyleProp<any>,
-  additionalBorderStyles?: string[],
-  additionalMarginStyles?: string[]
-) {
-  const flatStyle = StyleSheet.flatten(style || {});
-
-  const borderStyles = pickBy(
-    pick(flatStyle, [
-      ...borderStyleNames,
-      ...(additionalBorderStyles ? additionalBorderStyles : []),
-    ]),
-    identity
-  );
-
-  const marginStyles = pickBy(
-    pick(flatStyle, [
-      ...marginStyleNames,
-      ...(additionalMarginStyles ? additionalMarginStyles : []),
-    ]),
-    identity
-  );
-
-  return { borderStyles, marginStyles };
-}
-
 /**
  * Merges a style object on top of another style object. In React Native,
  * keys with undefined values in a style object will still override styles