fix: implement in integers

gisce · Dec 10, 2024 · 0feacc3 · 0feacc3
1 parent 6deafbf
commit 0feacc3
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 37 deletions.
diff --git a/src/widgets/base/Float.tsx b/src/widgets/base/Float.tsx
@@ -22,8 +22,9 @@ export const Float = memo((props: WidgetProps) => {
   const { ooui } = props;
   const { id, decimalDigits, readOnly, required } = ooui as FloatOoui;
 
-  const { elementHasLostFocus } = useContext(FormContext) as FormContextType;
+  const formContext = useContext(FormContext) as FormContextType;
 
+  const { elementHasLostFocus } = formContext || {};
   const isRequired = useMemo(() => required && !readOnly, [required, readOnly]);
 
   const Component: React.ComponentType<InputNumberProps> = useMemo(

diff --git a/src/widgets/base/Integer.tsx b/src/widgets/base/Integer.tsx
@@ -1,15 +1,26 @@
-import React, { useContext } from "react";
-import { InputNumber, theme } from "antd";
+import { memo, useCallback, useContext, useMemo } from "react";
+import { InputNumber, InputNumberProps, theme } from "antd";
 import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
 import { FormContext, FormContextType } from "@/context/FormContext";
+import styled from "styled-components";
 const { useToken } = theme;
 
+const { defaultAlgorithm, defaultSeed } = theme;
+
+const mapToken = defaultAlgorithm(defaultSeed);
+
 type IntegerProps = WidgetProps & {
   onChange?: (newValue: number) => void;
 };
 
-export const Integer = (props: IntegerProps) => {
+const AddonElement = memo(({ content }: { content: string }) => {
+  const { token } = useToken();
+  return <div style={{ color: token.colorTextDisabled }}>{content}</div>;
+});
+AddonElement.displayName = "AddonElement";
+
+export const Integer = memo((props: IntegerProps) => {
   const { ooui, onChange } = props;
   const { id, readOnly, required } = ooui;
   const { token } = useToken();
@@ -18,49 +29,66 @@ export const Integer = (props: IntegerProps) => {
       ? { backgroundColor: token.colorPrimaryBg }
       : undefined;
   const formContext = useContext(FormContext) as FormContextType;
+
   const { elementHasLostFocus } = formContext || {};
+  const isRequired = useMemo(() => required && !readOnly, [required, readOnly]);
+
+  const Component: React.ComponentType<InputNumberProps> = useMemo(
+    () => (isRequired ? RequiredInteger : InputNumber),
+    [isRequired],
+  );
+
+  const renderAddonElement = useCallback((content?: string) => {
+    return content ? <AddonElement content={content} /> : null;
+  }, []);
+
+  const formatter = useCallback((value: any) => {
+    // Check if value is not undefined and is a valid number
+    if (value === undefined) {
+      return "";
+    }
+
+    if (typeof value === "string" && !isNaN(parseFloat(value))) {
+      const truncatedValue = Math.trunc(parseFloat(value));
+      return `${truncatedValue}`.replace(/[^0-9\-]+/g, "");
+    } else if (typeof value === "number") {
+      const truncatedValue = Math.trunc(value);
+      return `${truncatedValue}`.replace(/[^0-9\-]+/g, "");
+    }
+
+    return "";
+  }, []);
+
+  const handleChange = useCallback(
+    (newValue: any) => {
+      const newNumber = newValue as number;
+      onChange?.(newNumber);
+    },
+    [onChange],
+  );
 
   return (
-    <Field required={required} type={"number"} {...props}>
-      <InputNumber
-        addonBefore={
-          ooui.prefix ? (
-            <div style={{ color: token.colorTextDisabled }}>{ooui.prefix}</div>
-          ) : null
-        }
-        addonAfter={
-          ooui.suffix ? (
-            <div style={{ color: token.colorTextDisabled }}>{ooui.suffix}</div>
-          ) : null
-        }
+    <Field required={isRequired} type={"number"} {...props}>
+      <Component
+        addonBefore={renderAddonElement(ooui.prefix)}
+        addonAfter={renderAddonElement(ooui.suffix)}
         id={id}
         className={"w-full "}
         disabled={readOnly}
-        formatter={(value) => {
-          // Check if value is not undefined and is a valid number
-          if (value === undefined) {
-            return "";
-          }
-
-          if (typeof value === "string" && !isNaN(parseFloat(value))) {
-            const truncatedValue = Math.trunc(parseFloat(value));
-            return `${truncatedValue}`.replace(/[^0-9\-]+/g, "");
-          } else if (typeof value === "number") {
-            const truncatedValue = Math.trunc(value);
-            return `${truncatedValue}`.replace(/[^0-9\-]+/g, "");
-          }
-
-          return "";
-        }}
-        onChange={(newValue: any) => {
-          const newNumber = newValue as number;
-          onChange?.(newNumber);
-        }}
+        formatter={formatter}
+        onChange={handleChange}
         onBlur={elementHasLostFocus}
         precision={0}
         style={requiredStyle}
         wheel={false}
       />
     </Field>
   );
-};
+});
+Integer.displayName = "Integer";
+
+const RequiredInteger = styled(InputNumber)`
+  &.ant-input-number {
+    background-color: ${mapToken.colorPrimaryBg};
+  }
+`;