@ledvance/base 1.0.35 → 1.0.37
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/FanAdjustView.tsx +124 -0
- package/src/components/Popup.tsx +72 -0
- package/src/components/Segmented.tsx +76 -0
- package/src/i18n/strings.ts +546 -98
- package/src/res/Propup.tsx +72 -0
- package/src/res/iconsMaterialOutlinedCommunicationInfo.png +0 -0
- package/src/res/iconsMaterialOutlinedCommunicationInfo@2x.png +0 -0
- package/src/res/iconsMaterialOutlinedCommunicationInfo@3x.png +0 -0
package/package.json
CHANGED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Utils } from 'tuya-panel-kit'
|
|
3
|
+
import Card from './Card'
|
|
4
|
+
import {View, Text, ViewProps, Image, TouchableOpacity} from 'react-native'
|
|
5
|
+
import LdvSwitch from './ldvSwitch'
|
|
6
|
+
import I18n from '@i18n'
|
|
7
|
+
import LdvSlider from './ldvSlider'
|
|
8
|
+
import Spacer from './Spacer'
|
|
9
|
+
import res from '../res'
|
|
10
|
+
import Segmented from './Segmented'
|
|
11
|
+
import Popup from './Popup'
|
|
12
|
+
const { convertX: cx } = Utils.RatioUtils
|
|
13
|
+
|
|
14
|
+
interface FanAdjustViewProps extends ViewProps {
|
|
15
|
+
fanEnable: boolean
|
|
16
|
+
fanSpeed: number
|
|
17
|
+
maxFanSpeed?: number
|
|
18
|
+
isSupportDirection?: boolean
|
|
19
|
+
isSupportDisinfect?: boolean
|
|
20
|
+
isSupportMode?: boolean
|
|
21
|
+
directValue?: string
|
|
22
|
+
modeValue?: string
|
|
23
|
+
disinfect?: boolean
|
|
24
|
+
directOptions?:any[]
|
|
25
|
+
modeOptions?: any[]
|
|
26
|
+
directChange?: (direct:string) => void
|
|
27
|
+
modeChange?: (mode: string) => void
|
|
28
|
+
disinfectChange?: (disinfect: boolean) => void
|
|
29
|
+
onFanSwitch: (fanEnable: boolean) => void
|
|
30
|
+
onFanSpeedChange?: (fanSpeed: number) => void
|
|
31
|
+
onFanSpeedChangeComplete: (fanSpeed: number) => void
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
const FanAdjustView = (props: FanAdjustViewProps) => {
|
|
35
|
+
return (
|
|
36
|
+
<Card
|
|
37
|
+
style={props.style}>
|
|
38
|
+
<LdvSwitch
|
|
39
|
+
title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_headline')}
|
|
40
|
+
enable={props.fanEnable}
|
|
41
|
+
setEnable={props.onFanSwitch}
|
|
42
|
+
color={''}
|
|
43
|
+
colorAlpha={1}/>
|
|
44
|
+
{props.fanEnable && (
|
|
45
|
+
<View>
|
|
46
|
+
<LdvSlider
|
|
47
|
+
title={I18n.getLang('add_new_dynamic_mood_ceiling_fan_field_text')}
|
|
48
|
+
value={props.fanSpeed}
|
|
49
|
+
min={1}
|
|
50
|
+
max={props.maxFanSpeed}
|
|
51
|
+
onValueChange={props.onFanSpeedChange}
|
|
52
|
+
onSlidingComplete={props.onFanSpeedChangeComplete}
|
|
53
|
+
subTitleStr={props.fanSpeed + `/${props.maxFanSpeed}`}/>
|
|
54
|
+
<Spacer/>
|
|
55
|
+
</View>
|
|
56
|
+
)}
|
|
57
|
+
{props.isSupportDirection && <View style={{marginHorizontal: cx(16)}}>
|
|
58
|
+
<View style={{flexDirection: 'row', marginBottom: cx(2), alignItems: 'center'}}>
|
|
59
|
+
<Text style={{marginRight: cx(5)}}>{I18n.getLang('ceiling_fan_tile_uvc_fan_direction')}</Text>
|
|
60
|
+
<TouchableOpacity onPress={() => Popup({
|
|
61
|
+
title: I18n.getLang('ceiling_fan_direction_info_headline'),
|
|
62
|
+
confirmText: I18n.getLang('ceiling_fan_direction_info_button_label'),
|
|
63
|
+
content: <View>
|
|
64
|
+
<Text style={{fontWeight: 'bold', color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_description_text')}</Text>
|
|
65
|
+
<Spacer />
|
|
66
|
+
<Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_1_headline')}</Text>
|
|
67
|
+
<Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_1_text')}</Text>
|
|
68
|
+
<Spacer />
|
|
69
|
+
<Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_2_headline')}</Text>
|
|
70
|
+
<Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_direction_info_option_2_text')}</Text>
|
|
71
|
+
</View>
|
|
72
|
+
})}>
|
|
73
|
+
<Image style={{width: cx(16), height: cx(16), tintColor: '#ff6600'}} source={{uri: res.ic_info}}/>
|
|
74
|
+
</TouchableOpacity>
|
|
75
|
+
</View>
|
|
76
|
+
<Segmented
|
|
77
|
+
options={props.directOptions}
|
|
78
|
+
value={props.directValue}
|
|
79
|
+
onChange={props.directChange}
|
|
80
|
+
/>
|
|
81
|
+
<Spacer />
|
|
82
|
+
</View>}
|
|
83
|
+
|
|
84
|
+
{props.isSupportMode && <View style={{marginHorizontal: cx(16)}}>
|
|
85
|
+
<View style={{flexDirection: 'row', marginBottom: cx(2), alignItems: 'center'}}>
|
|
86
|
+
<Text style={{marginRight: cx(5)}}>{I18n.getLang('ceiling_fan_tile_uvc_fan_direction')}</Text>
|
|
87
|
+
<TouchableOpacity onPress={() => Popup({
|
|
88
|
+
title: I18n.getLang('ceiling_fan_mode_info_headline'),
|
|
89
|
+
confirmText: I18n.getLang('ceiling_fan_direction_info_button_label'),
|
|
90
|
+
content: <View>
|
|
91
|
+
<Text style={{fontWeight: 'bold', color:'#000'}}>{I18n.getLang('ceiling_fan_mode_info_description_text')}</Text>
|
|
92
|
+
<Spacer />
|
|
93
|
+
<Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_1_headline')}</Text>
|
|
94
|
+
<Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_1_text')}</Text>
|
|
95
|
+
<Spacer />
|
|
96
|
+
<Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_2_headline')}</Text>
|
|
97
|
+
<Text style={{color: '#000'}}>{I18n.getLang('ceiling_fan_mode_info_option_2_text')}</Text>
|
|
98
|
+
</View>
|
|
99
|
+
})}>
|
|
100
|
+
<Image style={{width: cx(16), height: cx(16), tintColor: '#ff6600'}} source={{uri: res.ic_info}}/>
|
|
101
|
+
</TouchableOpacity>
|
|
102
|
+
</View>
|
|
103
|
+
<Segmented
|
|
104
|
+
options={props.modeOptions}
|
|
105
|
+
value={props.modeValue}
|
|
106
|
+
onChange={props.modeChange}
|
|
107
|
+
/>
|
|
108
|
+
<Spacer />
|
|
109
|
+
</View>}
|
|
110
|
+
|
|
111
|
+
{props.isSupportDisinfect && <>
|
|
112
|
+
<LdvSwitch
|
|
113
|
+
enable={props.disinfect || false}
|
|
114
|
+
setEnable={props.disinfectChange}
|
|
115
|
+
color={''}
|
|
116
|
+
colorAlpha={1}
|
|
117
|
+
title={'1'}/>
|
|
118
|
+
<Spacer height={cx(16)}/>
|
|
119
|
+
</>}
|
|
120
|
+
</Card>
|
|
121
|
+
)
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
export default FanAdjustView
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { View, Text, TouchableOpacity } from 'react-native'
|
|
3
|
+
import { Utils, Popup } from 'tuya-panel-kit'
|
|
4
|
+
|
|
5
|
+
const { convertX: cx, height } = Utils.RatioUtils
|
|
6
|
+
|
|
7
|
+
interface InformationPopupProps{
|
|
8
|
+
title: string
|
|
9
|
+
confirmText: string
|
|
10
|
+
content: any
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const InformationPopup = (props: InformationPopupProps) => {
|
|
14
|
+
console.log(props, '< --- props')
|
|
15
|
+
|
|
16
|
+
const titleNode = () => {
|
|
17
|
+
return (
|
|
18
|
+
<View style={{ flexDirection: 'row', height: cx(60), justifyContent:'space-between' }}>
|
|
19
|
+
<View style={{ flexDirection: 'column-reverse', flex: 1, alignItems: 'center',paddingLeft: cx(12) }}>
|
|
20
|
+
<Text style={{
|
|
21
|
+
fontSize: cx(16),
|
|
22
|
+
fontWeight: 'bold',
|
|
23
|
+
color: '#000000',
|
|
24
|
+
paddingBottom: cx(12),
|
|
25
|
+
|
|
26
|
+
}}>{props.title}</Text>
|
|
27
|
+
</View>
|
|
28
|
+
<TouchableOpacity
|
|
29
|
+
style={{
|
|
30
|
+
flexDirection: 'column-reverse',
|
|
31
|
+
alignItems:'center',
|
|
32
|
+
paddingBottom: cx(12),
|
|
33
|
+
paddingRight: cx(6)
|
|
34
|
+
}}
|
|
35
|
+
onPress={() => Popup.close()}
|
|
36
|
+
>
|
|
37
|
+
<Text
|
|
38
|
+
style={{
|
|
39
|
+
fontSize: cx(12),
|
|
40
|
+
color: '#FF6600',
|
|
41
|
+
}}
|
|
42
|
+
>
|
|
43
|
+
{props.confirmText}
|
|
44
|
+
</Text>
|
|
45
|
+
</TouchableOpacity>
|
|
46
|
+
</View>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
Popup.custom({
|
|
51
|
+
content: <View style={{height: height - cx(60), padding: cx(24)}}>
|
|
52
|
+
{props.content}
|
|
53
|
+
</View>,
|
|
54
|
+
title: titleNode(),
|
|
55
|
+
footer: null,
|
|
56
|
+
confirmText: '',
|
|
57
|
+
cancelText: '',
|
|
58
|
+
onMaskPress: ({ close }) => {
|
|
59
|
+
close()
|
|
60
|
+
},
|
|
61
|
+
onConfirm: () => {
|
|
62
|
+
Popup.close()
|
|
63
|
+
},
|
|
64
|
+
footerWrapperStyle:{
|
|
65
|
+
display: 'none'
|
|
66
|
+
}
|
|
67
|
+
})
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export default InformationPopup
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from "react-native";
|
|
3
|
+
import { Utils } from 'tuya-panel-kit'
|
|
4
|
+
|
|
5
|
+
const { convertX: cx } = Utils.RatioUtils
|
|
6
|
+
|
|
7
|
+
interface SegmentedItem{
|
|
8
|
+
label: ReactNode
|
|
9
|
+
value: string
|
|
10
|
+
}
|
|
11
|
+
interface SegmentedProps{
|
|
12
|
+
value?: string | number
|
|
13
|
+
options?: SegmentedItem[]
|
|
14
|
+
onChange?: (v:string) => void
|
|
15
|
+
style?: ViewStyle
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const Segmented = (props: SegmentedProps) =>{
|
|
19
|
+
return (
|
|
20
|
+
<View style={[styles.wrap_container, props.style]}>
|
|
21
|
+
{props.options && props.options.map((item,idx) => (
|
|
22
|
+
<TouchableOpacity
|
|
23
|
+
style={[
|
|
24
|
+
styles.segmented_item,
|
|
25
|
+
idx === 0 && styles.segmented_item_first,
|
|
26
|
+
idx === props.options?.length && styles.segmented_item_last,
|
|
27
|
+
item.value === props.value && styles.segmented_item_check
|
|
28
|
+
]}
|
|
29
|
+
onPress={() => props.onChange && props.onChange(item.value)}
|
|
30
|
+
key={idx}
|
|
31
|
+
>
|
|
32
|
+
<Text style={[
|
|
33
|
+
styles.segmented_text,
|
|
34
|
+
item.value === props.value && styles.segmented_text_check
|
|
35
|
+
]}>{item.label}</Text>
|
|
36
|
+
</TouchableOpacity>
|
|
37
|
+
))}
|
|
38
|
+
</View>
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export default Segmented
|
|
43
|
+
|
|
44
|
+
const styles = StyleSheet.create({
|
|
45
|
+
wrap_container:{
|
|
46
|
+
flexDirection: 'row',
|
|
47
|
+
height: cx(48),
|
|
48
|
+
backgroundColor: '#f6f6f6',
|
|
49
|
+
padding: cx(2),
|
|
50
|
+
borderRadius: cx(7)
|
|
51
|
+
},
|
|
52
|
+
segmented_item:{
|
|
53
|
+
flex: 1,
|
|
54
|
+
alignItems: 'center',
|
|
55
|
+
justifyContent: 'center',
|
|
56
|
+
backgroundColor: '#fff'
|
|
57
|
+
},
|
|
58
|
+
segmented_item_first:{
|
|
59
|
+
borderBottomLeftRadius: cx(7),
|
|
60
|
+
borderTopLeftRadius: cx(7),
|
|
61
|
+
},
|
|
62
|
+
segmented_item_last:{
|
|
63
|
+
borderBottomRightRadius: cx(7),
|
|
64
|
+
borderTopRightRadius: cx(7)
|
|
65
|
+
},
|
|
66
|
+
segmented_item_check:{
|
|
67
|
+
backgroundColor: '#f60'
|
|
68
|
+
},
|
|
69
|
+
segmented_text:{
|
|
70
|
+
fontSize: cx(16),
|
|
71
|
+
color: '#999',
|
|
72
|
+
},
|
|
73
|
+
segmented_text_check:{
|
|
74
|
+
color: '#fff'
|
|
75
|
+
}
|
|
76
|
+
})
|