yt_green_plants/commons/basic/src/main/ets/components/generalComp/TextSelect.ets

import { DropDownImageInfo, DropDownInfo, TextInfo, TextInputInfo } from '../../models/TextSelectModel'
import { BreakPointSize, YTBreakPoint } from '../../utils/YTBreakPoint'


@Component
export struct TextSelect {
  public dropDownImageInfo: DropDownImageInfo = {
    dropDownImage: $r('app.media.ic_expand_more_black'),
    dropDownImageHeight: 30,
    dropDownImageWidth: 30,
    dropDownImageBackgroundColor: Color.Transparent,
    dropDownImageMargin: { right: 4 }
  } //右侧下拉图标
  public textInfo: TextInfo = {
    fontSize: 16,
    fontColor: Color.Black
  } //显示的文本样式
  public dropDownInfo: DropDownInfo = {
    backgroundColor: Color.Black,
    fontSize: 16,
    fontColor: Color.White,
    height: 130
  } //下拉框样式
  @Prop @Require selectOptions: Array<ESObject> = [] //下拉框数据
  @Require showName: string = '' //要展示的字段名
  defaultOption: ESObject //默认选中项
  public moduleHeight?: Length = 40 //组件高度
  @State private selectHeight: Length = 0
  @State private isShowSelect: boolean = false
  @State private selectText: ResourceStr = ''
  public onchange = (item: ESObject) => {
  }
  public textInputSubmit = (text: string) => {
  }
  textInputInfo: TextInputInfo | null = null //自定义输入框配置，不传则不显示
  @StorageProp(YTBreakPoint.BreakPointVp) breakPointSize: BreakPointSize = { width: 0, height: 0 }
  @State selectPosition: Position = { x: 0, y: 0 }

  aboutToAppear(): void {
    if (!this.defaultOption) {
      this.defaultOption = this.selectOptions[0]
    }
    this.selectText = this.defaultOption[this.showName]
  }

  build() {
    Column() {
      if (this.isShowSelect) {
        Column() {

        }
        .position(this.selectPosition)
        .backgroundColor(Color.Transparent)
        .width(this.breakPointSize.width)
        .height(this.breakPointSize.height)
        .onClick(() => {
          this.isShowSelect = false
          this.selectHeight = 0
        })
      }
      Column() {
        Row() {
          Text(this.selectText)
            .fontSize(this.textInfo.fontSize)
            .padding({ left: 15 })

          Image(this.dropDownImageInfo.dropDownImage)
            .height(this.dropDownImageInfo.dropDownImageHeight)
            .width(this.dropDownImageInfo.dropDownImageWidth)
            .margin(this.dropDownImageInfo.dropDownImageMargin)
            .backgroundColor(this.dropDownImageInfo.dropDownImageBackgroundColor)

        }
        .onClick(() => {
          this.isShowSelect = !this.isShowSelect
          animateTo({ duration: 300 }, () => {
            if (this.isShowSelect) {
              this.selectHeight = this.dropDownInfo.height
            } else {
              this.selectHeight = 0
            }
          })
        })
        .height('100%')
        .width('100%')
        .border({ width: 1, color: '#cbcbcb', radius: 5 })
        .justifyContent(FlexAlign.SpaceBetween)

        if (this.isShowSelect) {
          this.selectBuilder()
        }
      }
      .height(this.moduleHeight)
    }
    .onAreaChange((old, newArea) => {
      this.selectPosition = {
        x: -(newArea.globalPosition.x as number),
        y: -(newArea.globalPosition.y as number)
      }
    })
    .zIndex(200)
  }

  @Builder
  selectBuilder() {
    Row() {
      List({ space: 10 }) {
        ForEach(this.selectOptions, (item: ESObject) => {
          ListItem() {
            Text(item[this.showName])
              .width('100%')
              .fontSize(this.dropDownInfo.fontSize)
              .fontColor(this.dropDownInfo.fontColor)
              .padding({ top: 4, bottom: 4 })
              .onClick(() => {
                this.selectText = item[this.showName]
                this.isShowSelect = false
                this.selectHeight = 0
                this.onchange(item)
              })
              .margin({
                left: 15,
                right: 15,
                top: 4,
                bottom: 4
              })
          }
        })
        if (this.textInputInfo) {
          ListItem() {
            Row() {
              TextInput({ placeholder: this.textInputInfo.placeholder, text: this.textInputInfo.text })
                .width('100%')
                .height('100%')
                .placeholderFont({ size: 14 })
                .padding({ left: 10, right: 10 })
                .border({ width: 1, color: '#cbcbcb', radius: 5 })
                .backgroundColor(Color.Transparent)
                .onChange((value: string) => {
                  this.textInputInfo!.text = value
                })
                .onSubmit(() => {
                  this.selectText = this.textInputInfo!.text
                  this.isShowSelect = false
                  this.selectHeight = 0
                  this.textInputSubmit(this.textInputInfo!.text)
                  this.textInputInfo!.text = ''
                })

            }
            .padding({ left: 10, right: 10 })
            .height(this.textInputInfo.height)
            .width('100%')
          }
        }
      }
      .height('100%')
      .scrollBar(BarState.Off)
      .listDirection(Axis.Vertical) // 排列方向
      // .divider({ strokeWidth: 1, color: 0xCBCBCB }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
    }
    .backgroundColor(this.dropDownInfo.backgroundColor)
    .border(this.dropDownInfo.border)
    .width('100%')
    .height(this.selectHeight)
    .borderRadius({ bottomLeft: 10, bottomRight: 10 })
  }
}