@cloudbase/weda-ui 3.2.0 → 3.2.1

package/dist/src/web/components/form/location/common/propsConfig.d.ts

@@ -0,0 +1,59 @@
+export namespace propTypes {
+    const id: PropTypes.Requireable<string>;
+    const className: PropTypes.Requireable<string>;
+    const style: PropTypes.Requireable<string>;
+    const events: PropTypes.Requireable<object>;
+    const label: PropTypes.Requireable<string>;
+    const labelVisible: PropTypes.Requireable<boolean>;
+    const APIKEY: PropTypes.Requireable<string>;
+    const showLngLat: PropTypes.Requireable<boolean>;
+    const showMap: PropTypes.Requireable<boolean>;
+    const defauleShowLocation: PropTypes.Requireable<boolean>;
+    const drag: PropTypes.Requireable<boolean>;
+    const zoom: PropTypes.Requireable<boolean>;
+    const disabled: PropTypes.Requireable<boolean>;
+    const requiredFlag: PropTypes.Requireable<boolean>;
+    const decorator: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    const value: PropTypes.Requireable<object>;
+    const locationType: PropTypes.Requireable<number>;
+    const dataSource: PropTypes.Requireable<object>;
+}
+export namespace defaultProps {
+    const events_1: {};
+    export { events_1 as events };
+    const label_1: string;
+    export { label_1 as label };
+    const labelVisible_1: boolean;
+    export { labelVisible_1 as labelVisible };
+    const APIKEY_1: string;
+    export { APIKEY_1 as APIKEY };
+    const showLngLat_1: boolean;
+    export { showLngLat_1 as showLngLat };
+    const showMap_1: boolean;
+    export { showMap_1 as showMap };
+    const defauleShowLocation_1: boolean;
+    export { defauleShowLocation_1 as defauleShowLocation };
+    const drag_1: boolean;
+    export { drag_1 as drag };
+    const zoom_1: boolean;
+    export { zoom_1 as zoom };
+    const disabled_1: boolean;
+    export { disabled_1 as disabled };
+    const requiredFlag_1: boolean;
+    export { requiredFlag_1 as requiredFlag };
+    const locationType_1: number;
+    export { locationType_1 as locationType };
+    export namespace value_1 {
+        const address: string;
+        namespace geopoint {
+            const coordinates: number[];
+            const type: string;
+        }
+    }
+    export { value_1 as value };
+    export const readOnly: boolean;
+    export const isModalApp: boolean;
+    const dataSource_1: {};
+    export { dataSource_1 as dataSource };
+}
+import * as PropTypes from "prop-types";

package/dist/src/web/components/form/location/common/propsConfig.js

@@ -0,0 +1,50 @@
+import * as PropTypes from 'prop-types';
+export const propTypes = {
+    // 系统属性
+    id: PropTypes.string,
+    className: PropTypes.string,
+    style: PropTypes.string,
+    events: PropTypes.object,
+    // 组件属性
+    label: PropTypes.string,
+    labelVisible: PropTypes.bool,
+    APIKEY: PropTypes.string,
+    showLngLat: PropTypes.bool,
+    showMap: PropTypes.bool,
+    defauleShowLocation: PropTypes.bool,
+    drag: PropTypes.bool,
+    zoom: PropTypes.bool,
+    disabled: PropTypes.bool,
+    requiredFlag: PropTypes.bool,
+    decorator: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
+    value: PropTypes.object,
+    locationType: PropTypes.number,
+    dataSource: PropTypes.object,
+};
+export const defaultProps = {
+    // 系统属性
+    events: {},
+    // 组件属性
+    label: '地图定位',
+    labelVisible: true,
+    APIKEY: '',
+    showLngLat: false,
+    showMap: false,
+    defauleShowLocation: false,
+    drag: true,
+    zoom: true,
+    disabled: false,
+    requiredFlag: false,
+    locationType: 1,
+    // 模型应用属性
+    value: {
+        address: '',
+        geopoint: {
+            coordinates: [39.984104, 116.307503],
+            type: 'Point',
+        },
+    },
+    readOnly: false,
+    isModalApp: false,
+    dataSource: {},
+};

package/dist/src/web/components/form/location/common/selectModal.d.ts

@@ -0,0 +1,21 @@
+export default function SelectModal({ currentLocations, location, setLocation, isSelectMapVisible, setIsSelectMapVisible, chooseLocation, APIKEY, locationRange, customRange, }: {
+    currentLocations?: {
+        latlng: {
+            lat: any;
+            lng: any;
+        };
+    };
+    location?: {
+        latlng: {
+            lat: any;
+            lng: any;
+        };
+    };
+    setLocation: any;
+    isSelectMapVisible?: boolean;
+    setIsSelectMapVisible: any;
+    chooseLocation: any;
+    APIKEY?: string;
+    locationRange: any;
+    customRange: any;
+}): JSX.Element;

package/dist/src/web/components/form/location/common/selectModal.js

@@ -0,0 +1,44 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import * as React from 'react';
+import { Modal, Button } from 'tea-component';
+import { usePlatform } from '../../../../utils/platform';
+import classNames from '../../../../utils/classnames';
+import MapChoose from './mapChoose';
+import './selectModal.css';
+const { useRef, useState } = React;
+const defaultLatLng = { latlng: { lat: null, lng: null } };
+export default function SelectModal({ currentLocations = defaultLatLng, location = defaultLatLng, setLocation, isSelectMapVisible = false, setIsSelectMapVisible, chooseLocation, APIKEY = '', locationRange, customRange, }) {
+    const latlng = location.latlng || { lat: null, lng: null };
+    const positionRef = useRef({});
+    const platform = usePlatform();
+    const isPC = platform === 'pc';
+    const [confirmStatus, setConfirmStatus] = useState(true);
+    const close = () => setIsSelectMapVisible(false);
+    const confirm = () => {
+        if (positionRef.current.latlng) {
+            setLocation(positionRef.current);
+            chooseLocation(positionRef.current);
+        }
+        close();
+    };
+    const getPosition = (value) => {
+        const { title, location, address } = value;
+        let loc = {
+            poiname: title,
+            detailedAddress: address,
+            latlng: { lat: location.lat, lng: location.lng },
+        };
+        positionRef.current = loc;
+    };
+    return (React.createElement(Modal, { visible: isSelectMapVisible, caption: "\u9009\u62E9\u5730\u7406\u4F4D\u7F6E", onClose: close, className: classNames({
+            'weda-ui_form-select': true,
+            'form-select-map': !isPC,
+            'form-select-map-pc': isPC,
+        }), ...(isPC ? { size: 1200 } : {}) },
+        React.createElement(Modal.Body, null,
+            React.createElement(MapChoose, { latlng: latlng, currentLocations: currentLocations, changeLocation: getPosition, isPC: isPC, APIKEY: APIKEY, onClose: close, onConfirm: confirm, locationRange: locationRange, customRange: customRange, setConfirmStatus: setConfirmStatus })),
+        React.createElement(Modal.Footer, null,
+            React.createElement(Button, { type: "primary", onClick: confirm, disabled: confirmStatus }, "\u786E\u5B9A"),
+            React.createElement(Button, { type: "weak", onClick: close }, "\u53D6\u6D88"))));
+}

package/dist/src/web/components/form/location/common/useLocationInfo.d.ts

@@ -0,0 +1,36 @@
+export default function useLocationInfo({ apiKey, locationType, eventsChange, dataSourceStatus, }: {
+    apiKey: any;
+    locationType: any;
+    eventsChange: any;
+    dataSourceStatus: any;
+}): {
+    location: {
+        poiname: string;
+        detailedAddress: string;
+        latlng: {
+            lat: number;
+            lng: number;
+        };
+    };
+    setLocation: React.Dispatch<React.SetStateAction<{
+        poiname: string;
+        detailedAddress: string;
+        latlng: {
+            lat: number;
+            lng: number;
+        };
+    }>>;
+    apiKeyStatus: {
+        status: boolean;
+        message: string;
+    };
+    setApiKeyStatus: React.Dispatch<React.SetStateAction<{
+        status: boolean;
+        message: string;
+    }>>;
+    currentLocStatus: boolean;
+    currentLocations: React.MutableRefObject<undefined>;
+    customLocation: React.MutableRefObject<undefined>;
+    checkCustomLocation: (params: any) => boolean;
+};
+import * as React from "react";

package/dist/src/web/components/form/location/common/useLocationInfo.js

@@ -0,0 +1,104 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import * as React from 'react';
+const { useEffect, useState, useRef } = React;
+export default function useLocationInfo({ apiKey: APIKEY, locationType, eventsChange, dataSourceStatus, }) {
+    const [location, setLocation] = useState({
+        poiname: '',
+        detailedAddress: '',
+        latlng: { lat: 39.98410411, lng: 116.307503 },
+    });
+    const [apiKeyStatus, setApiKeyStatus] = useState({
+        status: false,
+        message: '定位功能初始化中，请稍后重试',
+    });
+    const [currentLocStatus, setCurrentLocStatus] = useState(false);
+    const currentLocations = useRef();
+    const customLocation = useRef();
+    const checkCustomLocation = (params) => {
+        var _a;
+        let status = true;
+        if (!(params === null || params === void 0 ? void 0 : params.address) || !(params === null || params === void 0 ? void 0 : params.detailedAddress)) {
+            status = false;
+        }
+        else if (((_a = params === null || params === void 0 ? void 0 : params.geopoint) === null || _a === void 0 ? void 0 : _a.type) != 'Point') {
+            status = false;
+        }
+        return status;
+    };
+    useEffect(() => {
+        if (!dataSourceStatus ||
+            !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();
+                geolocation.getIpLocation(({ city, lat, lng, addr }) => {
+                    setApiKeyStatus({ status: true, message: '' });
+                    setCurrentLocStatus(true);
+                    let locations = {
+                        poiname: city + addr,
+                        detailedAddress: city + addr,
+                        latlng: { lat, lng },
+                        locationType,
+                    };
+                    currentLocations.current = locations;
+                    if (checkCustomLocation(customLocation.current))
+                        return;
+                    setLocation(locations);
+                    eventsChange &&
+                        eventsChange({
+                            poiname: city + addr,
+                            detailedAddress: city + addr,
+                            latitude: lat,
+                            longitude: lng,
+                        }, locationType === 1);
+                }, (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 },
+                    locationType,
+                });
+            };
+            document.body.appendChild(script);
+        }
+        loadScript();
+    }, [APIKEY, locationType]);
+    return {
+        location,
+        setLocation,
+        apiKeyStatus,
+        setApiKeyStatus,
+        currentLocStatus,
+        currentLocations,
+        customLocation,
+        checkCustomLocation,
+    };
+}

package/dist/src/web/components/form/location/components/LocationH5/location.h5.d.ts

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

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

@@ -0,0 +1,325 @@
+// 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';
+import styles from './location.module.css';
+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, 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();
+    const customLocation = 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,
+        };
+        setLocation(loc);
+        // 暂不支持自定位置，初始化表单值都是{}
+        events.change({ value: {} });
+    }, [locationType]);
+    useEffect(() => {
+        if (checkCustomLocation(value)) {
+            // 表单为新增时回传点位信息
+            const { address, detailedAddress, geopoint } = value;
+            const coordinates = (geopoint === null || geopoint === void 0 ? void 0 : geopoint.coordinates) || [];
+            let loc = {
+                poiname: address,
+                detailedAddress: detailedAddress,
+                latlng: { lng: coordinates[0], lat: coordinates[1] },
+            };
+            customLocation.current = value;
+            setLocation(loc);
+        }
+    }, [value]);
+    // 获取定位信息
+    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;
+                    setApiKeyStatus({
+                        status: true,
+                        message: '',
+                    });
+                    setCurrentLocStatus(true);
+                    let loc = {
+                        poiname: city + addr,
+                        detailedAddress: city + addr,
+                        latlng: { lat, lng },
+                    };
+                    if (locationType === 1) {
+                        loc.locationType = 1;
+                    }
+                    currentLocations.current = loc;
+                    // 表单为新增时检查是否为回传点位信息
+                    if (checkCustomLocation(customLocation.current))
+                        return;
+                    setLocation(loc);
+                    if (locationType === 2) {
+                        events.change &&
+                            events.change({
+                                value: {
+                                    address: city + addr,
+                                    detailedAddress: city + addr,
+                                    geopoint: {
+                                        coordinates: [lng, lat],
+                                        type: 'Point',
+                                    },
+                                },
+                            });
+                    }
+                }, (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) => {
+        var _a;
+        let status = true;
+        if (!(params === null || params === void 0 ? void 0 : params.address) || !(params === null || params === void 0 ? void 0 : params.detailedAddress)) {
+            status = false;
+        }
+        else if (((_a = params === null || params === void 0 ? void 0 : params.geopoint) === null || _a === void 0 ? void 0 : _a.type) != 'Point') {
+            status = false;
+        }
+        return status;
+    };
+    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 ${styles.locationDisabled}`, 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,
+                    [styles.locationContent]: 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/src/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;