@draftbit/core 46.1.1 → 46.1.4-e6469c.0

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

@@ -1,78 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet } 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 Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
-import TextField from "../TextField";
-import Touchable from "../Touchable";
-import { extractStyles } from "../../utilities";
-const Picker = ({ 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(undefined);
-    const [pickerVisible, setIsPickerVisible] = React.useState(false);
-    const toggleVisibility = () => {
-        setIsPickerVisible(!pickerVisible);
-        // @ts-ignore
-        textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
-    };
-    const stylesWithoutMargin = style &&
-        omit(StyleSheet.flatten(style), [
-            "margin",
-            "marginTop",
-            "marginRight",
-            "marginBottom",
-            "marginLeft",
-        ]);
-    const selectedLabel = selectedValue &&
-        (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
-    return (React.createElement(View, { style: [styles.container, viewStyles] },
-        React.createElement(Touchable, { disabled: disabled, onPress: toggleVisibility },
-            React.createElement(TextField, { ...props, value: String(selectedLabel), placeholder: placeholder, 
-                // @ts-ignore
-                ref: textField, disabled: disabled, pointerEvents: "none", 
-                // @ts-expect-error
-                style: stylesWithoutMargin, Icon: Icon })),
-        pickerVisible && (React.createElement(Portal, null,
-            React.createElement(View, { style: [styles.picker, { backgroundColor: colors.divider }] },
-                React.createElement(SafeAreaView, { style: styles.pickerContainer },
-                    React.createElement(Button, { Icon: Icon, type: "text", onPress: toggleVisibility, style: styles.closeButton }, "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 }))))))))));
-};
-const styles = StyleSheet.create({
-    container: {
-        alignSelf: "stretch",
-    },
-    picker: {
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        right: 0,
-        flexDirection: "row",
-        justifyContent: "center",
-    },
-    pickerContainer: {
-        backgroundColor: "white",
-        flexDirection: "column",
-        width: "100%",
-    },
-    closeButton: {
-        alignSelf: "flex-end",
-    },
-});
-export default withTheme(Picker);

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

@@ -1,142 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet } 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 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);
-
-  const toggleVisibility = () => {
-    setIsPickerVisible(!pickerVisible);
-    // @ts-ignore
-    textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
-  };
-
-  const stylesWithoutMargin =
-    style &&
-    omit(StyleSheet.flatten(style), [
-      "margin",
-      "marginTop",
-      "marginRight",
-      "marginBottom",
-      "marginLeft",
-    ]);
-
-  const selectedLabel =
-    selectedValue &&
-    (options.find((o) => o.value === selectedValue)?.label ?? selectedValue);
-
-  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>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    alignSelf: "stretch",
-  },
-  picker: {
-    position: "absolute",
-    bottom: 0,
-    left: 0,
-    right: 0,
-    flexDirection: "row",
-    justifyContent: "center",
-  },
-  pickerContainer: {
-    backgroundColor: "white",
-    flexDirection: "column",
-    width: "100%",
-  },
-  closeButton: {
-    alignSelf: "flex-end",
-  },
-});
-
-export default withTheme(Picker);

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

@@ -1,69 +0,0 @@
-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";
-const Picker = ({ 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);
-    const textField = React.useRef(undefined);
-    const onValueChange = (itemValue, itemIndex) => {
-        toggleFocus();
-        onValueChangeOverride(itemValue, itemIndex);
-    };
-    const toggleFocus = () => {
-        if (!disabled) {
-            // @ts-ignore
-            textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
-        }
-    };
-    const stylesWithoutMargin = style &&
-        omit(StyleSheet.flatten(style), [
-            "margin",
-            "marginTop",
-            "marginRight",
-            "marginBottom",
-            "marginLeft",
-        ]);
-    const selectedLabel = selectedValue &&
-        (options.find((o) => o.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: onValueChange, style: {
-                    flex: 1,
-                    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 })))),
-            React.createElement(View, { pointerEvents: "none" },
-                React.createElement(TextField, { ...props, value: selectedLabel, placeholder: placeholder, 
-                    // @ts-ignore
-                    ref: textField, disabled: disabled, 
-                    // @ts-expect-error
-                    style: stylesWithoutMargin })))));
-};
-const styles = StyleSheet.create({
-    container: {
-        alignSelf: "stretch",
-    },
-});
-export default withTheme(Picker);

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

@@ -1,117 +0,0 @@
-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);
-
-  const textField = React.useRef<typeof TextField | undefined>(undefined);
-
-  const onValueChange = (itemValue: string, itemIndex: number) => {
-    toggleFocus();
-    onValueChangeOverride(itemValue, itemIndex);
-  };
-
-  const toggleFocus = () => {
-    if (!disabled) {
-      // @ts-ignore
-      textField.current.toggleFocus(); // cannot determine if method exists due to component being wrapped in a withTheme()
-    }
-  };
-
-  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({
-  container: {
-    alignSelf: "stretch",
-  },
-});
-
-export default withTheme(Picker);

package/src/components/Picker/PickerTypes.js

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

package/src/components/Picker/PickerTypes.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;
-}