@cloudbase/weda-ui 0.2.14 → 0.2.17

package/src/web/components/form/location/components/LocationPC/location.PC.jsx

@@ -0,0 +1,323 @@
+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, useRef } = React;
+
+export default function LocationPC(props) {
+  // 属性、变量
+  const {
+    // 系统属性
+    id,
+    className,
+    style,
+    events,
+    // 组件属性
+    value,
+    label,
+    labelVisible,
+    customLocation,
+    locationType,
+    showLngLat,
+    showMap,
+    drag,
+    zoom,
+    disabled,
+    requiredFlag,
+    decorator,
+    dataSource,
+  } = 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, latitude, longitude } = value;
+    let res = {
+      address: poiname,
+      geopoint: {
+        coordinates: [longitude, latitude],
+        type: 'Point',
+      },
+    };
+    if (noaddr) {
+      res = null;
+    }
+    events.change &&
+      events.change({
+        value: res,
+      });
+  };
+  const {
+    location,
+    setLocation,
+    apiKeyStatus,
+    setApiKeyStatus,
+    currentLocStatus,
+    currentLocations,
+  } = useLocationInfo({
+    apiKey: APIKEY,
+    locationType,
+    dataSourceStatus,
+    eventsChange,
+  });
+
+  useEffect(() => {
+    if (value || !currentLocations.current) return;
+    setUserSelectStatus('default');
+    // 重置表单时
+    const {
+      poiname,
+      latlng: { lat, lng },
+    } = currentLocations.current;
+    let location = {
+      poiname,
+      latlng: { lat, lng },
+    };
+    if (locationType === 1) {
+      location.locationType = 1;
+      eventsChange({}, true);
+    } else if (locationType === 2) {
+      eventsChange({
+        latitude: lat,
+        longitude: lng,
+        poiname: poiname,
+      });
+    }
+    setLocation(location);
+  }, [value, locationType]);
+
+  // 事件
+  const handleChooseLocation = () => {
+    if (disabled) return;
+    if (!dataSourceStatus.status) return weui.alert(dataSourceStatus.message);
+    if (!apiKeyStatus.status) return weui.alert(apiKeyStatus.message);
+    if (!currentLocStatus) return weui.alert('获取当前位置信息中，请稍等');
+    setIsSelectMapVisible(true);
+  };
+  const onChangeLocation = (value) => {
+    const { poiname, latlng } = value;
+    events.change &&
+      events.change({
+        value: {
+          address: poiname,
+          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: '"地图定位组件"需进行地图配置，请检查',
+      });
+      weui.alert('"地图定位组件"需进行地图配置，请检查');
+    }
+  }, [dataSource]);
+
+  useEffect(() => {
+    let loc = {
+      latlng: {
+        lat: 39.98410411,
+        lng: 116.307503,
+      },
+      poiname: '',
+      locationType,
+    };
+    switch (locationType) {
+      case 2:
+        // @ts-ignore
+        loc = {
+          latlng: {
+            lat: location.latlng.lat,
+            lng: location.latlng.lng,
+          },
+          poiname: location.poiname,
+        };
+        break;
+      case 3:
+        if (checkCustomLocation(customLocation)) {
+          weui.alert('位置输入格式错误 请检查');
+        } else {
+          // @ts-ignore
+          loc = {
+            latlng: {
+              lat: customLocation.latitude,
+              lng: customLocation.longitude,
+            },
+            poiname: customLocation.poiname,
+          };
+        }
+        break;
+    }
+    setLocation(loc);
+    // 暂不支持自定位置，初始化表单值都是null
+    eventsChange(
+      {
+        latitude: loc.latlng.lat,
+        longitude: loc.latlng.lng,
+        poiname: loc.poiname,
+      },
+      true
+    );
+  }, [locationType]);
+
+  useEffect(() => {
+    if (locationType != 3) {
+      return;
+    }
+    if (checkCustomLocation(customLocation)) {
+      weui.alert('位置输入格式错误 请检查');
+      return;
+    }
+    let { latitude, longitude, poiname } = customLocation;
+    let loc = {
+      latlng: {
+        lat: latitude,
+        lng: longitude,
+      },
+      poiname: poiname,
+    };
+    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;
+    // @ts-ignore
+    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 = (
+    <ConfigProvider classPrefix="wedatea2td">
+      <div
+        className={classNames(
+          'wedatea2td-form__controls wedatea2td-form__controls_wrap',
+          className
+        )}
+        style={style}
+        data-testid="_weda-fn-map"
+      >
+        <div className="_weda-fn-map">
+          <Header
+            isEdit={userSelectStatus === 'selected'}
+            info={location}
+            onClick={handleChooseLocation}
+            disabled={disabled}
+            showLngLat={showLngLat}
+            locationType={locationType}
+            apiKeyStatus={apiKeyStatus}
+            currentLocStatus={currentLocStatus}
+            dataSourceStatus={dataSourceStatus.status}
+          />
+          {getIsShowMap() ? (
+            <div className={classNames('form-location-map-pc')}>
+              <MapView
+                APIKEY={APIKEY}
+                drag={drag}
+                zoom={zoom}
+                latlng={location.latlng}
+              />
+            </div>
+          ) : null}
+        </div>
+      </div>
+      <SelectModal
+        isSelectMapVisible={isSelectMapVisible}
+        setIsSelectMapVisible={setIsSelectMapVisible}
+        location={location}
+        setLocation={setLocation}
+        APIKEY={APIKEY}
+        chooseLocation={onChangeLocation}
+      />
+    </ConfigProvider>
+  );
+
+  return renderDecorator(
+    LocationEl,
+    decorator
+  )({
+    id,
+    className: cls,
+    style,
+    label: labelVisible ? label : null,
+    multiCell: false,
+    requiredFlag,
+  });
+}
+
+LocationPC.propTypes = propTypes;
+
+LocationPC.defaultProps = defaultProps;

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

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

package/src/web/components/form/location/index.jsx

@@ -0,0 +1,25 @@
+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?.showType === 'pc') {
+    return <LocationPC {...props} />;
+  }
+  if (props?.showType === 'h5') {
+    return <LocationH5 {...props} />;
+  }
+
+  return platform === 'h5' ? (
+    <ConfigProvider classPrefix="wedatea2td">
+      <LocationH5 {...props} />
+    </ConfigProvider>
+  ) : (
+    <LocationPC {...props} />
+  );
+}

package/src/web/components/form/select/h5.tsx

@@ -93,6 +93,7 @@ export default function Select({
     !!endDate && (options.end = decodeIsoDatetime(endDate, 'date'));
 
     weui.datePicker({
+      id: String(Date.now()),
       ...options,
       onConfirm(result) {
         const value = moment()
@@ -129,6 +130,7 @@ export default function Select({
 
   const onSelect = function () {
     weui.picker(range, {
+      id: String(Date.now()),
       defaultValue: [selectedValue || range[0].value],
       onConfirm(result) {
         const item = result[0];
@@ -246,7 +248,7 @@ export function decodeIsoDatetime(isoStringOrTimesnap, type) {
     } else {
       return moment(isoStringOrTimesnap).format('HH:mm');
     }
-  } else {                                                
+  } else {
     return moment(isoStringOrTimesnap).format('YYYY-MM-DD');
   }
 }

package/src/web/components/form/select/time.jsx

@@ -48,6 +48,7 @@ export function timePicker(options) {
   ];
   weui.picker(hours, {
     ...options,
+    id: String(Date.now()),
     start: [startHour, startMin],
     end: [endHour, endMin],
     defaultValue,

package/src/web/components/form/uploader/uploader.h5.tsx

@@ -7,6 +7,7 @@ import { useSyncValue } from '../../../utils/useSyncValue';
 import { isCloudFileID } from '../../../utils/platform';
 import { IMAGE_TYPES } from './uploader.pc';
 import { CommonFormPropsType } from '../types';
+import { v4 } from 'uuid';
 
 const uploadPath = 'weda-uploader';
 /**
@@ -39,7 +40,12 @@ export function ImageUploaderH5({
   //上传进度
   const [progress, setProgress] = React.useState(0);
   const [inputValue, setInputValue] = useSyncValue(defaultValue, isObjectEqual);
+
   const fileIdList = React.useMemo(() => {
+    //兼容h5默认值为空时情况
+    if (inputValue === null) {
+      setInputValue('');
+    }
     if (typeof inputValue === 'string') {
       // single = true 传入的是字符串
       return [inputValue].filter((i) => i.length > 0); // 排除空串
@@ -66,7 +72,7 @@ export function ImageUploaderH5({
   React.useEffect(() => {
     if (single) {
       const file = fileIdList[0] || '';
-      file && onChange && onChange(file);
+      onChange && onChange(file);
       events.change && events.change({ value: file });
     } else {
       onChange && onChange(fileIdList);
@@ -88,7 +94,9 @@ export function ImageUploaderH5({
     getCloudInstance().then(async (tcb) => {
       try {
         const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/uploader-${Date.now()}.${fileType}`;
+        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
+          file?.name
+        }`;
         const { fileID } = await tcb.uploadFile({
           cloudPath,
           filePath: file,

package/src/web/components/form/uploader/uploader.pc.tsx

@@ -14,7 +14,6 @@ import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import { isCloudFileID } from '../../../utils/platform';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { H5UploaderProps } from './uploader.h5';
-
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
@@ -97,7 +96,7 @@ export function UploaderPCInner(props) {
     if (!isObjectEqual(fileRef.current, fileIDList)) {
       if (single) {
         const file = fileIDList[0] || '';
-        file && onChange && onChange(file);
+        onChange && onChange(file);
         events.change && events.change({ value: file });
       } else {
         onChange && onChange(fileIDList);
@@ -132,7 +131,9 @@ export function UploaderPCInner(props) {
     getCloudInstance().then(async (tcb) => {
       try {
         const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/${uploadFileName}-${v4()}.${fileType}`;
+        const cloudPath = `${uploadPath}/${v4().replaceAll('-', '')}-${
+          file?.name
+        }`;
         const { fileID } = await tcb.uploadFile({
           cloudPath,
           filePath: file,