CoreInput form error adding

p.ts

@@ -0,0 +1 @@
+ 

ui/src/core/extensions/extensions.ts

@@ -25,6 +25,7 @@ declare global {
     fromArray(): number[];
     toPx(): string;
     unixFromDate(): string;
+    isValid(str: string): boolean;
   }
 
   interface String {

ui/src/core/extensions/number.ts

@@ -18,4 +18,10 @@ export const NumberExtensions = () => {
       return `${date.getUTCFullYear()}.${date.getMonth()}.${date.getDay()}  ${date.getHours()}:${date.getMinutes()}`;
     };
   }
+  if (Number().isValid === undefined) {
+    // eslint-disable-next-line no-extend-native
+    Number.prototype.isValid = function (str: string) {
+      return !isNaN(Number(str));
+    };
+  }
 };

ui/src/core/ui/form_builder/form_builder.tsx

@@ -39,20 +39,20 @@ export const FormBuilder = observer((props: IFormBuilder) => {
                   value={element.totalValue ?? element.defaultValue}
                   onChange={(value) => store.changeTotalValue(element.id, value)}
                   label={element.name}
-                  style={{ margin: 10 }}
+                  style={{ margin: 20 }}
                 />
               );
             }
             if (element.type.isEqual(InputType.ARRAY)) {
               return (
-                <div style={{ border: "1px black solid", margin: 10 }}>
+                <div style={{ border: "1px black solid", margin: 20 }}>
                   <div
                     style={{
                       display: "flex",
                       justifyContent: "space-between",
-                      margin: 10,
+                      margin: 20,
                       alignItems: "center",
-                      paddingRight: 10,
+                      paddingRight: 20,
                     }}
                     onClick={() => {
                       store.open(element.id);
@@ -63,15 +63,15 @@ export const FormBuilder = observer((props: IFormBuilder) => {
                   </div>
 
                   {element.isOpen ? (
-                    <div style={{ margin: 10 }}>
+                    <div style={{ margin: 20 }}>
                       {element.totalValue instanceof Array
                         ? element.totalValue?.map((subArray, index) => {
                             return (
-                              <div style={{ margin: 10 }}>
+                              <div style={{ margin: 20 }}>
                                 <div style={{ display: "flex" }}>
                                   <CoreText text={(element.subType ?? "") + ` ${index}`} type={CoreTextType.medium} />
                                   <Icon
-                                    style={{ paddingLeft: 10 }}
+                                    style={{ paddingLeft: 20 }}
                                     type="DeleteCircle"
                                     onClick={() => store.deleteTotalValueSubItem(element.id, index)}
                                   />
@@ -101,9 +101,10 @@ export const FormBuilder = observer((props: IFormBuilder) => {
                                           }}
                                           validation={
                                             subSubArrayItem.type.isEqual(InputType.NUMBER)
-                                              ? store.numberValidation
+                                              ? (el) => Number().isValid(el)
                                               : undefined
                                           }
+                                          error="только числа"
                                           value={subSubArrayItem.defaultValue}
                                           label={subSubArrayItem.name}
                                         />
@@ -126,13 +127,14 @@ export const FormBuilder = observer((props: IFormBuilder) => {
               return (
                 <div>
                   <CoreInput
-                    validation={element.type.isEqual(InputType.NUMBER) ? store.numberValidation : undefined}
+                    validation={element.type.isEqual(InputType.NUMBER) ? (el) => Number().isValid(el) : undefined}
                     onChange={(e) => {
                       store.changeTotalValue(element.id, e);
                     }}
                     value={element.defaultValue}
+                    error="только числа"
                     label={element.name}
-                    style={{ margin: 10 }}
+                    style={{ margin: 20 }}
                   />
                 </div>
               );

ui/src/core/ui/input/input.tsx

@@ -6,11 +6,20 @@ interface IInputProps {
   value?: string;
   onChange?: (value: string) => void;
   style?: React.CSSProperties;
-  validation?: RegExp;
+  validation?: (value: string) => boolean;
+  error?: string;
 }
 
 export const CoreInput = (props: IInputProps) => {
-  const [value, setValue] = React.useState<string | undefined>(() => props.value);
+  const [value, setValue] = React.useState<string>(() => props.value ?? "");
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [isAppendInnerText, setAppendInnerText] = React.useState(true);
+  React.useEffect(() => {
+    if (ref.current && isAppendInnerText) {
+      ref.current.innerText = value;
+      setAppendInnerText(false);
+    }
+  }, [ref, value, isAppendInnerText, setAppendInnerText]);
 
   return (
     <div
@@ -28,20 +37,17 @@ export const CoreInput = (props: IInputProps) => {
       <CoreText type={CoreTextType.small} text={props.label} />
 
       <div
+        ref={ref}
         onInput={(e) => {
-          // setValue(e.)
           if (e.currentTarget.textContent) {
             setValue(e.currentTarget.textContent);
-            if (
+            if (props.validation !== undefined && props.validation(value) && props.onChange) {
-              props.validation !== undefined &&
+              props.onChange(value);
-              props.validation?.test(e.currentTarget.textContent) &&
-              props.onChange
-            ) {
-              props.onChange(e.currentTarget.textContent);
               return;
             }
-            if (props.onChange) {
+
-              props.onChange(e.currentTarget.textContent);
+            if (props.onChange && props.validation === undefined) {
+              props.onChange(value);
               return;
             }
           }
@@ -49,7 +55,13 @@ export const CoreInput = (props: IInputProps) => {
         style={{ fontSize: 16, fontFamily: "Roboto", color: "#1D1B20", height: 24 }}
         contentEditable="true"
       />
-      {props.validation?.test(value ?? "") ?? false ? <div>Error</div> : null}
+      {value ? (
+        props.validation ? (
+          props.validation(value) ? null : (
+            <div style={{ color: "#ff1d0c" }}>{props.error ? props.error : "error"}</div>
+          )
+        ) : null
+      ) : null}
     </div>
   );
 };

ui/src/features/dataset/dataset_model.ts

@@ -108,7 +108,7 @@ export const datasetFormMockResult = `{
     },
     "camera_position":{
       "center_shell": [\${CENTER_SHELL_1:number:0}, \${CENTER_SHELL_2:number:0}, \${CENTER_SHELL_3:number:0}],
-      "radius_range": [\${RADIUS_RANGE_1:number:0.4}, \${RADIUS_RANGE_2:number:1.4}],
+      "radius_range": [\${RADIUS_RANGE_1:number:1}, \${RADIUS_RANGE_2:number:1.4}],
       "elevation_range": [\${ELEVATION_RANGE_1:number:10}, \${ELEVATION_RANGE_2:number:90}]
     },
     "generation":{