Merge branch 'develop'

Author: yinLiangDream

.idea/workspace.xml

@@ -1,7 +1,7 @@
 import { ComponentClass } from 'react';
 
 export interface IProps {
-  type: 'fade' | 'scale-up' | 'scale-down' | 'slide-top' | 'slide-bottom' | 'slide-left' | 'slide-right' | 'shake';
+  type: 'fade' | 'scale-up' | 'scale-down' | 'slide-top' | 'slide-bottom' | 'slide-left' | 'slide-right' | 'shake' | 'none';
   reverse?: boolean;
   children?: any;
   delay?: number;

@types/animation.d.ts

@@ -26,17 +26,22 @@ export type TChooseImgObj = {
   /**
    * 选择成功回调函数
    */
-  success?: () => void;
+  success?: (list?: imgList) => void;
   /**
    * 选择失败回调函数
    */
-  fail?: () => void;
+  fail?: (list?: imgList) => void;
   /**
    * 接口调用结束的回调函数（调用成功、失败都会执行）
    */
-  complete?: () => void;
+  complete?: (list?: imgList) => void;
 };
 
+export type imgList = {
+  url: string,
+  status: 'success' | 'fail' | 'loading' | 'none'
+}[]
+
 export type TBeforeDel = (index: number) => boolean;
 
 export interface IProps {
@@ -49,7 +54,7 @@ export interface IProps {
   /**
    * 图片列表
    */
-  imgList?: string[];
+  imgList?: imgList;
   /**
    * 删除之前确认函数
    */

@types/imagePicker.ts

@@ -37,3 +37,5 @@ export { default as ClDivider } from './divider';
 export { default as ClForm } from './form';
 export { default as ClFormItem } from './formItem';
 export { default as ClTip } from './tip';
+
+export { default as ClUtils } from './utils';

@types/index.d.ts

@@ -0,0 +1,56 @@
+export interface IProps {
+  rule?: {
+    /**
+     * 手机号码正则校验
+     */
+    phone?: (value: string) => boolean;
+    /**
+     * email 地址校验
+     */
+    email?: (value: string) => boolean;
+    /**
+     * 数值范围校验
+     */
+    range?: (min: number, max: number, value: number) => boolean;
+    /**
+     * 是否为空
+     */
+    required?: (value: string) => boolean;
+    /**
+     * 是否为纯英文
+     */
+    en?: (value: string) => boolean;
+    /**
+     * 是否为纯中文
+     */
+    cn?: (value: string) => boolean;
+    /**
+     * 是否为金钱数字
+     */
+    money?: (value: number | string) => boolean;
+    /**
+     * 是否字母数字组合
+     */
+    code?: (value: string) => boolean;
+    /**
+     * 是否为纯数字
+     */
+    number?: (value: number | string) => boolean;
+    /**
+     * 是否为 ip 地址
+     */
+    ip?: (value: string) => boolean;
+    /**
+     * 是否为合法 url
+     */
+    url?: (value: string) => boolean;
+    /**
+     * 是否为合法身份证
+     */
+    idcard?: (value: string) => boolean;
+  }
+}
+
+declare const Utils: IProps;
+
+export default Utils;

@types/utils.d.ts

@@ -1,6 +1,6 @@
 {
 	"name": "mp-colorui",
-	"version": "0.4.5",
+  "version": "0.4.6",
 	"description": "MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）",
 	"keywords": [
 		"taro",

package.json

@@ -0,0 +1,12 @@
+.imagePicker-rotate-360 {
+  animation: loading 2s infinite linear;
+}
+
+@keyframes loading {
+  from {
+    transform: rotate(0deg)
+  }
+  to {
+    transform: rotate(360deg)
+  }
+}

src/components/imagePicker/index.scss

@@ -1,8 +1,9 @@
-import { Text, View } from '@tarojs/components';
+import { Text, View, Image } from '@tarojs/components';
 import Taro, { useState } from '@tarojs/taro';
-import { IProps } from '../../../@types/imagePicker';
-
+import { IProps, imgList } from '../../../@types/imagePicker';
+import ClIcon from '../icon';
 
+import './index.scss'
 
 export default function ClImagePicker(props: IProps) {
   const chooseImgObj = props.chooseImgObj || {};
@@ -16,22 +17,26 @@ export default function ClImagePicker(props: IProps) {
       count: chooseImgObj.count || 9,
       sizeType: chooseImgObj.sizeType || ['original', 'compressed'],
       sourceType: chooseImgObj.sourceType || ['album'],
-      success: function(res) {
+      success: (res) => {
         console.log(res);
-        const selectArray: string[] = res.tempFilePaths;
-        selectArray.forEach(url => {
-          if (!imgList.includes(url)) imgList.push(url);
+        const selectArray: imgList = res.tempFilePaths.map((url => ({ url, status: 'none' })));
+        selectArray.forEach(item => {
+          if (!imgList.find(obj => item.url === obj.url)) imgList.push(item);
         });
         setImgList(imgList);
-        chooseImgObj.success && chooseImgObj.success();
+        chooseImgObj.success && chooseImgObj.success.call(this, imgList);
+      },
+      fail() {
+        chooseImgObj.fail && chooseImgObj.fail.call(this, imgList)
       },
-      fail: chooseImgObj.fail || function() {},
-      complete: chooseImgObj.complete || function() {}
+      complete() {
+        chooseImgObj.complete && chooseImgObj.complete.call(this, imgList)
+      }
     });
   };
   const viewImage = (url: string) => {
     Taro.previewImage({
-      urls: imgList,
+      urls: imgList.map(item => item.url),
       current: url
     });
   };
@@ -48,32 +53,58 @@ export default function ClImagePicker(props: IProps) {
     }
   };
 
-  const imgComponet = imgList.map((url, index) => (
+  const errComponentTip = (
+    <View className='cu-tag' style={{backgroundColor: 'rgba(355, 355, 355, 0.8)'}}>
+      <ClIcon iconName='warnfill' size='xsmall' color='red' />
+    </View>
+  )
+
+  const successComponentTip = (
+    <View className='cu-tag' style={{backgroundColor: 'rgba(355, 355, 355, 0.8)'}}>
+      <ClIcon iconName='roundcheckfill' size='xsmall' color='olive' />
+    </View>
+  )
+
+  const loadingComponentTip = (
+    <View className='cu-tag' style={{backgroundColor: 'rgba(355, 355, 355, 0.8)'}}>
+      <View className='imagePicker-rotate-360'>
+        <ClIcon iconName='loading' size='xsmall' color='blue' />
+      </View>
+    </View>
+  )
+
+  const imgComponet = imgList.map((item, index) => (
     <View
-      className='padding-xs bg-img'
-      key={url}
-      style={{ backgroundImage: `url(${url})` }}
+      className='padding-xs bg-img bg-gray'
+      key={item.url}
+      style={{ borderRadius: '6px', position: 'relative' }}
       onClick={() => {
-        viewImage(url);
+        viewImage(item.url);
       }}
     >
-      <View
-        className='cu-tag bg-red'
-        onClick={e => {
-          delImg(index, e);
-          e.stopPropagation();
-        }}
-      >
-        <Text className='cuIcon-close' />
-      </View>
+      <Image src={item.url} mode='widthFix' style={{width: '100%', position: 'absolute', left: '0', top: '0', right: '0', bottom: '0'}} />
+      {item.status === 'none' ?
+        <View
+          className='cu-tag bg-red'
+          onClick={e => {
+            delImg(index, e);
+            e.stopPropagation();
+          }}
+          style={{backgroundColor: 'rgba(355, 355, 355, 0.8)'}}
+        >
+          <ClIcon iconName='close' color='black' size='xsmall' />
+        </View> : ''}
+      {item.status === 'success' ? successComponentTip : ''}
+      {item.status === 'fail' ? errComponentTip : ''}
+      {item.status === 'loading' ? loadingComponentTip : ''}
     </View>
   ));
 
   return (
     <View className='cu-form-group'>
       <View className='grid col-4 grid-square flex-sub'>
         {imgComponet}
-        <View className='padding-xs solids' onClick={ChooseImage}>
+        <View className='padding-xs bg-gray' onClick={ChooseImage} style={{ borderRadius: '6px' }}>
           <Text className='cuIcon-cameraadd' />
         </View>
       </View>