@draftbit/core 48.4.5-c390a5.2 → 48.4.5-facee4.2

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/PinInput/CustomPinInputCell.js

@@ -1,11 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-/**
- * Simple View wrapper component to create a custom pin input cell
- * Meant to be used in PinInput's renderItem
- */
-const CustomPinInputCell = ({ style, children }) => {
-    return React.createElement(View, { style: style, children: children });
-};
-export default CustomPinInputCell;
-//# sourceMappingURL=CustomPinInputCell.js.map

package/src/components/PinInput/CustomPinInputCell.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomPinInputCell.js","sourceRoot":"","sources":["CustomPinInputCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAwB,IAAI,EAAE,MAAM,cAAc,CAAC;AAM1D;;;GAGG;AACH,MAAM,kBAAkB,GAEpB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1B,OAAO,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACpD,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/src/components/PinInput/CustomPinInputCell.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { StyleProp, ViewStyle, View } from "react-native";
-
-interface CustomPinInputCellProps {
-  style?: StyleProp<ViewStyle>;
-}
-
-/**
- * Simple View wrapper component to create a custom pin input cell
- * Meant to be used in PinInput's renderItem
- */
-const CustomPinInputCell: React.FC<
-  React.PropsWithChildren<CustomPinInputCellProps>
-> = ({ style, children }) => {
-  return <View style={style} children={children} />;
-};
-
-export default CustomPinInputCell;

package/src/components/PinInput/PinInput.js

@@ -1,70 +0,0 @@
-import React from "react";
-import { View, StyleSheet, } from "react-native";
-import TextInput from "../TextInput";
-import { CodeField, useClearByFocusCell, } from "react-native-confirmation-code-field";
-import { withTheme } from "../../theming";
-import PinInputText from "./PinInputText";
-import { extractStyles } from "../../utilities";
-const PinInput = React.forwardRef(({ theme, onInputFull, cellCount = 4, clearOnCellFocus = true, blurOnFull = true, renderItem, value, onChangeText, focusedBorderColor = theme.colors.primary, unFocusedBorderColor = theme.colors.disabled, focusedBackgroundColor, unFocusedBackgroundColor, focusedBorderWidth = 2, unFocusedBorderWidth = 1, focusedTextColor = theme.colors.strong, unFocusedTextColor = focusedTextColor, style, ...rest }, ref) => {
-    const newPinInputRef = React.useRef(null);
-    // Use the provided ref or default to new ref when not provided
-    const pinInputRef = ref
-        ? ref
-        : newPinInputRef;
-    const { viewStyles, textStyles } = extractStyles(style);
-    // Clears input of a cell when focused, configured as explained here (https://github.com/retyui/react-native-confirmation-code-field/blob/master/API.md#useclearbyfocuscellvalue-string-setvalue-text-string--void)
-    const [codeFieldProps, getCellOnLayout] = useClearByFocusCell({
-        value,
-        setValue: (text) => onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text),
-    });
-    React.useEffect(() => {
-        var _a;
-        if ((value === null || value === void 0 ? void 0 : value.length) === cellCount) {
-            if (blurOnFull) {
-                (_a = pinInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-            }
-            onInputFull === null || onInputFull === void 0 ? void 0 : onInputFull(value);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value, cellCount, blurOnFull, pinInputRef]);
-    return (React.createElement(CodeField, { ref: pinInputRef, ...(clearOnCellFocus ? codeFieldProps : {}), value: value, onChangeText: onChangeText, textInputStyle: { height: "100%" }, InputComponent: TextInput, cellCount: cellCount, renderCell: ({ symbol: cellValue, index, isFocused }) => (React.createElement(View, { key: index, onLayout: clearOnCellFocus ? getCellOnLayout(index) : undefined, style: { flex: 1 } }, (renderItem === null || renderItem === void 0 ? void 0 : renderItem({ cellValue, index, isFocused })) || (React.createElement(View, { testID: "default-code-input-cell", style: [
-                styles.cell,
-                {
-                    borderWidth: isFocused
-                        ? focusedBorderWidth
-                        : unFocusedBorderWidth,
-                    borderColor: isFocused
-                        ? focusedBorderColor
-                        : unFocusedBorderColor,
-                    backgroundColor: isFocused
-                        ? focusedBackgroundColor
-                        : unFocusedBackgroundColor,
-                },
-                viewStyles,
-            ] },
-            React.createElement(PinInputText, { style: [
-                    styles.cellText,
-                    {
-                        color: isFocused ? focusedTextColor : unFocusedTextColor,
-                    },
-                    textStyles,
-                ], isFocused: isFocused }, cellValue))))), ...rest }));
-});
-const styles = StyleSheet.create({
-    cell: {
-        marginStart: 5,
-        marginEnd: 5,
-        padding: 5,
-        borderRadius: 5,
-        justifyContent: "center",
-        alignItems: "center",
-        aspectRatio: 1,
-        maxWidth: 70,
-        maxHeight: 70,
-    },
-    cellText: {
-        fontSize: 25,
-    },
-});
-export default withTheme(PinInput);
-//# sourceMappingURL=PinInput.js.map

package/src/components/PinInput/PinInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PinInput.js","sourceRoot":"","sources":["PinInput.tsx"],"names":[],"mappings":"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"}

package/src/components/PinInput/PinInput.tsx

@@ -1,165 +0,0 @@
-import React from "react";
-import {
-  StyleProp,
-  ViewStyle,
-  TextInput as NativeTextInput,
-  View,
-  StyleSheet,
-} from "react-native";
-import TextInput, { TextInputProps } from "../TextInput";
-import {
-  CodeField,
-  useClearByFocusCell,
-} from "react-native-confirmation-code-field";
-import type { Theme } from "../../styles/DefaultTheme";
-import { withTheme } from "../../theming";
-import PinInputText from "./PinInputText";
-import { extractStyles } from "../../utilities";
-
-interface CellItem {
-  cellValue: string;
-  index: number;
-  isFocused: boolean;
-}
-
-interface PinInputProps extends TextInputProps {
-  onInputFull?: (value: string) => void;
-  cellCount?: number;
-  clearOnCellFocus?: boolean;
-  blurOnFull?: boolean;
-  renderItem?: ({ cellValue, index, isFocused }: CellItem) => JSX.Element;
-  focusedBorderColor?: string;
-  unFocusedBorderColor?: string;
-  focusedBackgroundColor?: string;
-  unFocusedBackgroundColor?: string;
-  focusedBorderWidth?: number;
-  unFocusedBorderWidth?: number;
-  focusedTextColor?: string;
-  unFocusedTextColor?: string;
-  style?: StyleProp<ViewStyle>;
-  theme: Theme;
-}
-
-const PinInput = React.forwardRef<NativeTextInput, PinInputProps>(
-  (
-    {
-      theme,
-      onInputFull,
-      cellCount = 4,
-      clearOnCellFocus = true,
-      blurOnFull = true,
-      renderItem,
-      value,
-      onChangeText,
-      focusedBorderColor = theme.colors.primary,
-      unFocusedBorderColor = theme.colors.disabled,
-      focusedBackgroundColor,
-      unFocusedBackgroundColor,
-      focusedBorderWidth = 2,
-      unFocusedBorderWidth = 1,
-      focusedTextColor = theme.colors.strong,
-      unFocusedTextColor = focusedTextColor,
-      style,
-      ...rest
-    },
-    ref
-  ) => {
-    const newPinInputRef = React.useRef<NativeTextInput>(null);
-
-    // Use the provided ref or default to new ref when not provided
-    const pinInputRef = ref
-      ? (ref as React.RefObject<NativeTextInput>)
-      : newPinInputRef;
-
-    const { viewStyles, textStyles } = extractStyles(style);
-
-    // Clears input of a cell when focused, configured as explained here (https://github.com/retyui/react-native-confirmation-code-field/blob/master/API.md#useclearbyfocuscellvalue-string-setvalue-text-string--void)
-    const [codeFieldProps, getCellOnLayout] = useClearByFocusCell({
-      value,
-      setValue: (text) => onChangeText?.(text),
-    });
-
-    React.useEffect(() => {
-      if (value?.length === cellCount) {
-        if (blurOnFull) {
-          pinInputRef.current?.blur();
-        }
-        onInputFull?.(value);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value, cellCount, blurOnFull, pinInputRef]);
-
-    return (
-      <CodeField
-        ref={pinInputRef}
-        {...(clearOnCellFocus ? codeFieldProps : {})}
-        value={value}
-        onChangeText={onChangeText}
-        textInputStyle={{ height: "100%" }} // addresses issue on firefox where the hidden input did not fill the height
-        InputComponent={TextInput}
-        cellCount={cellCount}
-        renderCell={({ symbol: cellValue, index, isFocused }) => (
-          <View
-            key={index}
-            onLayout={clearOnCellFocus ? getCellOnLayout(index) : undefined}
-            style={{ flex: 1 }}
-          >
-            {renderItem?.({ cellValue, index, isFocused }) || (
-              <View
-                testID="default-code-input-cell"
-                style={[
-                  styles.cell,
-                  {
-                    borderWidth: isFocused
-                      ? focusedBorderWidth
-                      : unFocusedBorderWidth,
-                    borderColor: isFocused
-                      ? focusedBorderColor
-                      : unFocusedBorderColor,
-                    backgroundColor: isFocused
-                      ? focusedBackgroundColor
-                      : unFocusedBackgroundColor,
-                  },
-                  viewStyles,
-                ]}
-              >
-                <PinInputText
-                  style={[
-                    styles.cellText,
-                    {
-                      color: isFocused ? focusedTextColor : unFocusedTextColor,
-                    },
-                    textStyles,
-                  ]}
-                  isFocused={isFocused}
-                >
-                  {cellValue}
-                </PinInputText>
-              </View>
-            )}
-          </View>
-        )}
-        {...rest}
-      />
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  cell: {
-    marginStart: 5,
-    marginEnd: 5,
-    padding: 5,
-    borderRadius: 5,
-    justifyContent: "center",
-    alignItems: "center",
-    aspectRatio: 1,
-    maxWidth: 70,
-    maxHeight: 70,
-  },
-  cellText: {
-    fontSize: 25,
-  },
-});
-
-export default withTheme(PinInput);

package/src/components/PinInput/PinInputText.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PinInputText.js","sourceRoot":"","sources":["PinInputText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAa,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAS9D;;;GAGG;AACH,MAAM,kBAAkB,GAAsC,CAAC,EAC7D,SAAS,EACT,mBAAmB,EACnB,UAAU,EACV,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,KAAM,IAAI,IAC3D,QAAQ;QACP,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,oBAAC,MAAM,IAAC,YAAY,EAAE,UAAU,EAAE,KAAK,EAAE,mBAAmB,GAAI,CACjE,CAAC,CAAC,CAAC,IAAI,CAAC,CACN,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC,kBAAkB,CAAC,CAAC"}

package/src/components/PinInput/index.js

@@ -1,4 +0,0 @@
-export { default as PinInput } from "./PinInput";
-export { default as CustomPinInputCell } from "./CustomPinInputCell";
-export { default as PinInputText } from "./PinInputText";
-//# sourceMappingURL=index.js.map

package/src/components/PinInput/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/src/components/PinInput/index.tsx

@@ -1,3 +0,0 @@
-export { default as PinInput } from "./PinInput";
-export { default as CustomPinInputCell } from "./CustomPinInputCell";
-export { default as PinInputText } from "./PinInputText";