@ledvance/ui-biz-bundle 1.1.69 → 1.1.70

package/src/newModules/randomTime/RandomTimeDetailPage.tsx

@@ -1,326 +1,326 @@
-import React, { useEffect, useMemo } from "react";
-import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from "react-native";
-import { useReactive } from "ahooks";
-import Page from "@ledvance/base/src/components/Page";
-import { useNavigation, useRoute } from '@react-navigation/core'
-import I18n from "@ledvance/base/src/i18n";
-import res from "@ledvance/base/src/res";
-import TextField from "@ledvance/base/src/components/TextField";
-import LdvWeekView from '@ledvance/base/src/components/weekSelect'
-import { TimerPicker, Utils } from "tuya-panel-kit";
-import DeleteButton from "@ledvance/base/src/components/DeleteButton";
-import Spacer from "@ledvance/base/src/components/Spacer";
-import { convertMinutesTo12HourFormat, loopText, showDialog } from "@ledvance/base/src/utils/common";
-import LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
-import Card from "@ledvance/base/src/components/Card";
-import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
-import { RandomTimerUiItem } from "./RandomTimeActions";
-import { cloneDeep, isEqual } from "lodash";
-import Summary from "./Summary";
-import { RandomTimePageParams } from "./RandomTimePage";
-import { Result } from "@ledvance/base/src/models/modules/Result";
-import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
-
-const { convertX: cx } = Utils.RatioUtils;
-
-export interface RandomTimeDetailPageParams extends RandomTimePageParams {
-  mode: 'add' | 'edit'
-  scheduleItem: RandomTimerUiItem
-  onPost: (mode: 'add' | 'edit' | 'del', randomTime: RandomTimerUiItem) => Promise<Result<any>>
-}
-const minTimeGap = 30
-const RandomTimeDetailPage = () => {
-  const navigation = useNavigation()
-  const params = useRoute().params as RandomTimeDetailPageParams
-  const is24Hour = useSystemTimeFormate()
-  const state = useReactive({
-    loading: false,
-    isColorMode: false,
-    randomTime: cloneDeep(params.scheduleItem)
-  })
-
-  useEffect(() => {
-    if (!params.isPlug && state.randomTime.color) {
-      const { brightness, temperature, h, s, v } = state.randomTime.color
-      const isColor = brightness === 0 && temperature === 0 && (h !== 0 || s !== 0 || v !== 0)
-      state.isColorMode = isColor
-    }
-  }, [])
-
-  const checkItemChanged = useMemo(() =>{
-    return isEqual(state.randomTime, params.scheduleItem)
-  }, [params.scheduleItem, JSON.stringify(state.randomTime)])
-
-  const canSubmit = useMemo(() => {
-    return state.randomTime.name?.length > 0 && state.randomTime.name?.length < 33 && !checkItemChanged && state.randomTime.channel !== undefined
-  }, [JSON.stringify(state.randomTime), checkItemChanged])
-
-  return (
-    <Page
-      backText={I18n.getLang('randomtimecycle_sockets_headline_text')}
-      rightButtonIcon={canSubmit ? res.ic_check : res.ic_uncheck}
-      loading={state.loading}
-      showBackDialog={!checkItemChanged}
-      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
-      backDialogContent={I18n.getLang('cancel_dialog_delete_item_randomtimecycle_description')}
-      headlineText={I18n.getLang(params.mode === 'add' ? 'add_fixedtimecycle_headline_text' : 'edit_fixedtimecycle_headline_text')}
-      rightButtonIconClick={async () => {
-        if (!canSubmit || state.loading) return
-        const { startTime, endTime} = state.randomTime
-        if(startTime < endTime && (endTime - startTime) < minTimeGap){
-          return showDialog({
-            method: 'alert',
-            title: I18n.getLang('conflict_dialog_save_item_randomtimecycle_tips'),
-            subTitle: I18n.getLang('conflict_dialog_save_item_randomtimecycle_interval_description'),
-            confirmText: I18n.getLang('conflict_dialog_save_item_randomtimecycle_answer_confirm_text'),
-            onConfirm: (_, { close}) =>{
-              close()
-            }
-          })
-        }
-        state.loading = true
-        const editRandomTime = {
-          ...state.randomTime,
-          enable: true
-        }
-        if (!params.isPlug && state.randomTime.color) {
-          editRandomTime.color = {
-            h: state.isColorMode ? state.randomTime.color?.h : 0,
-            s: state.isColorMode ? state.randomTime.color?.s : 0,
-            v: state.isColorMode ? state.randomTime.color?.v : 0,
-            temperature: state.isColorMode ? 0 : state.randomTime.color?.temperature,
-            brightness: state.isColorMode ? 0 : state.randomTime.color?.brightness
-          }
-        }
-        const res = await params.onPost(params.mode, editRandomTime)
-        state.loading = false
-        if (res.success) {
-          navigation.goBack()
-        }
-      }}
-    >
-      <ScrollView nestedScrollEnabled={true}>
-        <TextField
-          style={styles.cardContainer}
-          value={state.randomTime.name}
-          showError={state.randomTime.name?.length > 32}
-          maxLength={33}
-          errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}
-          placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
-          onChangeText={(t: string) => {
-            state.randomTime.name = t;
-          }}
-        />
-        {/* pick */}
-        <TimerPicker
-          itemTextColor='#aeadb5'
-          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
-          is12Hours={!is24Hour}
-          startTime={state.randomTime.startTime}
-          endTime={state.randomTime.endTime}
-          onTimerChange={(startTime, endTime) => {
-            state.randomTime.startTime = startTime
-            state.randomTime.endTime = endTime
-          }} />
-        <LdvWeekView
-          value={state.randomTime.weeks}
-          style={styles.cardContainer}
-          onSelect={(index: number) => {
-            const rawIndex = index - 1
-            state.randomTime.weeks[rawIndex] = state.randomTime.weeks[rawIndex] === 1 ? 0 : 1
-          }} />
-        <Spacer />
-        <Text style={styles.cardContainer}>{loopText(state.randomTime.weeks)}</Text>
-        <Spacer />
-        {/* Apply for */}
-        <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
-          <Spacer height={cx(10)} />
-          <View style={[styles.applyContent, { paddingTop: state.randomTime.channel === undefined ? 0 : cx(10) }]}>
-            {state.randomTime.channel === undefined ?
-              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
-              <View style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]}>
-                <Text style={{ color: '#000', fontSize: cx(12) }}>{params.applyForList[state.randomTime.channel]?.key}</Text>
-                {params.applyForList.length > 1 && <TouchableOpacity
-                  onPress={() => {
-                    state.randomTime.channel = undefined
-                  }}
-                  style={{ paddingHorizontal: cx(5) }}>
-                  <Image style={{ width: cx(16), height: cx(16) }} source={res.ic_arrows_nav_clear} />
-                </TouchableOpacity>}
-              </View>
-            }
-          </View>
-          {params.applyForList.map((item, index) => {
-            if (state.randomTime.channel === index) return null
-            return (
-              <TouchableOpacity
-                style={styles.applyItem}
-                key={item.key}
-                onPress={() => {
-                  state.randomTime.channel = index
-                }}>
-                <Text style={{ color: '#000', fontSize: cx(12) }}>{item.key}</Text>
-                <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
-              </TouchableOpacity>
-            )
-          })}
-        </View>
-        <Spacer />
-        {/* Devices */}
-        {!!state.randomTime.color && !params.isPlug && <View style={styles.cardContainer}>
-          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
-          <Spacer height={cx(10)} />
-          <Card>
-            <LdvSwitch
-              title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-              color={'#fff'}
-              colorAlpha={1}
-              enable={true}
-              setEnable={() => { }}
-              showSwitch={false}
-            />
-            <LampAdjustView
-              isSupportColor={!!params.isSupportColor}
-              isSupportBrightness={!!params.isSupportBrightness}
-              isSupportTemperature={!!params.isSupportTemperature}
-              isColorMode={state.isColorMode}
-              reserveSV={true}
-              setIsColorMode={(v) => state.isColorMode = v}
-              h={state.randomTime.color.h}
-              s={state.randomTime.color.s}
-              v={state.randomTime.color.v}
-              colorTemp={state.randomTime.color.temperature}
-              brightness={state.randomTime.color.brightness}
-              onHSVChangeComplete={(h, s, v) => {
-                state.randomTime.color = {
-                  ...state.randomTime.color,
-                  h,
-                  s,
-                  v
-                }
-              }}
-              onCCTChangeComplete={(v) => {
-                state.randomTime.color = {
-                  ...state.randomTime.color,
-                  temperature: v
-                }
-              }}
-              onBrightnessChangeComplete={(v) => {
-                state.randomTime.color = {
-                  ...state.randomTime.color,
-                  brightness: v
-                }
-              }}
-            />
-          </Card>
-          <Spacer />
-        </View>}
-        {/* summary */}
-        <Summary
-          frequency={loopText(state.randomTime.weeks)}
-          time={`${convertMinutesTo12HourFormat(state.randomTime.startTime, is24Hour)} - ${convertMinutesTo12HourFormat(state.randomTime.endTime, is24Hour)}`}
-          hideActions={true}
-        />
-        <Spacer />
-        {params.mode === 'edit' &&
-          <View style={{ marginHorizontal: cx(24) }}>
-            <DeleteButton
-              text={I18n.getLang('edit_fixedtimecycle_bttn_text')}
-              onPress={() => {
-                showDialog({
-                  method: 'confirm',
-                  title: I18n.getLang('cancel_dialog_delete_item_randomtimecycle_titel'),
-                  subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
-                  onConfirm: async (_, { close }) => {
-                    close()
-                    state.loading = true
-                    const res = await params.onPost('del', state.randomTime)
-                    state.loading = false
-                    if (res.success) {
-                      navigation.goBack()
-                    }
-                  }
-                })
-              }} />
-          </View>
-        }
-        <Spacer />
-      </ScrollView>
-    </Page>
-  )
-}
-
-
-const styles = StyleSheet.create({
-  cardContainer: {
-    marginHorizontal: cx(24)
-  },
-  itemTitle: {
-    color: '#000',
-    fontSize: cx(16),
-    fontWeight: 'bold',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  applyContent: {
-    backgroundColor: '#f6f6f6',
-    borderRadius: 4,
-    minHeight: cx(55),
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: cx(10),
-    paddingTop: cx(10)
-  },
-  applyItem: {
-    paddingLeft: cx(5),
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    height: cx(35),
-  },
-  summaryContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    marginBottom: cx(10)
-  },
-  summaryLeft: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
-  summaryImg: {
-    width: cx(12),
-    height: cx(12),
-    marginRight: cx(6)
-  },
-  leftTitle: {
-    fontSize: cx(14),
-    color: '#000'
-  },
-  summaryRight: {
-    flexDirection: 'column',
-    marginLeft: cx(21),
-    borderRadius: cx(16),
-    backgroundColor: '#cbcbcb',
-  },
-  rightItem: {
-    paddingHorizontal: cx(12),
-    color: '#000',
-  },
-  rightTitle: {
-    paddingLeft: cx(12),
-    paddingRight: cx(12),
-    fontSize: cx(10),
-    textAlign: 'center',
-    alignSelf: 'flex-start'
-  },
-  filletCorner: {
-    flexDirection: 'row',
-    backgroundColor: '#cbcbcb',
-    borderRadius: cx(16),
-    alignSelf: 'flex-start'
-  }
-})
-
+import React, { useEffect, useMemo } from "react";
+import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from "react-native";
+import { useReactive } from "ahooks";
+import Page from "@ledvance/base/src/components/Page";
+import { useNavigation, useRoute } from '@react-navigation/core'
+import I18n from "@ledvance/base/src/i18n";
+import res from "@ledvance/base/src/res";
+import TextField from "@ledvance/base/src/components/TextField";
+import LdvWeekView from '@ledvance/base/src/components/weekSelect'
+import { TimerPicker, Utils } from "tuya-panel-kit";
+import DeleteButton from "@ledvance/base/src/components/DeleteButton";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import { convertMinutesTo12HourFormat, loopText, showDialog } from "@ledvance/base/src/utils/common";
+import LampAdjustView from '@ledvance/base/src/components/LampAdjustView'
+import Card from "@ledvance/base/src/components/Card";
+import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
+import { RandomTimerUiItem } from "./RandomTimeActions";
+import { cloneDeep, isEqual } from "lodash";
+import Summary from "./Summary";
+import { RandomTimePageParams } from "./RandomTimePage";
+import { Result } from "@ledvance/base/src/models/modules/Result";
+import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
+
+const { convertX: cx } = Utils.RatioUtils;
+
+export interface RandomTimeDetailPageParams extends RandomTimePageParams {
+  mode: 'add' | 'edit'
+  scheduleItem: RandomTimerUiItem
+  onPost: (mode: 'add' | 'edit' | 'del', randomTime: RandomTimerUiItem) => Promise<Result<any>>
+}
+const minTimeGap = 30
+const RandomTimeDetailPage = () => {
+  const navigation = useNavigation()
+  const params = useRoute().params as RandomTimeDetailPageParams
+  const is24Hour = useSystemTimeFormate()
+  const state = useReactive({
+    loading: false,
+    isColorMode: false,
+    randomTime: cloneDeep(params.scheduleItem)
+  })
+
+  useEffect(() => {
+    if (!params.isPlug && state.randomTime.color) {
+      const { brightness, temperature, h, s, v } = state.randomTime.color
+      const isColor = brightness === 0 && temperature === 0 && (h !== 0 || s !== 0 || v !== 0)
+      state.isColorMode = isColor
+    }
+  }, [])
+
+  const checkItemChanged = useMemo(() =>{
+    return isEqual(state.randomTime, params.scheduleItem)
+  }, [params.scheduleItem, JSON.stringify(state.randomTime)])
+
+  const canSubmit = useMemo(() => {
+    return state.randomTime.name?.length > 0 && state.randomTime.name?.length < 33 && !checkItemChanged && state.randomTime.channel !== undefined
+  }, [JSON.stringify(state.randomTime), checkItemChanged])
+
+  return (
+    <Page
+      backText={I18n.getLang('randomtimecycle_sockets_headline_text')}
+      rightButtonIcon={canSubmit ? res.ic_check : res.ic_uncheck}
+      loading={state.loading}
+      showBackDialog={!checkItemChanged}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang('cancel_dialog_delete_item_randomtimecycle_description')}
+      headlineText={I18n.getLang(params.mode === 'add' ? 'add_fixedtimecycle_headline_text' : 'edit_fixedtimecycle_headline_text')}
+      rightButtonIconClick={async () => {
+        if (!canSubmit || state.loading) return
+        const { startTime, endTime} = state.randomTime
+        if(startTime < endTime && (endTime - startTime) < minTimeGap){
+          return showDialog({
+            method: 'alert',
+            title: I18n.getLang('conflict_dialog_save_item_randomtimecycle_tips'),
+            subTitle: I18n.getLang('conflict_dialog_save_item_randomtimecycle_interval_description'),
+            confirmText: I18n.getLang('conflict_dialog_save_item_randomtimecycle_answer_confirm_text'),
+            onConfirm: (_, { close}) =>{
+              close()
+            }
+          })
+        }
+        state.loading = true
+        const editRandomTime = {
+          ...state.randomTime,
+          enable: true
+        }
+        if (!params.isPlug && state.randomTime.color) {
+          editRandomTime.color = {
+            h: state.isColorMode ? state.randomTime.color?.h : 0,
+            s: state.isColorMode ? state.randomTime.color?.s : 0,
+            v: state.isColorMode ? state.randomTime.color?.v : 0,
+            temperature: state.isColorMode ? 0 : state.randomTime.color?.temperature,
+            brightness: state.isColorMode ? 0 : state.randomTime.color?.brightness
+          }
+        }
+        const res = await params.onPost(params.mode, editRandomTime)
+        state.loading = false
+        if (res.success) {
+          navigation.goBack()
+        }
+      }}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <TextField
+          style={styles.cardContainer}
+          value={state.randomTime.name}
+          showError={state.randomTime.name?.length > 32}
+          maxLength={33}
+          errorText={I18n.getLang('add_new_dynamic_mood_alert_text')}
+          placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
+          onChangeText={(t: string) => {
+            state.randomTime.name = t;
+          }}
+        />
+        {/* pick */}
+        <TimerPicker
+          itemTextColor='#aeadb5'
+          style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+          is12Hours={!is24Hour}
+          startTime={state.randomTime.startTime}
+          endTime={state.randomTime.endTime}
+          onTimerChange={(startTime, endTime) => {
+            state.randomTime.startTime = startTime
+            state.randomTime.endTime = endTime
+          }} />
+        <LdvWeekView
+          value={state.randomTime.weeks}
+          style={styles.cardContainer}
+          onSelect={(index: number) => {
+            const rawIndex = index - 1
+            state.randomTime.weeks[rawIndex] = state.randomTime.weeks[rawIndex] === 1 ? 0 : 1
+          }} />
+        <Spacer />
+        <Text style={styles.cardContainer}>{loopText(state.randomTime.weeks)}</Text>
+        <Spacer />
+        {/* Apply for */}
+        <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
+          <Spacer height={cx(10)} />
+          <View style={[styles.applyContent, { paddingTop: state.randomTime.channel === undefined ? 0 : cx(10) }]}>
+            {state.randomTime.channel === undefined ?
+              <Text>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+              <View style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]}>
+                <Text style={{ color: '#000', fontSize: cx(12) }}>{params.applyForList[state.randomTime.channel]?.key}</Text>
+                {params.applyForList.length > 1 && <TouchableOpacity
+                  onPress={() => {
+                    state.randomTime.channel = undefined
+                  }}
+                  style={{ paddingHorizontal: cx(5) }}>
+                  <Image style={{ width: cx(16), height: cx(16) }} source={res.ic_arrows_nav_clear} />
+                </TouchableOpacity>}
+              </View>
+            }
+          </View>
+          {params.applyForList.map((item, index) => {
+            if (state.randomTime.channel === index) return null
+            return (
+              <TouchableOpacity
+                style={styles.applyItem}
+                key={item.key}
+                onPress={() => {
+                  state.randomTime.channel = index
+                }}>
+                <Text style={{ color: '#000', fontSize: cx(12) }}>{item.key}</Text>
+                <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
+              </TouchableOpacity>
+            )
+          })}
+        </View>
+        <Spacer />
+        {/* Devices */}
+        {!!state.randomTime.color && !params.isPlug && <View style={styles.cardContainer}>
+          <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline2_text')}</Text>
+          <Spacer height={cx(10)} />
+          <Card>
+            <LdvSwitch
+              title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+              color={'#fff'}
+              colorAlpha={1}
+              enable={true}
+              setEnable={() => { }}
+              showSwitch={false}
+            />
+            <LampAdjustView
+              isSupportColor={!!params.isSupportColor}
+              isSupportBrightness={!!params.isSupportBrightness}
+              isSupportTemperature={!!params.isSupportTemperature}
+              isColorMode={state.isColorMode}
+              reserveSV={true}
+              setIsColorMode={(v) => state.isColorMode = v}
+              h={state.randomTime.color.h}
+              s={state.randomTime.color.s}
+              v={state.randomTime.color.v}
+              colorTemp={state.randomTime.color.temperature}
+              brightness={state.randomTime.color.brightness}
+              onHSVChangeComplete={(h, s, v) => {
+                state.randomTime.color = {
+                  ...state.randomTime.color,
+                  h,
+                  s,
+                  v
+                }
+              }}
+              onCCTChangeComplete={(v) => {
+                state.randomTime.color = {
+                  ...state.randomTime.color,
+                  temperature: v
+                }
+              }}
+              onBrightnessChangeComplete={(v) => {
+                state.randomTime.color = {
+                  ...state.randomTime.color,
+                  brightness: v
+                }
+              }}
+            />
+          </Card>
+          <Spacer />
+        </View>}
+        {/* summary */}
+        <Summary
+          frequency={loopText(state.randomTime.weeks)}
+          time={`${convertMinutesTo12HourFormat(state.randomTime.startTime, is24Hour)} - ${convertMinutesTo12HourFormat(state.randomTime.endTime, is24Hour)}`}
+          hideActions={true}
+        />
+        <Spacer />
+        {params.mode === 'edit' &&
+          <View style={{ marginHorizontal: cx(24) }}>
+            <DeleteButton
+              text={I18n.getLang('edit_fixedtimecycle_bttn_text')}
+              onPress={() => {
+                showDialog({
+                  method: 'confirm',
+                  title: I18n.getLang('cancel_dialog_delete_item_randomtimecycle_titel'),
+                  subTitle: I18n.getLang('cancel_dialog_delete_item_fixedtimecycle_description'),
+                  onConfirm: async (_, { close }) => {
+                    close()
+                    state.loading = true
+                    const res = await params.onPost('del', state.randomTime)
+                    state.loading = false
+                    if (res.success) {
+                      navigation.goBack()
+                    }
+                  }
+                })
+              }} />
+          </View>
+        }
+        <Spacer />
+      </ScrollView>
+    </Page>
+  )
+}
+
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginHorizontal: cx(24)
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  applyContent: {
+    backgroundColor: '#f6f6f6',
+    borderRadius: 4,
+    minHeight: cx(55),
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: cx(10),
+    paddingTop: cx(10)
+  },
+  applyItem: {
+    paddingLeft: cx(5),
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    height: cx(35),
+  },
+  summaryContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    marginBottom: cx(10)
+  },
+  summaryLeft: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  summaryImg: {
+    width: cx(12),
+    height: cx(12),
+    marginRight: cx(6)
+  },
+  leftTitle: {
+    fontSize: cx(14),
+    color: '#000'
+  },
+  summaryRight: {
+    flexDirection: 'column',
+    marginLeft: cx(21),
+    borderRadius: cx(16),
+    backgroundColor: '#cbcbcb',
+  },
+  rightItem: {
+    paddingHorizontal: cx(12),
+    color: '#000',
+  },
+  rightTitle: {
+    paddingLeft: cx(12),
+    paddingRight: cx(12),
+    fontSize: cx(10),
+    textAlign: 'center',
+    alignSelf: 'flex-start'
+  },
+  filletCorner: {
+    flexDirection: 'row',
+    backgroundColor: '#cbcbcb',
+    borderRadius: cx(16),
+    alignSelf: 'flex-start'
+  }
+})
+
 export default RandomTimeDetailPage