#97 Add valueTransform prop to InputField

croz-ltd · Apr 4, 2023 · 90b8902 · 90b8902
1 parent 0cd9ca9
commit 90b8902
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/libs/formik-elements/src/InputField.tsx b/libs/formik-elements/src/InputField.tsx
@@ -17,7 +17,7 @@
 
 import * as React from "react";
 
-import { useField, useFormikContext } from "formik";
+import { useField } from "formik";
 
 import { Input, InputProps } from "@tiller-ds/form-elements";
 import { ComponentTokens } from "@tiller-ds/theme";
@@ -42,22 +42,39 @@ export type InputFieldProps = {
    * Determines whether the components auto trim whitespace after typing
    */
   autoTrim?: boolean;
+
+  /**
+   * Function or a string that determines how the input value should be transformed when the user types into the input field.
+   * In case it's a function, it will be called every time the input value changes. The function can then modify the value as needed and return the modified value.
+   */
+  valueTransform?: "uppercase" | "lowercase" | "capitalize" | ((value: string) => void);
 } & Omit<InputProps, InputOnlyPropsUnion> &
   InputTokensProps;
 
 type InputTokensProps = {
   tokens?: ComponentTokens<"Input">;
 };
 
-export default function InputField({ name, autoTrim = true, ...props }: InputFieldProps) {
+export default function InputField({ name, autoTrim = true, valueTransform, ...props }: InputFieldProps) {
   const [field, meta, helpers] = useField(name);
   const shouldValidate = useShouldValidate();
   const initialError = useFormikBypass(name);
 
   const onChange = (e) => {
-    helpers.setValue(e.target.value, shouldValidate);
+    let transformedValue = e.target.value;
+    if (typeof valueTransform === "function") {
+      transformedValue = valueTransform(transformedValue);
+    } else if (valueTransform === "uppercase") {
+      transformedValue = transformedValue.toUpperCase();
+    } else if (valueTransform === "lowercase") {
+      transformedValue = transformedValue.toLowerCase();
+    } else if (valueTransform === "capitalize") {
+      transformedValue = transformedValue.charAt(0).toUpperCase() + transformedValue.slice(1);
+    }
+    helpers.setValue(transformedValue, shouldValidate);
     initialError.current = undefined;
   };
+
   const onReset = () => helpers.setValue("", shouldValidate);
 
   const onBlur = () => {

diff --git a/storybook/src/formik-elements/InputField.stories.tsx b/storybook/src/formik-elements/InputField.stories.tsx
@@ -81,6 +81,11 @@ export default {
     label: { name: "Label", control: "text" },
     help: { name: "Help", control: "text" },
     placeholder: { name: "Placeholder", control: "text" },
+    valueTransform: {
+      name: "Transform Value",
+      options: ["uppercase", "lowercase", "capitalize"],
+      control: { type: "radio" },
+    },
     tooltipText: { name: "Tooltip Text (on hover)", control: "text" },
     tooltipToggle: { name: "Toggle Tooltip (on/off)", control: { type: "boolean" } },
     tooltipIcon: { name: "Tooltip Icon", control: { type: "select", options: iconTypes } },
@@ -117,6 +122,7 @@ export const InputFieldFactory = ({
   className,
   useTokens,
   tokens,
+  valueTransform,
 }) => (
   <InputField
     name={name}
@@ -137,6 +143,7 @@ export const InputFieldFactory = ({
     allowClear={allowClear}
     className={className}
     tokens={useTokens && tokens}
+    valueTransform={valueTransform}
   />
 );
 
@@ -145,6 +152,7 @@ InputFieldFactory.args = {
   label: "Test Label",
   help: "",
   placeholder: "Test placeholder",
+  valueTransform: "lowercase",
   tooltipToggle: false,
   tooltipText: "Test tooltip content",
   tooltipIcon: "info",
@@ -175,6 +183,10 @@ export const WithoutLabel = () => <InputField name={name} />;
 
 export const WithValue = () => <InputField name={nameWithValue} label={<Intl name="label" />} />;
 
+export const WithTransformedValue = () => (
+  <InputField name={nameWithValue} label={<Intl name="label" />} valueTransform="uppercase" />
+);
+
 export const Disabled = () => <InputField name={nameWithValue} label={<Intl name="label" />} disabled={true} />;
 
 export const WithPlaceholder = (args, context) => (
@@ -270,6 +282,7 @@ const HideControls = {
 WithLabel.argTypes = HideControls;
 WithoutLabel.argTypes = HideControls;
 WithValue.argTypes = HideControls;
+WithTransformedValue.argTypes = HideControls;
 Disabled.argTypes = HideControls;
 WithPlaceholder.argTypes = HideControls;
 WithHelp.argTypes = HideControls;