@cloudbase/weda-ui 0.2.15 → 0.2.16

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: [latitude, longitude],
+        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.lat, latlng.lng],
+            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/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 SparkMD5 from 'spark-md5';
 
 const uploadPath = 'weda-uploader';
 /**
@@ -87,16 +88,21 @@ export function ImageUploaderH5({
     setUploading(true);
     getCloudInstance().then(async (tcb) => {
       try {
-        const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/uploader-${Date.now()}.${fileType}`;
-        const { fileID } = await tcb.uploadFile({
-          cloudPath,
-          filePath: file,
-          onUploadProgress: onProgress,
-        });
-        // @ts-expect-error TODO
-        fileID && setInputValue((list) => [...list, fileID]);
-        fileID && events.success && events.success({ value: fileID, file });
+        const fileReader = new FileReader();
+        fileReader.readAsBinaryString(file);
+        fileReader.onload = async function (e) {
+          const md5Path = SparkMD5.hashBinary(e.target.result);
+          const fileType = file.type.split('/')?.[1];
+          const cloudPath = `${uploadPath}/${md5Path}-${file?.name}`;
+          const { fileID } = await tcb.uploadFile({
+            cloudPath,
+            filePath: file,
+            onUploadProgress: onProgress,
+          });
+          // @ts-expect-error TODO
+          fileID && setInputValue((list) => [...list, fileID]);
+          fileID && events.success && events.success({ value: fileID, file });
+        };
       } catch (err) {
         events.error && events.error(err);
       } finally {

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

@@ -8,13 +8,12 @@ import {
   ImagePreview,
   ConfigProvider,
 } from 'tea-component';
-import { v4 } from 'uuid';
 import classNames from '../../../utils/classnames';
 import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
 import { isCloudFileID } from '../../../utils/platform';
 import isObjectEqual from '../../../utils/isObjectEqual';
 import { H5UploaderProps } from './uploader.h5';
-
+import SparkMD5 from 'spark-md5';
 // 默认组件类前缀
 export const CLASS_PREFIX = 'weda-uploader-pc';
 // 默认图片类型
@@ -131,15 +130,20 @@ export function UploaderPCInner(props) {
     setUploading(true);
     getCloudInstance().then(async (tcb) => {
       try {
-        const fileType = file.type.split('/')?.[1];
-        const cloudPath = `${uploadPath}/${uploadFileName}-${v4()}.${fileType}`;
-        const { fileID } = await tcb.uploadFile({
-          cloudPath,
-          filePath: file,
-          onUploadProgress: onProgress,
-        });
-        fileID && setfileIDList((list) => [...list, fileID]);
-        fileID && events.success && events.success({ value: fileID, file });
+        const fileReader = new FileReader();
+        fileReader.readAsBinaryString(file);
+        fileReader.onload = async function (e) {
+          const md5Path = SparkMD5.hashBinary(e.target.result);
+          const fileType = file.type.split('/')?.[1];
+          const cloudPath = `${uploadPath}/${md5Path}-${file?.name}`;
+          const { fileID } = await tcb.uploadFile({
+            cloudPath,
+            filePath: file,
+            onUploadProgress: onProgress,
+          });
+          fileID && setfileIDList((list) => [...list, fileID]);
+          fileID && events.success && events.success({ value: fileID, file });
+        };
       } catch (e) {
         events.error && events.error({ value: e, file });
       } finally {