import { checkNumber } from '@/utils/tool/common' ; import { message , Row , Col , Input as SenseInput } from 'antd' ; import { ArrowUpOutlined , ArrowDownOutlined } from '@ant-design/icons' ; import React , { useState } from 'react' ; import { useTranslation } from 'react-i18next' ; interface GraphicsValue { lowerLimitPointNum ? : string ; upperLimitPointNum ? : string | undefined ; } interface IProps { value ? : GraphicsValue ; minLowerLimitPointNum ? : number ; onChange ? : ( value : GraphicsValue ) => void ; } param props const GraphicsPointLimitInput = ( { value = { } , minLowerLimitPointNum = 3 , onChange , } ) => { const [ lowerLimitPointNum , setLowerLimitPointNum ] = useState ( '' ) ; const [ upperLimitPointNum , setUpperLimitPointNum ] = useState ( '' ) ; const { t } = useTranslation ( ) ; const triggerChange = ( changeValue ) => { onChange ?. ( { lowerLimitPointNum , upperLimitPointNum , ... value , ... changeValue } ) ; } ; const confirmScopeChange = ( e , pattern ) => { let newValue = e . target . value ; const isLowerLim = pattern === 'lowerLimitPointNum' ; const isUpperLim = pattern === 'upperLimitPointNum' ; const DEFAULT_VALUE = '' ; if ( ! checkNumber ( newValue ) ) { let showError = true ; if ( isLowerLim ) { newValue = minLowerLimitPointNum . toString ( ) ; } if ( isUpperLim ) { if ( newValue === DEFAULT_VALUE ) { showError = false ; } newValue = DEFAULT_VALUE ; } if ( showError ) { message . error ( 'PointsZeroLimitNotify' ) ; } } if ( isLowerLim && newValue < minLowerLimitPointNum ) { newValue = minLowerLimitPointNum ; message . error ( t ( 'PointLowLimitNotify' , { num : minLowerLimitPointNum } ) ) ; } if ( isUpperLim && newValue && ~ ~ newValue < ~ ~ ( value ?. lowerLimitPointNum ?? lowerLimitPointNum ) ) { newValue = DEFAULT_VALUE ; message . error ( t ( 'LowLimitMustGreaterThanUpNotify' ) ) ; } if ( ! ( pattern in value ) ) { isLowerLim && setLowerLimitPointNum ( newValue ) ; isUpperLim && setUpperLimitPointNum ( newValue ) ; } triggerChange ( { [ pattern ] : newValue } ) ; } ; return ( < Row > < Col span = { 11 } className = 'border_bottom' > < SenseInput type = 'text' suffix = { < ArrowDownOutlined / > } value = { value . lowerLimitPointNum || lowerLimitPointNum } placeholder = { t ( 'LowerLimitPoints' ) } onChange = { ( e ) => triggerChange ( { lowerLimitPointNum : e . target . value } ) } onBlur = { ( e ) => confirmScopeChange ( e , 'lowerLimitPointNum' ) } /> < /Col> < Col span = { 11 } className = 'border_bottom' offset = { 2 } > < SenseInput type = 'text' placeholder = { t ( 'UpperLimitPoints' ) } suffix = { < ArrowUpOutlined / > } value = { value . upperLimitPointNum || upperLimitPointNum } onChange = { ( e ) => triggerChange ( { upperLimitPointNum : e . target . value } ) } onBlur = { ( e ) => confirmScopeChange ( e , 'upperLimitPointNum' ) } /> < /Col> < /Row>); } ; export default GraphicsPointLimitInput ;