jacy
8c4419e04e
CI / verify (pull_request) Has been cancelled
Region partners only select districts under the chosen city; overlap errors name the occupying partner. Co-authored-by: Cursor <cursoragent@cursor.com>
43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { Select } from 'antd';
|
|
import { getDistrictOptionsByCityCode } from '../lib/china-region';
|
|
|
|
type Props = {
|
|
cityCode?: string | null;
|
|
value?: string[];
|
|
onChange?: (value: string[]) => void;
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
/** 已选开城城市后，仅多选该市下区县（不再选省/市） */
|
|
export default function CityDistrictMultiSelect({
|
|
cityCode,
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
disabled,
|
|
}: Props) {
|
|
const options = useMemo(() => getDistrictOptionsByCityCode(cityCode), [cityCode]);
|
|
const ready = Boolean(cityCode) && options.length > 0;
|
|
|
|
return (
|
|
<Select
|
|
mode="multiple"
|
|
allowClear
|
|
showSearch
|
|
optionFilterProp="label"
|
|
value={value}
|
|
onChange={onChange}
|
|
disabled={disabled || !ready}
|
|
placeholder={
|
|
placeholder ??
|
|
(cityCode ? (ready ? '请选择区县（可多选）' : '该城市暂无区县数据') : '请先选择开城城市')
|
|
}
|
|
options={options}
|
|
style={{ width: '100%' }}
|
|
maxTagCount="responsive"
|
|
/>
|
|
);
|
|
}
|