knk
Version:
react components based on react
89 lines (88 loc) • 2.69 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/**
* 省市区级联组件
*/
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Row, Col, Cascader, Input } from 'antd';
import { useSetState } from 'ahooks';
import { getCityTreeData } from '../../../common/tool';
import RULE from '../../../enums/rule';
// 封装组件
var AddressSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _useSetState = useSetState({
options: [],
level: props.level || 3,
selectValue: props.value.slice(0, 3),
initValue: props.value.slice(3)
}),
_useSetState2 = _slicedToArray(_useSetState, 2),
state = _useSetState2[0],
setState = _useSetState2[1];
useEffect(function () {
var level = state.level;
var data = getCityTreeData(level);
setState({
options: data
});
}, []);
var selectChange = function selectChange(data) {
var onChange = props.onChange;
var initValue = state.initValue;
setState({
selectValue: data
});
onChange(data.concat(initValue));
};
var inputChange = function inputChange(event) {
var onChange = props.onChange;
var selectValue = state.selectValue;
var inputValue = event.target.value;
var data = inputValue ? [inputValue] : [];
setState({
initValue: data
});
onChange(selectValue.concat(data));
};
var options = state.options,
level = state.level,
initValue = state.initValue,
selectValue = state.selectValue;
var input = initValue.join();
var inputLength = input.length;
var disabled = props.disabled;
return /*#__PURE__*/React.createElement("div", {
ref: ref
}, level === 4 ? /*#__PURE__*/React.createElement(Row, {
gutter: 8
}, /*#__PURE__*/React.createElement(Col, {
span: 12
}, /*#__PURE__*/React.createElement(Cascader, {
disabled: disabled,
defaultValue: selectValue,
options: options,
onChange: selectChange,
placeholder: "\u8BF7\u9009\u62E9"
})), /*#__PURE__*/React.createElement(Col, {
span: 12
}, /*#__PURE__*/React.createElement(Input, {
disabled: disabled,
defaultValue: input,
maxLength: RULE.addressLength,
onChange: inputChange,
suffix: "".concat(inputLength, "/").concat(RULE.addressLength)
}))) : /*#__PURE__*/React.createElement(Cascader, {
disabled: disabled,
defaultValue: selectValue,
options: options,
onChange: selectChange,
placeholder: "\u8BF7\u9009\u62E9"
}));
});
AddressSelect.propTypes = {
level: PropTypes.number,
value: PropTypes.array,
disabled: PropTypes.bool,
onChange: PropTypes.func
};
export default AddressSelect;