@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
398 lines (397 loc) • 16.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Area = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
var _react = require("react");
var _defaultProps = require("../default-props");
var computed = _interopRequireWildcard(require("./wxs"));
var _picker = _interopRequireDefault(require("./../picker"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["showToolbar", "value", "areaList", "columnsNum", "columnsPlaceholder", "onCancel", "onChange", "onConfirm", "className", "onInput", "title", "loading", "itemHeight", "visibleItemCount", "cancelButtonText", "confirmButtonText"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var d = (0, _defaultProps.get)().Area || {};
var EMPTY_CODE = '000000';
function Index(props, ref) {
var _d$props = _objectSpread(_objectSpread({}, d), props),
_d$props$showToolbar = _d$props.showToolbar,
showToolbar = _d$props$showToolbar === void 0 ? true : _d$props$showToolbar,
value = _d$props.value,
areaList = _d$props.areaList,
_d$props$columnsNum = _d$props.columnsNum,
columnsNum = _d$props$columnsNum === void 0 ? 3 : _d$props$columnsNum,
_d$props$columnsPlace = _d$props.columnsPlaceholder,
columnsPlaceholder = _d$props$columnsPlace === void 0 ? [] : _d$props$columnsPlace,
onCancel = _d$props.onCancel,
onChange = _d$props.onChange,
onConfirm = _d$props.onConfirm,
className = _d$props.className,
onInput = _d$props.onInput,
title = _d$props.title,
loading = _d$props.loading,
itemHeight = _d$props.itemHeight,
_d$props$visibleItemC = _d$props.visibleItemCount,
visibleItemCount = _d$props$visibleItemC === void 0 ? 6 : _d$props$visibleItemC,
_d$props$cancelButton = _d$props.cancelButtonText,
cancelButtonText = _d$props$cancelButton === void 0 ? '取消' : _d$props$cancelButton,
_d$props$confirmButto = _d$props.confirmButtonText,
confirmButtonText = _d$props$confirmButto === void 0 ? '确认' : _d$props$confirmButto,
others = (0, _objectWithoutProperties2.default)(_d$props, _excluded);
var pickerRef = (0, _react.useRef)(null);
var codeRef = (0, _react.useRef)('');
var columns = (0, _react.useMemo)(function () {
return [{
values: []
}, {
values: []
}, {
values: []
}];
}, []);
var _useState = (0, _react.useState)(),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
valueInner = _useState2[0],
setValueInner = _useState2[1];
var typeToColumnsPlaceholderRef = (0, _react.useRef)({});
(0, _react.useEffect)(function () {
if (!(0, _isEqual2.default)(value, valueInner)) {
setValueInner(value);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value]);
var _parseValues = (0, _react.useCallback)(function (values) {
return values.map(function (value, index) {
if (value && (!value.code || value.name === columnsPlaceholder[index])) {
return Object.assign(Object.assign({}, value), {
code: '',
name: ''
});
}
return value;
});
}, [columnsPlaceholder]);
var _getConfig = (0, _react.useCallback)(function (type) {
return areaList && areaList["".concat(type, "_list")] || {};
}, [areaList]);
var _getList = (0, _react.useCallback)(function (type, code) {
var _typeToColumnsPlaceho;
if (type !== 'province' && !code) {
return [];
}
// console.log(typeToColumnsPlaceholder)
var list = _getConfig(type);
var result = Object.keys(list).map(function (code) {
return {
code: code,
name: list[code]
};
});
if (code != null) {
// oversea code
if (code[0] === '9' && type === 'city') {
code = '9';
}
result = result.filter(function (item) {
return item.code.indexOf(code) === 0;
});
}
if ((_typeToColumnsPlaceho = typeToColumnsPlaceholderRef.current) !== null && _typeToColumnsPlaceho !== void 0 && _typeToColumnsPlaceho[type]) {
var _typeToColumnsPlaceho2;
// set columns placeholder
var codeFill = type === 'province' ? '' : type === 'city' ? EMPTY_CODE.slice(2, 4) : EMPTY_CODE.slice(4, 6);
result.unshift({
code: "".concat(code === undefined ? '' : code).concat(codeFill),
name: (_typeToColumnsPlaceho2 = typeToColumnsPlaceholderRef.current) === null || _typeToColumnsPlaceho2 === void 0 ? void 0 : _typeToColumnsPlaceho2[type]
});
}
return result;
}, [_getConfig]);
var _getIndex = (0, _react.useCallback)(function (type, code) {
var compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
var list = _getList(type, code.slice(0, compareNum - 2));
// oversea code
if (code[0] === '9' && type === 'province') {
compareNum = 1;
}
code = code.slice(0, compareNum);
for (var i = 0; i < list.length; i++) {
var _list$i, _list$i$code;
if ((list === null || list === void 0 ? void 0 : (_list$i = list[i]) === null || _list$i === void 0 ? void 0 : (_list$i$code = _list$i.code) === null || _list$i$code === void 0 ? void 0 : _list$i$code.slice(0, compareNum)) === code) {
return i;
}
}
return 0;
}, [_getList]);
var _getPicker = (0, _react.useCallback)(function () {
// console.log(picker)
return pickerRef.current;
}, []);
var _onCancel = (0, _react.useCallback)(function (event) {
onCancel === null || onCancel === void 0 ? void 0 : onCancel(event);
}, [onCancel]);
var _onConfirm = (0, _react.useCallback)(function (event) {
var _value;
var index = event.detail.index;
var value = event.detail.value;
value = _parseValues(value);
var val = (_value = value) === null || _value === void 0 ? void 0 : _value.map(function (it) {
return it.code;
}).filter(function (it) {
return !!it;
});
setValueInner(val);
if (onInput) {
onInput({
detail: {
value: val
}
});
}
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
detail: {
value: value.filter(function (it) {
return !!it.code;
}),
index: index
}
});
}, [_parseValues, onConfirm, onInput]);
var _getDefaultCode = (0, _react.useCallback)(function () {
if (columnsPlaceholder.length) {
return EMPTY_CODE;
}
var countyCodes = Object.keys(_getConfig('county'));
if (countyCodes[0]) {
return countyCodes[0];
}
var cityCodes = Object.keys(_getConfig('city'));
if (cityCodes[0]) {
return cityCodes[0];
}
return '';
}, [_getConfig, columnsPlaceholder]);
var _setValues = (0, _react.useCallback)(function () {
var picker = _getPicker();
if (!picker) {
return;
}
var code = (codeRef.current || _getDefaultCode()) + '';
var provinceList = _getList('province');
var cityList = _getList('city', code.slice(0, 2));
var stack = [];
var indexes = [];
if (columnsNum >= 1) {
stack.push(picker.setColumnValues(0, provinceList, false));
indexes.push(_getIndex('province', code));
}
if (columnsNum >= 2) {
stack.push(picker.setColumnValues(1, cityList, false));
indexes.push(_getIndex('city', code));
if (cityList.length && code.slice(2, 4) === '00') {
var _cityList$;
code = cityList === null || cityList === void 0 ? void 0 : (_cityList$ = cityList[0]) === null || _cityList$ === void 0 ? void 0 : _cityList$.code;
}
}
if (columnsNum === 3) {
stack.push(picker.setColumnValues(2, _getList('county', code.slice(0, 4)), false));
indexes.push(_getIndex('county', code));
}
return Promise.all(stack).then(function () {
// 由于picker.setColumnValues初始化每一项初始值的操作为异步
setTimeout(function () {
picker.setIndexes(indexes);
}, 120);
}).catch(function () {});
}, [_getDefaultCode, _getIndex, _getList, _getPicker, columnsNum, codeRef]);
var _onChange = (0, _react.useCallback)(function (event) {
var _a;
var _event$detail = event.detail,
index = _event$detail.index,
value = _event$detail.value,
picker = _event$detail.picker;
codeRef.current = value[index].code;
(_a = _setValues()) === null || _a === void 0 ? void 0 : _a.then(function () {
var event_ = {
detail: {
picker: picker,
values: _parseValues(picker.getValues()),
index: index
}
};
onChange === null || onChange === void 0 ? void 0 : onChange(event_);
});
}, [_parseValues, _setValues, onChange]);
var _getValues = (0, _react.useCallback)(function () {
var picker = _getPicker();
if (!picker) {
return [];
}
return _parseValues(picker.getValues().filter(function (value) {
return !!value;
}));
}, [_getPicker, _parseValues]);
var getDetail = (0, _react.useCallback)(function () {
var values = _getValues();
var area = {
code: '',
country: '',
province: '',
city: '',
county: ''
};
if (!values.length) {
return area;
}
var names = values.map(function (item) {
return item.name;
});
area.code = values[values.length - 1].code;
if (area.code[0] === '9') {
area.country = names[1] || '';
area.province = names[2] || '';
} else {
area.province = names[0] || '';
area.city = names[1] || '';
area.county = names[2] || '';
}
return area;
}, [_getValues]);
var reset = (0, _react.useCallback)(function (code) {
codeRef.current = code || '';
return _setValues();
}, [_setValues]);
(0, _react.useEffect)(function () {
typeToColumnsPlaceholderRef.current = {
province: columnsPlaceholder[0] || '',
city: columnsPlaceholder[1] || '',
county: columnsPlaceholder[2] || ''
};
}, [columnsPlaceholder]);
(0, _react.useEffect)(function () {
_setValues();
}, [_setValues, areaList, value]);
(0, _react.useImperativeHandle)(ref, function () {
return {
reset: reset,
getDetail: getDetail
};
});
function getPreviousCodes(currentCode, level) {
var provinceCode, cityCode;
switch (level) {
case 1:
// 如果选择了省份，则返回空对象
return {};
case 2:
// 如果选择了城市，则返回省份编码
provinceCode = currentCode.substring(0, 2) + '0000';
return {
provinceCode: provinceCode
};
case 3:
// 如果选择了区县，则返回省份和城市编码
cityCode = currentCode.substring(0, 4) + '00';
provinceCode = currentCode.substring(0, 2) + '0000';
return {
provinceCode: provinceCode,
cityCode: cityCode
};
default:
throw new Error('Invalid level');
}
}
var valueArr = (0, _react.useMemo)(function () {
if (valueInner) {
if (Array.isArray(valueInner)) {
return valueInner;
} else {
if (columnsNum === 3) {
var _getPreviousCodes = getPreviousCodes(valueInner, 3),
provinceCode = _getPreviousCodes.provinceCode,
cityCode = _getPreviousCodes.cityCode;
return [provinceCode, cityCode, valueInner];
} else if (columnsNum === 2) {
var _getPreviousCodes2 = getPreviousCodes(valueInner, 2),
_provinceCode = _getPreviousCodes2.provinceCode;
return [_provinceCode, valueInner];
} else {
return [valueInner];
}
}
} else {
return [];
}
}, [columnsNum, valueInner]);
(0, _react.useEffect)(function () {
codeRef.current = valueArr[valueArr.length - 1] || '';
}, [valueArr]);
var _renderContent = (0, _react.useCallback)(function () {
if (valueArr.length && areaList) {
var str = '';
if (valueArr[0] && areaList.province_list[valueArr[0]]) {
str += "".concat(areaList.province_list[valueArr[0]]);
}
if (valueArr[1] && areaList.city_list[valueArr[1]]) str += ",".concat(areaList.city_list[valueArr[1]]);
if (valueArr[2] && areaList.county_list[valueArr[2]]) str += ",".concat(areaList.county_list[valueArr[2]]);
return str || '请选择';
} else {
return '请选择';
}
}, [valueArr, areaList]);
var onClear = (0, _react.useCallback)(function () {
setTimeout(function () {
if (others.mode === 'content') {
onInput === null || onInput === void 0 ? void 0 : onInput({
detail: {
value: []
}
});
}
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
detail: {
value: []
}
});
setValueInner([]);
}, 33);
}, [onConfirm, onInput, others.mode]);
var onShow = function onShow() {
codeRef.current = valueArr[valueArr.length - 1] || '';
_setValues();
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_picker.default, _objectSpread({
onClear: onClear,
allowClear: !!valueArr.length,
onShow: onShow,
ref: pickerRef,
className: "van-area__picker ".concat(className, " ").concat(columnsPlaceholder !== null && columnsPlaceholder !== void 0 && columnsPlaceholder.length ? 'van-area__picker__has-placeholder' : ''),
showToolbar: showToolbar,
valueKey: "name",
title: title,
loading: loading,
columns: computed.displayColumns(columns, columnsNum),
itemHeight: itemHeight,
visibleItemCount: visibleItemCount,
cancelButtonText: cancelButtonText,
confirmButtonText: confirmButtonText,
onChange: _onChange,
onConfirm: _onConfirm,
onCancel: _onCancel,
value: valueArr,
renderContent: _renderContent,
idKey: "code"
}, others));
}
var Area = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(Index));
exports.Area = Area;
var _default = Area;
exports.default = _default;