update

src/components/layout/Footer.tsx

@@ -2,8 +2,8 @@
 import { View } from '@tarojs/components'
 import './Footer.scss'
 
-export default function Component(props: { child: any }) {
+export default function Component(props: { children: any }) {
     return <View className='footer1'>
-        {props.child}
+        {props.children}
     </View>
 }

src/features/common/SpecBtns.tsx

@@ -1,94 +1,116 @@
 import Buttons from "@/components/basic/Buttons"
 import { ButtonType } from "@/utils/types"
-import { View,Text } from "@tarojs/components"
+import { View, Text } from "@tarojs/components"
 
 export const StartFastBtn = (props: { onClick: Function }) => {
     return (
         <Buttons title="开始断食" type={ButtonType.elevated}
             onClick={() => { props.onClick() }}
             btnStyle={{
-                height: 50, 
+                height: 50,
                 borderRadius: 25,
                 backgroundColor: '#AAFF00',
                 paddingLeft: 40,
                 paddingRight: 40,
-                color:'black',
-                fontSize:20,
-                display:'flex',
-                alignItems:'center',
-                justifyContent:'center',
+                color: 'black',
+                fontSize: 20,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
                 // lineHeight:20
             }}
         />
     )
 }
 
-export const StartSleepBtn = (props: { onClick: Function,lowLight?:boolean }) => {
+export const StartSleepBtn = (props: { onClick: Function, lowLight?: boolean }) => {
     return (
         <Buttons title="开始睡眠" type={ButtonType.elevated}
             onClick={() => { props.onClick() }}
-            lowLight={props.lowLight?props.lowLight:false}
+            lowLight={props.lowLight ? props.lowLight : false}
             btnStyle={{
-                height: 50, 
+                height: 50,
                 borderRadius: 25,
                 backgroundColor: '#00FFFF',
                 paddingLeft: 40,
                 paddingRight: 40,
-                color:'black',
-                fontSize:20,
-                display:'flex',
-                alignItems:'center',
-                justifyContent:'center',
+                color: 'black',
+                fontSize: 20,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
                 // lineHeight:20
             }}
         />
     )
 }
 
-export const EndSleepBtn = (props: { onClick: Function,lowLight?:boolean }) => {
+export const EndSleepBtn = (props: { onClick: Function, lowLight?: boolean }) => {
     return (
         <Buttons title="结束睡眠" type={ButtonType.outline}
             onClick={() => { props.onClick() }}
-            lowLight={props.lowLight?props.lowLight:false}
+            lowLight={props.lowLight ? props.lowLight : false}
             btnStyle={{
-                height: 50, 
+                height: 50,
                 borderRadius: 25,
                 borderColor: '#00FFFF',
-                borderWidth:1,
-                borderStyle:'solid',
+                borderWidth: 1,
+                borderStyle: 'solid',
                 paddingLeft: 40,
                 paddingRight: 40,
-                color:'#00FFFF',
-                fontSize:20,
-                display:'flex',
-                alignItems:'center',
-                justifyContent:'center',
+                color: '#00FFFF',
+                fontSize: 20,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
                 // lineHeight:20
             }}
         />
     )
 }
 
-export const EndFastBtn = (props: { onClick: Function,lowLight?:boolean }) => {
+export const EndFastBtn = (props: { onClick: Function, lowLight?: boolean }) => {
     return (
         <Buttons title="结束断食" type={ButtonType.outline}
             onClick={() => { props.onClick() }}
-            lowLight={props.lowLight?props.lowLight:false}
+            lowLight={props.lowLight ? props.lowLight : false}
             btnStyle={{
-                height: 50, 
+                height: 50,
                 borderRadius: 25,
                 borderColor: '#AAFF00',
-                borderWidth:1,
-                borderStyle:'solid',
+                borderWidth: 1,
+                borderStyle: 'solid',
                 paddingLeft: 40,
                 paddingRight: 40,
-                color:'#AAFF00',
-                fontSize:20,
-                display:'flex',
-                alignItems:'center',
-                justifyContent:'center',
+                color: '#AAFF00',
+                fontSize: 20,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
                 // lineHeight:20
             }}
         />
     )
+}
+
+export const SetScheduleBtn = (props: { onClick: Function, title: string,isFast?:boolean }) => {
+    return (
+        <Buttons title={props.title} type={ButtonType.elevated}
+            onClick={() => { props.onClick() }}
+            btnStyle={{
+                height: 50,
+                width:300,
+                boxSizing:'border-box',
+                borderRadius: 25,
+                backgroundColor: props.isFast?'#AAFF00':'#00FFFF',
+                paddingLeft: 40,
+                paddingRight: 40,
+                color: 'black',
+                fontSize: 20,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        />
+    )
 }

src/features/trackTimeDuration/components/ChooseScenario.tsx

@@ -243,6 +243,6 @@ export default function Component() {
         }
 
 
-        <Footer child={footerContent()} />
+        <Footer children={footerContent()} />
     </View>;
 }

src/features/trackTimeDuration/components/Dial.scss

@@ -0,0 +1,11 @@
+.inner{
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+}

src/features/trackTimeDuration/components/Dial.tsx

@@ -1,19 +1,18 @@
 import Taro from '@tarojs/taro';
-import { Canvas, View } from '@tarojs/components';
+import { Canvas, View, Image } from '@tarojs/components';
 import { useEffect, useRef, useState } from 'react';
 import React from 'react';
+import './Dial.scss'
 import { useSelector } from 'react-redux';
 
 const Component = (props) => {
     const [scenario] = useState(useSelector((state: any) => state.scenario))
     const [currentContext, setCurrentContext] = useState(null)
-    const canvasWidth: number = 200;
-    const canvasHeight: number = 200;
-    const circleRadius: number = 100;
-    const ringWidth: number = 30;
-    const dotRadius: number = 10;
+    const canvasWidth: number = 334;
+    const canvasHeight: number = 334;
     const dpr = Taro.getSystemInfoSync().pixelRatio; // 获取设备的像素比
-
+    const canvasRef = useRef<any>(null);
+    const watchLineWidth = 300
     const canvasId = 'canvasDialId';
 
     var canStartDrag = false;
@@ -38,7 +37,7 @@ const Component = (props) => {
     var strEnd = current.end;
 
     var needDrawFastRing = false;
-    if (scenario.name == 'FAST_SLEEP' && scenario.step == 'sleep'){
+    if (scenario.name == 'FAST_SLEEP' && scenario.step == 'sleep') {
         needDrawFastRing = true;
     }
 
@@ -51,6 +50,7 @@ const Component = (props) => {
             const _canvas = res[0].node;
             _canvas.width = res[0].width * dpr;
             _canvas.height = res[0].height * dpr;
+            global.canvas = _canvas
             const ctx = _canvas.getContext('2d');
             setCurrentContext(ctx)
 
@@ -65,34 +65,63 @@ const Component = (props) => {
     const drawCanvas = (ctx: any) => {
 
 
-        // 绘制圆环
+
         const centerX = canvasWidth / 2;
         const centerY = canvasHeight / 2;
-        const radius = Math.min(centerX, centerY) - 10;
+        const radius = 140;//Math.min(centerX, centerY) - 38;
 
         ctx.clearRect(0, 0, canvasWidth, canvasHeight);
 
-        if(needDrawFastRing){
+        //画断食环
+        if (needDrawFastRing) {
             ctx.beginPath();
-        ctx.arc(centerX, centerY, radius+8, global.fast_start_angle, global.fast_end_angle);
-        ctx.strokeStyle = 'rgba(170, 255, 0, 0.3)';
-        ctx.lineWidth = 2;
-        ctx.stroke();
+            ctx.arc(centerX, centerY, radius + 16 + 8, global.fast_start_angle, global.fast_end_angle);
+            ctx.strokeStyle = 'rgba(170, 255, 0, 0.3)';
+            ctx.lineWidth = 2;
+            ctx.stroke();
         }
 
+        // 绘制圆环
         ctx.beginPath();
         ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
         ctx.strokeStyle = "rgba(0,0,0,0.5)";
-        ctx.lineWidth = 10;
+        ctx.lineWidth = 38;
         ctx.stroke();
 
+        //绘制起终点圆弧
         ctx.beginPath();
         ctx.arc(centerX, centerY, radius, startAngle, endAngle);
-        ctx.strokeStyle = canRingDrag ? "red" : "rgba(255,0,0,0.5)";
-        ctx.lineWidth = 10;
+        ctx.strokeStyle = canRingDrag ? "#3e3e3e" : "#1c1c1c";
+        ctx.lineWidth = 38;
+        ctx.lineCap = "round";
         ctx.stroke();
 
-        if (scenario.step == 'fast'){
+
+        //画刻度线
+        ctx.save()
+        ctx.beginPath()
+        ctx.moveTo(centerX, centerY)
+
+        ctx.arc(
+            centerX, centerY, watchLineWidth / 2.0, startAngle, endAngle
+        )
+
+        ctx.clip()
+        if (global.canvas_watch_line) {
+            ctx.drawImage(global.canvas_watch_line, centerX - watchLineWidth / 2.0, centerY - watchLineWidth / 2.0, watchLineWidth, watchLineWidth)
+        }
+        else {
+            let tempImage = global.canvas.createImage()
+            tempImage.src = require('@/assets/images/watch_line.png')//'./watch_line.png'//'..//assets/images/watch_line.png'
+            tempImage.onload = () => {
+                global.canvas_watch_line = tempImage
+                drawCanvas(ctx)
+            }
+        }
+        ctx.restore()
+        ctx.closePath()
+
+        if (scenario.step == 'fast') {
             global.fast_start_angle = startAngle;
             global.fast_end_angle = endAngle;
         }
@@ -100,19 +129,55 @@ const Component = (props) => {
         const pointX = centerX + Math.cos(startAngle) * radius;
         const pointY = centerY + Math.sin(startAngle) * radius;
 
+        //绘制起点圆点
         ctx.beginPath();
-        ctx.arc(pointX, pointY, 5, 0, 2 * Math.PI);
-        ctx.fillStyle = '#00ff00';
+        ctx.arc(pointX, pointY, 17, 0, 2 * Math.PI);
+        ctx.fillStyle = (canRingDrag || canStartDrag) ? "#3e3e3e" : "#1c1c1c";
         ctx.fill();
 
-        // 绘制蓝色终点圆点
+        //绘制起点图标
+        // ctx.save()
+        // ctx.beginPath()
+        // ctx.translate(pointX, pointY)
+        // ctx.rotate(startAngle)
+        // ctx.translate(-pointX, -pointY)
+
+        if (global.canvas_start_icon) {
+            ctx.drawImage(global.canvas_start_icon, pointX - 20, pointY - 20, 40, 40)
+        }
+        else {
+            let tempImage = global.canvas.createImage()
+            tempImage.src = require('@/assets/images/wakeup-white.png')//'./watch_line.png'//'..//assets/images/watch_line.png'
+            tempImage.onload = () => {
+                global.canvas_start_icon = tempImage
+                drawCanvas(ctx)
+            }
+        }
+
+        // ctx.restore()
+        // ctx.closePath()
+
+        // 绘制终点圆点
         const pointX2 = centerX + Math.cos(endAngle) * radius;
         const pointY2 = centerY + Math.sin(endAngle) * radius;
 
         ctx.beginPath();
-        ctx.arc(pointX2, pointY2, 5, 0, 2 * Math.PI);
-        ctx.fillStyle = 'blue';
+        ctx.arc(pointX2, pointY2, 17, 0, 2 * Math.PI);
+        ctx.fillStyle = (canRingDrag || canEndDrag) ? "#3e3e3e" : "#1c1c1c";
         ctx.fill();
+
+        //绘制终点图标
+        if (global.canvas_end_icon) {
+            ctx.drawImage(global.canvas_end_icon, pointX2 - 20, pointY2 - 20, 40, 40)
+        }
+        else {
+            let tempImage = global.canvas.createImage()
+            tempImage.src = require('@/assets/images/watch_end_white.png')//'./watch_line.png'//'..//assets/images/watch_line.png'
+            tempImage.onload = () => {
+                global.canvas_end_icon = tempImage
+                drawCanvas(ctx)
+            }
+        }
     };
 
 
@@ -301,7 +366,8 @@ const Component = (props) => {
         const pointX = centerX + Math.cos(startAngle) * radius;
         const pointY = centerY + Math.sin(startAngle) * radius;
         const distance = Math.sqrt(Math.pow(canvasX - pointX, 2) + Math.pow(canvasY - pointY, 2));
-        if (distance <= 12) {
+        console.log('distance' + distance)
+        if (distance <= 40) {
             canStartDrag = true;
         } else {
             canStartDrag = false;
@@ -310,11 +376,21 @@ const Component = (props) => {
         const pointX2 = centerX + Math.cos(endAngle) * radius;
         const pointY2 = centerY + Math.sin(endAngle) * radius;
         const distance2 = Math.sqrt(Math.pow(canvasX - pointX2, 2) + Math.pow(canvasY - pointY2, 2));
-        if (distance2 <= 12) {
+        console.log('distance2' + distance2)
+        if (distance2 <= 40) {
             canEndDrag = true;
         } else {
             canEndDrag = false;
         }
+
+        if (canStartDrag && canEndDrag) {
+            if (distance < distance2) {
+                canEndDrag = false
+            }
+            else {
+                canStartDrag = false
+            }
+        }
         lastDuration = durationAngle(endAngle, startAngle);
 
         if (canStartDrag || canEndDrag) {
@@ -326,7 +402,7 @@ const Component = (props) => {
         const distance3 = twoPointDistance({ x: canvasX, y: canvasY }, { x: centerX, y: centerY });
         let angle = Math.atan2(canvasY - canvasWidth / 2.0, canvasX - canvasWidth / 2.0)
 
-        if (distance3 > 70 && distance3 < 105 && isCenterAngle(startAngle, angle, endAngle)) {
+        if (distance3 > 120 && distance3 < 190 && isCenterAngle(startAngle, angle, endAngle)) {
             canRingDrag = true;
         }
         lastAngle = angle;
@@ -369,13 +445,17 @@ const Component = (props) => {
         handleTouchMove(e)
     }
 
-    return <View style={{ width: 200, height: 200, }} ref={props.ref}>
+    return <View style={{ width: 334, height: 334, borderRadius: 167, backgroundColor: '#000', position: 'relative' }} ref={props.ref}>
         <Canvas canvasId={canvasId} id={canvasId} className={canvasId} type="2d"
-            style={{ width: 200, height: 200, zIndex: 0 }}
+            style={{ width: 334, height: 334, zIndex: 0 }}
             onTouchMove={handleTouchMove}
             onTouchEnd={handleTouchEnd}
             onTouchStart={handleClick}
+            ref={canvasRef}
         />
+        <View className='inner'>
+            <Image src={require('@/assets/images/watch-inner.png')} style={{ width: 226, height: 226 }} />
+        </View>
     </View>
 }
 

src/features/trackTimeDuration/components/SetSchedule.scss

@@ -6,19 +6,22 @@
     display: flex;
     flex-direction: column;
     height: 1000px;
+    margin-top: 20px;
 }
 
 .header{
     margin-top: 40px;
     display: flex;
     flex-direction: row;
+    flex-shrink: 0;
 }
 
-.item{
+.item1{
     display: flex;
     flex: 1;
     align-items: center;
     justify-content: center;
+    background-color: orange;
 }
 
 .duration{

src/features/trackTimeDuration/components/SetSchedule.tsx

@@ -16,6 +16,7 @@ import { TimeFormatter } from "@/utils/time_format";
 import Modal from "@/components/layout/Modal";
 import Dial from './Dial';
 import TimePicker from "@/features/common/TimePicker";
+import { SetScheduleBtn } from "@/features/common/SpecBtns";
 
 export default function Component() {
   const isFastFirst = true;
@@ -26,7 +27,7 @@ export default function Component() {
   const common = useSelector((state: any) => state.common);
 
   const [isOpen, setIsOpen] = useState(false)
-  const [isTimeOpen,setIsTimeOpen] = useState(false)
+  const [isTimeOpen, setIsTimeOpen] = useState(false)
 
   const pickerRef = useRef<any>(null);
   // const [count,setCount] = useState(0)
@@ -59,7 +60,7 @@ export default function Component() {
 
   const [hours, setHours] = useState(durationTime(scheduleObj.start_time, scheduleObj.end_time)[0])
   const [minutes, setMinutes] = useState(durationTime(scheduleObj.start_time, scheduleObj.end_time)[1])
-  const [chooseStart,setChooseStart] = useState(true)
+  const [chooseStart, setChooseStart] = useState(true)
 
   useReady(() => {
     if (global.schedule_fast && scenario.step == 'fast') {
@@ -179,7 +180,7 @@ export default function Component() {
     setMinutes(durationTime(e, endTime)[1])
     saveTempCache(e, endTime);
 
-    global.updateDial(e,endTime)
+    global.updateDial(e, endTime)
   }
 
   function onEndTimeChange(e: string) {
@@ -191,7 +192,7 @@ export default function Component() {
     setHours(durationTime(startTime, e)[0])
     setMinutes(durationTime(startTime, e)[1])
     saveTempCache(startTime, e);
-    global.updateDial(startTime,e)
+    global.updateDial(startTime, e)
   }
 
 
@@ -200,35 +201,9 @@ export default function Component() {
     setIsOpen(true)
   }
 
-  // function durationChange(e) {
-  //   var list = durationDatas(common)
-
-  //   var count = (e[0] + common.duration.min) * 60 + e[1] * common.duration.step
-
-  //   var h = parseInt(list[0][e[0]].substring(0, list[0][e[0]].length - 2))
-  //   var m = parseInt(list[1][e[1]].substring(0, list[1][e[1]].length - 2))
-  //   setHours(h)
-  //   setMinutes(m)
-  //   setPickerValue(e)
-  //   setIsOpen(false)
-  //   if (beginChange) {
-  //     var strEnd = TimeFormatter.calculateTimeByTimeRange(h * 60 + m, startTime, true)
-  //     setEndTime(strEnd);
-  //     saveTempCache(startTime, strEnd)
-  //     global.updateDial(startTime,strEnd)
-  //   }
-  //   else {
-  //     var strStart = TimeFormatter.calculateTimeByTimeRange(h * 60 + m, endTime, false)
-  //     setStartTime(strStart);
-  //     saveTempCache(strStart, endTime)
-  //     global.updateDial(strStart,endTime)
-  //   }
-
-  // }
-
   function durationChange(e) {
     var count = (e[0] + common.duration.min) * 60 + e[1] * common.duration.step
-    
+
     var h = parseInt(count / 60)
     var m = count % 60
     setHours(h)
@@ -239,43 +214,42 @@ export default function Component() {
       var strEnd = TimeFormatter.calculateTimeByTimeRange(count, startTime, true)
       setEndTime(strEnd);
       saveTempCache(startTime, strEnd)
-      global.updateDial(startTime,strEnd)
+      global.updateDial(startTime, strEnd)
     }
     else {
       var strStart = TimeFormatter.calculateTimeByTimeRange(count, endTime, false)
       setStartTime(strStart);
       saveTempCache(strStart, endTime)
-      global.updateDial(strStart,endTime)
+      global.updateDial(strStart, endTime)
     }
 
   }
 
-  global.updateDuration = (start,end)=>{
-    var  startCount = parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])
-    var  endCount = parseInt(end.split(':')[0]) * 60 + parseInt(end.split(':')[1])
-    if (startCount %15==0 || endCount %15==0) {
+  global.updateDuration = (start, end) => {
+    var startCount = parseInt(start.split(':')[0]) * 60 + parseInt(start.split(':')[1])
+    var endCount = parseInt(end.split(':')[0]) * 60 + parseInt(end.split(':')[1])
+    if (startCount % 15 == 0 || endCount % 15 == 0) {
       Taro.vibrateShort()
     }
-    
+
     setStartTime(start)
     setEndTime(end)
-    setPickerValue(durationIndex(start,end,common))
-    setHours(durationTime(start,end)[0])
-    setMinutes(durationTime(start,end)[1])
-    saveTempCache(start,end)
+    setPickerValue(durationIndex(start, end, common))
+    setHours(durationTime(start, end)[0])
+    setMinutes(durationTime(start, end)[1])
+    saveTempCache(start, end)
   }
 
   function layoutContent() {
     return <PickerViews ref={pickerRef} onChange={durationChange} items={durationDatas(common)} value={pickerValue} height={200} showBtns={true} onCancel={() => { setIsOpen(false) }} />
   }
-  
-
-  function timeContent(){
-    console.log(chooseStart)
-    return <TimePicker time={chooseStart?startTime:endTime} confirm={chooseStart?onStartTimeChange:onEndTimeChange} cancel={()=>{setIsTimeOpen(false)}}/>
-      // return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>
-      //     <PickerViews  onChange={durationChange} items={durationDatas(common)} value={isFast ? fastPickerValue : sleepPickerValue} showBtns={true} onCancel={() => { setIsOpenDurationPicker(false) }} />
-      // </View>
+
+
+  function timeContent() {
+    return <TimePicker time={chooseStart ? startTime : endTime} confirm={chooseStart ? onStartTimeChange : onEndTimeChange} cancel={() => { setIsTimeOpen(false) }} />
+    // return <View style={{ color: '#fff', backgroundColor: 'transparent' }}>
+    //     <PickerViews  onChange={durationChange} items={durationDatas(common)} value={isFast ? fastPickerValue : sleepPickerValue} showBtns={true} onCancel={() => { setIsOpenDurationPicker(false) }} />
+    // </View>
   }
 
   return <View >
@@ -283,54 +257,40 @@ export default function Component() {
 
     <View className="box">
       <View className="header">
-        <View className="item" onClick={()=>{
+        <View className="item1" onClick={() => {
           setChooseStart(true)
           setIsTimeOpen(true)
         }}>
           <Text>{scenario.step == 'fast' ? 'Fast starts\n' + startTime : 'Sleep starts\n' + startTime}</Text>
-          {/* <TimePickers time={startTime} content={scenario.step == 'fast' ? 'Fast starts\n' + startTime : 'Sleep starts\n' + startTime} change={onStartTimeChange} /> */}
         </View>
-        <View className="item" onClick={()=>{
+        <View className="item1" onClick={() => {
           setChooseStart(false)
           setIsTimeOpen(true)
         }}>
           <Text>{scenario.step == 'fast' ? 'Fast ends\n' + endTime : 'Sleep ends\n' + endTime}</Text>
-          {/* <TimePickers time={endTime} content={scenario.step == 'fast' ? 'Fast ends\n' + endTime : 'Sleep ends\n' + endTime} change={onEndTimeChange} /> */}
         </View>
 
-
       </View>
-      <View style={{ flex: 1,display:'flex',alignItems:'center',justifyContent:'center' }}>
-        <Dial ref={canvasRef}/>
+      <View style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Dial ref={canvasRef} />
       </View>
       <Text className="duration" onClick={() => { setIsOpen(true) }}>{hours > 0 ? hours + ' hours ' : ''}{minutes > 0 ? minutes + ' minutes' : ''}</Text>
     </View>
 
-    <Footer child={
-      <Buttons title={scenario.step == 'fast' ? 'Set fast schedule' : 'Set sleep schedule'} btnStyle={{ color: scenario.step == 'fast' ? '#AAFF00' : '#00ffff', width: 320,fontSize:15 }} onClick={() => start()}></Buttons>
-    } />
+    <Footer>
+      <SetScheduleBtn title={scenario.step == 'fast' ? 'Set fast schedule' : 'Set sleep schedule'} isFast={scenario.step == 'fast'} onClick={() => start()} />
+    </Footer>
     {
-      isOpen && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={()=>{
+      isOpen && <Modal children={layoutContent()} dismiss={() => setIsOpen(false)} confirm={() => {
         setIsOpen(false)
         durationChange(pickerRef.current.getConfirmData())
-      }}/>
+      }} />
     }
     {
-      isTimeOpen && <Modal children={timeContent()} dismiss={() => setIsTimeOpen(false)} confirm={()=>{
+      isTimeOpen && <Modal children={timeContent()} dismiss={() => setIsTimeOpen(false)} confirm={() => {
         setIsTimeOpen(false)
-      }}/>
+      }} />
     }
 
-
-    {/* <AtFloatLayout
-      isOpened={isOpen}
-      onClose={() => {
-        setIsOpen(false)
-      }}>
-      {
-        layoutContent()
-      }
-    </AtFloatLayout> */}
-
   </View>;
 }