You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.0 KiB
73 lines
2.0 KiB
import React, { useState, useEffect } from 'react'
|
|
import PropTypes from 'prop-types';
|
|
import { Modal, Input, Row, Col } from 'antd';
|
|
const { Search } = Input;
|
|
const RoadModal = props => {
|
|
const { isVisible, onSubmit, onCancel, roads } = props;
|
|
const [roadName, setRoadName] = useState('');
|
|
const [isRepeated, setIsRepeated] = useState(true);
|
|
|
|
let timer = null;
|
|
useEffect(() => {
|
|
if (timer)
|
|
clearTimeout(timer)
|
|
else {
|
|
timer = setTimeout(() => {
|
|
if (roads.some(item => item.roadName == roadName)) {
|
|
setIsRepeated(true)
|
|
} else {
|
|
setIsRepeated(false);
|
|
}
|
|
}, 500);
|
|
}
|
|
|
|
}, [roadName]);
|
|
|
|
|
|
useEffect(() => {
|
|
if (!isVisible) {
|
|
setRoadName('')
|
|
setIsRepeated(false)
|
|
}
|
|
return () => {
|
|
setRoadName('')
|
|
}
|
|
}, [isVisible])
|
|
|
|
|
|
const onInputText = (e) => {
|
|
const value = e.target.value;
|
|
setRoadName(value);
|
|
}
|
|
|
|
const onConfirm = () => {
|
|
if (!isRepeated)
|
|
if (roadName && roadName.trim() != '') {
|
|
onSubmit(roadName)
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<Modal title="添加道路" visible={isVisible} onOk={onConfirm} onCancel={onCancel} >
|
|
<Row type="flex" style={{ alignContent: 'center' }}>
|
|
<Col span={6}>
|
|
<span style={{ color: 'gray', lineHeight: "32px" }}>请输入道路名称:</span>
|
|
</Col>
|
|
<Col span={18}>
|
|
<Search placeholder='请输入道路名称' onChange={onInputText} value={roadName} />
|
|
</Col>
|
|
<Row>
|
|
{
|
|
isRepeated ? <span style={{ color: 'red' }}>道路名称重复</span>
|
|
: ''
|
|
}
|
|
</Row>
|
|
</Row>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
RoadModal.propTypes = {}
|
|
|
|
export default RoadModal
|