69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import React, { useRef } from 'react';
|
|
|
|
interface MaxMinLenAttrIntr {
|
|
maxLength: number;
|
|
minLength: number;
|
|
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
|
}
|
|
|
|
const MaxMinLenAttr: React.FC<MaxMinLenAttrIntr> = ({ maxLength, minLength, handlePropertyChange }) => {
|
|
const firstChangedField = useRef<null | 'minLength' | 'maxLength'>(null);
|
|
|
|
const handleMaxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newMax = Number(e.target.value);
|
|
if (!firstChangedField.current) {
|
|
firstChangedField.current = 'maxLength';
|
|
}
|
|
|
|
if (firstChangedField.current === 'minLength' && newMax < minLength) {
|
|
alert(`Max Length must be greater than or equal to Min Length (${minLength})`);
|
|
return;
|
|
}
|
|
|
|
handlePropertyChange('maxLength', newMax);
|
|
};
|
|
|
|
const handleMinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newMin = Number(e.target.value);
|
|
if (!firstChangedField.current) {
|
|
firstChangedField.current = 'minLength';
|
|
}
|
|
|
|
if (firstChangedField.current === 'maxLength' && newMin > maxLength) {
|
|
alert(`Min Length must be less than or equal to Max Length (${maxLength})`);
|
|
return;
|
|
}
|
|
|
|
handlePropertyChange('minLength', newMin);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col">
|
|
<label className="font-medium" htmlFor="maxLength">Max Length</label>
|
|
<input
|
|
id="maxLength"
|
|
value={maxLength}
|
|
type="number"
|
|
min={0}
|
|
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
|
onChange={handleMaxChange}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<label className="font-medium" htmlFor="minLength">Min Length</label>
|
|
<input
|
|
id="minLength"
|
|
value={minLength}
|
|
type="number"
|
|
min={0}
|
|
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
|
onChange={handleMinChange}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MaxMinLenAttr;
|