Merge pull request #227 from Peersyst/rc/feat/auto-capitalize-code-field

[RC] Add `autoCapitalize` to `CodeField`
Peersyst · Jun 20, 2024 · 2fb54bb · 2fb54bb
2 parents 26d17fb + 78f12ac
commit 2fb54bb
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 4 deletions.
diff --git a/packages/genesys/packages/react-components/package.json b/packages/genesys/packages/react-components/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@peersyst/react-components",
     "author": "Peersyst",
-    "version": "3.9.33",
+    "version": "3.9.34",
     "license": "MIT",
     "main": "./src/index.tsx",
     "engines": {

diff --git a/packages/genesys/packages/react-components/src/CodeField/CodeField.tsx b/packages/genesys/packages/react-components/src/CodeField/CodeField.tsx
@@ -31,6 +31,7 @@ const CodeField = (rawProps: CodeFieldProps) => {
         placeholder,
         onBlur,
         onFocus,
+        autoCapitalize,
         ...rest
     } = props;
 
@@ -69,6 +70,7 @@ const CodeField = (rawProps: CodeFieldProps) => {
                     context={context}
                     onBlur={onBlur}
                     onFocus={onFocus}
+                    autoCapitalize={autoCapitalize}
                 />
             )}
         </FormControl>

diff --git a/packages/genesys/packages/react-components/src/CodeField/CodeField.types.ts b/packages/genesys/packages/react-components/src/CodeField/CodeField.types.ts
@@ -1,4 +1,9 @@
 import { CoreCodeFieldProps } from "@peersyst/react-components-core";
 import { FormControlledComponentProps } from "../FormControl";
 
-export interface CodeFieldProps extends FormControlledComponentProps<CoreCodeFieldProps> {}
+export interface CodeFieldProps extends FormControlledComponentProps<CoreCodeFieldProps> {
+    /**
+     * Auto capitalize the input value
+     */
+    autoCapitalize?: boolean;
+}
diff --git a/packages/genesys/packages/react-components/src/CodeField/CodeInputs/CodeInputs.tsx b/packages/genesys/packages/react-components/src/CodeField/CodeInputs/CodeInputs.tsx
@@ -14,6 +14,7 @@ const CodeInputs = ({
     context: { invalid, disabled, readonly, focused, setFocused },
     onBlur,
     onFocus,
+    autoCapitalize = true,
 }: CodeInputsProps) => {
     const [focusIndex, setFocusIndex] = useState<number | undefined>(undefined);
 
@@ -28,7 +29,8 @@ const CodeInputs = ({
             if (!force && value.length === digits) return;
 
             const newValue = value.slice(0, digits).split("");
-            newValue[index] = digit;
+            newValue[index] = autoCapitalize ? digit.toUpperCase() : digit;
+
             setValue(newValue.join(""));
 
             if (force) {

diff --git a/packages/genesys/packages/react-components/src/CodeField/CodeInputs/CodeInputs.types.ts b/packages/genesys/packages/react-components/src/CodeField/CodeInputs/CodeInputs.types.ts
@@ -2,7 +2,10 @@ import { FormControlContextType } from "@peersyst/react-components-core";
 import { CodeFieldProps } from "../CodeField.types";
 
 export interface CodeInputsProps
-    extends Pick<CodeFieldProps, "type" | "digits" | "gap" | "onBlur" | "onFocus" | "placeholder"> {
+    extends Pick<
+        CodeFieldProps,
+        "type" | "digits" | "gap" | "onBlur" | "onFocus" | "placeholder" | "autoCapitalize"
+    > {
     value: string;
     setValue: (value: string) => void;
     context: FormControlContextType;

diff --git a/packages/genesys/packages/react-components/storybook/stories/CodeField.stories.tsx b/packages/genesys/packages/react-components/storybook/stories/CodeField.stories.tsx
@@ -17,4 +17,5 @@ Example.args = {
     onBlur: undefined,
     label: "LABEL",
     style: { width: "100%" },
+    autoCapitalize: true,
 };