@draftbit/core 44.1.13-c10e64.0 → 44.1.14

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

@@ -1,142 +1,89 @@
 import * as React from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, Dimensions } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import omit from "lodash.omit";
-
 import { Picker as NativePicker } from "@react-native-picker/picker";
 
-import { withTheme } from "../../theming";
-
+import type { IconSlot } from "../../interfaces/Icon";
 import Portal from "../Portal/Portal";
 import Button from "../DeprecatedButton";
-import TextField from "../TextField";
-import Touchable from "../Touchable";
-import { PickerComponentProps } from "./PickerTypes";
-import { extractStyles } from "../../utilities";
-import type { IconSlot } from "../../interfaces/Icon";
-
-const Picker: React.FC<PickerComponentProps & IconSlot> = ({
-  Icon,
-  style,
-  options,
-  placeholder,
-  selectedValue,
-  disabled = false,
-  onValueChange = () => {},
-  theme: { colors },
-  ...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);
-
-  const textField = React.useRef<typeof TextField | undefined>(undefined);
-  const [pickerVisible, setIsPickerVisible] = React.useState(false);
+import { PickerOption } from "./Picker";
 
-  const toggleVisibility = () => {
-    setIsPickerVisible(!pickerVisible);
-    // @ts-ignore
-    textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
-  };
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
 
-  const stylesWithoutMargin =
-    style &&
-    omit(StyleSheet.flatten(style), [
-      "margin",
-      "marginTop",
-      "marginRight",
-      "marginBottom",
-      "marginLeft",
-    ]);
-
-  const selectedLabel =
-    selectedValue &&
-    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
+interface PickerComponentProps {
+  Icon: IconSlot["Icon"];
+  androidPickerRef: React.RefObject<any>;
+  togglePickerVisible: () => void;
+  pickerOptions: PickerOption[];
+  internalValue: string | undefined;
+  handleValueChange: (newValue: string, itemIndex: number) => void;
+}
 
+export const PickerComponent: React.FC<PickerComponentProps> = ({
+  Icon,
+  togglePickerVisible,
+  pickerOptions,
+  internalValue,
+  handleValueChange,
+}) => {
   return (
-    <View style={[styles.container, viewStyles]}>
-      <Touchable disabled={disabled} onPress={toggleVisibility}>
-        <TextField
-          {...props}
-          value={String(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}
-          pointerEvents="none"
-          // @ts-expect-error
-          style={stylesWithoutMargin}
-          Icon={Icon}
-        />
-      </Touchable>
-      {pickerVisible && (
-        <Portal>
-          <View style={[styles.picker, { backgroundColor: colors.divider }]}>
-            <SafeAreaView style={styles.pickerContainer}>
-              <Button
-                Icon={Icon}
-                type="text"
-                onPress={toggleVisibility}
-                style={styles.closeButton}
-              >
-                Close
-              </Button>
-              <NativePicker
-                style={{ backgroundColor: "white" }}
-                selectedValue={selectedValue}
-                onValueChange={onValueChange}
-              >
-                {options.map((o: any) => (
-                  <NativePicker.Item
-                    label={o.label}
-                    value={o.value}
-                    key={o.value}
-                  />
-                ))}
-              </NativePicker>
-            </SafeAreaView>
-          </View>
-        </Portal>
-      )}
-    </View>
+    <Portal>
+      <View style={styles.iosPicker}>
+        <SafeAreaView style={styles.iosSafeArea}>
+          <Button
+            Icon={Icon}
+            type="text"
+            onPress={togglePickerVisible}
+            style={styles.iosButton}
+          >
+            {"Close"}
+          </Button>
+
+          <NativePicker
+            style={styles.iosNativePicker}
+            selectedValue={internalValue}
+            onValueChange={handleValueChange}
+          >
+            {(pickerOptions as unknown as PickerOption[]).map((option) => (
+              <NativePicker.Item
+                label={option.label}
+                value={option.value}
+                key={option.value}
+              />
+            ))}
+          </NativePicker>
+        </SafeAreaView>
+      </View>
+    </Portal>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    alignSelf: "stretch",
-  },
-  picker: {
+  iosPicker: {
     position: "absolute",
     bottom: 0,
     left: 0,
     right: 0,
     flexDirection: "row",
     justifyContent: "center",
+    width: deviceWidth, // TODO
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight,
+    backgroundColor: "green", // TODO
+    // backgroundColor: "rgba(255, 255, 255, 1)",
   },
-  pickerContainer: {
-    backgroundColor: "white",
+  iosSafeArea: {
+    backgroundColor: "yellow",
+    // backgroundColor: "white",// TODO
     flexDirection: "column",
-    width: "100%",
+    width: deviceWidth,
+    maxWidth: deviceWidth,
   },
-  closeButton: {
+  iosButton: {
     alignSelf: "flex-end",
   },
+  iosNativePicker: {
+    //backgroundColor: "white",// TODO
+    backgroundColor: "red",
+  },
 });
-
-export default withTheme(Picker);

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

@@ -1,117 +1,59 @@
 import * as React from "react";
-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 TextField from "../TextField";
-import Touchable from "../Touchable";
-import { PickerComponentProps } from "./PickerTypes";
-
-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 { StyleSheet, Dimensions } from "react-native";
 
-  const textField = React.useRef<typeof TextField | undefined>(undefined);
+import { Picker as NativePicker } from "@react-native-picker/picker";
 
-  const onValueChange = (itemValue: string, itemIndex: number) => {
-    toggleFocus();
-    onValueChangeOverride(itemValue, itemIndex);
-  };
+import type { IconSlot } from "../../interfaces/Icon";
 
-  const toggleFocus = () => {
-    if (!disabled) {
-      // @ts-ignore
-      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
-    }
-  };
+import { PickerOption } from "./Picker";
 
-  const stylesWithoutMargin =
-    style &&
-    omit(StyleSheet.flatten(style), [
-      "margin",
-      "marginTop",
-      "marginRight",
-      "marginBottom",
-      "marginLeft",
-    ]);
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
 
-  const selectedLabel =
-    selectedValue &&
-    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
+interface PickerComponentProps {
+  Icon: IconSlot["Icon"];
+  androidPickerRef: React.RefObject<any>;
+  togglePickerVisible: () => void;
+  pickerOptions: PickerOption[];
+  internalValue: string | undefined;
+  handleValueChange: (newValue: string, itemIndex: number) => void;
+}
 
+export const PickerComponent: React.FC<PickerComponentProps> = ({
+  androidPickerRef,
+  togglePickerVisible,
+  pickerOptions,
+  internalValue,
+  handleValueChange,
+}) => {
   return (
-    <Touchable
-      disabled={disabled}
-      onPress={toggleFocus}
-      style={[styles.container, viewStyles]}
+    <NativePicker
+      selectedValue={internalValue}
+      onValueChange={handleValueChange}
+      style={styles.nonIosPicker}
+      ref={androidPickerRef}
+      onBlur={togglePickerVisible}
     >
-      <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>
+      {(pickerOptions as unknown as PickerOption[]).map((option) => (
+        <NativePicker.Item
+          label={option.label}
+          value={option.value}
+          key={option.value}
+        />
+      ))}
+    </NativePicker>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    alignSelf: "stretch",
+  nonIosPicker: {
+    opacity: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    maxWidth: deviceWidth,
+    maxHeight: deviceHeight,
   },
 });
-
-export default withTheme(Picker);

package/src/mappings/Picker.ts

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

package/src/utilities.ts

@@ -1,5 +1,5 @@
 import { StyleSheet, StyleProp, TextStyle } from "react-native";
-import { isString, isNumber } from "lodash";
+import { isString, isNumber, pick, pickBy, identity } from "lodash";
 
 export function extractStyles(style: StyleProp<any>) {
   const {
@@ -34,6 +34,70 @@ 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

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

@@ -1,6 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=PickerTypes.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

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

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=PickerTypes.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/typescript/src/components/Picker/PickerTypes.d.ts

@@ -1,18 +0,0 @@
-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/Provider.js

@@ -1,9 +0,0 @@
-import * as React from "react";
-import { ThemeProvider } from "./theming";
-import PortalHost from "./components/Portal/PortalHost";
-export default class Provider extends React.Component {
-    render() {
-        return (React.createElement(PortalHost, null,
-            React.createElement(ThemeProvider, { theme: this.props.theme }, this.props.children)));
-    }
-}

package/src/components/Accordion/AccordionGroup.js

@@ -1,44 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Pressable, } from "react-native";
-import Text from "../Text";
-import { withTheme } from "../../theming";
-import { extractStyles } from "../../utilities";
-const AccordionGroup = ({ label, expanded: expandedProp = false, openColor, closedColor, caretColor: caretColorProp, caretSize = 24, icon, iconSize = 24, style, children, theme, Icon, }) => {
-    const [expanded, setExpanded] = React.useState(expandedProp);
-    const { textStyles, viewStyles } = extractStyles(style);
-    const expandedColor = openColor || theme.colors.primary;
-    const collapsedColor = closedColor || theme.colors.primary;
-    const labelColor = expanded ? expandedColor : collapsedColor;
-    const caretColor = caretColorProp || labelColor;
-    const handlePressAction = () => {
-        setExpanded(!expanded);
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Pressable, { style: [styles.row, viewStyles], onPress: handlePressAction, accessibilityRole: "button" },
-            icon ? (React.createElement(Icon, { name: icon, size: iconSize, color: labelColor, style: styles.icon })) : null,
-            React.createElement(View, { style: styles.content },
-                React.createElement(Text, { selectable: false, style: [
-                        textStyles,
-                        {
-                            color: labelColor,
-                        },
-                    ] }, label)),
-            React.createElement(Icon, { name: expanded
-                    ? "MaterialIcons/keyboard-arrow-up"
-                    : "MaterialIcons/keyboard-arrow-down", color: caretColor, size: caretSize })),
-        expanded ? children : null));
-};
-const styles = StyleSheet.create({
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-    },
-    content: {
-        flex: 1,
-        justifyContent: "center",
-    },
-    icon: {
-        marginRight: 8,
-    },
-});
-export default withTheme(AccordionGroup);

package/src/components/Accordion/AccordionItem.js

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { Pressable, StyleSheet, View, } from "react-native";
-import Text from "../Text";
-import { extractStyles } from "../../utilities";
-import { withTheme } from "../../theming";
-const AccordionItem = ({ Icon, icon, label, style, iconColor, theme, ...rest }) => {
-    const { textStyles, viewStyles } = extractStyles(style);
-    return (React.createElement(Pressable, { style: [styles.container, viewStyles], ...rest },
-        React.createElement(View, { style: styles.row },
-            icon ? (React.createElement(Icon, { name: icon, size: 24, color: iconColor || theme.colors.primary })) : null,
-            React.createElement(View, { style: [styles.item, styles.content] },
-                React.createElement(Text, { selectable: false, style: textStyles }, label)))));
-};
-const styles = StyleSheet.create({
-    container: {
-        padding: 8,
-    },
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingLeft: 8,
-    },
-    item: {
-        marginVertical: 6,
-        paddingLeft: 8,
-    },
-    content: {
-        flex: 1,
-        justifyContent: "center",
-    },
-});
-export default withTheme(AccordionItem);

package/src/components/Accordion/index.js

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

package/src/components/ActionSheet/ActionSheet.js

@@ -1,45 +0,0 @@
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import Portal from "../Portal/Portal";
-import Touchable from "../Touchable";
-import ActionSheetCancel from "./ActionSheetCancel";
-const ActionSheet = ({ visible = false, onClose, children }) => {
-    return visible ? (React.createElement(Portal, null,
-        React.createElement(Touchable, { style: styles.wrapper, onPress: onClose },
-            React.createElement(View, { style: styles.overlay }),
-            React.createElement(View, { style: styles.groupWrapper },
-                React.createElement(View, { style: styles.group }, React.Children.toArray(children).filter((child) => child?.type !== ActionSheetCancel)),
-                React.createElement(View, { style: styles.group }, React.Children.toArray(children).filter((child) => child.type === ActionSheetCancel)))))) : (React.createElement(React.Fragment, null));
-};
-const styles = StyleSheet.create({
-    wrapper: {
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-    },
-    overlay: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: "#000000",
-        opacity: 0.3,
-    },
-    groupWrapper: {
-        flex: 1,
-        flexDirection: "column",
-        justifyContent: "flex-end",
-        display: "flex",
-        marginBottom: 25,
-    },
-    group: {
-        display: "flex",
-        flexDirection: "column",
-        borderRadius: 10,
-        marginHorizontal: 7,
-        marginVertical: 2.5,
-        overflow: "hidden",
-    },
-});
-export default ActionSheet;

package/src/components/ActionSheet/ActionSheetCancel.js

@@ -1,6 +0,0 @@
-import React from "react";
-import ActionSheetItem from "./ActionSheetItem";
-const ActionSheetCancel = ({ label = "Cancel", color, style, onPress, }) => {
-    return (React.createElement(ActionSheetItem, { label: label, color: color || "#FF453A", style: [style], onPress: onPress }));
-};
-export default ActionSheetCancel;