@ledvance/base 1.3.26 → 1.3.28

package/localazy.json

@@ -928,6 +928,41 @@
                 "MATCH:date_type",
                 "MATCH:cancel_dialog_leave_unsaved_vacation_note",
                 "MATCH:mood_string_mode_light_show",
+                "MATCH:mood_strip_mode_favorite",
+                "MATCH:mood_overview_field_chip_diy",
+                "MATCH:love_mood_alert_title",
+                "MATCH:love_mood_alert_content",
+                "MATCH:mood_strip_default_mood_focus",
+                "MATCH:mood_strip_default_mood_lavender",
+                "MATCH:mood_strip_default_mood_lavender_true_colors",
+                "MATCH:mood_strip_default_mood_night_light",
+                "MATCH:mood_strip_default_mood_cozy",
+                "MATCH:mood_strip_default_mood_atmosphere",
+                "MATCH:mood_strip_default_mood_relax",
+                "MATCH:mood_strip_default_mood_sky",
+                "MATCH:mood_strip_default_mood_ocean",
+                "MATCH:mood_strip_default_mood_warmth",
+                "MATCH:mood_strip_default_mood_romance",
+                "MATCH:mood_strip_default_mood_jungle",
+                "MATCH:mood_strip_default_mood_sunset",
+                "MATCH:mood_strip_default_mood_missing",
+                "MATCH:mood_strip_default_mood_party",
+                "MATCH:mood_strip_default_mood_rainbow",
+                "MATCH:mood_strip_default_mood_meditation",
+                "MATCH:mood_strip_default_mood_wake_time",
+                "MATCH:mood_strip_default_mood_spring",
+                "MATCH:mood_strip_default_mood_halloween",
+                "MATCH:mood_strip_default_mood_christmas",
+                "MATCH:mood_strip_default_mood_noble",
+                "MATCH:mood_strip_default_mood_energy",
+                "MATCH:mood_strip_default_mood_deep_dive",
+                "MATCH:mood_strip_default_mood_mojito",
+                "MATCH:mood_strip_default_mood_forest",
+                "MATCH:mood_strip_default_mood_cyberpunk",
+                "MATCH:mood_strip_default_mood_summer",
+                "MATCH:mood_strip_default_mood_fall",
+                "MATCH:mood_strip_default_mood_club",
+                "MATCH:mood_strip_default_mood_candlelight",
                 "MATCH:thermostat_scene",
                 "MATCH:thermostat_vacationplan",
                 "MATCH:thermostat_automatictab",

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/base",
   "pid": [],
   "uiid": "",
-  "version": "1.3.26",
+  "version": "1.3.28",
   "scripts": {
     "prepublishOnly": "python update-localazy.py"
   },

package/src/api/nativeEventEmitter.ts

@@ -1,7 +1,9 @@
 import {EmitterSubscription, NativeEventEmitter, NativeModules} from 'react-native'
 import {
   DeviceInfo,
+  GestureControlType,
   NativeProps,
+  setGestrueControlValues,
   setGroupDevices,
   setGroupDps,
   setGroupNativeProps,
@@ -21,6 +23,7 @@ let deviceDPListener: EmitterSubscription | null
 let groupFeatureListener: EmitterSubscription | null
 let groupDeviceListener: EmitterSubscription | null
 let groupDpListener: EmitterSubscription | null
+let gestrueControlListener: EmitterSubscription | null
 
 interface GroupFeatureEvent {
   tyGroupId: number
@@ -126,6 +129,10 @@ export const addListener = (store) => {
       store.dispatch(setGroupDevices(groupDevices))
     }
   })
+
+  gestrueControlListener = nativeEventEmitter.addListener('LDV_GESTURE_CONTROL_COMMAND', (event: GestureControlType) => {
+    store.dispatch(setGestrueControlValues(event))
+  })
 }
 
 export const removeListener = () => {
@@ -140,4 +147,7 @@ export const removeListener = () => {
 
   groupDpListener && groupDpListener.remove()
   groupDpListener = null
+
+  gestrueControlListener && gestrueControlListener.remove()
+  gestrueControlListener = null
 }

package/src/components/BallDirectionView.tsx

@@ -0,0 +1,184 @@
+import {Utils} from "tuya-panel-kit";
+import React, {useEffect} from "react";
+import {Image, StyleSheet, TouchableOpacity, View} from "react-native";
+import res from "../res";
+import {useReactive} from "ahooks";
+import {hsv2Hex} from "../utils/index";
+import {cctToColor} from "../utils/cctUtils";
+import {AdjustType, HSV} from '../utils/interface'
+
+const {withTheme} = Utils.ThemeUtils
+const cx = Utils.RatioUtils.convertX;
+
+export enum PaintMode {
+    Top,
+    Bottom,
+    ALL
+}
+
+interface BallDirectionProps {
+    theme?: any,
+    adjustType: AdjustType,
+    paintMode: PaintMode,
+    onPaintModeChanged: (paintMode: PaintMode) => void,
+    topColor: HSV,
+    bottomColor: HSV,
+    colorTemp: number,
+    brightness: number,
+}
+
+const BallDirectionView = (props: BallDirectionProps) => {
+    const {theme, adjustType, paintMode, onPaintModeChanged, topColor, bottomColor, colorTemp, brightness} = props;
+    const state = useReactive({
+        adjustType: adjustType,
+        paintMode: paintMode,
+        halfCircleTopColor: '#ff0000',
+        halfCircleBottomColor: '#00ff00',
+    });
+
+    useEffect(() => {
+        state.adjustType = adjustType;
+        state.paintMode = paintMode;
+        if (state.adjustType === AdjustType.COLOUR) {
+            state.halfCircleTopColor = hsv2Hex(topColor.h, Math.max(Math.round(topColor.s / 10), 10), 100);
+            state.halfCircleBottomColor = hsv2Hex(bottomColor.h, Math.max(Math.round(bottomColor.s / 10), 10), 100);
+        } else if (state.adjustType === AdjustType.WHITE) {
+            state.halfCircleTopColor = cctToColor(colorTemp, brightness);
+            state.halfCircleBottomColor = cctToColor(colorTemp, brightness);
+        } else {
+            state.halfCircleTopColor = '#ffffff';
+            state.halfCircleBottomColor = '#ffffff';
+        }
+    }, [adjustType, paintMode, JSON.stringify(topColor), JSON.stringify(bottomColor), colorTemp, brightness]);
+
+    const styles = StyleSheet.create({
+        root: {
+            flexDirection: 'row',
+            width: '100%',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        paintModeRoot: {
+            flexDirection: 'column',
+            position: 'absolute',
+            left: cx(24)
+        },
+        paintModeAll: {
+            resizeMode: 'contain',
+            width: '100%',
+            height: '100%',
+            tintColor: state.paintMode === PaintMode.ALL ? props.theme?.icon.primary : props.theme?.icon.normal
+        },
+        paintModeHalf: {
+            resizeMode: 'contain',
+            width: '100%',
+            height: '100%',
+            tintColor: state.paintMode !== PaintMode.ALL ? props.theme?.icon.primary : props.theme?.icon.normal
+        },
+        circleLayout: {
+            marginVertical: cx(10),
+            width: cx(180),
+            height: cx(180)
+        },
+        circleBorder: {
+            position: 'absolute',
+            width: '84%',
+            height: '84%',
+            borderColor: theme?.textInput.line,
+            borderRadius: 100,
+            borderWidth: 2,
+            bottom: '8%',
+            left: '8%',
+            right: '8%',
+            top: '8%',
+        },
+        coloring: {
+            width: '100%',
+            height: '100%',
+            resizeMode: 'contain',
+        },
+        ringUp: {
+            position: 'absolute',
+            width: '100%',
+            height: '56%',
+            resizeMode: 'contain',
+            transform: [{ rotate: '180deg' }]
+        },
+        ringDown: {
+            position: 'absolute',
+            width: '100%',
+            height: '56%',
+            resizeMode: 'contain',
+            bottom: 0
+        },
+        halfCircleDown: {
+            position: 'absolute',
+            width: '60%',
+            left: '20%',
+            right: '20%',
+            bottom: '11%',
+        },
+        halfCircleUp: {
+            position: 'absolute',
+            width: '60%',
+            left: '20%',
+            right: '20%',
+            top: '11%',
+        }
+    });
+    return (<View style={styles.root}>
+        <View style={styles.paintModeRoot}>
+            {state.adjustType === AdjustType.COLOUR &&
+                <TouchableOpacity style={{width: cx(40), height: cx(40)}} onPress={() => {
+                    onPaintModeChanged(PaintMode.Top);
+                }}>
+                    <Image source={res.half} style={styles.paintModeHalf}/>
+                </TouchableOpacity>}
+            <TouchableOpacity
+                style={{width: cx(40), height: cx(40), marginTop: cx(10),}}
+                onPress={() => {
+                    onPaintModeChanged(PaintMode.ALL);
+                }}>
+                <Image source={res.all} style={styles.paintModeAll}/>
+            </TouchableOpacity>
+        </View>
+        <View style={styles.circleLayout}>
+            <View style={styles.circleBorder}/>
+            {state.paintMode === PaintMode.ALL &&
+                <Image source={res.coloring} style={styles.coloring}/>}
+            {state.paintMode === PaintMode.Top &&
+                <Image source={res.ringdown} style={styles.ringUp}/>}
+            {state.paintMode === PaintMode.Bottom &&
+                <Image source={res.ringdown} style={styles.ringDown}/>}
+            <TouchableOpacity
+                style={styles.halfCircleUp}
+                disabled={state.paintMode === PaintMode.ALL}
+                onPress={() => {
+                    onPaintModeChanged(PaintMode.Top);
+                }}>
+                <Image source={res.halfcircle} style={{
+                    width: '100%',
+                    resizeMode: 'contain',
+                    tintColor: state.halfCircleTopColor
+                }}/>
+
+            </TouchableOpacity>
+
+            <TouchableOpacity
+                style={styles.halfCircleDown}
+                disabled={state.paintMode === PaintMode.ALL}
+                onPress={() => {
+                    onPaintModeChanged(PaintMode.Bottom);
+                }}>
+                <Image source={res.halfcircle} style={{
+                    width: '100%',
+                    resizeMode: 'contain',
+                    transform: [{rotate: '180deg'}],
+                    tintColor: state.halfCircleBottomColor
+                }}/>
+            </TouchableOpacity>
+        </View>
+    </View>)
+}
+
+export default withTheme(BallDirectionView)

package/src/components/DiySceneItem.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import {StyleSheet, Text, View, ViewProps, ViewStyle} from 'react-native';
+import {SwitchButton, Utils} from 'tuya-panel-kit';
+import Card from './Card';
+import Spacer from './Spacer';
+import I18n from '../i18n';
+import ThemeType from '../config/themeType'
+
+const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
+
+const tagMap = {
+  'Static': I18n.getLang('mood_overview_field_chip_text'),
+  'Dynamic': I18n.getLang('mood_overview_field_chip_2'),
+  'DIY': I18n.getLang('mood_overview_field_chip_diy')
+}
+
+interface DiySceneItemProps extends ViewProps {
+  theme?: ThemeType
+  enable: boolean
+  scene: {
+    name: string
+    type: 'Static' | 'Dynamic' | 'DIY'
+    [key: string]: any
+  }
+  style?: ViewStyle
+  onPress?: () => void
+  onSwitch: (enable: boolean) => void
+}
+
+const DiySceneItem = (props: DiySceneItemProps) => {
+  const { scene } = props;
+
+  const styles = StyleSheet.create({
+    card: {
+      marginHorizontal: cx(24),
+    },
+    headline: {
+      flexDirection: 'row',
+      marginHorizontal: cx(16),
+    },
+    headText: {
+      flex: 1,
+      color: props.theme?.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      lineHeight: cx(20),
+    },
+    moodTypeItem: {
+      flexDirection: 'row',
+    },
+    moodTypeLabel: {
+      marginStart: cx(16),
+      paddingHorizontal: cx(12.5),
+      backgroundColor: props.theme?.tag.background,
+      borderRadius: cx(8),
+    },
+    moodTypeLabelText: {
+      height: cx(16),
+      color: props.theme?.tag.fontColor,
+      fontSize: cx(10),
+      textAlignVertical: 'center',
+      fontFamily: 'helvetica_neue_lt_std_roman',
+      lineHeight: cx(16),
+    },
+  })
+
+  return (
+    <Card style={[styles.card, props.style]} onPress={props.onPress}>
+      <View>
+        <Spacer height={cx(16)} />
+        <View style={styles.headline}>
+          <Text style={styles.headText}>{scene.name}</Text>
+          <SwitchButton
+            thumbStyle={{ elevation: 0 }}
+            value={props.enable}
+            onValueChange={props.onSwitch}
+          />
+        </View>
+        <Spacer />
+        <Spacer height={cx(12)} />
+        <View style={styles.moodTypeItem}>
+          <View style={styles.moodTypeLabel}>
+            <Text style={styles.moodTypeLabelText}>
+              {tagMap[scene.type]}
+            </Text>
+          </View>
+        </View>
+        <Spacer height={cx(16)} />
+      </View>
+    </Card>
+  );
+};
+
+export default withTheme(DiySceneItem)

package/src/components/DiySceneNodeView.tsx

@@ -0,0 +1,103 @@
+import {Utils} from "tuya-panel-kit";
+import React, {useEffect} from "react";
+import {Image, StyleSheet, TouchableOpacity, View} from "react-native";
+import {useReactive} from "ahooks";
+import {hsv2Hex} from "../utils/index";
+import ThemeType from "../config/themeType";
+import res from "../res";
+import { HSV } from "../utils/interface";
+
+const {withTheme} = Utils.ThemeUtils
+const cx = Utils.RatioUtils.convertX;
+
+interface DiySceneNodeProps {
+  theme?: ThemeType
+  isCurrent: boolean
+  position: 'Top' | 'Bottom'
+  topColor: HSV
+  bottomColor: HSV
+  onChangePosition: (position: 'Top' | 'Bottom') => void
+}
+
+const DiySceneNodeView = (props: DiySceneNodeProps) => {
+  const {theme, topColor, bottomColor, isCurrent, position, onChangePosition} = props;
+  const state = useReactive({
+    halfCircleTopColor: hsv2Hex(topColor.h, Math.max(Math.round(topColor.s / 10), 10), 100),
+    halfCircleBottomColor: hsv2Hex(bottomColor.h, Math.max(Math.round(bottomColor.s / 10), 10), 100),
+  });
+
+  useEffect(() => {
+    state.halfCircleTopColor = hsv2Hex(topColor.h, Math.max(Math.round(topColor.s / 10), 10), 100);
+    state.halfCircleBottomColor = hsv2Hex(bottomColor.h, Math.max(Math.round(bottomColor.s / 10), 10), 100);
+  }, [JSON.stringify(topColor), JSON.stringify(bottomColor)]);
+
+  const styles = StyleSheet.create({
+    circleLayout: {
+      marginLeft: cx(10),
+      marginVertical: cx(10),
+      width: cx(60),
+      height: cx(60),
+      justifyContent:'space-between',
+      alignContent: 'center',
+    },
+    borderTop: {
+      position: 'absolute',
+      width: cx(60),
+      height: cx(28),
+      resizeMode: 'contain',
+      top: '-5%',
+      zIndex: 2,
+      tintColor: theme?.global.fontColor
+    },
+    borderBottom: {
+      position: 'absolute',
+      width: cx(60),
+      height: cx(28),
+      resizeMode: 'contain',
+      transform: [{rotate: '180deg'}],
+      bottom: '15%',
+      zIndex: 2,
+      tintColor: theme?.global.fontColor
+    },
+    halfCircleDown: {
+      width: '100%',
+      height: cx(30),
+    },
+    halfCircleUp: {
+      width: '100%',
+      height: cx(30)
+    }
+  });
+  return (
+    <View style={styles.circleLayout}>
+      <TouchableOpacity
+        style={styles.halfCircleUp}
+        onPress={() => {
+          onChangePosition("Top")
+        }}>
+        <Image source={res.halfcircle} style={{
+          width: cx(60),
+          height: cx(25),
+          resizeMode: 'contain',
+          tintColor: state.halfCircleTopColor
+        }}/>
+        { (isCurrent && position === 'Top') && <Image source={res.halfborder} style={styles.borderTop} />}
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.halfCircleDown}
+        onPress={() => {
+          onChangePosition("Bottom")
+        }}>
+        <Image source={res.halfcircle} style={{
+          width: cx(60),
+          height: cx(25),
+          resizeMode: 'contain',
+          transform: [{rotate: '180deg'}],
+          tintColor: state.halfCircleBottomColor
+        }}/>
+        {(isCurrent && position === 'Bottom') && <Image source={res.halfborder} style={styles.borderBottom} />}
+      </TouchableOpacity>
+    </View>)
+}
+
+export default withTheme(DiySceneNodeView)

package/src/components/MoodStripAdjustView.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import {Image, Text, TouchableOpacity, View} from "react-native";
+import ColorAdjustView, {ColorAdjustViewProps} from "./ColorAdjustView";
+import ColorTempAdjustView, {ColorTempAdjustViewProps} from "./ColorTempAdjustView";
+import Spacer from "./Spacer";
+import {TabBar, Utils} from "tuya-panel-kit";
+import ThemeType from '../config/themeType'
+import res from "../res";
+import { AdjustType, DiySceneInfo } from "../utils/interface";
+
+const {convertX: cx} = Utils.RatioUtils
+const {withTheme} = Utils.ThemeUtils
+
+type TabsNode = {
+  key: AdjustType
+  title: string
+}
+
+interface MoodStripAdjustViewProps extends ColorAdjustViewProps, ColorTempAdjustViewProps {
+  theme?: ThemeType
+  lampTabs: TabsNode[]
+  activeKey: AdjustType
+  onActiveKeyChange: (key: AdjustType) => void
+  favoriteScenes: DiySceneInfo[]
+  onFavoriteSceneChange: (sceneInfo: DiySceneInfo) => void
+  onFavoriteSceneRemove?: (sceneInfo: DiySceneInfo) => void
+}
+
+const MoodStripAdjustView = (props: MoodStripAdjustViewProps) => {
+  return (
+    <View style={{width: '100%'}}>
+      <TabBar
+        type='radio'
+        tabs={props.lampTabs}
+        style={{
+          borderRadius: cx(8),
+          backgroundColor: props.theme?.segment.background,
+          height: cx(40),
+          marginHorizontal: cx(16)
+        }}
+        tabTextStyle={{color: props.theme?.segment.fontColor}}
+        tabActiveTextStyle={{color: props.theme?.segment.fontColor, fontWeight: 'bold'}}
+        activeColor={props.theme?.segment.active}
+        activeKey={props.activeKey}
+        onChange={props.onActiveKeyChange}
+      />
+      {
+        props.activeKey === AdjustType.COLOUR &&
+          <>
+              <Spacer height={cx(10)}/>
+              <ColorAdjustView
+                  h={props.h}
+                  s={props.s}
+                  v={props.v}
+                  minSaturation={1}
+                  reserveSV={true}
+                  onHSVChange={props.onHSVChange}
+                  onHSVChangeComplete={props.onHSVChangeComplete}/>
+              <Spacer/>
+          </>
+      }
+      {
+        props.activeKey === AdjustType.WHITE &&
+          <>
+              <Spacer height={cx(10)}/>
+              <ColorTempAdjustView
+                  minBrightness={1}
+                  isSupportTemperature={props.isSupportTemperature}
+                  isSupportBrightness={props.isSupportBrightness}
+                  colorTemp={props.colorTemp}
+                  brightness={props.brightness}
+                  onCCTChange={props.onCCTChange}
+                  onCCTChangeComplete={props.onCCTChangeComplete}
+                  onBrightnessChange={props.onBrightnessChange}
+                  onBrightnessChangeComplete={props.onBrightnessChangeComplete}/>
+              <Spacer/>
+          </>
+      }
+      {
+        props.activeKey === AdjustType.LOVE &&
+          <View style={{marginVertical: cx(12), marginHorizontal: cx(16), flexDirection: 'row', flexWrap: 'wrap'}}>
+            {
+              props.favoriteScenes.map((sceneInfo: DiySceneInfo) => {
+                return (
+                  <TouchableOpacity
+                    key={sceneInfo.id}
+                    onPress={() => {
+                      props.onFavoriteSceneChange(sceneInfo)
+                    }}
+                  >
+                    <View style={{
+                      width: cx(54),
+                      height: cx(54),
+                      borderRadius: cx(5),
+                      marginHorizontal: cx(2),
+                      marginVertical: cx(2),
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      backgroundColor: props.theme?.container.background
+                    }}>
+                      {
+                        sceneInfo.id === -1 ?
+                          <Image source={res.cycle} style={{width: cx(50), height: cx(50)}}/> :
+                          <View style={{justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%'}}>
+                            {props.favoriteScenes.length > 3 &&
+                                <TouchableOpacity
+                                    style={{position: 'absolute', top: cx(5), right: cx(5)}}
+                                    onPress={() => {
+                                      props.onFavoriteSceneRemove && props.onFavoriteSceneRemove(sceneInfo)
+                                    }}>
+                                    <Image source={res.minus} style={{width: cx(10), height: cx(10), tintColor: props.theme?.icon.primary}}/>
+                                </TouchableOpacity>
+                            }
+                            <Text style={{fontSize: cx(8), color: props.theme?.global.fontColor}}>{sceneInfo.name}</Text>
+                          </View>
+                      }
+                    </View>
+                  </TouchableOpacity>
+                )
+              })
+            }
+          </View>
+      }
+    </View>
+  )
+}
+
+export default withTheme(MoodStripAdjustView)

package/src/components/TextField.tsx

@@ -13,11 +13,13 @@ interface TextFieldProps extends TextInputProps {
   errorText?: string
   tipIcon?: ImageSourcePropType
   tipColor?: string
+  editable?: boolean
 }
 
 const TextField = (props: TextFieldProps) => {
   const icon = props.tipIcon || res.ic_warning_amber
   const color = props.tipColor || props.theme?.global.warning
+  const editable = props.editable ?? !props.editable
 
   const styles = StyleSheet.create({
     topTip: {
@@ -69,7 +71,7 @@ const TextField = (props: TextFieldProps) => {
       <Text style={[styles.topTip, { opacity: (!!props.value) ? 1 : 0 }]}>{props.placeholder}</Text>
       <View style={styles.textInputGroup}>
         <TextInput{...props} style={styles.textInput} />
-        {!!props.value && props.editable &&
+        {!!props.value && editable &&
             <TouchableOpacity
                 style={styles.iconTouchable}
                 onPress={() => {

package/src/hooks/Hooks.ts

@@ -1,4 +1,4 @@
-import { useRoute } from '@react-navigation/core'
+import { useRoute, useNavigation } from '@react-navigation/core'
 
 export function createParams<T>(params: T): T {
   return { ...params }
@@ -6,4 +6,10 @@ export function createParams<T>(params: T): T {
 
 export function useParams<T extends any>(): T {
   return useRoute().params as T
-}
+}
+
+export function useCurrentPage(routeName: string): boolean {
+  const navigation = useNavigation()
+  const { index, routes} = navigation.getState()
+  return routeName === routes[index].name
+}