@ledvance/base 1.1.8 → 1.1.10

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/base",
   "pid": [],
   "uiid": "",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "scripts": {},
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.6",

package/src/api/native.ts

@@ -202,8 +202,8 @@ export class NativeApi {
         })
     }
 
-    static getJson(deviceId: string, featureType: string): Promise<Result<string>> {
-        return new Promise<Result<string>>(resolve => {
+    static getJson(deviceId: string, featureType: string): Promise<Result<any>> {
+        return new Promise<Result<any>>(resolve => {
             devicePanel.getJson(deviceId, featureType, nativeRes => {
                 resolve({
                     success: nativeRes.result,

package/src/components/FanAdjustView.tsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import { Utils } from 'tuya-panel-kit'
+import Card from './Card'
+import {View, Text, ViewProps, Image, TouchableOpacity} from 'react-native'
+import LdvSwitch from './ldvSwitch'
+import I18n from '@i18n'
+import LdvSlider from './ldvSlider'
+import Spacer from './Spacer'
+import res from '../res'
+import Segmented from './Segmented'
+import Popup from './Popup'
+const { convertX: cx } = Utils.RatioUtils
+
+interface FanAdjustViewProps extends ViewProps {
+    fanEnable: boolean
+    fanSpeed: number
+    maxFanSpeed?: number
+    isSupportDirection?: boolean
+    isSupportDisinfect?: boolean
+    isSupportMode?: boolean
+    directValue?: string
+    modeValue?: string 
+    disinfect?: boolean
+    directOptions?:any[]
+    modeOptions?: any[]
+    directChange?: (direct:string) => void
+    modeChange?: (mode: string) => void
+    disinfectChange?: (disinfect: boolean) => void
+    onFanSwitch: (fanEnable: boolean) => void
+    onFanSpeedChange?: (fanSpeed: number) => void
+    onFanSpeedChangeComplete: (fanSpeed: number) => void
+}
+
+const FanAdjustView = (props: FanAdjustViewProps) => {
+    return (
+        <Card
+            style={props.style}>
+            <LdvSwitch
+                title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline')}
+                enable={props.fanEnable}
+                setEnable={props.onFanSwitch}
+                color={''}
+                colorAlpha={1}/>
+            {props.fanEnable && (
+                <View>
+                    <LdvSlider
+                        title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_text')}
+                        value={props.fanSpeed}
+                        min={1}
+                        max={props.maxFanSpeed}
+                        onValueChange={props.onFanSpeedChange}
+                        onSlidingComplete={props.onFanSpeedChangeComplete}
+                        subTitleStr={props.fanSpeed + `/${props.maxFanSpeed}`}/>
+                    <Spacer/>
+                </View>
+            )}
+            {props.fanEnable && props.isSupportDirection && <View style={{marginHorizontal: cx(16)}}>
+                <View style={{flexDirection: 'row', marginBottom: cx(2), alignItems: 'center'}}>
+                    <Text style={{marginRight: cx(5), color: '#000'}}>{I18n.getLang('ceiling_fan_tile_uvc_fan_direction')}</Text>
+                    <TouchableOpacity onPress={() => Popup({
+                        title: I18n.getLang('ceiling_fan_direction_info_headline'),
+                        confirmText: I18n.getLang('ceiling_fan_direction_info_button_label'),
+                        content: <View>
+                            <Text style={{fontWeight: 'bold', color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_description_text')}</Text>
+                            <Spacer />
+                            <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_1_headline')}</Text>
+                            <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_1_text')}</Text>
+                            <Spacer />
+                            <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_2_headline')}</Text>
+                            <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_2_text')}</Text>
+                        </View>
+                    })}>
+                        <Image style={{width: cx(16), height: cx(16), tintColor: '#ff6600'}} source={{uri: res.ic_info}}/>
+                    </TouchableOpacity>
+                </View>
+                <Segmented 
+                    options={props.directOptions}
+                    value={props.directValue}
+                    onChange={props.directChange}
+                />
+                <Spacer />
+            </View>}
+
+            {props.fanEnable && props.isSupportMode && <View style={{marginHorizontal: cx(16)}}>
+                <View style={{flexDirection: 'row', marginBottom: cx(2), alignItems: 'center'}}>
+                    <Text style={{marginRight: cx(5), color: '#000'}}>{I18n.getLang('ceiling_fan_tile_uvc_fan_mode')}</Text>
+                    <TouchableOpacity onPress={() => Popup({
+                        title: I18n.getLang('ceiling_fan_mode_info_headline'),
+                        confirmText: I18n.getLang('ceiling_fan_direction_info_button_label'),
+                        content: <View>
+                            <Text style={{fontWeight: 'bold', color:'#000'}}>{I18n.getLang('ceiling_fan_mode_info_description_text')}</Text>
+                            <Spacer />
+                            <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_1_headline')}</Text>
+                            <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_1_text')}</Text>
+                            <Spacer />
+                            <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_2_headline')}</Text>
+                            <Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_2_text')}</Text>
+                        </View>
+                    })}>
+                        <Image style={{width: cx(16), height: cx(16), tintColor: '#ff6600'}} source={{uri: res.ic_info}}/>
+                    </TouchableOpacity>
+                </View>
+                <Segmented 
+                    options={props.modeOptions}
+                    value={props.modeValue}
+                    onChange={props.modeChange}
+                />
+                <Spacer />
+            </View>}
+
+            {props.fanEnable && props.isSupportDisinfect && <>
+                <LdvSwitch 
+                    enable={props.disinfect || false}
+                    setEnable={props.disinfectChange}
+                    color={''}
+                    colorAlpha={1}
+                    title={'1'}/>
+                <Spacer height={cx(16)}/>
+            </>}
+        </Card>
+    )
+}
+
+export default FanAdjustView

package/src/components/Popup.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { View, Text, TouchableOpacity } from 'react-native'
+import { Utils, Popup } from 'tuya-panel-kit'
+
+const { convertX: cx, height } = Utils.RatioUtils
+
+interface InformationPopupProps{
+    title: string
+    confirmText: string
+    content: any
+}
+
+const InformationPopup = (props: InformationPopupProps) => {
+    console.log(props, '< --- props')
+
+  const titleNode = () => {
+    return (
+      <View style={{ flexDirection: 'row', height: cx(60), justifyContent:'space-between' }}>
+        <View style={{ flexDirection: 'column-reverse', flex: 1, alignItems: 'center',paddingLeft: cx(12) }}>
+          <Text style={{
+            fontSize: cx(16),
+            fontWeight: 'bold',
+            color: '#000000',
+            paddingBottom: cx(12),
+            
+          }}>{props.title}</Text>
+        </View>
+        <TouchableOpacity
+          style={{
+            flexDirection: 'column-reverse',
+            alignItems:'center',
+            paddingBottom: cx(12),
+            paddingRight: cx(6)
+          }}
+          onPress={() => Popup.close()}
+        >
+          <Text
+            style={{
+              fontSize: cx(12),
+              color: '#FF6600',
+            }}
+          >
+            {props.confirmText}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  Popup.custom({
+    content: <View style={{height: height - cx(60), padding: cx(24)}}>
+      {props.content}
+    </View>,
+    title: titleNode(),
+    footer: null,
+    confirmText: '',
+    cancelText: '',
+    onMaskPress: ({ close }) => {
+      close()
+    },
+    onConfirm: () => {
+      Popup.close()
+    },
+    footerWrapperStyle:{
+      display: 'none'
+    }
+  })
+
+
+}
+
+export default InformationPopup

package/src/components/Segmented.tsx

@@ -0,0 +1,76 @@
+import React, { ReactNode } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from "react-native";
+import { Utils } from 'tuya-panel-kit'
+
+const { convertX: cx } = Utils.RatioUtils
+
+interface SegmentedItem{
+    label: ReactNode
+    value: string
+}
+interface SegmentedProps{
+    value?: string | number
+    options?: SegmentedItem[]
+    onChange?: (v:string) => void
+    style?: ViewStyle
+}
+
+const Segmented = (props: SegmentedProps) =>{
+    return (
+        <View style={[styles.wrap_container, props.style]}>
+            {props.options && props.options.map((item,idx) => (
+                <TouchableOpacity
+                    style={[
+                        styles.segmented_item,
+                        idx === 0 && styles.segmented_item_first,
+                        idx + 1 === props.options?.length && styles.segmented_item_last,
+                        item.value === props.value && styles.segmented_item_check
+                    ]}
+                    onPress={() => props.onChange && props.onChange(item.value)}
+                    key={idx}
+                >
+                    <Text style={[
+                        styles.segmented_text,
+                        item.value === props.value && styles.segmented_text_check
+                        ]}>{item.label}</Text>
+                </TouchableOpacity>
+            ))}
+        </View>
+    )
+}
+
+export default Segmented
+
+const styles = StyleSheet.create({
+    wrap_container:{
+        flexDirection: 'row',
+        height: cx(42),
+        backgroundColor: '#f6f6f6',
+        padding: cx(2),
+        borderRadius: cx(8)
+    },
+    segmented_item:{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff'
+    },
+    segmented_item_first:{
+        borderBottomLeftRadius: cx(8),
+        borderTopLeftRadius: cx(8),
+    },
+    segmented_item_last:{
+        borderBottomRightRadius: cx(8),
+        borderTopRightRadius: cx(8)
+    },
+    segmented_item_check:{
+        backgroundColor: '#f60'
+    },
+    segmented_text:{
+        fontSize: cx(16),
+        color: '#999',
+    },
+    segmented_text_check:{
+        color: '#fff'
+    }
+})