@ledvance/group-ui-biz-bundle 1.0.30 → 1.0.32

package/src/modules/randomTimeForPlug/Summary.tsx

@@ -0,0 +1,123 @@
+import React, { ReactElement, memo } from "react";
+import { Text, Image, ViewStyle, View, StyleSheet } from 'react-native'
+import res from "@ledvance/base/src/res"
+import I18n from "@ledvance/base/src/i18n";
+import { Utils } from "tuya-panel-kit";
+import Spacer from "@ledvance/base/src/components/Spacer";
+
+const { convertX: cx } = Utils.RatioUtils;
+
+interface SummaryProps {
+  style?: ViewStyle
+  frequency?: string | ReactElement
+  time?: string | ReactElement
+  actions?: ReactElement
+  hideActions?: boolean
+}
+
+const Summary = (props: SummaryProps) => {
+  return (
+    <View style={styles.cardContainer}>
+      <Text style={styles.itemTitle}>{I18n.getLang('add_randomtimecycle_subheadline_text')}</Text>
+      <Spacer height={cx(10)} />
+      <View style={{}}>
+        <View style={styles.summaryContainer}>
+          <View style={styles.summaryLeft}>
+            <Image
+              source={res.summary_icon1}
+              resizeMode="contain"
+              style={styles.summaryImg}
+            />
+            <View>
+              <Text style={styles.leftTitle}>{I18n.getLang('feature_summary_frequency_headline')}</Text>
+            </View>
+          </View>
+          <View style={styles.summaryRight}>
+            <View style={styles.rightWrap}>
+              <Text style={styles.rightItem}>{props.frequency}</Text>
+            </View>
+          </View>
+        </View>
+        <View style={styles.summaryContainer}>
+          <View style={styles.summaryLeft}>
+            <Image
+              source={res.summary_icon2}
+              resizeMode="contain"
+              style={styles.summaryImg}
+            />
+            <View>
+              <Text style={styles.leftTitle}>{I18n.getLang('feature_summary_time_headline')}</Text>
+            </View>
+          </View>
+          <View style={styles.summaryRight}>
+            <View style={styles.rightWrap}>
+              <Text style={styles.rightItem}>{props.time}</Text>
+            </View>
+          </View>
+        </View>
+        {!props.hideActions && <View style={[styles.summaryContainer, { alignItems: 'flex-start' }]}>
+          <View style={styles.summaryLeft}>
+            <Image
+              source={res.summary_icon3}
+              resizeMode="contain"
+              style={styles.summaryImg}
+            />
+            <View>
+              <Text style={styles.leftTitle}>{I18n.getLang('motion_detection_add_time_schedule_actions_text1')}</Text>
+            </View>
+          </View>
+          <View style={styles.summaryRight}>
+            {props.actions}
+          </View>
+        </View>}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    marginHorizontal: cx(24),
+  },
+  itemTitle: {
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  summaryContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    marginBottom: cx(10),
+  },
+  summaryLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: cx(100)
+  },
+  summaryImg: {
+    width: cx(12),
+    height: cx(12),
+    marginRight: cx(6)
+  },
+  leftTitle: {
+    fontSize: cx(14),
+    color: '#000'
+  },
+  summaryRight: {
+    flex: 1,
+    flexDirection: 'column',
+    marginLeft: cx(15),
+  },
+  rightWrap: {
+    borderRadius: cx(16),
+    paddingHorizontal: cx(12),
+    alignSelf: 'flex-start',
+    backgroundColor: '#cbcbcb',
+  },
+  rightItem: {
+    color: '#000',
+  },
+})
+
+export default memo(Summary)

package/src/modules/randomTimingForLight/ItemCard.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import Card from "@ledvance/base/src/components/Card";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import {StyleSheet, Text, View} from "react-native";
+import {SwitchButton, Utils} from "tuya-panel-kit";
+import {loopText} from "@ledvance/base/src/utils/common";
+import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
+
+const {convertX: cx} = Utils.RatioUtils
+const {parseTimer} = Utils.TimeUtils
+
+export interface ItemCardProps<T> {
+  item: T & {
+    power: boolean
+    startTime: number
+    endTime: number
+    weeks: number[]
+    name?: string
+  },
+  is24Hour?: boolean,
+  onSwitch: (enable: boolean) => void
+  onPress: () => void
+}
+
+const ItemCard = <T, >(props: ItemCardProps<T>) => {
+  const {item, is24Hour, onSwitch, onPress} = props
+  return (
+    <Card style={styles.itemCard} onPress={onPress}>
+      <Spacer height={cx(16)}/>
+      <View style={styles.switchLine}>
+        <Text style={styles.time}>
+          {is24Hour ?
+            `${parseTimer(item.startTime * 60)} - ${parseTimer(item.endTime * 60)}`
+            :
+            `${parseHour12(item.startTime * 60)} - ${parseHour12(item.endTime * 60)}`
+          }
+        </Text>
+        <SwitchButton
+          style={styles.switchBtn}
+          value={item.power}
+          thumbStyle={{elevation: 0}}
+          onValueChange={onSwitch}/>
+      </View>
+      <Text style={styles.loopText}>{loopText(item.weeks, parseTimer(item.startTime * 60))}</Text>
+      <Spacer height={cx(5)}/>
+      <Text style={styles.loopText}>{item.name}</Text>
+      <Spacer/>
+    </Card>
+  )
+}
+
+const styles = StyleSheet.create({
+  itemCard: {
+    marginHorizontal: cx(24),
+    paddingHorizontal: cx(16),
+  },
+  switchLine: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  time: {
+    flex: 1,
+    color: '#000',
+    fontSize: cx(16),
+    fontWeight: 'bold',
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  switchBtn: {},
+  loopText: {
+    color: '#000',
+    fontSize: cx(14),
+    fontFamily: 'helvetica_neue_lt_std_roman',
+  },
+})
+
+export default ItemCard

package/src/modules/randomTimingForLight/RandomTimingForLightAction.ts

@@ -0,0 +1,43 @@
+import {useFeatureHook} from "@ledvance/base/src/models/modules/NativePropsSlice";
+import {Formatter} from "@tuya/tuya-panel-lamp-sdk";
+const RandomTimerFormatter = new Formatter.RandomTimerFormatter()
+
+export interface RandomTimingParam {
+  channels: string[]
+  is24Hour?: boolean
+  isSupportColor: boolean
+  isSupportTemperature: boolean
+  isSupportBrightness: boolean
+}
+
+export interface RandomTimingItem {
+  power: boolean
+  channel?: number
+  weeks: number[]
+  startTime: number
+  endTime: number
+  color: {
+    hue: number
+    saturation: number
+    value: number
+    brightness: number
+    temperature: number
+  }
+  index?: number
+  name?: string
+}
+
+interface LightConfig {
+  randomTiming: RandomTimingItem[]
+}
+
+export function useRandomTiming() {
+  return useFeatureHook<LightConfig, RandomTimingItem[]>('randomTiming', [], (val) => {
+    const data = {
+      version: 0,
+      length: 12,
+      nodes: val
+    }
+    return RandomTimerFormatter.format(data)
+  })
+}

package/src/modules/randomTimingForLight/RandomTimingForLightDetailPage.tsx

@@ -0,0 +1,342 @@
+import React, {useEffect, useMemo} from 'react'
+import Page from "@ledvance/base/src/components/Page";
+import I18n from "@ledvance/base/src/i18n";
+import {Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
+import {TimerPicker, Utils} from "tuya-panel-kit";
+import {RandomTimingItem, RandomTimingParam} from "./RandomTimingForLightAction";
+import res from "@ledvance/base/src/res/index";
+import {useReactive} from "ahooks";
+import {useNavigation, useRoute} from '@react-navigation/core';
+import LdvTopName from "@ledvance/base/src/components/ldvTopName";
+import TextField from "@ledvance/base/src/components/TextField";
+import LdvWeekView from "@ledvance/base/src/components/weekSelect";
+import Spacer from "@ledvance/base/src/components/Spacer";
+import {loopText, showDialog} from "@ledvance/base/src/utils/common";
+import DeleteButton from "@ledvance/base/src/components/DeleteButton";
+import dayjs from "dayjs";
+import {cloneDeep, isEqual} from "lodash";
+import Summary from "./Summary";
+import Card from "@ledvance/base/src/components/Card";
+import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
+import LampAdjustView from "@ledvance/base/src/components/LampAdjustView";
+import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
+
+const {parseTimer} = Utils.TimeUtils
+const {convertX: cx} = Utils.RatioUtils;
+
+interface RandomTimeDetailParam extends RandomTimingParam {
+  mode: 'add' | 'edit',
+  item: RandomTimingItem,
+  onPost: (mode: 'add' | 'edit' | 'del', item: RandomTimingItem, goBack?: boolean) => Promise<void>
+}
+
+const newRandomTimingItem = (): RandomTimingItem => {
+  const startTime = dayjs().hour() * 60 + dayjs().minute()
+  return {
+    power: true,
+    channel: 0,
+    weeks: [0, 0, 0, 0, 0, 0, 0],
+    startTime: startTime,
+    endTime: startTime + 60,
+    color: {
+      hue: 0,
+      saturation: 100,
+      value: 100,
+      brightness: 100,
+      temperature: 0,
+    }
+  }
+}
+
+const RandomTimingForLightDetailPage = () => {
+  const navigation = useNavigation()
+  const params = useRoute().params as RandomTimeDetailParam
+  const state = useReactive({
+    item: params.mode === 'add' ? newRandomTimingItem() : cloneDeep(params.item),
+    loading: false,
+    isColorMode: false
+  })
+
+  useEffect(() => {
+    const { brightness, temperature, hue, saturation, value } = state.item.color
+    state.isColorMode = brightness === 0 && temperature === 0 && (hue !== 0 || saturation !== 0 || value !== 0)
+  }, [])
+
+  const canSave = useMemo(() => {
+    return state.item.name && state.item.name.length < 33 && state.item.channel !== undefined
+  }, [state.item.name, state.item.channel])
+
+  const showConfirm = useMemo(() => {
+    return params.mode === 'edit' && !isEqual(state.item, params.item)
+  }, [JSON.stringify(state.item), JSON.stringify(params.item)])
+
+  const onSave = async () => {
+    if (!canSave) {
+      return
+    }
+    const timeInterval = state.item.endTime - state.item.startTime;
+    if (timeInterval >= 0 && timeInterval < 30) {
+      showDialog({
+        method: 'alert',
+        title: I18n.getLang('conflict_dialog_save_item_randomtimecycle_tips'),
+        subTitle: I18n.getLang('conflict_dialog_save_item_randomtimecycle_interval_description'),
+        onConfirm: async (_, { close }) => {
+          close()
+        }
+      })
+      return
+    }
+    await params.onPost(params.mode, {
+      ...state.item,
+      power: true,
+      color: {
+        hue: state.isColorMode ? state.item.color.hue : 0,
+        saturation: state.isColorMode ? state.item.color.saturation : 0,
+        value: state.isColorMode ? state.item.color.value : 0,
+        temperature: state.isColorMode ? 0 : state.item.color.temperature,
+        brightness: state.isColorMode ? 0 : state.item.color.brightness
+      }
+    }, true);
+  }
+
+  const onDelete = () => {
+    return showDialog({
+      method: 'confirm',
+      title: I18n.getLang('cancel_dialog_delete_item_randomtimecycle_titel'),
+      subTitle: I18n.getLang('cancel_dialog_delete_item_randomtimecycle_description'),
+      onConfirm: async (_, {close}) => {
+        close()
+        await params.onPost('del', state.item, true)
+      }
+    })
+  }
+  return (
+    <Page
+      backText={I18n.getLang('randomtimecycle_sockets_headline_text')}
+      onBackClick={!showConfirm ? navigation.goBack : undefined}
+      rightButtonIcon={canSave ? res.ic_check : res.ic_uncheck}
+      rightButtonDisabled={state.loading}
+      loading={state.loading}
+      showBackDialog={showConfirm}
+      backDialogTitle={I18n.getLang('cancel_dialog_leave_unsaved_titel')}
+      backDialogContent={I18n.getLang('cancel_dialog_delete_item_randomtimecycle_description')}
+      rightButtonIconClick={onSave}
+    >
+      <ScrollView nestedScrollEnabled={true}>
+        <LdvTopName
+          title={I18n.getLang(params.mode === 'add' ? 'add_fixedtimecycle_headline_text' : 'edit_fixedtimecycle_headline_text')}/>
+        <TextField
+          style={styles.cardContainer}
+          value={state.item.name}
+          showError={(state.item.name?.length || 0) > 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.item.name = t;
+          }}
+        />
+        {/* pick */}
+        <TimerPicker
+          itemTextColor='#aeadb5'
+          style={{paddingVertical: cx(0), marginVertical: cx(0)}}
+          is12Hours={!params.is24Hour}
+          startTime={state.item.startTime}
+          endTime={state.item.endTime}
+          onTimerChange={(startTime, endTime) => {
+            state.item.startTime = startTime
+            state.item.endTime = endTime
+          }}/>
+        <LdvWeekView
+          value={state.item.weeks}
+          style={styles.cardContainer}
+          onSelect={(index: number) => {
+            const rawIndex = index - 1
+            state.item.weeks[rawIndex] = state.item.weeks[rawIndex] === 1 ? 0 : 1
+          }}/>
+        <Spacer/>
+        <Text style={styles.cardContainer}>{loopText(state.item.weeks, parseTimer(state.item.startTime * 60))}</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}>
+            {state.item.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'}}>{params.channels[state.item.channel]}</Text>
+                {params.channels.length > 1 && <TouchableOpacity
+                    onPress={() => {
+                      state.item.channel = undefined
+                    }}
+                    style={{paddingHorizontal: cx(5)}}>
+                    <Image style={{width: cx(16), height: cx(16)}} source={res.ic_arrows_nav_clear}/>
+                </TouchableOpacity>}
+              </View>
+            }
+          </View>
+          {params.channels.map((item: string, index: number) => {
+            if (state.item.channel === index) {
+              return null
+            }
+            return (
+              <TouchableOpacity
+                style={styles.applyItem}
+                key={item}
+                onPress={() => {
+                  state.item.channel = index
+                }}
+              >
+                <Text style={{color: '#000'}}>{item}</Text>
+                <Image style={{width: cx(16), height: cx(16)}} source={res.device_panel_timer_add}/>
+              </TouchableOpacity>
+            )
+          })}
+        </View>
+        <Spacer/>
+        {/* Devices */}
+        <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.item.color.hue}
+              s={state.item.color.saturation}
+              v={state.item.color.value}
+              colorTemp={state.item.color.temperature}
+              brightness={state.item.color.brightness}
+              onHSVChangeComplete={(h, s, v) => {
+                state.item.color = {
+                  ...state.item.color,
+                  hue: h,
+                  saturation: s,
+                  value: v
+                }
+              }}
+              onCCTChangeComplete={(v) => {
+                state.item.color = {
+                  ...state.item.color,
+                  temperature: v
+                }
+              }}
+              onBrightnessChangeComplete={(v) => {
+                state.item.color = {
+                  ...state.item.color,
+                  brightness: v
+                }
+              }}
+            />
+          </Card>
+          <Spacer />
+        </View>
+        {/* summary */}
+        <Summary
+          frequency={loopText(state.item.weeks)}
+          time={params.is24Hour ?
+            `${parseTimer(state.item.startTime * 60)} - ${parseTimer(state.item.endTime * 60)}`
+            :
+            `${parseHour12(state.item.startTime * 60)} - ${parseHour12(state.item.endTime * 60)}`
+          }
+          hideActions={true}
+        />
+        <Spacer/>
+        {params.mode === 'edit' &&
+            <View style={{marginHorizontal: cx(24)}}>
+                <DeleteButton
+                    text={I18n.getLang('edit_fixedtimecycle_bttn_text')}
+                    onPress={onDelete}/>
+            </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 RandomTimingForLightDetailPage