@pluve/ace
Version:
一套React版本的 Taro UI 组件库
77 lines • 4.3 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { Picker } from '@tarojs/components';
const getValueIndex = (value, valueKey, regionData) => {
const [provinceKey, cityKey, districtKey] = value;
const findProvinceIndex = regionData.findIndex(({ [valueKey]: valueKeyStr }) => valueKeyStr === provinceKey);
const provinceIndex = findProvinceIndex >= 0 ? findProvinceIndex : -1;
const cityData = (regionData[provinceIndex] && regionData[provinceIndex].children) || [];
const findCityIndex = cityData.findIndex(({ [valueKey]: valueKeyStr }) => valueKeyStr === cityKey);
const cityIndex = findCityIndex >= 0 ? findCityIndex : -1;
const districtData = (cityData[provinceIndex] && cityData[provinceIndex].children) || [];
const findDistrictIndex = districtData.findIndex(({ [valueKey]: valueKeyStr }) => valueKeyStr === districtKey);
const districtIndex = findDistrictIndex >= 0 ? findDistrictIndex : -1;
return [provinceIndex, cityIndex, districtIndex];
};
const getValueByIndex = (indexs, regionData) => {
const [provinceIndex, cityIndex, districtIndex] = indexs;
const province = regionData[provinceIndex] || {};
const city = (province.children || [])[cityIndex] || {};
const district = (city.children || [])[districtIndex] || {};
return {
code: [province.code, city.code, district.code],
label: [province.label || '', city.label || '', district.label || ''],
};
};
const RegionPicker = ({ name, valueKey = 'code', value: propsValue = [], regionData = [], onChange: propsOnChange, children, }) => {
const [value, setValue] = useState([]);
const [range, setRange] = useState([]);
const onColumnChange = (e) => {
const rangeTemp = range;
const valueTemp = value;
const { column, value: index } = e.detail;
switch (column) {
case 0: {
const cityTemp = (regionData[index] && regionData[index].children) || [];
rangeTemp[1] = cityTemp.map(({ label, code }) => ({ label, code }));
const districtTemp = (cityTemp[0] && cityTemp[0].children) || [];
rangeTemp[2] = districtTemp.map(({ label, code }) => ({ label, code }));
setValue([index, 0, 0]);
setRange(rangeTemp);
break;
}
case 1: {
const cityTemp = (regionData[valueTemp[0]] && regionData[valueTemp[0]].children) || [];
const districtTemp = (cityTemp[index] && cityTemp[index].children) || [];
rangeTemp[2] = districtTemp.map(({ label, code }) => ({ label, code }));
setValue([value[0], index, 0]);
setRange(rangeTemp);
break;
}
default: {
setValue([value[0], value[1], index]);
}
}
};
const onChange = (e) => {
const result = getValueByIndex(e.detail.value, regionData);
if (propsOnChange) {
propsOnChange(result);
}
};
useEffect(() => {
const provinceData = regionData.map(({ label, code }) => ({ label, code }));
const rangeTemp = [];
rangeTemp[0] = provinceData;
const [provinceIndex, cityIndex, districtIndex] = getValueIndex(propsValue, valueKey, regionData);
const currentProvince = regionData[provinceIndex > 0 ? provinceIndex : 0];
const cityTemp = (currentProvince && currentProvince.children) || [];
const currentCity = cityTemp[cityIndex > 0 ? cityIndex : 0];
const districtTemp = (currentCity && currentCity.children) || [];
setValue([provinceIndex, cityIndex, districtIndex]);
setRange([provinceData, cityTemp.map(({ label, code }) => ({ label, code })), districtTemp.map(({ label, code }) => ({ label, code }))]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(propsValue), JSON.stringify(regionData)]);
return (React.createElement(Picker, { name: name, value: value, rangeKey: "label", range: range, mode: "multiSelector", onColumnChange: onColumnChange, onChange: onChange }, children));
};
export default RegionPicker;
//# sourceMappingURL=index.js.map