|
|
@@ -10,6 +10,7 @@ import { IconCalendar, IconTarget } from '@/components/basic/Icons';
|
|
|
import NewDurationPicker from '../base/new_durationpicker';
|
|
|
import NewButton, { NewButtonType } from '../base/new_button';
|
|
|
import dayjs from 'dayjs';
|
|
|
+import Card from './card';
|
|
|
|
|
|
let isYesterdayTarget = false
|
|
|
export default function PostMomentTime(props: {
|
|
|
@@ -73,37 +74,39 @@ export default function PostMomentTime(props: {
|
|
|
}
|
|
|
|
|
|
function durationContent() {
|
|
|
- return <View className='picker_time_card'>
|
|
|
- <View className='picker_time_card_header'>
|
|
|
- <View style={{ width: rpxToPx(52) }} />
|
|
|
- <Text>Duration</Text>
|
|
|
- <View style={{ flex: 1 }} />
|
|
|
- <NewButton
|
|
|
- type={showDurationPicker ? NewButtonType.alpha : NewButtonType.gray}
|
|
|
- color={getThemeColor(health.mode)}
|
|
|
- title={durationTime()}
|
|
|
- height={rpxToPx(84)}
|
|
|
- onClick={() => {
|
|
|
- setShowDurationPicker(true)
|
|
|
- }}
|
|
|
- />
|
|
|
- <View style={{ width: rpxToPx(40) }} />
|
|
|
- </View>
|
|
|
- {
|
|
|
- showDurationPicker && <NewDurationPicker
|
|
|
- value={minutes}
|
|
|
- color={getThemeColor(health.mode)}
|
|
|
- onChange={(v) => {
|
|
|
- setMinutes(v)
|
|
|
- }} />
|
|
|
- }
|
|
|
+ return <Card>
|
|
|
+ <View style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
|
|
|
+ <View className='picker_time_card_header'>
|
|
|
+ <View style={{ width: rpxToPx(52) }} />
|
|
|
+ <Text>Duration</Text>
|
|
|
+ <View style={{ flex: 1 }} />
|
|
|
+ <NewButton
|
|
|
+ type={showDurationPicker ? NewButtonType.alpha : NewButtonType.gray}
|
|
|
+ color={getThemeColor(health.mode)}
|
|
|
+ title={durationTime()}
|
|
|
+ height={rpxToPx(84)}
|
|
|
+ onClick={() => {
|
|
|
+ setShowDurationPicker(true)
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <View style={{ width: rpxToPx(40) }} />
|
|
|
+ </View>
|
|
|
+ {
|
|
|
+ showDurationPicker && <NewDurationPicker
|
|
|
+ value={minutes}
|
|
|
+ color={getThemeColor(health.mode)}
|
|
|
+ onChange={(v) => {
|
|
|
+ setMinutes(v)
|
|
|
+ }} />
|
|
|
+ }
|
|
|
|
|
|
- <View className='picker_time_card_footer'>
|
|
|
- <IconTarget width={rpxToPx(24)} color='#5C7099' />
|
|
|
- <Text style={{ color: '#5C7099', marginLeft: rpxToPx(12), fontSize: rpxToPx(26) }}>Expect to finish at {endTime()}</Text>
|
|
|
+ <View className='picker_time_card_footer'>
|
|
|
+ <IconTarget width={rpxToPx(24)} color='#5C7099' />
|
|
|
+ <Text style={{ color: '#5C7099', marginLeft: rpxToPx(12), fontSize: rpxToPx(26) }}>Expect to finish at {endTime()}</Text>
|
|
|
|
|
|
+ </View>
|
|
|
</View>
|
|
|
- </View>
|
|
|
+ </Card>
|
|
|
}
|
|
|
|
|
|
function scheduleTime() {
|
|
|
@@ -111,7 +114,7 @@ export default function PostMomentTime(props: {
|
|
|
var timestamp = props.moment.target.timestamp
|
|
|
var time1 = parseInt(dayjs(timestamp).format('HHmm'))
|
|
|
var now = parseInt(dayjs().format('HHmm'))
|
|
|
- if (time == dayjs(timestamp).format('HH:mm')){
|
|
|
+ if (time == dayjs(timestamp).format('HH:mm')) {
|
|
|
return `Check in:Today ${dayjs(global.set_time).format('HH:mm')}`
|
|
|
}
|
|
|
if (time1 > now) {
|
|
|
@@ -138,77 +141,79 @@ export default function PostMomentTime(props: {
|
|
|
})
|
|
|
}}
|
|
|
themeColor={getThemeColor(health.mode)}>
|
|
|
- <View style={{ flexDirection: 'column', display: 'flex', alignItems: 'center' }}>
|
|
|
-
|
|
|
- <View className='picker_time_card'>
|
|
|
- <View className='picker_time_card_header'>
|
|
|
- <View style={{ flex: 1 }} />
|
|
|
- <NewButton
|
|
|
- type={NewButtonType.gray}
|
|
|
- title={isYesterday ? 'Yesterday' : 'Today'}
|
|
|
- height={rpxToPx(84)}
|
|
|
- onClick={() => {
|
|
|
- setIsYesterday(!isYesterday)
|
|
|
- }}
|
|
|
- />
|
|
|
- <View style={{ width: rpxToPx(12) }} />
|
|
|
- <NewButton
|
|
|
- type={!showDurationPicker ? NewButtonType.alpha : NewButtonType.gray}
|
|
|
- color={getThemeColor(health.mode)}
|
|
|
- title={time}
|
|
|
- height={rpxToPx(84)}
|
|
|
- onClick={() => {
|
|
|
- setShowDurationPicker(false)
|
|
|
- }}
|
|
|
- />
|
|
|
- <View style={{ flex: 1 }} />
|
|
|
- {
|
|
|
- !showDurationPicker && <View className='border_footer_line' />
|
|
|
- }
|
|
|
- </View>
|
|
|
- {
|
|
|
- !showDurationPicker && <NewTimePicker time={time} onChange={(e) => {
|
|
|
- setTime(e)
|
|
|
- }} color={getThemeColor(health.mode)} />
|
|
|
- }
|
|
|
- {
|
|
|
- !props.isTemp && !showDurationPicker && <View className='picker_time_card_footer' onClick={() => {
|
|
|
- if (time == dayjs(props.moment.target.timestamp).format('HH:mm')){
|
|
|
- setIsYesterday(false)
|
|
|
- setTime(dayjs(global.set_time).format('HH:mm'))
|
|
|
- }
|
|
|
- else {
|
|
|
- setIsYesterday(isYesterdayTarget)
|
|
|
- setTime(dayjs(props.moment.target.timestamp).format('HH:mm'))
|
|
|
+ <Card>
|
|
|
+ <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
|
+ <View className='picker_time_card'>
|
|
|
+ <View className='picker_time_card_header'>
|
|
|
+ <View style={{ flex: 1 }} />
|
|
|
+ <NewButton
|
|
|
+ type={NewButtonType.gray}
|
|
|
+ title={isYesterday ? 'Yesterday' : 'Today'}
|
|
|
+ height={rpxToPx(84)}
|
|
|
+ onClick={() => {
|
|
|
+ setIsYesterday(!isYesterday)
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <View style={{ width: rpxToPx(12) }} />
|
|
|
+ <NewButton
|
|
|
+ type={!showDurationPicker ? NewButtonType.alpha : NewButtonType.gray}
|
|
|
+ color={getThemeColor(health.mode)}
|
|
|
+ title={time}
|
|
|
+ height={rpxToPx(84)}
|
|
|
+ onClick={() => {
|
|
|
+ setShowDurationPicker(false)
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ <View style={{ flex: 1 }} />
|
|
|
+ {
|
|
|
+ !showDurationPicker && <View className='border_footer_line' />
|
|
|
}
|
|
|
-
|
|
|
- }}>
|
|
|
- <IconCalendar width={rpxToPx(24)} color='#5C7099' />
|
|
|
- <Text style={{ color: '#5C7099', marginLeft: rpxToPx(12), fontSize: rpxToPx(26) }}>{scheduleTime()}</Text>
|
|
|
</View>
|
|
|
- }
|
|
|
+ {
|
|
|
+ !showDurationPicker && <NewTimePicker time={time} onChange={(e) => {
|
|
|
+ setTime(e)
|
|
|
+ }} color={getThemeColor(health.mode)} />
|
|
|
+ }
|
|
|
+ {
|
|
|
+ !props.isTemp && !showDurationPicker && <View className='picker_time_card_footer' onClick={() => {
|
|
|
+ if (time == dayjs(props.moment.target.timestamp).format('HH:mm')) {
|
|
|
+ setIsYesterday(false)
|
|
|
+ setTime(dayjs(global.set_time).format('HH:mm'))
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ setIsYesterday(isYesterdayTarget)
|
|
|
+ setTime(dayjs(props.moment.target.timestamp).format('HH:mm'))
|
|
|
+ }
|
|
|
|
|
|
- </View>
|
|
|
- <View style={{ marginBottom: rpxToPx(72), marginTop: rpxToPx(36) }}>
|
|
|
- {
|
|
|
- showMore ? durationContent() :
|
|
|
- <View
|
|
|
- onClick={() => setShowMore(true)}
|
|
|
- style={{
|
|
|
- flexDirection: 'row',
|
|
|
- width: rpxToPx(142),
|
|
|
- height: rpxToPx(72),
|
|
|
- display: 'flex',
|
|
|
- alignItems: 'center',
|
|
|
- justifyContent: 'center'
|
|
|
- }}>
|
|
|
- <Image style={{ width: rpxToPx(26), height: rpxToPx(26) }} src={require('@assets/_health/setting.png')} />
|
|
|
- <Text style={{ color: '#5C7099', marginLeft: rpxToPx(10) }}>More</Text>
|
|
|
+ }}>
|
|
|
+ <IconCalendar width={rpxToPx(24)} color='#5C7099' />
|
|
|
+ <Text style={{ color: '#5C7099', marginLeft: rpxToPx(12), fontSize: rpxToPx(26) }}>{scheduleTime()}</Text>
|
|
|
</View>
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ </View>
|
|
|
|
|
|
</View>
|
|
|
|
|
|
+ </Card>
|
|
|
+ <View style={{ marginTop: rpxToPx(36), display: 'flex', flexDirection: 'column', alignItems: showMore?'flex-start':'center' }}>
|
|
|
+ {
|
|
|
+ showMore ? durationContent() :
|
|
|
+ <View
|
|
|
+ onClick={() => setShowMore(true)}
|
|
|
+ style={{
|
|
|
+ flexDirection: 'row',
|
|
|
+ width: rpxToPx(142),
|
|
|
+ height: rpxToPx(72),
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center'
|
|
|
+ }}>
|
|
|
+ <Image style={{ width: rpxToPx(26), height: rpxToPx(26) }} src={require('@assets/_health/setting.png')} />
|
|
|
+ <Text style={{ color: '#5C7099', marginLeft: rpxToPx(10) }}>More</Text>
|
|
|
+ </View>
|
|
|
+ }
|
|
|
+
|
|
|
</View>
|
|
|
</NewModal>
|
|
|
|