@zamlia/mini-ui 0.0.11 → 0.0.12

package/src/components/common/UploadFile/index.tsx

@@ -1,321 +0,0 @@
-import Taro from '@tarojs/taro';
-import React, { useEffect, useState } from 'react';
-import { View, Image, ITouchEvent } from '@tarojs/components';
-import { 
-  beforeUpload, 
-  convertToDomainFile, 
-  convertToUploadValue, 
-  getKeyName, 
-  uploadImageTypes, 
-  uploadTypes, 
-  uploadVideoTypes 
-} from './utils';
-import { Utils } from '@utils';
-import { uploadFile, UploadFileOption } from './upload';
-import VideoView from '../VideoView';
-import './index.scss';
-
-export type UploadFile = {
-  url: string
-}
-
-export type UploadFileProps = {
-  host: string
-  /**
-   * 可上传文件类型
-   */
-  fileTypes?: string[];
-  value?: any;
-  /**
-   * 最大文件大小，单位MB（暂时没有）
-   */
-  maxSize?: number;
-  /**
-   * 最多上传多少个文件
-   * 最多是8张图片
-   */
-  maxCount?: number;
-  /**
-   * 是否展示删除按钮
-   */
-  showDelete?: boolean;
-  chooseType?: 'img' | 'video' | 'media'
-  dir?: string
-  /**
-   * 扩展参数
-   */
-  extraData?: Record<string, any>
-  onChange?: (v?: any) => void;
-}
-
-interface UploadFileConponent extends React.FC<UploadFileProps> {
-  upload?: (options: UploadFileOption) => Promise<string>
-  /** 文件类型 */
-  UPLOAD_TYPES: string[]
-  /** 图片类型 */
-  UPLOAD_IMAGE_TYPES: string[]
-  /** 视频类型 */
-  UPLOAD_VIDEO_TYPES: string[]
-}
-
-/**
- *
- * @param props
- * @returns React.ReactElement
- */
-export const UploadFile: UploadFileConponent = (props) => {
-  let {
-    host,
-    value = [],
-    fileTypes = uploadImageTypes,
-    maxCount = 1,
-    showDelete = false,
-    chooseType = 'img',
-    dir,
-    extraData = {},
-    onChange: handleDomainFileChange
-  } = props
-  const [files, setFiles] = useState<UploadFile[]>([]);
-  const [loading] = useState<boolean>(false);
-
-  // maxCount = maxCount > 8 ? 8 : maxCount;
-
-  useEffect(() => {
-    // 取出上传中的文件
-    const uploadValue = convertToUploadValue(value);
-    const newFileList = [...uploadValue, ...files] as UploadFile[];
-    // 设置文件列表
-    setFiles(newFileList);
-  }, [])
-
-    const handleExtraData = async (file: any, dir?: string) => {
-
-    return {
-      key: `${dir}/${getKeyName(file)}`,
-      ...extraData
-    };
-  };
-
-  /**
-   * 上传图片
-   * @param index
-   * @returns
-   */
-  const handleUploadFile = async (_: ITouchEvent, index?: number) => {
-    if (maxCount !== 1 && isNaN(index || NaN) && files.length >= maxCount) {
-      Taro.showToast({ title: `最多只能上传${maxCount}文件` })
-      return;
-    }
-
-    let chooseFn = handleChooseImage;
-    if (chooseType === 'video') {
-      chooseFn = handleChooseVideo
-    } else if (chooseType === 'media') {
-      chooseFn = handleChooseMedia
-    } else {
-      chooseFn = handleChooseImage;
-    }
-
-    chooseFn().then(async chooseImageList => {
-      let firstChooseImageUrl: string = Array.isArray(chooseImageList) ? chooseImageList[0]!! : chooseImageList
-      const pass = beforeUpload(firstChooseImageUrl, fileTypes);
-      if (!pass) {
-        Taro.hideLoading();
-        return;
-      }
-      if (loading) return;
-      Taro.showLoading({ title: '上传中...' });
-
-      const formData = await handleExtraData(firstChooseImageUrl, dir);
-      Taro.uploadFile({
-        url: host,
-        // @ts-ignore
-        fileType: 'image',
-        filePath: firstChooseImageUrl,
-        name: 'file',
-        header: {
-          'content-type': 'multipart/form-data'
-        },
-        formData,
-        success(res) {
-          let { statusCode } = res;
-          //do something
-          if (!/2\d/.test(statusCode as any)) {
-            Taro.hideLoading();
-            Taro.showToast({ title: '上传失败' })
-            return;
-          }
-          let newFiles: UploadFile[] = Utils.cloneDeep(files);
-          let ossImgUrl = `${host}/${dir}/${getKeyName(firstChooseImageUrl)}`;
-          if (maxCount === 1) {
-            if (!newFiles[0]) {
-              newFiles.push({
-                url: ossImgUrl
-              })
-            } else {
-              newFiles[0].url = ossImgUrl
-            }
-          } else {
-            if (!isNaN(index || NaN)) {
-              newFiles[index || NaN].url = ossImgUrl
-            } else {
-              newFiles.push({
-                url: ossImgUrl
-              })
-            }
-          }
-          handleDomainFileChange?.(convertToDomainFile(maxCount, newFiles));
-          setFiles(newFiles);
-          Taro.hideLoading();
-        },
-        fail(res) {
-          console.error('上传失败错误信息：', res);
-          Taro.hideLoading();
-          Taro.showToast({ title: `上传失败${res?.errMsg ? `,${res?.errMsg}` : ''}` })
-        }
-      })
-    })
-  }
-
-  /**
-   * 删除图片
-   * @param index
-   */
-  const handleDeleteImg = async (e: ITouchEvent, index: number) => {
-    e.stopPropagation()
-    if (files?.length === 0) return
-    let newFiles = Utils.cloneDeep(files)
-    newFiles.splice(index, 1);
-    if (handleDomainFileChange) {
-      handleDomainFileChange(convertToDomainFile(maxCount, newFiles));
-    }
-    setFiles(newFiles)
-  }
-
-  /**
-   * 选择图片
-   */
-  const handleChooseImage = (): Promise<any> => {
-    return new Promise((resolve, reject) => {
-      Taro.chooseImage({
-        count: 1,
-        // sizeType: [],
-        success(res) {
-          const tempFilePaths = res.tempFilePaths
-          resolve(tempFilePaths)
-        },
-        fail(res) {
-          reject(res)
-        }
-      })
-    })
-  }
-
-  /**
-     * 选择视频
-     */
-  const handleChooseVideo = (): Promise<any> => {
-    return new Promise((resolve, reject) => {
-      Taro.chooseVideo({
-        maxDuration: 60,
-        sourceType: ['album', 'camera'],
-        // sizeType: [],
-        success(res) {
-          const tempFilePaths = res.tempFilePath
-          resolve([tempFilePaths])
-        },
-        fail(res) {
-          reject(res)
-        }
-      })
-    })
-  }
-
-  /**
-       * 选择图片视频
-       */
-  const handleChooseMedia = (): Promise<any> => {
-    return new Promise((resolve, reject) => {
-      Taro.chooseMedia({
-        count: 1,
-        mediaType: ['image', 'video'],
-        sourceType: ['album', 'camera'],
-        maxDuration: 60,
-        camera: 'back',
-        success(res) {
-          const tempFilePaths = res.tempFiles
-          resolve(tempFilePaths)
-        },
-        fail(res) {
-          reject(res)
-        }
-      })
-    })
-  }
-
-  let firstFile: any = files[0]
-  return (
-    <>
-      <View className='uploadImg'>
-        {
-          maxCount !== 1 &&
-          <>
-            {
-              files?.map((item: any, index) => {
-                return (
-                  <View className='uploadImg__item' onClick={(e) => { handleUploadFile(e, index) }}>
-                    {showDelete && <View className='deleteImg' onClick={(e) => { handleDeleteImg(e, index) }} />}
-                    {
-                      Utils.isImg(item?.url) && <Image src={item?.url} mode={'widthFix'} />
-                    }
-                    {
-                      Utils.isVideo(item?.url) && <VideoView url={item?.url} />
-                    }
-                  </View>
-                )
-              })
-            }
-            {
-              files.length < maxCount &&
-              <View className='uploadImg__add' onClick={handleUploadFile}>
-                <View className='add_icon' />
-              </View>
-            }
-          </>
-        }
-        {maxCount === 1 &&
-          <>
-            {
-              !firstFile?.url ?
-                <View className='uploadImg__add' onClick={(e) => handleUploadFile(e)}>
-                  <View className='add_icon' />
-                </View> :
-                <View className='uploadImg__item' onClick={(e) => {
-                  if (Utils.isImg(firstFile?.url)) {
-                    handleUploadFile(e)
-                  }
-                }}>
-                  {showDelete && <View className='deleteImg' onClick={(e) => { handleDeleteImg(e, 0) }} />}
-                  {
-                    Utils.isImg(firstFile?.url) &&
-                    <Image src={firstFile?.url!} mode={'widthFix'} />
-                  }
-                  {
-                    Utils.isVideo(firstFile?.url) && <VideoView url={firstFile?.url} />
-                  }
-                </View>
-            }
-          </>
-        }
-      </View>
-    </>
-  );
-}
-
-UploadFile.upload = uploadFile;
-UploadFile.UPLOAD_TYPES = uploadTypes;
-UploadFile.UPLOAD_IMAGE_TYPES = uploadImageTypes;
-UploadFile.UPLOAD_VIDEO_TYPES = uploadVideoTypes;
-
-export default UploadFile;
-

package/src/components/common/UploadFile/upload.ts

@@ -1,63 +0,0 @@
-import Taro from "@tarojs/taro"
-import { beforeUpload, getKeyName, uploadImageTypes } from "./utils";
-
-export type UploadFileOption = {
-  file: string
-  dir: string
-  /**
-   * 扩展参数
-  */
-  extraData?: Record<string, any>
-  host: string
-}
-
-const handleExtraData = async (file: any, dir: string, extraData?: Record<string, any>) => {
-
-  return {
-    key: `${dir}/${getKeyName(file)}`,
-    ...extraData
-  };
-};
-
-// 上传头像到服务器
-export const uploadFile = (options: UploadFileOption): Promise<string> => {
-  const { file, dir, extraData, host } = options;
-  const pass = beforeUpload(file, uploadImageTypes);
-
-  return new Promise(async (resolve) => {
-    if (!pass) {
-      Taro.hideLoading();
-      return
-    }
-
-    const extraFormData = await handleExtraData(file, dir, extraData)
-
-    Taro.uploadFile({
-      url: host,
-      // @ts-ignore
-      fileType: 'image',
-      filePath: file,
-      name: 'file',
-      header: {
-        'content-type': 'multipart/form-data'
-      },
-      formData: extraFormData,
-      success(res) {
-        let { statusCode } = res;
-        if (!/2\d/.test(statusCode as any)) {
-          Taro.hideLoading();
-          Taro.showToast({ title: '上传失败' })
-          return;
-        }
-        let ossImgUrl = `${host}/${dir}/${getKeyName(file)}`;
-        resolve(ossImgUrl)
-        Taro.hideLoading();
-      },
-      fail(res) {
-        console.error('上传失败错误信息：', res);
-        Taro.hideLoading();
-        Taro.showToast({ title: `上传失败${res?.errMsg ? `,${res?.errMsg}` : ''}` })
-      }
-    })
-  })
-}

package/src/components/common/UploadFile/utils.ts

@@ -1,81 +0,0 @@
-import Taro from "@tarojs/taro";
-import UploadFile from ".";
-
-export const uploadTypes = ['.rar', '.zip', '.doc', '.docx', '.pdf', '.txt', '.svg', '.png', '.image', '.mp4'];
-export const uploadImageTypes = ['.gif', '.png', '.jpg', '.jpeg', '.image'];
-export const uploadVideoTypes = ['.mp4'];
-
-/**
- * 将业务文件转换为上传文件
- * @param v 
- * @returns 
- */
-export const convertToUploadValue = (v: string[] | string): any => {
-  if (Array.isArray(v)) {
-    if (!v || v === undefined || v === null) {
-      return [];
-    }
-
-    return (v as any[]).map((it) => ({
-      url: it
-    }));
-  }
-};
-
-/**
- * 将上传文件转换为业务文件
- * @param {number} maxCount
- * @param v 
- * @returns 
- */
-export const convertToDomainFile = (maxCount: number, v?: UploadFile[]): any => {
-  if (maxCount > 1) {
-    if (!v) {
-      return [];
-    }
-    return v.map((it) => {
-      return {
-        url: it.url,
-      };
-    });
-  }
-  if (!v) {
-    return [];
-  }
-  const it = v[0];
-  return {
-    url: it.url,
-  };
-};
-
-export const beforeUpload = (file: string, verifyTypes: string[]): boolean => {
-  const isMatchType = verifyTypes.indexOf(file.replace(/.+\./, '.').toLowerCase()) !== -1;
-  if (!isMatchType) {
-    Taro.showModal({ title: `文件格式只支持：${verifyTypes.join('，')}` })
-    return false;
-  }
-  // const isLimitSize = file.size / 1024 / 1024 < 8;
-  // if (!isLimitSize) {
-  //   utils.showToastError({ title: `文件必须小于${maxSize}MB` });
-  //   return false;
-  // }
-  return true;
-};
-
-export const getKeyName = (file: string) => {
-
-    let key = file;
-    if (file?.split("http://tmp/").length === 2) {
-      key = file?.split("http://tmp/")[1];
-    }
-    if (file?.split("https://resource/").length === 2) {
-      key = file?.split("https://resource/")[1];
-    }
-    if (file?.replace(/.+\./, '.').toLowerCase() === '.image') {
-      key = key?.replace('.image', '.png')
-    }
-    if (file?.replace(/.+\./, '.').toLowerCase() === '.video') {
-      key = key?.replace('.video', '.mp4')
-    }
-    return key;
-  }

package/src/components/common/VideoView/index.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { Video, View } from '@tarojs/components';
-
-export type VideoViewProps = {
-  url: string
-  hasToH5Show?: boolean
-  width?: number
-  height?: number
-  onH5Open?: (url: string) => void
-};
-
-/**
- * 视频显示
- */
-const VideoView: React.FC<VideoViewProps> = (props) => {
-  const {
-    url,
-    hasToH5Show = true,
-    width,
-    height,
-    onH5Open
-  } = props;
-
-  return (
-    <>
-      <View
-        style={{
-          width,
-          height
-        }}
-        onClick={() => {
-          if (!hasToH5Show) return
-          onH5Open?.(url);
-        }}>
-        <Video
-          id='myvideo'
-          src={url}
-          initialTime={0}
-          controls={false}
-          autoplay={false}
-          loop={false}
-          muted={false}
-          showPlayBtn={false}
-        />
-      </View>
-    </>
-  );
-};
-
-export default VideoView;

package/src/components/common/index.ts

@@ -1,23 +0,0 @@
-export { default as BottomPopup} from './BottomPopup'
-export { default as Card} from './Card'
-export { default as Modal} from './Modal'
-export { default as NavBar} from './NavBar'
-export { default as Page} from './Page'
-export { default as PullToPushRefresh} from './PullToPushRefresh'
-export { default as Tabs } from './Tabs';
-export { default as VideoView } from './VideoView';
-export { default as UploadFile } from './UploadFile';
-export { default as Radio } from './Radio';
-export { default as DataSelect } from './DataSelect';
-
-export type { BottomPopupProps } from './BottomPopup'
-export type  { CardProps} from './Card'
-export type  { ModalProps} from './Modal'
-export type  { NavBarProps} from './NavBar'
-export type  { PageProps} from './Page'
-export type  { PullToPushRefreshProps} from './PullToPushRefresh'
-export type  { TabsProps } from './Tabs';
-export type  { VideoViewProps } from './VideoView';
-export type { UploadFileProps } from './UploadFile';
-export type { RadioProps } from './Radio';
-export type { DataSelectProps } from './DataSelect';

package/src/components/industry/CitySelectButton/index.tsx

@@ -1,76 +0,0 @@
-import React, { useState } from 'react';
-import { View } from '@tarojs/components';
-import CitySelectModal, { CityData } from '../CitySelectModal';
-import './index.scss';
-
-export type CitySelectButtonProps = {
-  className?: string
-  onChange?: (value: CityData) => void;
-  /**
-   * @param {CityData} value
-   * @returns {React.ReactElement}
-  */
-  buttonRender: (value: CityData) => React.ReactElement
-}
-
-/**
- * 顶部选择城市按钮
- */
-const CitySelectButton: React.FC<CitySelectButtonProps> = (props) => {
-  const {
-    className,
-    onChange,
-    buttonRender
-  } = props;
-  const [visible, setVisible] = useState<boolean>(false);
-  const [currentCity, setCurrentCity] = useState<CityData>(null as any);
-
-  const handleSelectCity = () => {
-    // @ts-ignore
-    if (process.env.TARO_ENV !== 'alipay') {
-      setVisible(true)
-      return
-    } else {
-      // @ts-ignore
-      my.chooseCity({
-        showLocatedCity: true,
-        showHotCities: true,
-        success: async (result: any) => {
-          let { adCode, city } = result;
-          const cityCode = adCode.slice(3, 4) === '0' ? adCode.replace(/000/, '010') : adCode;
-          console.log(cityCode)
-          let currentCity = {
-            id: cityCode,
-            value: city,
-          }
-          setCurrentCity(currentCity)
-          onChange?.(currentCity)
-        },
-      });
-    }
-  }
-
-  return (
-    <>
-      <View className={className} onClick={handleSelectCity}>
-        {buttonRender(currentCity)}
-      </View>
-
-      {
-        visible && (
-          <CitySelectModal
-            visible={visible}
-            onChange={(city) => {
-              setCurrentCity(city)
-              onChange?.(city)
-              setVisible(false)
-            }}
-            onClose={() => setVisible(false)}
-          />
-        )
-      }
-    </>
-  )
-}
-
-export default CitySelectButton