@cloudbase/weda-ui 3.1.0 → 3.1.1

package/dist/web/components/form/location/components/LocationH5/location.h5.js

@@ -0,0 +1,347 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import * as React from 'react';
+import classNames from '../../../../../utils/classnames';
+import weui from '../../../../../utils/weui';
+import './index.css';
+import { renderDecorator } from '../../../renderDecorator';
+import MapView from '../../common/mapView';
+import SelectModal from '../../common/selectModal';
+import { propTypes, defaultProps } from '../../common/propsConfig';
+import { callDataSource } from '../../../../../utils/tcb';
+import { inH5IsMobile } from '../../../../../utils/platform';
+const { useEffect, useState, useRef } = React;
+export default function LocationH5(props) {
+    const { 
+    // 系统属性
+    id, className, style, events, 
+    // 组件属性
+    value, label, labelVisible, showLngLat, showMap, drag, zoom, disabled, requiredFlag, decorator, customLocation, locationType, dataSource, layout, locationRange, customRange, } = props;
+    const cls = classNames({
+        'weda-ui': true,
+        cloudbase_standard: true,
+        [className]: className,
+    });
+    const [isSelectMapVisible, setIsSelectMapVisible] = useState(false);
+    const [currentLocStatus, setCurrentLocStatus] = useState(false);
+    const [dataSourceStatus, setDataSourceStatus] = useState({
+        status: false,
+        message: '定位功能初始化中，请稍后重试',
+    });
+    const [APIKEY, setAPIKEY] = useState('');
+    const [apiKeyStatus, setApiKeyStatus] = useState({
+        status: false,
+        message: '定位功能初始化中，请稍后重试',
+    });
+    const [location, setLocation] = useState({
+        detailedAddress: '',
+        poiname: '',
+        latlng: { lat: 39.98410411, lng: 116.307503 },
+    });
+    const currentLocations = useRef();
+    useEffect(() => {
+        if (value || !currentLocations.current)
+            return;
+        // 重置表单时
+        const { poiname, detailedAddress, latlng: { lat, lng }, } = currentLocations.current;
+        let location = {
+            poiname,
+            detailedAddress,
+            latlng: { lat, lng },
+        };
+        if (locationType === 1) {
+            location.locationType = 1;
+            events.change({ value: {} });
+        }
+        else if (locationType === 2) {
+            let res = {
+                value: {
+                    address: poiname,
+                    detailedAddress,
+                    geopoint: {
+                        coordinates: [lng, lat],
+                        type: 'Point',
+                    },
+                },
+            };
+            events.change && events.change(res);
+        }
+        setLocation(location);
+    }, [value, locationType]);
+    useEffect(() => {
+        let loc = {
+            latlng: {
+                lat: 39.98410411,
+                lng: 116.307503,
+            },
+            poiname: '',
+            detailedAddress: '',
+            locationType,
+        };
+        switch (locationType) {
+            case 3:
+                if (checkCustomLocation(customLocation)) {
+                    showToast('位置输入格式错误请检查');
+                    return;
+                }
+                else {
+                    loc = {
+                        latlng: {
+                            lat: customLocation.latitude,
+                            lng: customLocation.longitude,
+                        },
+                        poiname: customLocation.poiname,
+                    };
+                }
+                break;
+        }
+        setLocation(loc);
+        // 暂不支持自定位置，初始化表单值都是{}
+        events.change({ value: {} });
+    }, [locationType]);
+    useEffect(() => {
+        if (locationType != 3) {
+            return;
+        }
+        if (checkCustomLocation(customLocation)) {
+            showToast('位置输入格式错误请检查');
+            return;
+        }
+        let { latitude, longitude, poiname } = customLocation;
+        let loc = {
+            latlng: {
+                lat: latitude,
+                lng: longitude,
+            },
+            poiname: poiname,
+            detailedAddress: '',
+        };
+        setLocation(loc);
+    }, [customLocation, locationType]);
+    // 获取定位信息
+    useEffect(() => {
+        if (!dataSourceStatus.status ||
+            !APIKEY ||
+            new RegExp('[\\u4E00-\\u9FFF]+', 'g').test(APIKEY))
+            return;
+        function loadScript() {
+            // 移除之前的
+            if (document.getElementById('form-location-plug')) {
+                document.body.removeChild(document.getElementById('form-location-plug'));
+            }
+            const script = document.createElement('script');
+            script.type = 'text/javascript';
+            script.src = `https://apis.map.qq.com/tools/geolocation/min?key=${APIKEY}&referer=myapp`;
+            script.setAttribute('id', 'form-location-plug');
+            script.onload = () => {
+                let geolocation = new window.qq.maps.Geolocation();
+                let getLocationType = inH5IsMobile() ? 'getLocation' : 'getIpLocation';
+                geolocation[getLocationType]((ipLocation) => {
+                    const { city, lat, lng, addr } = ipLocation;
+                    let loc = {
+                        poiname: city + addr,
+                        detailedAddress: city + addr,
+                        latlng: { lat, lng },
+                    };
+                    if (locationType === 1) {
+                        loc.locationType = 1;
+                    }
+                    setLocation(loc);
+                    currentLocations.current = loc;
+                    if (locationType === 2) {
+                        loc.locationType = 1;
+                        events.change &&
+                            events.change({
+                                value: {
+                                    address: city + addr,
+                                    detailedAddress: city + addr,
+                                    geopoint: {
+                                        coordinates: [lng, lat],
+                                        type: 'Point',
+                                    },
+                                },
+                            });
+                    }
+                    setApiKeyStatus({
+                        status: true,
+                        message: '',
+                    });
+                    setCurrentLocStatus(true);
+                }, (error) => {
+                    console.log('error loc', error);
+                    currentLocations.current = null;
+                    setApiKeyStatus({
+                        status: false,
+                        message: error.code === 1
+                            ? '请打开定位权限'
+                            : error.message || '定位失败',
+                    });
+                    setCurrentLocStatus(false);
+                });
+            };
+            script.onerror = (error) => {
+                console.log('Geolocation script onerror', error);
+                setApiKeyStatus({
+                    status: false,
+                    message: '定位失败',
+                });
+                setLocation({
+                    poiname: '',
+                    detailedAddress: '',
+                    latlng: { lat: 39.98410411, lng: 116.307503 },
+                });
+                showToast('定位失败');
+            };
+            document.body.appendChild(script);
+        }
+        loadScript();
+    }, [APIKEY, locationType, dataSourceStatus]);
+    useEffect(() => {
+        // 调用连接器数据源方法
+        if (dataSource.name) {
+            callDataSource({
+                dataSourceName: dataSource.name,
+                methodName: 'getApiKey',
+            })
+                .then((res) => {
+                if (res.apiKey) {
+                    setAPIKEY(res.apiKey);
+                    setDataSourceStatus({
+                        status: true,
+                        message: '',
+                    });
+                    setApiKeyStatus({
+                        status: true,
+                        message: '',
+                    });
+                }
+            })
+                .catch((error) => {
+                console.log('datasources error', error);
+                setDataSourceStatus({
+                    status: false,
+                    message: error,
+                });
+            });
+        }
+        else {
+            setDataSourceStatus({
+                status: false,
+                message: '请配置地图连接器',
+            });
+            showToast('请配置地图连接器');
+        }
+    }, [dataSource]);
+    const checkCustomLocation = (params) => {
+        let { latitude, longitude } = params;
+        let message = '';
+        if (Object.prototype.toString.call(params) !== '[object Object]') {
+            return (message = '位置输入格式错误 请检查');
+        }
+        else if (!latitude || !Number(latitude)) {
+            return (message = '位置输入格式错误 请检查');
+        }
+        else if (!longitude || !Number(longitude)) {
+            return (message = '位置输入格式错误 请检查');
+        }
+        else if (!params) {
+            return (message = '位置输入格式错误 请检查');
+        }
+    };
+    const showToast = (message) => {
+        weui.toast(message, {
+            duration: 2000,
+            className: 'weui-form-location_toast',
+        });
+    };
+    const handleChooseLocation = () => {
+        if (disabled)
+            return;
+        if (!dataSourceStatus.status)
+            return showToast(dataSourceStatus.message);
+        if (!apiKeyStatus.status)
+            return showToast(apiKeyStatus.message);
+        if (!currentLocStatus)
+            return showToast('获取位置信息中，请稍后重试');
+        setIsSelectMapVisible(true);
+    };
+    const onChangeLocation = (value) => {
+        const { poiname, latlng, detailedAddress } = value;
+        let res = {
+            value: {
+                address: poiname,
+                detailedAddress,
+                geopoint: {
+                    coordinates: [latlng.lng, latlng.lat],
+                    type: 'Point',
+                },
+            },
+        };
+        events.change && events.change(res);
+    };
+    const getIsShowMap = () => {
+        let status = showMap;
+        if (locationType === 1 && location.locationType === 1) {
+            status = false;
+        }
+        else if (locationType === 2 && !dataSourceStatus.status) {
+            status = false;
+        }
+        else if (locationType === 2 && !apiKeyStatus.status) {
+            status = false;
+        }
+        else if (!currentLocStatus) {
+            status = false;
+        }
+        return status;
+    };
+    const getIsShowAddr = () => {
+        let status = true;
+        if (locationType === 1 && location.locationType === 1) {
+            status = false;
+        }
+        else if (locationType === 2 && !dataSourceStatus.status) {
+            status = false;
+        }
+        else if (locationType === 2 && !apiKeyStatus.status) {
+            status = false;
+        }
+        else if (!currentLocStatus) {
+            status = false;
+        }
+        return status;
+    };
+    const LocationEl = (React.createElement("div", { className: "form-location weda-ui_form-location", "data-testid": "form-location" },
+        React.createElement("div", { className: "form-location-warp", style: { display: layout === 'vertical' ? 'block' : 'flex' } },
+            labelVisible && (React.createElement("div", { className: "form-location-label" },
+                React.createElement("label", null, label),
+                requiredFlag && React.createElement("span", null, "*"))),
+            React.createElement("div", { className: classNames({
+                    'form-location-con': true,
+                    'form-location-con_vertical': layout === 'vertical',
+                }) },
+                React.createElement("img", { src: "https://qcloudimg.tencent-cloud.cn/raw/6542e1ce1dd36a90085b2eb979801df9.png", alt: "" }),
+                React.createElement("span", { className: classNames({ 'form-location-con_disabled': disabled }), onClick: handleChooseLocation }, "\u9009\u62E9\u5730\u7406\u4F4D\u7F6E"))),
+        getIsShowAddr() && (React.createElement("div", { className: classNames({
+                'form-location-addr': true,
+                'form-location-addr-vertical': layout === 'vertical',
+            }) },
+            React.createElement("img", { src: "https://qcloudimg.tencent-cloud.cn/raw/f9729e0b091f394110a6e12d3f4e7290.png", alt: "" }),
+            React.createElement("div", null,
+                location.poiname && (React.createElement("div", { className: "form-location-addr-title" }, location.poiname)),
+                showLngLat && (React.createElement("div", { className: "form-location-addr-lat" }, location.latlng
+                    ? `${location.latlng.lat}N,${location.latlng.lng}E`
+                    : ''))))),
+        getIsShowMap() && (React.createElement("div", { className: "form-map-container", style: { height: '200px' } },
+            React.createElement(MapView, { APIKEY: APIKEY, drag: drag, zoom: zoom, latlng: location.latlng }))),
+        React.createElement(SelectModal, { isSelectMapVisible: isSelectMapVisible, setIsSelectMapVisible: setIsSelectMapVisible, location: location, currentLocations: currentLocations.current, setLocation: setLocation, chooseLocation: onChangeLocation, APIKEY: APIKEY, locationRange: locationRange, customRange: customRange })));
+    return renderDecorator(LocationEl, decorator)({
+        id,
+        className: cls,
+        style,
+        multiCell: false,
+        requiredFlag,
+    });
+}
+LocationH5.propTypes = propTypes;
+LocationH5.defaultProps = defaultProps;

package/dist/web/components/form/location/components/LocationPC/Header.d.ts

@@ -0,0 +1,12 @@
+export default Header;
+declare function Header({ onClick, isEdit, info, disabled, showLngLat, locationType, dataSourceStatus, apiKeyStatus, currentLocStatus, }: {
+    onClick: any;
+    isEdit: any;
+    info: any;
+    disabled: any;
+    showLngLat: any;
+    locationType: any;
+    dataSourceStatus: any;
+    apiKeyStatus: any;
+    currentLocStatus: any;
+}): JSX.Element;

package/dist/web/components/form/location/components/LocationPC/Header.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { Button } from 'tea-component';
+import classNames from '../../../../../utils/classnames';
+const Header = ({ onClick, isEdit, info, disabled, showLngLat, locationType, dataSourceStatus, apiKeyStatus, currentLocStatus, }) => {
+    const { poiname, latlng } = info || {};
+    const buttonType = isEdit ? 'weak' : 'primary';
+    const buttonText = isEdit ? '重新定位' : '选择地理位置';
+    const getIsShowAddr = () => {
+        let status = true;
+        // 默认显示位置 无
+        if (locationType === 1 && info.locationType === 1) {
+            status = false;
+        }
+        else if (locationType === 2 && !dataSourceStatus) {
+            status = false;
+        }
+        else if (locationType === 2 && !apiKeyStatus.status) {
+            status = false;
+        }
+        else if (!currentLocStatus) {
+            status = false;
+        }
+        return status;
+    };
+    return (React.createElement("div", { className: classNames({
+            'wedatea2td-justify-grid _weda-fn-map__local': true,
+            'weda-fn-map__local_loc': true,
+            'weda-fn-map__local_edit': isEdit,
+        }) },
+        isEdit ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "wedatea2td-justify-grid__col wedatea2td-justify-grid__col--right weda-fn-map__local_loc_btn" },
+                React.createElement(Button, { type: buttonType, onClick: onClick, disabled: disabled }, buttonText)))) : (React.createElement("div", { className: "wedatea2td-justify-grid__col wedatea2td-justify-grid__col--left weda-fn-map__local_loc_btn_left" },
+            React.createElement(Button, { type: buttonType, onClick: onClick, disabled: disabled }, buttonText))),
+        getIsShowAddr() && (React.createElement("div", { className: classNames('wedatea2td-justify-grid__col', 'wedatea2td-justify-grid__col--left', 'weda-fn-map__local_wrap') },
+            React.createElement("i", { className: "wedatea2td-icon _weda-fn-icon-local weda-fn-map__local_wrap_icon" }),
+            React.createElement("div", { className: "weda-fn-map__local_wrap_addr" },
+                poiname && (React.createElement("span", { className: classNames('wedatea2td-fz-reset', 'form-location-map-pc-address') }, poiname)),
+                showLngLat ? (React.createElement("div", { className: classNames({
+                        'form-location-addr-lat': true,
+                        'form-location-map-pc-latlng': true,
+                    }) }, latlng.lat ? `${latlng.lat}N,${latlng.lng}E` : '')) : null)))));
+};
+export default Header;

package/dist/web/components/form/location/components/LocationPC/index.css

@@ -0,0 +1,40 @@
+.form-location-map-pc {
+  width: 35rem;
+  height: 21.42857rem;
+  margin-top: 0.57143rem;
+}
+.form-location-map-pc-address {
+  vertical-align: middle;
+}
+
+.weda-fn-map__local_loc {
+  display: block !important;
+  position: relative;
+  min-height: 2.28571rem;
+  width: 35rem !important;
+}
+.weda-fn-map__local_edit {
+  display: flex !important;
+}
+.weda-fn-map__local_loc_btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.weda-fn-map__local_loc_btn_left {
+  margin-bottom: 0.57143rem;
+}
+.weda-fn-map__local_wrap {
+  display: flex;
+  /* margin-top: 8px; */
+}
+.weda-fn-map__local_wrap_icon {
+  width: 1.71429rem;
+  height: 1.71429rem;
+}
+.form-location-map-pc-latlng,
+.form-location-map-pc-address {
+  display: block;
+  height: 1.71429rem;
+  line-height: 1.71429rem;
+}

package/dist/web/components/form/location/components/LocationPC/location.PC.d.ts

@@ -0,0 +1,8 @@
+declare function LocationPC(props: any): JSX.Element;
+declare namespace LocationPC {
+    export { propTypes };
+    export { defaultProps };
+}
+export default LocationPC;
+import { propTypes } from "../../common/propsConfig";
+import { defaultProps } from "../../common/propsConfig";