fix ip address input (#11)

Reviewed-on: #11
Co-authored-by: YaroslavBerkuta <yaroslavberkuta@gmail.com>
Co-committed-by: YaroslavBerkuta <yaroslavberkuta@gmail.com>

src/containers/Ips/components/Form/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ButtonToolbar, Button } from "reactstrap";
-import { checkIpValue, IInputState, InputMaskField, isValidIP } from "@/shared";
+import { InputField, isValidIP } from "@/shared";
 import { Controller, useForm } from "react-hook-form";
 interface IForm {
   ip: string;
@@ -13,43 +13,6 @@ interface IProps {
 export const AddIpForm = (props: IProps) => {
   const { control, handleSubmit } = useForm<IForm>();
 
-  const beforeMaskedValueChange = (
-    newState: IInputState,
-    oldState: IInputState
-  ) => {
-    if (!newState.value) return newState;
-    if (
-      newState.value === oldState.value.substring(0, oldState.value.length - 1)
-    )
-      return newState;
-
-    let value = newState.value;
-    const oldValue = oldState.value;
-    let selection = newState.selection;
-    let cursorPosition = selection ? selection.start : null;
-    const result = checkIpValue(value);
-    if (!result) {
-      value = value.trim();
-      // try to add . before the last char to see if it is valid ip address
-      const newValue =
-        value.substring(0, value.length - 1) +
-        "." +
-        value.substring(value.length - 1);
-      if (checkIpValue(newValue)) {
-        cursorPosition++;
-        selection = { start: cursorPosition, end: cursorPosition };
-        value = newValue;
-      } else {
-        value = oldValue;
-      }
-    }
-
-    return {
-      value,
-      selection,
-    };
-  };
-
   return (
     <form className="form" onSubmit={handleSubmit(props.onAddIp)}>
       <Controller
@@ -60,22 +23,13 @@ export const AddIpForm = (props: IProps) => {
           validate: (val: string) => isValidIP(val) || "Не валідна ІР адреса",
         }}
         render={({ field: { value, onChange }, fieldState }) => (
-          <InputMaskField
+          <InputField
             error={fieldState?.error?.message}
             required={value?.length > 0 ? true : false}
             label="IP"
             value={value}
             placeholder={"xxx.xxx.xxx.xxx"}
-            mask="999999999999999"
             onChange={onChange}
-            inputMaskProps={{
-              formatChars: {
-                "9": "[0-9.]",
-              },
-              maskChar: null,
-              alwaysShowMask: false,
-              beforeMaskedValueChange,
-            }}
           />
         )}
       />