@aks-dev/easyui 1.0.115 → 1.0.117

package/lib/MutiPictureView/MutiPictureView.tsx

@@ -2,7 +2,7 @@
  * @Author: OBKoro1
  * @Date: 2022-04-24 17:38:27
  * @LastEditors: shiguo
- * @LastEditTime: 2022-11-10 11:37:13
+ * @LastEditTime: 2022-11-10 15:22:00
  * @FilePath: /@aks-dev/easyui/lib/MutiPictureView/MutiPictureView.tsx
  */
 
@@ -28,11 +28,13 @@ const MutiPictureView: React.FC<MutiPictureViewProps> = (props) => {
         addIconStyle,
         addIconContainerStyle,//borderWidth: 1, borderStyle: 'dashed', borderColor: assets.color_A3A9CC  虚线框
         itemContainerStyle,
+        emptyPlaceHolderStyle,
         delIcon,
         delIconStyle,
         spacingHorizontal = px2dp(15),
         spacingInner = px2dp(8),
         editable = true,
+        showEmptyPlaceHolder = false
     } = props
     const { viewModel, setViewModel } = bind
     React.useEffect(() => {
@@ -114,7 +116,7 @@ const MutiPictureView: React.FC<MutiPictureViewProps> = (props) => {
     const ItemView: React.FC<{ source: ImageSourcePropType, index: number }> = ({ source, index }) => {
 
         return (
-            <TouchableOpacity style={[styles.item_container,itemContainerStyle, {
+            <TouchableOpacity style={[styles.item_container, itemContainerStyle, {
                 marginTop: index < 3 ? 0 : spacingInner,
                 marginLeft: index % 3 == 0 ? spacingHorizontal : spacingInner,
                 width: sideLength,
@@ -168,7 +170,7 @@ const MutiPictureView: React.FC<MutiPictureViewProps> = (props) => {
 
             {
                 !(viewModel?.photos?.length == maxCount) && editable && (
-                    <TouchableOpacity style={[styles.item_container, itemContainerStyle,{
+                    <TouchableOpacity style={[styles.item_container, itemContainerStyle, {
                         marginTop: (viewModel?.photos?.length || 0) >= 3 ? spacingInner : 0,
                         marginLeft: (viewModel?.photos?.length || 0) % 3 == 0 ? spacingHorizontal : spacingInner,
                         width: sideLength,
@@ -180,6 +182,17 @@ const MutiPictureView: React.FC<MutiPictureViewProps> = (props) => {
 
                 )
             }
+            {
+                showEmptyPlaceHolder && maxCount - (viewModel.photos?.length || 0) - 1 > 0 &&
+                Array.from({ length: maxCount - (viewModel.photos?.length || 0) -  (editable?1:0) }, (_, k) =>
+                    <View key={`sg-showEmptyPlaceHolder-${k}`} style={[styles.empty_place_container, emptyPlaceHolderStyle, itemContainerStyle, {
+                        marginTop: k + (editable?1:0) + (viewModel.photos?.length || 0) > 2 ? spacingInner : 0,
+                        marginLeft: (k + (editable?1:0) + (viewModel.photos?.length || 0)) % 3 == 0 ? spacingHorizontal : spacingInner,
+                        width: sideLength,
+                        height: sideLength,
+                    }]} />
+                )
+            }
         </View >
 
     )
@@ -219,6 +232,12 @@ const styles = StyleSheet.create({
         width: px2dp(24),
         height: px2dp(24)
     },
+    empty_place_container: {
+        borderRadius: px2dp(10),
+        backgroundColor: '#ededed',
+        borderColor: '#cccccc',
+        borderWidth: .75,
+    }
 })
 
 

package/lib/MutiPictureView/index.ts

@@ -3,7 +3,7 @@ import { TextStyle } from 'react-native';
  * @Author: shiguo
  * @Date: 2022-04-24 17:38:32
  * @LastEditors: shiguo
- * @LastEditTime: 2022-11-10 11:36:31
+ * @LastEditTime: 2022-11-10 12:15:56
  * @FilePath: /@aks-dev/easyui/lib/MutiPictureView/index.ts
  */
 import { StyleProp, ViewStyle, ImageStyle, ImageSourcePropType } from 'react-native'
@@ -52,6 +52,9 @@ export declare type MutiPictureViewProps = {
     editable?: boolean;
     /**这个属性会覆盖bind.viewModel.photos */
     value?: (string | { uri: string })[];
+    /**default false 空视图占位 */
+    showEmptyPlaceHolder?: boolean;
+    emptyPlaceHolderStyle?: StyleProp<ViewStyle>;
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aks-dev/easyui",
-  "version": "1.0.115",
+  "version": "1.0.117",
   "description": "工具箱",
   "main": "./src/index.ts",
   "typings": "./src/index.d.ts",