@cloudbase/weda-ui 3.1.0 → 3.1.1

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

@@ -0,0 +1,259 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import * as React from 'react';
+import { ConfigProvider } from 'tea-component';
+import classNames from '../../../../../utils/classnames';
+import weui from '../../../../../utils/weui';
+import { renderDecorator } from '../../../renderDecorator';
+import MapView from '../../common/mapView';
+import SelectModal from '../../common/selectModal';
+import useLocationInfo from '../../common/useLocationInfo';
+import { propTypes, defaultProps } from '../../common/propsConfig';
+import { callDataSource } from '../../../../../utils/tcb';
+import Header from './Header';
+import './index.css';
+const { useState, useEffect } = React;
+export default function LocationPC(props) {
+    // 属性、变量
+    const { 
+    // 系统属性
+    id, className, style, events, 
+    // 组件属性
+    value, label, labelVisible, customLocation, locationType, showLngLat, showMap, drag, zoom, disabled, requiredFlag, decorator, dataSource, layout, locationRange, customRange, } = props;
+    const cls = classNames({
+        'weda-ui': true,
+        cloudbase_standard: true,
+        [className]: className,
+    });
+    const [isSelectMapVisible, setIsSelectMapVisible] = useState(false);
+    const [dataSourceStatus, setDataSourceStatus] = useState({
+        status: false,
+        message: '定位功能初始化中，请稍后重试',
+    });
+    const [userSelectStatus, setUserSelectStatus] = useState('default');
+    const [APIKEY, setAPIKEY] = useState('');
+    const eventsChange = (value, noaddr) => {
+        const { poiname, detailedAddress, latitude, longitude } = value;
+        let res = {
+            address: poiname,
+            detailedAddress,
+            geopoint: {
+                coordinates: [longitude, latitude],
+                type: 'Point',
+            },
+        };
+        events.change &&
+            events.change({
+                value: noaddr ? {} : res,
+            });
+    };
+    const { location, setLocation, apiKeyStatus, setApiKeyStatus, currentLocStatus, currentLocations, } = useLocationInfo({
+        apiKey: APIKEY,
+        locationType,
+        dataSourceStatus,
+        eventsChange,
+    });
+    useEffect(() => {
+        if (value || !currentLocations.current)
+            return;
+        setUserSelectStatus('default');
+        // 重置表单时
+        const { poiname, detailedAddress, latlng: { lat, lng }, } = currentLocations.current;
+        let location = {
+            poiname,
+            detailedAddress,
+            latlng: { lat, lng },
+        };
+        if (locationType === 1) {
+            location.locationType = 1;
+            eventsChange({}, true);
+        }
+        else if (locationType === 2) {
+            eventsChange({
+                latitude: lat,
+                longitude: lng,
+                poiname,
+                detailedAddress,
+            });
+        }
+        setLocation(location);
+    }, [value, locationType]);
+    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;
+        events.change &&
+            events.change({
+                value: {
+                    address: poiname,
+                    detailedAddress,
+                    geopoint: {
+                        coordinates: [latlng.lng, latlng.lat],
+                        type: 'Point',
+                    },
+                },
+            });
+        setUserSelectStatus('selected');
+    };
+    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]);
+    useEffect(() => {
+        let loc = {
+            latlng: {
+                lat: 39.98410411,
+                lng: 116.307503,
+            },
+            poiname: '',
+            detailedAddress: '',
+            locationType,
+        };
+        switch (locationType) {
+            case 2:
+                loc = {
+                    latlng: {
+                        lat: location.latlng.lat,
+                        lng: location.latlng.lng,
+                    },
+                    poiname: location.poiname,
+                    detailedAddress: location.detailedAddress,
+                };
+                break;
+            case 3:
+                if (checkCustomLocation(customLocation)) {
+                    showToast('位置输入格式错误 请检查');
+                }
+                else {
+                    loc = {
+                        latlng: {
+                            lat: customLocation.latitude,
+                            lng: customLocation.longitude,
+                        },
+                        poiname: customLocation.poiname,
+                    };
+                }
+                break;
+        }
+        setLocation(loc);
+        // 暂不支持自定位置，初始化表单值都是{}
+        eventsChange({
+            latitude: loc.latlng.lat,
+            longitude: loc.latlng.lng,
+            poiname: loc.poiname,
+            detailedAddress: loc.detailedAddress,
+        }, true);
+    }, [locationType]);
+    useEffect(() => {
+        if (locationType != 3) {
+            return;
+        }
+        if (checkCustomLocation(customLocation)) {
+            showToast('位置输入格式错误 请检查');
+            return;
+        }
+        let { latitude, longitude, poiname, detailedAddress } = customLocation;
+        let loc = {
+            latlng: {
+                lat: latitude,
+                lng: longitude,
+            },
+            poiname,
+            detailedAddress,
+        };
+        setLocation(loc);
+    }, [customLocation, locationType]);
+    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 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 LocationEl = (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement("div", { className: classNames('_weda-fn-map', className), "data-testid": "_weda-fn-map", style: style },
+            React.createElement(Header, { isEdit: userSelectStatus === 'selected', info: location, onClick: handleChooseLocation, disabled: disabled, showLngLat: showLngLat, locationType: locationType, apiKeyStatus: apiKeyStatus, currentLocStatus: currentLocStatus, dataSourceStatus: dataSourceStatus.status }),
+            getIsShowMap() ? (React.createElement("div", { className: classNames('form-location-map-pc') },
+                React.createElement(MapView, { APIKEY: APIKEY, drag: drag, zoom: zoom, latlng: location.latlng }))) : null),
+        React.createElement(SelectModal, { currentLocations: currentLocations.current, isSelectMapVisible: isSelectMapVisible, setIsSelectMapVisible: setIsSelectMapVisible, location: location, setLocation: setLocation, APIKEY: APIKEY, chooseLocation: onChangeLocation, locationRange: locationRange, customRange: customRange })));
+    return renderDecorator(LocationEl, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: false,
+        requiredFlag,
+    });
+}
+LocationPC.propTypes = propTypes;
+LocationPC.defaultProps = defaultProps;

package/dist/web/components/form/location/constants.d.ts

@@ -0,0 +1,2 @@
+export const KEY: "XX5BZ-UJLKR-B7WWP-WURRR-UYBGS-4VBMM";
+export const tmapApiUrl: "https://map.qq.com/api/gljs";

package/dist/web/components/form/location/constants.js

@@ -0,0 +1,3 @@
+const KEY = 'XX5BZ-UJLKR-B7WWP-WURRR-UYBGS-4VBMM';
+const tmapApiUrl = 'https://map.qq.com/api/gljs';
+export { KEY, tmapApiUrl };

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

@@ -0,0 +1,13 @@
+.rotate-circle {
+  display: none;
+}
+.tmap-zoom-control {
+  display: none;
+}
+.tmap-zoom-control {
+  display: none !important;
+}
+
+.weui-form-location_toast .weui-icon_toast {
+  display: none !important;
+}

package/dist/web/components/form/location/index.d.ts

@@ -0,0 +1 @@
+export default function Location(props: any): JSX.Element;

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ConfigProvider } from 'tea-component';
+import './index.css';
+import { usePlatform } from '../../../utils/platform';
+import LocationH5 from './components/LocationH5/location.h5';
+import LocationPC from './components/LocationPC/location.PC';
+export default function Location(props) {
+    const platform = usePlatform();
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'pc') {
+        return React.createElement(LocationPC, { ...props });
+    }
+    if ((props === null || props === void 0 ? void 0 : props.showType) === 'h5') {
+        return React.createElement(LocationH5, { ...props });
+    }
+    return platform === 'h5' ? (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+        React.createElement(LocationH5, { ...props }))) : (React.createElement(LocationPC, { ...props }));
+}

package/dist/web/components/form/radio/index.css

@@ -0,0 +1,12 @@
+@media (min-width: 1024px) {
+  .weda-ui .wedatea2td-radio:checked,
+  .weda-ui input[type='radio']:checked {
+    background-color: white;
+  }
+  .weda-ui .wedatea2td-radio:checked:focus,
+  .weda-ui .wedatea2td-radio:checked:hover,
+  .weda-ui input[type='radio']:checked:focus,
+  .weda-ui input[type='radio']:checked:hover {
+    background-color: white;
+  }
+}

package/dist/web/components/form/radio/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './index.css';
+import type { CommonFormPropsType } from '../types';
+export default function Radio({ id, className, style, events, label, labelVisible, format, enumName, name, range, layout, disabled, requiredFlag, decorator, }: PropsType): JSX.Element;
+export interface PropsType extends CommonFormPropsType {
+    range?: Readonly<({
+        label: string;
+    } & Record<string, any>)[]>;
+    format?: string;
+    enumName?: string;
+}

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

@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react';
+import { ConfigProvider, Radio as TeaRadio } from 'tea-component';
+import { usePlatform } from '../../../utils/platform';
+import classNames from '../../../utils/classnames';
+import getLocalCounter from '../../../utils/getLocalCounter';
+import isObjectEqual from '../../../utils/isObjectEqual';
+import { callWedaApi } from '../../../utils/tcb';
+import './index.css';
+import { renderDecorator } from '../renderDecorator';
+import destr from 'destr';
+import { emptyArray, emptyObject } from '../../../utils/constant';
+export default function Radio({ 
+// 系统属性
+id, className, style, events = emptyObject, 
+// 组件属性
+label = '标题', labelVisible = true, format = '', enumName = '', name = 'formRadio', range = emptyArray, layout = 'horizontal', disabled = false, requiredFlag = false, decorator, }) {
+    var _a;
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-radio': true,
+        [className]: className,
+    });
+    const subCls = classNames({
+        'weui-cell': isH5,
+        'weui-cell_active': isH5,
+        'weui-check__label': isH5,
+        'weui-cell_disabled': isH5 && disabled,
+    });
+    const [option, setOption] = useState(range);
+    const [checkedItemValue, setCheckedItemValue] = React.useState((_a = option.find((item) => item.checked)) === null || _a === void 0 ? void 0 : _a.value);
+    // 两次range不同时, 需要刷新checkedItemValue
+    const prevRangeRef = React.useRef();
+    React.useEffect(() => {
+        var _a;
+        if (!isObjectEqual(prevRangeRef.current, option)) {
+            prevRangeRef.current = option;
+            setCheckedItemValue((_a = option.find((item) => item.checked)) === null || _a === void 0 ? void 0 : _a.value);
+        }
+    });
+    useEffect(() => {
+        // 如果绑定字段类型为枚举，且传入自定义选项集的名称则默认使用自定义选项集的内容作为选项
+        if (format === 'x-enum' && enumName) {
+            fetchData({ OptNameList: [enumName], PageIndex: 1, PageSize: 10 });
+        }
+    }, []);
+    useEffect(() => {
+        if (format !== 'x-enum') {
+            setOption(range);
+        }
+    }, [range]);
+    const fetchData = async (param) => {
+        var _a, _b, _c;
+        const data = await callWedaApi({
+            action: 'DescribeGeneralOptionsDetailList',
+            data: param,
+        });
+        const config = (_c = destr((_b = (_a = data === null || data === void 0 ? void 0 : data.Items) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.Config)) !== null && _c !== void 0 ? _c : [];
+        const enumOption = config.map((item) => {
+            return {
+                label: item.value,
+                value: item.key,
+                checked: false,
+            };
+        });
+        setOption(enumOption);
+    };
+    /**
+     * 在ios h5端, label和input的绑定不生效
+     * 导致 onChange 事件触发有问题, 所以改为监听 onClick 事件
+     */
+    const getChangeHandler = function (value) {
+        const onChange = function (e) {
+            e.stopPropagation();
+            if (!disabled) {
+                setCheckedItemValue(value);
+                events.change({ value }, { originEvent: e });
+            }
+        };
+        return onChange;
+    };
+    // 现在低码组件往源码组件传入的id不唯一, 暂时使用hashcode替代
+    const hashcode = React.useMemo(() => getLocalCounter(), []);
+    let radioElement;
+    if (isH5) {
+        radioElement = option.map(({ label, value }, index) => {
+            const _id = `radio-${hashcode}-${index}`;
+            const _name = `radio-${hashcode}-${name}`;
+            return (React.createElement("div", { className: subCls, key: _id, onClickCapture: getChangeHandler(value) },
+                React.createElement("div", { className: "weui-cell__hd" },
+                    React.createElement("input", { type: "radio", className: "weui-check", value: value, name: _name, id: _id, checked: checkedItemValue === value, disabled: disabled, onClick: (e) => e.stopPropagation() }),
+                    React.createElement("i", { className: "weui-icon-checked" })),
+                React.createElement("div", { className: "weui-cell__bd" },
+                    React.createElement("p", null, label))));
+        });
+    }
+    else {
+        // pc
+        radioElement = (React.createElement(ConfigProvider, { classPrefix: "wedatea2td" },
+            React.createElement(TeaRadio.Group, { disabled: disabled, value: checkedItemValue, onChange: (value, { event }) => getChangeHandler(value)(event) }, option.map(({ value, label }, index) => {
+                const _id = `radio-${hashcode}-${index}`;
+                return (React.createElement(TeaRadio, { key: _id, name: value, id: _id }, label));
+            }))));
+    }
+    return renderDecorator(radioElement, decorator)({
+        id,
+        className: cls,
+        style,
+        label: labelVisible ? label : null,
+        layout,
+        multiCell: true,
+        requiredFlag,
+    });
+}

package/dist/web/components/form/renderDecorator.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ *
+ * @returns {(props: any) => JSX.Element}
+ */
+export declare function renderDecorator<D = any>(filedNode: React.ReactNode, DecoratorComponent?: React.FC<D>): (decoratorProps: any) => JSX.Element;

package/dist/web/components/form/renderDecorator.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import FormCell from './formcell';
+/**
+ *
+ * @returns {(props: any) => JSX.Element}
+ */
+export function renderDecorator(filedNode, DecoratorComponent = FormCell) {
+    if (!DecoratorComponent) {
+        return function WedaFormField() {
+            return React.createElement(React.Fragment, null, filedNode);
+        };
+    }
+    return function WedaFormFiled(decoratorProps) {
+        if (Array.isArray(DecoratorComponent) && DecoratorComponent.length === 2) {
+            decoratorProps = DecoratorComponent[1];
+            DecoratorComponent = DecoratorComponent[0];
+        }
+        return (React.createElement(DecoratorComponent, { ...decoratorProps }, filedNode));
+    };
+}

package/dist/web/components/form/select/h5.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { PropsType } from './index';
+export default function Select({ events, name, placeholder, layout, mode, dateMode, disabled, range, where, primaryField, tipBlock, enumName, dataSourceName, viewId, format, defaultValue, startDate, endDate, defaultDate, startTime, endTime, defaultTime, defaultRegion, defaultMutiRegion, regionType, separator, onChange, }: PropsType): JSX.Element;
+export declare function decodeIsoDatetime(isoStringOrTimesnap: any, type: any, dateMode?: string): any;
+/**
+ * 根据时间模式，构造 new Date()的传参格式单个日期和时间组件值
+ */
+export declare const getFormatNewDateParams: (type: string, timeStr: string) => any[];
+/**
+ * 根据时间模式，将 picker 返回的值转成对应的 年-月-日
+ */
+export declare const formatDateModeValue: (result?: any[], dateMode?: string) => any;
+/**
+ * 不同时间模式对应的展示格式
+ */
+export declare const getDateModeFormat: (dateMode?: string) => "YYYY" | "YYYY-MM" | "YYYY-MM-DD";