添加通用单窗口输入弹窗、分组重命名

添加通用单窗口输入弹窗、分组重命名

entry/src/main/ets/componets/common/commonInputDialog.ets

@@ -0,0 +1,85 @@
+/**
+ * 通用单窗口输入弹窗
+ * 主要传值为title标题、textValue输入框值、cancel取消方法、confirm确认方法
+ */
+import { showMessage } from './promptShow'
+
+@CustomDialog
+export default struct commonInputDialog {
+
+  controller?: CustomDialogController
+
+  cancel: () => void = () => {
+  }
+  confirm: () => void = () => {
+  }
+  //输入框内容长度
+  @State ValueLength:number = 0
+  //标题
+  @Prop title:string = '新增'
+  @Prop titleWidth:string = '80%'
+  build() {
+    Column() {
+      Text(`${this.title}` ).fontWeight(600).fontSize(20).margin({ top: 20, bottom: 10 })
+      this.input()
+      Row({space:24}) {
+        Text('取消')
+          .onClick(() => {
+            if (this.controller != undefined) {
+              this.controller.close()
+              this.cancel()
+            }
+          })
+          .borderRadius(15)
+          .padding({left:30,right:30,top:10,bottom:10})
+          .fontColor($r('app.color.theme_color'))
+          .backgroundColor('rgba(255,120,0,0.12)')
+        Text('确认')
+          .onClick(() => {
+            if (this.controller != undefined) {
+              this.confirm()
+              this.controller.close()
+            }
+          })
+          .borderRadius(15)
+          .padding({left:30,right:30,top:10,bottom:10})
+          .fontColor(Color.White)
+          .backgroundColor($r('app.color.theme_color'))
+      }.padding({top:20,bottom:20})
+    }
+    .backgroundColor(Color.White)
+    .width(this.titleWidth)
+  }
+  //输入框提示
+  @Prop placeholder:string = '请输入内容'
+  //输入框值
+  @Link textValue:string
+  //默认可输入20长度
+  @Prop maxLength:number = 20
+  //是否显示统计
+  @Prop isShowCount:boolean = false
+  @Builder input(){
+    Row(){
+      TextInput({ placeholder: this.placeholder, text: this.textValue })
+        .cancelButton({icon:{src:$r('app.media.clear')}})
+        .height(40)
+        .onChange((value: string) => {
+          this.ValueLength = value.length
+          if(this.maxLength === value.length){
+            showMessage(`超出输入范围,最长可输入${this.maxLength}字符`)
+          }
+          this.textValue = value
+        })
+        .maxLength(this.maxLength)
+      if (this.isShowCount && this.maxLength - this.ValueLength !== 0){
+      Row(){
+          Text(JSON.stringify(this.maxLength - this.ValueLength)).fontSize(10).fontWeight(600).fontColor(this.maxLength - this.ValueLength ===0?Color.Red:'')
+          Text('/').fontSize(10).fontWeight(600).fontColor(10 - this.ValueLength ===0?Color.Red:'')
+          Text(JSON.stringify(this.maxLength)).fontSize(10).fontWeight(600).fontColor(10 - this.ValueLength ===0?Color.Red:'')
+      }.offset({x:this.ValueLength>0?-70:-40})
+      }
+
+    }
+    .alignItems(VerticalAlign.Center)
+  }
+}

entry/src/main/ets/pages/view/dialog/FolderInfoDialog.ets

@@ -1,6 +1,10 @@
+import commonInputDialog from '../../../componets/common/commonInputDialog'
 import InsideCircleIcon from '../../../componets/common/InsideCircleIcon'
+import { showMessage } from '../../../componets/common/promptShow'
 import { buttonList } from '../../../componets/dataList/buttonList'
 import { folderList } from '../../../componets/dataList/folderList'
+import { updateBookListData } from '../../../storage/bookListData'
+
 @CustomDialog
 /**
  * 文件夹长按弹窗
@@ -21,7 +25,8 @@ export default struct FolderInfoDialog{
     new buttonList(8,'删除',$r('app.media.ic_public_delete'))
   ]
   itemDataFunction(){
-    console.log(JSON.stringify(this.itemData))
+    console.log('变动了' + JSON.stringify(this.itemData))
+    //TODO 监听到变动将分组缓存更新
   }
   cancel: () => void = () => {
   }
@@ -54,6 +59,9 @@ export default struct FolderInfoDialog{
           InsideCircleIcon({
             item:item
           })
+            .onClick(()=>{
+              this.folderInfo(item.id)
+            })
         })
       }
       Divider().strokeWidth(0.5).padding({bottom:16})
@@ -71,4 +79,64 @@ export default struct FolderInfoDialog{
     .backgroundColor(Color.White)
     .width('100%')
   }
+
+  folderInfo(id:number){
+    switch (id){
+      case 1 :
+        this.restTitle(); break;
+      case 2 :
+        showMessage('置顶'); break;
+      case 3 :
+        showMessage('移动至'); break;
+      case 4 :
+        showMessage('加入书单'); break;
+      case 5 :
+        showMessage('封面样式'); break;
+      case 6 :
+        showMessage('隐藏分组'); break;
+      case 7 :
+        showMessage('解散分组'); break;
+      case 8 :
+        showMessage('删除'); break;
+    }
+  }
+  restTitle(){
+    this.restTitleDialog?.open()
+    this.inputValue = this.itemData.title
+  }
+
+  @State inputValue:string = ''
+  restTitleDialog: CustomDialogController | null = new CustomDialogController({
+    builder: commonInputDialog({
+      textValue:this.inputValue,
+      cancel: () => {
+        this.restTitleCancel()
+      },
+      confirm: () => {
+        this.restTitleConfirm()
+      },
+      placeholder:'请输入分组名称',
+      title:'重命名'
+    }),
+    gridCount: 4,
+    cancel: this.restTitleCancel,
+    autoCancel: true,
+    alignment: DialogAlignment.Center,
+    customStyle: false,
+    cornerRadius: 25
+  })
+
+  restTitleCancel(){
+    this.restTitleDialog?.close()
+    this.inputValue = ''
+  }
+  restTitleConfirm(){
+    console.log(this.inputValue + 'inputValue')
+    this.itemData.title = this.inputValue
+    this.inputValue = ''
+    showMessage('重命名成功')
+    console.log(JSON.stringify(this.itemData))
+    console.log(JSON.stringify(this.itemData.title))
+    this.restTitleDialog?.close()
+  }
 }