Fixed latest input numbers, removed extra code, fixed typings

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx

@@ -9,7 +9,6 @@ import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import Select, { SelectValue } from 'antd/lib/select';
 import Radio, { RadioChangeEvent } from 'antd/lib/radio';
 import Input from 'antd/lib/input';
-import InputNumber from 'antd/lib/input-number';
 
 interface InputElementParameters {
     attrID: number;
@@ -17,7 +16,6 @@ interface InputElementParameters {
     values: string[];
     currentValue: string;
     onChange(value: string): void;
-    ref: React.RefObject<Input | InputNumber>;
 }
 
 function renderInputElement(parameters: InputElementParameters): JSX.Element {
@@ -27,7 +25,6 @@ function renderInputElement(parameters: InputElementParameters): JSX.Element {
         values,
         currentValue,
         onChange,
-        ref,
     } = parameters;
 
     const renderCheckbox = (): JSX.Element => (
@@ -114,7 +111,6 @@ function renderInputElement(parameters: InputElementParameters): JSX.Element {
                         }
                     }}
                     onKeyDown={handleKeydown}
-                    ref={ref as React.RefObject<Input>}
                 />
             </div>
         </>
@@ -259,8 +255,6 @@ interface Props {
 function AttributeEditor(props: Props): JSX.Element {
     const { attribute, currentValue, onChange } = props;
     const { inputType, values, id: attrID } = attribute;
-    const ref = inputType === 'number' ? React.createRef<InputNumber>()
-        : React.createRef<Input>();
 
     return (
         <div>
@@ -268,7 +262,6 @@ function AttributeEditor(props: Props): JSX.Element {
             <hr />
             {renderInputElement({
                 attrID,
-                ref,
                 inputType,
                 currentValue,
                 values,

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx

@@ -4,20 +4,16 @@
 
 import React from 'react';
 
-import {
+import { Row, Col } from 'antd/lib/grid';
-    Row,
+import Select from 'antd/lib/select';
-    Col,
+import Button from 'antd/lib/button';
-    Select,
+import InputNumber from 'antd/lib/input-number';
-    Button,
+import Radio, { RadioChangeEvent } from 'antd/lib/radio';
-    InputNumber,
-    Radio,
-} from 'antd';
-
-import { RadioChangeEvent } from 'antd/lib/radio';
 import Text from 'antd/lib/typography/Text';
 
 import { RectDrawingMethod } from 'cvat-canvas';
 import { ShapeType } from 'reducers/interfaces';
+import { clamp } from 'utils/math';
 
 interface Props {
     shapeType: ShapeType;
@@ -117,7 +113,15 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
                         </Col>
                         <Col span={10}>
                             <InputNumber
-                                onChange={onChangePoints}
+                                onChange={(value: number | undefined) => {
+                                    if (typeof (value) === 'number') {
+                                        onChangePoints(Math.floor(
+                                            clamp(value, minimumPoints, Number.MAX_SAFE_INTEGER),
+                                        ));
+                                    } else if (!value) {
+                                        onChangePoints(undefined);
+                                    }
+                                }}
                                 className='cvat-draw-shape-popover-points-selector'
                                 min={minimumPoints}
                                 value={numberOfPoints}

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx

@@ -4,26 +4,21 @@
 
 import React from 'react';
 
-import {
+import { Row, Col } from 'antd/lib/grid';
-    Row,
+import Icon from 'antd/lib/icon';
-    Col,
+import Select from 'antd/lib/select';
-    Icon,
+import Radio, { RadioChangeEvent } from 'antd/lib/radio';
-    Select,
+import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
-    Radio,
+import Input from 'antd/lib/input';
-    Input,
+import InputNumber from 'antd/lib/input-number';
-    Collapse,
+import Collapse from 'antd/lib/collapse';
-    Checkbox,
+import Dropdown from 'antd/lib/dropdown';
-    InputNumber,
+import Menu from 'antd/lib/menu';
-    Dropdown,
+import Button from 'antd/lib/button';
-    Menu,
+import Modal from 'antd/lib/modal';
-    Button,
+import Popover from 'antd/lib/popover';
-    Modal,
-    Popover,
-} from 'antd';
-
 import Text from 'antd/lib/typography/Text';
-import { RadioChangeEvent } from 'antd/lib/radio';
+
-import { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import ColorChanger from 'components/annotation-page/standard-workspace/objects-side-bar/color-changer';
 
 import {
@@ -36,9 +31,8 @@ import {
     ForegroundIcon,
 } from 'icons';
 
-import {
+import { ObjectType, ShapeType } from 'reducers/interfaces';
-    ObjectType, ShapeType,
+import { clamp } from 'utils/math';
-} from 'reducers/interfaces';
 
 function ItemMenu(
     serverID: number | undefined,
@@ -463,7 +457,7 @@ function ItemAttributeComponent(props: ItemAttributeComponentProps): JSX.Element
     }
 
     if (attrInputType === 'number') {
-        const [min, max, step] = attrValues;
+        const [min, max, step] = attrValues.map((value: string): number => +value);
 
         return (
             <>
@@ -476,15 +470,17 @@ function ItemAttributeComponent(props: ItemAttributeComponentProps): JSX.Element
                     <InputNumber
                         size='small'
                         onChange={(value: number | undefined): void => {
-                            if (typeof (value) !== 'undefined') {
+                            if (typeof (value) === 'number') {
-                                changeAttribute(attrID, `${value}`);
+                                changeAttribute(
+                                    attrID, `${clamp(value, min, max)}`,
+                                );
                             }
                         }}
                         value={+attrValue}
                         className='cvat-object-item-number-attribute'
-                        min={+min}
+                        min={min}
-                        max={+max}
+                        max={max}
-                        step={+step}
+                        step={step}
                     />
                 </Col>
             </>

cvat-ui/src/components/annotation-page/standard-workspace/propagate-confirm.tsx

@@ -17,8 +17,8 @@ interface Props {
     frameNumber: number;
     propagateObject(): void;
     cancel(): void;
-    changePropagateFrames(value: number | undefined): void;
+    changePropagateFrames(value: number): void;
-    changeUpToFrame(value: number | undefined): void;
+    changeUpToFrame(value: number): void;
 }
 
 export default function PropagateConfirmComponent(props: Props): JSX.Element {

cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx

@@ -19,7 +19,7 @@ interface Props {
     frameNumber: number;
     inputFrameRef: React.RefObject<InputNumber>;
     onSliderChange(value: SliderValue): void;
-    onInputChange(value: number | undefined): void;
+    onInputChange(value: number): void;
     onURLIconClick(): void;
 }
 
@@ -34,7 +34,7 @@ function PlayerNavigation(props: Props): JSX.Element {
         onURLIconClick,
     } = props;
 
-    const [frameInputValue, setFrameInputValue] = useState<number | undefined>(frameNumber);
+    const [frameInputValue, setFrameInputValue] = useState<number>(frameNumber);
     if (frameNumber !== frameInputValue) {
         setFrameInputValue(frameNumber);
     }

cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx

@@ -36,7 +36,7 @@ interface Props {
     onFirstFrame(): void;
     onLastFrame(): void;
     onSliderChange(value: SliderValue): void;
-    onInputChange(value: number | undefined): void;
+    onInputChange(value: number): void;
     onURLIconClick(): void;
     onUndoClick(): void;
     onRedoClick(): void;

cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx

@@ -145,15 +145,9 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
     };
 
     private onChangePoints = (value: number | undefined): void => {
-        if (typeof (value) === 'undefined') {
+        this.setState({
-            this.setState({
+            numberOfPoints: value,
-                numberOfPoints: value,
+        });
-            });
-        } else if (typeof (value) === 'number') {
-            this.setState({
-                numberOfPoints: Math.max(value, this.minimumPoints),
-            });
-        }
     };
 
     private onChangeLabel = (value: string): void => {

cvat-ui/src/containers/annotation-page/standard-workspace/propagate-confirm.tsx

@@ -13,7 +13,6 @@ import {
 
 import { CombinedState } from 'reducers/interfaces';
 import PropagateConfirmComponent from 'components/annotation-page/standard-workspace/propagate-confirm';
-import { clamp } from 'utils/math';
 
 interface StateToProps {
     objectState: any | null;

cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx

@@ -403,7 +403,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
         onChangeFrame(value as number);
     };
 
-    private onChangePlayerInputValue = (value: number | undefined): void => {
+    private onChangePlayerInputValue = (value: number): void => {
         const {
             onSwitchPlay,
             onChangeFrame,