82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import { View, Text } from '@tarojs/components'
|
|
import { InputNumber } from '@nutui/nutui-react-taro'
|
|
import { Checkbox } from '@nutui/nutui-react-taro'
|
|
import './NumberInterval.scss'
|
|
|
|
interface NumberIntervalProps {
|
|
value: { min: number, max: number, organizer_joined: boolean }
|
|
onChange: (value: { min: number, max: number, organizer_joined: boolean }) => void
|
|
min: number
|
|
max: number
|
|
}
|
|
|
|
const NumberInterval: React.FC<NumberIntervalProps> = ({
|
|
value,
|
|
onChange,
|
|
min,
|
|
max
|
|
}) => {
|
|
const [organizer_joined, setOrganizerJoined] = useState(true);
|
|
const [minParticipants, setMinParticipants] = useState(1);
|
|
const [maxParticipants, setMaxParticipants] = useState(1);
|
|
|
|
useEffect(() => {
|
|
if (value) {
|
|
setOrganizerJoined(value.organizer_joined);
|
|
setMinParticipants(value.min);
|
|
setMaxParticipants(value.max);
|
|
}
|
|
console.log(value, 'valuevaluevaluevaluevaluevalue');
|
|
}, [value]);
|
|
|
|
const handleChange = (value: { min: number | string, max: number | string, organizer_joined: boolean }) => {
|
|
const toNumber = (v: number | string): number => typeof v === 'string' ? Number(v) : v
|
|
const { min, max, organizer_joined } = value;
|
|
onChange({ min: toNumber(min), max: toNumber(max), organizer_joined })
|
|
}
|
|
|
|
|
|
return (
|
|
<View className='participants-control-section'>
|
|
<View className='participant-control'>
|
|
<Text className='control-label'>最小成局数</Text>
|
|
<View className='control-buttons'>
|
|
<InputNumber
|
|
className="format-width"
|
|
value={minParticipants}
|
|
min={min}
|
|
max={maxParticipants}
|
|
onChange={(value) => handleChange({ min: value, max: maxParticipants, organizer_joined: organizer_joined })}
|
|
formatter={(value) => `${value}人`}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View className='participant-control'>
|
|
<Text className='control-label'>球局总人数</Text>
|
|
<View className='control-buttons'>
|
|
<InputNumber
|
|
className="format-width"
|
|
value={maxParticipants}
|
|
onChange={(value) => handleChange({ min: minParticipants, max: value, organizer_joined: organizer_joined })}
|
|
min={minParticipants}
|
|
max={max}
|
|
formatter={(value) => `${value}人`}
|
|
/>
|
|
</View>
|
|
</View>
|
|
<View className='participant-control'>
|
|
<View className='participant-control-checkbox-wrapper'>
|
|
<Checkbox
|
|
className='participant-control-checkbox'
|
|
checked={organizer_joined}
|
|
onChange={(checked) => handleChange({ min: minParticipants, max: maxParticipants, organizer_joined: checked })}
|
|
/>
|
|
我也参与此球局
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default NumberInterval
|