Picker/PickerPopup/PickerView 选择器 #

import { cascadeOptions, multiOptions, options, regionOptions } from './data'
import {
  showToast,
  showPicker,
  SelectorModelValue,
  SelectorValueFormatter,
  SelectorValueParser,
  TaGroup,
  TaCell,
  TaPicker
} from '@/index'
import { useState } from 'react'

const separator = '-'

export default function ExpPicker() {
  const [disableValue] = useState([2000, '春'])
  const [formatValue] = useState(`2001${separator}夏`)

  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() {
    showPicker({
      title: 'Picker',
      options: multiOptions
    }).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="单列">
          <TaPicker options={options} onChange={onChange} />
        </TaCell>
        <TaCell label="多列">
          <TaPicker options={multiOptions} onChange={onChange} />
        </TaCell>
        <TaCell label="级联">
          <TaPicker options={cascadeOptions} onChange={onChange} />
        </TaCell>
        <TaCell label="地区">
          <TaPicker
            options={regionOptions}
            fieldNames={{ value: 'label' }}
            onChange={onChange}
          />
        </TaCell>
        <TaCell label="formatter/parser">
          <TaPicker
            value={formatValue}
            formatter={formatter}
            parser={parser}
            options={multiOptions}
            onChange={onChange}
          ></TaPicker>
        </TaCell>
        <TaCell label="禁用">
          <TaPicker
            value={disableValue}
            options={multiOptions}
            disabled
            onChange={onChange}
          />
        </TaCell>
      </TaGroup>
      <TaGroup title="API">
        <TaCell label="showPicker" isLink onClick={() => onCallApi()} />
      </TaGroup>
    </>
  )
}

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

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

export default function ExpPickerPopup() {
  const [popupValue, setPopupValue] = useState([2000, '夏'])
  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 | number)[])
  }

  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="基础展示参数可以参考 Picker"
      />
      <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>
      <TaPicker.Popup
        visible={visible}
        title="PickerPopup"
        options={multiOptions}
        value={popupValue}
        onChange={onChange}
        onConfirm={onConfirm}
        onCancel={onCancel}
        onVisibleStateChange={onVisibleStateChange}
        onUpdateVisible={v => setVisible(v)}
      />
    </>
  )
}

import {
  TaPicker,
  TaNoticeBar,
  TaGroup,
  showToast,
  SelectorModelValue
} from '@/index'
import { useState } from 'react'
import { cascadeOptions, multiOptions, options } from '../Picker/data'

export default function ExpPickerView() {
  const [simpleValue, setSimpleValue] = useState([2001])

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

  function onChangeEvent(res: SelectorModelValue) {
    onChange(res)

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

  return (
    <>
      <TaNoticeBar
        className="top-notice-bar"
        title="基础展示参数可以参考 Picker"
      />
      <TaGroup title="单列">
        <TaPicker.View
          value={simpleValue}
          options={options}
          onChange={v => setSimpleValue(v as number[])}
        ></TaPicker.View>
      </TaGroup>
      <TaGroup title="多列">
        <TaPicker.View
          options={multiOptions}
          onChange={onChange}
        ></TaPicker.View>
      </TaGroup>
      <TaGroup title="级联">
        <TaPicker.View
          options={cascadeOptions}
          onChange={onChange}
        ></TaPicker.View>
      </TaGroup>
      <TaGroup title="change 事件">
        <TaPicker.View
          options={multiOptions}
          onChange={onChangeEvent}
        ></TaPicker.View>
      </TaGroup>
    </>
  )
}