Cascader/CascaderPopup/CascaderView 级联选择 #

import { cascadeOptions, regionOptions } from '../Picker/data'
import {
  showToast,
  showCascader,
  SelectorModelValue,
  SelectorValueFormatter,
  SelectorValueParser,
  TaGroup,
  TaCell,
  TaCascader
} from '@/index'
import { useState } from 'react'

const separator = '-'
const placeholder = '选择家电'

export default function ExpCascader() {
  const [disableValue] = useState(['bingxiang', 'sanmen'])
  const [formatValue] = useState(`bingxiang${separator}duikaimen`)

  const formatter: SelectorValueFormatter = (valueArray, labelArray) => {
    return {
      value: valueArray.join(separator),
      label: labelArray.join(separator)
    }
  }

  const parser: SelectorValueParser = value => {
    return value ? (value as string).split(separator) : []
  }

  function onCallApi() {
    showCascader({
      options: cascadeOptions
    }).then(res => {
      console.log('success', res)
      if (res.cancel) {
        showToast('取消了')
      } else {
        showToast(`选择了 ${res.detail.label}`)
      }
    })
  }

  function onChange(res: SelectorModelValue) {
    console.log('change', res)
  }

  return (
    <>
      <TaGroup title="基础用法">
        <TaCell label="家电">
          <TaCascader
            options={cascadeOptions}
            onChange={onChange}
            placeholder={placeholder}
          />
        </TaCell>
        <TaCell label="地区">
          <TaCascader
            options={regionOptions}
            fieldNames={{ value: 'label' }}
            onChange={onChange}
          />
        </TaCell>
        <TaCell label="formatter/parser">
          <TaCascader
            value={formatValue}
            formatter={formatter}
            parser={parser}
            options={cascadeOptions}
            onChange={onChange}
          ></TaCascader>
        </TaCell>
        <TaCell label="禁用">
          <TaCascader
            value={disableValue}
            options={cascadeOptions}
            disabled
            onChange={onChange}
          />
        </TaCell>
      </TaGroup>
      <TaGroup title="API">
        <TaCell label="showCascader" isLink onClick={() => onCallApi()} />
      </TaGroup>
    </>
  )
}

import { cascadeOptions } from '../Picker/data'
import {
  showToast,
  SelectorModelValue,
  PickerOnConfirm,
  PopupOnVisibleStateChange,
  PopupOnCancel,
  TaCell,
  TaGroup,
  TaNoticeBar,
  TaCascader
} from '@/index'
import { useRef, useState } from 'react'

interface showArgs {
  visibleEvent?: boolean
  changeEvent?: boolean
  clickEvent?: boolean
}

export default function ExpCascaderPopup() {
  const [popupValue, setPopupValue] = useState(['bingxiang', 'duikaimen'])
  const [visible, setVisible] = useState(false)
  const clickEvent = useRef(false)
  const changeEvent = useRef(false)
  const visibleEvent = useRef(false)

  function onShow(args: showArgs = {}) {
    visibleEvent.current = !!args.visibleEvent
    changeEvent.current = !!args.changeEvent
    clickEvent.current = !!args.clickEvent

    setVisible(true)
  }

  const onVisibleStateChange: PopupOnVisibleStateChange = res => {
    if (visibleEvent.current) {
      console.log('onVisibleStateChange', res)
      showToast(`${res.state} 事件触发`)
    }

    if (res.state === 'hidden') {
      clickEvent.current = false
      visibleEvent.current = false
      changeEvent.current = false
    }
  }

  const onConfirm: PickerOnConfirm = res => {
    if (clickEvent.current) {
      console.log('onConfirm', res)
      showToast(`点击确定按钮`)
    }
  }

  function onChange(res: SelectorModelValue) {
    if (changeEvent.current) {
      console.log('onChange', res)
      showToast(`值改为 ${res}`)
    }

    setPopupValue(res as string[])
  }

  const onCancel: PopupOnCancel = res => {
    if (clickEvent.current) {
      console.log('onCancel', res)

      if (res.source === 'cancelClick') {
        showToast('点击了取消按钮')
      } else if (res.source === 'maskClick') {
        showToast('点击了蒙层')
      }
    }
  }

  return (
    <>
      <TaNoticeBar
        className="top-notice-bar"
        title="基础展示参数可以参考 Cascader"
      />
      <TaGroup title="基础用法">
        <TaCell label="默认" isLink onClick={() => onShow({})}>
          {popupValue}
        </TaCell>
      </TaGroup>
      <TaGroup title="事件监听">
        <TaCell
          label="onChange"
          isLink
          onClick={() => onShow({ changeEvent: true })}
        />
        <TaCell
          label="onConfirm/onCancel"
          isLink
          onClick={() => onShow({ clickEvent: true })}
        />
        <TaCell
          label="onVisibleStateChange"
          isLink
          onClick={() => onShow({ visibleEvent: true })}
        />
      </TaGroup>
      <TaCascader.Popup
        visible={visible}
        options={cascadeOptions}
        value={popupValue}
        onChange={onChange}
        onConfirm={onConfirm}
        onCancel={onCancel}
        onVisibleStateChange={onVisibleStateChange}
        onUpdateVisible={v => setVisible(v)}
      />
    </>
  )
}

import {
  TaCascader,
  TaNoticeBar,
  TaGroup,
  showToast,
  SelectorModelValue,
  CascaderOnSelect
} from '@/index'
import { cascadeOptions } from '../Picker/data'

export default function ExpCascaderView() {
  function onChange(res: SelectorModelValue) {
    console.log('change', res)

    showToast(`change: ${res}`)
  }

  const onSelect: CascaderOnSelect = res => {
    console.log('select', res)

    showToast(`select: ${res.value}`)
  }

  return (
    <>
      <TaNoticeBar
        className="top-notice-bar"
        title="基础展示参数可以参考 Cascader"
      />
      <TaGroup title="家电">
        <TaCascader.View options={cascadeOptions} v-model="baseValue" />
      </TaGroup>
      <TaGroup title="空数据">
        <TaCascader.View options={[]} />
      </TaGroup>
      <TaGroup title="change 事件">
        <TaCascader.View options={cascadeOptions} onChange={onChange} />
      </TaGroup>
      <TaGroup title="select 事件（跟 change 的区别是重复选一样的也触发）">
        <TaCascader.View options={cascadeOptions} onSelect={onSelect} />
      </TaGroup>
    </>
  )
}