PC地址选择器示例

import React, {useEffect, useState} from 'react';
import {CascaderSelect} from '@alifd/next';
import PropTypes from 'prop-types';
import {ProvinciaCascade} from '@api/publicInterface';
import useRequest from "@hooks/useRequest";

/**

• 1580043700@qq.com
• Zhang Jun
• createDate: 2020-12-11
• @param props
• @returns {*}
• @constructor 地址选择器,暂时不需要多选，后期有需求再加。

*/
const params = {token: sessionStorage.getItem('token')};

function Address(props) {
const {showSearch, onChange, disabled, value, dataSource, placeholder, resultAutoWidth, hasClear, depth} = props;
const [source, setSource] = useState([]);

const {data} = useRequest(ProvinciaCascade, params);

useEffect(() => {

   if (!dataSource) {
       setSource(formatData(data, depth));
   } else {
       setSource(dataSource);
   }

}, [dataSource, data]);

return (

   <CascaderSelect
       hasClear={hasClear}
       resultAutoWidth={resultAutoWidth}
       showSearch={showSearch}
       onChange={!!onChange && onChange}
       dataSource={dataSource ?? source}
       value={value && value[depth - 1]}
       disabled={disabled}
       placeholder={placeholder}
   />

);
}

const formatData = (data, depth) => {
if (!data || data.length === 0) {

   return [];

}
return format(data, depth);
};

const format = (data, depth) => {
depth -= 1;
if (depth === -1) {

   return null;

}
if (data) {

   return data.map((v) => {
       return {label: v.name, value: v.id, children: format(v.data, depth)};
   });

} else {

   return null;

}
};

Address.defaultProps = {
resultAutoWidth: false,
showSearch: false,
value: [],
disabled: false,
hasClear: true,
depth: 3,
};

Address.propTypes = {
onChange: PropTypes.func, //值改变
dataSource: PropTypes.array, //数据源，不传递则使用后台接口数据
value: PropTypes.array, //选中的数据
disabled: PropTypes.bool, //是否禁用
placeholder: PropTypes.string, //输入提示
depth: PropTypes.number, //地址显示深度1-3(省市区)，默认显示3(省市区)
showSearch: PropTypes.bool, //显示搜素，默认false
hasClear: PropTypes.bool, //是否可清空，默认true
resultAutoWidth: PropTypes.bool, // 搜索结果列表是否和选择框等宽,默认false
};

export default Address;