fastlion-amis
Version:
一种MIS页面生成工具
178 lines (177 loc) • 8.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/**
* @file 移动端城市选择器
*/
var react_1 = tslib_1.__importStar(require("react"));
var Picker_1 = (0, tslib_1.__importDefault)(require("./Picker"));
var ResultBox_1 = (0, tslib_1.__importDefault)(require("./ResultBox"));
var hooks_1 = require("../hooks");
var locale_1 = require("../locale");
var theme_1 = require("../theme");
var uncontrollable_1 = require("uncontrollable");
var PopUp_1 = (0, tslib_1.__importDefault)(require("./PopUp"));
var CityArea = (0, react_1.memo)(function (props) {
var _a;
var _b = props.joinValues, joinValues = _b === void 0 ? true : _b, _c = props.extractValue, extractValue = _c === void 0 ? true : _c, _d = props.delimiter, delimiter = _d === void 0 ? ',' : _d, _e = props.allowCity, allowCity = _e === void 0 ? true : _e, _f = props.allowDistrict, allowDistrict = _f === void 0 ? true : _f, _g = props.allowStreet, allowStreet = _g === void 0 ? false : _g,
// 默认北京东城区
_h = props.value,
// 默认北京东城区
value = _h === void 0 ? 110101 : _h, cx = props.classnames, __ = props.translate, _j = props.disabled, disabled = _j === void 0 ? false : _j, popOverContainer = props.popOverContainer, useMobileUI = props.useMobileUI;
var _k = (0, react_1.useState)([]), values = _k[0], setValues = _k[1];
var _l = (0, react_1.useState)(''), street = _l[0], setStreet = _l[1];
var _m = (0, react_1.useState)(), confirmValues = _m[0], setConfirmValues = _m[1];
var _o = (0, hooks_1.useSetState)(), db = _o[0], updateDb = _o[1];
var _p = (0, hooks_1.useSetState)({
columns: []
}), state = _p[0], updateState = _p[1];
var _q = (0, react_1.useState)(false), isOpened = _q[0], setIsOpened = _q[1];
var onChange = function (columnValues, columnIndex) {
var _a, _b, _c, _d, _e;
// 清空后面的值
while (columnValues[columnIndex++]) {
columnValues[columnIndex++] = -1;
}
var provience = columnValues[0], city = columnValues[1], district = columnValues[2];
if (city === -1) {
city = (_b = (_a = db.city) === null || _a === void 0 ? void 0 : _a[provience]) === null || _b === void 0 ? void 0 : _b[0];
}
if (district === -1) {
district = (_e = (_d = (_c = db.district) === null || _c === void 0 ? void 0 : _c[provience]) === null || _d === void 0 ? void 0 : _d[city]) === null || _e === void 0 ? void 0 : _e[0];
}
var tempValues = [provience, city, district];
if (!allowDistrict) {
tempValues.splice(2, 1);
}
if (!allowCity) {
tempValues.splice(1, 1);
}
setValues(tempValues);
};
var propsChange = function () {
var onChange = props.onChange;
var province = values[0], city = values[1], district = values[2];
var code = allowDistrict && district
? district
: allowCity && city
? city
: province;
if (typeof extractValue === 'undefined' ? joinValues : extractValue) {
code
? onChange(allowStreet && street
? [code, street].join(delimiter)
: String(code))
: onChange('');
}
else {
onChange({
code: code,
province: db[province],
city: db[city],
district: db[district],
street: street
});
}
};
var onConfirm = function () {
var confirmValues = values.map(function (item) { return ({
text: db[item],
value: item
}); });
setConfirmValues(confirmValues);
propsChange();
setIsOpened(false);
};
var onCancel = function () {
setIsOpened(false);
if (props.onCancel)
props.onCancel();
};
var getPropsValue = function () {
var _a;
// 最后一项的值
var code = (value && value.code) ||
(typeof value === 'number' && value) ||
(typeof value === 'string' && /(\d{6})/.test(value) && RegExp.$1);
var values = [];
if (code && db[code]) {
code = parseInt(code, 10);
var provinceCode = code - (code % 10000);
var cityCode = code - (code % 100);
if (db[provinceCode]) {
values[0] = provinceCode;
}
if (db[cityCode] && allowCity) {
values[1] = cityCode;
}
else if (~((_a = db.city[provinceCode]) === null || _a === void 0 ? void 0 : _a.indexOf(code)) && allowCity) {
values[1] = code;
}
if (code % 100 && allowDistrict) {
values[2] = code;
}
setValues(values);
}
};
var updateColumns = function () {
if (!db) {
return;
}
var provience = values[0], city = values[1], district = values[2];
var provienceColumn = db.province.map(function (code) {
return { text: db[code], value: code, disabled: disabled };
});
var cityColumn = city
? db.city[provience].map(function (code) {
return { text: db[code], value: code, disabled: disabled };
})
: [];
var districtColumn = city && district
? db.district[provience][city].map(function (code) {
return { text: db[code], value: code, disabled: disabled };
})
: [];
var columns = [
{ options: provienceColumn },
{ options: cityColumn },
{ options: districtColumn }
];
if (!allowDistrict || !allowCity) {
columns.splice(2, 1);
}
if (!allowCity) {
columns.splice(1, 1);
}
updateState({ columns: columns });
};
var loadDb = function () {
Promise.resolve().then(function () { return new Promise(function(resolve){require(['../renderers/Form/CityDB'], function(ret) {resolve(tslib_1.__importStar(ret));})}); }).then(function (db) {
updateDb((0, tslib_1.__assign)((0, tslib_1.__assign)({}, db.default), { province: db.province, city: db.city, district: db.district }));
});
};
(0, react_1.useEffect)(function () {
loadDb();
}, []);
(0, react_1.useEffect)(function () {
isOpened && db && getPropsValue();
}, [db, isOpened]);
(0, react_1.useEffect)(function () {
street && propsChange();
}, [street]);
(0, hooks_1.useUpdateEffect)(function () {
values.length && updateColumns();
}, [values]);
var result = (_a = confirmValues === null || confirmValues === void 0 ? void 0 : confirmValues.filter(function (item) { return item === null || item === void 0 ? void 0 : item.value; })) === null || _a === void 0 ? void 0 : _a.map(function (item) { return item.text; }).join(delimiter);
return (react_1.default.createElement("div", { className: cx("CityArea") },
react_1.default.createElement(ResultBox_1.default, { className: cx('CityArea-Input', isOpened ? 'is-active' : ''), allowInput: false, result: result, onResultChange: function () { }, onResultClick: function () { return setIsOpened(!isOpened); }, placeholder: __('Condition.cond_placeholder'), useMobileUI: useMobileUI }),
allowStreet && values[0] ? (react_1.default.createElement("input", { className: cx('CityArea-Input'), value: street, onChange: function (e) {
return setStreet(e.currentTarget.value);
}, placeholder: __('City.street'), disabled: disabled })) : null,
react_1.default.createElement(PopUp_1.default, { className: cx("CityArea-popup"), container: popOverContainer, isShow: isOpened, showConfirm: true, onConfirm: onConfirm, onHide: onCancel },
react_1.default.createElement(Picker_1.default, { className: 'CityArea-picker', columns: state.columns, onChange: onChange, showToolbar: false, labelField: "text", itemHeight: 40, value: values, classnames: props.classnames, classPrefix: props.classPrefix }))));
});
exports.default = (0, theme_1.themeable)((0, locale_1.localeable)((0, uncontrollable_1.uncontrollable)(CityArea, {
value: 'onChange'
})));
//# sourceMappingURL=./components/CityArea.js.map