React - 实现一个基于 Antd 的数值范围组件

最近公司的产品需求要做一个数据采集流程，这个流程里面有比较多的表单数据，其中有一个输入数值范围的控件，这个功能还是很常见的，但是之前的开发没有封装成一个公共组件，特此自己造轮子。

需求原型

使用场景

当需求中需要录入数值范围的表单数据

实现思路

考虑到组件的共用性和拓展性，它应具备以下功能：

• 只能输入数字，选择 InputNumber 数字输入框，并继承该组件的所有API属性
• 当最小值大于最大值，或者最大值小于最小值时，应调换位置
• 基于 自定义表单控件 封装

代码结构

由于这个功能实现还是比较简单的，组件的细节便不多描述，直接上代码：

/*
 * @Author: 白雾茫茫丶<baiwumm.com>
 * @Date: 2023-12-13 14:34:55
 * @LastEditors: 白雾茫茫丶<baiwumm.com>
 * @LastEditTime: 2023-12-13 18:08:35
 * @Description: 数字范围输入组件
 */
import {
    Col, InputNumber, Row } from 'antd'
import type {
    InputNumberProps } from 'antd/es/input-number'
import {
    gt, toNumber } from 'lodash'
import React, {
    FC, FocusEventHandler } from 'react'

import type {
    EnumValues } from '@/utils/types'

enum INPUT_TYPE {
   
  MIN, // 最小值
  MAX, // 最大值
}

type InputType = EnumValues<typeof INPUT_TYPE>

type ValuePair = (string | number | undefined)[];

type FormDigitRangeProps = {
   
  value?: ValuePair; // 表单控件的值
  onChange?: (value: ValuePair) => void; // 表单控件改变值的回调
  separator: string; // 分割线
  separatorGap: number; // 分割线和数据框的 gap
  placeholder: [string, string]; // 占位符
  suffix: string; // 后缀，不传则不显示
} & InputNumberProps

const FormDigitRange: FC<FormDigitRangeProps> = ({
   
  value = [],
  onChange,
  separator = '~',
  separatorGap =