@draftbit/core 48.5.5-bc0b6e.2 → 48.5.6

package/src/components/PinInput/PinInput.tsx

@@ -1,172 +1,172 @@
-import React from "react";
-import {
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-  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;
-  focusedBackgroundColor?: string;
-  focusedBorderWidth?: number;
-  focusedTextColor?: string;
-  style?: StyleProp<ViewStyle | TextStyle>;
-  theme: Theme;
-}
-
-const PinInput = React.forwardRef<NativeTextInput, PinInputProps>(
-  (
-    {
-      theme,
-      onInputFull,
-      cellCount = 4,
-      clearOnCellFocus = true,
-      blurOnFull = true,
-      renderItem,
-      value,
-      onChangeText,
-      focusedBorderColor = theme.colors.primary,
-      focusedBackgroundColor,
-      focusedBorderWidth,
-      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]);
-
-    const renderCell = (
-      cellValue: string,
-      index: number,
-      isFocused: boolean
-    ) => {
-      const cell = renderItem?.({ cellValue, index, isFocused }) || (
-        <View
-          testID="default-code-input-cell"
-          style={[
-            styles.cell,
-            { borderColor: theme.colors.disabled },
-            viewStyles,
-            isFocused && focusedBorderWidth
-              ? { borderWidth: focusedBorderWidth }
-              : undefined,
-            isFocused && focusedBorderColor
-              ? { borderColor: focusedBorderColor }
-              : undefined,
-            isFocused && focusedBackgroundColor
-              ? { backgroundColor: focusedBackgroundColor }
-              : undefined,
-          ]}
-        >
-          <PinInputText
-            style={[
-              styles.cellText,
-              { color: theme.colors.strong },
-              textStyles,
-              isFocused && focusedTextColor
-                ? { color: focusedTextColor }
-                : undefined,
-            ]}
-            isFocused={isFocused}
-          >
-            {cellValue}
-          </PinInputText>
-        </View>
-      );
-
-      return React.cloneElement(cell, {
-        onLayout: clearOnCellFocus ? getCellOnLayout(index) : undefined,
-      });
-    };
-
-    return (
-      <CodeField
-        ref={pinInputRef}
-        {...(clearOnCellFocus ? codeFieldProps : {})}
-        value={value}
-        onChangeText={onChangeText}
-        rootStyle={styles.rootContainer}
-        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 }) => (
-          <React.Fragment key={index}>
-            {renderCell(cellValue, index, isFocused)}
-          </React.Fragment>
-        )}
-        {...rest}
-      />
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  rootContainer: {
-    justifyContent: "center",
-  },
-  cell: {
-    marginLeft: 5,
-    marginRight: 5,
-    padding: 5,
-    borderRadius: 5,
-    justifyContent: "center",
-    alignItems: "center",
-    aspectRatio: 1,
-    maxWidth: 70,
-    maxHeight: 70,
-    borderWidth: 1,
-    flex: 1,
-  },
-  cellText: {
-    fontSize: 25,
-  },
-});
-
-export default withTheme(PinInput);
+import React from "react";
+import {
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  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;
+  focusedBackgroundColor?: string;
+  focusedBorderWidth?: number;
+  focusedTextColor?: string;
+  style?: StyleProp<ViewStyle | TextStyle>;
+  theme: Theme;
+}
+
+const PinInput = React.forwardRef<NativeTextInput, PinInputProps>(
+  (
+    {
+      theme,
+      onInputFull,
+      cellCount = 4,
+      clearOnCellFocus = true,
+      blurOnFull = true,
+      renderItem,
+      value,
+      onChangeText,
+      focusedBorderColor = theme.colors.primary,
+      focusedBackgroundColor,
+      focusedBorderWidth,
+      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]);
+
+    const renderCell = (
+      cellValue: string,
+      index: number,
+      isFocused: boolean
+    ) => {
+      const cell = renderItem?.({ cellValue, index, isFocused }) || (
+        <View
+          testID="default-code-input-cell"
+          style={[
+            styles.cell,
+            { borderColor: theme.colors.disabled },
+            viewStyles,
+            isFocused && focusedBorderWidth
+              ? { borderWidth: focusedBorderWidth }
+              : undefined,
+            isFocused && focusedBorderColor
+              ? { borderColor: focusedBorderColor }
+              : undefined,
+            isFocused && focusedBackgroundColor
+              ? { backgroundColor: focusedBackgroundColor }
+              : undefined,
+          ]}
+        >
+          <PinInputText
+            style={[
+              styles.cellText,
+              { color: theme.colors.strong },
+              textStyles,
+              isFocused && focusedTextColor
+                ? { color: focusedTextColor }
+                : undefined,
+            ]}
+            isFocused={isFocused}
+          >
+            {cellValue}
+          </PinInputText>
+        </View>
+      );
+
+      return React.cloneElement(cell, {
+        onLayout: clearOnCellFocus ? getCellOnLayout(index) : undefined,
+      });
+    };
+
+    return (
+      <CodeField
+        ref={pinInputRef}
+        {...(clearOnCellFocus ? codeFieldProps : {})}
+        value={value}
+        onChangeText={onChangeText}
+        rootStyle={styles.rootContainer}
+        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 }) => (
+          <React.Fragment key={index}>
+            {renderCell(cellValue, index, isFocused)}
+          </React.Fragment>
+        )}
+        {...rest}
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  rootContainer: {
+    justifyContent: "center",
+  },
+  cell: {
+    marginLeft: 5,
+    marginRight: 5,
+    padding: 5,
+    borderRadius: 5,
+    justifyContent: "center",
+    alignItems: "center",
+    aspectRatio: 1,
+    maxWidth: 70,
+    maxHeight: 70,
+    borderWidth: 1,
+    flex: 1,
+  },
+  cellText: {
+    fontSize: 25,
+  },
+});
+
+export default withTheme(PinInput);

package/src/components/PinInput/PinInputText.tsx

@@ -1,37 +1,37 @@
-import React from "react";
-import { Text, TextProps } from "react-native";
-import type { Theme } from "../../styles/DefaultTheme";
-import { withTheme } from "../../theming";
-import { Cursor } from "react-native-confirmation-code-field";
-
-interface CustomPinInputTextProps extends TextProps {
-  cursorBlinkDuration?: number;
-  cursorText?: string;
-  isFocused?: boolean;
-  theme: Theme;
-}
-
-/**
- * Text component that can conditionally render a blinking cursor when focused and empty
- * Meant to be used within a CustomPinInputCell component
- */
-const CustomPinInputText: React.FC<CustomPinInputTextProps> = ({
-  isFocused,
-  cursorBlinkDuration,
-  cursorText,
-  style,
-  theme,
-  children,
-  ...rest
-}) => {
-  return (
-    <Text style={[{ color: theme.colors.strong }, style]} {...rest}>
-      {children ||
-        (isFocused ? (
-          <Cursor cursorSymbol={cursorText} delay={cursorBlinkDuration} />
-        ) : null)}
-    </Text>
-  );
-};
-
-export default withTheme(CustomPinInputText);
+import React from "react";
+import { Text, TextProps } from "react-native";
+import type { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+import { Cursor } from "react-native-confirmation-code-field";
+
+interface CustomPinInputTextProps extends TextProps {
+  cursorBlinkDuration?: number;
+  cursorText?: string;
+  isFocused?: boolean;
+  theme: Theme;
+}
+
+/**
+ * Text component that can conditionally render a blinking cursor when focused and empty
+ * Meant to be used within a CustomPinInputCell component
+ */
+const CustomPinInputText: React.FC<CustomPinInputTextProps> = ({
+  isFocused,
+  cursorBlinkDuration,
+  cursorText,
+  style,
+  theme,
+  children,
+  ...rest
+}) => {
+  return (
+    <Text style={[{ color: theme.colors.strong }, style]} {...rest}>
+      {children ||
+        (isFocused ? (
+          <Cursor cursorSymbol={cursorText} delay={cursorBlinkDuration} />
+        ) : null)}
+    </Text>
+  );
+};
+
+export default withTheme(CustomPinInputText);

package/src/components/PinInput/index.tsx

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

package/src/components/Portal/Portal.tsx

@@ -1,59 +1,59 @@
-import * as React from "react";
-import PortalConsumer from "./PortalConsumer";
-import PortalHost, { PortalContext, PortalMethods } from "./PortalHost";
-import { ThemeProvider, withTheme } from "../../theming";
-import type { Theme } from "../../styles/DefaultTheme";
-
-type Props = {
-  /**
-   * Content of the `Portal`.
-   */
-  children: React.ReactNode;
-  /**
-   * @optional
-   */
-  theme: Theme;
-};
-
-/**
- * Portal allows to render a component at a different place in the parent tree.
- * You can use it to render content which should appear above other elements, similar to `Modal`.
- * It requires a [`Portal.Host`](portal-host.html) component to be rendered somewhere in the parent tree.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Portal, Text } from 'react-native-paper';
- *
- * export default class MyComponent extends React.Component {
- *   render() {
- *     return (
- *       <Portal>
- *         <Text>This is rendered at a different place</Text>
- *       </Portal>
- *     );
- *   }
- * }
- * ```
- */
-class Portal extends React.Component<Props> {
-  // @component ./PortalHost.tsx
-  static Host = PortalHost;
-
-  render() {
-    const { children, theme } = this.props;
-
-    return (
-      <PortalContext.Consumer>
-        {(manager) => (
-          <PortalConsumer manager={manager as PortalMethods}>
-            {/* @ts-ignore */}
-            <ThemeProvider theme={theme}>{children}</ThemeProvider>
-          </PortalConsumer>
-        )}
-      </PortalContext.Consumer>
-    );
-  }
-}
-
-export default withTheme(Portal);
+import * as React from "react";
+import PortalConsumer from "./PortalConsumer";
+import PortalHost, { PortalContext, PortalMethods } from "./PortalHost";
+import { ThemeProvider, withTheme } from "../../theming";
+import type { Theme } from "../../styles/DefaultTheme";
+
+type Props = {
+  /**
+   * Content of the `Portal`.
+   */
+  children: React.ReactNode;
+  /**
+   * @optional
+   */
+  theme: Theme;
+};
+
+/**
+ * Portal allows to render a component at a different place in the parent tree.
+ * You can use it to render content which should appear above other elements, similar to `Modal`.
+ * It requires a [`Portal.Host`](portal-host.html) component to be rendered somewhere in the parent tree.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Portal, Text } from 'react-native-paper';
+ *
+ * export default class MyComponent extends React.Component {
+ *   render() {
+ *     return (
+ *       <Portal>
+ *         <Text>This is rendered at a different place</Text>
+ *       </Portal>
+ *     );
+ *   }
+ * }
+ * ```
+ */
+class Portal extends React.Component<Props> {
+  // @component ./PortalHost.tsx
+  static Host = PortalHost;
+
+  render() {
+    const { children, theme } = this.props;
+
+    return (
+      <PortalContext.Consumer>
+        {(manager) => (
+          <PortalConsumer manager={manager as PortalMethods}>
+            {/* @ts-ignore */}
+            <ThemeProvider theme={theme}>{children}</ThemeProvider>
+          </PortalConsumer>
+        )}
+      </PortalContext.Consumer>
+    );
+  }
+}
+
+export default withTheme(Portal);

package/src/components/Portal/PortalConsumer.tsx

@@ -1,46 +1,46 @@
-import * as React from "react";
-import { PortalMethods } from "./PortalHost";
-
-type Props = {
-  manager: PortalMethods;
-  children: React.ReactNode;
-};
-
-export default class PortalConsumer extends React.Component<Props> {
-  async componentDidMount() {
-    this.checkManager();
-
-    // Delay updating to prevent React from going to infinite loop
-    await Promise.resolve();
-
-    this.key = this.props.manager.mount(this.props.children);
-  }
-
-  componentDidUpdate() {
-    this.checkManager();
-
-    this.props.manager.update(this.key, this.props.children);
-  }
-
-  componentWillUnmount() {
-    this.checkManager();
-
-    this.props.manager.unmount(this.key);
-  }
-
-  private key: any;
-
-  private checkManager() {
-    if (!this.props.manager) {
-      throw new Error(
-        "Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.\n\n" +
-          "Please read our getting-started guide and make sure you've followed all the required steps.\n\n" +
-          "https://callstack.github.io/react-native-paper/getting-started.html"
-      );
-    }
-  }
-
-  render() {
-    return null;
-  }
-}
+import * as React from "react";
+import { PortalMethods } from "./PortalHost";
+
+type Props = {
+  manager: PortalMethods;
+  children: React.ReactNode;
+};
+
+export default class PortalConsumer extends React.Component<Props> {
+  async componentDidMount() {
+    this.checkManager();
+
+    // Delay updating to prevent React from going to infinite loop
+    await Promise.resolve();
+
+    this.key = this.props.manager.mount(this.props.children);
+  }
+
+  componentDidUpdate() {
+    this.checkManager();
+
+    this.props.manager.update(this.key, this.props.children);
+  }
+
+  componentWillUnmount() {
+    this.checkManager();
+
+    this.props.manager.unmount(this.key);
+  }
+
+  private key: any;
+
+  private checkManager() {
+    if (!this.props.manager) {
+      throw new Error(
+        "Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.\n\n" +
+          "Please read our getting-started guide and make sure you've followed all the required steps.\n\n" +
+          "https://callstack.github.io/react-native-paper/getting-started.html"
+      );
+    }
+  }
+
+  render() {
+    return null;
+  }
+}