86 lines
2.8 KiB
JavaScript
Executable File
86 lines
2.8 KiB
JavaScript
Executable File
import React, { useEffect, useState } from 'react'
|
||
import { useImmer } from 'use-immer'
|
||
import { useSelector } from 'react-redux'
|
||
import { useAsyncCallback } from '@/hooks'
|
||
import Taro from '@tarojs/taro'
|
||
import { View, PickerView, PickerViewColumn } from '@tarojs/components'
|
||
import './picker-select.scss'
|
||
|
||
const initialState = {
|
||
source: [],
|
||
value: 0,
|
||
markMultiDateTime: false
|
||
}
|
||
function PickerDateTime (props) {
|
||
const { handleConfirm, onPickerCancel, list = [] } = props
|
||
const dateTime = [
|
||
{ mode: 'year', unit: '年' },
|
||
{ mode: 'month', unit: '月' },
|
||
{ mode: 'day', unit: '日' },
|
||
]
|
||
// const [state, setState] = useAsyncCallback({ source: props.list || [], value: props.value || '' })
|
||
// const [state, setState] = useImmer({ value: [props.value || 0] })
|
||
// const { source, value } = state
|
||
const [value, setState] = useState(props.value || [0])
|
||
|
||
const onChange = (e) => {
|
||
// const _value = [...value]
|
||
// _value[index] = e.detail.value
|
||
// const { source, value } = state
|
||
// source.item[]
|
||
|
||
setState(
|
||
e.detail.value
|
||
// ({ source, value }) => {
|
||
// const res = []
|
||
// for (let i = 0; i < source.length; i++) {
|
||
// let time = '',
|
||
// token = ''
|
||
// // source[i].item.length为可选项的列数
|
||
// for (let j = 0; j < source[i].item.length; j++) {
|
||
// const select = source[i].item[j][value[i][j]]
|
||
// time += (select === '今天' ? dayjs().format('M月D日') : select) + '-'
|
||
// // 对于二维数组取i、j；对于一维数组取j
|
||
// const item = markMultiDateTime ? dateTime[i][j] : dateTime[j]
|
||
// token += (item.format || getToken(item.mode)) + '-'
|
||
// }
|
||
// res.push(dayjs(time, token)[mode]())
|
||
// }
|
||
// return markMultiDateTime ? res : res[0]
|
||
// const res = source.map((item, index) => item[value[index]])
|
||
// const cur = getDayjs()
|
||
// const source2 = dateTime && format(dateTime, dayjs(start))
|
||
// console.log('source2:', source2)
|
||
// }
|
||
)
|
||
}
|
||
const handleClick = () => {
|
||
onPickerCancel()
|
||
handleConfirm(list[value[0]], value[0])
|
||
}
|
||
return (
|
||
<View className='picker-custom'>
|
||
<PickerView
|
||
indicator-style='height: 40px;'
|
||
value={value}
|
||
onChange={(e) => onChange(e)}
|
||
immediateChange
|
||
// 使用acc.concat将多维数组打平成一维数组再求数组长度
|
||
>
|
||
<PickerViewColumn>
|
||
{list.map((item, elementIndex) => (
|
||
<View key={'list' + elementIndex} >{item.text}</View>
|
||
))}
|
||
</PickerViewColumn>
|
||
</PickerView>
|
||
<View className="picker-btn" onClick={handleClick}>确定</View>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
PickerDateTime.options = {
|
||
addGlobalClass: true
|
||
}
|
||
|
||
export default React.memo(PickerDateTime)
|