@ledvance/ui-biz-bundle 1.1.4 → 1.1.7

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.1.4",
+  "version": "1.1.7",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",

package/src/modules/flags/FlagActions.ts

@@ -0,0 +1,205 @@
+import { useDps } from "@ledvance/base/src/models/modules/NativePropsSlice";
+import { FlagPageProps } from "./FlagPage";
+import { SceneNodeTransitionMode } from "@ledvance/ui-biz-bundle/src/modules/scene/SceneInfo";
+import { WORK_MODE, parseJSON } from "@tuya/tuya-panel-lamp-sdk/lib/utils";
+import { cloneDeep } from "lodash";
+import { FlagItemInfo, FlagUiInfo, defFlagList } from "./FlagInfo";
+import { hex2Int } from "@ledvance/base/src/utils/common";
+import { spliceByStep } from "@ledvance/base/src/utils/common";
+import { useMemo, useState } from "react";
+import { useUpdateEffect } from "ahooks";
+import { NativeApi } from "@ledvance/base/src/api/native";
+import { hsv2Hex } from "@ledvance/base/src/utils";
+
+export interface ExtraParams extends FlagPageProps, FlagOption {
+}
+interface FlagState {
+  id?: number
+  colors?: string[]
+}
+const featureId = 'Flag_data'
+
+type UseFlagType = (flagCode: string, extra: ExtraParams) => [FlagState, (flagItem: FlagItemInfo) => Promise<any>]
+
+export const useFlag: UseFlagType = (flagCode, extra) => {
+  const [dps, setDps] = useDps()
+  const dp = dps[flagCode]
+  const memoId = useMemo(() => {
+    if (extra.drawToolLight) {
+      return {
+        colors: extra.drawToolLight.drawToolDp2Obj(dp)
+      }
+    }
+    return {
+      id: dp2Obj(dp, extra)?.id
+    }
+  }, [])
+  const [flagState, setFlagState] = useState(memoId)
+
+  useUpdateEffect(() => {
+    if (extra.drawToolLight) {
+      setFlagState({
+        colors: extra.drawToolLight.drawToolDp2Obj(dp)
+      })
+    } else {
+      setFlagState({
+        id: dp2Obj(dp, extra)?.id
+      })
+    }
+  }, [dp])
+
+
+  const setFlagFn = (flagItem: FlagItemInfo) => {
+    if (extra.drawToolLight) {
+      const hex = extra.drawToolLight.drawToolObj2dp(flagItem.colors.map(item => hsv2Hex(item.h, item.s, item.v)))
+      return setDps({ [flagCode]: hex })
+    } else {
+      const hex = obj2Dp(flagItem, extra)
+      return setDps({ [flagCode]: hex, [extra.workModeCode]: WORK_MODE.SCENE })
+    }
+  }
+  return [flagState, setFlagFn]
+}
+
+export interface FlagOption {
+  isFan?: boolean
+  isUVCFan?: boolean
+  isMixLight?: boolean
+  workModeCode: string
+}
+
+export function obj2Dp(flagItem: FlagItemInfo, option?: FlagOption): string {
+  let fanEnableHex = ''
+  let fanSpeedHex = ''
+  const version = '00'
+  const idHex = flagItem.id.toString(16).padStart(2, '0')
+  if (option?.isMixLight) {
+    const whiteEnable = '01'
+    const whiteNum = '01'
+    const whiteStatus = '02'
+    const whiteHex = whiteEnable + whiteNum + whiteStatus + flagItem.whiteColors.map(colors => {
+      const speed = '00'
+      const mode = '00'
+      const bHex = (colors.brightness * 10).toString(16).padStart(4, '0')
+      const tHex = (colors.colorTemp * 10).toString(16).padStart(4, '0')
+      return speed + speed + mode + bHex + tHex
+    }).join('')
+    const colorEnable = '01'
+    const colorNum = flagItem.colors.length.toString(16).padStart(2, '0')
+    const colorStatus = '03'
+    const colorHex = colorEnable + colorNum + colorStatus + flagItem.colors.map(item => {
+      const speed = flagItem.speed.toString(16).padStart(2, '0')
+      const mode = flagItem.mode.toString(16).padStart(2, '0')
+      const hHex = item.h.toString(16).padStart(4, '0')
+      const sHex = (item.s * 10).toString(16).padStart(4, '0')
+      const vHex = (item.v * 10).toString(16).padStart(4, '0')
+      return speed + speed + mode + hHex + sHex + vHex
+    }).join('')
+    return version + idHex + whiteHex + colorHex
+  } else {
+    if (option?.isFan) {
+      fanEnableHex = (flagItem.fanEnable ? 1 : 0).toString(16).padStart(2, '0')
+      fanSpeedHex = (flagItem.fanSpeed || 1).toString(16).padStart(2, '0')
+    }
+    const switchingIntervalHex = (option?.isUVCFan ? 101 - flagItem.speed : flagItem.speed).toString(16).padStart(2, '0')
+    const transitionTimeHex = (option?.isUVCFan ? 101 - flagItem.speed : flagItem.speed).toString(16).padStart(2, '0')
+    const transitionModeHex = flagItem.mode.toString(16).padStart(2, '0')
+    const hex = idHex + fanEnableHex + fanSpeedHex + flagItem.colors.map(color => {
+      const hHex = Math.round(color.h).toString(16).padStart(4, '0')
+      const sHex = Math.round(color.s * 10).toString(16).padStart(4, '0')
+      const vHex = Math.round(color.v * 10).toString(16).padStart(4, '0')
+      const brightnessHex = '0000'
+      const colorTempHex = '0000'
+      return switchingIntervalHex + transitionTimeHex + transitionModeHex + hHex + sHex + vHex + brightnessHex + colorTempHex
+    }).join('')
+    return hex
+  }
+}
+
+export function dp2Obj(dp: string, option?: FlagOption): FlagItemInfo | undefined {
+  if (!dp) return
+  const result = {} as FlagItemInfo
+  if (option?.isMixLight) {
+    result.version = hex2Int(dp.slice(0, 2))
+    result.id = hex2Int(dp.slice(2, 4))
+    let lampHex = dp.slice(16)
+    result.whiteColors = [
+      { brightness: hex2Int(lampHex.slice(0, 4)) / 10, colorTemp: hex2Int(lampHex.slice(4, 8)) / 10 }
+    ]
+    lampHex = lampHex.slice(14)
+    result.colors = spliceByStep(lampHex, 18).map(lamp => {
+      result.speed = hex2Int(lamp.slice(0, 2))
+      result.mode = hex2Int(lamp.slice(4, 6))
+      return {
+        h: hex2Int(lamp.slice(6, 10)),
+        s: hex2Int(lamp.slice(10, 14)) / 10,
+        v: hex2Int(lamp.slice(14, 18)) / 10
+      }
+    })
+    return result
+  } else {
+    const id = hex2Int(dp.slice(0, 2))
+    let fanEnable: any = undefined
+    let fanSpeed: any = undefined
+    if (option?.isFan) {
+      fanEnable = hex2Int(dp.slice(2, 4)) === 1
+      fanSpeed = hex2Int(dp.slice(4, 6))
+    }
+    const c = option?.isFan ? 6 : 2
+    const sliceDp = dp.slice(c)
+    let mode = SceneNodeTransitionMode.Jump
+    let speed = 70
+    const colors = spliceByStep(sliceDp, 26).map(nodeHex => {
+      speed = option?.isUVCFan ? 101 - hex2Int(nodeHex.slice(0, 2)) : hex2Int(nodeHex.slice(0, 2))
+      mode = hex2Int(nodeHex.slice(4, 6))
+      const h = hex2Int(nodeHex.slice(6, 10))
+      const s = hex2Int(nodeHex.slice(10, 14))
+      const v = hex2Int(nodeHex.slice(14, 18))
+      return {
+        h,
+        s: s / 10,
+        v: v / 10
+      }
+    })
+    const whiteColors = [{ brightness: 100, colorTemp: 0 }]
+    return {
+      id,
+      mode,
+      speed,
+      fanEnable,
+      fanSpeed,
+      colors,
+      whiteColors
+    }
+  }
+
+}
+
+
+export async function getRemoteFlag(devId: string) {
+  const res = await NativeApi.getJson(devId, featureId)
+  const isNormalData = Array.isArray(parseJSON(res?.data))
+  if (res.success && isNormalData) {
+    return {
+      success: true,
+      data: JSON.parse(res.data)
+    }
+  } else {
+    if (res.msg?.includes('资源未找到') || !isNormalData) {
+      const res = await NativeApi.putJson(devId, featureId, JSON.stringify(defFlagList))
+      if (res.success) {
+        return {
+          success: true,
+          data: cloneDeep(defFlagList)
+        }
+      }
+      return { success: false }
+    }
+    return { success: false }
+  }
+}
+
+export function saveFlag(devId: string, flagInfo: FlagUiInfo[]) {
+  return NativeApi.putJson(devId, featureId, JSON.stringify(flagInfo))
+}
+

package/src/modules/flags/FlagEditPage.tsx

@@ -0,0 +1,432 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+import I18n from '@ledvance/base/src/i18n'
+import { useNavigation, useRoute } from '@react-navigation/native'
+import Page from '@ledvance/base/src/components/Page'
+import res from '@ledvance/base/src/res'
+import { ScrollView, View, FlatList, StyleSheet, Image, TouchableOpacity, Text } from 'react-native'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import { useReactive } from 'ahooks'
+import { Utils } from 'tuya-panel-kit'
+import TextField from '@ledvance/base/src/components/TextField'
+import Card from '@ledvance/base/src/components/Card'
+import LdvSlider from '@ledvance/base/src/components/ldvSlider'
+import TextButton from '@ledvance/base/src/components/TextButton'
+import { hex2Hsv, hsv2Hex, mapFloatToRange } from '@ledvance/base/src/utils'
+import { cloneDeep, find, isEqual } from 'lodash'
+import { FlagUiInfo } from './FlagInfo'
+import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView'
+import { Result } from '@ledvance/base/src/models/modules/Result'
+import { FlagOption } from './FlagActions'
+import { FlagPageProps } from './FlagPage'
+import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView'
+import { showDialog } from '@ledvance/base/src/utils/common'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+
+const cx = Utils.RatioUtils.convertX
+
+export interface FlagEditParams {
+  mode: 'add' | 'edit'
+  currentMood: FlagUiInfo
+  moods: FlagUiInfo[]
+  moduleParams: FlagPageProps
+  modDeleteFlag: (mode: 'add' | 'edit' | 'del', currentMood: FlagUiInfo, options?: FlagOption) => Promise<Result<any>>
+}
+
+const FlagEditPage = () => {
+  const navigation = useNavigation()
+  const params = cloneDeep(useRoute().params as FlagEditParams)
+  const state = useReactive({
+    showAddMoodPopover: true,
+    mood: params.currentMood,
+    currentWhiteNode: params.currentMood.whiteColors[params.currentMood.whiteColors.length - 1]!,
+    currentNode: params.currentMood.colors[params.currentMood.colors.length - 1],
+    whitePaintBucketIdx: params.currentMood.colors.length - 1,
+    colorPaintBucketIdx: params.currentMood.colors.length - 1,
+    whitePaintBucketSelected: true,
+    colorPaintBucketSelected: false,
+    loading: false
+  })
+  useEffect(() => {
+  }, [])
+
+  const getButtonStatus = () => {
+    return (params.mode === 'edit' && isEqual(state.mood, params.currentMood)) ||
+      !(!!state.mood.name) ||
+      nameRepeat ||
+      state.mood.name.length > 32
+  }
+
+  const getColorBlockColor = useCallback((isMainLight?: boolean) => {
+    if(isMainLight){
+      return cctToColor(state.currentWhiteNode.colorTemp, Math.max(...[state.currentWhiteNode.brightness, 50]))
+    }
+    const s = Math.round(mapFloatToRange(state.currentNode.s / 100, 30, 100))
+    return hsv2Hex(state.currentNode.h, s, 100)
+  }, [state.currentNode, state.currentWhiteNode])
+
+  const nameRepeat = useMemo(() => {
+    return !!find(params.moods, m => (m.id !== state.mood.id && m.name === state.mood.name))
+  }, [state.mood.name])
+
+  return (
+    <Page
+      backText={I18n.getLang('mesh_device_detail_mode')}
+      showBackDialog={true}
+      backDialogTitle={
+        I18n.getLang(params.mode === 'add' ?
+          'flag_canceladding' :
+          'flag_canceledit')
+      }
+      backDialogContent={
+        I18n.getLang('flag_cancelinfo')
+      }
+      headlineText={I18n.getLang(params.mode === 'add' ? 'flag_addanewflag' : 'flag_edittheflag')}
+      rightButtonIcon={getButtonStatus() ? res.ic_uncheck : res.ic_check}
+      rightButtonDisabled={getButtonStatus()}
+      rightButtonIconClick={async () => {
+        if (state.loading) return
+        state.loading = true
+        const res = await params.modDeleteFlag(params.mode, state.mood)
+        console.log(res, '< --- resss')
+        if (res.success) {
+          state.loading = false
+          navigation.goBack()
+        }
+      }}>
+      <ScrollView
+        style={{ flex: 1 }}
+        nestedScrollEnabled={true}>
+        <View style={styles.root}>
+          <TextField
+            style={styles.name}
+            value={state.mood.name}
+            placeholder={I18n.getLang('edit_static_mood_inputfield_topic_text')}
+            onChangeText={text => {
+              state.mood.name = text
+            }}
+            maxLength={33}
+            showError={state.mood.name.length > 32 || nameRepeat}
+            tipColor={nameRepeat ? '#f00' : undefined}
+            tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
+            errorText={I18n.getLang(nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')} />
+          {params.moduleParams.isSupportMixScene && <><Card style={styles.adjustCard}>
+            <Spacer height={cx(16)} />
+            <View style={styles.lightLine}>
+              <Text style={styles.light}>
+                {I18n.getLang('light_sources_tile_main_lighting_headline')}
+              </Text>
+              <View style={[styles.preview, { backgroundColor: getColorBlockColor(true) }]} />
+            </View>
+            <Spacer />
+            <ColorTempAdjustView
+              isSupportBrightness={!!params.moduleParams.isSupportTemperature}
+              isSupportTemperature={!!params.moduleParams.isSupportTemperature}
+              colorTemp={state.currentWhiteNode.colorTemp}
+              brightness={state.currentWhiteNode.brightness}
+              onCCTChange={(cct) => {
+                state.currentWhiteNode.colorTemp = cct
+              }}
+              onCCTChangeComplete={(cct) => {
+                state.currentWhiteNode.colorTemp = cct
+                state.mood.whiteColors = state.mood.whiteColors.map((item, idx) => {
+                  if (idx === state.whitePaintBucketIdx) {
+                    return {
+                      ...state.mood.whiteColors[idx],
+                      colorTemp: cct
+                    }
+                  }
+                  return item
+                })
+              }}
+              onBrightnessChange={() => { }}
+              onBrightnessChangeComplete={(bright) => {
+                state.currentWhiteNode.brightness = bright
+                state.mood.whiteColors = state.mood.whiteColors.map((item, idx) => {
+                  if (idx === state.whitePaintBucketIdx) {
+                    return {
+                      ...state.mood.whiteColors[idx],
+                      brightness: bright
+                    }
+                  }
+                  return item
+                })
+              }}
+            />
+            <Spacer height={cx(16)} />
+          </Card>
+            <Spacer />
+          </>}
+          <Card style={styles.adjustCard}>
+            <Spacer height={cx(16)} />
+            <View style={styles.lightLine}>
+              <Text style={styles.light}>
+                {I18n.getLang(params.moduleParams.isSupportMixScene ? 'light_sources_tile_sec_lighting_headline' : 'light_sources_tile_tw_lighting_headline')}
+              </Text>
+              <View style={[styles.preview, { backgroundColor: getColorBlockColor() }]} />
+            </View>
+            <Spacer height={cx(10)} />
+            <LdvSlider
+              title={I18n.getLang('add_new_dynamic_mood_lights_field_speed_topic_text')}
+              value={state.mood.speed}
+              onValueChange={value => {
+                state.mood.speed = value
+              }}
+              onSlidingComplete={value => {
+                state.mood.speed = value
+              }} />
+            <Spacer height={cx(16)} />
+            <View style={styles.nodesAdjust}>
+              <View style={styles.adjustButtons}>
+                <TouchableOpacity
+                  onPress={() => {
+                    state.colorPaintBucketSelected = true
+                  }}>
+                  <Image
+                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? '#f60' : '#666' }]}
+                    source={res.ic_paint_bucket} />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={() => {
+                    state.colorPaintBucketSelected = false
+                  }}>
+                  <Image
+                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? '#666' : '#f60' }]}
+                    source={res.ic_colorize} />
+                </TouchableOpacity>
+              </View>
+              <FlatList
+                data={state.mood.colors}
+                style={styles.nodeList}
+                renderItem={({ item, index }) => {
+                  return (
+                    <View style={styles.nodeItem}>
+                      <TouchableOpacity
+                        style={[
+                          styles.nodeBlock,
+                          {
+                            backgroundColor: hsv2Hex(item.h, item.s, item.v),
+                          },
+                        ]}
+                        onPress={() => {
+                          state.currentNode = item
+                          state.colorPaintBucketIdx = index
+                        }} />
+                      <TouchableOpacity
+                        style={styles.nodeDeleteBtn}
+                        disabled={state.mood.colors.length < 3}
+                        onPress={() => {
+                          state.mood.colors.splice(index, 1)
+                          state.currentNode = hex2Hsv(state.mood.colors[state.mood.colors.length - 1])!
+                        }}>
+                        <Image
+                          style={[
+                            styles.nodeDeleteIcon,
+                            {
+                              tintColor: state.mood.colors.length < 3 ? '#ccc' : '#666',
+                            },
+                          ]}
+                          source={res.ic_mood_del} />
+                      </TouchableOpacity>
+                    </View>
+                  )
+                }}
+                keyExtractor={(_, index) => `${index}`}
+                ItemSeparatorComponent={() => <Spacer height={cx(12)} />}
+                ListFooterComponent={() => {
+                  if (state.mood.colors.length >= 8) {
+                    return (<></>)
+                  }
+                  return (
+                    <View>
+                      <Spacer height={cx(12)} />
+                      <TouchableOpacity
+                        style={styles.nodeAddBtn}
+                        onPress={() => {
+                          const node = {
+                            ...state.currentNode,
+                          }
+                          state.mood.colors.push(node)
+                          state.currentNode = node
+                          state.colorPaintBucketIdx = state.mood.colors.length - 1
+                        }}>
+                        <Image
+                          style={{
+                            width: cx(18),
+                            height: cx(18),
+                            tintColor: '#000',
+                          }}
+                          source={{ uri: res.add }} />
+                      </TouchableOpacity>
+                    </View>
+                  )
+                }} />
+            </View>
+            <Spacer />
+            <View style={styles.lightLine}>
+              <Text style={styles.light}>
+                {I18n.getLang('add_new_dynamic_mood_lights_field_headline2_text')}
+              </Text>
+              <View style={[styles.preview, { backgroundColor: getColorBlockColor() }]} />
+            </View>
+            <Spacer />
+            <ColorAdjustView
+              h={state.currentNode.h}
+              s={state.currentNode.s}
+              v={state.currentNode.v}
+              reserveSV={true}
+              onHSVChange={(h, s, v) => {
+                if (state.colorPaintBucketSelected) {
+                  state.mood.colors = state.mood.colors.map(() => (
+                    { h, s, v }
+                  ))
+                } else {
+                  state.currentNode.h = h
+                  state.currentNode.s = s
+                  state.currentNode.v = v
+                }
+              }}
+              onHSVChangeComplete={(h, s, v) => {
+                if (state.colorPaintBucketSelected) {
+                  state.mood.colors = state.mood.colors.map(() => (
+                    { h, s, v }
+                  ))
+                } else {
+                  state.currentNode.h = h
+                  state.currentNode.s = s
+                  state.currentNode.v = v
+                  state.mood.colors = state.mood.colors.map((item, idx) => {
+                    if (idx === state.colorPaintBucketIdx) {
+                      return { h, s, v }
+                    }
+                    return item
+                  })
+                }
+              }}
+            />
+            <Spacer height={cx(16)} />
+          </Card>
+          <Spacer />
+          {params.mode === 'edit' &&
+            <View style={{ marginTop: cx(20), marginHorizontal: cx(24) }}>
+              <TextButton
+                style={styles.deleteBtn}
+                textStyle={styles.deleteBtnText}
+                text={I18n.getLang('flag_deleteflag')}
+                onPress={() => {
+                  showDialog({
+                    method: 'confirm',
+                    title: I18n.getLang('flag_deletepopup'),
+                    subTitle: I18n.getLang('strip_light_static_mood_edit_dialog_text'),
+                    onConfirm: async (_, { close }) => {
+                      close()
+                      if (state.loading) return
+                      state.loading = true
+                      const res = await params.modDeleteFlag('del', state.mood)
+                      if (res.success) {
+                        state.loading = false
+                        navigation.goBack()
+                      }
+                    }
+                  })
+                }} />
+            </View>}
+          <Spacer />
+        </View>
+      </ScrollView>
+    </Page>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  name: {
+    marginHorizontal: cx(24),
+  },
+  adjustCard: {
+    marginVertical: cx(12),
+    marginHorizontal: cx(24),
+  },
+  fanAdjustCard: {
+    marginHorizontal: cx(24),
+  },
+  lightLine: {
+    flexDirection: 'row',
+    marginHorizontal: cx(16),
+  },
+  light: {
+    color: '#000',
+    fontSize: cx(18),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+  transitionMode: {
+    marginHorizontal: cx(16),
+  },
+  preview: {
+    width: cx(20),
+    height: cx(20),
+    marginStart: cx(12),
+    borderRadius: cx(4),
+  },
+  nodesAdjust: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  adjustButtons: {
+    width: cx(44),
+    marginStart: cx(16),
+  },
+  adjustButton: {
+    width: cx(44),
+    height: cx(44),
+  },
+  nodeList: {
+    flex: 1,
+    marginHorizontal: cx(16),
+  },
+  nodeItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  nodeBlock: {
+    flex: 1,
+    height: cx(40),
+    borderRadius: cx(8),
+  },
+  nodeDeleteBtn: {
+    width: cx(24),
+    height: cx(30),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  nodeDeleteIcon: {
+    width: cx(16),
+    height: cx(16),
+  },
+  nodeAddBtn: {
+    height: cx(40),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginEnd: cx(26),
+    borderRadius: cx(8),
+    borderWidth: cx(1),
+    borderStyle: 'dashed',
+    borderColor: '#666',
+    backgroundColor: '#f6f6f6',
+  },
+  deleteBtn: {
+    width: '100%',
+    height: cx(50),
+    backgroundColor: '#666',
+    borderRadius: cx(8),
+  },
+  deleteBtnText: {
+    color: '#fff',
+    fontSize: cx(16),
+    fontFamily: 'helvetica_neue_lt_std_bd',
+  },
+})
+
+export default FlagEditPage