42 lines
1.5 KiB
Plaintext
42 lines
1.5 KiB
Plaintext
import React, { useState } from 'react';
|
|
import './NumberRangeInput.css';
|
|
|
|
export default function NumberRangeInput({
|
|
value = ['', ''], step = 1, min = -Infinity, max = Infinity,
|
|
separator = '—', unit = '', placeholder = ['最小', '最大'], onChange, onError
|
|
}) {
|
|
const [errorMsg, setErrorMsg] = useState('');
|
|
|
|
function validate(arr) {
|
|
const a = parseFloat(arr[0]), b = parseFloat(arr[1]);
|
|
let err = '';
|
|
if (arr[0] !== '' && (a < min || a > max)) err = `最小值需在 ${min}~${max}`;
|
|
else if (arr[1] !== '' && (b < min || b > max)) err = `最大值需在 ${min}~${max}`;
|
|
else if (arr[0] !== '' && arr[1] !== '' && a > b) err = '最小值不能大于最大值';
|
|
setErrorMsg(err);
|
|
onError && onError(err);
|
|
}
|
|
function onMin(e) {
|
|
const arr = [e.target.value, value[1]];
|
|
validate(arr);
|
|
onChange && onChange(arr);
|
|
}
|
|
function onMax(e) {
|
|
const arr = [value[0], e.target.value];
|
|
validate(arr);
|
|
onChange && onChange(arr);
|
|
}
|
|
|
|
return (
|
|
<div className={'aa-numrange' + (errorMsg ? ' is-error' : '')}>
|
|
<input type="number" value={value[0]} step={step} min={min} max={max}
|
|
placeholder={placeholder[0]} onChange={onMin} />
|
|
<span className="aa-numrange-sep">{separator}</span>
|
|
<input type="number" value={value[1]} step={step} min={min} max={max}
|
|
placeholder={placeholder[1]} onChange={onMax} />
|
|
{unit ? <span className="aa-numrange-unit">{unit}</span> : null}
|
|
{errorMsg ? <span className="aa-numrange-msg">{errorMsg}</span> : null}
|
|
</div>
|
|
);
|
|
}
|