@draftbit/core 44.1.13-3bb0d0.0 → 44.1.13-6f194c.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "44.1.13-3bb0d0.0+3bb0d029",
+  "version": "44.1.13-6f194c.0+6f194c98",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -79,5 +79,5 @@
       ]
     ]
   },
-  "gitHead": "3bb0d029d265ed4339e70a2383aa91beb5c2b1bf"
+  "gitHead": "6f194c9891a5370de170060fbc0a190e14060825"
 }

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

@@ -1,20 +1,18 @@
 import * as React from "react";
-import { StyleSheet, Dimensions } from "react-native";
-import { Picker as NativePicker } from "@react-native-picker/picker";
-const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
-export const PickerComponent = ({ androidPickerRef, togglePickerVisible, pickerOptions, internalValue, handleValueChange, }) => {
-    return (React.createElement(NativePicker, { selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: togglePickerVisible }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))));
+import { /* StyleSheet, Dimensions, View, */ Text } from "react-native";
+export const PickerComponent = () => {
+    return React.createElement(Text, null, "android");
 };
-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({
+//   nonIosPicker: {
+//     opacity: 0,
+//     position: "absolute",
+//     top: 0,
+//     left: 0,
+//     right: 0,
+//     bottom: 0,
+//     width: "100%",
+//     maxWidth: deviceWidth,
+//     maxHeight: deviceHeight,
+//   },
+// });

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

@@ -1,13 +1,13 @@
 import * as React from "react";
-import { StyleSheet, Dimensions } from "react-native";
+import { /* StyleSheet, Dimensions, View, */ Text } from "react-native";
 
-import { Picker as NativePicker } from "@react-native-picker/picker";
+// import { Picker as NativePicker } from "@react-native-picker/picker";
 
 import type { IconSlot } from "../../interfaces/Icon";
 
 import { PickerOption } from "./Picker";
 
-const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+// const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
 
 interface PickerComponentProps {
   Icon: IconSlot["Icon"];
@@ -18,42 +18,20 @@ interface PickerComponentProps {
   handleValueChange: (newValue: string, itemIndex: number) => void;
 }
 
-export const PickerComponent: React.FC<PickerComponentProps> = ({
-  androidPickerRef,
-  togglePickerVisible,
-  pickerOptions,
-  internalValue,
-  handleValueChange,
-}) => {
-  return (
-    <NativePicker
-      selectedValue={internalValue}
-      onValueChange={handleValueChange}
-      style={styles.nonIosPicker}
-      ref={androidPickerRef}
-      onBlur={togglePickerVisible}
-    >
-      {(pickerOptions as unknown as PickerOption[]).map((option) => (
-        <NativePicker.Item
-          label={option.label}
-          value={option.value}
-          key={option.value}
-        />
-      ))}
-    </NativePicker>
-  );
+export const PickerComponent: React.FC<PickerComponentProps> = () => {
+  return <Text>android</Text>;
 };
 
-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({
+//   nonIosPicker: {
+//     opacity: 0,
+//     position: "absolute",
+//     top: 0,
+//     left: 0,
+//     right: 0,
+//     bottom: 0,
+//     width: "100%",
+//     maxWidth: deviceWidth,
+//     maxHeight: deviceHeight,
+//   },
+// });

package/src/components/Picker/PickerComponent.js

@@ -0,0 +1,185 @@
+import * as React from "react";
+import { View, /* StyleSheet, */ Text, Platform } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { omit, pick, pickBy, identity } from "lodash";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+import { withTheme } from "../../theming";
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+import Touchable from "../Touchable";
+import { extractStyles } from "../../utilities";
+const Picker = ({ Icon, style, options = [], placeholder = "", value: selectedValue = "", disabled = false, onValueChange = () => { }, theme, assistiveText, label, leftIconMode = "inset", leftIconName, placeholderTextColor, rightIconName, type, }) => {
+    const [pickerVisible, setIsPickerVisible] = React.useState(false);
+    const { viewStyles, textStyles } = extractStyles(style);
+    const { colors } = theme;
+    console.log({
+    // viewStyles,
+    // textStyles,
+    // options,
+    // placeholder,
+    // selectedValue,
+    // theme,
+    // disabled,
+    // onValueChange,
+    // colors,
+    // assistiveText,
+    // label,
+    // leftIconMode,
+    // leftIconName,
+    // placeholderTextColor,
+    // rightIconName,
+    // type,
+    });
+    const borders = [
+        "borderRadius",
+        "borderTopLeftRadius",
+        "borderTopRightRadius",
+        "borderBottomRightRadius",
+        "borderBottomLeftRadius",
+        "borderTopWidth",
+        "borderRightWidth",
+        "borderBottomWidth",
+        "borderLeftWidth",
+        "borderColor",
+        "borderStyle",
+    ];
+    const borderStyles = {
+        ...{
+            ...(type === "solid"
+                ? {
+                    borderTopLeftRadius: 5,
+                    borderTopRightRadius: 5,
+                    borderBottomRightRadius: 5,
+                    borderBottomLeftRadius: 5,
+                    borderTopWidth: 1,
+                    borderRightWidth: 1,
+                    borderLeftWidth: 1,
+                }
+                : {}),
+            borderBottomWidth: 1,
+            borderColor: colors.light,
+            borderStyle: "solid",
+        },
+        ...pick(viewStyles, borders),
+    };
+    const margins = ["marginLeft", "marginRight", "marginTop", "marginBottom"];
+    const marginStyles = pick(viewStyles, margins);
+    const stylesWithoutBordersAndMargins = {
+        ...{
+            height: 60,
+            width: "100%",
+        },
+        ...omit(viewStyles, [...borders, ...margins]),
+    };
+    const selectedLabel = selectedValue &&
+        (options.find((o) => o.value === selectedValue)?.label ??
+            selectedValue);
+    const labelText = label ? (React.createElement(Text, { style: {
+            textAlign: textStyles.textAlign,
+            color: colors.light,
+            fontSize: 12,
+            paddingBottom: 4,
+        } }, label)) : null;
+    const leftIconOutset = leftIconMode === "outset";
+    const leftIcon = leftIconName ? (React.createElement(Icon, { name: leftIconName, size: 24, style: {
+            marginRight: 8,
+            marginLeft: -6,
+        } })) : null;
+    const rightIcon = rightIconName ? (React.createElement(Icon, { name: rightIconName, size: 24, style: {
+            marginRight: -6,
+            marginLeft: 8,
+        } })) : null;
+    // @ts-ignore
+    const width = stylesWithoutBordersAndMargins?.width ?? undefined;
+    const textAlign = textStyles?.textAlign;
+    const paddingLeft = leftIconOutset &&
+        (!textAlign || textAlign === "left" || textAlign === "justify")
+        ? 28 // icon size + 4
+        : 0;
+    const assistiveTextLabel = assistiveText ? (React.createElement(Text, { style: {
+            textAlign,
+            width,
+            paddingLeft,
+            color: colors.light,
+            fontSize: 12,
+            paddingTop: 4,
+        } }, assistiveText)) : null;
+    const primaryTextStyle = {
+        color: colors.light,
+        fontSize: 14,
+        ...pickBy(textStyles, identity),
+        ...(placeholder === selectedValue
+            ? { color: placeholderTextColor ?? colors.light }
+            : {}),
+    };
+    const toggleVisibility = () => setIsPickerVisible(!pickerVisible);
+    return (React.createElement(View, { style: [
+            {
+                alignSelf: "stretch",
+            },
+            marginStyles,
+        ] },
+        React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility, style: { alignSelf: "stretch", alignItems: "center" } },
+            React.createElement(View, { pointerEvents: "none", style: [
+                    {
+                        //alignSelf: "stretch",
+                        flexDirection: "row",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                    },
+                    stylesWithoutBordersAndMargins,
+                    // @ts-ignore
+                    !leftIconOutset && borderStyles,
+                ] },
+                leftIcon,
+                React.createElement(View, { style: [
+                        {
+                            flex: 1,
+                            height: "100%",
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            paddingLeft: 12,
+                            paddingRight: 12,
+                        },
+                        // @ts-ignore
+                        leftIconOutset && borderStyles,
+                    ] },
+                    React.createElement(View, { style: {
+                            flex: 1,
+                            // paddingTop: 0,
+                            // paddingRight: 0, // add inner text paddding settings
+                            // paddingLeft: 0,
+                            // paddingBottom: 0,
+                        } },
+                        labelText,
+                        React.createElement(Text, { style: primaryTextStyle }, String(selectedLabel ?? placeholder))),
+                    rightIcon)),
+            assistiveTextLabel),
+        Platform.OS === "ios" && pickerVisible ? (React.createElement(Portal, null,
+            React.createElement(View, { style: {
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    flexDirection: "row",
+                    justifyContent: "center",
+                    backgroundColor: colors.divider,
+                } },
+                React.createElement(SafeAreaView, { style: {
+                        backgroundColor: "white",
+                        flexDirection: "column",
+                        width: "100%",
+                    } },
+                    React.createElement(Button, { Icon: Icon, type: "text", onPress: toggleVisibility, style: { alignSelf: "flex-end" } }, "Close"),
+                    React.createElement(NativePicker, { style: { backgroundColor: "white" }, selectedValue: selectedValue, onValueChange: onValueChange }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))))))) : (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: selectedValue, onValueChange: onValueChange, style: {
+                opacity: 0,
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                width: "100%",
+            } }, options.map((o) => (React.createElement(NativePicker.Item, { label: o.label, value: o.value, key: o.value })))))));
+};
+export default withTheme(Picker);

package/src/components/Picker/PickerComponent.tsx

@@ -0,0 +1,321 @@
+import * as React from "react";
+import { View, /* StyleSheet, */ Text, Platform } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { omit, pick, pickBy, identity } from "lodash";
+import { Picker as NativePicker } from "@react-native-picker/picker";
+
+import { withTheme } from "../../theming";
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+import Touchable from "../Touchable";
+import { PickerProps, PickerOption } from "./Picker";
+import { extractStyles } from "../../utilities";
+import type { IconSlot } from "../../interfaces/Icon";
+import type { Theme } from "../../styles/DefaultTheme";
+
+const Picker: React.FC<PickerProps & IconSlot & Theme> = ({
+  Icon,
+  style,
+  options = [],
+  placeholder = "",
+  value: selectedValue = "",
+  disabled = false,
+  onValueChange = () => {},
+  theme,
+  assistiveText,
+  label,
+  leftIconMode = "inset",
+  leftIconName,
+  placeholderTextColor,
+  rightIconName,
+  type,
+}) => {
+  const [pickerVisible, setIsPickerVisible] = React.useState(false);
+
+  const { viewStyles, textStyles } = extractStyles(style);
+
+  const { colors } = theme;
+
+  console.log({
+    // viewStyles,
+    // textStyles,
+    // options,
+    // placeholder,
+    // selectedValue,
+    // theme,
+    // disabled,
+    // onValueChange,
+    // colors,
+    // assistiveText,
+    // label,
+    // leftIconMode,
+    // leftIconName,
+    // placeholderTextColor,
+    // rightIconName,
+    // type,
+  });
+
+  const borders = [
+    "borderRadius",
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "borderColor",
+    "borderStyle",
+  ];
+
+  const borderStyles = {
+    ...{
+      ...(type === "solid"
+        ? {
+            borderTopLeftRadius: 5,
+            borderTopRightRadius: 5,
+            borderBottomRightRadius: 5,
+            borderBottomLeftRadius: 5,
+            borderTopWidth: 1,
+            borderRightWidth: 1,
+            borderLeftWidth: 1,
+          }
+        : {}),
+      borderBottomWidth: 1,
+      borderColor: colors.light,
+      borderStyle: "solid",
+    },
+    ...pick(viewStyles, borders),
+  };
+
+  const margins = ["marginLeft", "marginRight", "marginTop", "marginBottom"];
+
+  const marginStyles = pick(viewStyles, margins);
+
+  const stylesWithoutBordersAndMargins = {
+    ...{
+      height: 60,
+      width: "100%",
+    },
+    ...omit(viewStyles, [...borders, ...margins]),
+  };
+
+  const selectedLabel =
+    selectedValue &&
+    ((options as unknown as PickerOption[]).find(
+      (o) => o.value === selectedValue
+    )?.label ??
+      selectedValue);
+
+  const labelText = label ? (
+    <Text
+      style={{
+        textAlign: textStyles.textAlign,
+        color: colors.light,
+        fontSize: 12,
+        paddingBottom: 4,
+      }}
+    >
+      {label}
+    </Text>
+  ) : null;
+
+  const leftIconOutset = leftIconMode === "outset";
+
+  const leftIcon = leftIconName ? (
+    <Icon
+      name={leftIconName}
+      size={24}
+      style={{
+        marginRight: 8,
+        marginLeft: -6,
+      }}
+    />
+  ) : null;
+
+  const rightIcon = rightIconName ? (
+    <Icon
+      name={rightIconName}
+      size={24}
+      style={{
+        marginRight: -6,
+        marginLeft: 8,
+      }}
+    />
+  ) : null;
+
+  // @ts-ignore
+  const width = stylesWithoutBordersAndMargins?.width ?? undefined;
+
+  const textAlign = textStyles?.textAlign;
+
+  const paddingLeft =
+    leftIconOutset &&
+    (!textAlign || textAlign === "left" || textAlign === "justify")
+      ? 28 // icon size + 4
+      : 0;
+
+  const assistiveTextLabel = assistiveText ? (
+    <Text
+      style={{
+        textAlign,
+        width,
+        paddingLeft,
+        color: colors.light,
+        fontSize: 12,
+        paddingTop: 4,
+      }}
+    >
+      {assistiveText}
+    </Text>
+  ) : null;
+
+  const primaryTextStyle = {
+    color: colors.light,
+    fontSize: 14,
+    ...pickBy(textStyles, identity),
+    ...(placeholder === selectedValue
+      ? { color: placeholderTextColor ?? colors.light }
+      : {}),
+  };
+
+  const toggleVisibility = () => setIsPickerVisible(!pickerVisible);
+
+  return (
+    <View
+      style={[
+        {
+          alignSelf: "stretch",
+        },
+        marginStyles,
+      ]}
+    >
+      <Touchable
+        disabled={disabled}
+        onPress={toggleVisibility}
+        style={{ alignSelf: "stretch", alignItems: "center" }}
+      >
+        <View
+          pointerEvents="none"
+          style={[
+            {
+              //alignSelf: "stretch",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+            },
+            stylesWithoutBordersAndMargins,
+            // @ts-ignore
+            !leftIconOutset && borderStyles,
+          ]}
+        >
+          {leftIcon}
+
+          <View
+            style={[
+              {
+                flex: 1,
+                height: "100%",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                paddingLeft: 12,
+                paddingRight: 12,
+              },
+              // @ts-ignore
+              leftIconOutset && borderStyles,
+            ]}
+          >
+            <View
+              style={{
+                flex: 1,
+                // paddingTop: 0,
+                // paddingRight: 0, // add inner text paddding settings
+                // paddingLeft: 0,
+                // paddingBottom: 0,
+              }}
+            >
+              {labelText}
+
+              <Text style={primaryTextStyle}>
+                {String(selectedLabel ?? placeholder)}
+              </Text>
+            </View>
+
+            {rightIcon}
+          </View>
+        </View>
+        {assistiveTextLabel}
+      </Touchable>
+
+      {Platform.OS === "ios" && pickerVisible ? (
+        <Portal>
+          <View
+            style={{
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              flexDirection: "row",
+              justifyContent: "center",
+              backgroundColor: colors.divider,
+            }}
+          >
+            <SafeAreaView
+              style={{
+                backgroundColor: "white",
+                flexDirection: "column",
+                width: "100%",
+              }}
+            >
+              <Button
+                Icon={Icon}
+                type="text"
+                onPress={toggleVisibility}
+                style={{ alignSelf: "flex-end" }}
+              >
+                {"Close"}
+              </Button>
+
+              <NativePicker
+                style={{ backgroundColor: "white" }}
+                selectedValue={selectedValue}
+                onValueChange={onValueChange}
+              >
+                {(options as unknown as PickerOption[]).map((o) => (
+                  <NativePicker.Item
+                    label={o.label}
+                    value={o.value}
+                    key={o.value}
+                  />
+                ))}
+              </NativePicker>
+            </SafeAreaView>
+          </View>
+        </Portal>
+      ) : (
+        <NativePicker
+          enabled={pickerVisible}
+          selectedValue={selectedValue}
+          onValueChange={onValueChange}
+          style={{
+            opacity: 0,
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: "100%",
+          }}
+        >
+          {(options as unknown as PickerOption[]).map((o) => (
+            <NativePicker.Item label={o.label} value={o.value} key={o.value} />
+          ))}
+        </NativePicker>
+      )}
+    </View>
+  );
+};
+
+export default withTheme(Picker);

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

@@ -1,20 +1,18 @@
 import * as React from "react";
-import { StyleSheet, Dimensions } from "react-native";
-import { Picker as NativePicker } from "@react-native-picker/picker";
-const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
-export const PickerComponent = ({ androidPickerRef, togglePickerVisible, pickerOptions, internalValue, handleValueChange, }) => {
-    return (React.createElement(NativePicker, { selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: togglePickerVisible }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))));
+import { /* StyleSheet, Dimensions,  */ Text } from "react-native";
+export const PickerComponent = () => {
+    return React.createElement(Text, null, "web");
 };
-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({
+//   nonIosPicker: {
+//     opacity: 0,
+//     position: "absolute",
+//     top: 0,
+//     left: 0,
+//     right: 0,
+//     bottom: 0,
+//     width: "100%",
+//     maxWidth: deviceWidth,
+//     maxHeight: deviceHeight,
+//   },
+// });