@ledvance/ui-biz-bundle 1.1.146 → 1.1.148

package/src/newModules/mood/MoodItem.tsx

@@ -1,166 +1,172 @@
-import React, { useMemo } from 'react';
-import { StyleSheet, Text, View, ViewProps, ViewStyle, Image } from 'react-native';
-import { SwitchButton, Utils } from 'tuya-panel-kit';
-import { hsv2Hex } from '@ledvance/base/src/utils';
-import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
-import { mapFloatToRange } from '@ledvance/base/src/utils';
-import Card from '@ledvance/base/src/components/Card';
-import Spacer from '@ledvance/base/src/components/Spacer';
-import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine';
-import { MoodJumpGradientMode, MoodLampInfo, MoodUIInfo } from './Interface';
-import I18n from '@ledvance/base/src/i18n';
-import res from '@ledvance/base/src/res';
-import ThemeType from '@ledvance/base/src/config/themeType'
-
-const cx = Utils.RatioUtils.convertX;
-const { withTheme } = Utils.ThemeUtils
-
-interface LightCategory {
-  isMixLight?: boolean
-  isStripLight?: boolean
-  isStringLight?: boolean
-  isCeilingLight?: boolean
-}
-
-interface MoodItemProps extends ViewProps {
-  theme?: ThemeType
-  enable: boolean;
-  isMix: boolean;
-  mood: MoodUIInfo;
-  style?: ViewStyle;
-  deviceTypeOption?: LightCategory
-  onPress?: () => void;
-  onSwitch: (enable: boolean) => void;
-}
-
-const MoodItem = (props: MoodItemProps) => {
-  const { mood, isMix, deviceTypeOption } = props;
-  const isDynamic = useMemo(() => {
-    return mood.mainLamp.nodes?.length > 1 || mood.secondaryLamp.nodes?.length > 1;
-  }, [mood.mainLamp.nodes, mood.secondaryLamp.nodes]);
-
-  const gradientMode = useMemo(() => (
-    deviceTypeOption?.isStringLight ? MoodJumpGradientMode.StringGradient : deviceTypeOption?.isStripLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
-  ), [MoodJumpGradientMode, deviceTypeOption])
-
-
-  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}>{mood.name}</Text>
-          <SwitchButton
-            thumbStyle={{ elevation: 0 }}
-            value={props.enable}
-            onValueChange={props.onSwitch}
-          />
-        </View>
-        <Spacer />
-        <MixMoodColorsLine mixSubLight={mood.mainLamp} isMix={isMix} type={(mood.mainLamp.mode === gradientMode && !deviceTypeOption?.isCeilingLight) ? 'gradient' : 'separate'}/>
-        {(deviceTypeOption?.isMixLight || (isMix && !!mood.secondaryLamp.nodes.length)) &&  (
-          <>
-            <Spacer height={cx(7)} />
-            <MixMoodColorsLine mixSubLight={mood.secondaryLamp} isMix={isMix} type={mood.secondaryLamp.mode === (deviceTypeOption?.isMixLight ? MoodJumpGradientMode.SourceGradient : MoodJumpGradientMode.StripGradient) ? 'gradient' : 'separate'}/>
-          </>
-        )}
-        <Spacer height={cx(12)} />
-        <View style={styles.moodTypeItem}>
-          <View style={styles.moodTypeLabel}>
-            <Text style={styles.moodTypeLabelText}>
-              {I18n.getLang(
-                isDynamic ? 'mood_overview_field_chip_2' : 'mood_overview_field_chip_text'
-              )}
-            </Text>
-          </View>
-        </View>
-        <Spacer height={cx(16)} />
-      </View>
-    </Card>
-  );
-};
-
-export default withTheme(MoodItem)
-
-export function MixMoodColorsLine(props: { mixSubLight: MoodLampInfo; isMix: boolean, type: 'gradient' | 'separate' }) {
-  const { mixSubLight, isMix } = props;
-  const lightColors = !!(mixSubLight.enable && mixSubLight.nodes.length) ? mixSubLight.nodes?.map(n => {
-    const s = Math.round(mapFloatToRange(n.s / 100, 30, 100));
-    return n.isColorNode
-      ? hsv2Hex(n.h, s, Math.round(mapFloatToRange(n.v / 100, 50, 100)))
-      : cctToColor(n.colorTemp.toFixed());
-  }) : ['#eee'];
-
-  const styles = StyleSheet.create({
-    gradientItem: {
-      flexDirection: 'row',
-    },
-    gradientItemIconView: {
-      width: cx(24),
-      height: cx(24),
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: '#aaa',
-      borderRadius: cx(8),
-    },
-    gradientItemIcon: {
-      width: cx(16),
-      height: cx(16),
-      tintColor: '#fff',
-    },
-  })
-
-  return (
-    <View style={styles.gradientItem}>
-      <Spacer height={0} width={cx(16)} />
-      <MoodColorsLine
-        nodeStyle={{ borderColor: '#ccc', borderWidth: 1 }}
-        width={isMix ? cx(264) : undefined}
-        type={props.type}
-        colors={lightColors}
-      />
-      {isMix && (
-        <>
-          <Spacer height={0} width={cx(7)} />
-          <View style={styles.gradientItemIconView}>
-            <Image style={styles.gradientItemIcon} source={{uri: mixSubLight.enable ? res.light_on : res.light_off}} />
-          </View>
-        </>
-      )}
-    </View>
-  );
-}
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View, ViewProps, ViewStyle, Image, TouchableOpacity } from 'react-native';
+import { Utils } from 'tuya-panel-kit';
+import { hsv2Hex } from '@ledvance/base/src/utils';
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils';
+import { mapFloatToRange } from '@ledvance/base/src/utils';
+import Card from '@ledvance/base/src/components/Card';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine';
+import { MoodJumpGradientMode, MoodLampInfo, MoodUIInfo } from './Interface';
+import I18n from '@ledvance/base/src/i18n';
+import res from '@ledvance/base/src/res';
+import ThemeType from '@ledvance/base/src/config/themeType'
+
+const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
+
+interface LightCategory {
+  isMixLight?: boolean
+  isStripLight?: boolean
+  isStringLight?: boolean
+  isCeilingLight?: boolean
+}
+
+interface MoodItemProps extends ViewProps {
+  theme?: ThemeType
+  enable: boolean;
+  isMix: boolean;
+  mood: MoodUIInfo;
+  style?: ViewStyle;
+  deviceTypeOption?: LightCategory
+  onPress?: () => void;
+  onSwitch: (enable: boolean) => void;
+}
+
+const MoodItem = (props: MoodItemProps) => {
+  const { mood, isMix, deviceTypeOption } = props;
+  const isDynamic = useMemo(() => {
+    return mood.mainLamp.nodes?.length > 1 || mood.secondaryLamp.nodes?.length > 1;
+  }, [mood.mainLamp.nodes, mood.secondaryLamp.nodes]);
+
+  const gradientMode = useMemo(() => (
+    deviceTypeOption?.isStringLight ? MoodJumpGradientMode.StringGradient : deviceTypeOption?.isStripLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
+  ), [MoodJumpGradientMode, deviceTypeOption])
+
+
+  const styles = StyleSheet.create({
+    card: {
+      marginHorizontal: cx(24),
+    },
+    headline: {
+      flexDirection: 'row',
+      marginHorizontal: cx(16),
+      alignItems: 'center',
+    },
+    headText: {
+      flex: 1,
+      color: props.theme?.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      lineHeight: cx(20),
+    },
+    checkbox: {
+      width: cx(45),
+      height: cx(45),
+      marginTop: cx(-5),
+      marginBottom: cx(-10),
+      fontWeight: 'bold',
+    },
+    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}>{mood.name}</Text>
+          <TouchableOpacity style={styles.checkbox} onPress={() => props.onSwitch(!props.enable)}>
+            <Image source={{ uri: res.ic_check}} width={cx(44)} height={cx(44)} style={[styles.checkbox, { tintColor: props.enable ? props.theme?.icon.primary : props.theme?.icon.disable}]} />
+          </TouchableOpacity>
+        </View>
+        <Spacer />
+        <MixMoodColorsLine mixSubLight={mood.mainLamp} isMix={isMix} type={(mood.mainLamp.mode === gradientMode && !deviceTypeOption?.isCeilingLight) ? 'gradient' : 'separate'}/>
+        {(deviceTypeOption?.isMixLight || (isMix && !!mood.secondaryLamp.nodes.length)) &&  (
+          <>
+            <Spacer height={cx(7)} />
+            <MixMoodColorsLine mixSubLight={mood.secondaryLamp} isMix={isMix} type={mood.secondaryLamp.mode === (deviceTypeOption?.isMixLight ? MoodJumpGradientMode.SourceGradient : MoodJumpGradientMode.StripGradient) ? 'gradient' : 'separate'}/>
+          </>
+        )}
+        <Spacer height={cx(12)} />
+        <View style={styles.moodTypeItem}>
+          <View style={styles.moodTypeLabel}>
+            <Text style={styles.moodTypeLabelText}>
+              {I18n.getLang(
+                isDynamic ? 'mood_overview_field_chip_2' : 'mood_overview_field_chip_text'
+              )}
+            </Text>
+          </View>
+        </View>
+        <Spacer height={cx(16)} />
+      </View>
+    </Card>
+  );
+};
+
+export default withTheme(MoodItem)
+
+export function MixMoodColorsLine(props: { mixSubLight: MoodLampInfo; isMix: boolean, type: 'gradient' | 'separate' }) {
+  const { mixSubLight, isMix } = props;
+  const lightColors = !!(mixSubLight.enable && mixSubLight.nodes.length) ? mixSubLight.nodes?.map(n => {
+    const s = Math.round(mapFloatToRange(n.s / 100, 30, 100));
+    return n.isColorNode
+      ? hsv2Hex(n.h, s, Math.round(mapFloatToRange(n.v / 100, 50, 100)))
+      : cctToColor(n.colorTemp.toFixed());
+  }) : ['#eee'];
+
+  const styles = StyleSheet.create({
+    gradientItem: {
+      flexDirection: 'row',
+    },
+    gradientItemIconView: {
+      width: cx(24),
+      height: cx(24),
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: '#aaa',
+      borderRadius: cx(8),
+    },
+    gradientItemIcon: {
+      width: cx(16),
+      height: cx(16),
+      tintColor: '#fff',
+    },
+  })
+
+  return (
+    <View style={styles.gradientItem}>
+      <Spacer height={0} width={cx(16)} />
+      <MoodColorsLine
+        nodeStyle={{ borderColor: '#ccc', borderWidth: 1 }}
+        width={isMix ? cx(264) : undefined}
+        type={props.type}
+        colors={lightColors}
+      />
+      {isMix && (
+        <>
+          <Spacer height={0} width={cx(7)} />
+          <View style={styles.gradientItemIconView}>
+            <Image style={styles.gradientItemIcon} source={{uri: mixSubLight.enable ? res.light_on : res.light_off}} />
+          </View>
+        </>
+      )}
+    </View>
+  );
+}