@ledvance/ui-biz-bundle 1.1.70 → 1.1.72

package/src/newModules/mood/MoodItem.tsx

@@ -1,160 +1,160 @@
-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';
-
-const cx = Utils.RatioUtils.convertX;
-
-interface LightCategory {
-  isMixLight?: boolean
-  isStripLight?: boolean
-  isStringLight?: boolean
-  isCeilingLight?: boolean
-}
-
-interface MoodItemProps extends ViewProps {
-  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 || deviceTypeOption?.isCeilingLight) ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
- ), [MoodJumpGradientMode, deviceTypeOption])
-
-  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 ? 'gradient' : 'separate'}/>
-        {(isMix && !!mood.secondaryLamp.nodes.length) &&  (
-          <>
-            <Spacer height={cx(7)} />
-            <MixMoodColorsLine mixSubLight={mood.secondaryLamp} isMix={isMix} type={mood.secondaryLamp.mode === gradientMode ? '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 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 => {
-    return n.isColorNode
-      ? hsv2Hex(n.h, Math.round(n.s), Math.round(mapFloatToRange(n.v / 100, 50, 100)))
-      : cctToColor(n.colorTemp.toFixed());
-  }) : ['#eee'];
-  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={mixSubLight.enable ? res.light_on : res.light_off} />
-          </View>
-        </>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    marginHorizontal: cx(24),
-  },
-  headline: {
-    flexDirection: 'row',
-    marginHorizontal: cx(16),
-  },
-  headText: {
-    flex: 1,
-    color: '#000',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    lineHeight: cx(20),
-  },
-  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',
-  },
-  gradient: {
-    borderRadius: cx(8),
-  },
-  moodTypeItem: {
-    flexDirection: 'row',
-  },
-  moodTypeLabel: {
-    marginStart: cx(16),
-    paddingHorizontal: cx(12.5),
-    backgroundColor: '#E6E7E8',
-    borderRadius: cx(8),
-  },
-  moodTypeLabelText: {
-    height: cx(16),
-    color: '#000000DD',
-    fontSize: cx(10),
-    textAlignVertical: 'center',
-    fontFamily: 'helvetica_neue_lt_std_roman',
-    lineHeight: cx(16),
-  },
-});
+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';
+
+const cx = Utils.RatioUtils.convertX;
+
+interface LightCategory {
+  isMixLight?: boolean
+  isStripLight?: boolean
+  isStringLight?: boolean
+  isCeilingLight?: boolean
+}
+
+interface MoodItemProps extends ViewProps {
+  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])
+
+  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'}/>
+        {(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 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 => {
+    return n.isColorNode
+      ? hsv2Hex(n.h, Math.round(n.s), Math.round(mapFloatToRange(n.v / 100, 50, 100)))
+      : cctToColor(n.colorTemp.toFixed());
+  }) : ['#eee'];
+  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={mixSubLight.enable ? res.light_on : res.light_off} />
+          </View>
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    marginHorizontal: cx(24),
+  },
+  headline: {
+    flexDirection: 'row',
+    marginHorizontal: cx(16),
+  },
+  headText: {
+    flex: 1,
+    color: '#000',
+    fontSize: cx(16),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+    lineHeight: cx(20),
+  },
+  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',
+  },
+  gradient: {
+    borderRadius: cx(8),
+  },
+  moodTypeItem: {
+    flexDirection: 'row',
+  },
+  moodTypeLabel: {
+    marginStart: cx(16),
+    paddingHorizontal: cx(12.5),
+    backgroundColor: '#E6E7E8',
+    borderRadius: cx(8),
+  },
+  moodTypeLabelText: {
+    height: cx(16),
+    color: '#000000DD',
+    fontSize: cx(10),
+    textAlignVertical: 'center',
+    fontFamily: 'helvetica_neue_lt_std_roman',
+    lineHeight: cx(16),
+  },
+});