@ledvance/base 1.3.83 → 1.3.85
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/Cell.tsx +46 -21
- package/src/config/dark-theme.ts +6 -0
- package/src/config/light-theme.ts +6 -0
- package/src/hooks/Hooks.ts +52 -0
package/package.json
CHANGED
package/src/components/Cell.tsx
CHANGED
|
@@ -1,17 +1,23 @@
|
|
|
1
|
-
import {IconFont, Utils} from 'tuya-panel-kit'
|
|
2
|
-
import {StyleProp, Text, TextStyle, TouchableOpacity, View, ViewStyle} from 'react-native'
|
|
1
|
+
import { IconFont, Utils } from 'tuya-panel-kit'
|
|
2
|
+
import { StyleProp, Text, TextStyle, TouchableOpacity, View, ViewStyle, Image, ImageSourcePropType, ImageStyle } from 'react-native'
|
|
3
3
|
import React from 'react'
|
|
4
4
|
import ThemeType from "../config/themeType";
|
|
5
5
|
|
|
6
6
|
const cx = Utils.RatioUtils.convertX
|
|
7
|
-
const {withTheme} = Utils.ThemeUtils
|
|
7
|
+
const { withTheme } = Utils.ThemeUtils
|
|
8
8
|
|
|
9
9
|
interface CellProps {
|
|
10
10
|
theme?: ThemeType
|
|
11
|
+
icon?: ImageSourcePropType
|
|
12
|
+
iconStyle?: StyleProp<ImageStyle>
|
|
11
13
|
title: string,
|
|
12
14
|
value: string,
|
|
13
15
|
onPress: () => void,
|
|
16
|
+
hideArrow?: boolean
|
|
14
17
|
style?: StyleProp<ViewStyle>
|
|
18
|
+
contentStyle?: StyleProp<ViewStyle>
|
|
19
|
+
titleStyle?: StyleProp<TextStyle>
|
|
20
|
+
valueStyle?: StyleProp<TextStyle>
|
|
15
21
|
}
|
|
16
22
|
|
|
17
23
|
export default withTheme(function Cell(props: CellProps) {
|
|
@@ -26,38 +32,53 @@ export default withTheme(function Cell(props: CellProps) {
|
|
|
26
32
|
backgroundColor: props.theme?.card.background,
|
|
27
33
|
}, props.style]}
|
|
28
34
|
onPress={props.onPress}>
|
|
29
|
-
<CellContent
|
|
35
|
+
<CellContent
|
|
36
|
+
icon={props.icon}
|
|
37
|
+
iconStyle={props.iconStyle}
|
|
38
|
+
title={props.title}
|
|
39
|
+
titleStyle={props.titleStyle}
|
|
40
|
+
value={props.value}
|
|
41
|
+
valueStyle={props.valueStyle}
|
|
42
|
+
hideArrow={props.hideArrow}
|
|
43
|
+
style={props.contentStyle}
|
|
44
|
+
/>
|
|
30
45
|
</TouchableOpacity>
|
|
31
46
|
)
|
|
32
47
|
}) as React.ComponentType<CellProps>
|
|
33
48
|
|
|
34
49
|
interface CellContentProps {
|
|
35
50
|
theme?: ThemeType
|
|
51
|
+
icon?: ImageSourcePropType
|
|
52
|
+
iconStyle?: StyleProp<ImageStyle>
|
|
36
53
|
title: string
|
|
37
54
|
value: string
|
|
38
55
|
style?: StyleProp<ViewStyle>
|
|
39
56
|
titleStyle?: StyleProp<TextStyle>
|
|
40
57
|
valueStyle?: StyleProp<TextStyle>
|
|
41
|
-
|
|
58
|
+
hideArrow?: boolean
|
|
59
|
+
arrowStyle?: { color?: any, size?: number }
|
|
42
60
|
}
|
|
43
61
|
|
|
44
62
|
const CellContentBase = (props: CellContentProps) => {
|
|
45
63
|
return (
|
|
46
64
|
<View
|
|
47
65
|
style={[
|
|
48
|
-
{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'},
|
|
66
|
+
{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
|
49
67
|
props.style,
|
|
50
68
|
]}>
|
|
51
|
-
<
|
|
52
|
-
style={[
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
69
|
+
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
70
|
+
{props.icon && (<Image source={props.icon} style={[{ width: cx(24), height: cx(24), marginRight: cx(10) }, props.iconStyle]} />)}
|
|
71
|
+
<Text
|
|
72
|
+
style={[
|
|
73
|
+
{
|
|
74
|
+
fontSize: cx(14),
|
|
75
|
+
color: props.theme?.global.secondFontColor,
|
|
76
|
+
fontFamily: 'helvetica_neue_lt_std_roman',
|
|
77
|
+
},
|
|
78
|
+
props.titleStyle,
|
|
79
|
+
]}>{props.title}</Text>
|
|
80
|
+
</View>
|
|
81
|
+
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
61
82
|
<Text style={[
|
|
62
83
|
{
|
|
63
84
|
fontSize: cx(14),
|
|
@@ -66,11 +87,15 @@ const CellContentBase = (props: CellContentProps) => {
|
|
|
66
87
|
},
|
|
67
88
|
props.valueStyle,
|
|
68
89
|
]}>{props.value}</Text>
|
|
69
|
-
<View style={{width: cx(4)}}/>
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
90
|
+
<View style={{ width: cx(4) }} />
|
|
91
|
+
{
|
|
92
|
+
!props.hideArrow && (
|
|
93
|
+
<IconFont
|
|
94
|
+
name="arrow"
|
|
95
|
+
color={props.arrowStyle?.color || props.theme?.global.secondFontColor}
|
|
96
|
+
size={props.arrowStyle?.size || cx(11)} />
|
|
97
|
+
)
|
|
98
|
+
}
|
|
74
99
|
</View>
|
|
75
100
|
</View>
|
|
76
101
|
)
|
package/src/config/dark-theme.ts
CHANGED
|
@@ -63,6 +63,12 @@ const darkTheme = {
|
|
|
63
63
|
border: '#888888',
|
|
64
64
|
fontColor: '#ffffff',
|
|
65
65
|
},
|
|
66
|
+
tabBar: {
|
|
67
|
+
background: '#2a2a2a',
|
|
68
|
+
active: '#ffffff',
|
|
69
|
+
inactive: '#4a4a4a',
|
|
70
|
+
divider: '#e0e0e0',
|
|
71
|
+
},
|
|
66
72
|
dialog: {
|
|
67
73
|
width: cx(315), // 弹窗容器宽度
|
|
68
74
|
bg: "#2a2a2a", // 弹窗背景色
|
|
@@ -63,6 +63,12 @@ const lightTheme = {
|
|
|
63
63
|
border: '#666666',
|
|
64
64
|
fontColor: '#000000',
|
|
65
65
|
},
|
|
66
|
+
tabBar: {
|
|
67
|
+
background: '#ffffff',
|
|
68
|
+
active: '#ff6600',
|
|
69
|
+
inactive: '#666666',
|
|
70
|
+
divider: '#e0e0e0'
|
|
71
|
+
},
|
|
66
72
|
dialog: {
|
|
67
73
|
width: cx(315), // 弹窗容器宽度
|
|
68
74
|
bg: "#ffffff", // 弹窗背景色
|
package/src/hooks/Hooks.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useRoute, useNavigation } from '@react-navigation/core'
|
|
2
|
+
import { Result } from 'models/modules/Result'
|
|
2
3
|
import { useCallback, useEffect, useRef } from 'react'
|
|
3
4
|
|
|
4
5
|
export function createParams<T>(params: T): T {
|
|
@@ -59,3 +60,54 @@ export function useDpResponseValidator(timeoutMs: number = 1000) {
|
|
|
59
60
|
onDpResponse,
|
|
60
61
|
};
|
|
61
62
|
}
|
|
63
|
+
|
|
64
|
+
interface IControlData {
|
|
65
|
+
colorMode: boolean
|
|
66
|
+
hue: number
|
|
67
|
+
saturation: number
|
|
68
|
+
value: number
|
|
69
|
+
brightness: number
|
|
70
|
+
temperature: number
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
interface IControlDataOptions {
|
|
74
|
+
mode?: 0 | 1 // 0: 跳变, 1: 渐变
|
|
75
|
+
saturationConvert?: (v: number) => number
|
|
76
|
+
valueConvert?: (v: number) => number
|
|
77
|
+
temperatureConvert?: (v: number) => number
|
|
78
|
+
brightnessConvert?: (v: number) => number
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* 通用控制支持device和group
|
|
83
|
+
* @param control Tuya Control Formatter
|
|
84
|
+
* @param sendValueFunc send tuya control function
|
|
85
|
+
* @returns
|
|
86
|
+
*/
|
|
87
|
+
export function useControlData(control: any, sendValueFunc: (value: any) => Promise<Result<any>>): (
|
|
88
|
+
controlValue: IControlData,
|
|
89
|
+
options?: IControlDataOptions
|
|
90
|
+
) => Promise<any> {
|
|
91
|
+
const setControlData = useCallback(
|
|
92
|
+
async (controlValue: IControlData, options: IControlDataOptions = {}) => {
|
|
93
|
+
const {
|
|
94
|
+
mode = 1,
|
|
95
|
+
saturationConvert = (v: number) => Math.round(v * 10),
|
|
96
|
+
valueConvert = (v: number) => Math.round(v * 10),
|
|
97
|
+
temperatureConvert = (v: number) => Math.round(v * 10),
|
|
98
|
+
brightnessConvert = (v: number) => Math.round(v * 10),
|
|
99
|
+
} = options
|
|
100
|
+
const value = control.format({
|
|
101
|
+
mode: mode,
|
|
102
|
+
hue: controlValue.colorMode ? controlValue.hue : 0,
|
|
103
|
+
saturation: controlValue.colorMode ? saturationConvert(controlValue.saturation) : 0,
|
|
104
|
+
value: controlValue.colorMode ? valueConvert(controlValue.value) : 0,
|
|
105
|
+
temperature: !controlValue.colorMode ? temperatureConvert(controlValue.temperature) : 0,
|
|
106
|
+
brightness: !controlValue.colorMode ? brightnessConvert(controlValue.brightness) : 0,
|
|
107
|
+
});
|
|
108
|
+
return await sendValueFunc(value)
|
|
109
|
+
},
|
|
110
|
+
[]
|
|
111
|
+
);
|
|
112
|
+
return setControlData
|
|
113
|
+
}
|