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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "48.4.5-c390a5.2+c390a53",
+  "version": "48.4.5-facee4.2+facee4b",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^48.4.5-c390a5.2+c390a53",
+    "@draftbit/types": "^48.4.5-facee4.2+facee4b",
     "@expo/vector-icons": "^13.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
@@ -100,5 +100,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "c390a53dc2d9236a2a7674a51589d0fb17c46733"
+  "gitHead": "facee4b47d7507fb356f4d58b407a8f0bb25d783"
 }

package/src/components/CodeInput/CodeInput.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { View, } from "react-native";
+import TextInput from "../TextInput";
+import { CodeField, useClearByFocusCell, } from "react-native-confirmation-code-field";
+import { DefaultCodeInputCell } from "./CodeInputCell";
+const CodeInput = React.forwardRef(({ onInputFull, cellCount = 4, clearOnCellFocus = true, blurOnFull = true, renderItem, value, onChangeText, style, ...rest }, ref) => {
+    const newCodeInputRef = React.useRef(null);
+    // Use the provided ref or default to new ref when not provided
+    const codeInputRef = ref
+        ? ref
+        : newCodeInputRef;
+    // 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 = codeInputRef.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, codeInputRef]);
+    return (React.createElement(CodeField, { ref: codeInputRef, ...(clearOnCellFocus ? codeFieldProps : {}), value: value, onChangeText: onChangeText, rootStyle: style, textInputStyle: { height: "100%" }, InputComponent: TextInput, cellCount: cellCount, renderCell: ({ symbol, index, isFocused }) => (React.createElement(View, { key: index, onLayout: clearOnCellFocus ? getCellOnLayout(index) : undefined, style: { flex: 1 } }, (renderItem === null || renderItem === void 0 ? void 0 : renderItem({ cellValue: symbol, index, isFocused })) || (React.createElement(DefaultCodeInputCell, { cellValue: symbol, isFocused: isFocused })))), ...rest }));
+});
+export default CodeInput;
+//# sourceMappingURL=CodeInput.js.map

package/src/components/CodeInput/CodeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.js","sourceRoot":"","sources":["CodeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,IAAI,GACL,MAAM,cAAc,CAAC;AACtB,OAAO,SAA6B,MAAM,cAAc,CAAC;AACzD,OAAO,EACL,SAAS,EACT,mBAAmB,GACpB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAiBvD,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAChC,CACE,EACE,WAAW,EACX,SAAS,GAAG,CAAC,EACb,gBAAgB,GAAG,IAAI,EACvB,UAAU,GAAG,IAAI,EACjB,UAAU,EACV,KAAK,EACL,YAAY,EACZ,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;IAE5D,+DAA+D;IAC/D,MAAM,YAAY,GAAG,GAAG;QACtB,CAAC,CAAE,GAAwC;QAC3C,CAAC,CAAC,eAAe,CAAC;IAEpB,mNAAmN;IACnN,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,mBAAmB,CAAC;QAC5D,KAAK;QACL,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,IAAI,CAAC;KACzC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACnB,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,MAAK,SAAS,EAAE;YAC/B,IAAI,UAAU,EAAE;gBACd,MAAA,YAAY,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAC;aAC9B;YACD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,KAAK,CAAC,CAAC;SACtB;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjD,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,YAAY,KACb,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,EAC5C,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,KAAK,EAChB,cAAc,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAClC,cAAc,EAAE,SAAS,EACzB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC5C,oBAAC,IAAI,IACH,GAAG,EAAE,KAAK,EACV,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAC/D,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,IAEjB,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,KAAI,CACxD,oBAAC,oBAAoB,IAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAI,CAClE,CACI,CACR,KACG,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/src/components/CodeInput/CodeInput.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import {
+  StyleProp,
+  ViewStyle,
+  TextInput as NativeTextInput,
+  View,
+} from "react-native";
+import TextInput, { TextInputProps } from "../TextInput";
+import {
+  CodeField,
+  useClearByFocusCell,
+} from "react-native-confirmation-code-field";
+import { DefaultCodeInputCell } from "./CodeInputCell";
+
+interface CellItem {
+  cellValue: string;
+  index: number;
+  isFocused: boolean;
+}
+
+interface CodeInputProps extends TextInputProps {
+  onInputFull?: (value: string) => void;
+  cellCount?: number;
+  clearOnCellFocus?: boolean;
+  blurOnFull?: boolean;
+  renderItem?: ({ cellValue, index, isFocused }: CellItem) => JSX.Element;
+  style?: StyleProp<ViewStyle>;
+}
+
+const CodeInput = React.forwardRef<NativeTextInput, CodeInputProps>(
+  (
+    {
+      onInputFull,
+      cellCount = 4,
+      clearOnCellFocus = true,
+      blurOnFull = true,
+      renderItem,
+      value,
+      onChangeText,
+      style,
+      ...rest
+    },
+    ref
+  ) => {
+    const newCodeInputRef = React.useRef<NativeTextInput>(null);
+
+    // Use the provided ref or default to new ref when not provided
+    const codeInputRef = ref
+      ? (ref as React.RefObject<NativeTextInput>)
+      : newCodeInputRef;
+
+    // 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) {
+          codeInputRef.current?.blur();
+        }
+        onInputFull?.(value);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, cellCount, blurOnFull, codeInputRef]);
+
+    return (
+      <CodeField
+        ref={codeInputRef}
+        {...(clearOnCellFocus ? codeFieldProps : {})}
+        value={value}
+        onChangeText={onChangeText}
+        rootStyle={style}
+        textInputStyle={{ height: "100%" }} // addresses issue on firefox where the hidden input did not fill the height
+        InputComponent={TextInput}
+        cellCount={cellCount}
+        renderCell={({ symbol, index, isFocused }) => (
+          <View
+            key={index}
+            onLayout={clearOnCellFocus ? getCellOnLayout(index) : undefined}
+            style={{ flex: 1 }}
+          >
+            {renderItem?.({ cellValue: symbol, index, isFocused }) || (
+              <DefaultCodeInputCell cellValue={symbol} isFocused={isFocused} />
+            )}
+          </View>
+        )}
+        {...rest}
+      />
+    );
+  }
+);
+
+export default CodeInput;

package/src/components/CodeInput/CodeInputCell.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { withTheme } from "../../theming";
+import CodeInputText from "./CodeInputText";
+const CodeInputCell = ({ style, children, }) => {
+    return React.createElement(View, { style: [styles.cell, style], children: children });
+};
+export const DefaultCodeInputCell = withTheme(({ cellValue, isFocused, theme }) => {
+    return (React.createElement(View, { testID: "default-code-input-cell", style: [
+            styles.cell,
+            styles.defaultCellContainer,
+            {
+                borderWidth: isFocused ? 2 : 1,
+                borderColor: isFocused
+                    ? theme.colors.primary
+                    : theme.colors.disabled,
+            },
+        ] },
+        React.createElement(CodeInputText, { style: [
+                styles.defaultCellText,
+                {
+                    color: theme.colors.strong,
+                },
+            ], isFocused: isFocused }, cellValue)));
+});
+const styles = StyleSheet.create({
+    cell: { marginStart: 5, marginEnd: 5 },
+    defaultCellContainer: {
+        padding: 5,
+        backgroundColor: "transparent",
+        borderRadius: 5,
+        justifyContent: "center",
+        alignItems: "center",
+        aspectRatio: 1,
+        maxWidth: 70,
+        maxHeight: 70,
+    },
+    defaultCellText: {
+        fontSize: 25,
+    },
+});
+export default CodeInputCell;
+//# sourceMappingURL=CodeInputCell.js.map

package/src/components/CodeInput/CodeInputCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInputCell.js","sourceRoot":"","sources":["CodeInputCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAwB,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEtE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAM5C,MAAM,aAAa,GAA0D,CAAC,EAC5E,KAAK,EACL,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,oBAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;AACnE,CAAC,CAAC;AAQF,MAAM,CAAC,MAAM,oBAAoB,GAAG,SAAS,CAC3C,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAA6B,EAAE,EAAE;IAC7D,OAAO,CACL,oBAAC,IAAI,IACH,MAAM,EAAC,yBAAyB,EAChC,KAAK,EAAE;YACL,MAAM,CAAC,IAAI;YACX,MAAM,CAAC,oBAAoB;YAC3B;gBACE,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC9B,WAAW,EAAE,SAAS;oBACpB,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;oBACtB,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;aAC1B;SACF;QAED,oBAAC,aAAa,IACZ,KAAK,EAAE;gBACL,MAAM,CAAC,eAAe;gBACtB;oBACE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;iBAC3B;aACF,EACD,SAAS,EAAE,SAAS,IAEnB,SAAS,CACI,CACX,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE;IACtC,oBAAoB,EAAE;QACpB,OAAO,EAAE,CAAC;QACV,eAAe,EAAE,aAAa;QAC9B,YAAY,EAAE,CAAC;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,WAAW,EAAE,CAAC;QACd,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,EAAE;KACd;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,EAAE;KACb;CACF,CAAC,CAAC;AAEH,eAAe,aAAa,CAAC"}

package/src/components/CodeInput/CodeInputCell.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { StyleProp, ViewStyle, View, StyleSheet } from "react-native";
+import type { Theme } from "../../styles/DefaultTheme";
+import { withTheme } from "../../theming";
+import CodeInputText from "./CodeInputText";
+
+interface CodeInputCellProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const CodeInputCell: React.FC<React.PropsWithChildren<CodeInputCellProps>> = ({
+  style,
+  children,
+}) => {
+  return <View style={[styles.cell, style]} children={children} />;
+};
+
+interface DefaultCodeInputCellProps {
+  cellValue: string;
+  isFocused: boolean;
+  theme: Theme;
+}
+
+export const DefaultCodeInputCell = withTheme(
+  ({ cellValue, isFocused, theme }: DefaultCodeInputCellProps) => {
+    return (
+      <View
+        testID="default-code-input-cell"
+        style={[
+          styles.cell,
+          styles.defaultCellContainer,
+          {
+            borderWidth: isFocused ? 2 : 1,
+            borderColor: isFocused
+              ? theme.colors.primary
+              : theme.colors.disabled,
+          },
+        ]}
+      >
+        <CodeInputText
+          style={[
+            styles.defaultCellText,
+            {
+              color: theme.colors.strong,
+            },
+          ]}
+          isFocused={isFocused}
+        >
+          {cellValue}
+        </CodeInputText>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  cell: { marginStart: 5, marginEnd: 5 },
+  defaultCellContainer: {
+    padding: 5,
+    backgroundColor: "transparent",
+    borderRadius: 5,
+    justifyContent: "center",
+    alignItems: "center",
+    aspectRatio: 1,
+    maxWidth: 70,
+    maxHeight: 70,
+  },
+  defaultCellText: {
+    fontSize: 25,
+  },
+});
+
+export default CodeInputCell;

package/{lib/typescript/src/components/PinInput/PinInputText.js → src/components/CodeInput/CodeInputText.js}

@@ -4,11 +4,11 @@ import { withTheme } from "../../theming";
 import { Cursor } from "react-native-confirmation-code-field";
 /**
  * Text component that can conditionally render a blinking cursor when focused and empty
- * Meant to be used within a CustomPinInputCell component
+ * Meant to be used within a CodeInputCell component
  */
-const CustomPinInputText = ({ isFocused, cursorBlinkDuration, cursorText, style, theme, children, ...rest }) => {
+const CodeInputText = ({ isFocused, cursorBlinkDuration, cursorText, style, theme, children, ...rest }) => {
     return (React.createElement(Text, { style: [{ color: theme.colors.strong }, style], ...rest }, children ||
         (isFocused ? (React.createElement(Cursor, { cursorSymbol: cursorText, delay: cursorBlinkDuration })) : null)));
 };
-export default withTheme(CustomPinInputText);
-//# sourceMappingURL=PinInputText.js.map
+export default withTheme(CodeInputText);
+//# sourceMappingURL=CodeInputText.js.map

package/src/components/CodeInput/CodeInputText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInputText.js","sourceRoot":"","sources":["CodeInputText.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,aAAa,GAAiC,CAAC,EACnD,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,aAAa,CAAC,CAAC"}

package/src/components/{PinInput/PinInputText.tsx → CodeInput/CodeInputText.tsx}

@@ -4,7 +4,7 @@ import type { Theme } from "../../styles/DefaultTheme";
 import { withTheme } from "../../theming";
 import { Cursor } from "react-native-confirmation-code-field";
 
-interface CustomPinInputTextProps extends TextProps {
+interface CodeInputTextProps extends TextProps {
   cursorBlinkDuration?: number;
   cursorText?: string;
   isFocused?: boolean;
@@ -13,9 +13,9 @@ interface CustomPinInputTextProps extends TextProps {
 
 /**
  * Text component that can conditionally render a blinking cursor when focused and empty
- * Meant to be used within a CustomPinInputCell component
+ * Meant to be used within a CodeInputCell component
  */
-const CustomPinInputText: React.FC<CustomPinInputTextProps> = ({
+const CodeInputText: React.FC<CodeInputTextProps> = ({
   isFocused,
   cursorBlinkDuration,
   cursorText,
@@ -34,4 +34,4 @@ const CustomPinInputText: React.FC<CustomPinInputTextProps> = ({
   );
 };
 
-export default withTheme(CustomPinInputText);
+export default withTheme(CodeInputText);

package/src/components/CodeInput/index.js

@@ -0,0 +1,4 @@
+export { default as CodeInput } from "./CodeInput";
+export { default as CodeInputCell } from "./CodeInputCell";
+export { default as CodeInputText } from "./CodeInputText";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/src/components/CodeInput/index.tsx

@@ -0,0 +1,3 @@
+export { default as CodeInput } from "./CodeInput";
+export { default as CodeInputCell } from "./CodeInputCell";
+export { default as CodeInputText } from "./CodeInputText";