amis-ui 2.9.0 → 3.1.0

package/esm/components/GaodeMapPicker.d.ts

@@ -0,0 +1,89 @@
+/// <reference types="lodash" />
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { ClassNamesFn } from 'amis-core';
+interface MapPickerProps {
+    ak: string;
+    coordinatesType: string;
+    classnames: ClassNamesFn;
+    classPrefix: string;
+    value?: {
+        address: string;
+        lat: number;
+        lng: number;
+        city?: string;
+    };
+    onChange?: (value: any) => void;
+}
+interface LocationItem {
+    title?: string;
+    address: string;
+    lat: number;
+    lng: number;
+    city?: string;
+}
+interface MapPickerState {
+    inputValue: string;
+    locIndex?: number;
+    locs: Array<LocationItem>;
+    sugs: Array<string>;
+}
+export declare class BaiduMapPicker extends React.Component<MapPickerProps, MapPickerState> {
+    state: MapPickerState;
+    id: string;
+    mapRef: React.RefObject<HTMLDivElement>;
+    resultListRef: React.RefObject<HTMLDivElement>;
+    placeholderInput?: HTMLInputElement;
+    map: any;
+    ac: any;
+    geocoder: any;
+    placeSearch: any;
+    mark: any;
+    geolocation: any;
+    search: import("lodash").DebouncedFunc<() => void>;
+    convertor: any;
+    componentDidMount(): void;
+    initMap(): Promise<void>;
+    syncLocation(lnglat: {
+        lng: number;
+        lat: number;
+        address?: string;
+        city?: string;
+    }): Promise<void>;
+    handleChange(e: React.ChangeEvent<HTMLInputElement>): void;
+    render(): React.JSX.Element;
+}
+declare const _default: {
+    new (props: Omit<MapPickerProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<MapPickerProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<MapPickerProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<MapPickerProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<MapPickerProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<MapPickerProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<MapPickerProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<MapPickerProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<MapPickerProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<MapPickerProps, keyof import("amis-core").ThemeProps> & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof BaiduMapPicker>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof BaiduMapPicker, {}> & {
+    ComposedComponent: typeof BaiduMapPicker;
+};
+export default _default;

package/esm/components/GaodeMapPicker.js

@@ -0,0 +1,204 @@
+/**
+ * amis-ui v3.1.0
+ * Copyright 2018-2023 fex
+ */
+
+import { __extends, __awaiter, __generator, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { uuid, loadStyle, loadScript, autobind, themeable } from 'amis-core';
+import debounce from 'lodash/debounce';
+
+var BaiduMapPicker = /** @class */ (function (_super) {
+    __extends(BaiduMapPicker, _super);
+    function BaiduMapPicker() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            inputValue: '',
+            locs: [],
+            locIndex: -1,
+            sugs: []
+        };
+        _this.id = uuid();
+        _this.mapRef = React__default.createRef();
+        _this.resultListRef = React__default.createRef();
+        _this.search = debounce(function () {
+            var _a;
+            if (_this.state.inputValue) {
+                (_a = _this.placeSearch) === null || _a === void 0 ? void 0 : _a.search(_this.state.inputValue);
+            }
+            else {
+                _this.setState({
+                    sugs: []
+                });
+            }
+        }, 250, {
+            trailing: true,
+            leading: false
+        });
+        return _this;
+    }
+    BaiduMapPicker.prototype.componentDidMount = function () {
+        if (window.AMap) {
+            this.initMap();
+        }
+        else {
+            loadStyle('https://cache.amap.com/lbs/static/main1119.css');
+            loadScript("//webapi.amap.com/maps?v=2.0&key=".concat(this.props.ak)).then(this.initMap);
+        }
+    };
+    BaiduMapPicker.prototype.initMap = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var map;
+            var _this = this;
+            return __generator(this, function (_a) {
+                map = new AMap.Map(this.mapRef.current, {
+                    resizeEnable: true,
+                    zoom: 13,
+                });
+                this.map = map;
+                map.plugin(["AMap.Geocoder"], function () {
+                    //加载地理编码插件
+                    _this.geocoder = new AMap.Geocoder({
+                        radius: 1000,
+                        extensions: "all", //返回地址描述以及附近兴趣点和道路信息，默认“base”
+                    });
+                });
+                map.plugin('AMap.Geolocation', function () {
+                    _this.geolocation = new AMap.Geolocation({
+                        enableHighAccuracy: true,
+                        timeout: 10000,
+                        maximumAge: 0,
+                        convert: true //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
+                    });
+                    map.addControl(_this.geolocation);
+                });
+                AMap.plugin(["AMap.PlaceSearch"], function () {
+                    //构造地点查询类
+                    _this.placeSearch = new AMap.PlaceSearch({
+                        pageSize: 5,
+                        pageIndex: 1,
+                        map: map,
+                        panel: _this.resultListRef.current,
+                        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
+                    });
+                    _this.placeSearch.on("selectChanged", function (e) {
+                        var poi = e.selected.data.location;
+                        _this.syncLocation({
+                            lng: poi.lng,
+                            lat: poi.lat,
+                            address: e.selected.data.address,
+                            city: e.selected.data.cityname,
+                        });
+                    });
+                });
+                if (this.props.value) {
+                    map.setZoomAndCenter(13, [this.props.value.lng, this.props.value.lat]);
+                    this.mark = new AMap.Marker({
+                        position: [this.props.value.lng, this.props.value.lat],
+                    });
+                    this.mark.setMap(map);
+                }
+                else {
+                    this.geolocation.getCurrentPosition(function (status, result) { });
+                }
+                map.on("click", function (e) {
+                    map.setCenter(e.lnglat);
+                    var marker = new AMap.Marker({
+                        position: [e.lnglat.lng, e.lnglat.lat],
+                    });
+                    marker.setMap(map);
+                    if (_this.mark) {
+                        _this.mark.setMap(null);
+                    }
+                    _this.mark = marker;
+                    _this.syncLocation(e.lnglat);
+                });
+                return [2 /*return*/];
+            });
+        });
+    };
+    BaiduMapPicker.prototype.syncLocation = function (lnglat) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                new Promise(function (resolve, reject) {
+                    var _a, _b;
+                    if (lnglat.address && lnglat.city) {
+                        var data = {
+                            lng: lnglat.lng,
+                            lat: lnglat.lat,
+                            address: lnglat.address,
+                            city: lnglat.city,
+                            vendor: "gaode",
+                        };
+                        if ((_a = _this.props) === null || _a === void 0 ? void 0 : _a.onChange)
+                            (_b = _this.props) === null || _b === void 0 ? void 0 : _b.onChange(data);
+                    }
+                    _this.geocoder.getAddress(lnglat, function (status, result) {
+                        var _a, _b;
+                        if (status === "complete" && result.info === "OK") {
+                            resolve({ status: status, result: result });
+                            var data = {
+                                lng: lnglat.lng,
+                                lat: lnglat.lat,
+                                address: result.regeocode.formattedAddress,
+                                city: result.regeocode.addressComponent.city ||
+                                    result.regeocode.addressComponent.province ||
+                                    result.regeocode.addressComponent.district,
+                                vendor: "gaode",
+                            };
+                            if ((_a = _this.props) === null || _a === void 0 ? void 0 : _a.onChange)
+                                (_b = _this.props) === null || _b === void 0 ? void 0 : _b.onChange(data);
+                        }
+                        else {
+                            reject({ status: status, result: result });
+                        }
+                    });
+                });
+                return [2 /*return*/];
+            });
+        });
+    };
+    BaiduMapPicker.prototype.handleChange = function (e) {
+        this.setState({
+            inputValue: e.currentTarget.value
+        }, this.search);
+    };
+    BaiduMapPicker.prototype.render = function () {
+        var cx = this.props.classnames;
+        var _a = this.state; _a.locIndex; _a.locs; var inputValue = _a.inputValue; _a.sugs;
+        // const hasSug = Array.isArray(sugs) && sugs.length;
+        return (React__default.createElement("div", { className: cx('MapPicker') },
+            React__default.createElement("div", { className: cx('MapPicker-search TextControl-control') },
+                React__default.createElement("div", { className: cx('TextControl-input') },
+                    React__default.createElement("input", { onChange: this.handleChange, value: inputValue, placeholder: "\u641C\u7D22\u5730\u70B9" }))),
+            React__default.createElement("div", { ref: this.mapRef, className: cx('MapPicker-map', {
+                    invisible: false
+                }) }),
+            React__default.createElement("div", { ref: this.resultListRef, className: cx('MapPicker-result', {
+                    invisible: false
+                }) })));
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Promise)
+    ], BaiduMapPicker.prototype, "initMap", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", Promise)
+    ], BaiduMapPicker.prototype, "syncLocation", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], BaiduMapPicker.prototype, "handleChange", null);
+    return BaiduMapPicker;
+}(React__default.Component));
+var GaodeMapPicker = themeable(BaiduMapPicker);
+
+export { BaiduMapPicker, GaodeMapPicker as default };

package/esm/components/GridNav.d.ts

@@ -3,7 +3,7 @@
  * @description 金刚位宫格导航 参考react-vant
  */
 import React from 'react';
-import { ClassNamesFn } from 'amis-core';
+import { ClassName, ClassNamesFn } from 'amis-core';
 import { BadgeProps } from './Badge';
 export type GridNavDirection = 'horizontal' | 'vertical';
 export interface GridNavProps {
@@ -24,7 +24,7 @@ export interface GridNavProps {
     /** 列数	 */
     columnNum?: number;
     className?: string;
-    itemClassName?: string;
+    itemClassName?: ClassName;
     classnames: ClassNamesFn;
     style?: React.CSSProperties;
     children?: React.ReactNode | Array<React.ReactNode>;
@@ -36,9 +36,9 @@ export interface GridNavItemProps {
     text?: string | React.ReactNode;
     /** 图标名称或图片链接	 */
     icon?: string | React.ReactNode;
-    className?: string;
+    className?: ClassName;
     style?: React.CSSProperties;
-    contentClassName?: string;
+    contentClassName?: ClassName;
     contentStyle?: React.CSSProperties;
     children?: React.ReactNode;
     classnames: ClassNamesFn;

package/esm/components/GridNav.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.9.0
+ * amis-ui v3.1.0
  * Copyright 2018-2023 fex
  */