amis 2.0.0-rc.10 → 2.0.0-rc.16

package/esm/renderers/Form/InputCity.js

@@ -0,0 +1,347 @@
+/**
+ * amis v2.0.0-rc.16
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __decorate, __metadata, __awaiter, __generator } from 'tslib';
+import React from 'react';
+import { autobind, themeable, localeable, createObject, isMobile, FormItem } from 'amis-core';
+import { Select, Spinner, CityArea } from 'amis-ui';
+
+var CityPicker = /** @class */ (function (_super) {
+    __extends(CityPicker, _super);
+    function CityPicker() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            code: 0,
+            province: '',
+            provinceCode: 0,
+            city: '',
+            cityCode: 0,
+            district: '',
+            districtCode: 0,
+            street: ''
+        };
+        return _this;
+    }
+    CityPicker.prototype.componentDidMount = function () {
+        var _this = this;
+        this.loadDb(function () { return _this.syncIn(); });
+    };
+    CityPicker.prototype.componentDidUpdate = function (prevProps) {
+        var _this = this;
+        var props = this.props;
+        if (props.value !== prevProps.value) {
+            this.loadDb(function () { return _this.syncIn(props); });
+        }
+    };
+    CityPicker.prototype.loadDb = function (callback) {
+        var _this = this;
+        if (this.state.db) {
+            callback === null || callback === void 0 ? void 0 : callback();
+            return;
+        }
+        import('amis-ui/lib/components/CityDB').then(function (db) {
+            _this.setState({
+                db: __assign(__assign({}, db.default), { province: db.province, city: db.city, district: db.district })
+            }, callback);
+        });
+        // require.ensure(['./CityDB'], (db: any) =>
+        //   this.setState(
+        //     {
+        //       db: {
+        //         ...db.default,
+        //         province: db.province,
+        //         city: db.city,
+        //         district: db.district
+        //       }
+        //     },
+        //     callback
+        //   )
+        // );
+    };
+    CityPicker.prototype.handleProvinceChange = function (option) {
+        this.setState(option
+            ? {
+                province: option.label,
+                provinceCode: option.value,
+                city: '',
+                cityCode: 0,
+                district: '',
+                districtCode: 0,
+                street: '',
+                code: option ? option.value : 0
+            }
+            : {
+                code: 0,
+                province: '',
+                provinceCode: 0,
+                city: '',
+                cityCode: 0,
+                district: '',
+                districtCode: 0,
+                street: ''
+            }, this.syncOut);
+    };
+    CityPicker.prototype.handleCityChange = function (option) {
+        if (option.value % 100) {
+            return this.handleDistrictChange(option, {
+                cityCode: option.value
+            });
+        }
+        this.setState(option
+            ? {
+                city: option.label,
+                cityCode: option.value,
+                district: '',
+                districtCode: 0,
+                street: '',
+                code: option.value
+            }
+            : {
+                city: '',
+                cityCode: 0,
+                district: '',
+                districtCode: 0,
+                street: '',
+                code: this.state.provinceCode
+            }, this.syncOut);
+    };
+    CityPicker.prototype.handleDistrictChange = function (option, otherStates) {
+        if (otherStates === void 0) { otherStates = {}; }
+        this.setState(option
+            ? __assign(__assign({}, otherStates), { district: option.label, districtCode: option.value, street: '', code: option.value }) : __assign(__assign({}, otherStates), { district: '', districtCode: 0, street: '', code: this.state.cityCode }), this.syncOut);
+    };
+    CityPicker.prototype.handleStreetChange = function (e) {
+        this.setState({
+            street: e.currentTarget.value
+        });
+    };
+    CityPicker.prototype.handleStreetEnd = function () {
+        this.syncOut();
+    };
+    CityPicker.prototype.syncIn = function (props) {
+        var _a;
+        if (props === void 0) { props = this.props; }
+        var db = this.state.db;
+        var value = props.value, delimiter = props.delimiter;
+        if (!db) {
+            return;
+        }
+        var state = {
+            code: 0,
+            province: '',
+            provinceCode: 0,
+            city: '',
+            cityCode: 0,
+            district: '',
+            districtCode: 0,
+            street: ''
+        };
+        var code = (value && value.code) ||
+            (typeof value === 'number' && value) ||
+            (typeof value === 'string' && /(\d{6})/.test(value) && RegExp.$1);
+        if (code && db[code]) {
+            code = parseInt(code, 10);
+            state.code = code;
+            var provinceCode = code - (code % 10000);
+            if (db[provinceCode]) {
+                state.provinceCode = provinceCode;
+                state.province = db[provinceCode];
+            }
+            var cityCode = code - (code % 100);
+            if (cityCode !== provinceCode && db[cityCode]) {
+                state.cityCode = cityCode;
+                state.city = db[cityCode];
+            }
+            else if (~((_a = db.city[provinceCode]) === null || _a === void 0 ? void 0 : _a.indexOf(code))) {
+                state.cityCode = code;
+                state.city = db[code];
+            }
+            if (code % 100) {
+                state.district = db[code];
+                state.districtCode = code;
+            }
+        }
+        if (value && value.street) {
+            state.street = value.street;
+        }
+        else if (typeof value === 'string' && ~value.indexOf(delimiter)) {
+            state.street = value.slice(value.indexOf(delimiter) + delimiter.length);
+        }
+        this.setState(state);
+    };
+    CityPicker.prototype.syncOut = function () {
+        var _a = this.props, onChange = _a.onChange, allowStreet = _a.allowStreet, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter;
+        var _b = this.state, code = _b.code, province = _b.province, city = _b.city, district = _b.district, street = _b.street, provinceCode = _b.provinceCode, cityCode = _b.cityCode, districtCode = _b.districtCode;
+        if (typeof extractValue === 'undefined' ? joinValues : extractValue) {
+            code
+                ? onChange(allowStreet && street
+                    ? [code, street].join(delimiter)
+                    : String(code))
+                : onChange('');
+        }
+        else {
+            onChange({
+                code: code,
+                provinceCode: provinceCode,
+                province: province,
+                cityCode: cityCode,
+                city: city,
+                districtCode: districtCode,
+                district: district,
+                street: street
+            });
+        }
+    };
+    CityPicker.prototype.render = function () {
+        var _a, _b;
+        var _c = this.props, cx = _c.classnames, className = _c.className, disabled = _c.disabled, allowCity = _c.allowCity, allowDistrict = _c.allowDistrict, allowStreet = _c.allowStreet, searchable = _c.searchable, __ = _c.translate;
+        var _d = this.state, provinceCode = _d.provinceCode, cityCode = _d.cityCode, districtCode = _d.districtCode, street = _d.street, db = _d.db;
+        return db ? (React.createElement("div", { className: cx('CityPicker', className) },
+            React.createElement(Select, { searchable: searchable, disabled: disabled, options: db.province.map(function (item) { return ({
+                    label: db[item],
+                    value: item
+                }); }), value: provinceCode || '', onChange: this.handleProvinceChange }),
+            provinceCode &&
+                allowDistrict &&
+                Array.isArray(db.district[provinceCode]) ? (React.createElement(Select, { searchable: searchable, disabled: disabled, options: db.district[provinceCode].map(function (item) { return ({
+                    label: db[item],
+                    value: item
+                }); }), value: districtCode || '', onChange: this.handleDistrictChange })) : allowCity &&
+                db.city[provinceCode] &&
+                db.city[provinceCode].length ? (React.createElement(Select, { searchable: searchable, disabled: disabled, options: db.city[provinceCode].map(function (item) { return ({
+                    label: db[item],
+                    value: item
+                }); }), value: cityCode || '', onChange: this.handleCityChange })) : null,
+            cityCode &&
+                allowDistrict &&
+                ((_b = (_a = db.district[provinceCode]) === null || _a === void 0 ? void 0 : _a[cityCode]) === null || _b === void 0 ? void 0 : _b.length) ? (React.createElement(Select, { searchable: searchable, disabled: disabled, options: db.district[provinceCode][cityCode].map(function (item) { return ({
+                    label: db[item],
+                    value: item
+                }); }), value: districtCode || '', onChange: this.handleDistrictChange })) : null,
+            allowStreet && provinceCode ? (React.createElement("input", { className: cx('CityPicker-input'), value: street || '', onChange: this.handleStreetChange, onBlur: this.handleStreetEnd, placeholder: __('City.street'), disabled: disabled })) : null)) : (React.createElement(Spinner, { show: true, size: "sm" }));
+    };
+    CityPicker.defaultProps = {
+        joinValues: true,
+        extractValue: true,
+        delimiter: ',',
+        allowCity: true,
+        allowDistrict: true,
+        allowStreet: false
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], CityPicker.prototype, "handleProvinceChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], CityPicker.prototype, "handleCityChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], CityPicker.prototype, "handleDistrictChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], CityPicker.prototype, "handleStreetChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], CityPicker.prototype, "handleStreetEnd", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], CityPicker.prototype, "syncIn", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], CityPicker.prototype, "syncOut", null);
+    return CityPicker;
+}(React.Component));
+var ThemedCity = themeable(localeable(CityPicker));
+var LocationControl = /** @class */ (function (_super) {
+    __extends(LocationControl, _super);
+    function LocationControl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LocationControl.prototype.doAction = function (action, data, throwErrors) {
+        var _a = this.props, resetValue = _a.resetValue, onChange = _a.onChange;
+        var actionType = action === null || action === void 0 ? void 0 : action.actionType;
+        if (actionType === 'clear') {
+            onChange('');
+        }
+        else if (actionType === 'reset') {
+            onChange(resetValue !== null && resetValue !== void 0 ? resetValue : '');
+        }
+    };
+    LocationControl.prototype.handleChange = function (value) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, dispatchEvent, data, onChange, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, dispatchEvent = _a.dispatchEvent, data = _a.data, onChange = _a.onChange;
+                        return [4 /*yield*/, dispatchEvent('change', createObject(data, {
+                                value: value
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        onChange(value);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    LocationControl.prototype.render = function () {
+        var _a = this.props, value = _a.value, allowCity = _a.allowCity, allowDistrict = _a.allowDistrict, extractValue = _a.extractValue, joinValues = _a.joinValues, allowStreet = _a.allowStreet, disabled = _a.disabled, searchable = _a.searchable, env = _a.env, useMobileUI = _a.useMobileUI;
+        var mobileUI = useMobileUI && isMobile();
+        return mobileUI ? (React.createElement(CityArea, { value: value, popOverContainer: env && env.getModalContainer ? env.getModalContainer : undefined, onChange: this.handleChange, allowCity: allowCity, allowDistrict: allowDistrict, extractValue: extractValue, joinValues: joinValues, allowStreet: allowStreet, disabled: disabled, useMobileUI: useMobileUI })) : (React.createElement(ThemedCity, { searchable: searchable, value: value, onChange: this.handleChange, allowCity: allowCity, allowDistrict: allowDistrict, extractValue: extractValue, joinValues: joinValues, allowStreet: allowStreet, disabled: disabled }));
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object, Boolean]),
+        __metadata("design:returntype", void 0)
+    ], LocationControl.prototype, "doAction", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", Promise)
+    ], LocationControl.prototype, "handleChange", null);
+    return LocationControl;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(CheckboxControlRenderer, _super);
+    function CheckboxControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CheckboxControlRenderer = __decorate([
+        FormItem({
+            type: 'input-city',
+            sizeMutable: false
+        })
+    ], CheckboxControlRenderer);
+    return CheckboxControlRenderer;
+})(LocationControl));
+
+export { CityPicker, LocationControl, ThemedCity as default };