@ledvance/ui-biz-bundle 1.1.69 → 1.1.71

package/src/newModules/timeSchedule/components/ManuaSettings.tsx

@@ -1,460 +1,460 @@
-import React, { memo, useMemo } from 'react';
-import { CeilingLightData, DeviceType, directOptions, ManualSettingProps, modeOptions, StripLightData } from '../Interface';
-import { View } from 'react-native';
-import Card from '@ledvance/base/src/components/Card';
-import LampAdjustView from '@ledvance/base/src/components/LampAdjustView';
-import { Utils } from 'tuya-panel-kit';
-import { useCreation, useReactive, useUpdateEffect } from 'ahooks';
-import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
-import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView';
-import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
-import I18n from '@ledvance/base/src/i18n';
-import StripAdjustView from '@ledvance/base/src/components/StripAdjustView';
-import Spacer from '@ledvance/base/src/components/Spacer';
-import { FanAdjustViewContent } from '@ledvance/base/src/components/FanAdjustView';
-import SocketItem from '@ledvance/base/src/components/SocketItem'
-import res from '@ledvance/base/src/res';
-const { convertX: cx } = Utils.RatioUtils;
-const { withTheme } = Utils.ThemeUtils
-
-const PowerStripIcon = [res.switch_1, res.switch_2, res.switch_3, res.switch_4]
-
-function ManualSettings(props: ManualSettingProps) {
-  const state = useReactive({
-    deviceData: props.manualData.deviceData,
-    applyForList: props.applyForList,
-    applyFlag: Symbol(),
-    manualFlag: Symbol()
-  });
-
-  useUpdateEffect(() => {
-    state.applyForList = props.applyForList;
-    state.deviceData = props.manualData.deviceData;
-  }, [props.applyForList, props.manualData]);
-
-  useUpdateEffect(() => {
-    props.onApplyChange && props.onApplyChange(state.applyForList)
-  }, [state.applyFlag])
-
-  useUpdateEffect(() => {
-    props.onManualChange && props.onManualChange(state.deviceData)
-  }, [state.manualFlag])
-
-  const tabList = useCreation(() => {
-    const isSupportWhite = props.isSupportBrightness || props.isSupportTemperature;
-    const tabs = [
-      { key: 1, title: I18n.getLang('add_new_static_mood_lights_schedule_switch_tab_color_text') },
-      { key: 0, title: I18n.getLang('add_new_static_mood_lights_schedule_switch_tab_white_text') },
-      {
-        key: 3,
-        title: I18n.getLang(
-          'add_new_dynamic_mood_strip_lights_schedule_switch_tab_combination_text'
-        ),
-      },
-    ];
-    if (props.isCeilingLight) {
-      return tabs.filter(tab => tab.key !== 0)
-    }
-    if (!isSupportWhite) {
-      return tabs.filter(tab => tab.key !== 0);
-    }
-    if (!props.isSupportColor) {
-      return tabs.filter(tab => tab.key === 0);
-    }
-    return tabs;
-  }, []);
-
-  const lightSourceCard = useMemo(() => {
-    const { deviceData } = state;
-    return (
-      <View>
-        {state.applyForList.map((item, idx) => (
-          <View key={item.dp}>
-            <Card style={{ marginHorizontal: cx(24) }}>
-              <LdvSwitch
-                title={item.key}
-                color={props.theme.card.background}
-                colorAlpha={1}
-                enable={item.enable}
-                setEnable={(enable: boolean) => {
-                  state.applyForList = state.applyForList.map((apply, index) => {
-                    if (idx === index) {
-                      return {
-                        ...apply,
-                        enable,
-                      };
-                    }
-                    return apply;
-                  });
-                  state.applyFlag = Symbol()
-                }}
-              />
-              {item.enable && (item.type !== 'socket' && item.type !== 'fan') && (
-                <LampAdjustView
-                  isSupportColor={props.isSupportColor}
-                  isSupportBrightness={props.isSupportBrightness}
-                  isSupportTemperature={props.isSupportTemperature}
-                  isColorMode={deviceData.isColorMode}
-                  setIsColorMode={mode => {
-                    state.deviceData = {
-                      ...state.deviceData,
-                      isColorMode: mode,
-                    };
-                    state.manualFlag = Symbol()
-                  }}
-                  reserveSV={true}
-                  h={deviceData.h}
-                  s={deviceData.s}
-                  v={deviceData.v}
-                  brightness={deviceData.brightness}
-                  colorTemp={deviceData.temperature}
-                  onHSVChangeComplete={(h, s, v) => {
-                    state.deviceData = {
-                      ...state.deviceData,
-                      h,
-                      s,
-                      v,
-                    };
-                    state.manualFlag = Symbol()
-                  }}
-                  onBrightnessChangeComplete={bright => {
-                    state.deviceData = {
-                      ...state.deviceData,
-                      brightness: bright
-                    }
-                    state.manualFlag = Symbol()
-                  }}
-                  onCCTChangeComplete={cct => {
-                    state.deviceData = {
-                      ...state.deviceData,
-                      temperature: cct
-                    }
-                    state.manualFlag = Symbol()
-                  }}
-                />
-              )}
-
-              {item.enable && item.type === 'fan' && (
-                <FanAdjustViewContent
-                  hideEnable={true}
-                  fanEnable={item.enable}
-                  maxFanSpeed={props.isUVCFan ? 20 : 3}
-                  isSupportDirection={props.isUVCFan}
-                  isSupportDisinfect={props.isUVCFan}
-                  isSupportMode={props.isUVCFan}
-                  directValue={''}
-                  disinfect={true}
-                  modeValue={''}
-                  directOptions={directOptions}
-                  modeOptions={modeOptions}
-                  directChange={(direction: any) => {
-                    state.deviceData = {
-                      ...state.deviceData,
-                      direction
-                    }
-                    state.manualFlag = Symbol()
-                  }}
-                  modeChange={(mode: any) => {
-                    state.deviceData = {
-                      ...state.deviceData,
-                      mode
-                    }
-                    state.manualFlag = Symbol()
-                  }}
-                  disinfectChange={(disinfect: any) => {
-                    state.deviceData = {
-                      ...state.deviceData,
-                      disinfect
-                    }
-                    state.manualFlag = Symbol()
-                  }}
-                  // @ts-ignore
-                  fanSpeed={deviceData.fanSpeed}
-                  onFanSwitch={() => { }}
-                  onFanSpeedChangeComplete={(fanSpeed) => {
-                    state.deviceData = {
-                      ...state.deviceData,
-                      fanSpeed
-                    }
-                    state.manualFlag = Symbol()
-                  }}
-                />
-              )}
-            </Card>
-            <Spacer />
-          </View>
-        ))}
-      </View>
-    );
-  }, [state.deviceData, state.applyForList, props.theme.type]);
-
-  const mixLightCard = useMemo(() => {
-    return (
-      <View>
-        {state.applyForList.map((item, idx) => (
-          <View key={item.dp}>
-            <Card style={{ marginHorizontal: cx(24) }}>
-              <LdvSwitch
-                title={item.key}
-                color={props.theme.card.background}
-                colorAlpha={1}
-                enable={item.enable}
-                setEnable={(enable: boolean) => {
-                  state.applyForList[idx].enable = enable;
-                  state.applyFlag = Symbol()
-                }}
-              />
-              {item.enable &&
-                (item.type === 'mainLight' ? (
-                  <View>
-                    <ColorTempAdjustView
-                      isSupportBrightness={props.isSupportBrightness}
-                      isSupportTemperature={props.isSupportTemperature}
-                      colorTemp={state.deviceData.temperature}
-                      brightness={state.deviceData.brightness}
-                      onBrightnessChangeComplete={bright => {
-                        state.deviceData.brightness = bright;
-                        state.manualFlag = Symbol()
-                      }}
-                      onCCTChangeComplete={cct => {
-                        state.deviceData.temperature = cct;
-                        state.manualFlag = Symbol()
-                      }}
-                    />
-                    <Spacer height={cx(16)} />
-                  </View>
-                ) : (
-                  <View>
-                    <ColorAdjustView
-                      h={state.deviceData.h}
-                      s={state.deviceData.s}
-                      v={state.deviceData.v}
-                      reserveSV={true}
-                      minSaturation={1}
-                      onHSVChangeComplete={(h, s, v) => {
-                        state.deviceData.h = h;
-                        state.deviceData.s = s;
-                        state.deviceData.v = v;
-                        state.manualFlag = Symbol()
-                      }}
-                    />
-                    <Spacer />
-                  </View>
-                ))}
-            </Card>
-            <Spacer />
-          </View>
-        ))}
-      </View>
-    );
-  }, [state.deviceData, state.applyForList, props.theme.type]);
-
-  const stripLightCard = useMemo(() => {
-    const deviceData = state.deviceData as StripLightData
-    return (
-      <View>
-        <Card>
-          <LdvSwitch
-            title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-            color={props.theme.card.background}
-            colorAlpha={1}
-            enable={state.applyForList[0]?.enable}
-            setEnable={(enable: boolean) => {
-              state.applyForList[0].enable = enable;
-              state.applyFlag = Symbol()
-            }}
-          />
-          {state.applyForList[0]?.enable && (
-            <StripAdjustView
-              isSupportBrightness={props.isSupportBrightness}
-              isSupportTemperature={props.isSupportTemperature}
-              lampTabs={tabList}
-              reserveSV={true}
-              activeKey={deviceData.activeKey}
-              colorDiskActiveKey={deviceData.colorDiskActiveKey}
-              onActiveKeyChange={(activekey) => {
-                state.deviceData = {
-                  ...state.deviceData,
-                  activeKey: Number(activekey),
-                  isColorMode: !(Number(activekey) === 0)
-                }
-                state.manualFlag = Symbol()
-              }}
-              onColorDiskChange={(colors, idx) => {
-                state.deviceData = {
-                  ...state.deviceData,
-                  colors,
-                  colorDiskActiveKey: idx
-                }
-                state.manualFlag = Symbol()
-              }}
-              h={state.deviceData.h}
-              s={state.deviceData.s}
-              v={state.deviceData.v}
-              brightness={state.deviceData.brightness}
-              colorTemp={state.deviceData.temperature}
-              onHSVChangeComplete={(h, s, v) => {
-                state.deviceData.h = h;
-                state.deviceData.s = s;
-                state.deviceData.v = v;
-                state.manualFlag = Symbol()
-              }}
-              onBrightnessChangeComplete={bright => {
-                state.deviceData.brightness = bright;
-                state.manualFlag = Symbol()
-              }}
-              onCCTChangeComplete={cct => {
-                state.deviceData.temperature = cct;
-                state.manualFlag = Symbol()
-              }}
-            />
-          )}
-        </Card>
-        <Spacer />
-      </View>
-    );
-  }, [state.deviceData, state.applyForList, props.theme.type]);
-
-  const ceilingLightCard = useMemo(() => {
-    const deviceData = state.deviceData as CeilingLightData
-    return (
-      <View>
-        {state.applyForList.map((item, idx) => (
-          <View key={item.dp}>
-            <Card style={{ marginHorizontal: cx(24) }}>
-              <LdvSwitch
-                title={item.key}
-                color={'#fff'}
-                colorAlpha={1}
-                enable={item.enable}
-                setEnable={(enable: boolean) => {
-                  state.applyForList[idx].enable = enable;
-                  state.applyFlag = Symbol()
-                }}
-              />
-              {item.enable &&
-                (item.type === 'mainLight' ? (
-                  <View>
-                    <ColorTempAdjustView
-                      isSupportBrightness={props.isSupportBrightness}
-                      isSupportTemperature={props.isSupportTemperature}
-                      colorTemp={deviceData.temperature}
-                      brightness={deviceData.brightness}
-                      onBrightnessChangeComplete={bright => {
-                        state.deviceData.brightness = bright;
-                        state.manualFlag = Symbol()
-                      }}
-                      onCCTChangeComplete={cct => {
-                        state.deviceData.temperature = cct;
-                        state.manualFlag = Symbol()
-                      }}
-                    />
-                    <Spacer height={cx(16)} />
-                  </View>
-                ) : (
-                  <View>
-                    <StripAdjustView
-                      isSupportBrightness={false}
-                      isSupportTemperature={false}
-                      lampTabs={tabList}
-                      reserveSV={true}
-                      activeKey={deviceData.activeKey}
-                      colorDiskActiveKey={deviceData.colorDiskActiveKey}
-                      onActiveKeyChange={(activekey) => {
-                        state.deviceData = {
-                          ...state.deviceData,
-                          activeKey: Number(activekey)
-                        }
-                        state.manualFlag = Symbol()
-                      }}
-                      onColorDiskChange={(colors, idx) => {
-                        state.deviceData = {
-                          ...state.deviceData,
-                          colors,
-                          colorDiskActiveKey: idx
-                        }
-                        state.manualFlag = Symbol()
-                      }}
-                      h={deviceData.h}
-                      s={deviceData.s}
-                      v={deviceData.v}
-                      brightness={deviceData.brightness}
-                      colorTemp={deviceData.temperature}
-                      onHSVChangeComplete={(h, s, v) => {
-                        state.deviceData.h = h;
-                        state.deviceData.s = s;
-                        state.deviceData.v = v;
-                        state.manualFlag = Symbol()
-                      }}
-                      onBrightnessChangeComplete={bright => {
-                        state.deviceData.brightness = bright;
-                        state.manualFlag = Symbol()
-                      }}
-                      onCCTChangeComplete={cct => {
-                        state.deviceData.temperature = cct;
-                        state.manualFlag = Symbol()
-                      }}
-                    />
-                    <Spacer />
-                  </View>
-                ))}
-              <Spacer height={cx(16)} />
-            </Card>
-            <Spacer />
-          </View>
-        ))}
-      </View>
-    )
-  }, [state.deviceData, state.applyForList])
-
-  const powerStripCard = useMemo(() => {
-    return (
-      <View>
-        {state.applyForList.map((item, idx) => (
-          <View key={item.dp}>
-            <SocketItem
-              title={item.key}
-              name={item.name!}
-              icon={{ uri: PowerStripIcon[item.index ?? 0] }}
-              disabledEdit={true}
-              onNameChange={() => { }}
-              enabled={item.enable}
-              onSwitchChange={async enable => {
-                state.applyForList = state.applyForList.map((apply, index) => {
-                  if (idx === index) {
-                    return {
-                      ...apply,
-                      enable,
-                    };
-                  }
-                  return apply;
-                });
-                state.applyFlag = Symbol()
-              }}
-            />
-            <Spacer />
-          </View>
-        ))}
-      </View>
-    )
-  }, [state.deviceData, state.applyForList])
-
-  const componentRender = useMemo(() => {
-    const component =
-      props.manualData.type === DeviceType.MixLight
-        ? mixLightCard
-        : props.manualData.type === DeviceType.StripLight
-          ? stripLightCard
-          : props.manualData.type === DeviceType.CeilingLight
-            ? ceilingLightCard
-            : props.manualData.type === DeviceType.PowerStrip
-              ? powerStripCard
-              : lightSourceCard;
-    return component;
-  }, [props.manualData, state.applyForList, state.deviceData, props.theme.type]);
-
-
-  return <View>{componentRender}</View>;
-}
-
-export default memo(withTheme(ManualSettings))
+import React, { memo, useMemo } from 'react';
+import { CeilingLightData, DeviceType, directOptions, ManualSettingProps, modeOptions, StripLightData } from '../Interface';
+import { View } from 'react-native';
+import Card from '@ledvance/base/src/components/Card';
+import LampAdjustView from '@ledvance/base/src/components/LampAdjustView';
+import { Utils } from 'tuya-panel-kit';
+import { useCreation, useReactive, useUpdateEffect } from 'ahooks';
+import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
+import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView';
+import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
+import I18n from '@ledvance/base/src/i18n';
+import StripAdjustView from '@ledvance/base/src/components/StripAdjustView';
+import Spacer from '@ledvance/base/src/components/Spacer';
+import { FanAdjustViewContent } from '@ledvance/base/src/components/FanAdjustView';
+import SocketItem from '@ledvance/base/src/components/SocketItem'
+import res from '@ledvance/base/src/res';
+const { convertX: cx } = Utils.RatioUtils;
+const { withTheme } = Utils.ThemeUtils
+
+const PowerStripIcon = [res.switch_1, res.switch_2, res.switch_3, res.switch_4]
+
+function ManualSettings(props: ManualSettingProps) {
+  const state = useReactive({
+    deviceData: props.manualData.deviceData,
+    applyForList: props.applyForList,
+    applyFlag: Symbol(),
+    manualFlag: Symbol()
+  });
+
+  useUpdateEffect(() => {
+    state.applyForList = props.applyForList;
+    state.deviceData = props.manualData.deviceData;
+  }, [props.applyForList, props.manualData]);
+
+  useUpdateEffect(() => {
+    props.onApplyChange && props.onApplyChange(state.applyForList)
+  }, [state.applyFlag])
+
+  useUpdateEffect(() => {
+    props.onManualChange && props.onManualChange(state.deviceData)
+  }, [state.manualFlag])
+
+  const tabList = useCreation(() => {
+    const isSupportWhite = props.isSupportBrightness || props.isSupportTemperature;
+    const tabs = [
+      { key: 1, title: I18n.getLang('add_new_static_mood_lights_schedule_switch_tab_color_text') },
+      { key: 0, title: I18n.getLang('add_new_static_mood_lights_schedule_switch_tab_white_text') },
+      {
+        key: 3,
+        title: I18n.getLang(
+          'add_new_dynamic_mood_strip_lights_schedule_switch_tab_combination_text'
+        ),
+      },
+    ];
+    if (props.isCeilingLight) {
+      return tabs.filter(tab => tab.key !== 0)
+    }
+    if (!isSupportWhite) {
+      return tabs.filter(tab => tab.key !== 0);
+    }
+    if (!props.isSupportColor) {
+      return tabs.filter(tab => tab.key === 0);
+    }
+    return tabs;
+  }, []);
+
+  const lightSourceCard = useMemo(() => {
+    const { deviceData } = state;
+    return (
+      <View>
+        {state.applyForList.map((item, idx) => (
+          <View key={item.dp}>
+            <Card style={{ marginHorizontal: cx(24) }}>
+              <LdvSwitch
+                title={item.key}
+                color={props.theme.card.background}
+                colorAlpha={1}
+                enable={item.enable}
+                setEnable={(enable: boolean) => {
+                  state.applyForList = state.applyForList.map((apply, index) => {
+                    if (idx === index) {
+                      return {
+                        ...apply,
+                        enable,
+                      };
+                    }
+                    return apply;
+                  });
+                  state.applyFlag = Symbol()
+                }}
+              />
+              {item.enable && (item.type !== 'socket' && item.type !== 'fan') && (
+                <LampAdjustView
+                  isSupportColor={props.isSupportColor}
+                  isSupportBrightness={props.isSupportBrightness}
+                  isSupportTemperature={props.isSupportTemperature}
+                  isColorMode={deviceData.isColorMode}
+                  setIsColorMode={mode => {
+                    state.deviceData = {
+                      ...state.deviceData,
+                      isColorMode: mode,
+                    };
+                    state.manualFlag = Symbol()
+                  }}
+                  reserveSV={true}
+                  h={deviceData.h}
+                  s={deviceData.s}
+                  v={deviceData.v}
+                  brightness={deviceData.brightness}
+                  colorTemp={deviceData.temperature}
+                  onHSVChangeComplete={(h, s, v) => {
+                    state.deviceData = {
+                      ...state.deviceData,
+                      h,
+                      s,
+                      v,
+                    };
+                    state.manualFlag = Symbol()
+                  }}
+                  onBrightnessChangeComplete={bright => {
+                    state.deviceData = {
+                      ...state.deviceData,
+                      brightness: bright
+                    }
+                    state.manualFlag = Symbol()
+                  }}
+                  onCCTChangeComplete={cct => {
+                    state.deviceData = {
+                      ...state.deviceData,
+                      temperature: cct
+                    }
+                    state.manualFlag = Symbol()
+                  }}
+                />
+              )}
+
+              {item.enable && item.type === 'fan' && (
+                <FanAdjustViewContent
+                  hideEnable={true}
+                  fanEnable={item.enable}
+                  maxFanSpeed={props.isUVCFan ? 20 : 3}
+                  isSupportDirection={props.isUVCFan}
+                  isSupportDisinfect={props.isUVCFan}
+                  isSupportMode={props.isUVCFan}
+                  directValue={''}
+                  disinfect={true}
+                  modeValue={''}
+                  directOptions={directOptions}
+                  modeOptions={modeOptions}
+                  directChange={(direction: any) => {
+                    state.deviceData = {
+                      ...state.deviceData,
+                      direction
+                    }
+                    state.manualFlag = Symbol()
+                  }}
+                  modeChange={(mode: any) => {
+                    state.deviceData = {
+                      ...state.deviceData,
+                      mode
+                    }
+                    state.manualFlag = Symbol()
+                  }}
+                  disinfectChange={(disinfect: any) => {
+                    state.deviceData = {
+                      ...state.deviceData,
+                      disinfect
+                    }
+                    state.manualFlag = Symbol()
+                  }}
+                  // @ts-ignore
+                  fanSpeed={deviceData.fanSpeed}
+                  onFanSwitch={() => { }}
+                  onFanSpeedChangeComplete={(fanSpeed) => {
+                    state.deviceData = {
+                      ...state.deviceData,
+                      fanSpeed
+                    }
+                    state.manualFlag = Symbol()
+                  }}
+                />
+              )}
+            </Card>
+            <Spacer />
+          </View>
+        ))}
+      </View>
+    );
+  }, [state.deviceData, state.applyForList, props.theme.type]);
+
+  const mixLightCard = useMemo(() => {
+    return (
+      <View>
+        {state.applyForList.map((item, idx) => (
+          <View key={item.dp}>
+            <Card style={{ marginHorizontal: cx(24) }}>
+              <LdvSwitch
+                title={item.key}
+                color={props.theme.card.background}
+                colorAlpha={1}
+                enable={item.enable}
+                setEnable={(enable: boolean) => {
+                  state.applyForList[idx].enable = enable;
+                  state.applyFlag = Symbol()
+                }}
+              />
+              {item.enable &&
+                (item.type === 'mainLight' ? (
+                  <View>
+                    <ColorTempAdjustView
+                      isSupportBrightness={props.isSupportBrightness}
+                      isSupportTemperature={props.isSupportTemperature}
+                      colorTemp={state.deviceData.temperature}
+                      brightness={state.deviceData.brightness}
+                      onBrightnessChangeComplete={bright => {
+                        state.deviceData.brightness = bright;
+                        state.manualFlag = Symbol()
+                      }}
+                      onCCTChangeComplete={cct => {
+                        state.deviceData.temperature = cct;
+                        state.manualFlag = Symbol()
+                      }}
+                    />
+                    <Spacer height={cx(16)} />
+                  </View>
+                ) : (
+                  <View>
+                    <ColorAdjustView
+                      h={state.deviceData.h}
+                      s={state.deviceData.s}
+                      v={state.deviceData.v}
+                      reserveSV={true}
+                      minSaturation={1}
+                      onHSVChangeComplete={(h, s, v) => {
+                        state.deviceData.h = h;
+                        state.deviceData.s = s;
+                        state.deviceData.v = v;
+                        state.manualFlag = Symbol()
+                      }}
+                    />
+                    <Spacer />
+                  </View>
+                ))}
+            </Card>
+            <Spacer />
+          </View>
+        ))}
+      </View>
+    );
+  }, [state.deviceData, state.applyForList, props.theme.type]);
+
+  const stripLightCard = useMemo(() => {
+    const deviceData = state.deviceData as StripLightData
+    return (
+      <View>
+        <Card>
+          <LdvSwitch
+            title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
+            color={props.theme.card.background}
+            colorAlpha={1}
+            enable={state.applyForList[0]?.enable}
+            setEnable={(enable: boolean) => {
+              state.applyForList[0].enable = enable;
+              state.applyFlag = Symbol()
+            }}
+          />
+          {state.applyForList[0]?.enable && (
+            <StripAdjustView
+              isSupportBrightness={props.isSupportBrightness}
+              isSupportTemperature={props.isSupportTemperature}
+              lampTabs={tabList}
+              reserveSV={true}
+              activeKey={deviceData.activeKey}
+              colorDiskActiveKey={deviceData.colorDiskActiveKey}
+              onActiveKeyChange={(activekey) => {
+                state.deviceData = {
+                  ...state.deviceData,
+                  activeKey: Number(activekey),
+                  isColorMode: !(Number(activekey) === 0)
+                }
+                state.manualFlag = Symbol()
+              }}
+              onColorDiskChange={(colors, idx) => {
+                state.deviceData = {
+                  ...state.deviceData,
+                  colors,
+                  colorDiskActiveKey: idx
+                }
+                state.manualFlag = Symbol()
+              }}
+              h={state.deviceData.h}
+              s={state.deviceData.s}
+              v={state.deviceData.v}
+              brightness={state.deviceData.brightness}
+              colorTemp={state.deviceData.temperature}
+              onHSVChangeComplete={(h, s, v) => {
+                state.deviceData.h = h;
+                state.deviceData.s = s;
+                state.deviceData.v = v;
+                state.manualFlag = Symbol()
+              }}
+              onBrightnessChangeComplete={bright => {
+                state.deviceData.brightness = bright;
+                state.manualFlag = Symbol()
+              }}
+              onCCTChangeComplete={cct => {
+                state.deviceData.temperature = cct;
+                state.manualFlag = Symbol()
+              }}
+            />
+          )}
+        </Card>
+        <Spacer />
+      </View>
+    );
+  }, [state.deviceData, state.applyForList, props.theme.type]);
+
+  const ceilingLightCard = useMemo(() => {
+    const deviceData = state.deviceData as CeilingLightData
+    return (
+      <View>
+        {state.applyForList.map((item, idx) => (
+          <View key={item.dp}>
+            <Card style={{ marginHorizontal: cx(24) }}>
+              <LdvSwitch
+                title={item.key}
+                color={'#fff'}
+                colorAlpha={1}
+                enable={item.enable}
+                setEnable={(enable: boolean) => {
+                  state.applyForList[idx].enable = enable;
+                  state.applyFlag = Symbol()
+                }}
+              />
+              {item.enable &&
+                (item.type === 'mainLight' ? (
+                  <View>
+                    <ColorTempAdjustView
+                      isSupportBrightness={props.isSupportBrightness}
+                      isSupportTemperature={props.isSupportTemperature}
+                      colorTemp={deviceData.temperature}
+                      brightness={deviceData.brightness}
+                      onBrightnessChangeComplete={bright => {
+                        state.deviceData.brightness = bright;
+                        state.manualFlag = Symbol()
+                      }}
+                      onCCTChangeComplete={cct => {
+                        state.deviceData.temperature = cct;
+                        state.manualFlag = Symbol()
+                      }}
+                    />
+                    <Spacer height={cx(16)} />
+                  </View>
+                ) : (
+                  <View>
+                    <StripAdjustView
+                      isSupportBrightness={false}
+                      isSupportTemperature={false}
+                      lampTabs={tabList}
+                      reserveSV={true}
+                      activeKey={deviceData.activeKey}
+                      colorDiskActiveKey={deviceData.colorDiskActiveKey}
+                      onActiveKeyChange={(activekey) => {
+                        state.deviceData = {
+                          ...state.deviceData,
+                          activeKey: Number(activekey)
+                        }
+                        state.manualFlag = Symbol()
+                      }}
+                      onColorDiskChange={(colors, idx) => {
+                        state.deviceData = {
+                          ...state.deviceData,
+                          colors,
+                          colorDiskActiveKey: idx
+                        }
+                        state.manualFlag = Symbol()
+                      }}
+                      h={deviceData.h}
+                      s={deviceData.s}
+                      v={deviceData.v}
+                      brightness={deviceData.brightness}
+                      colorTemp={deviceData.temperature}
+                      onHSVChangeComplete={(h, s, v) => {
+                        state.deviceData.h = h;
+                        state.deviceData.s = s;
+                        state.deviceData.v = v;
+                        state.manualFlag = Symbol()
+                      }}
+                      onBrightnessChangeComplete={bright => {
+                        state.deviceData.brightness = bright;
+                        state.manualFlag = Symbol()
+                      }}
+                      onCCTChangeComplete={cct => {
+                        state.deviceData.temperature = cct;
+                        state.manualFlag = Symbol()
+                      }}
+                    />
+                    <Spacer />
+                  </View>
+                ))}
+              <Spacer height={cx(16)} />
+            </Card>
+            <Spacer />
+          </View>
+        ))}
+      </View>
+    )
+  }, [state.deviceData, state.applyForList])
+
+  const powerStripCard = useMemo(() => {
+    return (
+      <View>
+        {state.applyForList.map((item, idx) => (
+          <View key={item.dp}>
+            <SocketItem
+              title={item.key}
+              name={item.name!}
+              icon={{ uri: PowerStripIcon[item.index ?? 0] }}
+              disabledEdit={true}
+              onNameChange={() => { }}
+              enabled={item.enable}
+              onSwitchChange={async enable => {
+                state.applyForList = state.applyForList.map((apply, index) => {
+                  if (idx === index) {
+                    return {
+                      ...apply,
+                      enable,
+                    };
+                  }
+                  return apply;
+                });
+                state.applyFlag = Symbol()
+              }}
+            />
+            <Spacer />
+          </View>
+        ))}
+      </View>
+    )
+  }, [state.deviceData, state.applyForList])
+
+  const componentRender = useMemo(() => {
+    const component =
+      props.manualData.type === DeviceType.MixLight
+        ? mixLightCard
+        : props.manualData.type === DeviceType.StripLight
+          ? stripLightCard
+          : props.manualData.type === DeviceType.CeilingLight
+            ? ceilingLightCard
+            : props.manualData.type === DeviceType.PowerStrip
+              ? powerStripCard
+              : lightSourceCard;
+    return component;
+  }, [props.manualData, state.applyForList, state.deviceData, props.theme.type]);
+
+
+  return <View>{componentRender}</View>;
+}
+
+export default memo(withTheme(ManualSettings))