@cloudbase/weda-ui 3.3.0 → 3.3.1

package/dist/web/components/form/input/index.js

@@ -1,86 +0,0 @@
-import * as React from 'react';
-import classNames from '../../../utils/classnames';
-import { usePlatform } from '../../../utils/platform';
-import { Input as TeaInput, ConfigProvider } from 'tea-component';
-import { renderDecorator } from '../renderDecorator';
-import { useSyncValue } from '../../../utils/useSyncValue';
-import './index.css';
-import { emptyObject } from '../../../utils/constant';
-export default function Input({ id, className, style, events = emptyObject, 
-// 组件属性
-label = '标题', labelVisible = true, name = 'formInput', defaultValue = '', password = false, placeholder = '请输入', type = 'text', maxLength = 140, disabled = false, focus: autoFocus = false, layout = 'horizontal', requiredFlag = false, size = 'l', clearable = true, decorator, }) {
-    const platform = usePlatform();
-    const cls = classNames({
-        'weda-ui': true,
-        'weda-input': true,
-        [className]: className,
-    });
-    const subCls = classNames({
-        'weui-cell': true,
-        'weui-cell_active': true,
-        'weui-cell_form': true,
-        'weui-cell_disabled': disabled,
-    });
-    const inputType = getInputType(type, password);
-    // 两次默认值不同时, 需要刷新value
-    const [value, setValue] = useSyncValue(defaultValue);
-    const onChange = function (e) {
-        const text = typeof e === 'string' ? e : e.target.value;
-        if (maxLength > 0 && text.length > maxLength) {
-            return;
-        }
-        const newValue = text;
-        setValue(newValue);
-        events.change({ value: newValue }, { originEvent: e });
-    };
-    const onClear = function (e) {
-        events.clear({ originValue: value }, { originEvent: e });
-        setValue('');
-        e.preventDefault();
-    };
-    const onKeyDown = function (e) {
-        // 确认逻辑
-        if (e.key === 'enter' || e.keyCode === 13) {
-            events.confirm({ value: e.target.value }, { originEvent: e });
-        }
-        // 数字类型的键盘, 不能输入e
-        if (inputType === 'number' && e.key === 'e') {
-            e.preventDefault();
-        }
-    };
-    const onFocus = function (e) {
-        events.focus({ value: e.target.value }, { originEvent: e });
-    };
-    const onBlur = function (e) {
-        events.blur({ value: e.target.value }, { originEvent: e });
-    };
-    const fieldEl = platform === 'h5' ? (React.createElement("div", { className: subCls },
-        React.createElement("div", { className: "weui-cell__bd weui-flex" },
-            React.createElement("input", { className: "weui-input", type: inputType, placeholder: placeholder, value: value, disabled: disabled, name: name, autoFocus: autoFocus, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, role: "input" }),
-            clearable && (React.createElement("button", { className: "weui-btn_reset weui-btn_icon weui-btn_input-clear", onMouseDown: onClear },
-                React.createElement("i", { className: "weui-icon-clear" })))))) : (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
-        React.createElement(TeaInput, { size: size, type: inputType, placeholder: placeholder, value: value, disabled: disabled, name: name, autoFocus: autoFocus, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown })));
-    return renderDecorator(fieldEl, decorator)({
-        id,
-        className: cls,
-        style,
-        label: labelVisible ? label : null,
-        layout,
-        multiCell: false,
-        requiredFlag,
-        size,
-    });
-}
-function getInputType(type, password) {
-    if (password) {
-        return 'password';
-    }
-    switch (type) {
-        case 'idcard':
-            return 'text';
-        case 'digit':
-            return 'number';
-        default:
-            return type;
-    }
-}

package/dist/web/components/form/location/common/mapChoose.d.ts

@@ -1,15 +0,0 @@
-export default function MapChoose({ changeLocation, onConfirm, onClose, currentLocations, latlng, isPC, APIKEY, locationRange, customRange, setConfirmStatus, }: {
-    changeLocation: any;
-    onConfirm: any;
-    onClose: any;
-    currentLocations: any;
-    latlng?: {
-        lat: any;
-        lng: any;
-    };
-    isPC: any;
-    APIKEY?: string;
-    locationRange: any;
-    customRange: any;
-    setConfirmStatus: any;
-}): JSX.Element;

package/dist/web/components/form/location/common/mapChoose.js

@@ -1,495 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import * as React from 'react';
-import classNames from '../../../../utils/classnames';
-import debounce from '../../../../utils/debounce';
-import { tmapApiUrl } from '../constants';
-import { getTMap, calculateDistance, base64LocationIcon, } from '../../../../utils/tmap';
-import './mapChoose.css';
-import { Icon } from 'tea-component';
-const { useEffect, useState, useRef, useMemo } = React;
-let relativePosition;
-const defaultLatLng = {
-    lat: null,
-    lng: null,
-};
-export default function MapChoose({ changeLocation, onConfirm, onClose, currentLocations, latlng = defaultLatLng, isPC, APIKEY = '', locationRange, customRange, setConfirmStatus, }) {
-    const { lat, lng } = latlng;
-    const mapRef = useRef();
-    const markerRef = useRef();
-    const centerRef = useRef();
-    const [isSearch, setIsSearch] = useState(false);
-    const [searchValue, setSearchValue] = useState('');
-    const [chooseLoc, setChooseLoc] = useState({
-        location: {
-            lat: null,
-            lng: null,
-        },
-        title: '',
-        address: '',
-        id: '',
-    });
-    const [exploreList, setExploreList] = useState([]);
-    const [searchList, setSearchList] = useState([]);
-    const [mapDomName, setMapDomName] = useState(new Date().getTime());
-    const clientHeight = useMemo(() => document.documentElement.clientHeight, []);
-    const [mapBoxHeight, setMapBoxHeight] = useState(clientHeight - 328);
-    const [searchLoadingStatus, setSearchLoadingStatus] = useState(false);
-    const [isOutofrange, setIsOutofrange] = useState(false);
-    const [searchBoxHeight, setSearchBoxHeight] = useState(328);
-    const touchCoordinate = useRef({
-        startY: 0,
-        lastY: 0,
-    });
-    const searchListRef = useRef();
-    const searchListPageSize = useRef(1);
-    useEffect(() => {
-        if (!APIKEY || new RegExp('[\\u4E00-\\u9FFF]+', 'g').test(APIKEY))
-            return;
-        function loadScript() {
-            const script = document.createElement('script');
-            script.type = 'text/javascript';
-            script.src = `${tmapApiUrl}?v=2.exp&key=${APIKEY}&callback=init&libraries=service`;
-            script.onload = () => {
-                initMap();
-            };
-            script.onerror = (error) => {
-                console.log(' load mapchoose error success', APIKEY, error);
-            };
-            document.body.appendChild(script);
-        }
-        if (getTMap()) {
-            initMap();
-        }
-        else {
-            loadScript();
-        }
-        exploreNear('updateCenter');
-        return () => {
-            mapRef.current && mapRef.current.destroy();
-        };
-    }, [APIKEY]);
-    useEffect(() => {
-        setConfirmStatus(getConfirm());
-    }, [isOutofrange, chooseLoc.id]);
-    const initMap = () => {
-        if (!getTMap())
-            return;
-        const TMap = getTMap();
-        //定义地图中心点坐标
-        const center = new TMap.LatLng(lat, lng);
-        //定义map变量，调用 TMap.Map() 构造函数创建地图
-        mapRef.current = new TMap.Map(document.getElementById(`form-map-choose-${mapDomName}`), {
-            center,
-            zoom: 16, //设置地图缩放级别
-        });
-        initMarker(TMap, mapRef.current);
-        getRadius() && initCircle(TMap, mapRef.current);
-    };
-    const initMarker = (TMap, map) => {
-        const canLoad = lat && lng && TMap && map;
-        if (canLoad) {
-            const position = new TMap.LatLng(lat, lng);
-            const currentLocationsLatlng = currentLocations.latlng;
-            const currentLocationsPosition = new TMap.LatLng(currentLocationsLatlng.lat, currentLocationsLatlng.lng);
-            markerRef.current = new TMap.MultiMarker({
-                map: mapRef.current,
-                styles: {
-                    pointer: new TMap.MarkerStyle({
-                        width: 26,
-                        height: 35,
-                    }),
-                    originPointer: new window.TMap.MarkerStyle({
-                        width: 70,
-                        height: 70,
-                        src: base64LocationIcon,
-                        anchor: {
-                            x: 35,
-                            y: 30,
-                        },
-                    }),
-                },
-                geometries: [
-                    {
-                        id: `pointer-origin-${mapDomName}`,
-                        styleId: 'originPointer',
-                        position: currentLocationsPosition,
-                    },
-                    {
-                        id: `pointer-${mapDomName}`,
-                        styleId: 'pointer',
-                        position,
-                    },
-                ],
-            });
-            // 监听中心点变化事件，更新marker的位置
-            map.on('drag', mapDrag);
-        }
-    };
-    const initCircle = (TMap, map) => {
-        const currentLocationsLatlng = currentLocations.latlng;
-        const canLoad = lat && lng && currentLocationsLatlng && TMap && map;
-        if (canLoad) {
-            const nowPosition = new TMap.LatLng(currentLocationsLatlng.lat, currentLocationsLatlng.lng);
-            let circle = {
-                map,
-                styles: {
-                    circleColor: new TMap.CircleStyle({
-                        showBorder: true,
-                        borderColor: '#fff',
-                        borderWidth: 1,
-                    }),
-                },
-                geometries: [
-                    {
-                        styleId: 'circleColor',
-                        center: nowPosition,
-                        radius: getRadius(),
-                    },
-                ],
-            };
-            new TMap.MultiCircle(circle);
-        }
-    };
-    const mapDrag = () => {
-        const TMap = getTMap();
-        const canLoad = TMap && lat && lng && mapRef.current;
-        if (canLoad) {
-            const currentLocationsLatlng = currentLocations.latlng;
-            let centerPosition = mapRef.current.getCenter();
-            centerRef.current = centerPosition;
-            markerRef.current.updateGeometries([
-                {
-                    id: `pointer-${mapDomName}`,
-                    styleId: 'pointer',
-                    position: mapRef.current.getCenter(),
-                },
-            ]);
-            exploreNear('updateCenter');
-            // 计算距离
-            compareDistance(currentLocationsLatlng, {
-                lat: centerPosition.getLat(),
-                lng: centerPosition.getLng(),
-            });
-        }
-    };
-    const compareDistance = (currentLocation, centerPosition) => {
-        if (getRadius()) {
-            let latlng1 = {
-                latitude: currentLocation.lat,
-                longitude: currentLocation.lng,
-            };
-            let latlng2 = {
-                latitude: centerPosition.lat,
-                longitude: centerPosition.lng,
-            };
-            const distance = calculateDistance(latlng1, latlng2);
-            let isOutof = getRadius() && getRadius() < distance;
-            setIsOutofrange(isOutof);
-            if (!isPC) {
-                changeSearchBoxHeight(false, isOutof, true);
-            }
-        }
-    };
-    const handleFocus = (value) => {
-        changeSearchBoxHeight(true);
-        setIsSearch(value);
-    };
-    const exploreNear = debounce((type) => {
-        const { lat, lng } = centerRef.current || latlng;
-        let TMap = getTMap();
-        let search = new TMap.service.Search({ pageSize: 10 }); // 新建一个地点搜索类
-        if (type === 'updateCenter') {
-            searchListPageSize.current = 1;
-        }
-        setSearchLoadingStatus(true);
-        search
-            .explore({
-            center: new TMap.LatLng(lat, lng),
-            policy: 2,
-            radius: 1000,
-            pageIndex: searchListPageSize.current,
-        })
-            .then((res) => {
-            setSearchLoadingStatus(false);
-            if (res.status === 0) {
-                let list = [...exploreList, ...res.data];
-                if (searchListPageSize.current === 1) {
-                    list = res.data;
-                    setRealLocation({ lat, lng }, list);
-                }
-                else {
-                    setExploreList(list);
-                }
-            }
-            else {
-                setRealLocation({ lat, lng }, []);
-            }
-        })
-            .catch((error) => {
-            setSearchLoadingStatus(false);
-            setRealLocation({ lat, lng }, []);
-            console.log('explore error', error);
-        });
-    }, 500);
-    // 逆解析查询当前经纬度地址
-    const setRealLocation = (location, list) => {
-        const { lat, lng } = location;
-        let TMap = getTMap();
-        const Geocoder = new TMap.service.Geocoder();
-        Geocoder.getAddress({
-            location: new TMap.LatLng(lat, lng),
-        })
-            .then(({ status, result }) => {
-            var _a;
-            if (status == 0) {
-                let address = result.address;
-                let title = (_a = result === null || result === void 0 ? void 0 : result.formatted_addresses) === null || _a === void 0 ? void 0 : _a.recommend;
-                let item = {
-                    id: 'current-location',
-                    location: {
-                        lat,
-                        lng,
-                    },
-                    title: title ? title : address,
-                    address,
-                };
-                setChooseLoc(item);
-                changeLocation(item);
-                setExploreList([item, ...list]);
-            }
-        })
-            .catch((error) => {
-            console.log('getAddress error', error);
-            let item = {
-                id: 'current-location',
-                location: {
-                    lat,
-                    lng,
-                },
-                title: '[位置]',
-                address: '暂无地址信息',
-            };
-            setChooseLoc(item);
-            changeLocation(item);
-            setExploreList([item]);
-        });
-    };
-    const chooseLoction = (value, type) => {
-        const TMap = getTMap();
-        //定义地图中心点坐标
-        const center = new TMap.LatLng(value.location.lat, value.location.lng);
-        mapRef.current.setCenter(center);
-        markerRef.current.updateGeometries([
-            {
-                id: `pointer-${mapDomName}`,
-                styleId: 'pointer',
-                position: center,
-            },
-        ]);
-        setChooseLoc(value);
-        changeLocation(value);
-        if (type) {
-            setExploreList([]);
-            cancleSearch();
-            mapDrag();
-        }
-        else {
-            const currentLocationsLatlng = currentLocations.latlng;
-            compareDistance(currentLocationsLatlng, value.location);
-        }
-    };
-    const changeSearchValue = (event) => {
-        if (event.target.value) {
-            setSearchValue(event.target.value);
-            let TMap = getTMap();
-            let search = new TMap.service.Suggestion({ pageSize: 20 }); // 新建一个地点搜索类
-            search
-                .getSuggestions({
-                keyword: event.target.value,
-                location: new TMap.LatLng(lat, lng),
-                radius: 2000,
-                pageIndex: 1,
-            })
-                .then((res) => {
-                if (res.status === 0) {
-                    setSearchList(res.data);
-                }
-            })
-                .catch((error) => {
-                console.log('error', error);
-            });
-        }
-        else {
-            setSearchValue('');
-            // 不知道
-            // eslint-disable-next-line rulesdir/no-timer
-            setTimeout(() => {
-                setSearchList([]);
-            }, 300);
-        }
-    };
-    const cancleSearch = () => {
-        handleFocus(false);
-        setSearchValue('');
-        setSearchList([]);
-        changeSearchBoxHeight(false);
-    };
-    const renderMapView = () => {
-        return (React.createElement("div", { id: `form-map-choose-${mapDomName}`, style: { height: '100%', width: '100%', position: 'relative' } },
-            React.createElement("div", { className: "weda-ui_mapChoose_map_control", onClick: backToOrigin, onTouchEnd: backToOrigin },
-                React.createElement("img", { src: "https://qcloudimg.tencent-cloud.cn/raw/16f372916b73decb45faa912e37f6e6f.svg", className: "weda-ui_mapChoose_map_control_img", alt: "" }))));
-    };
-    const handletouchmove = (event) => {
-        document.getElementsByClassName('map-choose-header_search_input')[0].blur();
-        let currentY = event.changedTouches[0].clientY;
-        let status = currentY <= touchCoordinate.current.startY;
-        changeSearchBoxHeight(status);
-    };
-    const handletouchstart = (event) => {
-        document.getElementsByClassName('map-choose-header_search_input')[0].blur();
-        touchCoordinate.current.startY = event.changedTouches[0].clientY;
-    };
-    const changeSearchBoxHeight = (status, currentOutofrange, isInDrag) => {
-        // 搜索区域默认 328px ，上拉 75% ，当超出范围多一个超出提示 46px
-        let isOut = isInDrag ? currentOutofrange : isOutofrange;
-        const boxHeight = Math.ceil(clientHeight * 0.75);
-        let searchBoxHeights = isOut ? 328 - 46 : 328;
-        if (status) {
-            searchBoxHeights = isOut ? boxHeight - 46 : boxHeight;
-        }
-        setSearchBoxHeight(searchBoxHeights);
-        setMapBoxHeight(status ? clientHeight - boxHeight : clientHeight - 328);
-    };
-    const searchListOnScroll = () => {
-        getOnScrollDirection();
-        if (searchListPageSize.current === 5 || isSearch) {
-            return;
-        }
-        let scrollTop = searchListRef.current.scrollTop;
-        let clientHeight = searchListRef.current.clientHeight;
-        let scrollHeight = searchListRef.current.scrollHeight;
-        if (scrollTop + clientHeight + 1 >= scrollHeight) {
-            searchListPageSize.current++;
-            exploreNear();
-        }
-    };
-    const getOnScrollDirection = () => {
-        if ((searchBoxHeight !== 328 && searchBoxHeight !== 282) || isPC) {
-            return;
-        }
-        if (searchListRef.current.scrollTop > relativePosition) {
-            changeSearchBoxHeight(true);
-        }
-        relativePosition = searchListRef.current.scrollTop;
-    };
-    const renderSearchList = () => {
-        return (React.createElement("div", { className: classNames({
-                'weda-ui_mapChoose_search': true,
-                'weda-ui_mapChoose_search_pc': isPC,
-            }), style: { height: `${searchBoxHeight}px` }, onTouchStart: handletouchstart, onTouchMove: handletouchmove },
-            searchBoxHeight !== 328 && searchBoxHeight !== 282 && !isPC && (React.createElement("div", { className: "weda-ui_mapChoose_search_input_arrow", onClick: () => {
-                    changeSearchBoxHeight(false);
-                } },
-                React.createElement("span", { className: "weda-ui_mapChoose_search_input_arrow-con" }))),
-            React.createElement("div", { className: classNames({
-                    'map-choose-header': true,
-                    'map-choose-header_focus': isSearch,
-                }) },
-                React.createElement("div", { className: "map-choose-header_search" },
-                    React.createElement("input", { type: "text", onFocus: () => {
-                            handleFocus(true);
-                        }, onClick: (e) => {
-                            e.stopPropagation();
-                        }, onChange: changeSearchValue, value: searchValue, className: "map-choose-header_search_input" }),
-                    React.createElement("div", { className: classNames({
-                            'map-choose-header_search_place': true,
-                            'map-choose-header_search_place_value': searchValue,
-                        }) },
-                        React.createElement("img", { src: "https://qcloudimg.tencent-cloud.cn/raw/388c48cdcbe9ca07f5682fb10d05ebdd.png", alt: "" }),
-                        React.createElement("span", null, "\u641C\u7D22\u5730\u70B9")),
-                    searchValue && (React.createElement("div", { className: "weda-ui_mapChoose_search_input_clear", onClick: changeSearchValue },
-                        React.createElement("p", { className: "weda-ui_mapChoose_search_input_clear_close" })))),
-                React.createElement("span", { className: "map-choose-header_search_cancel", onClick: cancleSearch }, "\u53D6\u6D88")),
-            searchLoadingStatus && !isSearch && (React.createElement("div", { className: "weda-ui_mapChoose_search_list_lodading" },
-                React.createElement("span", { className: "weda-ui_mapChoose_search_list_lodading_con" }))),
-            React.createElement("div", { className: classNames({
-                    'weda-ui_mapChoose_search_list': true,
-                    'weda-ui_mapChoose_search_list_top': searchBoxHeight !== 328 && searchBoxHeight !== 282 && !isPC,
-                }), onTouchStart: (e) => {
-                    e.stopPropagation();
-                }, onTouchMove: (e) => {
-                    e.stopPropagation();
-                }, ref: searchListRef, onScroll: searchListOnScroll }, (isSearch ? searchList : exploreList).map((item, index) => (React.createElement("div", { key: index, className: "weda-ui_mapChoose_search_list_li", onClick: () => {
-                    chooseLoction(item, isSearch);
-                } },
-                React.createElement("div", { className: "weda-ui_mapChoose_search_list_li_wrap" },
-                    React.createElement("div", { className: "weda-ui_mapChoose_search_list_li_title" }, item.title),
-                    React.createElement("div", { className: "weda-ui_mapChoose_search_list_li_con" }, item.address),
-                    item.id === chooseLoc.id && (React.createElement("span", { className: "weda-ui_mapChoose_search_list_li_con_choosed" })))))))));
-    };
-    const renderOutTip = () => {
-        return (React.createElement("div", { className: classNames({
-                'weda-ui_mapChoose_outTip': true,
-                'weda-ui_mapChoose_outTip_block': isOutofrange,
-                'weda-ui_mapChoose_outTip_pc': isPC,
-            }) },
-            isOutofrange && (React.createElement(Icon, { type: "warning", size: "default", color: "#ED7B2F", style: { marginRight: '9px' } })),
-            isOutofrange && React.createElement("span", null, "\u5B9A\u4F4D\u8D85\u51FA\u5141\u8BB8\u8303\u56F4,\u8BF7\u8C03\u6574")));
-    };
-    const getRadius = () => {
-        let radius = 0;
-        if (locationRange > 0) {
-            radius = locationRange;
-        }
-        else if (locationRange < 0 && customRange > 0) {
-            radius = customRange;
-        }
-        return radius;
-    };
-    const backToOrigin = () => {
-        const TMap = getTMap();
-        const canLoad = TMap && lat && lng && mapRef.current;
-        if (canLoad) {
-            const currentLocationsLatlng = currentLocations.latlng;
-            const nowPosition = new TMap.LatLng(currentLocationsLatlng.lat, currentLocationsLatlng.lng);
-            markerRef.current.updateGeometries([
-                {
-                    id: `pointer-${mapDomName}`,
-                    styleId: 'pointer',
-                    position: nowPosition,
-                },
-            ]);
-            mapRef.current.setCenter(nowPosition);
-            searchListPageSize.current = 1;
-            setChooseLoc({});
-            mapDrag();
-        }
-    };
-    const getConfirm = () => {
-        return isOutofrange || !chooseLoc.id;
-    };
-    if (isPC) {
-        return (React.createElement("div", { className: classNames('map-choose', 'map-choose-pc', 'weda-ui_map-choose') },
-            renderOutTip(),
-            React.createElement("div", { className: classNames({
-                    'map-choose-pc_warp': true,
-                    'map-choose-pc_warp_out': isOutofrange,
-                }) },
-                React.createElement("div", { className: "map-choose-pc-left" }, renderSearchList()),
-                React.createElement("div", { className: "map-choose-pc-right" }, renderMapView()))));
-    }
-    return (React.createElement("div", { className: "map-choose weda-ui_map-choose" },
-        renderOutTip(),
-        React.createElement("div", { className: "weda-ui_mapChoose_map", style: { height: `${mapBoxHeight}px` } },
-            React.createElement("div", { className: "weda-ui_mapChoose_msg" },
-                React.createElement("div", { className: classNames({
-                        'weda-ui_mapChoose_confirm': true,
-                        'weda-ui_mapChoose_confirm_disable': getConfirm(),
-                    }), onClick: () => {
-                        !getConfirm() && onConfirm();
-                    } }, "\u786E\u5B9A"),
-                React.createElement("div", { className: "weda-ui_mapChoose_colse", onClick: onClose }, "\u53D6\u6D88")),
-            renderMapView()),
-        renderSearchList()));
-}

package/dist/web/components/form/location/common/mapView.d.ts

@@ -1,19 +0,0 @@
-declare function MapView({ APIKEY, drag, zoom, latlng, }: {
-    APIKEY?: string;
-    drag?: boolean;
-    zoom?: boolean;
-    latlng?: {
-        lat: any;
-        lng: any;
-    };
-}): JSX.Element;
-declare namespace MapView {
-    namespace propTypes {
-        const APIKEY: PropTypes.Requireable<string>;
-        const drag: PropTypes.Requireable<boolean>;
-        const zoom: PropTypes.Requireable<boolean>;
-        const latlng: PropTypes.Requireable<object>;
-    }
-}
-export default MapView;
-import * as PropTypes from "prop-types";