@ledvance/ui-biz-bundle 1.0.2 → 1.0.4

package/src/modules/hooks/DeviceDpStateHooks.ts

@@ -0,0 +1,27 @@
+import { NativeApi } from "@ledvance/base/src/api/native"
+export const WHITE = 'white'
+export const COLOUR = 'colour'
+export const SCENE = 'scene'
+export const MUSIC = 'music'
+
+export const setBiorhythmDp = (deviceId: string, value: string, dpCodes: Record<string, string>) => {
+    return NativeApi.setDp(deviceId, dpCodes.rhythm_mode, value)
+}
+
+export const setMixRgbcwDp = (deviceId: string, value: string, enable: boolean | undefined, dpCodes: Record<string, string>) => {
+    const dps: { [p: string]: any } = {
+        [dpCodes.mix_rgbcw]: value,
+    }
+    if (enable != undefined) {
+        dps[dpCodes.switch_led] = enable
+    }
+    return NativeApi.setDps(deviceId, dps)
+}
+
+export const setSceneDp = (deviceId: string, value: string, dpCodes: Record<string, string>) => {
+    return NativeApi.setDps(deviceId, { [dpCodes.switch_led]: true, [dpCodes.work_mode]: 'scene', [dpCodes.scene_data]: value })
+}
+
+export const setMixSceneDp = (deviceId: string, value: string, dpCodes: Record<string, string>) => {
+    return NativeApi.setDps(deviceId, { [dpCodes.work_mode]: 'scene', [dpCodes.mix_light_scene]: value })
+}

package/src/modules/mood/MixLightActions.ts

@@ -0,0 +1,82 @@
+import { MixLightBean } from '../timeSchedulecopy/mix/MixLightBean'
+import { spliceByStep } from '@ledvance/base/src/utils/common';
+import { asyncSetDps, useDp } from '@ledvance/base/src/models/modules/NativePropsSlice';
+import { Dispatch, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { useUpdateEffect } from 'ahooks'
+import { setMixRgbcwDp } from '../hooks/DeviceDpStateHooks'
+import { Result } from '@ledvance/base/src/models/modules/Result'
+
+export function useMixRgbcw(dpCodes: Record<string,string>): [MixLightBean, SetMixLightResultType] {
+    const [dp]:any = useDp(dpCodes.mix_rgbcw)
+    const setMixLightFn = setMixLight(useDispatch())
+    const [mixLightState, setMixLightState] = useState(dp2Obj(dp))
+    useUpdateEffect(() => {
+        const newMixLightState = dp2Obj(dp)
+        setMixLightState(newMixLightState)
+        console.log('长链接MIX', newMixLightState)
+    }, [dp])
+    return [mixLightState, setMixLightFn]
+}
+
+type SetMixLightResultType = (deviceId: string, mixLightBean: MixLightBean, dpCodes: Record<string,string>) => Promise<Result<any>>
+
+function setMixLight(dispatch: Dispatch<any>): SetMixLightResultType {
+    return (deviceId: string, mixLightBean: MixLightBean, dpCodes) => asyncSetDps(dispatch, async () => {
+        const dpValue = obj2Dp(mixLightBean)
+        const enable = mixLightBean.whiteLightSwitch === mixLightBean.colorLightSwitch ? mixLightBean.whiteLightSwitch : undefined
+        const controlResult: any = await setMixRgbcwDp(deviceId, dpValue, enable, dpCodes)
+        return {
+            result: { success: controlResult.result },
+            dps: { [dpCodes.mix_rgbcw]: dpValue },
+        }
+    })
+}
+
+export function obj2Dp(obj: MixLightBean): string {
+    const powerSwitchDpValueArray = ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0']
+    if (obj.whiteLightSwitch) {
+        powerSwitchDpValueArray[15] = '1'
+    }
+    if (obj.colorLightSwitch) {
+        powerSwitchDpValueArray[14] = '1'
+    }
+    if (obj.mixRgbcwEnabled) {
+        powerSwitchDpValueArray[13] = '1'
+    }
+    const powerSwitchDpValueBinary = powerSwitchDpValueArray.join('')
+    const powerSwitchDpValue = parseInt(powerSwitchDpValueBinary, 2).toString(16).padStart(4, '0')
+    const hueDpValue = obj.hue.toString(16).padStart(4, '0')
+    const satDpValue = (obj.sat * 10).toString(16).padStart(4, '0')
+    const lightnessDpValue = (obj.lightness * 10).toString(16).padStart(4, '0')
+    const brightnessDpValue = (obj.brightness * 10).toString(16).padStart(4, '0')
+    const colorTempDpValue = (obj.colorTempPercent * 10).toString(16).padStart(4, '0')
+    return powerSwitchDpValue + hueDpValue + satDpValue + lightnessDpValue + brightnessDpValue + colorTempDpValue
+}
+
+export function dp2Obj(dp: string): MixLightBean {
+    if (!dp) {
+        return {
+            whiteLightSwitch: true,
+            colorLightSwitch: true,
+            mixRgbcwEnabled: true,
+            hue: 360,
+            sat: 100,
+            lightness: 100,
+            brightness: 100,
+            colorTempPercent: 100,
+        }
+    }
+    const dpValueArray = spliceByStep(dp, 4)
+    const powerSwitch = parseInt(dpValueArray[0], 16).toString(2).padStart(16, '0')
+    return {
+        whiteLightSwitch: powerSwitch[15] === '1',
+        colorLightSwitch: powerSwitch[14] === '1',
+        mixRgbcwEnabled: powerSwitch[13] === '1',
+        hue: parseInt(dpValueArray[1], 16),   // 色相 0-360
+        sat: parseInt(dpValueArray[2], 16) / 10,    // 饱和度 0-100
+        lightness: parseInt(dpValueArray[3], 16) / 10,    // 明度 0-100
+        brightness: parseInt(dpValueArray[4], 16) / 10,    // 亮度 0-100
+        colorTempPercent: parseInt(dpValueArray[5], 16) / 10,    // 色温 0-100
+    }
+}

package/src/modules/mood/MixLightSceneActions.ts

@@ -0,0 +1,259 @@
+import { getFeature, putFeature } from '@ledvance/base/src/api/native';
+import { setMixSceneDp } from '../hooks/DeviceDpStateHooks'
+import {
+    MixMood,
+    MixSceneInfo,
+    MixSceneLampInfo,
+    MixSceneNodeInfo,
+    RemoteMixScene,
+} from './MixSceneBeans'
+import I18n from '@ledvance/base/src/i18n'
+import res from '@ledvance/base/src/res';
+import { NativeResult, Result } from '@ledvance/base/src/models/modules/Result';
+import { asyncSetDps, useDp } from '@ledvance/base/src/models/modules/NativePropsSlice';
+import { Dispatch, useState } from 'react'
+import { useUpdateEffect } from 'ahooks'
+import { useDispatch } from 'react-redux'
+import { SceneNodeTransitionMode } from './SceneInfo'
+
+const MixLightSceneListFeatureId = 'MixLightSceneList'
+
+export function useMixScene(dpCodes: Record<string, string>): [number | undefined, SetMixSceneType] {
+    const [dp]:any = useDp(dpCodes.mix_light_scene)
+    const [mixSceneState, setMixSceneState] = useState<MixSceneInfo | undefined>(dp2Obj(dp))
+    useUpdateEffect(() => {
+        setMixSceneState(dp2Obj(dp))
+    }, [dp])
+    return [mixSceneState?.id, setMixScene(useDispatch())]
+}
+
+type SetMixSceneType = (deviceId: string, mixScene: MixSceneInfo, dpCodes: Record<string, string>) => Promise<Result<any>>
+
+function setMixScene(dispatch: Dispatch<any>): SetMixSceneType {
+    return (deviceId: string, mixScene: MixSceneInfo, dpCodes) => {
+        return asyncSetDps(dispatch, async () => {
+            const dpValue = obj2Dp(mixScene)
+            const controlResult: any = await setMixSceneDp(deviceId, dpValue, dpCodes)
+            return {
+                result: { success: controlResult.result },
+                dps: { [dpCodes.work_mode]: 'scene', [dpCodes.mix_light_scene]: dpValue },
+            }
+        })
+    }
+}
+
+export async function getMixLightSceneList(deviceId: string): Promise<Result<MixMood[]>> {
+    const res: NativeResult<MixMood[]> = await getFeature(deviceId, MixLightSceneListFeatureId)
+    if (!(!!res.data)) {
+        const setDefRes = await putFeature(deviceId, MixLightSceneListFeatureId, getDefMixLightSceneList())
+        if (setDefRes.result) {
+            return getMixLightSceneList(deviceId)
+        }
+        return { success: false }
+    }
+    return {
+        success: true,
+        data: res.data.map(scene => {
+            return {
+                ...scene,
+                ...dp2Obj(scene.value),
+            }
+        }),
+    }
+}
+
+export async function saveMixScene(
+    deviceId: string,
+    isDelete: boolean,
+    name: string,
+    mixSceneObj: MixSceneInfo,
+    sceneList: MixMood[],
+): Promise<Result<any>> {
+    if (!isDelete) {
+        mixSceneObj.lamps.forEach(lamp => {
+            if (lamp.enable) {
+                if (lamp.nodes[0].changeType === SceneNodeTransitionMode.Static) {
+                    lamp.nodes = [lamp.nodes[0]]
+                }
+            } else {
+                lamp.nodes = []
+            }
+        })
+    }
+    const newSceneList: RemoteMixScene[] = isDelete ? sceneList : sceneList.map(scene => {
+        return {
+            name: scene.id === mixSceneObj.id ? name : scene.name,
+            image: scene.image,
+            value: scene.id === mixSceneObj.id ? obj2Dp(mixSceneObj) : scene.value,
+        }
+    })
+    return setMixLightSceneList(deviceId, newSceneList)
+}
+
+export async function setMixLightSceneList(deviceId: string, sceneList: RemoteMixScene[]): Promise<Result<any>> {
+    const res = await putFeature(deviceId, MixLightSceneListFeatureId, sceneList)
+    return {
+        success: res.result,
+        msg: res.msg,
+        data: res.data,
+    }
+}
+
+/**
+ * 混光场景命令对象转换为dp数据
+ * @param obj
+ */
+export function obj2Dp(obj: MixSceneInfo) {
+    const versionHex = obj.version.toString(16).padStart(2, '0')
+    const sceneNoHex = obj.id.toString(16).padStart(2, '0')
+    const lampsHex = obj.lamps.map(lamp => {
+        let lampHex = lamp.enable ? '01' : '00'
+        const nodes = lamp.nodes || []
+        lampHex += nodes.length.toString(16).padStart(2, '0')
+        if (nodes.length === 0 || !lamp.enable) {
+            return lampHex
+        }
+        lampHex += lamp.type.toString(16).padStart(2, '0')
+        lampHex += nodes.map(node => {
+            let nodeHex = ''
+            nodeHex += node.intervalTime.toString(16).padStart(2, '0')
+            nodeHex += node.changeTime.toString(16).padStart(2, '0')
+            nodeHex += node.changeType.toString(16).padStart(2, '0')
+            switch (lamp.type) {    // 1:W 只有亮度，2:CW 亮度+色温，3:RGB HSV，4:RGBC HSV+色温，5:RGBCW HSV+色温+亮度
+                case 1:
+                    nodeHex += (node.brightness * 10).toString(16).padStart(4, '0')
+                    break
+                case 2:
+                    nodeHex += (node.brightness * 10).toString(16).padStart(4, '0')
+                    nodeHex += (node.colorTemp * 10).toString(16).padStart(4, '0')
+                    break
+                case 3:
+                    nodeHex += node.hue.toString(16).padStart(4, '0')
+                    nodeHex += (node.sat * 10).toString(16).padStart(4, '0')
+                    nodeHex += (node.lightness * 10).toString(16).padStart(4, '0')
+                    break
+                case 4:
+                    nodeHex += node.hue.toString(16).padStart(4, '0')
+                    nodeHex += (node.sat * 10).toString(16).padStart(4, '0')
+                    nodeHex += (node.lightness * 10).toString(16).padStart(4, '0')
+                    nodeHex += (node.colorTemp * 10).toString(16).padStart(4, '0')
+                    break
+                case 5:
+                    nodeHex += node.hue.toString(16).padStart(4, '0')
+                    nodeHex += (node.sat * 10).toString(16).padStart(4, '0')
+                    nodeHex += (node.lightness * 10).toString(16).padStart(4, '0')
+                    nodeHex += (node.brightness * 10).toString(16).padStart(4, '0')
+                    nodeHex += (node.colorTemp * 10).toString(16).padStart(4, '0')
+                    break
+            }
+            return nodeHex
+        }).join('')
+        return lampHex
+    }).join('')
+    return versionHex + sceneNoHex + lampsHex
+}
+
+/**
+ * dp数据转换为混光场景对象
+ * @returns MixSceneInfo
+ */
+export function dp2Obj(dp: string): MixSceneInfo | undefined {
+    if (!(!!dp)) {
+        return undefined
+    }
+    const result = {} as MixSceneInfo
+    result.version = parseInt(dp.slice(0, 2), 16)
+    result.id = parseInt(dp.slice(2, 4), 16)
+    result.lamps = []
+    let lampsHex = dp.slice(4)
+    while (lampsHex.length != 0) {
+        const lamp = { nodes: [] as MixSceneNodeInfo[] } as MixSceneLampInfo
+        lamp.enable = parseInt(lampsHex.slice(0, 2), 16) === 1
+        lampsHex = lampsHex.slice(2)
+        const nodeCount = parseInt(lampsHex.slice(0, 2), 16)
+        lampsHex = lampsHex.slice(2)
+        if (nodeCount === 0) {
+            result.lamps.push(lamp)
+            continue
+        }
+        lamp.type = parseInt(lampsHex.slice(0, 2), 16)
+        lampsHex = lampsHex.slice(2)
+        for (let i = 0; i < nodeCount; i++) {
+            const node = {} as MixSceneNodeInfo
+            node.intervalTime = parseInt(lampsHex.slice(0, 2), 16)
+            node.changeTime = parseInt(lampsHex.slice(2, 4), 16)
+            node.changeType = parseInt(lampsHex.slice(4, 6), 16)
+            lampsHex = lampsHex.slice(6)
+            switch (lamp.type) {
+                case 1:
+                    node.brightness = parseInt(lampsHex.slice(0, 4), 16) / 10
+                    lampsHex = lampsHex.slice(4)
+                    break
+                case 2:
+                    node.brightness = parseInt(lampsHex.slice(0, 4), 16) / 10
+                    node.colorTemp = parseInt(lampsHex.slice(4, 8), 16) / 10
+                    lampsHex = lampsHex.slice(8)
+                    break
+                case 3:
+                    node.hue = parseInt(lampsHex.slice(0, 4), 16)
+                    node.sat = parseInt(lampsHex.slice(4, 8), 16) / 10
+                    node.lightness = parseInt(lampsHex.slice(8, 12), 16) / 10
+                    lampsHex = lampsHex.slice(12)
+                    break
+                case 4:
+                    node.hue = parseInt(lampsHex.slice(0, 4), 16)
+                    node.sat = parseInt(lampsHex.slice(4, 8), 16) / 10
+                    node.lightness = parseInt(lampsHex.slice(8, 12), 16) / 10
+                    node.colorTemp = parseInt(lampsHex.slice(12, 16), 16) / 10
+                    lampsHex = lampsHex.slice(16)
+                    break
+                case 5:
+                    node.hue = parseInt(lampsHex.slice(0, 4), 16)
+                    node.sat = parseInt(lampsHex.slice(4, 8), 16) / 10
+                    node.lightness = parseInt(lampsHex.slice(8, 12), 16) / 10
+                    node.brightness = parseInt(lampsHex.slice(12, 16), 16) / 10
+                    node.colorTemp = parseInt(lampsHex.slice(16, 20), 16) / 10
+                    lampsHex = lampsHex.slice(20)
+                    break
+            }
+            lamp.nodes.push(node)
+        }
+        result.lamps.push(lamp)
+    }
+    return result
+}
+
+function getDefMixLightSceneList(): RemoteMixScene[] {
+    return [
+        {
+            name: I18n.getLang('mesh_device_detail_lighting_goodnight'),
+            image: res.scene_goodnight,
+            value: '00000101020e0d0000c800000000',
+        },
+        {
+            name: I18n.getLang('mesh_device_detail_lighting_read'),
+            image: res.scene_reading,
+            value: '00010101020e0d0003e801f40000',
+        },
+        {
+            name: I18n.getLang('mesh_device_detail_lighting_work'),
+            image: res.scene_work,
+            value: '00020101020e0d0003e803e80000',
+        },
+        {
+            name: I18n.getLang('mesh_device_detail_lighting_leisure'),
+            image: res.scene_leisure,
+            value: '00030101020e0d0001f401f40000',
+        },
+        {
+            name: I18n.getLang('mesh_device_detail_lighting_color_mode'),
+            image: res.scene_custom1,
+            value: '00040000010603464601000003e803e8464601007803e803e846460100f003e803e8464601003d03e803e846460100ae03e803e8464601011303e803e8',
+        },
+        {
+            name: I18n.getLang('mesh_device_detail_lighting_white_mode'),
+            image: res.scene_custom2,
+            value: '000501030246460103e8000a46460103e8015446460103e803e80000',
+        },
+    ]
+}

package/src/modules/mood/MixMoodItem.tsx

@@ -0,0 +1,138 @@
+import React from 'react'
+import Card from '@ledvance/base/src/components/Card'
+import { SwitchButton, Utils } from 'tuya-panel-kit'
+import { Image, StyleSheet, Text, View, ViewProps } from 'react-native'
+import {
+    getMainLight,
+    getSecondaryLight,
+    isStaticMixMood,
+    MixMood,
+    MixSceneLampInfo,
+} from './MixSceneBeans'
+import { hsv2Hex } from '@ledvance/base/src/utils'
+import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine'
+import { SceneNodeTransitionMode } from './SceneInfo'
+import I18n from '@ledvance/base/src/i18n'
+import { mapFloatToRange } from '@ledvance/base/src/utils'
+
+const cx = Utils.RatioUtils.convertX
+
+const lightOn = require('../res/light_on.png')
+const lightOff = require('../res/light_off.png')
+
+interface MixMoodItemProps extends ViewProps {
+    enable: boolean
+    mixMood: MixMood
+    onPress?: () => void
+    onSwitch: (enable: boolean) => void
+}
+
+const MixMoodItem = (props: MixMoodItemProps) => {
+    const { mixMood } = props
+    const mainLight = getMainLight(mixMood)
+    const secondaryLight = getSecondaryLight(mixMood)
+
+    return (
+        <Card style={styles.card} onPress={props.onPress}>
+            <View>
+                <Spacer height={cx(16)} />
+                <View style={styles.headline}>
+                    <Text style={styles.headText}>{mixMood.name}</Text>
+                    <SwitchButton value={props.enable} onValueChange={props.onSwitch} thumbStyle={{ elevation: 0 }} />
+                </View>
+                <Spacer />
+                <MixMoodColorsLine mixSubLight={mainLight} colorLight={false} />
+                <Spacer height={cx(7)} />
+                <MixMoodColorsLine mixSubLight={secondaryLight} colorLight={true} />
+                <Spacer height={cx(12)} />
+                <View style={styles.moodTypeItem}>
+                    <View style={styles.moodTypeLabel}>
+                        <Text style={styles.moodTypeLabelText}>
+                            {I18n.getLang(isStaticMixMood(mixMood) ? 'mood_overview_field_chip_text' : 'mood_overview_field_chip_2')}
+                        </Text>
+                    </View>
+                </View>
+                <Spacer height={cx(16)} />
+            </View>
+        </Card>
+    )
+}
+
+export default MixMoodItem
+
+export function MixMoodColorsLine(props: { mixSubLight: MixSceneLampInfo, colorLight: boolean }) {
+    const { mixSubLight, colorLight } = props
+    const lightColors = mixSubLight.nodes?.map(n => {
+        return colorLight ? hsv2Hex(n.hue, Math.round(n.sat), Math.round(mapFloatToRange(n.lightness / 100, 50, 100)))
+            : cctToColor(n.colorTemp.toFixed())
+    })
+    return (
+        <View style={styles.gradientItem}>
+            <Spacer height={0} width={cx(16)} />
+            <MoodColorsLine
+                width={cx(264)}
+                type={mixSubLight.enable && mixSubLight.nodes[0].changeType === SceneNodeTransitionMode.Gradient ? 'gradient' : 'separate'}
+                colors={mixSubLight.enable ? lightColors : ['#eee']} />
+            <Spacer height={0} width={cx(7)} />
+            <View style={styles.gradientItemIconView}>
+                <Image style={styles.gradientItemIcon} source={mixSubLight.enable ? lightOn : lightOff} />
+            </View>
+            <Spacer height={0} width={cx(16)} />
+        </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),
+    },
+})

package/src/modules/mood/MixScene.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect } from 'react'
+import { useDeviceInfo } from '@ledvance/base/src/models/modules/NativePropsSlice'
+import I18n from '@ledvance/base/src/i18n'
+import res from '@res'
+import { isStaticMixMood, MixMood } from './MixSceneBeans'
+import { useReactive } from 'ahooks'
+import { FlatList, StyleSheet, View } from 'react-native'
+import Tag from '@ledvance/base/src/components/Tag'
+import Spacer from '@ledvance/base/src/components/Spacer'
+import InfoText from '@ledvance/base/src/components/InfoText'
+import { Utils } from 'tuya-panel-kit'
+import MixMoodItem from './MixMoodItem'
+import { getMixLightSceneList } from './MixLightSceneActions'
+
+const cx = Utils.RatioUtils.convertX
+
+interface MixUIState {
+    showAddMixMoodDialog: boolean
+    staticTagChecked: boolean
+    dynamicTagChecked: boolean
+    currentMixMood?: MixMood
+    mixMoods: MixMood[]
+    filteredMoods: MixMood[]
+    flag: symbol
+}
+
+const MixScene = ({ setActionScene, mixScene }) => {
+    const deviceInfo = useDeviceInfo()
+
+    const state = useReactive<MixUIState>({
+        showAddMixMoodDialog: false,
+        staticTagChecked: true,
+        dynamicTagChecked: true,
+        mixMoods: [],
+        filteredMoods: [],
+        flag: Symbol(),
+    })
+
+    const initMixLightSceneList = useCallback(async () => {
+        const res = await getMixLightSceneList(deviceInfo.devId)
+        if (res.success) {
+            state.mixMoods = res.data || []
+            const itemSence = state.mixMoods?.find(mix => mix.value === mixScene)
+            setActionScene(itemSence || state.mixMoods[0])
+            state.currentMixMood = itemSence || state.mixMoods[0]
+        }
+    }, [])
+
+    useEffect(() => {
+        initMixLightSceneList().then()
+    }, [state.flag])
+
+    useEffect(() => {
+        state.filteredMoods = state.mixMoods.filter(item => {
+            return (state.staticTagChecked && state.dynamicTagChecked) ||
+                (state.staticTagChecked && isStaticMixMood(item)) ||
+                (state.dynamicTagChecked && !isStaticMixMood(item))
+        })
+    }, [state.staticTagChecked, state.dynamicTagChecked, state.mixMoods])
+
+    return (
+        <>
+            <View style={styles.tagLine}>
+                <Tag
+                    checked={state.staticTagChecked}
+                    text={I18n.getLang('mood_overview_filter_name_text1')}
+                    onCheckedChange={checked => {
+                        state.staticTagChecked = checked
+                    }} />
+                <Spacer width={cx(8)} height={0} />
+                <Tag
+                    checked={state.dynamicTagChecked}
+                    text={I18n.getLang('mood_overview_filter_name_text2')}
+                    onCheckedChange={checked => {
+                        state.dynamicTagChecked = checked
+                    }} />
+            </View>
+            <Spacer height={cx(10)} />
+            <FlatList
+                data={state.filteredMoods}
+                renderItem={({ item }) =>
+                    <MixMoodItem
+                        enable={item.id === state.currentMixMood?.id}
+                        mixMood={item}
+                        onSwitch={async enable => {
+                            if (enable) {
+                                state.currentMixMood = item
+                                setActionScene(item)
+                            }
+                        }} />
+                }
+                ListHeaderComponent={() => (<Spacer height={cx(10)} />)}
+                ItemSeparatorComponent={() => (<Spacer />)}
+                ListFooterComponent={() => (
+                    <View style={styles.infoLine}>
+                        <Spacer />
+                        <InfoText
+                            icon={res.ic_info}
+                            text={I18n.getLang('mood_overview_information_text')} />
+                        <Spacer height={cx(40)} />
+                    </View>
+                )}
+                keyExtractor={item => `${item.id}`} />
+        </>
+    )
+}
+
+const styles = StyleSheet.create({
+    tagLine: {
+        flexDirection: 'row',
+        marginHorizontal: cx(24),
+        marginTop: cx(24),
+    },
+    infoLine: {
+        marginHorizontal: cx(24),
+    },
+    addMixMoodDialog: {
+        width: cx(171),
+        height: cx(90.5),
+        marginStart: cx(156),
+        marginTop: cx(105),
+        backgroundColor: '#fff',
+    },
+    popoverItem: {
+        width: cx(171),
+        height: cx(45),
+        alignItems: 'flex-start',
+    },
+})
+
+export default MixScene