@ledvance/base 1.3.3 → 1.3.4
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/api/native.ts +11 -0
- package/src/components/Page.tsx +5 -3
- package/src/components/Tag.tsx +29 -26
- package/src/components/ldvTopName.tsx +18 -17
- package/src/components/segmentControl.tsx +12 -9
- package/src/config/dark-theme.ts +16 -1
- package/src/config/light-theme.ts +17 -2
- package/src/i18n/strings.ts +19403 -19403
package/package.json
CHANGED
package/src/api/native.ts
CHANGED
|
@@ -24,6 +24,7 @@ interface LDVDevicePanelManager {
|
|
|
24
24
|
getGroupDevices: (tyGroupId: number) => Promise<NativeResult<string>>
|
|
25
25
|
getSystemTimeFormat: () => Promise<number>
|
|
26
26
|
getMicrophoneAccess: (res:any) => Promise<Result<any>>
|
|
27
|
+
firebaseEvent: (dimensions:Record<any, any>) => Promise<NativeResult<any>>
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
export enum UADeviceCategory {
|
|
@@ -351,6 +352,16 @@ export class NativeApi {
|
|
|
351
352
|
}
|
|
352
353
|
}
|
|
353
354
|
|
|
355
|
+
static async putFlagFirebase(dimensions: Record<any, any>){
|
|
356
|
+
const nativeResult = await devicePanel.firebaseEvent({
|
|
357
|
+
eventName: 'select_country_flag',
|
|
358
|
+
dimensions
|
|
359
|
+
})
|
|
360
|
+
return {
|
|
361
|
+
success: nativeResult.result,
|
|
362
|
+
msg: nativeResult.msg,
|
|
363
|
+
}
|
|
364
|
+
}
|
|
354
365
|
}
|
|
355
366
|
|
|
356
367
|
// 打开下载文件
|
package/src/components/Page.tsx
CHANGED
|
@@ -22,8 +22,9 @@ interface PageProps extends PropsWithChildren<ViewProps> {
|
|
|
22
22
|
headlineText?: string
|
|
23
23
|
headlineIcon?: string | number
|
|
24
24
|
onHeadlineIconClick?: () => void
|
|
25
|
-
|
|
25
|
+
headlineIconContent?: React.ReactNode
|
|
26
26
|
headlineTopContent?: React.ReactNode
|
|
27
|
+
headlineContent?: React.ReactNode
|
|
27
28
|
showGreenery?: boolean
|
|
28
29
|
greeneryIcon?: string | undefined | number
|
|
29
30
|
loading?: boolean
|
|
@@ -81,15 +82,16 @@ const Page = (props: PageProps) => {
|
|
|
81
82
|
rightButtonStyle={props.rightButtonStyle}
|
|
82
83
|
onRightButtonPress={props.rightButtonIconClick}
|
|
83
84
|
rightButtonDisabled={disabled}/>
|
|
84
|
-
{(!!props.headlineText) &&
|
|
85
|
+
{(!!props.headlineText || !!props.headlineContent) &&
|
|
85
86
|
<LdvTopName
|
|
86
87
|
title={props.headlineText}
|
|
87
88
|
rightIcon={props.headlineIcon}
|
|
88
89
|
rightIconClick={props.onHeadlineIconClick}
|
|
89
90
|
showGreenery={props.showGreenery}
|
|
90
91
|
greeneryIcon={props.greeneryIcon}
|
|
91
|
-
|
|
92
|
+
headlineIconContent={props.headlineIconContent}
|
|
92
93
|
headlineTopContent={props.headlineTopContent}
|
|
94
|
+
headlineContent={props.headlineContent}
|
|
93
95
|
/>}
|
|
94
96
|
{props.children}
|
|
95
97
|
</View>
|
package/src/components/Tag.tsx
CHANGED
|
@@ -4,20 +4,47 @@ import {Utils} from 'tuya-panel-kit'
|
|
|
4
4
|
import res from '../res'
|
|
5
5
|
|
|
6
6
|
const cx = Utils.RatioUtils.convertX
|
|
7
|
+
const { withTheme } = Utils.ThemeUtils
|
|
7
8
|
|
|
8
9
|
interface TagProps extends ViewProps {
|
|
10
|
+
theme?: any
|
|
9
11
|
checked: boolean
|
|
10
12
|
text: string
|
|
11
13
|
onCheckedChange: (boolean) => void
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
const Tag = (props: TagProps) => {
|
|
17
|
+
|
|
18
|
+
const styles = StyleSheet.create({
|
|
19
|
+
root: {
|
|
20
|
+
height: cx(24),
|
|
21
|
+
flexDirection: 'row',
|
|
22
|
+
justifyContent: 'center',
|
|
23
|
+
alignItems: 'center',
|
|
24
|
+
borderWidth: cx(1),
|
|
25
|
+
borderColor: props.theme.global.brand,
|
|
26
|
+
borderRadius: cx(12),
|
|
27
|
+
},
|
|
28
|
+
text: {
|
|
29
|
+
marginStart: cx(12),
|
|
30
|
+
color: props.theme.global.brand,
|
|
31
|
+
fontSize: cx(14),
|
|
32
|
+
fontFamily: 'helvetica_neue_lt_std_roman',
|
|
33
|
+
},
|
|
34
|
+
icon: {
|
|
35
|
+
width: cx(12),
|
|
36
|
+
height: cx(12),
|
|
37
|
+
marginEnd: cx(6),
|
|
38
|
+
tintColor: props.theme.global.brand,
|
|
39
|
+
},
|
|
40
|
+
})
|
|
41
|
+
|
|
15
42
|
return (
|
|
16
43
|
<TouchableOpacity
|
|
17
44
|
onPress={() => {
|
|
18
45
|
props.onCheckedChange(!props.checked)
|
|
19
46
|
}}>
|
|
20
|
-
<View style={[styles.root, props.checked ? {backgroundColor:
|
|
47
|
+
<View style={[styles.root, props.checked ? {backgroundColor: props.theme.global.thirdBrand} : {}, props.style]}>
|
|
21
48
|
<Text style={[styles.text, {marginEnd: cx(props.checked ? 4 : 12)}]}>{props.text}</Text>
|
|
22
49
|
{
|
|
23
50
|
props.checked &&
|
|
@@ -30,28 +57,4 @@ const Tag = (props: TagProps) => {
|
|
|
30
57
|
)
|
|
31
58
|
}
|
|
32
59
|
|
|
33
|
-
|
|
34
|
-
root: {
|
|
35
|
-
height: cx(24),
|
|
36
|
-
flexDirection: 'row',
|
|
37
|
-
justifyContent: 'center',
|
|
38
|
-
alignItems: 'center',
|
|
39
|
-
borderWidth: cx(1),
|
|
40
|
-
borderColor: '#ff6600',
|
|
41
|
-
borderRadius: cx(12),
|
|
42
|
-
},
|
|
43
|
-
text: {
|
|
44
|
-
marginStart: cx(12),
|
|
45
|
-
color: '#ff6600',
|
|
46
|
-
fontSize: cx(14),
|
|
47
|
-
fontFamily: 'helvetica_neue_lt_std_roman',
|
|
48
|
-
},
|
|
49
|
-
icon: {
|
|
50
|
-
width: cx(12),
|
|
51
|
-
height: cx(12),
|
|
52
|
-
marginEnd: cx(6),
|
|
53
|
-
tintColor: '#F60',
|
|
54
|
-
},
|
|
55
|
-
})
|
|
56
|
-
|
|
57
|
-
export default Tag
|
|
60
|
+
export default withTheme(Tag)
|
|
@@ -1,25 +1,26 @@
|
|
|
1
1
|
import Spacer from '@ledvance/base/src/components/Spacer'
|
|
2
2
|
import React from 'react'
|
|
3
|
-
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
|
|
4
|
-
import {Utils} from 'tuya-panel-kit'
|
|
3
|
+
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
|
|
4
|
+
import { Utils } from 'tuya-panel-kit'
|
|
5
5
|
|
|
6
6
|
const cx = Utils.RatioUtils.convertX
|
|
7
7
|
const { withTheme } = Utils.ThemeUtils
|
|
8
8
|
|
|
9
9
|
interface LdvTopNameProps {
|
|
10
10
|
theme?: any
|
|
11
|
-
title
|
|
11
|
+
title?: string,
|
|
12
12
|
rightIcon?: string | undefined | number,
|
|
13
13
|
rightIconClick?: () => void
|
|
14
14
|
showGreenery?: boolean
|
|
15
15
|
greeneryIcon?: string | undefined | number
|
|
16
|
-
|
|
16
|
+
headlineIconContent?: React.ReactNode
|
|
17
17
|
headlineTopContent?: React.ReactNode
|
|
18
|
+
headlineContent?: React.ReactNode
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
const LdvTopName = (props: LdvTopNameProps) => {
|
|
21
|
-
const rightIcon = typeof props.rightIcon === 'number' ? props.rightIcon : {uri: props.rightIcon}
|
|
22
|
-
const greeneryIcon = typeof props.greeneryIcon === 'number' ? props.greeneryIcon : {uri: props.greeneryIcon}
|
|
22
|
+
const rightIcon = typeof props.rightIcon === 'number' ? props.rightIcon : { uri: props.rightIcon }
|
|
23
|
+
const greeneryIcon = typeof props.greeneryIcon === 'number' ? props.greeneryIcon : { uri: props.greeneryIcon }
|
|
23
24
|
|
|
24
25
|
const styles = StyleSheet.create({
|
|
25
26
|
container: {
|
|
@@ -34,30 +35,30 @@ const LdvTopName = (props: LdvTopNameProps) => {
|
|
|
34
35
|
return (
|
|
35
36
|
<View style={styles.container}>
|
|
36
37
|
{props.headlineTopContent && props.headlineTopContent}
|
|
37
|
-
{!props.headlineTopContent && <Spacer height={cx(38)}/>}
|
|
38
|
+
{!props.headlineTopContent && <Spacer height={cx(38)} />}
|
|
38
39
|
<View
|
|
39
40
|
style={{
|
|
40
41
|
flexDirection: 'row',
|
|
41
42
|
justifyContent: 'space-between',
|
|
42
43
|
alignItems: 'center',
|
|
43
44
|
}}>
|
|
44
|
-
<View style={{flexDirection: 'row', flex: 1}}>
|
|
45
|
+
{props.headlineContent ? props.headlineContent : <View style={{ flexDirection: 'row', flex: 1 }}>
|
|
45
46
|
<Text style={styles.title}>
|
|
46
47
|
{props.title}
|
|
47
48
|
</Text>
|
|
48
49
|
{props.showGreenery && <Image
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
source={greeneryIcon}
|
|
51
|
+
resizeMode="contain"
|
|
52
|
+
style={{ height: cx(16), width: cx(16), left: 0 }}
|
|
52
53
|
/> || null}
|
|
53
|
-
</View>
|
|
54
|
+
</View>}
|
|
54
55
|
{props.rightIcon && <TouchableOpacity
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
56
|
+
onPress={props.rightIconClick}>
|
|
57
|
+
<Image
|
|
58
|
+
style={{ width: cx(24), height: cx(24), tintColor: props.theme.global.brand }}
|
|
59
|
+
source={rightIcon} />
|
|
59
60
|
</TouchableOpacity>}
|
|
60
|
-
{props.
|
|
61
|
+
{props.headlineIconContent && props.headlineIconContent}
|
|
61
62
|
</View>
|
|
62
63
|
</View>
|
|
63
64
|
)
|
|
@@ -3,14 +3,15 @@ import React from 'react'
|
|
|
3
3
|
import {Utils} from 'tuya-panel-kit'
|
|
4
4
|
|
|
5
5
|
const {convertX} = Utils.RatioUtils
|
|
6
|
+
const { withTheme } = Utils.ThemeUtils
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
const SegmentControl = (props) => {
|
|
8
9
|
|
|
9
10
|
const {title1, title2, isFirst, setIsFirst, style, tabStyle} = props
|
|
10
11
|
|
|
11
12
|
return (<View style={{}}>
|
|
12
13
|
<View style={[{
|
|
13
|
-
backgroundColor:
|
|
14
|
+
backgroundColor: props.theme.segment.background,
|
|
14
15
|
marginHorizontal: convertX(24),
|
|
15
16
|
marginVertical: convertX(0),
|
|
16
17
|
borderRadius: convertX(8.9),
|
|
@@ -24,12 +25,12 @@ export default function SegmentControl(props) {
|
|
|
24
25
|
margin: convertX(2),
|
|
25
26
|
borderRadius: convertX(6.9),
|
|
26
27
|
}, isFirst ?
|
|
27
|
-
{backgroundColor:
|
|
28
|
-
{backgroundColor:
|
|
28
|
+
{backgroundColor: props.theme.segment.active, margin: convertX(2), borderRadius: 6.9} :
|
|
29
|
+
{backgroundColor: props.theme.segment.background}, tabStyle]
|
|
29
30
|
} onPress={() => setIsFirst(true)}>
|
|
30
31
|
<Text
|
|
31
32
|
style={{
|
|
32
|
-
color:
|
|
33
|
+
color: props.theme.segment.fontColor,
|
|
33
34
|
fontSize: convertX(12),
|
|
34
35
|
fontFamily: isFirst ? 'helvetica_neue_lt_std_bd' : 'helvetica_neue_lt_std_roman',
|
|
35
36
|
marginVertical: convertX(10),
|
|
@@ -47,13 +48,13 @@ export default function SegmentControl(props) {
|
|
|
47
48
|
borderRadius: convertX(6.9),
|
|
48
49
|
},
|
|
49
50
|
!isFirst ?
|
|
50
|
-
{backgroundColor:
|
|
51
|
-
{backgroundColor:
|
|
51
|
+
{backgroundColor: props.theme.segment.active} :
|
|
52
|
+
{backgroundColor: props.theme.segment.background}, tabStyle]
|
|
52
53
|
}
|
|
53
54
|
onPress={() => setIsFirst(false)}>
|
|
54
55
|
<Text
|
|
55
56
|
style={{
|
|
56
|
-
color:
|
|
57
|
+
color: props.theme.segment.fontColor,
|
|
57
58
|
fontSize: convertX(12),
|
|
58
59
|
fontFamily: isFirst ? 'helvetica_neue_lt_std_roman' : 'helvetica_neue_lt_std_bd',
|
|
59
60
|
marginVertical: convertX(10),
|
|
@@ -63,4 +64,6 @@ export default function SegmentControl(props) {
|
|
|
63
64
|
</TouchableOpacity>
|
|
64
65
|
</View>
|
|
65
66
|
</View>)
|
|
66
|
-
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export default withTheme(SegmentControl)
|
package/src/config/dark-theme.ts
CHANGED
|
@@ -19,7 +19,7 @@ export default {
|
|
|
19
19
|
card: {
|
|
20
20
|
head: '#666',
|
|
21
21
|
background: '#2a2a2a',
|
|
22
|
-
|
|
22
|
+
border: '#f6f6f6',
|
|
23
23
|
fontColor: '#ffffff',
|
|
24
24
|
shadowColor: '#ffffff'
|
|
25
25
|
},
|
|
@@ -39,10 +39,25 @@ export default {
|
|
|
39
39
|
fontColor: '#fff',
|
|
40
40
|
line: '#fff'
|
|
41
41
|
},
|
|
42
|
+
icon: {
|
|
43
|
+
primary: '#f60', /* 明亮的橙色,保持足够的突出 */
|
|
44
|
+
normal: '#a6a6a6', /* 中性灰,适合在深色背景上 */
|
|
45
|
+
disable: '#555555', /* 更深的灰色,表示禁用状态 */
|
|
46
|
+
},
|
|
42
47
|
tag: {
|
|
43
48
|
background: '#737373',
|
|
44
49
|
fontColor: '#fff'
|
|
45
50
|
},
|
|
51
|
+
segment: {
|
|
52
|
+
background: '#3a3a3c',
|
|
53
|
+
active: '#4a4a4c',
|
|
54
|
+
fontColor: '#ffffff',
|
|
55
|
+
},
|
|
56
|
+
addNode: {
|
|
57
|
+
background: '#4a4a4a',
|
|
58
|
+
border: '#888888',
|
|
59
|
+
fontColor: '#fff',
|
|
60
|
+
},
|
|
46
61
|
dialog: {
|
|
47
62
|
width: cx(315), // 弹窗容器宽度
|
|
48
63
|
bg: "#2a2a2a", // 弹窗背景色
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {Utils} from "tuya-panel-kit";
|
|
2
2
|
|
|
3
|
-
const {
|
|
3
|
+
const {convertX: cx} = Utils.RatioUtils
|
|
4
4
|
|
|
5
5
|
export default {
|
|
6
6
|
type: 'light',
|
|
@@ -19,7 +19,7 @@ export default {
|
|
|
19
19
|
card: {
|
|
20
20
|
head: '#DFDEDE',
|
|
21
21
|
background: '#fff',
|
|
22
|
-
|
|
22
|
+
border: '#f6f6f6',
|
|
23
23
|
fontColor: '#000',
|
|
24
24
|
shadowColor: '#000'
|
|
25
25
|
},
|
|
@@ -39,10 +39,25 @@ export default {
|
|
|
39
39
|
fontColor: '#000',
|
|
40
40
|
line: '#cbcbcb'
|
|
41
41
|
},
|
|
42
|
+
icon: {
|
|
43
|
+
primary: '#f60',
|
|
44
|
+
normal: '#666',
|
|
45
|
+
disable: '#ccc',
|
|
46
|
+
},
|
|
42
47
|
tag: {
|
|
43
48
|
background: '#E6E7E8',
|
|
44
49
|
fontColor: '#000'
|
|
45
50
|
},
|
|
51
|
+
segment: {
|
|
52
|
+
background: '#eeeeef',
|
|
53
|
+
active: '#fff',
|
|
54
|
+
fontColor: '#000',
|
|
55
|
+
},
|
|
56
|
+
addNode: {
|
|
57
|
+
background: '#f6f6f6',
|
|
58
|
+
border: '#666',
|
|
59
|
+
fontColor: '#000',
|
|
60
|
+
},
|
|
46
61
|
dialog: {
|
|
47
62
|
width: cx(315), // 弹窗容器宽度
|
|
48
63
|
bg: "#fff", // 弹窗背景色
|