fix: Add missing ios support for balance input (#75)

* fix: Add missing ios support for balance input * fix: Test * fix: Test * fix: Format * fix: Remove inputmode from params, changedefault to decimal * fix: Add validations properly * fix: Type
pancakeswap · May 7, 2021 · b648a77 · b648a77
1 parent cbb93f7
commit b648a77
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 16 deletions.
diff --git a/packages/pancake-uikit/src/__tests__/components/balanceinput.test.tsx b/packages/pancake-uikit/src/__tests__/components/balanceinput.test.tsx
@@ -5,7 +5,7 @@ import BalanceInput from "../../components/BalanceInput/BalanceInput";
 const handleChange = jest.fn();
 
 it("renders correctly", () => {
-  const { asFragment } = renderWithTheme(<BalanceInput value="14" currencyValue="15 USD" onChange={handleChange} />);
+  const { asFragment } = renderWithTheme(<BalanceInput value="14" currencyValue="15 USD" onUserInput={handleChange} />);
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       .c3 {
@@ -100,9 +100,11 @@ it("renders correctly", () => {
       >
         <input
           class="c1 c2"
+          inputmode="decimal"
+          min="0"
+          pattern="^[0-9]*[.,]?[0-9]*$"
           placeholder="0.0"
           scale="md"
-          type="number"
           value="14"
         />
         <div

diff --git a/packages/pancake-uikit/src/components/BalanceInput/BalanceInput.tsx b/packages/pancake-uikit/src/components/BalanceInput/BalanceInput.tsx
@@ -6,15 +6,29 @@ import { BalanceInputProps } from "./types";
 const BalanceInput: React.FC<BalanceInputProps> = ({
   value,
   placeholder = "0.0",
-  onChange,
+  onUserInput,
   currencyValue,
   inputProps,
   isWarning = false,
   ...props
 }) => {
+  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.currentTarget.validity.valid) {
+      onUserInput(e.currentTarget.value.replace(/,/g, "."));
+    }
+  };
+
   return (
     <StyledBalanceInput isWarning={isWarning} {...props}>
-      <StyledInput type="number" value={value} onChange={onChange} placeholder={placeholder} {...inputProps} />
+      <StyledInput
+        pattern="^[0-9]*[.,]?[0-9]*$"
+        inputMode="decimal"
+        min="0"
+        value={value}
+        onChange={handleOnChange}
+        placeholder={placeholder}
+        {...inputProps}
+      />
       {currencyValue && (
         <Text fontSize="12px" textAlign="right" color="textSubtle">
           {currencyValue}

diff --git a/packages/pancake-uikit/src/components/BalanceInput/index.stories.tsx b/packages/pancake-uikit/src/components/BalanceInput/index.stories.tsx
@@ -9,27 +9,49 @@ export default {
 };
 
 export const Default: React.FC = () => {
-  const [value, setValue] = useState(1.43333);
-  const currencyValue = `~${(value * 1.3).toLocaleString(undefined, {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  })} USD`;
+  const [decimalValue, setDecimalValue] = useState(1.43333);
+  const [numericValue, setNumericValue] = useState(5);
 
-  const handleChange = (evt) => {
-    setValue(evt.target.value);
+  const currencyValue = (input: number) => {
+    return `~${(input * 1.3).toLocaleString(undefined, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })} USD`;
+  };
+
+  const handleDecimalChange = (input) => {
+    setDecimalValue(input);
+  };
+
+  const handleNumericChange = (input) => {
+    setNumericValue(input);
   };
 
   return (
     <Box width="300px">
-      <BalanceInput value={value} currencyValue={currencyValue} onChange={handleChange} placeholder="0.0" mb="32px" />
       <BalanceInput
-        value={value * 1.5}
-        currencyValue={currencyValue}
-        onChange={handleChange}
+        onUserInput={handleDecimalChange}
+        value={decimalValue}
+        currencyValue={currencyValue(decimalValue)}
+        placeholder="0.0"
+        mb="32px"
+      />
+      <BalanceInput
+        value={decimalValue * 1.5}
+        onUserInput={handleDecimalChange}
+        currencyValue={currencyValue(decimalValue * 1.5)}
         placeholder="1.5"
         isWarning
         mb="32px"
       />
+      <BalanceInput
+        value={numericValue}
+        onUserInput={handleNumericChange}
+        inputProps={{ inputMode: "numeric" }}
+        currencyValue={currencyValue(numericValue)}
+        placeholder="0"
+        mb="32px"
+      />
     </Box>
   );
 };
diff --git a/packages/pancake-uikit/src/components/BalanceInput/types.ts b/packages/pancake-uikit/src/components/BalanceInput/types.ts
@@ -3,7 +3,7 @@ import { BoxProps } from "../Box";
 
 export interface BalanceInputProps extends BoxProps {
   value: ReactText;
-  onChange?: InputHTMLAttributes<HTMLInputElement>["onChange"];
+  onUserInput: (input: string) => void;
   currencyValue?: ReactNode;
   placeholder?: string;
   inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "placeholder" | "onChange">;